From 4f736b4656a8884ecabbc5a77a625a08be36e1db Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 24 May 2024 18:54:30 -0700
Subject: [PATCH] Better theme export

---
 src-tauri/src/lib.rs                          |  2 +-
 .../components/Settings/SettingsDesign.tsx    | 49 +++++++++----------
 src-web/lib/theme/window.ts                   |  2 +-
 3 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 6cffbea4..22bd627e 100644
--- a/src-tauri/src/lib.rs
+++ b/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");
     }
diff --git a/src-web/components/Settings/SettingsDesign.tsx b/src-web/components/Settings/SettingsDesign.tsx
index e0eb80d9..3d11248f 100644
--- a/src-web/components/Settings/SettingsDesign.tsx
+++ b/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 dir = await open({ directory: true });
-    if (!dir) return;
+  const saveThemes = () => {
+    setLoadingExport(true);
+    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');
-    const coreThemeCSS = [
-      yaakDark,
-      catppuccinMacchiato,
-      rosePineDefault,
-      monokaiProDefault,
-      githubLight,
-    ]
-      .map(getThemeCSS)
-      .join('\n\n');
-
-    await invoke('cmd_write_file_dev', {
-      pathname: dir + '/themes-all.css',
-      contents: coreThemeCSS,
-    });
-    await invoke('cmd_write_file_dev', {
-      pathname: dir + '/themes-slim.css',
-      contents: allThemesCSS,
-    });
+      try {
+        await invoke('cmd_write_file_dev', {
+          pathname: exportDir + '/themes-all.css',
+          contents: allThemesCSS,
+        });
+        await invoke('cmd_write_file_dev', {
+          pathname: exportDir + '/themes-slim.css',
+          contents: coreThemeCSS,
+        });
+      } catch (err) {
+        console.log('FAILED', err);
+      }
+      setLoadingExport(false);
+    }, 500);
   };
 
   return (
@@ -96,6 +90,7 @@ export function SettingsDesign() {
           </Button>
           <Button
             disabled={exportDir == null}
+            isLoading={loadingExport}
             size="sm"
             color="primary"
             variant="border"
diff --git a/src-web/lib/theme/window.ts b/src-web/lib/theme/window.ts
index 13623102..7d791b72 100644
--- a/src-web/lib/theme/window.ts
+++ b/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) {