Faster time-to-theme (#109)

src-web/components/DefaultLayout.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import { motion } from 'framer-motion';
 import { Outlet } from 'react-router-dom';
 import { useOsInfo } from '../hooks/useOsInfo';
 import { DialogProvider, Dialogs } from './DialogContext';
@@ -16,17 +15,14 @@ export function DefaultLayout() {
           <Toasts />
           <Dialogs />
         </>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.1, delay: 0.1 }}
+        <div
           className={classNames(
             'w-full h-full',
             osInfo?.osType === 'linux' && 'border border-border-subtle',
           )}
         >
           <Outlet />
-        </motion.div>
+        </div>
         <GlobalHooks />
       </ToastProvider>
     </DialogProvider>

src-web/components/GlobalHooks.tsx

@@ -25,7 +25,6 @@ import { useRecentRequests } from '../hooks/useRecentRequests';
 import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { settingsAtom, useSettings } from '../hooks/useSettings';
-import { useSyncThemeToDocument } from '../hooks/useSyncThemeToDocument';
 import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
 import { workspacesAtom } from '../hooks/useWorkspaces';
 import { useZoom } from '../hooks/useZoom';
@@ -39,6 +38,11 @@ import { rosePineDefault } from '../lib/theme/themes/rose-pine';
 import { yaakDark } from '../lib/theme/themes/yaak';
 import { getThemeCSS } from '../lib/theme/window';
 
+export interface ModelPayload {
+  model: AnyModel;
+  windowLabel: string;
+}
+
 export function GlobalHooks() {
   // Include here so they always update, even if no component references them
   useRecentWorkspaces();
@@ -47,7 +51,6 @@ export function GlobalHooks() {
   useRecentRequests();
 
   // Other useful things
-  useSyncThemeToDocument();
   useNotificationToast();
   useActiveWorkspaceChangedToast();
   useEnsureActiveCookieJar();
@@ -61,11 +64,6 @@ export function GlobalHooks() {
   const queryClient = useQueryClient();
   const { wasUpdatedExternally } = useRequestUpdateKey(null);
 
-  interface ModelPayload {
-    model: AnyModel;
-    windowLabel: string;
-  }
-
   const setSettings = useSetAtom(settingsAtom);
   const setWorkspaces = useSetAtom(workspacesAtom);
   const setPlugins = useSetAtom(pluginsAtom);

src-web/components/ResponsePane.tsx

@@ -117,9 +117,11 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
           >
             {activeResponse && (
               <HStack
-                as="p"
                 space={2}
-                className="whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm"
+                className={classNames(
+                  'cursor-default select-none',
+                  'whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm',
+                )}
               >
                 <StatusTag showReason response={activeResponse} />
                 {activeResponse.elapsed > 0 && (

src-web/components/Settings/SettingsAppearance.tsx

@@ -3,10 +3,10 @@ import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
 import { useResolvedAppearance } from '../../hooks/useResolvedAppearance';
 import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 import { useSettings } from '../../hooks/useSettings';
-import { useThemes } from '../../hooks/useThemes';
 import { useUpdateSettings } from '../../hooks/useUpdateSettings';
 import { trackEvent } from '../../lib/analytics';
 import { clamp } from '../../lib/clamp';
+import { getThemes } from '../../lib/theme/themes';
 import { isThemeDark } from '../../lib/theme/window';
 import type { ButtonProps } from '../core/Button';
 import { Checkbox } from '../core/Checkbox';
@@ -52,12 +52,13 @@ const icons: IconProps['icon'][] = [
   'send_horizontal',
 ];
 
+const { themes } = getThemes();
+
 export function SettingsAppearance() {
   const workspace = useActiveWorkspace();
   const settings = useSettings();
   const updateSettings = useUpdateSettings();
   const appearance = useResolvedAppearance();
-  const { themes } = useThemes();
   const activeTheme = useResolvedTheme();
 
   if (settings == null || workspace == null) {
@@ -161,9 +162,10 @@ export function SettingsAppearance() {
         space={3}
         className="mt-3 w-full bg-surface p-3 border border-dashed border-border-subtle rounded overflow-x-auto"
       >
-        <HStack className="text font-bold" space={2}>
-          Theme Preview{' '}
+        <HStack className="text" space={1.5}>
           <Icon icon={appearance === 'dark' ? 'moon' : 'sun'} className="text-text-subtle" />
+          <strong>{activeTheme.active.name}</strong>
+          <em>(preview)</em>
         </HStack>
         <HStack space={1.5} className="w-full">
           {buttonColors.map((c, i) => (

src-web/components/Settings/SettingsDesign.tsx

@@ -1,9 +1,9 @@
 import { open } from '@tauri-apps/plugin-dialog';
 import React, { useState } from 'react';
 import { useLocalStorage } from 'react-use';
-import { useThemes } from '../../hooks/useThemes';
 import { capitalize } from '../../lib/capitalize';
 import { invokeCmd } from '../../lib/tauri';
+import { getThemes } from '../../lib/theme/themes';
 import { yaakDark } from '../../lib/theme/themes/yaak';
 import { getThemeCSS } from '../../lib/theme/window';
 import { Banner } from '../core/Banner';
@@ -45,9 +45,9 @@ const icons: IconProps['icon'][] = [
   'send_horizontal',
 ];
 
-export function SettingsDesign() {
-  const themes = useThemes();
+const themes = getThemes();
 
+export function SettingsDesign() {
   const [exportDir, setExportDir] = useLocalStorage<string | null>('theme_export_dir', null);
   const [loadingExport, setLoadingExport] = useState<boolean>(false);