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

@@ -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

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,28 +148,43 @@ 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">
+        <span className="flex items-center gap-1.5 font-mono text-[11px] text-ctp-overlay0">
+          {cloud ? `${cloud.blacklist_count} entries` : "…"}
+          {cloud?.status === "building" ? (
+            <Spinner className="h-3 w-3" />
+          ) : null}
+          {expanded ? (
+            <ChevronDown className="h-3.5 w-3.5" />
+          ) : (
+            <ChevronRight className="h-3.5 w-3.5" />
+          )}
+        </span>
+      </button>
+
+      {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.blacklist_count} entries` : ""}
             {cloud ? ` · ${cloud.posts} feed post(s) scanned` : ""}
-          {cloud?.computed_at ? ` · computed ${formatDate(cloud.computed_at)}` : ""}
+            {cloud?.computed_at
-          {cloud?.status === "building" ? (
+              ? ` · computed ${formatDate(cloud.computed_at)}`
-            <span className="ml-2 inline-flex items-center gap-1.5">
+              : ""}
-              <Spinner className="h-3 w-3" /> building…
-            </span>
-          ) : null}
           </p>
-      </div>
-
           {query.isPending ? (
             <div className="mt-3 flex justify-center py-4">
               <Spinner className="h-4 w-4" />
@@ -190,6 +205,8 @@ function BlacklistCloudPanel() {
               No blacklisted tags in your feeds.
             </p>
           )}
+        </>
+      ) : null}
     </section>
   );
 }

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,10 +272,27 @@ export default function OnlinePage() {
         </div>
 
         <div className="flex flex-col gap-2">
+          <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>
-          {credentials?.configured ? (
+            <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" />
+              ) : (
+                <ChevronRight className="h-3.5 w-3.5" />
+              )}
+            </span>
+          </button>
+          {showBlacklist ? (
+            credentials?.configured ? (
               <>
                 {blacklistEntries.length > 0 ? (
                   <div className="flex flex-wrap gap-1.5">
@@ -337,7 +355,8 @@ export default function OnlinePage() {
                 </Link>{" "}
                 to manage your blacklist.
               </p>
-          )}
+            )
+          ) : null}
         </div>
 
         <div className="flex flex-col gap-2">