Wide Mode support

lib/store.ts

@@ -7,6 +7,9 @@ import { persist } from 'zustand/middleware';
 interface SettingsStore {
   apiKey: string;
   setApiKey: (apiKey: string) => void;
+
+  wideMode: boolean;
+  setWideMode: (wideMode: boolean) => void;
 }
 
 export const useSettingsStore = create<SettingsStore>()(
@@ -17,6 +20,9 @@ export const useSettingsStore = create<SettingsStore>()(
         return localStorage.getItem('app-settings-openai-api-key') || '';
       })(),
       setApiKey: (apiKey: string) => set({ apiKey }),
+
+      wideMode: false,
+      setWideMode: (wideMode: boolean) => set({ wideMode }),
     }),
     {
       name: 'app-settings',

pages/index.tsx

@@ -12,6 +12,7 @@ export default function Home() {
   const theme = useTheme();
 
   const apiKey = useSettingsStore(state => state.apiKey);
+  const wideMode = useSettingsStore(state => state.wideMode);
   const [settingsShown, setSettingsShown] = React.useState(false);
 
   React.useEffect(() => {
@@ -27,8 +28,8 @@ export default function Home() {
      */
     <NoSSR>
 
-      <Container maxWidth='xl' disableGutters sx={{
-        boxShadow: { xs: 'none', xl: theme.vars.shadow.lg },
+      <Container maxWidth={wideMode ? false : 'xl'} disableGutters sx={{
+        boxShadow: { xs: 'none', xl: wideMode ? 'none' : theme.vars.shadow.lg },
       }}>
 
         <ChatArea onShowSettings={() => setSettingsShown(true)} />