Run the SPA without a backend (local mode)

The app can now operate backend-agnostically: a production build still asks on first start, but /setup also offers 'Continue without a backend' (stored as the sentinel 'none'), and the shell adapts: - Local mode shows only the e621-facing pages: Online (search, post view, favorites, blacklist editor, direct downloads) and Pools. Library, uploads, duplicates, stats, users, follows and similarity are hidden from the nav and palette and render a 'backend needed' state when reached directly; /detail/<e621 id> still works while /detail/J-x asks for a backend. - e621 credentials are stored in this browser (j621.e621) and the Account page becomes a credentials-only screen; the store reads/writes locally instead of /api/auth/e621/. - The header replaces the status pill and login/user area with an e621 credentials button and a 'Setup Backend' button; the footer shows 'Local mode — e621 features only' with the same entry point. - In-library lookups (badges/browse markers) are skipped without a backend; 'Download to client' links straight to the e621 file instead of the backend proxy; follow buttons and palette follow toggles are hidden; api() fails fast with a clear message if something slips through. Mode logic lives in lib/backend.ts (URL / '' same-origin / 'none') with its matrix verified in Node; tsc, oxlint and the build are clean.
2026-09-18 00:00:48 -05:00
parent 3bd5bc73dd
commit a904abdf20
19 changed files with 412 additions and 155 deletions
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { LogOut, Menu } from "lucide-react";
+import { Cable, KeyRound, LogOut, Menu } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import {
  Link,
@@ -16,6 +16,7 @@ import { StatusFooter } from "@/components/StatusFooter";
 import { StatusPill } from "@/components/StatusPill";
 import { Toasts } from "@/components/Toasts";
 import { api } from "@/lib/api";
+import { hasBackend } from "@/lib/backend";
 import { cn } from "@/lib/cn";
 import type { SystemStatus } from "@/lib/types";
 import { useAuth } from "@/store/auth";
@@ -31,6 +32,7 @@ export function AppShell() {
  const navigate = useNavigate();
  const [paletteOpen, setPaletteOpen] = useState(false);
  const landingApplied = useRef(false);
+  const backend = hasBackend();

  useEffect(() => {
    void loadE621();
@@ -50,6 +52,7 @@ export function AppShell() {
    queryFn: () => api<SystemStatus>("/api/status/"),
    refetchInterval: 5_000,
    staleTime: 4_000,
+    enabled: backend,
  });
  const status = statusQuery.data;

@@ -78,19 +81,19 @@ export function AppShell() {
    location.pathname === "/" || location.pathname === "/online";

  const navItems = [
-    { to: "/", label: "Library" },
+    ...(backend ? [{ to: "/", label: "Library" }] : []),
    { to: "/online", label: "Online" },
    { to: "/pools", label: "Pools" },
-    ...(user ? [{ to: "/followed", label: "Followed" }] : []),
-    ...(user ? [{ to: "/similar", label: "Similar" }] : []),
-    ...(user?.can_upload
+    ...(backend && user ? [{ to: "/followed", label: "Followed" }] : []),
+    ...(backend && user ? [{ to: "/similar", label: "Similar" }] : []),
+    ...(backend && user?.can_upload
      ? [
          { to: "/upload", label: "Upload" },
          { to: "/duplicates", label: "Duplicates" },
          { to: "/delete", label: "Delete" },
        ]
      : []),
-    ...(user && (user.is_staff || user.is_superuser || user.role === "staff")
+    ...(backend && user && (user.is_staff || user.is_superuser || user.role === "staff")
      ? [
          { to: "/stats", label: "Stats" },
          { to: "/users", label: "Users" },
@@ -147,45 +150,66 @@ export function AppShell() {
          </nav>

          <div className="ml-auto flex items-center gap-3">
-            <StatusPill status={status} />
-            {user ? (
+            {backend ? (
+              <>
+                <StatusPill status={status} />
+                {user ? (
+                  <>
+                    <Link
+                      to="/account"
+                      title="Account settings"
+                      className="flex items-center gap-2 transition hover:opacity-80"
+                    >
+                      {user.avatar_url ? (
+                        <img
+                          src={user.avatar_url}
+                          alt={user.username}
+                          className="h-7 w-7 rounded-full border border-ctp-surface1 object-cover"
+                        />
+                      ) : (
+                        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-ctp-surface1 font-mono text-xs font-semibold text-ctp-lavender">
+                          {user.username.slice(0, 1).toUpperCase()}
+                        </span>
+                      )}
+                      <span className="hidden text-sm text-ctp-subtext1 sm:block">
+                        {user.username}
+                      </span>
+                    </Link>
+                    <button
+                      type="button"
+                      onClick={() => void logout()}
+                      title="Log out"
+                      className="rounded-md p-1.5 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
+                    >
+                      <LogOut className="h-4 w-4" />
+                    </button>
+                  </>
+                ) : (
+                  <Link
+                    to="/login"
+                    className="rounded-md px-3 py-1.5 text-sm font-medium text-ctp-subtext0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
+                  >
+                    Log in
+                  </Link>
+                )}
+              </>
+            ) : (
              <>
                <Link
                  to="/account"
-                  title="Account settings"
-                  className="flex items-center gap-2 transition hover:opacity-80"
-                >
-                  {user.avatar_url ? (
-                    <img
-                      src={user.avatar_url}
-                      alt={user.username}
-                      className="h-7 w-7 rounded-full border border-ctp-surface1 object-cover"
-                    />
-                  ) : (
-                    <span className="flex h-7 w-7 items-center justify-center rounded-full bg-ctp-surface1 font-mono text-xs font-semibold text-ctp-lavender">
-                      {user.username.slice(0, 1).toUpperCase()}
-                    </span>
-                  )}
-                  <span className="hidden text-sm text-ctp-subtext1 sm:block">
-                    {user.username}
-                  </span>
-                </Link>
-                <button
-                  type="button"
-                  onClick={() => void logout()}
-                  title="Log out"
+                  title="e621 credentials (stored in this browser)"
                  className="rounded-md p-1.5 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
                >
-                  <LogOut className="h-4 w-4" />
-                </button>
+                  <KeyRound className="h-4 w-4" />
+                </Link>
+                <Link
+                  to="/setup"
+                  className="inline-flex items-center gap-1.5 rounded-md border border-ctp-surface1 bg-ctp-surface0 px-3 py-1.5 text-sm font-medium text-ctp-text transition hover:bg-ctp-surface1"
+                >
+                  <Cable className="h-3.5 w-3.5" />
+                  Setup Backend
+                </Link>
              </>
-            ) : (
-              <Link
-                to="/login"
-                className="rounded-md px-3 py-1.5 text-sm font-medium text-ctp-subtext0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
-              >
-                Log in
-              </Link>
            )}
          </div>
        </div>
@@ -196,9 +220,12 @@ export function AppShell() {
      </main>

      <StatusFooter
+        backend={backend}
        status={status}
        staff={Boolean(
-          user && (user.is_staff || user.is_superuser || user.role === "staff"),
+          backend &&
+            user &&
+            (user.is_staff || user.is_superuser || user.role === "staff"),
        )}
      />
      <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+
+import { EmptyState } from "@/components/ui";
+
+/** Shown where a page needs the J621 API but the app runs without one. */
+export function BackendNeeded() {
+  return (
+    <EmptyState
+      title="A backend is needed here"
+      description={
+        <>
+          This part of the app stores its data on a J621 backend.{" "}
+          <Link to="/setup" className="text-ctp-blue hover:underline">
+            Connect one
+          </Link>{" "}
+          or keep browsing e621 in local mode.
+        </>
+      }
+    />
+  );
+}
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import {
+  Cable,
  Copy,
  ExternalLink,
  FolderOpen,
@@ -25,6 +26,7 @@ import { useNavigate } from "react-router-dom";
 import { TagChip } from "@/components/TagChip";
 import { Spinner } from "@/components/ui";
 import { TagFollowToggle } from "@/features/follows/TagFollowToggle";
+import { hasBackend } from "@/lib/backend";
 import { cn } from "@/lib/cn";
 import {
  effectiveCredentials,
@@ -112,13 +114,18 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
  });

  const commands = useMemo<Command[]>(() => {
+    const backend = hasBackend();
    const list: Command[] = [
-      {
-        id: "library",
-        label: "Go to Library",
-        icon: FolderOpen,
-        run: () => navigate("/"),
-      },
+      ...(backend
+        ? [
+            {
+              id: "library",
+              label: "Go to Library",
+              icon: FolderOpen,
+              run: () => navigate("/"),
+            },
+          ]
+        : []),
      {
        id: "online",
        label: "Go to Online browser",
@@ -131,7 +138,7 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
        icon: Layers,
        run: () => navigate("/pools"),
      },
-      ...(user
+      ...(backend && user
        ? [
            {
              id: "followed",
@@ -147,7 +154,7 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
            },
          ]
        : []),
-      ...(user?.can_upload
+      ...(backend && user?.can_upload
        ? [
            {
              id: "upload",
@@ -176,20 +183,30 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
        icon: Menu,
        run: toggleSidebar,
      },
+      ...(backend
+        ? [
+            {
+              id: "search",
+              label: "Focus library search",
+              hint: "/",
+              icon: Search,
+              run: () => {
+                navigate("/");
+                window.requestAnimationFrame(() => {
+                  document.getElementById("library-search")?.focus();
+                });
+              },
+            },
+          ]
+        : []),
      {
-        id: "search",
-        label: "Focus library search",
-        hint: "/",
-        icon: Search,
-        run: () => {
-          navigate("/");
-          window.requestAnimationFrame(() => {
-            document.getElementById("library-search")?.focus();
-          });
-        },
+        id: "setup",
+        label: backend ? "Change backend" : "Set up a backend",
+        icon: Cable,
+        run: () => navigate("/setup"),
      },
    ];
-    if (user) {
+    if (backend && user) {
      list.push({
        id: "account",
        label: "Account settings",
@@ -210,13 +227,20 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
        icon: LogOut,
        run: () => void logout(),
      });
-    } else {
+    } else if (backend) {
      list.push({
        id: "login",
        label: "Log in",
        icon: LogIn,
        run: () => navigate("/login"),
      });
+    } else {
+      list.push({
+        id: "credentials",
+        label: "e621 credentials",
+        icon: Settings,
+        run: () => navigate("/account"),
+      });
    }
    return list;
  }, [navigate, toggleSidebar, user, logout]);
@@ -326,7 +350,7 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
        <span className="ml-auto font-mono text-[11px] text-ctp-overlay0">
          {row.tag.post_count.toLocaleString()} posts
        </span>
-        <TagFollowToggle tag={row.tag.name} />
+        {hasBackend() ? <TagFollowToggle tag={row.tag.name} /> : null}
        <a
          href={`https://e621.net/posts?tags=${encodeURIComponent(row.tag.name)}`}
          target="_blank"
@@ -1,4 +1,4 @@
-import { HardDrive, Zap } from "lucide-react";
+import { HardDrive, Unplug, Zap } from "lucide-react";
 import { Link } from "react-router-dom";

 import { cn } from "@/lib/cn";
@@ -14,13 +14,15 @@ function storageColor(percent: number): string {
 }

 export function StatusFooter({
+  backend,
  status,
  staff,
 }: {
+  backend: boolean;
  status?: SystemStatus;
  staff?: boolean;
 }) {
-  const backend = getBackendUrl() || window.location.origin;
+  const backendOrigin = getBackendUrl() || window.location.origin;
  const storage = status?.storage;

  const workers = (
@@ -35,6 +37,26 @@ export function StatusFooter({
    </>
  );

+  if (!backend) {
+    return (
+      <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 shrink-0 items-center gap-1.5">
+            <Unplug className="h-3 w-3 shrink-0" />
+            Local mode — e621 features only
+          </span>
+          <Link
+            to="/setup"
+            className="mx-auto transition hover:text-ctp-text"
+            title="Connect a backend to unlock the library, uploads and account features"
+          >
+            Setup Backend
+          </Link>
+        </div>
+      </footer>
+    );
+  }
+
  return (
    <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">
@@ -66,7 +88,7 @@ export function StatusFooter({

        <span
          className="mx-auto hidden min-w-0 items-center gap-1.5 md:flex"
-          title={`Backend API: ${backend}`}
+          title={`Backend API: ${backendOrigin}`}
        >
          {staff ? (
            <Link
@@ -74,10 +96,10 @@ export function StatusFooter({
              className="truncate transition hover:text-ctp-text"
              title="Change backend"
            >
-              {backend}
+              {backendOrigin}
            </Link>
          ) : (
-            <span className="truncate">{backend}</span>
+            <span className="truncate">{backendOrigin}</span>
          )}
        </span>

@@ -1,4 +1,5 @@
 import { cn } from "@/lib/cn";
+import { hasBackend } from "@/lib/backend";
 import { TagFollowToggle } from "@/features/follows/TagFollowToggle";

 const TAG_STYLES: Record<string, string> = {
@@ -52,7 +53,7 @@ export function TagChip({
        ) : (
          <span>{label}</span>
        )}
-        <TagFollowToggle tag={tag} />
+        {hasBackend() ? <TagFollowToggle tag={tag} /> : null}
      </span>
    );
  }