From bcaa8d062a650f28fe817fdc3c717818e9bb79ee Mon Sep 17 00:00:00 2001
From: John B Nevin <jbn@jbnco.co>
Date: Sat, 25 Jul 2026 09:47:51 -0500
Subject: [PATCH] feat(ui): sortable columns, size totals, and copy-URL button
 in blobs table

- Click any column header (hash, size, type, uploader, uploaded) to
  sort; click again to reverse direction. Active sort shown with
  arrow indicator. Sensible default direction per column.
- Show total byte size alongside blob counts (and filtered totals
  when searching/filtering).
- Add 'Copy URL' action next to 'Open' for one-click blob URL copy.
---
 ui/src/routes/blobs/+page.svelte | 78 ++++++++++++++++++++++++++++----
 1 file changed, 69 insertions(+), 9 deletions(-)

diff --git a/ui/src/routes/blobs/+page.svelte b/ui/src/routes/blobs/+page.svelte
index 8695875..88979c2 100644
--- a/ui/src/routes/blobs/+page.svelte
+++ b/ui/src/routes/blobs/+page.svelte
@@ -6,12 +6,16 @@
 	import { listBlobs, listAllBlobs, deleteBlob, type BlobDescriptor } from '$lib/api';
 	import { formatBytes, truncate, timeAgo, isImage } from '$lib/format';
 
+	type SortKey = 'hash' | 'size' | 'type' | 'pubkey' | 'uploaded';
+
 	let blobs = $state<BlobDescriptor[]>([]);
 	let loading = $state(true);
 	let err = $state<string | null>(null);
 	let query = $state('');
 	let mimeFilter = $state('');
 	let pendingDelete = $state<string | null>(null);
+	let sortKey = $state<SortKey>('uploaded');
+	let sortDir = $state<1 | -1>(-1);
 
 	let sess = $state<typeof $session>(null);
 	session.subscribe((s) => (sess = s));
@@ -28,8 +32,44 @@
 		});
 	});
 
+	const sorted = $derived.by(() => {
+		const arr = [...filtered];
+		const dir = sortDir;
+		arr.sort((a, b) => {
+			switch (sortKey) {
+				case 'size':
+					return (a.size - b.size) * dir;
+				case 'type':
+					return a.type.localeCompare(b.type) * dir;
+				case 'pubkey':
+					return (a.pubkey ?? '').localeCompare(b.pubkey ?? '') * dir;
+				case 'uploaded':
+					return (a.uploaded - b.uploaded) * dir;
+				default:
+					return a.sha256.localeCompare(b.sha256) * dir;
+			}
+		});
+		return arr;
+	});
+
+	const totalSize = $derived(blobs.reduce((acc, b) => acc + b.size, 0));
+	const filteredSize = $derived(filtered.reduce((acc, b) => acc + b.size, 0));
 	const mimeOptions = $derived(Array.from(new Set(blobs.map((b) => b.type.split('/')[0]))).sort());
 
+	function toggleSort(key: SortKey) {
+		if (sortKey === key) {
+			sortDir = sortDir === 1 ? -1 : 1;
+		} else {
+			sortKey = key;
+			sortDir = key === 'uploaded' || key === 'size' ? -1 : 1;
+		}
+	}
+
+	function sortIndicator(key: SortKey): string {
+		if (sortKey !== key) return '';
+		return sortDir === 1 ? ' ▲' : ' ▼';
+	}
+
 	onMount(async () => {
 		if (!sess) {
 			goto(`${base}/`);
@@ -70,8 +110,12 @@
 			{sess?.isAdmin ? 'All blobs' : 'Your blobs'}
 		</h1>
 		<p class="text-sm text-neutral-400">
-			{filtered.length} of {blobs.length}
-			{blobs.length === 1 ? 'blob' : 'blobs'}
+			{#if filtered.length === blobs.length}
+				{blobs.length}
+				{blobs.length === 1 ? 'blob' : 'blobs'} · {formatBytes(totalSize)}
+			{:else}
+				{filtered.length} of {blobs.length} blobs · {formatBytes(filteredSize)} of {formatBytes(totalSize)}
+			{/if}
 		</p>
 	</div>
 	<div class="flex gap-2">
@@ -105,21 +149,31 @@
 {:else}
 	<div class="overflow-x-auto rounded border border-neutral-800">
 		<table class="w-full text-sm">
-			<thead class="bg-neutral-900 text-xs uppercase text-neutral-400">
+			<thead class="bg-neutral-900 text-xs uppercase text-neutral-400 select-none">
 				<tr>
 					<th class="px-3 py-2 text-left">Preview</th>
-					<th class="px-3 py-2 text-left">Hash</th>
-					<th class="px-3 py-2 text-left">Size</th>
-					<th class="px-3 py-2 text-left">Type</th>
+					<th class="px-3 py-2 text-left cursor-pointer hover:text-neutral-200" onclick={() => toggleSort('hash')}>
+						Hash{sortIndicator('hash')}
+					</th>
+					<th class="px-3 py-2 text-left cursor-pointer hover:text-neutral-200" onclick={() => toggleSort('size')}>
+						Size{sortIndicator('size')}
+					</th>
+					<th class="px-3 py-2 text-left cursor-pointer hover:text-neutral-200" onclick={() => toggleSort('type')}>
+						Type{sortIndicator('type')}
+					</th>
 					{#if sess?.isAdmin}
-						<th class="px-3 py-2 text-left">Uploader</th>
+						<th class="px-3 py-2 text-left cursor-pointer hover:text-neutral-200" onclick={() => toggleSort('pubkey')}>
+							Uploader{sortIndicator('pubkey')}
+						</th>
 					{/if}
-					<th class="px-3 py-2 text-left">Uploaded</th>
+					<th class="px-3 py-2 text-left cursor-pointer hover:text-neutral-200" onclick={() => toggleSort('uploaded')}>
+						Uploaded{sortIndicator('uploaded')}
+					</th>
 					<th class="px-3 py-2 text-right">Actions</th>
 				</tr>
 			</thead>
 			<tbody class="divide-y divide-neutral-800">
-				{#each filtered as b (b.sha256)}
+				{#each sorted as b (b.sha256)}
 					<tr class="hover:bg-neutral-900/50">
 						<td class="px-3 py-2">
 							{#if isImage(b.type)}
@@ -167,6 +221,12 @@
 								>
 									Open
 								</a>
+								<button
+									onclick={() => copy(b.url)}
+									class="rounded border border-neutral-700 px-2 py-1 text-xs hover:bg-neutral-800"
+								>
+									Copy URL
+								</button>
 								<button
 									onclick={() => (pendingDelete = b.sha256)}
 									class="rounded border border-red-500/40 text-red-300 px-2 py-1 text-xs hover:bg-red-500/10"