allow user to change pane placement

apps/x/apps/renderer/src/App.tsx

@@ -5,7 +5,7 @@ import { RunEvent, ListRunsResponse } from '@x/shared/src/runs.js';
 import type { LanguageModelUsage, ToolUIPart } from 'ai';
 import './App.css'
 import z from 'zod';
-import { CheckIcon, LoaderIcon, PanelLeftIcon, ArrowRight, MessageSquare, ChevronLeftIcon, ChevronRightIcon, Plus, HistoryIcon } from 'lucide-react';
+import { CheckIcon, LoaderIcon, PanelLeftIcon, ArrowLeft, ArrowRight, MessageSquare, ChevronLeftIcon, ChevronRightIcon, Plus, HistoryIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { MarkdownEditor, type MarkdownEditorHandle } from './components/markdown-editor';
 import { ChatSidebar } from './components/chat-sidebar';
@@ -117,6 +117,7 @@ import { useVoiceTTS } from '@/hooks/useVoiceTTS'
 import { useMeetingTranscription, type CalendarEventMeta } from '@/hooks/useMeetingTranscription'
 import { useAnalyticsIdentity } from '@/hooks/useAnalyticsIdentity'
 import * as analytics from '@/lib/analytics'
+import { useTheme } from '@/contexts/theme-context'
 
 type DirEntry = z.infer<typeof workspace.DirEntry>
 type RunEventType = z.infer<typeof RunEvent>
@@ -736,6 +737,9 @@ function ContentHeader({
 }
 
 function App() {
+  const { chatPanePlacement } = useTheme()
+  const isChatPaneInMiddle = chatPanePlacement === 'middle'
+
   type ShortcutPane = 'left' | 'right'
   type MarkdownHistoryHandlers = { undo: () => boolean; redo: () => boolean }
 
@@ -765,7 +769,7 @@ function App() {
   // Lives in ViewState so folder drill-down participates in back/forward history.
   const [knowledgeViewFolderPath, setKnowledgeViewFolderPath] = useState<string | null>(null)
   const [isChatHistoryOpen, setIsChatHistoryOpen] = useState(false)
-  // Default landing view: Home in the middle with the chat docked on the right.
+  // Default landing view: Home with the chat docked according to appearance settings.
   const [isHomeOpen, setIsHomeOpen] = useState(true)
   const [emailInitialThreadId, setEmailInitialThreadId] = useState<string | null>(null)
   const [emailThreadIdVersion, setEmailThreadIdVersion] = useState(0)
@@ -5323,6 +5327,7 @@ function App() {
             <SidebarInset
               className={cn(
                 "overflow-hidden! min-h-0 min-w-0",
+                isRightPaneContext && isChatPaneInMiddle && "order-3",
                 insetAnimateMaxWidth && "transition-[max-width] duration-200 ease-linear",
                 shouldCollapseLeftPane && "pointer-events-none select-none"
               )}
@@ -5438,7 +5443,11 @@ function App() {
                     : (viewOpen && !isChatSidebarOpen)
                       ? { onClick: openChatSidePane, icon: <MessageSquare className="size-5" />, label: 'Open chat' }
                       : (viewOpen && isChatSidebarOpen && !isRightPaneMaximized)
-                        ? { onClick: () => setIsChatSidebarOpen(false), icon: <ArrowRight className="size-5" />, label: 'Expand pane' }
+                        ? {
+                            onClick: () => setIsChatSidebarOpen(false),
+                            icon: isChatPaneInMiddle ? <ArrowLeft className="size-5" /> : <ArrowRight className="size-5" />,
+                            label: 'Expand pane'
+                          }
                         : null
                   return (
                     <Tooltip>
@@ -5989,9 +5998,11 @@ function App() {
               )}
             </SidebarInset>
 
-            {/* Chat sidebar - shown when viewing files/graph */}
+            {/* Chat pane - shown when viewing files/graph */}
             {isRightPaneContext && (
               <ChatSidebar
+                placement={chatPanePlacement}
+                className={isChatPaneInMiddle ? "order-2" : undefined}
                 defaultWidth={460}
                 isOpen={isChatSidebarOpen}
                 isMaximized={isRightPaneMaximized}

apps/x/apps/renderer/src/components/chat-sidebar.tsx

@@ -125,6 +125,8 @@ interface ChatSidebarProps {
   defaultWidth?: number
   isOpen?: boolean
   isMaximized?: boolean
+  placement?: 'middle' | 'right'
+  className?: string
   chatTabs: ChatTab[]
   activeChatTabId: string
   getChatTabTitle: (tab: ChatTab) => string
@@ -183,6 +185,8 @@ export function ChatSidebar({
   defaultWidth = DEFAULT_WIDTH,
   isOpen = true,
   isMaximized = false,
+  placement = 'right',
+  className,
   chatTabs,
   activeChatTabId,
   getChatTabTitle,
@@ -246,6 +250,7 @@ export function ChatSidebar({
   const startWidthRef = useRef(0)
   const prevIsMaximizedRef = useRef(isMaximized)
   const justToggledMaximize = prevIsMaximizedRef.current !== isMaximized
+  const isMiddlePlacement = placement === 'middle'
 
   const getMaxAllowedWidth = useCallback(() => {
     if (typeof window === 'undefined') return MAX_WIDTH
@@ -306,7 +311,9 @@ export function ChatSidebar({
     setIsResizing(true)
 
     const handleMouseMove = (event: MouseEvent) => {
-      const delta = startXRef.current - event.clientX
+      const delta = isMiddlePlacement
+        ? event.clientX - startXRef.current
+        : startXRef.current - event.clientX
       const maxAllowedWidth = getMaxAllowedWidth()
       setWidth(clampPaneWidth(startWidthRef.current + delta, maxAllowedWidth))
     }
@@ -319,7 +326,7 @@ export function ChatSidebar({
 
     document.addEventListener('mousemove', handleMouseMove)
     document.addEventListener('mouseup', handleMouseUp)
-  }, [width, getMaxAllowedWidth])
+  }, [width, getMaxAllowedWidth, isMiddlePlacement])
 
   const activeTabState = useMemo<ChatTabViewState>(() => ({
     runId: runId ?? null,
@@ -511,8 +518,10 @@ export function ChatSidebar({
       onMouseDownCapture={onActivate}
       onFocusCapture={onActivate}
       className={cn(
-        'relative flex min-w-0 flex-col overflow-hidden border-l border-border bg-background',
-        !isResizing && !justToggledMaximize && 'transition-[width] duration-200 ease-linear'
+        'relative flex min-w-0 flex-col overflow-hidden bg-background',
+        isMiddlePlacement ? 'border-r border-border' : 'border-l border-border',
+        !isResizing && !justToggledMaximize && 'transition-[width] duration-200 ease-linear',
+        className
       )}
       style={paneStyle}
     >
@@ -520,7 +529,8 @@ export function ChatSidebar({
         <div
           onMouseDown={handleMouseDown}
           className={cn(
-            'absolute inset-y-0 left-0 z-20 w-4 -translate-x-1/2 cursor-col-resize',
+            'absolute inset-y-0 z-20 w-4 cursor-col-resize',
+            isMiddlePlacement ? 'right-0 translate-x-1/2' : 'left-0 -translate-x-1/2',
             'after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] after:transition-colors',
             'hover:after:bg-sidebar-border',
             isResizing && 'after:bg-primary'
@@ -587,7 +597,9 @@ export function ChatSidebar({
                     className="titlebar-no-drag my-1 mr-2 h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
                     aria-label={isMaximized ? 'Dock chat to side pane' : 'Expand chat'}
                   >
-                    {isMaximized ? <ArrowRight className="size-5" /> : <ArrowLeft className="size-5" />}
+                    {isMaximized
+                      ? (isMiddlePlacement ? <ArrowLeft className="size-5" /> : <ArrowRight className="size-5" />)
+                      : (isMiddlePlacement ? <ArrowRight className="size-5" /> : <ArrowLeft className="size-5" />)}
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom">{isMaximized ? 'Dock to side pane' : 'Expand chat'}</TooltipContent>

apps/x/apps/renderer/src/components/settings-dialog.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { useState, useEffect, useCallback, useMemo } from "react"
-import { Server, Key, Shield, Palette, Monitor, Sun, Moon, Loader2, CheckCircle2, Plus, X, Wrench, Search, ChevronRight, Link2, Tags, Mail, BookOpen, User, Plug, HelpCircle, MessageCircle, Bug, Terminal, AlertTriangle, RefreshCw } from "lucide-react"
+import { Server, Key, Shield, Palette, Monitor, Sun, Moon, Loader2, CheckCircle2, Plus, X, Wrench, Search, ChevronRight, Link2, Tags, Mail, BookOpen, User, Plug, HelpCircle, MessageCircle, Bug, Terminal, AlertTriangle, RefreshCw, PanelRight } from "lucide-react"
 
 import {
   Dialog,
@@ -210,7 +210,7 @@ function ThemeOption({
 }
 
 function AppearanceSettings() {
-  const { theme, setTheme } = useTheme()
+  const { theme, setTheme, chatPanePlacement, setChatPanePlacement } = useTheme()
 
   return (
     <div className="space-y-6">
@@ -240,6 +240,26 @@ function AppearanceSettings() {
           />
         </div>
       </div>
+      <div>
+        <h4 className="text-sm font-medium mb-3">Chat</h4>
+        <p className="text-xs text-muted-foreground mb-4">
+          Choose where chat sits when another pane is open
+        </p>
+        <div className="grid grid-cols-2 gap-3">
+          <ThemeOption
+            label="Chat right"
+            icon={PanelRight}
+            isSelected={chatPanePlacement === "right"}
+            onClick={() => setChatPanePlacement("right")}
+          />
+          <ThemeOption
+            label="Chat middle"
+            icon={MessageCircle}
+            isSelected={chatPanePlacement === "middle"}
+            onClick={() => setChatPanePlacement("middle")}
+          />
+        </div>
+      </div>
     </div>
   )
 }

apps/x/apps/renderer/src/contexts/theme-context.tsx

@@ -3,16 +3,24 @@
 import * as React from "react"
 
 export type Theme = "light" | "dark" | "system"
+export type ChatPanePlacement = "right" | "middle"
 
 type ThemeContextProps = {
   theme: Theme
   resolvedTheme: "light" | "dark"
   setTheme: (theme: Theme) => void
+  chatPanePlacement: ChatPanePlacement
+  setChatPanePlacement: (placement: ChatPanePlacement) => void
 }
 
 const ThemeContext = React.createContext<ThemeContextProps | null>(null)
 
 const STORAGE_KEY = "rowboat-theme"
+const CHAT_PANE_PLACEMENT_STORAGE_KEY = "rowboat-chat-pane-placement"
+
+function isChatPanePlacement(value: string | null): value is ChatPanePlacement {
+  return value === "right" || value === "middle"
+}
 
 function getSystemTheme(): "light" | "dark" {
   if (typeof window === "undefined") return "light"
@@ -39,6 +47,11 @@ export function ThemeProvider({
     const stored = localStorage.getItem(STORAGE_KEY) as Theme | null
     return stored || defaultTheme
   })
+  const [chatPanePlacement, setChatPanePlacementState] = React.useState<ChatPanePlacement>(() => {
+    if (typeof window === "undefined") return "right"
+    const stored = localStorage.getItem(CHAT_PANE_PLACEMENT_STORAGE_KEY)
+    return isChatPanePlacement(stored) ? stored : "right"
+  })
 
   const [resolvedTheme, setResolvedTheme] = React.useState<"light" | "dark">(() => {
     if (theme === "system") return getSystemTheme()
@@ -76,13 +89,20 @@ export function ThemeProvider({
     setThemeState(newTheme)
   }, [])
 
+  const setChatPanePlacement = React.useCallback((placement: ChatPanePlacement) => {
+    localStorage.setItem(CHAT_PANE_PLACEMENT_STORAGE_KEY, placement)
+    setChatPanePlacementState(placement)
+  }, [])
+
   const contextValue = React.useMemo<ThemeContextProps>(
     () => ({
       theme,
       resolvedTheme,
       setTheme,
+      chatPanePlacement,
+      setChatPanePlacement,
     }),
-    [theme, resolvedTheme, setTheme]
+    [theme, resolvedTheme, setTheme, chatPanePlacement, setChatPanePlacement]
   )
 
   return (