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.
This commit is contained in:
2026-09-17 14:12:46 -05:00
parent 03dd235f3a
commit 4585a8ac43
4 changed files with 93 additions and 1 deletions
+18
View File
@@ -1,4 +1,5 @@
import { cn } from "@/lib/cn";
import { TagFollowToggle } from "@/features/follows/TagFollowToggle";
const TAG_STYLES: Record<string, string> = {
general:
@@ -26,11 +27,13 @@ export function TagChip({
category,
count,
onClick,
followable = false,
}: {
tag: string;
category?: string;
count?: number;
onClick?: () => void;
followable?: boolean;
}) {
const style = TAG_STYLES[category ?? "unknown"] ?? TAG_STYLES.unknown;
const className = cn(
@@ -39,6 +42,21 @@ export function TagChip({
);
const label = count !== undefined ? `${tag} (${count})` : tag;
if (followable) {
return (
<span className={cn(className, "inline-flex items-center gap-1")}>
{onClick ? (
<button type="button" onClick={onClick} className="text-left">
{label}
</button>
) : (
<span>{label}</span>
)}
<TagFollowToggle tag={tag} />
</span>
);
}
if (!onClick) {
return <span className={className}>{label}</span>;
}