From 5f237aa2e3c103802a9247d09014224f46f86440 Mon Sep 17 00:00:00 2001
From: JakeBreath <tolozacdcmo@gmail.com>
Date: Wed, 23 Sep 2026 21:57:48 -0500
Subject: [PATCH] Widen the header and collapse blacklist listings by default

- the header row is no longer capped at 1600px, so the nav hugs the left
  edge and the status/account controls the right; main content and footer
  keep their width
- OnlinePage's blacklist chips and the Followed page's blacklisted-tag
  cloud start collapsed behind a count toggle (N tags / N entries)
---
 frontend/src/components/AppShell.tsx          |   2 +-
 .../src/features/follows/FollowedPage.tsx     |  85 ++++++----
 frontend/src/features/online/OnlinePage.tsx   | 147 ++++++++++--------
 3 files changed, 135 insertions(+), 99 deletions(-)

diff --git a/frontend/src/components/AppShell.tsx b/frontend/src/components/AppShell.tsx
index 830457f..28dad17 100644
--- a/frontend/src/components/AppShell.tsx
+++ b/frontend/src/components/AppShell.tsx
@@ -113,7 +113,7 @@ export function AppShell() {
   return (
     <div className="flex min-h-screen flex-col">
       <header className="sticky top-0 z-40 border-b border-ctp-surface0 bg-ctp-crust/95 backdrop-blur">
-        <div className="mx-auto flex h-14 w-full max-w-[1600px] items-center gap-4 px-4">
+        <div className="flex h-14 w-full items-center gap-4 px-3 sm:px-4">
           <Link to="/" className="flex shrink-0 items-center">
             <span className="rounded bg-ctp-mauve px-2 py-1 font-mono text-xs font-bold tracking-wide text-ctp-crust">
               J621
diff --git a/frontend/src/features/follows/FollowedPage.tsx b/frontend/src/features/follows/FollowedPage.tsx
index a793658..4e05e99 100644
--- a/frontend/src/features/follows/FollowedPage.tsx
+++ b/frontend/src/features/follows/FollowedPage.tsx
@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Eye, StarOff } from "lucide-react";
+import { ChevronDown, ChevronRight, Eye, StarOff } from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 
@@ -148,48 +148,65 @@ function BlacklistCloudPanel() {
       q.state.data?.status === "building" ? 2000 : false,
   });
   const cloud = query.data;
