fix: remove tag badges next to filter button to save space

Show only the count inside the filter button instead of rendering
individual tag badges alongside it.
This commit is contained in:
Andrey Onishchenko
2026-02-13 19:16:22 +03:00
parent affd17d788
commit 1cb1b5083f

View File

@@ -1,4 +1,4 @@
import { Filter, X } from "lucide-react";
import { Filter } from "lucide-react";
import * as React from "react";
import { HandleTag } from "@/components/dashboard/settings/tags/tag-manager";
import { Badge } from "@/components/ui/badge";
@@ -53,10 +53,6 @@ export function TagFilter({
onTagsChange([]);
};
const selectedTagObjects = tags.filter((tag) =>
selectedTags.includes(tag.id),
);
return (
<div className={cn("flex items-center gap-2", className)}>
<Popover open={open} onOpenChange={setOpen}>
@@ -134,35 +130,6 @@ export function TagFilter({
</Command>
</PopoverContent>
</Popover>
{selectedTagObjects.length > 0 && (
<div className="flex flex-wrap gap-1 items-center">
{selectedTagObjects.map((tag) => (
<Badge
key={tag.id}
variant="blank"
style={{
backgroundColor: tag.color ? `${tag.color}33` : undefined,
color: tag.color || undefined,
borderColor: tag.color ? `${tag.color}66` : undefined,
}}
className="flex items-center gap-1 pr-1 border"
>
<span>{tag.name}</span>
<button
type="button"
onClick={() =>
onTagsChange(selectedTags.filter((id) => id !== tag.id))
}
className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
>
<X className="h-3 w-3 hover:opacity-70" />
<span className="sr-only">Remove {tag.name} filter</span>
</button>
</Badge>
))}
</div>
)}
</div>
);
}