Fade in window contents (Layout)

src-web/components/DefaultLayout.tsx

@@ -4,20 +4,24 @@ import { GlobalHooks } from './GlobalHooks';
 import { ToastProvider } from './ToastContext';
 import classNames from 'classnames';
 import { useOsInfo } from '../hooks/useOsInfo';
+import { motion } from 'framer-motion';
 
 export function DefaultLayout() {
   const osInfo = useOsInfo();
   return (
     <DialogProvider>
       <ToastProvider>
-        <div
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.1, delay: 0.1 }}
           className={classNames(
             'w-full h-full',
             osInfo?.osType === 'linux' && 'border border-background-highlight-secondary',
           )}
         >
           <Outlet />
-        </div>
+        </motion.div>
         <GlobalHooks />
       </ToastProvider>
     </DialogProvider>

src-web/components/GlobalHooks.tsx

@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { getCurrent } from '@tauri-apps/api/webviewWindow';
 import { useEffect } from 'react';
+import { useClipboardText } from '../hooks/useClipboardText';
 import { useCommandPalette } from '../hooks/useCommandPalette';
 import { cookieJarsQueryKey } from '../hooks/useCookieJars';
 import { foldersQueryKey } from '../hooks/useFolders';
@@ -24,6 +25,13 @@ import { workspacesQueryKey } from '../hooks/useWorkspaces';
 import { useZoom } from '../hooks/useZoom';
 import type { Model } from '../lib/models';
 import { modelsEq } from '../lib/models';
+import { catppuccinMacchiato } from '../lib/theme/themes/catppuccin';
+import { githubLight } from '../lib/theme/themes/github';
+import { hotdogStandDefault } from '../lib/theme/themes/hotdog-stand';
+import { monokaiProDefault } from '../lib/theme/themes/monokai-pro';
+import { rosePineDefault } from '../lib/theme/themes/rose-pine';
+import { yaakDark } from '../lib/theme/themes/yaak';
+import { getThemeCSS } from '../lib/theme/window';
 
 export function GlobalHooks() {
   // Include here so they always update, even if no component references them
@@ -146,6 +154,21 @@ export function GlobalHooks() {
   useHotKey('app.zoom_reset', () => zoom.zoomReset);
   useListenToTauriEvent('zoom_reset', () => zoom.zoomReset);
 
+  const [, copy] = useClipboardText();
+  useListenToTauriEvent('generate_theme_css', () => {
+    const themesCss = [
+      yaakDark,
+      monokaiProDefault,
+      rosePineDefault,
+      catppuccinMacchiato,
+      githubLight,
+      hotdogStandDefault,
+    ]
+      .map(getThemeCSS)
+      .join('\n\n');
+    copy(themesCss);
+  });
+
   return null;
 }
 

src-web/components/Settings/Settings.tsx

@@ -1,7 +1,7 @@
 import { getCurrent } from '@tauri-apps/api/webviewWindow';
 import classNames from 'classnames';
 import React from 'react';
-import { createGlobalState, useKeyPressEvent } from 'react-use';
+import { useKeyPressEvent, useLocalStorage } from 'react-use';
 import { useOsInfo } from '../../hooks/useOsInfo';
 import { capitalize } from '../../lib/capitalize';
 import { HStack } from '../core/Stacks';
@@ -17,11 +17,10 @@ enum Tab {
 }
 
 const tabs = [Tab.General, Tab.Appearance];
-const useTabState = createGlobalState<string>(tabs[0]!);
 
 export const Settings = () => {
   const osInfo = useOsInfo();
-  const [tab, setTab] = useTabState();
+  const [tab, setTab] = useLocalStorage<string>('settings_tab', Tab.General);
 
   // Close settings window on escape
   // TODO: Could this be put in a better place? Eg. in Rust key listener when creating the window

src-web/components/Sidebar.tsx

@@ -623,7 +623,7 @@ const SidebarItem = forwardRef(function SidebarItem(
   const deleteRequest = useDeleteRequest(activeRequest ?? null);
   const duplicateHttpRequest = useDuplicateHttpRequest({ id: itemId, navigateAfter: true });
   const duplicateGrpcRequest = useDuplicateGrpcRequest({ id: itemId, navigateAfter: true });
-  const [, copyAsCurl] = useCopyAsCurl(itemId);
+  const copyAsCurl = useCopyAsCurl(itemId);
   const sendRequest = useSendRequest(itemId);
   const sendManyRequests = useSendManyRequests();
   const latestHttpResponse = useLatestHttpResponse(itemId);