Footer storage/backend display and a staff role that actually grants staff

Footer:
- Left is now 'Backend Storage:' with a capacity bar (blue, peach at 80%,
  red at 95% per DESIGN.md) and a used/total/free tooltip; the watched
  folder path is no longer printed. /api/status/ returns a compact storage
  summary instead of the path (the full storage page still shows paths to
  authenticated users).
- Centre shows the backend API origin (empty = same origin). Staff get a
  link to /setup to point the browser elsewhere; everyone else sees it as
  plain text. The Account 'Backend connection' card is gone — this is
  installation plumbing, not a per-user setting.
- Design spec updated to match.

Staff role:
- The custom role did nothing on several endpoints that only accepted
  Django's is_staff/is_superuser. One canonical check now exists:
  User.is_app_staff (superuser, Django staff, or the staff role), used by
  the stats/users APIs, item object permissions, can_delete, upload/
  similarity/download/match querysets, and the management commands
  (which also pick staff-role accounts for e621 sync/match and file
  ownership).

Verified with a role-only staff account (is_staff/is_superuser false):
stats/users 200, all 32 downloads + 2 scans visible, others' items
editable; the same account as role=user gets 403 for all of those.

frontend/src/components/StatusFooter.tsx

@@ -1,8 +1,18 @@
-import { Folder, Zap } from "lucide-react";
+import { HardDrive, Zap } from "lucide-react";
 import { Link } from "react-router-dom";
 
+import { cn } from "@/lib/cn";
+import { getBackendUrl } from "@/lib/backend";
+import { formatBytes } from "@/lib/format";
 import type { SystemStatus } from "@/lib/types";
 
+/** DESIGN.md capacity bars: blue, peach at 80%, red at 95%. */
+function storageColor(percent: number): string {
+  if (percent >= 95) return "bg-ctp-red";
+  if (percent >= 80) return "bg-ctp-peach";
+  return "bg-ctp-blue";
+}
+
 export function StatusFooter({
   status,
   staff,
@@ -10,6 +20,9 @@ export function StatusFooter({
   status?: SystemStatus;
   staff?: boolean;
 }) {
+  const backend = getBackendUrl() || window.location.origin;
+  const storage = status?.storage;
+
   const workers = (
     <>
       <Zap className="h-3 w-3" />
@@ -26,12 +39,46 @@ export function StatusFooter({
     <footer className="fixed inset-x-0 bottom-0 z-30 border-t border-ctp-surface0 bg-ctp-crust">
       <div className="mx-auto flex h-8 w-full max-w-[1600px] items-center gap-4 px-4 font-mono text-[11px] text-ctp-overlay0">
         <span
-          className="flex min-w-0 items-center gap-1.5"
-          title={status?.watched_folder ?? ""}
+          className="flex min-w-0 shrink-0 items-center gap-1.5"
+          title={
+            storage
+              ? `${formatBytes(storage.used)} of ${formatBytes(storage.total)} used — ${formatBytes(storage.free)} free`
+              : "Backend storage usage"
+          }
         >
-          <Folder className="h-3 w-3 shrink-0" />
-          <span className="hidden shrink-0 sm:inline">Local Storage:</span>
-          <span className="truncate">{status?.watched_folder ?? "…"}</span>
+          <HardDrive className="h-3 w-3 shrink-0" />
+          <span className="hidden shrink-0 sm:inline">Backend Storage:</span>
+          <span className="h-1 w-16 overflow-hidden rounded-full bg-ctp-surface0 sm:w-24">
+            <span
+              className={cn(
+                "block h-full transition-all",
+                storageColor(storage?.percent_used ?? 0),
+              )}
+              style={{
+                width: `${Math.min(storage?.percent_used ?? 0, 100)}%`,
+              }}
+            />
+          </span>
+          <span className="shrink-0">
+            {storage ? `${storage.percent_used.toFixed(1)}%` : "…"}
+          </span>
+        </span>
+
+        <span
+          className="mx-auto hidden min-w-0 items-center gap-1.5 md:flex"
+          title={`Backend API: ${backend}`}
+        >
+          {staff ? (
+            <Link
+              to="/setup"
+              className="truncate transition hover:text-ctp-text"
+              title="Change backend"
+            >
+              {backend}
+            </Link>
+          ) : (
+            <span className="truncate">{backend}</span>
+          )}
         </span>
 
         {staff ? (