From f81de2d94bd5c84bde9ed9cb7cf2a6b02e12728d Mon Sep 17 00:00:00 2001
From: Hein <hein.puth@gmail.com>
Date: Sun, 3 May 2026 21:34:29 +0200
Subject: [PATCH] refactor(ui): replace NativeSelectCtrl with Boxer for project
 selection

---
 .../components/thoughts/ThoughtsPage.svelte   | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/thoughts/ThoughtsPage.svelte b/ui/src/components/thoughts/ThoughtsPage.svelte
index 339660a..72df75e 100644
--- a/ui/src/components/thoughts/ThoughtsPage.svelte
+++ b/ui/src/components/thoughts/ThoughtsPage.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import {
+    Boxer,
+    BoxerResolveSpecAdapter,
     ErrorBoundary,
     FormerResolveSpecAPI,
     GridlerFull,
-    NativeSelectCtrl,
     type GridColumnFilters,
     type GridlerColumn,
     type GridlerContextMenuItem,
   } from "@warkypublic/svelix";
   import FormerShell from "../shared/FormerShell.svelte";
-  import { onMount } from "svelte";
   import { api } from "../../api";
   import { adminGridTheme } from "../../gridTheme";
   import { GlobalStateStore } from "../../shellState";
@@ -34,16 +34,21 @@
   let editorValues = $state<{ id?: string; content: string }>({ content: '' });
   let contextRow = $state<Record<string, unknown> | null>(null);
   let refreshKey = $state(0);
-  let projectOptions = $state<{ label: string; value: string }[]>([]);
   const authToken = GlobalStateStore.getState().session.authToken ?? '';
   const thoughtOnAPICall = $derived(FormerResolveSpecAPI({
     authToken,
     url: '/api/rs/public/thoughts'
   }));
 
-  onMount(async () => {
-    const projects = await api.projects.list();
-    projectOptions = projects.map((p) => ({ label: p.name, value: p.id }));
+  const projectBoxerAdapter = new BoxerResolveSpecAdapter({
+    baseUrl: '/api/rs',
+    token: authToken,
+    schema: 'public',
+    entity: 'projects',
+    labelField: 'name',
+    valueField: 'guid',
+    columns: ['guid', 'name'],
+    sort: [{ column: 'name', direction: 'asc' }],
   });
 
   const menuItems: GridlerContextMenuItem[] = [
@@ -563,13 +568,16 @@
         disabled={state.request === 'delete'}
         onchange={(v) => state.setState('values', { ...state.values, content: v })}
       />
-      <NativeSelectCtrl
+      <Boxer
         label="Project"
         name="project_id"
         disabled={state.request === 'delete'}
-        value={state.values?.project_id ?? ''}
-        options={[{ label: '— None —', value: '' }, ...projectOptions]}
-        onchange={(v) => state.setState('values', { ...state.values, project_id: v || undefined })}
+        dataSource="server"
+        adapter={projectBoxerAdapter}
+        value={state.values?.project_id ?? null}
+        clearable
+        searchable
+        onChange={(v) => state.setState('values', { ...state.values, project_id: v || undefined })}
       />
     </div>
   {/snippet}