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 ? (

frontend/src/features/account/AccountPage.tsx

@@ -14,7 +14,6 @@ import { useE621 } from "@/store/e621";
 import { toast } from "@/store/toasts";
 
 import { AvatarCard } from "./AvatarCard";
-import { BackendCard } from "./BackendCard";
 import { PreferencesCard } from "./PreferencesCard";
 
 const BASE_URL_OPTIONS = [
@@ -216,7 +215,6 @@ export default function AccountPage() {
         <>
           <AvatarCard />
           <PreferencesCard />
-          <BackendCard />
         </>
       ) : null}
       {loading && !credentials ? (

frontend/src/features/account/BackendCard.tsx

@@ -1,27 +0,0 @@
-import { Link } from "react-router-dom";
-
-import { linkButtonClass } from "@/components/ui";
-import { getBackendUrl } from "@/lib/backend";
-
-export function BackendCard() {
-  const backend = getBackendUrl();
-
-  return (
-    <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-5">
-      <h2 className="text-sm font-semibold text-ctp-subtext1">
-        Backend connection
-      </h2>
-      <p className="mt-1 text-xs text-ctp-overlay0">
-        Where this app sends its API requests. Changing it signs you out.
-      </p>
-      <p className="mt-3 break-all font-mono text-xs text-ctp-subtext0">
-        {backend || `${window.location.origin} (same origin)`}
-      </p>
-      <div className="mt-3">
-        <Link to="/setup" className={linkButtonClass}>
-          Change backend
-        </Link>
-      </div>
-    </section>
-  );
-}

frontend/src/lib/types.ts

@@ -163,7 +163,12 @@ export interface SystemStatus {
     release: string;
     icon: "linux" | "apple" | "windows" | "unknown";
   };
-  watched_folder: string;
+  storage: {
+    used: number;
+    total: number;
+    free: number;
+    percent_used: number;
+  };
   e621_time_ms: number | null;
   workers: {
     active: number;