authorgravatar for 91240327+shivamhwp@users.noreply.github.comshivam <91240327+shivamhwp@users.noreply.github.com> 2026-03-24 07:56:33+05:30
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-03-24 02:26:33+00:00
log2b08d8669646109ffa101b1b767f4c1922d2e072
treed67f3f881b1f3b0113cc2128d0b482e13f892a7a
parente11fb6e778456a98e0066894bfb572864f98bb20
signature Signed by PGP key B5690EEEBB952194

Add resizable chat sidebar (#1347)

Co-authored-by: Julius Marminge <julius0216@outlook.com>

1 files changed, 11 insertions(+), 1 deletions(-)

apps/web/src/routes/_chat.tsx+11-1
...@@ -10,11 +10,14 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";...@@ -10,11 +10,14 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";
10import { resolveShortcutCommand } from "../keybindings";10import { resolveShortcutCommand } from "../keybindings";
11import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore";11import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore";
12import { useThreadSelectionStore } from "../threadSelectionStore";12import { useThreadSelectionStore } from "../threadSelectionStore";
13import { Sidebar, SidebarProvider } from "~/components/ui/sidebar";
14import { resolveSidebarNewThreadEnvMode } from "~/components/Sidebar.logic";13import { resolveSidebarNewThreadEnvMode } from "~/components/Sidebar.logic";
15import { useAppSettings } from "~/appSettings";14import { useAppSettings } from "~/appSettings";
15import { Sidebar, SidebarProvider, SidebarRail } from "~/components/ui/sidebar";
1616
17const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = [];17const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = [];
18const THREAD_SIDEBAR_WIDTH_STORAGE_KEY = "chat_thread_sidebar_width";
19const THREAD_SIDEBAR_MIN_WIDTH = 13 * 16;
20const THREAD_MAIN_CONTENT_MIN_WIDTH = 40 * 16;
1821
19function ChatRouteGlobalShortcuts() {22function ChatRouteGlobalShortcuts() {
20 const clearSelection = useThreadSelectionStore((state) => state.clearSelection);23 const clearSelection = useThreadSelectionStore((state) => state.clearSelection);
...@@ -116,8 +119,15 @@ function ChatRouteLayout() {...@@ -116,8 +119,15 @@ function ChatRouteLayout() {
116 side="left"119 side="left"
117 collapsible="offcanvas"120 collapsible="offcanvas"
118 className="border-r border-border bg-card text-foreground"121 className="border-r border-border bg-card text-foreground"
122 resizable={{
123 minWidth: THREAD_SIDEBAR_MIN_WIDTH,
124 shouldAcceptWidth: ({ nextWidth, wrapper }) =>
125 wrapper.clientWidth - nextWidth >= THREAD_MAIN_CONTENT_MIN_WIDTH,
126 storageKey: THREAD_SIDEBAR_WIDTH_STORAGE_KEY,
127 }}
119 >128 >
120 <ThreadSidebar />129 <ThreadSidebar />
130 <SidebarRail />
121 </Sidebar>131 </Sidebar>
122 <Outlet />132 <Outlet />
123 </SidebarProvider>133 </SidebarProvider>