feat(desktop): resizable sidebar with persisted size

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/index.tsx

@@ -4,6 +4,7 @@ import { useMemo, useRef, useState } from "react";
 import { useDrop } from "react-dnd";
 import { HiMiniPlus } from "react-icons/hi2";
 import { trpc } from "renderer/lib/trpc";
+import { useSidebarStore } from "renderer/stores";
 import { useWindowsStore } from "renderer/stores/tabs/store";
 import { WindowItem } from "./WindowItem";
 
@@ -16,6 +17,7 @@ interface DragItem {
 }
 
 export function TabsView() {
+	const isResizing = useSidebarStore((s) => s.isResizing);
 	const { data: activeWorkspace } = trpc.workspaces.getActive.useQuery();
 	const activeWorkspaceId = activeWorkspace?.id;
 	const allWindows = useWindowsStore((s) => s.windows);
@@ -100,7 +102,7 @@ export function TabsView() {
 					{windows.map((window, index) => (
 						<motion.div
 							key={window.id}
-							layout
+							layout={!isResizing}
 							initial={false}
 							transition={{
 								layout: { duration: 0.2, ease: "easeInOut" },
@@ -128,7 +130,7 @@ export function TabsView() {
 					)}
 				</div>
 				<motion.div
-					layout
+					layout={!isResizing}
 					transition={{ layout: { duration: 0.2, ease: "easeInOut" } }}
 				>
 					<Button

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx

@@ -1,55 +1,29 @@
-import { motion } from "framer-motion";
 import { useSidebarStore } from "renderer/stores";
 import { SidebarMode } from "renderer/stores/sidebar-state";
 import { ChangesView } from "./ChangesView";
 import { ModeCarousel } from "./ModeCarousel";
 import { TabsView } from "./TabsView";
 
 export function Sidebar() {
-	const { isSidebarOpen, currentMode, setMode } = useSidebarStore();
+	const { currentMode, setMode } = useSidebarStore();
 
 	const modes: SidebarMode[] = [SidebarMode.Tabs, SidebarMode.Changes];
 
 	return (
-		<motion.aside
-			initial={false}
-			animate={{
-				width: isSidebarOpen ? 256 : 0,
-			}}
-			transition={{
-				duration: 0.2,
-				ease: "easeInOut",
-			}}
-			className="h-full flex flex-col overflow-hidden"
-			style={{
-				pointerEvents: isSidebarOpen ? "auto" : "none",
-			}}
-		>
-			<motion.div
-				initial={false}
-				animate={{
-					opacity: isSidebarOpen ? 1 : 0,
-				}}
-				transition={{
-					duration: 0.15,
-					ease: "easeInOut",
-				}}
-				className="flex-1 flex flex-col overflow-hidden"
+		<aside className="h-full flex flex-col overflow-hidden">
+			<ModeCarousel
+				modes={modes}
+				currentMode={currentMode}
+				onModeSelect={setMode}
 			>
-				<ModeCarousel
-					modes={modes}
-					currentMode={currentMode}
-					onModeSelect={setMode}
-				>
-					{(mode) => {
-						if (mode === SidebarMode.Changes) {
-							return <ChangesView />;
-						}
+				{(mode) => {
+					if (mode === SidebarMode.Changes) {
+						return <ChangesView />;
+					}
 
-						return <TabsView />;
-					}}
-				</ModeCarousel>
-			</motion.div>
-		</motion.aside>
+					return <TabsView />;
+				}}
+			</ModeCarousel>
+		</aside>
 	);
 }

apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx

@@ -1,6 +1,13 @@
-import { useMemo } from "react";
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from "@superset/ui/resizable";
+import { useEffect, useMemo, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
+import type { ImperativePanelHandle } from "react-resizable-panels";
 import { trpc } from "renderer/lib/trpc";
+import { useSidebarStore } from "renderer/stores";
 import { useWindowsStore } from "renderer/stores/tabs/store";
 import { HOTKEYS } from "shared/hotkeys";
 import { ContentView } from "./ContentView";
@@ -83,14 +90,47 @@ export function WorkspaceView() {
 		}
 	}, [activeWorkspace?.worktreePath]);
 
+	const { isSidebarOpen, sidebarSize, setSidebarSize, setIsResizing } =
+		useSidebarStore();
+	const sidebarPanelRef = useRef<ImperativePanelHandle>(null);
+
+	useEffect(() => {
+		const panel = sidebarPanelRef.current;
+		if (!panel) return;
+
+		if (isSidebarOpen) {
+			panel.expand();
+		} else {
+			panel.collapse();
+		}
+	}, [isSidebarOpen]);
+
 	return (
-		<div className="flex flex-1 bg-tertiary">
-			<Sidebar />
-			<div className="flex-1 m-3 bg-background rounded flex flex-col overflow-hidden">
-				<div className="flex-1 p-2 overflow-hidden">
-					<ContentView />
+		<ResizablePanelGroup direction="horizontal" className="flex-1 bg-tertiary">
+			<ResizablePanel
+				ref={sidebarPanelRef}
+				defaultSize={sidebarSize}
+				minSize={10}
+				maxSize={40}
+				collapsible
+				collapsedSize={0}
+				onCollapse={() => setSidebarSize(0)}
+				onExpand={() => setSidebarSize(15)}
+				onResize={setSidebarSize}
+			>
+				{isSidebarOpen && <Sidebar />}
+			</ResizablePanel>
+			<ResizableHandle
+				className="bg-tertiary hover:bg-border transition-colors"
+				onDragging={setIsResizing}
+			/>
+			<ResizablePanel defaultSize={100 - sidebarSize}>
+				<div className="flex-1 h-full m-3 ml-0 bg-background rounded flex flex-col overflow-hidden">
+					<div className="flex-1 p-2 overflow-hidden">
+						<ContentView />
+					</div>
 				</div>
-			</div>
-		</div>
+			</ResizablePanel>
+		</ResizablePanelGroup>
 	);
 }

apps/desktop/src/renderer/stores/sidebar-state.ts

@@ -1,37 +1,73 @@
 import { create } from "zustand";
-import { devtools } from "zustand/middleware";
+import { devtools, persist } from "zustand/middleware";
 
 export enum SidebarMode {
 	Tabs = "tabs",
 	Changes = "changes",
 }
 
+const DEFAULT_SIDEBAR_SIZE = 15;
+
 interface SidebarState {
 	isSidebarOpen: boolean;
+	sidebarSize: number;
 	currentMode: SidebarMode;
+	isResizing: boolean;
 	toggleSidebar: () => void;
 	setSidebarOpen: (open: boolean) => void;
+	setSidebarSize: (size: number) => void;
 	setMode: (mode: SidebarMode) => void;
+	setIsResizing: (isResizing: boolean) => void;
 }
 
 export const useSidebarStore = create<SidebarState>()(
 	devtools(
-		(set) => ({
-			isSidebarOpen: true,
-			currentMode: "tabs",
-
-			toggleSidebar: () => {
-				set((state) => ({ isSidebarOpen: !state.isSidebarOpen }));
-			},
-
-			setSidebarOpen: (open) => {
-				set({ isSidebarOpen: open });
-			},
-
-			setMode: (mode) => {
-				set({ currentMode: mode });
-			},
-		}),
+		persist(
+			(set, get) => ({
+				isSidebarOpen: true,
+				sidebarSize: DEFAULT_SIDEBAR_SIZE,
+				currentMode: SidebarMode.Tabs,
+				isResizing: false,
+
+				toggleSidebar: () => {
+					const { isSidebarOpen, sidebarSize } = get();
+					if (isSidebarOpen) {
+						set({ isSidebarOpen: false });
+					} else {
+						set({
+							isSidebarOpen: true,
+							sidebarSize:
+								sidebarSize === 0 ? DEFAULT_SIDEBAR_SIZE : sidebarSize,
+						});
+					}
+				},
+
+				setSidebarOpen: (open) => {
+					const { sidebarSize } = get();
+					set({
+						isSidebarOpen: open,
+						sidebarSize:
+							open && sidebarSize === 0 ? DEFAULT_SIDEBAR_SIZE : sidebarSize,
+					});
+				},
+
+				setSidebarSize: (size) => {
+					set({
+						sidebarSize: size,
+						isSidebarOpen: size > 0,
+					});
+				},
+
+				setMode: (mode) => {
+					set({ currentMode: mode });
+				},
+
+				setIsResizing: (isResizing) => {
+					set({ isResizing });
+				},
+			}),
+			{ name: "sidebar-store" },
+		),
 		{ name: "SidebarStore" },
 	),
 );