Make every table sortable and exportable to CSV

Applies the useSortable/SortableTh infrastructure introduced in the
Diagnostic Log commit to the rest of the app's tables: Audit Log,
Users, Servers (manage table), server task tables (grouped by
schedule type, on both the all-servers and per-server views), DNS
providers/zones/records, Docker containers, Gitea repos, Integrations
(manage table), IP Addresses, Proxmox guests, Secrets (already had
CSV, gained sorting), Semaphore templates, Synology volumes/disks, and
Tailscale devices.

Every column header is now click-to-sort (again on the raw field, not
its formatted display -- a byte count sorts numerically even though
the cell shows "1.2 GB", a date sorts chronologically even though the
cell shows "5d 15h 2m"), and every table got an "Export CSV" button
next to its Refresh button, exporting whatever's currently
sorted/filtered via the existing downloadCsv util.

Grouped tables (ServerTaskTable renders one sub-table per schedule
type) can't call the useSortable hook per group without breaking the
Rules of Hooks, so extracted its comparison core as a standalone
sortItems() function, driven by one shared sort-state pair at the
component's top level and applied per group.

Deliberately left two small (1-6 row) tables embedded inside stat
cards unsorted -- Proxmox's per-node storage list and ServerDetail's
agent-reported disk list -- since they're secondary detail inside an
already-scannable card, not primary list content; happy to add if
useful in practice.

Verified the shared sort core (sortItems) directly: numeric-aware
string compare (so "item2" sorts before "item10"), numbers, booleans,
and that null/undefined always sort to the end regardless of
direction.

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

web/src/pages/Servers.tsx

@@ -3,6 +3,9 @@ import { Link } from "react-router-dom";
 import { api, type CurrentUser, type ServerRecord } from "../api/client";
 import CopyButton from "../components/CopyButton";
 import { formatDateTime } from "../utils/date";
+import { useSortable } from "../hooks/useSortable";
+import SortableTh from "../components/SortableTh";
+import { downloadCsv } from "../utils/csv";
 
 function typeBadgeStyle(colors: Record<string, string>, type: string): CSSProperties {
   const color = colors[type];
@@ -92,6 +95,17 @@ export default function Servers({ user }: { user: CurrentUser }) {
     }
   }
 
+  const { sorted: sortedServers, sortKey, sortDir, requestSort } = useSortable(servers);
+
+  function exportCsv() {
+    if (!sortedServers) return;
+    downloadCsv(
+      "servers.csv",
+      ["Name", "Hostname", "Token prefix", "Last seen"],
+      sortedServers.map((s) => [s.name, s.hostname ?? "", s.apiTokenPrefix, s.lastSeenAt ? formatDateTime(new Date(s.lastSeenAt)) : "never"]),
+    );
+  }
+
   return (
     <>
       <div className="d-flex align-items-center mb-3">
@@ -208,19 +222,36 @@ export default function Servers({ user }: { user: CurrentUser }) {
           )}
 
           <div className="card">
+            <div className="card-header justify-content-end">
+              <button className="btn btn-outline-secondary btn-sm" onClick={exportCsv} disabled={servers.length === 0}>
+                Export CSV
+              </button>
+            </div>
             <div className="table-responsive">
               <table className="table table-vcenter card-table">
                 <thead>
                   <tr>
-                    <th>Name</th>
-                    <th>Hostname</th>
+                    <SortableTh<ServerRecord> label="Name" sortKeyName="name" activeKey={sortKey} direction={sortDir} onSort={requestSort} />
+                    <SortableTh<ServerRecord>
+                      label="Hostname"
+                      sortKeyName="hostname"
+                      activeKey={sortKey}
+                      direction={sortDir}
+                      onSort={requestSort}
+                    />
                     <th>Token</th>
-                    <th>Last seen</th>
+                    <SortableTh<ServerRecord>
+                      label="Last seen"
+                      sortKeyName="lastSeenAt"
+                      activeKey={sortKey}
+                      direction={sortDir}
+                      onSort={requestSort}
+                    />
                     <th className="w-1">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
-                  {servers.map((s) => (
+                  {sortedServers?.map((s) => (
                     <tr key={s.id}>
                       <td>
                         <Link to={`/servers/${s.id}`}>{s.name}</Link>
@@ -243,7 +274,7 @@ export default function Servers({ user }: { user: CurrentUser }) {
                       </td>
                     </tr>
                   ))}
-                  {servers.length === 0 && (
+                  {sortedServers?.length === 0 && (
                     <tr>
                       <td colSpan={5} className="text-secondary text-center">
                         No servers registered yet.