Explicitly set the request layout (#257)

src-web/components/WorkspaceHeader.tsx

@@ -1,9 +1,8 @@
-import { type } from '@tauri-apps/plugin-os';
 import classNames from 'classnames';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import React, { memo } from 'react';
 import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from '../hooks/useActiveWorkspace';
-import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
+import { workspaceLayoutAtom } from '../lib/atoms';
 import { setupOrConfigureEncryption } from '../lib/setupOrConfigureEncryption';
 import { CookieDropdown } from './CookieDropdown';
 import { BadgeButton } from './core/BadgeButton';
@@ -23,7 +22,7 @@ interface Props {
 }
 
 export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
-  const togglePalette = useToggleCommandPalette();
+  const [workspaceLayout, setWorkspaceLayout] = useAtom(workspaceLayoutAtom);
   const workspace = useAtomValue(activeWorkspaceAtom);
   const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
   const showEncryptionSetup =
@@ -57,14 +56,22 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         ) : (
           <LicenseBadge />
         )}
+        <SettingsDropdown />
         <IconButton
-          icon={type() == 'macos' ? 'command' : 'square_terminal'}
-          title="Search or execute a command"
+          icon={
+            workspaceLayout === 'responsive'
+              ? 'magic_wand'
+              : workspaceLayout === 'horizontal'
+                ? 'columns_2'
+                : 'rows_2'
+          }
+          title={`Change to ${workspaceLayout === 'horizontal' ? 'vertical' : 'horizontal'} layout`}
           size="sm"
           iconColor="secondary"
-          onClick={togglePalette}
+          onClick={() =>
+            setWorkspaceLayout((prev) => (prev === 'horizontal' ? 'vertical' : 'horizontal'))
+          }
         />
-        <SettingsDropdown />
       </div>
     </div>
   );