feat: add new layout system (Slack/ClickUp inspired)

2026-04-25 08:46:22 +02:00 · 2026-01-08 19:10:40 +02:00 · 2026-01-08 19:10:40 +02:00 · a919f8d9ee
commit a919f8d9ee
parent 2fd38615e8
28 changed files with 3059 additions and 0 deletions
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@ -0,0 +1,203 @@
+"use client";
+
+import { useState } from "react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { useSidebarState } from "../../hooks";
+import type {
+	ChatItem,
+	NavItem,
+	NoteItem,
+	PageUsage,
+	User,
+	Workspace,
+} from "../../types/layout.types";
+import { Header } from "../header";
+import { IconRail } from "../icon-rail";
+import { MobileSidebar, MobileSidebarTrigger, Sidebar } from "../sidebar";
+
+interface LayoutShellProps {
+	workspaces: Workspace[];
+	activeWorkspaceId: number | null;
+	onWorkspaceSelect: (id: number) => void;
+	onAddWorkspace: () => void;
+	workspace: Workspace | null;
+	navItems: NavItem[];
+	onNavItemClick?: (item: NavItem) => void;
+	chats: ChatItem[];
+	activeChatId?: number | null;
+	onNewChat: () => void;
+	onChatSelect: (chat: ChatItem) => void;
+	onChatDelete?: (chat: ChatItem) => void;
+	onViewAllChats?: () => void;
+	notes: NoteItem[];
+	activeNoteId?: number | null;
+	onNoteSelect: (note: NoteItem) => void;
+	onNoteDelete?: (note: NoteItem) => void;
+	onAddNote?: () => void;
+	onViewAllNotes?: () => void;
+	user: User;
+	onSettings?: () => void;
+	onInviteMembers?: () => void;
+	onSeeAllWorkspaces?: () => void;
+	onLogout?: () => void;
+	pageUsage?: PageUsage;
+	breadcrumb?: React.ReactNode;
+	languageSwitcher?: React.ReactNode;
+	theme?: string;
+	onToggleTheme?: () => void;
+	defaultCollapsed?: boolean;
+	isChatPage?: boolean;
+	children: React.ReactNode;
+	className?: string;
+}
+
+export function LayoutShell({
+	workspaces,
+	activeWorkspaceId,
+	onWorkspaceSelect,
+	onAddWorkspace,
+	workspace,
+	navItems,
+	onNavItemClick,
+	chats,
+	activeChatId,
+	onNewChat,
+	onChatSelect,
+	onChatDelete,
+	onViewAllChats,
+	notes,
+	activeNoteId,
+	onNoteSelect,
+	onNoteDelete,
+	onAddNote,
+	onViewAllNotes,
+	user,
+	onSettings,
+	onInviteMembers,
+	onSeeAllWorkspaces,
+	onLogout,
+	pageUsage,
+	breadcrumb,
+	languageSwitcher,
+	theme,
+	onToggleTheme,
+	defaultCollapsed = false,
+	isChatPage = false,
+	children,
+	className,
+}: LayoutShellProps) {
+	const isMobile = useIsMobile();
+	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+	const { isCollapsed, toggleCollapsed } = useSidebarState(defaultCollapsed);
+
+	// Mobile layout
+	if (isMobile) {
+		return (
+			<TooltipProvider delayDuration={0}>
+				<div className={cn("flex h-screen w-full flex-col bg-background", className)}>
+					<Header
+						breadcrumb={breadcrumb}
+						languageSwitcher={languageSwitcher}
+						theme={theme}
+						onToggleTheme={onToggleTheme}
+						mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
+					/>
+
+					<MobileSidebar
+						isOpen={mobileMenuOpen}
+						onOpenChange={setMobileMenuOpen}
+						workspaces={workspaces}
+						activeWorkspaceId={activeWorkspaceId}
+						onWorkspaceSelect={onWorkspaceSelect}
+						onAddWorkspace={onAddWorkspace}
+						workspace={workspace}
+						navItems={navItems}
+						onNavItemClick={onNavItemClick}
+						chats={chats}
+						activeChatId={activeChatId}
+						onNewChat={onNewChat}
+						onChatSelect={onChatSelect}
+						onChatDelete={onChatDelete}
+						onViewAllChats={onViewAllChats}
+						notes={notes}
+						activeNoteId={activeNoteId}
+						onNoteSelect={onNoteSelect}
+						onNoteDelete={onNoteDelete}
+						onAddNote={onAddNote}
+						onViewAllNotes={onViewAllNotes}
+						user={user}
+						onSettings={onSettings}
+						onInviteMembers={onInviteMembers}
+						onSeeAllWorkspaces={onSeeAllWorkspaces}
+						onLogout={onLogout}
+						pageUsage={pageUsage}
+					/>
+
+					<main className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+						{children}
+					</main>
+				</div>
+			</TooltipProvider>
+		);
+	}
+
+	// Desktop layout
+	return (
+		<TooltipProvider delayDuration={0}>
+			<div className={cn("flex h-screen w-full gap-2 p-2 overflow-hidden bg-muted/40", className)}>
+				<div className="hidden md:flex overflow-hidden">
+					<IconRail
+						workspaces={workspaces}
+						activeWorkspaceId={activeWorkspaceId}
+						onWorkspaceSelect={onWorkspaceSelect}
+						onAddWorkspace={onAddWorkspace}
+					/>
+				</div>
+
+				<div className="flex flex-1 rounded-xl border bg-background overflow-hidden">
+					<Sidebar
+						workspace={workspace}
+						isCollapsed={isCollapsed}
+						onToggleCollapse={toggleCollapsed}
+						navItems={navItems}
+						onNavItemClick={onNavItemClick}
+						chats={chats}
+						activeChatId={activeChatId}
+						onNewChat={onNewChat}
+						onChatSelect={onChatSelect}
+						onChatDelete={onChatDelete}
+						onViewAllChats={onViewAllChats}
+						notes={notes}
+						activeNoteId={activeNoteId}
+						onNoteSelect={onNoteSelect}
+						onNoteDelete={onNoteDelete}
+						onAddNote={onAddNote}
+						onViewAllNotes={onViewAllNotes}
+						user={user}
+						onSettings={onSettings}
+						onInviteMembers={onInviteMembers}
+						onSeeAllWorkspaces={onSeeAllWorkspaces}
+						onLogout={onLogout}
+						pageUsage={pageUsage}
+						className="hidden md:flex border-r shrink-0"
+					/>
+
+					<main className="flex-1 flex flex-col min-w-0">
+						<Header
+							breadcrumb={breadcrumb}
+							languageSwitcher={languageSwitcher}
+							theme={theme}
+							onToggleTheme={onToggleTheme}
+						/>
+
+						<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+							{children}
+						</div>
+					</main>
+				</div>
+			</div>
+		</TooltipProvider>
+	);
+}