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.

backend/apps/accounts/models.py

@@ -35,3 +35,10 @@ class User(AbstractUser):
     @property
     def can_upload(self):
         return self.is_superuser or self.role in {self.ROLE_UPLOADER, self.ROLE_STAFF}
+
+    @property
+    def is_app_staff(self):
+        """Staff in this app: superusers, Django staff, or the staff role."""
+        return bool(
+            self.is_superuser or self.is_staff or self.role == self.ROLE_STAFF
+        )

backend/apps/accounts/views.py

@@ -1,10 +1,11 @@
-from rest_framework import mixins, permissions, status, viewsets
+from rest_framework import mixins, status, viewsets
 from rest_framework.authtoken.models import Token
 from rest_framework.permissions import AllowAny, IsAuthenticated
 from rest_framework.response import Response
 from rest_framework.views import APIView
 from django.db.models import Count, Q
 
+from apps.core.permissions import IsAppStaff
 from apps.library.models import MediaItem
 
 from .models import User
@@ -83,22 +84,6 @@ class E621CredentialsView(APIView):
         return Response(self._payload(user))
 
 
-class IsStaffUser(permissions.BasePermission):
-    message = "Staff only."
-
-    def has_permission(self, request, view):
-        user = request.user
-        return bool(
-            user
-            and user.is_authenticated
-            and (
-                user.is_superuser
-                or user.is_staff
-                or user.role == user.ROLE_STAFF
-            )
-        )
-
-
 def resolve_avatar_item(value):
     """Turn a "J-42" / "42" string into a MediaItem.
 
@@ -163,7 +148,7 @@ class UserViewSet(
 ):
     """Staff user directory: roles and J-ID avatars."""
 
-    permission_classes = [IsStaffUser]
+    permission_classes = [IsAppStaff]
     http_method_names = ["get", "patch", "head", "options"]
 
     def get_queryset(self):

backend/apps/core/permissions.py

@@ -0,0 +1,13 @@
+from rest_framework import permissions
+
+
+class IsAppStaff(permissions.BasePermission):
+    """Superusers, Django staff, and accounts with the app's staff role."""
+
+    message = "Staff only."
+
+    def has_permission(self, request, view):
+        user = request.user
+        return bool(
+            user and user.is_authenticated and user.is_app_staff
+        )

backend/apps/core/views.py

@@ -31,13 +31,21 @@ class StatusView(APIView):
 
     def get(self, request):
         started = getattr(request, "start_time", time.perf_counter())
+        from apps.library.tools import storage_info
+
+        watched = storage_info()["watched_folder"]
         payload = {
             "app": "J621",
             "env": settings.APP_ENV,
             "git_hash": settings.GIT_COMMIT_HASH,
             "version": settings.APP_VERSION,
             "os": get_os_info(),
-            "watched_folder": settings.WATCHED_FOLDER,
+            "storage": {
+                "used": watched["used"],
+                "total": watched["total"],
+                "free": watched["free"],
+                "percent_used": watched["percent_used"],
+            },
             "e621_time_ms": None,  # e621 latency is measured client-side
             "workers": _worker_counts(),
         }
@@ -51,10 +59,7 @@ class StatsView(APIView):
     permission_classes = [IsAuthenticated]
 
     def get(self, request):
-        user = request.user
-        if not (
-            user.is_staff or user.is_superuser or user.role == user.ROLE_STAFF
-        ):
+        if not request.user.is_app_staff:
             raise PermissionDenied("Staff only.")
         from apps.library.tools import storage_info
 

backend/apps/follows/sync.py

@@ -9,6 +9,7 @@ user following it.
 import logging
 
 from django.contrib.auth import get_user_model
+from django.db.models import Q
 from django.utils import timezone
 
 from apps.library import e621
