admin ux updates

src/routes/admin/+page.svelte

@@ -9,6 +9,7 @@
   let dismissing = {};
   let markingRead = {};
   let adminSearch = data.adminQ;
+  let personalitiesPanel;
   let searchTimer;
 
   // Edit state
@@ -130,13 +131,13 @@
     }
   }
 
-  function navigate(params) {
+  function navigate(params, options = {}) {
     const u = new URL($page.url);
     for (const [k, v] of Object.entries(params)) {
       if (v) u.searchParams.set(k, v);
       else u.searchParams.delete(k);
     }
-    goto(u.toString(), { keepFocus: true });
+    return goto(u.toString(), { keepFocus: true, ...options });
   }
 
   function onAdminSearch() {
@@ -189,6 +190,8 @@
   }
 
   $: viewMax = Math.max(...(data.views?.chart ?? []).map(d => d.visitors), 1);
+  $: sortCol = $page.url.searchParams.get('sort') ?? '';
+  $: sortDir = $page.url.searchParams.get('dir') ?? 'asc';
 
   const reasonLabels = {
     'incorrect-data':  'Incorrect data',
@@ -294,7 +297,7 @@
       {#each [['unread','Unread'],['all','All']] as [val, label]}
         <button class="btn" style="padding:4px 10px; font-size:11px;
           {data.messageFilter === val ? 'background:var(--cyan-dim); border-color:var(--cyan); color:var(--cyan);' : ''}"
-          type="button" on:click={() => navigate({ messages: val })}>
+          type="button" on:click={() => navigate({ messages: val }, { noScroll: true })}>
           {label}
         </button>
       {/each}
@@ -381,7 +384,7 @@
       {#each [['open','Open'],['dismissed','Dismissed'],['all','All']] as [val, label]}
         <button class="btn" style="padding:4px 10px; font-size:11px;
           {data.reportFilter === val ? 'background:var(--amber-dim); border-color:var(--amber); color:var(--amber);' : ''}"
-          type="button" on:click={() => navigate({ reports: val })}>
+          type="button" on:click={() => navigate({ reports: val }, { noScroll: true })}>
           {label}
         </button>
       {/each}
@@ -453,7 +456,7 @@
 </div>
 
 <!-- Personalities section -->
-<div class="panel" style="overflow:hidden;">
+<div class="panel" style="overflow:hidden;" bind:this={personalitiesPanel}>
   <div style="padding:14px 18px; border-bottom:1px solid var(--border);
               display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
     <div style="font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px;
@@ -473,11 +476,17 @@
     <table style="width:100%; border-collapse:collapse;">
       <thead>
         <tr style="background:var(--raised);">
-          {#each ['Fixture','Manufacturer','Ch','By','Published','Status',''] as h}
+          {#each ['Fixture','Manufacturer','Views','Ch','By','Published','Status',''] as h}
             <th style="padding:9px 14px; text-align:left; font-family:'Barlow Condensed',sans-serif;
                        font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
-                       color:var(--text2); border-bottom:1px solid var(--border); white-space:nowrap;">
-              {h}
+                       color:{sortCol === h ? 'var(--text)' : 'var(--text2)'}; border-bottom:1px solid var(--border); white-space:nowrap;
+                       {h ? 'cursor:pointer; user-select:none;' : ''}"
+                on:click={() => {
+                  if (!h) return;
+                  const newDir = sortCol === h && sortDir === 'asc' ? 'desc' : 'asc';
+                  navigate({ sort: h, dir: newDir }, { noScroll: true });
+                }}>
+              {h}{#if sortCol === h}&nbsp;{sortDir === 'asc' ? '↑' : '↓'}{/if}
             </th>
           {/each}
         </tr>
@@ -502,6 +511,7 @@
               {/if}
             </td>
             <td style="padding:9px 14px; font-size:12px; color:var(--text2);">{p.manufacturer || '—'}</td>
+            <td style="padding:9px 14px; font-family:'DM Mono',monospace; font-size:13px; color:var(--amber);">{p.view_count}</td>
             <td style="padding:9px 14px; font-family:'DM Mono',monospace; font-size:13px; color:var(--amber);">{p.channel_count}</td>
             <td style="padding:9px 14px; font-size:12px; color:var(--text3);">{p.creator_handle || '—'}</td>
             <td style="padding:9px 14px; font-family:'DM Mono',monospace; font-size:11px; color:var(--text3); white-space:nowrap;">{formatDate(p.created_at)}</td>
@@ -697,7 +707,7 @@
       {#each Array.from({length: data.totalPages}, (_, i) => i+1) as p}
         <button class="btn" style="padding:4px 10px; font-family:'DM Mono',monospace; font-size:12px;
           {p === data.adminPage ? 'background:var(--amber-dim); border-color:var(--amber); color:var(--amber);' : ''}"
-          type="button" on:click={() => navigate({ page: String(p) })}>
+          type="button" on:click={async () => { await navigate({ page: String(p) }, { noScroll: true }); personalitiesPanel.scrollIntoView({ behavior: 'smooth' }); }}>
           {p}
         </button>
       {/each}