Add follow toggles to tag chips on detail views

TagChip gains a followable mode that renders a small toggle inside the
chip: '+' follows the tag, '✓' (click to unfollow) once followed, and a
red marker with the reason as its title when e621 rejects it. Enabled on
the library detail's e621 metadata card (matched posts) and on online
post detail tags; guests see plain chips and the label click keeps
working beside the toggle.

frontend/src/features/follows/TagFollowToggle.tsx

@@ -0,0 +1,73 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, Plus } from "lucide-react";
+import { useState, type MouseEvent } from "react";
+
+import { api, errorMessage } from "@/lib/api";
+import { cn } from "@/lib/cn";
+import type { FollowedTag, Paginated } from "@/lib/types";
+import { useAuth } from "@/store/auth";
+
+export function TagFollowToggle({ tag }: { tag: string }) {
+  const user = useAuth((state) => state.user);
+  const queryClient = useQueryClient();
+  const [error, setError] = useState<string | null>(null);
+
+  const query = useQuery({
+    queryKey: ["follows-tags"],
+    queryFn: () => api<Paginated<FollowedTag>>("/api/follows/tags/"),
+    enabled: Boolean(user),
+    staleTime: 30_000,
+  });
+
+  const normalized = tag.trim().toLowerCase();
+  const follow = query.data?.results.find((entry) => entry.tag === normalized);
+  const followed = Boolean(follow);
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      follow
+        ? api(`/api/follows/tags/${follow.id}/`, { method: "DELETE" })
+        : api<FollowedTag>("/api/follows/tags/", {
+            method: "POST",
+            json: { tag: normalized },
+          }),
+    onSuccess: () => {
+      setError(null);
+      void queryClient.invalidateQueries({ queryKey: ["follows-tags"] });
+      void queryClient.invalidateQueries({ queryKey: ["follows-feed"] });
+      void queryClient.invalidateQueries({ queryKey: ["follows-cloud"] });
+    },
+    onError: (err) => setError(errorMessage(err)),
+  });
+
+  if (!user) return null;
+
+  function handleClick(event: MouseEvent<HTMLButtonElement>) {
+    // Chips often sit inside clickable labels/links; the toggle is its own
+    // action and must not trigger them.
+    event.preventDefault();
+    event.stopPropagation();
+    mutation.mutate();
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={mutation.isPending || query.isPending}
+      title={error ?? (followed ? `Unfollow ${tag}` : `Follow ${tag}`)}
+      aria-label={followed ? `Unfollow ${tag}` : `Follow ${tag}`}
+      className={cn(
+        "-mr-0.5 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm transition",
+        error ? "text-ctp-red" : "opacity-70 hover:opacity-100",
+        mutation.isPending && "opacity-40",
+      )}
+    >
+      {followed ? (
+        <Check className="h-3 w-3" strokeWidth={3} />
+      ) : (
+        <Plus className="h-3 w-3" strokeWidth={3} />
+      )}
+    </button>
+  );
+}

frontend/src/features/library/LibraryDetail.tsx

@@ -307,7 +307,7 @@ function E621MetadataCard({ item }: { item: MediaItem }) {
             </p>
             <div className="flex flex-wrap gap-1.5">
               {tags.map((tag) => (
-                <TagChip key={tag} tag={tag} category={category} />
+                <TagChip key={tag} tag={tag} category={category} followable />
               ))}
             </div>
           </div>

frontend/src/features/online/OnlineDetail.tsx

@@ -403,6 +403,7 @@ export function OnlineDetail({ postId }: { postId: number }) {
                           key={tag}
                           tag={tag}
                           category={category}
+                          followable
                           onClick={() =>
                             navigate(`/online?tags=${encodeURIComponent(tag)}`)
                           }