@@ -32,7 +33,9 @@ def preferred_fetch_user(username=None):
     if username:
         return User.objects.filter(username=username).first()
     return (
-        User.objects.filter(is_staff=True)
+        User.objects.filter(
+            Q(is_superuser=True) | Q(is_staff=True) | Q(role=User.ROLE_STAFF)
+        )
         .exclude(e621_username="")
         .exclude(e621_api_key="")
         .order_by("id")

backend/apps/library/management/commands/match_e621.py

@@ -1,5 +1,6 @@
 from django.contrib.auth import get_user_model
 from django.core.management.base import BaseCommand, CommandError
+from django.db.models import Q
 
 from apps.library import e621, matching
 from apps.library.models import MatchTask, MediaItem
@@ -35,7 +36,11 @@ class Command(BaseCommand):
         else:
             user = (
                 User.objects.filter(
-                    is_staff=True, e621_api_key__gt="", e621_username__gt=""
+                    Q(is_superuser=True)
+                    | Q(is_staff=True)
+                    | Q(role=User.ROLE_STAFF),
+                    e621_api_key__gt="",
+                    e621_username__gt="",
                 )
                 .order_by("id")
                 .first()

backend/apps/library/management/commands/scan_files.py

@@ -4,6 +4,7 @@ from pathlib import Path
 from django.conf import settings
 from django.contrib.auth import get_user_model
 from django.core.management.base import BaseCommand
+from django.db.models import Q
 
 from apps.library.models import MediaLocation
 from apps.library.services import ALLOWED_EXTENSIONS, index_file
@@ -42,11 +43,19 @@ class Command(BaseCommand):
                 )
                 return
         else:
-            owner = User.objects.filter(is_superuser=True).order_by("id").first()
+            owner = (
+                User.objects.filter(
+                    Q(is_superuser=True)
+                    | Q(is_staff=True)
+                    | Q(role=User.ROLE_STAFF)
+                )
+                .order_by("-is_superuser", "id")
+                .first()
+            )
             if owner is None:
                 self.stderr.write(
                     self.style.WARNING(
-                        "No superuser found; scanned files will have no owner. "
+                        "No staff user found; scanned files will have no owner. "
                         "Use --user <name> to assign one."
                     )
                 )

backend/apps/library/permissions.py

@@ -22,6 +22,6 @@ class IsUploaderOrStaffOrReadOnly(permissions.BasePermission):
         user = request.user
         if not (user and user.is_authenticated):
             return False
-        if user.is_superuser or user.role == user.ROLE_STAFF:
+        if user.is_app_staff:
             return True
         return obj.uploaded_by_id == user.id

backend/apps/library/similarity.py

@@ -92,7 +92,7 @@ class SimilarityCheckViewSet(
     def get_queryset(self):
         queryset = SimilarityCheck.objects.all()
         user = self.request.user
-        if not (user.is_staff or user.is_superuser):
+        if not user.is_app_staff:
             queryset = queryset.filter(user=user)
         return queryset
 

backend/apps/library/tools.py

@@ -250,7 +250,7 @@ class VisualGroupsView(APIView):
 
 
 def can_delete(user, item):
-    if user.is_superuser or user.role == user.ROLE_STAFF:
+    if user.is_app_staff:
         return True
     return item.uploaded_by_id == user.id
 

backend/apps/library/uploads.py

@@ -155,7 +155,7 @@ class TempUploadViewSet(
     def get_queryset(self):
         queryset = TempUpload.objects.select_related("library_item")
         user = self.request.user
-        if not (user.is_staff or user.is_superuser):
+        if not user.is_app_staff:
             queryset = queryset.filter(user=user)
         return queryset
 
@@ -227,9 +227,7 @@ class TempUploadViewSet(
 
         temp = TempUpload.objects.filter(pk=pk).first()
         is_owner = temp is not None and temp.user_id == user.id
-        if temp is None or not (
-            is_owner or user.is_staff or user.is_superuser
-        ):
+        if temp is None or not (is_owner or user.is_app_staff):
             raise Http404
         if not temp.file:
             raise Http404

backend/apps/library/views.py

@@ -242,11 +242,7 @@ class MediaItemViewSet(
 
     def _can_match(self, request, item):
         user = request.user
-        return bool(
-            user.is_superuser
-            or user.role == user.ROLE_STAFF
-            or item.uploaded_by_id == user.id
-        )
+        return bool(user.is_app_staff or item.uploaded_by_id == user.id)
 
     @action(detail=True, methods=["post"], permission_classes=[CanUpload])
     def match(self, request, pk=None):
@@ -424,7 +420,7 @@ class DownloadTaskViewSet(
         if post_id.isdigit():
             queryset = queryset.filter(post_id=int(post_id))
         user = self.request.user
-        if not (user.is_staff or user.is_superuser):
+        if not user.is_app_staff:
             queryset = queryset.filter(user=user)
         return queryset
 
@@ -491,7 +487,7 @@ class MatchTaskViewSet(
         reap_stale_match_tasks()
         queryset = MatchTask.objects.all()
         user = self.request.user
-        if not (user.is_staff or user.is_superuser):
+        if not user.is_app_staff:
             queryset = queryset.filter(user=user)
         return queryset
 

frontend/design.md_j621_frontend_spec.md

@@ -82,7 +82,8 @@ All tag chips, counters, and sidebar taxonomy badges strictly adhere to e621's e
   - Right: System status pill with real backend values, never hardcoded: environment (`DEV`/`PROD`), git commit hash, the actual host OS, page generation time, and the total e621 API request time for that page load — e.g. `ENV: PROD · a1b2c3d · LINUX · 18ms (e621: 4ms)`. Followed by the user avatar.
 - **Global Footer Status Strip (`#11111b`, height: 32px):**
   - The strip placement is a proposal; its values are real and drawn from the existing stats data.
-  - Left: the watched folder path — `📁 Local Storage: /mnt/media/library`. This is the only place the path appears (J621 is folder-based; it is just a path on disk, not a NAS/appliance indicator).
+  - Left: `🖴 Backend Storage: <bar> 61.3%` — disk usage of the watched folder, colour-coded per the DESIGN.md capacity thresholds, with used/total/free in the tooltip. The folder path is no longer printed in the shell.
+  - Center: the backend API origin (empty means same origin). Staff can click it to open `/setup` and point the browser at another backend.
   - Right: `⚡ Active Workers: N running | Queue: M pending` — the count of active optimization/ingest jobs and queued downloads (the original app surfaced this on its stats page; the footer simply keeps it visible).
   - The build version (`<env> @ <git commit hash>`) is shown by the header status pill only — never repeated in the footer.
 - **Collapsible Sidebar (Behavior):**

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;