apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: integrate mobile responsiveness in LayoutDataProvider and Header components; adjust sidebar behavior based on device type and improve right panel handling

Browse source
This commit is contained in:
Anish Sarkar 2026-03-11 02:18:33 +05:30
parent 21e7f600be
commit 171bec9ef7
1 changed files with 39 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

59
surfsense_web/components/layout/providers/LayoutDataProvider.tsx
View file

@ -11,6 +11,7 @@ import { toast } from "sonner";
import { currentThreadAtom, resetCurrentThreadAtom } from "@/atoms/chat/current-thread.atom"; import { currentThreadAtom, resetCurrentThreadAtom } from "@/atoms/chat/current-thread.atom";
import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms"; import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom"; import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
import { deleteSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms"; import { deleteSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms"; import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import { currentUserAtom } from "@/atoms/user/user-query.atoms"; import { currentUserAtom } from "@/atoms/user/user-query.atoms";
@ -36,6 +37,7 @@ import {
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { isPageLimitExceededMetadata } from "@/contracts/types/inbox.types"; import { isPageLimitExceededMetadata } from "@/contracts/types/inbox.types";
import { useAnnouncements } from "@/hooks/use-announcements"; import { useAnnouncements } from "@/hooks/use-announcements";
import { useIsMobile } from "@/hooks/use-mobile";
import { useDocumentsProcessing } from "@/hooks/use-documents-processing"; import { useDocumentsProcessing } from "@/hooks/use-documents-processing";
import { useInbox } from "@/hooks/use-inbox"; import { useInbox } from "@/hooks/use-inbox";
import { notificationsApiService } from "@/lib/apis/notifications-api.service"; import { notificationsApiService } from "@/lib/apis/notifications-api.service";
@ -74,6 +76,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
const pathname = usePathname(); const pathname = usePathname();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const isMobile = useIsMobile();
// Announcements // Announcements
const { unreadCount: announcementUnreadCount } = useAnnouncements(); const { unreadCount: announcementUnreadCount } = useAnnouncements();
@ -121,6 +124,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
// Documents sidebar state (shared atom so Composer can toggle it) // Documents sidebar state (shared atom so Composer can toggle it)
const [isDocumentsSidebarOpen, setIsDocumentsSidebarOpen] = useAtom(documentsSidebarOpenAtom); const [isDocumentsSidebarOpen, setIsDocumentsSidebarOpen] = useAtom(documentsSidebarOpenAtom);
const [isDocumentsDocked, setIsDocumentsDocked] = useState(true); const [isDocumentsDocked, setIsDocumentsDocked] = useState(true);
const [isRightPanelCollapsed, setIsRightPanelCollapsed] = useAtom(rightPanelCollapsedAtom);
// Open documents sidebar by default on desktop (docked mode) // Open documents sidebar by default on desktop (docked mode)
const documentsInitialized = useRef(false); const documentsInitialized = useRef(false);
@ -312,13 +316,13 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
isActive: isInboxSidebarOpen, isActive: isInboxSidebarOpen,
badge: totalUnreadCount > 0 ? formatInboxCount(totalUnreadCount) : undefined, badge: totalUnreadCount > 0 ? formatInboxCount(totalUnreadCount) : undefined,
}, },
{ {
title: "Documents", title: "Documents",
url: "#documents", url: "#documents",
icon: SquareLibrary, icon: SquareLibrary,
isActive: isDocumentsSidebarOpen, isActive: isMobile ? isDocumentsSidebarOpen : (isDocumentsSidebarOpen && !isRightPanelCollapsed),
statusIndicator: documentsProcessingStatus, statusIndicator: documentsProcessingStatus,
}, },
{ {
title: "Announcements", title: "Announcements",
url: "#announcements", url: "#announcements",
@ -327,14 +331,16 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
badge: announcementUnreadCount > 0 ? formatInboxCount(announcementUnreadCount) : undefined, badge: announcementUnreadCount > 0 ? formatInboxCount(announcementUnreadCount) : undefined,
}, },
], ],
[ [
isInboxSidebarOpen, isMobile,
isDocumentsSidebarOpen, isInboxSidebarOpen,
totalUnreadCount, isDocumentsSidebarOpen,
isAnnouncementsSidebarOpen, isRightPanelCollapsed,
announcementUnreadCount, totalUnreadCount,
documentsProcessingStatus, isAnnouncementsSidebarOpen,
] announcementUnreadCount,
documentsProcessingStatus,
]
); );
// Handlers // Handlers
@ -438,15 +444,28 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
return; return;
} }
if (item.url === "#documents") { if (item.url === "#documents") {
setIsDocumentsSidebarOpen((prev) => { if (!isMobile) {
if (!prev) { if (!isDocumentsSidebarOpen) {
setIsDocumentsSidebarOpen(true);
setIsRightPanelCollapsed(false);
setIsInboxSidebarOpen(false); setIsInboxSidebarOpen(false);
setIsAllSharedChatsSidebarOpen(false); setIsAllSharedChatsSidebarOpen(false);
setIsAllPrivateChatsSidebarOpen(false); setIsAllPrivateChatsSidebarOpen(false);
setIsAnnouncementsSidebarOpen(false); setIsAnnouncementsSidebarOpen(false);
} else {
setIsRightPanelCollapsed((prev) => !prev);
} }
return !prev; } else {
}); setIsDocumentsSidebarOpen((prev) => {
if (!prev) {
setIsInboxSidebarOpen(false);
setIsAllSharedChatsSidebarOpen(false);
setIsAllPrivateChatsSidebarOpen(false);
setIsAnnouncementsSidebarOpen(false);
}
return !prev;
});
}
return; return;
} }
if (item.url === "#announcements") { if (item.url === "#announcements") {
@ -462,7 +481,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
} }
router.push(item.url); router.push(item.url);
}, },
[router, setIsDocumentsSidebarOpen] [router, isMobile, isDocumentsSidebarOpen, setIsDocumentsSidebarOpen, setIsRightPanelCollapsed]
); );
const handleNewChat = useCallback(() => { const handleNewChat = useCallback(() => {