feat(data-stores): sortable Code/Name/Updated columns

Click any column header to sort; click again to toggle ASC/DESC.
Sort re-runs the current search immediately if results are showing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/routes/core/data_stores/+page.svelte

@@ -5,9 +5,12 @@ import { goto } from '$app/navigation';
 import { Modal } from 'flowbite-svelte';
 import {
     ArrowRight,
+    ArrowUpDown,
     Check,
+    ChevronDown,
     ChevronLeft,
     ChevronRight,
+    ChevronUp,
     Code,
     Database,
     Eye,
@@ -44,6 +47,8 @@ let qry_for_id = $state('');
 let qry_enabled = $state<'all' | 'enabled' | 'not_enabled'>('all');
 let page_limit = $state(50);
 let page_offset = $state(0);
+let sort_col = $state<string>('code');
+let sort_dir = $state<'ASC' | 'DESC'>('ASC');
 
 // ── Results ───────────────────────────────────────────────────────────────────
 let results: ae_DataStore[] = $state([]);
@@ -112,7 +117,7 @@ async function do_search(reset = true) {
         api_cfg: $ae_api,
         obj_type: 'data_store',
         search_query,
-        order_by_li: [{ code: 'ASC' }, { updated_on: 'DESC' }],
+        order_by_li: [{ [sort_col]: sort_dir }],
         limit: page_limit,
         offset: page_offset,
         log_lvl: 0
@@ -133,6 +138,16 @@ function clear_filters() {
     searched = false;
 }
 
+function toggle_sort(col: string) {
+    if (sort_col === col) {
+        sort_dir = sort_dir === 'ASC' ? 'DESC' : 'ASC';
+    } else {
+        sort_col = col;
+        sort_dir = 'ASC';
+    }
+    if (searched) do_search(false);
+}
+
 // ── Open edit ─────────────────────────────────────────────────────────────────
 function open_edit(obj: ae_DataStore) {
     editing_obj = obj;
@@ -611,13 +626,40 @@ function content_preview(ds: ae_DataStore): string {
                 <table class="w-full text-xs">
                     <thead>
                         <tr class="border-surface-500/20 border-b text-left text-[10px] font-bold uppercase tracking-wider opacity-50">
-                            <th class="px-3 py-2">Code</th>
+                            <th class="px-3 py-2">
-                            <th class="px-3 py-2">Name</th>
+                                <button type="button" class="flex items-center gap-1 hover:opacity-100" onclick={() => toggle_sort('code')}>
+                                    Code
+                                    {#if sort_col === 'code'}
+                                        {#if sort_dir === 'ASC'}<ChevronUp size={10} />{:else}<ChevronDown size={10} />{/if}
+                                    {:else}
+                                        <ArrowUpDown size={10} class="opacity-30" />
+                                    {/if}
+                                </button>
+                            </th>
+                            <th class="px-3 py-2">
+                                <button type="button" class="flex items-center gap-1 hover:opacity-100" onclick={() => toggle_sort('name')}>
+                                    Name
+                                    {#if sort_col === 'name'}
+                                        {#if sort_dir === 'ASC'}<ChevronUp size={10} />{:else}<ChevronDown size={10} />{/if}
+                                    {:else}
+                                        <ArrowUpDown size={10} class="opacity-30" />
+                                    {/if}
+                                </button>
+                            </th>
                             <th class="px-3 py-2">Type</th>
                             <th class="px-3 py-2">Account</th>
                             <th class="px-3 py-2">For</th>
                             <th class="px-3 py-2 hidden md:table-cell">Preview</th>
-                            <th class="px-3 py-2 hidden lg:table-cell">Updated</th>
+                            <th class="px-3 py-2 hidden lg:table-cell">
+                                <button type="button" class="flex items-center gap-1 hover:opacity-100" onclick={() => toggle_sort('updated_on')}>
+                                    Updated
+                                    {#if sort_col === 'updated_on'}
+                                        {#if sort_dir === 'ASC'}<ChevronUp size={10} />{:else}<ChevronDown size={10} />{/if}
+                                    {:else}
+                                        <ArrowUpDown size={10} class="opacity-30" />
+                                    {/if}
+                                </button>
+                            </th>
                             <th class="px-3 py-2"></th>
                         </tr>
                     </thead>