feat: refresh projects + misc improvements

Author: aditya-xq

autoproject/src/lib/components/ProjectSelectionModal.svelte

@@ -65,13 +65,13 @@
     >
         <div class="flex items-start justify-center pt-24 p-4">
             <div 
-                class="w-full max-w-xl bg-gray-900/95 rounded-lg shadow-2xl border border-gray-800/50"
+                class="w-full max-w-xl bg-zinc-900/95 rounded-lg shadow-2xl border border-zinc-800/50"
                 transition:fly={{ y: -20, duration: 300, easing: cubicOut }}
             >
-                <div class="flex items-center justify-between p-4 border-b border-gray-800/50">
+                <div class="flex items-center justify-between p-4 border-b border-zinc-800/50">
                     <h2 class="text-lg font-medium text-white">Select Project</h2>
                     <button 
-                        class="text-gray-400 hover:text-white transition-all duration-200 transform hover:scale-110"
+                        class="text-zinc-400 hover:text-white transition-all duration-200 transform hover:scale-110"
                         aria-label="close modal"
                         onclick={handleClose}
                     >
@@ -87,7 +87,7 @@
                         value={searchTerm}
                         oninput={handleInput}
                         placeholder="Search projects..."
-                        class="w-full px-3 py-2 text-white bg-gray-800/50 border border-gray-700/50 rounded-md focus:ring-1 focus:ring-purple-500 focus:border-transparent text-sm transition-all duration-200"
+                        class="w-full px-3 py-2 text-white bg-zinc-800/50 border border-zinc-700/50 rounded-md focus:ring-1 focus:ring-purple-500 focus:border-transparent text-sm transition-all duration-200"
                     />
                 </div>
 
@@ -97,23 +97,23 @@
                             <div class="animate-spin rounded-full h-6 w-6 border-2 border-purple-500 border-t-transparent"></div>
                         </div>
                     {:else if filteredProjects.length === 0}
-                        <div class="text-center py-6 text-gray-400 text-sm">
+                        <div class="text-center py-6 text-zinc-400 text-sm">
                             No projects found
                         </div>
                     {:else}
                         <div class="space-y-2">
-                            {#each filteredProjects as project (project.name)}
+                            {#each filteredProjects as project (project.id)}
                                 <button
-                                    class="w-full flex items-center p-3 bg-gray-800/30 rounded-md hover:bg-gray-700/50 transition-all duration-200 text-left group hover:translate-x-1"
+                                    class="w-full flex items-center p-3 bg-zinc-800/30 rounded-md hover:bg-zinc-700/50 transition-all duration-200 text-left group hover:translate-x-1"
                                     onclick={() => handleProjectSelect(project)}
                                 >
                                     <div class="flex-1 min-w-0">
                                         <h3 class="text-sm font-medium text-white truncate group-hover:text-purple-400 transition-colors duration-200">
                                             {project.name}
                                         </h3>
-                                        <p class="text-xs text-gray-400 mt-0.5 truncate">{project.description}</p>
+                                        <p class="text-xs text-zinc-400 mt-0.5 truncate">{project.description}</p>
                                     </div>
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400 group-hover:text-purple-400 transition-all duration-200 transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-zinc-400 group-hover:text-purple-400 transition-all duration-200 transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                     </svg>
                                 </button>

autoproject/src/routes/projects/+page.svelte

@@ -2,9 +2,13 @@
     import { appState } from '$lib/state.svelte'
     import { notificationStore } from '$lib/store'
     import { marked } from 'marked'
-   
-    let selectedProjectId = $state<number | null>(null)
-    let searchQuery = $state('')
+    import { page } from '$app/state'
+    import { goto } from '$app/navigation'
+
+    let selectedProjectId = $derived<string | null>(
+        page.url.searchParams.get('id') ? String(page.url.searchParams.get('id')) : null
+    )
+    let searchQuery = $state('') as string
     let expandedIssueId = $state<number | null>(null)
     let updatingIssues = $state<Set<number>>(new Set())
     let deletingIssues = $state<Set<number>>(new Set())
@@ -46,7 +50,7 @@
     }
 
     const selectProject = (id: number) => {
-        selectedProjectId = id
+        goto('/projects?id=' + id)
         expandedIssueId = null // Reset expanded issue when switching projects
         showDeleteConfirm = null // Reset delete confirmation
         completedInSession.clear() // Reset completed in session when switching projects
@@ -312,7 +316,7 @@
                                                 </h4>
                                             </button>
                                             <div class="flex items-center gap-3">
-                                                <span class="text-xs text-zinc-600 font-mono whitespace-nowrap">
+                                                <span class="text-sm text-zinc-600 font-mono whitespace-nowrap">
                                                     {formatDate(issue.updatedAt)}
                                                 </span>
 

autoproject/src/routes/projects/+page.ts

@@ -0,0 +1,22 @@
+export const ssr = false
+
+const loadProjects = async () => {
+    const { appState } = await import("$lib/state.svelte")
+    try {
+        const tool = appState.settings.tool
+        const projectData = await fetch(`/api/project?tool=${tool}`, {
+            method: 'GET',
+        })
+        const projectJson = await projectData.json()
+        appState.projects = projectJson.data
+    } catch (error) {
+        appState.isLoading = false
+        throw error
+    }
+}
+
+export const load = async () => {
+    // Fire and forget - won't block page load
+    loadProjects()
+    return {}
+}

autoproject/svelte.config.js

@@ -6,6 +6,11 @@ const config = {
 	preprocess: vitePreprocess({ script: true }),
 	kit: {
 		adapter: adapter()
+	},
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
 	}
 }