Better theme export

src-tauri/src/lib.rs

@@ -1293,7 +1293,7 @@ async fn cmd_update_folder(folder: Folder, w: WebviewWindow) -> Result<Folder, S
 }
 
 #[tauri::command]
-async fn cmd_write_file_dev(w: WebviewWindow, pathname: &str, contents: &str) -> Result<(), String> {
+async fn cmd_write_file_dev(pathname: &str, contents: &str) -> Result<(), String> {
     if !is_dev() {
         panic!("Cannot write arbitrary files when not in dev mode");
     }

src-web/components/Settings/SettingsDesign.tsx

@@ -1,13 +1,9 @@
 import { invoke } from '@tauri-apps/api/core';
 import { open } from '@tauri-apps/plugin-dialog';
-import React from 'react';
+import React, { useState } from 'react';
 import { useLocalStorage } from 'react-use';
 import { useThemes } from '../../hooks/useThemes';
 import { capitalize } from '../../lib/capitalize';
-import { catppuccinMacchiato } from '../../lib/theme/themes/catppuccin';
-import { githubLight } from '../../lib/theme/themes/github';
-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';
 import { Banner } from '../core/Banner';
@@ -53,30 +49,28 @@ export function SettingsDesign() {
   const themes = useThemes();
 
   const [exportDir, setExportDir] = useLocalStorage<string | null>('theme_export_dir', null);
+  const [loadingExport, setLoadingExport] = useState<boolean>(false);
 
-  const saveThemes = async () => {
+  const saveThemes = () => {
-    const dir = await open({ directory: true });
+    setLoadingExport(true);
-    if (!dir) return;
+    setTimeout(async () => {
+      const allThemesCSS = themes.themes.map(getThemeCSS).join('\n\n');
+      const coreThemeCSS = [yaakDark].map(getThemeCSS).join('\n\n');
 
-    const allThemesCSS = themes.themes.map(getThemeCSS).join('\n\n');
+      try {
-    const coreThemeCSS = [
+        await invoke('cmd_write_file_dev', {
-      yaakDark,
+          pathname: exportDir + '/themes-all.css',
-      catppuccinMacchiato,
+          contents: allThemesCSS,
-      rosePineDefault,
+        });
-      monokaiProDefault,
+        await invoke('cmd_write_file_dev', {
-      githubLight,
+          pathname: exportDir + '/themes-slim.css',
-    ]
+          contents: coreThemeCSS,
-      .map(getThemeCSS)
+        });
-      .join('\n\n');
+      } catch (err) {
-
+        console.log('FAILED', err);
-    await invoke('cmd_write_file_dev', {
+      }
-      pathname: dir + '/themes-all.css',
+      setLoadingExport(false);
-      contents: coreThemeCSS,
+    }, 500);
-    });
-    await invoke('cmd_write_file_dev', {
-      pathname: dir + '/themes-slim.css',
-      contents: allThemesCSS,
-    });
   };
 
   return (
@@ -96,6 +90,7 @@ export function SettingsDesign() {
           </Button>
           <Button
             disabled={exportDir == null}
+            isLoading={loadingExport}
             size="sm"
             color="primary"
             variant="border"

src-web/lib/theme/window.ts

@@ -220,7 +220,7 @@ export function getThemeCSS(theme: YaakTheme): string {
     console.error(err);
   }
 
-  return [`/* ${theme.name} */`, `[data-theme="${theme.id}"] {`, themeCSS, '}'].join('\n');
+  return [`/* ${theme.name} */`, `[data-theme="${theme.id}"] {`, indent(themeCSS), '}'].join('\n');
 }
 
 export function addThemeStylesToDocument(theme: YaakTheme) {