feat: wide mode layout setting

Author: praxstack

packages/app/src/components/settings-general.tsx

@@ -366,6 +366,18 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
+
+        <SettingsRow
+          title="Wide Mode"
+          description="Use full window width for chat instead of centered narrow layout"
+        >
+          <div data-action="settings-wide-mode">
+            <Switch
+              checked={settings.appearance.wideMode()}
+              onChange={(checked) => settings.appearance.setWideMode(checked)}
+            />
+          </div>
+        </SettingsRow>
       </SettingsList>
     </div>
   )

packages/app/src/context/settings.tsx

@@ -32,6 +32,7 @@ export interface Settings {
   }
   appearance: {
     fontSize: number
+    wideMode: boolean
     mono: string
     sans: string
   }
@@ -98,6 +99,7 @@ const defaultSettings: Settings = {
   },
   appearance: {
     fontSize: 14,
+    wideMode: false,
     mono: "",
     sans: "",
   },
@@ -187,6 +189,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setFontSize(value: number) {
           setStore("appearance", "fontSize", value)
         },
+        wideMode: withFallback(() => store.appearance?.wideMode, defaultSettings.appearance.wideMode),
+        setWideMode(value: boolean) {
+          setStore("appearance", "wideMode", value)
+        },
         font: withFallback(() => store.appearance?.mono, defaultSettings.appearance.mono),
         setFont(value: string) {
           setStore("appearance", "mono", value.trim() ? value : "")

packages/app/src/pages/session.tsx

@@ -401,7 +401,7 @@ export default function Page() {
     if (desktopReviewOpen()) return `${layout.session.width()}px`
     return `calc(100% - ${layout.fileTree.width()}px)`
   })
-  const centered = createMemo(() => isDesktop() && !desktopReviewOpen())
+  const centered = createMemo(() => isDesktop() && !desktopReviewOpen() && !settings.appearance.wideMode())
 
   function normalizeTab(tab: string) {
     if (!tab.startsWith("file://")) return tab