+  const [expanded, setExpanded] = useState(false);
 
   return (
     <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">
-      <div className="flex flex-wrap items-center justify-between gap-2">
+      <button
+        type="button"
+        onClick={() => setExpanded((value) => !value)}
+        title={expanded ? "Hide the tags" : "Show the tags"}
+        className="flex w-full items-center justify-between gap-2 text-left"
+      >
         <h2 className="text-sm font-semibold text-ctp-subtext1">
           Blacklisted tags
         </h2>
-        <p className="text-xs text-ctp-overlay0">
-          {cloud?.source === "user"
-            ? "From your e621 blacklist"
-            : "From e621's anonymous default blacklist"}
-          {cloud ? ` · ${cloud.blacklist_count} entries` : ""}
-          {cloud ? ` · ${cloud.posts} feed post(s) scanned` : ""}
-          {cloud?.computed_at ? ` · computed ${formatDate(cloud.computed_at)}` : ""}
+        <span className="flex items-center gap-1.5 font-mono text-[11px] text-ctp-overlay0">
+          {cloud ? `${cloud.blacklist_count} entries` : "…"}
           {cloud?.status === "building" ? (
-            <span className="ml-2 inline-flex items-center gap-1.5">
-              <Spinner className="h-3 w-3" /> building…
-            </span>
+            <Spinner className="h-3 w-3" />
           ) : null}
-        </p>
-      </div>
+          {expanded ? (
+            <ChevronDown className="h-3.5 w-3.5" />
+          ) : (
+            <ChevronRight className="h-3.5 w-3.5" />
+          )}
+        </span>
+      </button>
 
-      {query.isPending ? (
-        <div className="mt-3 flex justify-center py-4">
-          <Spinner className="h-4 w-4" />
-        </div>
-      ) : cloud && cloud.tags.length > 0 ? (
-        <div className="mt-3 flex flex-wrap gap-1.5">
-          {cloud.tags.map(([tag, count]) => (
-            <span
-              key={tag}
-              className="rounded border border-ctp-red/30 bg-ctp-red/10 px-1.5 py-0.5 font-mono text-[11px] text-ctp-red"
-            >
-              {tag} ({count})
-            </span>
-          ))}
-        </div>
-      ) : (
-        <p className="mt-3 text-xs text-ctp-overlay0">
-          No blacklisted tags in your feeds.
-        </p>
-      )}
+      {expanded ? (
+        <>
+          <p className="mt-2 text-xs text-ctp-overlay0">
+            {cloud?.source === "user"
+              ? "From your e621 blacklist"
+              : "From e621's anonymous default blacklist"}
+            {cloud ? ` · ${cloud.posts} feed post(s) scanned` : ""}
+            {cloud?.computed_at
+              ? ` · computed ${formatDate(cloud.computed_at)}`
+              : ""}
+          </p>
+          {query.isPending ? (
+            <div className="mt-3 flex justify-center py-4">
+              <Spinner className="h-4 w-4" />
+            </div>
+          ) : cloud && cloud.tags.length > 0 ? (
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              {cloud.tags.map(([tag, count]) => (
+                <span
+                  key={tag}
+                  className="rounded border border-ctp-red/30 bg-ctp-red/10 px-1.5 py-0.5 font-mono text-[11px] text-ctp-red"
+                >
+                  {tag} ({count})
+                </span>
+              ))}
+            </div>
+          ) : (
+            <p className="mt-3 text-xs text-ctp-overlay0">
+              No blacklisted tags in your feeds.
+            </p>
+          )}
+        </>
+      ) : null}
     </section>
   );
 }
diff --git a/frontend/src/features/online/OnlinePage.tsx b/frontend/src/features/online/OnlinePage.tsx
index f4f84a0..28efb95 100644
--- a/frontend/src/features/online/OnlinePage.tsx
+++ b/frontend/src/features/online/OnlinePage.tsx
@@ -1,5 +1,5 @@
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { X } from "lucide-react";
+import { ChevronDown, ChevronRight, X } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation, useSearchParams } from "react-router-dom";
 
