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/Integrations.tsx

@@ -3,6 +3,9 @@ import { Link } from "react-router-dom";
 import { api, type CurrentUser, type IntegrationSummary, type IntegrationType } from "../api/client";
 import IntegrationForm from "../components/IntegrationForm";
 import IntegrationEditForm from "../components/IntegrationEditForm";
+import { useSortable } from "../hooks/useSortable";
+import SortableTh from "../components/SortableTh";
+import { downloadCsv } from "../utils/csv";
 
 const TYPE_LABELS: Record<IntegrationType, string> = {
   tailscale: "Tailscale",
@@ -68,6 +71,17 @@ export default function Integrations({ user }: { user: CurrentUser }) {
     }
   }
 
+  const { sorted: sortedIntegrations, sortKey, sortDir, requestSort } = useSortable(integrations);
+
+  function exportCsv() {
+    if (!sortedIntegrations) return;
+    downloadCsv(
+      "integrations.csv",
+      ["Name", "Type", "Status"],
+      sortedIntegrations.map((i) => [i.name, TYPE_LABELS[i.type], i.enabled ? "Enabled" : "Disabled"]),
+    );
+  }
+
   return (
     <>
       <div className="d-flex align-items-center mb-3">
@@ -95,18 +109,29 @@ export default function Integrations({ user }: { user: CurrentUser }) {
             <IntegrationForm onCreated={loadIntegrations} onCancel={() => setManaging(false)} />
           )}
           <div className="card">
+            <div className="card-header justify-content-end">
+              <button className="btn btn-outline-secondary btn-sm" onClick={exportCsv} disabled={!integrations || integrations.length === 0}>
+                Export CSV
+              </button>
+            </div>
             <div className="table-responsive">
               <table className="table table-vcenter card-table">
                 <thead>
                   <tr>
-                    <th>Name</th>
-                    <th>Type</th>
-                    <th>Status</th>
+                    <SortableTh<IntegrationSummary> label="Name" sortKeyName="name" activeKey={sortKey} direction={sortDir} onSort={requestSort} />
+                    <SortableTh<IntegrationSummary> label="Type" sortKeyName="type" activeKey={sortKey} direction={sortDir} onSort={requestSort} />
+                    <SortableTh<IntegrationSummary>
+                      label="Status"
+                      sortKeyName="enabled"
+                      activeKey={sortKey}
+                      direction={sortDir}
+                      onSort={requestSort}
+                    />
                     <th className="w-1">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
-                  {integrations?.map((i) => (
+                  {sortedIntegrations?.map((i) => (
                     <tr key={i.id}>
                       <td>{i.name}</td>
                       <td>
@@ -134,7 +159,7 @@ export default function Integrations({ user }: { user: CurrentUser }) {
                       </td>
                     </tr>
                   ))}
-                  {integrations?.length === 0 && (
+                  {sortedIntegrations?.length === 0 && (
                     <tr>
                       <td colSpan={4} className="text-secondary text-center">
                         No integrations configured yet.