[Launcher] Improve api key handling + reload button

Author: jramke

apps/launcher/src/lib/command/main.svelte

@@ -2,7 +2,7 @@
     import * as Command from "@repo/ui/components/command";
     import { Separator } from "@repo/ui/components/separator";
     import { Shortcut } from "@repo/ui/components/shortcut";
-    import { Stash, Unplug } from "@repo/ui/icons";
+    import { RotateCcw, Stash, Unplug } from "@repo/ui/icons";
 	import { onMount } from "svelte";
     import { getCommandMenuContext } from "./context";
     import { apiKey, groups, loading, saves } from "$lib/stores";
@@ -13,6 +13,7 @@
     import { siteConfig } from "@repo/constants";
     import { Badge } from "@repo/ui/components/badge";
     import { get, writable } from "svelte/store";
+    import { getItems } from "$lib/queries";
 
     const { cmdPressed, commandPages, handleItemSelect, searchValue, searchInput, changePage, getCurrentPage, availablePages, resetPages } = getCommandMenuContext();
 
@@ -130,9 +131,13 @@
                     <Stash class="me-2 shrink-0" />
                     Open Stashlist
                 </Command.Item>
-                <Command.Item onSelect={() => changePage(availablePages.connect)} value="Connect your stashes">
+                <Command.Item onSelect={() => getItems()} value="Reload items stashes">
+                    <RotateCcw class="me-2 shrink-0" />
+                    Reload stashes
+                </Command.Item>
+                <Command.Item onSelect={() => changePage(availablePages.connect)} value="Connect your account stashes">
                     <Unplug class="me-2 shrink-0" />
-                    Connect your stashes
+                    Connect your account
                     {#if $apiKey}
                         <Badge class="ml-auto">Connected</Badge>
                     {/if}

apps/launcher/src/lib/command/pages/connect.svelte

@@ -7,6 +7,8 @@
     import { get } from "svelte/store";
     import { apiKey } from "$lib/stores";
     import { toast } from "@repo/ui/components/sonner";
+    import { invalidateAll } from "$app/navigation";
+    import { getItems } from "$lib/queries";
 
     let apiKeyFormError = '';
 
@@ -53,6 +55,7 @@
             apiKey.set($searchValue);
             apiKeyFormError = '';
             toast.success('API key connected!');
+            getItems();
             setTimeout(() => {
                 goPageBack();
             }, 50);

apps/launcher/src/lib/queries.ts

@@ -0,0 +1,50 @@
+import { groups, loading, saves } from "./stores";
+import { getRecord } from "./stronghold";
+import { dev } from "$app/environment";
+import { fetch } from '@tauri-apps/plugin-http';
+
+export async function getItems() {
+    loading.set(true);
+    const getData = async (url: string) => {
+        const response = await fetch(url, 
+            { 
+                method: 'GET',
+                headers: {
+                    'X-Api-Key': await getRecord('api-key'),
+                }
+            }
+        );
+
+        if (!response.ok) {
+            console.error(response.statusText, response);
+            loading.set(false);
+            return;
+        }
+        
+        let result;
+        
+        if (dev) {
+            result = await response.text();            
+            result = JSON.parse(result);
+        } else {
+            result = await response.json();
+        }
+        
+        return result;
+    }
+
+    let savesData: any;
+    let groupsData: any;
+    if (dev) {
+        savesData = await getData('/saves.json');
+        groupsData = await getData('/groups.json');
+    } else {
+        savesData = await getData('https://www.stashlist.app/api/saves');
+        groupsData = await getData('https://www.stashlist.app/api/groups');
+    } 
+
+    saves.set(savesData?.saves);
+    groups.set(groupsData);
+
+    loading.set(false);
+}

apps/launcher/src/routes/+layout.svelte

@@ -4,12 +4,11 @@
 
     import { onMount } from 'svelte';
     import { getRecord, initStronghold } from '$lib/stronghold';
-    import { apiKey, currentPage, groups, loading, saves } from '$lib/stores';
+    import { apiKey, currentPage } from '$lib/stores';
     import { listen } from '@tauri-apps/api/event';
     import { setCommandMenuContext, getCommandMenuContext } from "$lib/command/context";
     import { Toaster } from '@repo/ui/components/sonner';
-    import { dev } from "$app/environment";
-    import { fetch } from '@tauri-apps/plugin-http';
+    import { getItems } from '$lib/queries';
     
     type Payload =  'opened' | 'closed';
 
@@ -25,7 +24,7 @@
         removeTrapFocusListeners = trapFocus();
         const unlisten = listenForEvents();
         document.addEventListener('keydown', onKeydown);
-
+        
         (async () => {
             await initStronghold();
             const apiKeyFromStronghold = await getRecord('api-key');
@@ -111,52 +110,6 @@
         }
     }
 
-    async function getItems() {
-        loading.set(true);
-        const getData = async (url: string) => {
-            const response = await fetch(url, 
-                { 
-                    method: 'GET',
-                    headers: {
-                        'X-Api-Key': await getRecord('api-key'),
-                    }
-                }
-            );
-
-            if (!response.ok) {
-                console.error(response.statusText, response);
-                loading.set(false);
-                return;
-            }
-            
-            let result;
-            
-            if (dev) {
-                result = await response.text();            
-                result = JSON.parse(result);
-            } else {
-                result = await response.json();
-            }
-            
-            return result;
-        }
-
-        let savesData: any;
-        let groupsData: any;
-        if (dev) {
-            savesData = await getData('/saves.json');
-            groupsData = await getData('/groups.json');
-        } else {
-            savesData = await getData('https://www.stashlist.app/api/saves');
-            groupsData = await getData('https://www.stashlist.app/api/groups');
-        } 
-
-        saves.set(savesData?.saves);
-        groups.set(groupsData);
-
-        loading.set(false);
-    }
-
 </script>
 
 <Toaster offset={16} duration={1300} position="bottom-center" />

packages/ui/icons/index.ts

@@ -1,6 +1,6 @@
 import type { Icon as LucideIcon } from "lucide-svelte";
 
-import { Inbox, Monitor, Plus, FolderPlus, Folder, Check, Bookmark, Compass, LogOut, Pencil, Trash2, X, Sun, Moon, MoreHorizontal, Trash, CircleDashed, Loader, LayoutGrid, StretchHorizontal, ChevronsUpDown, LayoutDashboard, Copy, GripVertical, Tv, Info, Space, Folders, Eye, EyeOff, ChevronLeft, Unplug, Search } from "lucide-svelte";
+import { Inbox, Monitor, Plus, FolderPlus, Folder, Check, Bookmark, Compass, LogOut, Pencil, Trash2, X, Sun, Moon, MoreHorizontal, Trash, CircleDashed, Loader, LayoutGrid, StretchHorizontal, ChevronsUpDown, LayoutDashboard, Copy, GripVertical, Tv, Info, Space, Folders, Eye, EyeOff, ChevronLeft, Unplug, Search, RotateCcw } from "lucide-svelte";
 
 import GitHub from "./github.svelte";
 import Google from "./google.svelte";
@@ -47,4 +47,5 @@ export {
     Search,
     Eye,
     EyeOff,
+    RotateCcw,
 }