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:
@@ -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>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user