@@ -43,6 +43,7 @@ export default function OnlinePage() {
   const queryClient = useQueryClient();
   const [draft, setDraft] = useState<string | null>(null);
   const [blacklistDraft, setBlacklistDraft] = useState("");
+  const [showBlacklist, setShowBlacklist] = useState(false);
   const tagInput = draft ?? tags;
   const zoom = useUi((state) => state.zoom);
   const perPage = useUi((state) => state.e621PerPage);
@@ -271,73 +272,91 @@ export default function OnlinePage() {
         </div>
 
         <div className="flex flex-col gap-2">
-          <span className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
-            Your blacklist
-          </span>
-          {credentials?.configured ? (
-            <>
-              {blacklistEntries.length > 0 ? (
-                <div className="flex flex-wrap gap-1.5">
-                  {blacklistEntries.map(({ line, index }) => (
-                    <span
-                      key={`${line}-${index}`}
-                      className="inline-flex items-center gap-1 rounded border border-ctp-red/30 bg-ctp-red/10 px-1.5 py-0.5 font-mono text-[11px] text-ctp-red"
-                    >
-                      {line}
-                      <button
-                        type="button"
-                        title={`Remove ${line}`}
-                        disabled={blacklistMutation.isPending}
-                        onClick={() => removeBlacklistEntry(index)}
-                        className="text-ctp-red/70 transition hover:text-ctp-red disabled:opacity-40"
-                      >
-                        <X className="h-3 w-3" />
-                      </button>
-                    </span>
-                  ))}
-                </div>
+          <button
+            type="button"
+            onClick={() => setShowBlacklist((value) => !value)}
+            title={showBlacklist ? "Hide the blacklist" : "Show the blacklist"}
+            className="flex items-center justify-between gap-2 text-left"
+          >
+            <span className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
+              Your blacklist
+            </span>
+            <span className="flex items-center gap-1 font-mono text-[11px] text-ctp-overlay0">
+              {blacklistEntries.length} tag
+              {blacklistEntries.length === 1 ? "" : "s"}
+              {showBlacklist ? (
+                <ChevronDown className="h-3.5 w-3.5" />
               ) : (
-                <p className="text-xs text-ctp-overlay0">
-                  No blacklisted tags.
-                </p>
+                <ChevronRight className="h-3.5 w-3.5" />
               )}
-              <form
-                onSubmit={(event) => {
-                  event.preventDefault();
-                  addBlacklistEntry();
-                }}
-                className="flex gap-2"
-              >
-                <input
-                  className={cn(inputClass, "font-mono")}
-                  placeholder="Add a tag…"
-                  value={blacklistDraft}
-                  onChange={(event) => setBlacklistDraft(event.target.value)}
-                />
-                <Button
-                  type="submit"
-                  variant="secondary"
-                  disabled={!blacklistDraft.trim() || blacklistMutation.isPending}
+            </span>
+          </button>
+          {showBlacklist ? (
+            credentials?.configured ? (
+              <>
+                {blacklistEntries.length > 0 ? (
+                  <div className="flex flex-wrap gap-1.5">
+                    {blacklistEntries.map(({ line, index }) => (
+                      <span
+                        key={`${line}-${index}`}
+                        className="inline-flex items-center gap-1 rounded border border-ctp-red/30 bg-ctp-red/10 px-1.5 py-0.5 font-mono text-[11px] text-ctp-red"
+                      >
+                        {line}
+                        <button
+                          type="button"
+                          title={`Remove ${line}`}
+                          disabled={blacklistMutation.isPending}
+                          onClick={() => removeBlacklistEntry(index)}
+                          className="text-ctp-red/70 transition hover:text-ctp-red disabled:opacity-40"
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-xs text-ctp-overlay0">
+                    No blacklisted tags.
+                  </p>
+                )}
+                <form
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    addBlacklistEntry();
+                  }}
+                  className="flex gap-2"
                 >
-                  {blacklistMutation.isPending ? (
-                    <Spinner className="h-3.5 w-3.5" />
-                  ) : (
-                    "Add"
-                  )}
-                </Button>
-              </form>
-              <p className="text-[11px] text-ctp-overlay0">
-                Saved to your e621 account.
+                  <input
+                    className={cn(inputClass, "font-mono")}
+                    placeholder="Add a tag…"
+                    value={blacklistDraft}
+                    onChange={(event) => setBlacklistDraft(event.target.value)}
+                  />
+                  <Button
+                    type="submit"
+                    variant="secondary"
+                    disabled={!blacklistDraft.trim() || blacklistMutation.isPending}
+                  >
+                    {blacklistMutation.isPending ? (
+                      <Spinner className="h-3.5 w-3.5" />
+                    ) : (
+                      "Add"
+                    )}
+                  </Button>
+                </form>
+                <p className="text-[11px] text-ctp-overlay0">
+                  Saved to your e621 account.
+                </p>
+              </>
+            ) : (
+              <p className="text-xs text-ctp-overlay0">
+                <Link to="/account" className="text-ctp-blue hover:underline">
+                  Add e621 credentials
+                </Link>{" "}
+                to manage your blacklist.
               </p>
-            </>
-          ) : (
-            <p className="text-xs text-ctp-overlay0">
-              <Link to="/account" className="text-ctp-blue hover:underline">
-                Add e621 credentials
-              </Link>{" "}
-              to manage your blacklist.
-            </p>
-          )}
+            )
+          ) : null}
         </div>
 
         <div className="flex flex-col gap-2">