From 2b08d8669646109ffa101b1b767f4c1922d2e072 Mon Sep 17 00:00:00 2001 From: shivam <91240327+shivamhwp@users.noreply.github.com> Date: Tue, 24 Mar 2026 07:56:33 +0530 Subject: [PATCH] Add resizable chat sidebar (#1347) Co-authored-by: Julius Marminge --- apps/web/src/routes/_chat.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/apps/web/src/routes/_chat.tsx b/apps/web/src/routes/_chat.tsx index 193cb0e7a92890261392b59cf997d411579d1137..7cb377056b05be96574116ab1f455ed210f0292b 100644 --- a/apps/web/src/routes/_chat.tsx +++ b/apps/web/src/routes/_chat.tsx @@ -10,11 +10,14 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery"; import { resolveShortcutCommand } from "../keybindings"; import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore"; import { useThreadSelectionStore } from "../threadSelectionStore"; -import { Sidebar, SidebarProvider } from "~/components/ui/sidebar"; import { resolveSidebarNewThreadEnvMode } from "~/components/Sidebar.logic"; import { useAppSettings } from "~/appSettings"; +import { Sidebar, SidebarProvider, SidebarRail } from "~/components/ui/sidebar"; const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = []; +const THREAD_SIDEBAR_WIDTH_STORAGE_KEY = "chat_thread_sidebar_width"; +const THREAD_SIDEBAR_MIN_WIDTH = 13 * 16; +const THREAD_MAIN_CONTENT_MIN_WIDTH = 40 * 16; function ChatRouteGlobalShortcuts() { const clearSelection = useThreadSelectionStore((state) => state.clearSelection); @@ -116,8 +119,15 @@ function ChatRouteLayout() { side="left" collapsible="offcanvas" className="border-r border-border bg-card text-foreground" + resizable={{ + minWidth: THREAD_SIDEBAR_MIN_WIDTH, + shouldAcceptWidth: ({ nextWidth, wrapper }) => + wrapper.clientWidth - nextWidth >= THREAD_MAIN_CONTENT_MIN_WIDTH, + storageKey: THREAD_SIDEBAR_WIDTH_STORAGE_KEY, + }} > + -- 2.54.0