Move select task into menu

Kiln-AI · Oct 9, 2024 · 2766ec8 · 2766ec8
1 parent dd1f5ee
commit 2766ec8
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 58 deletions.
diff --git a/app/web_ui/src/routes/(app)/+layout.svelte b/app/web_ui/src/routes/(app)/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import "../../app.css"
   import { current_project, current_task } from "$lib/stores"
+  import SelectTasksMenu from "./select_tasks_menu.svelte"
 </script>
 
 <div class="drawer lg:drawer-open">
@@ -54,14 +55,17 @@
         </a>
       </li>
       <li>
-        <a href="/select_task">
-          <div class="grid grid-cols-[auto,1fr] gap-x-3 gap-y-1 text-sm">
-            <span class="font-bold whitespace-nowrap">Project:</span>
-            <span class="truncate">{$current_project?.name}</span>
-            <span class="font-bold whitespace-nowrap">Task:</span>
-            <span class="truncate">{$current_task?.name}</span>
-          </div>
-        </a>
+        <details>
+          <summary>
+            <div class="grid grid-cols-[auto,1fr] gap-x-3 gap-y-1 text-sm">
+              <span class="font-bold whitespace-nowrap">Project:</span>
+              <span class="truncate">{$current_project?.name}</span>
+              <span class="font-bold whitespace-nowrap">Task:</span>
+              <span class="truncate">{$current_task?.name}</span>
+            </div>
+          </summary>
+          <SelectTasksMenu />
+        </details>
       </li>
       <li><a href="/?1">Sidebar Item 1</a></li>
       <li><a href="/?2">Sidebar Item 2</a></li>

diff --git a/...src/routes/(app)/select_task/+page.svelte → ...src/routes/(app)/select_tasks_menu.svelte b/...src/routes/(app)/select_task/+page.svelte → ...src/routes/(app)/select_tasks_menu.svelte
@@ -5,6 +5,8 @@
   import { ui_state } from "$lib/stores"
   import { goto } from "$app/navigation"
 
+  let id = "select-tasks-menu-" + Math.random().toString(36)
+
   $: project_list = $projects?.projects || []
   let manually_selected_project: ProjectInfo | null = null
   let tasks_loading = false
@@ -39,7 +41,6 @@
     } catch (error) {
       tasks_loading_error = "Tasks failed to load: " + error
       selected_project_tasks = []
-      console.error(error)
     } finally {
       tasks_loading = false
     }
@@ -57,56 +58,62 @@
       }
     })
 
-    goto(`/`)
+    goto(`/`, { replaceState: true })
+
+    // Close the menu
+    const menu = document.getElementById(id)
+    if (
+      menu &&
+      menu.parentElement &&
+      menu.parentElement instanceof HTMLDetailsElement
+    ) {
+      menu.parentElement.open = false
+    }
   }
 </script>
 
-<h1 class="text-2xl font-bold mb-6">Switch Project or Task</h1>
-
-<div>
-  <ul class="menu menu-md bg-base-200 rounded-box w-[500px]">
-    {#each project_list as project}
-      {#if project.path == selected_project?.path}
-        <li>
-          <h1>
-            {project.name}
-          </h1>
-          <ul>
-            {#if tasks_loading}
-              <li
-                class="flex justify-center place-items-center place-content-center h-32"
-              >
-                <span class="loading loading-spinner loading-md"></span>
-              </li>
-            {:else if tasks_loading_error}
-              <li
-                class="flex justify-center place-items-center place-content-center h-32"
-              >
-                <span class="flex flex-col">
-                  <span class="font-bold">Error</span>
-                  <span class="">{tasks_loading_error}</span>
-                </span>
+<ul class="menu menu-md bg-base-200 rounded-box" {id}>
+  {#each project_list as project}
+    {#if project.path == selected_project?.path}
+      <li>
+        <h1>
+          <span class="badge badge-secondary badge-outline">Project</span>
+          {project.name}
+        </h1>
+        <ul>
+          {#if tasks_loading}
+            <li
+              class="flex justify-center place-items-center place-content-center h-32"
+            >
+              <span class="loading loading-spinner loading-md"></span>
+            </li>
+          {:else if tasks_loading_error}
+            <li
+              class="flex justify-center place-items-center place-content-center h-32"
+            >
+              <span class="flex flex-col">
+                <span class="font-bold">Error</span>
+                <span class="">{tasks_loading_error}</span>
+              </span>
+            </li>
+          {:else}
+            {#each selected_project_tasks as task}
+              <li>
+                <button on:click={() => select_task(task)}>
+                  {task.name}
+                </button>
               </li>
-            {:else}
-              {#each selected_project_tasks as task}
-                <li>
-                  <button on:click={() => select_task(task)}>
-                    <span class="badge badge-secondary badge-outline">Task</span
-                    >
-                    {task.name}
-                  </button>
-                </li>
-              {/each}
-            {/if}
-          </ul>
-        </li>
-      {:else}
-        <li>
-          <button on:click={() => select_project(project)}>
-            {project.name}
-          </button>
-        </li>
-      {/if}
-    {/each}
-  </ul>
-</div>
+            {/each}
+          {/if}
+        </ul>
+      </li>
+    {:else}
+      <li>
+        <button on:click={() => select_project(project)}>
+          <span class="badge badge-secondary badge-outline">Project</span>
+          {project.name}
+        </button>
+      </li>
+    {/if}
+  {/each}
+</ul>