Explicitly set the request layout (#257)

src-web/components/GrpcConnectionLayout.tsx

@@ -7,6 +7,7 @@ import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useGrpc } from '../hooks/useGrpc';
 import { useGrpcProtoFiles } from '../hooks/useGrpcProtoFiles';
 import { activeGrpcConnectionAtom, useGrpcEvents } from '../hooks/usePinnedGrpcConnection';
+import { workspaceLayoutAtom } from '../lib/atoms';
 import { Banner } from './core/Banner';
 import { HotKeyList } from './core/HotKeyList';
 import { SplitLayout } from './core/SplitLayout';
@@ -20,6 +21,7 @@ interface Props {
 const emptyArray: string[] = [];
 
 export function GrpcConnectionLayout({ style }: Props) {
+  const workspaceLayout = useAtomValue(workspaceLayoutAtom);
   const activeRequest = useActiveRequest('grpc_request');
   const activeConnection = useAtomValue(activeGrpcConnectionAtom);
   const grpcEvents = useGrpcEvents(activeConnection?.id ?? null);
@@ -80,6 +82,7 @@ export function GrpcConnectionLayout({ style }: Props) {
       name="grpc_layout"
       className="p-3 gap-1.5"
       style={style}
+      layout={workspaceLayout}
       firstSlot={({ style }) => (
         <GrpcRequestPane
           style={style}

src-web/components/HttpRequestLayout.tsx

@@ -4,6 +4,7 @@ import { useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
 import React from 'react';
 import { useCurrentGraphQLSchema } from '../hooks/useIntrospectGraphQL';
+import { workspaceLayoutAtom } from '../lib/atoms';
 import type { SlotProps } from './core/SplitLayout';
 import { SplitLayout } from './core/SplitLayout';
 import { GraphQLDocsExplorer } from './graphql/GraphQLDocsExplorer';
@@ -16,15 +17,18 @@ interface Props {
   style: CSSProperties;
 }
 
+
 export function HttpRequestLayout({ activeRequest, style }: Props) {
   const showGraphQLDocExplorer = useAtomValue(showGraphQLDocExplorerAtom);
   const graphQLSchema = useCurrentGraphQLSchema(activeRequest);
+  const workspaceLayout = useAtomValue(workspaceLayoutAtom);
 
   const requestResponseSplit = ({ style }: Pick<SlotProps, 'style'>) => (
     <SplitLayout
       name="http_layout"
       className="p-3 gap-1.5"
       style={style}
+      layout={workspaceLayout}
       firstSlot={({ orientation, style }) => (
         <HttpRequestPane
           style={style}

src-web/components/LicenseBadge.tsx

@@ -2,8 +2,8 @@ import type { LicenseCheckStatus } from '@yaakapp-internal/license';
 import { useLicense } from '@yaakapp-internal/license';
 import type { ReactNode } from 'react';
 import { openSettings } from '../commands/openSettings';
-import { appInfo } from '../lib/appInfo';
 import { useLicenseConfirmation } from '../hooks/useLicenseConfirmation';
+import { appInfo } from '../lib/appInfo';
 import { BadgeButton } from './core/BadgeButton';
 import type { ButtonProps } from './core/Button';
 
@@ -26,11 +26,9 @@ export function LicenseBadge() {
   }
 
   if (check.error) {
-    return (
-      <BadgeButton color="danger" onClick={() => openSettings.mutate('license')}>
-        License Error
-      </BadgeButton>
-    );
+    // Failed to check for license. Probably a network or server error so just don't
+    // show anything.
+    return null;
   }
 
   // Hasn't loaded yet

src-web/components/WebsocketRequestLayout.tsx

@@ -1,7 +1,9 @@
 import type { WebsocketRequest } from '@yaakapp-internal/models';
 import classNames from 'classnames';
+import { useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
 import React from 'react';
+import { workspaceLayoutAtom } from '../lib/atoms';
 import { SplitLayout } from './core/SplitLayout';
 import { WebsocketRequestPane } from './WebsocketRequestPane';
 import { WebsocketResponsePane } from './WebsocketResponsePane';
@@ -12,10 +14,12 @@ interface Props {
 }
 
 export function WebsocketRequestLayout({ activeRequest, style }: Props) {
+  const workspaceLayout = useAtomValue(workspaceLayoutAtom);
   return (
     <SplitLayout
       name="websocket_layout"
       className="p-3 gap-1.5"
+      layout={workspaceLayout}
       style={style}
       firstSlot={({ orientation, style }) => (
         <WebsocketRequestPane

src-web/components/WorkspaceEncryptionSetting.tsx

@@ -206,7 +206,7 @@ function KeyRevealer({
       <VStack space={0.5}>
         {!disableLabel && (
           <span className="text-sm text-primary flex items-center gap-1">
-            workspace encryption key{' '}
+            Workspace encryption key{' '}
             <IconTooltip iconSize="sm" size="lg" content={helpAfterEncryption} />
           </span>
         )}

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>
   );

src-web/components/core/SplitLayout.tsx

@@ -8,6 +8,8 @@ import { useContainerSize } from '../../hooks/useContainerQuery';
 import { clamp } from '../../lib/clamp';
 import { ResizeHandle } from '../ResizeHandle';
 
+export type SplitLayoutLayout = 'responsive' | 'horizontal' | 'vertical';
+
 export interface SlotProps {
   orientation: 'horizontal' | 'vertical';
   style: CSSProperties;
@@ -22,7 +24,7 @@ interface Props {
   defaultRatio?: number;
   minHeightPx?: number;
   minWidthPx?: number;
-  layout?: 'responsive' | 'vertical' | 'horizontal';
+  layout?: SplitLayoutLayout;
 }
 
 const baseProperties = { minWidth: 0 };

src-web/lib/atoms.ts

@@ -1,6 +1,8 @@
 import deepEqual from '@gilbarbara/deep-equal';
 import type { Atom } from 'jotai';
 import { selectAtom } from 'jotai/utils';
+import type { SplitLayoutLayout } from '../components/core/SplitLayout';
+import { atomWithKVStorage } from './atoms/atomWithKVStorage';
 
 export function deepEqualAtom<T>(a: Atom<T>) {
   return selectAtom(
@@ -9,3 +11,8 @@ export function deepEqualAtom<T>(a: Atom<T>) {
     (a, b) => deepEqual(a, b),
   );
 }
+
+export const workspaceLayoutAtom = atomWithKVStorage<SplitLayoutLayout>(
+  'workspace_layout',
+  'horizontal',
+);