CalvinBackup/donutbrowser
1
0
Fork 0
mirror of https://github.com/zhom/donutbrowser.git synced 2026-04-29 07:16:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: show tooltip on tags hover

Browse Source
This commit is contained in:
zhom
2025-08-15 19:17:07 +04:00
parent 77f93cc122
commit da9e1d1b58
1 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/profile-data-table.tsx
+48 -25
View File
@@ -220,33 +220,56 @@ const TagsCell = React.memo<{
if (openTagsEditorFor !== profile.name) {
const hiddenCount = Math.max(0, effectiveTags.length - visibleCount);
const ButtonContent = (
<button
type="button"
ref={containerRef as unknown as React.RefObject<HTMLButtonElement>}
className={cn(
"flex items-center gap-1 overflow-hidden cursor-pointer bg-transparent border-none p-1 w-full h-full",
isDisabled && "opacity-60",
)}
onClick={() => {
if (!isDisabled) setOpenTagsEditorFor(profile.name);
}}
>
{effectiveTags.slice(0, visibleCount).map((t) => (
<Badge key={t} variant="secondary" className="px-2 py-0 text-xs">
{t}
</Badge>
))}
{effectiveTags.length === 0 && (
<span className="text-muted-foreground">No tags</span>
)}
{hiddenCount > 0 && (
<Badge variant="outline" className="px-2 py-0 text-xs">
+{hiddenCount}
</Badge>
)}
</button>
);
return (
<div className="w-48 h-full cursor-pointer">
<button
type="button"
ref={containerRef as unknown as React.RefObject<HTMLButtonElement>}
className={cn(
"flex items-center gap-1 overflow-hidden cursor-pointer bg-transparent border-none p-1 w-full h-full",
isDisabled && "opacity-60",
)}
onClick={() => {
if (!isDisabled) setOpenTagsEditorFor(profile.name);
}}
>
{effectiveTags.slice(0, visibleCount).map((t) => (
<Badge key={t} variant="secondary" className="px-2 py-0 text-xs">
{t}
</Badge>
))}
{effectiveTags.length === 0 && (
<span className="text-muted-foreground">No tags</span>
)}
{hiddenCount > 0 && (
<Badge variant="outline" className="px-2 py-0 text-xs">
+{hiddenCount}
</Badge>
)}
</button>
{hiddenCount > 0 ? (
<Tooltip>
<TooltipTrigger asChild>{ButtonContent}</TooltipTrigger>
<TooltipContent className="max-w-[320px]">
<div className="flex flex-wrap gap-1">
{effectiveTags.map((t) => (
<Badge
key={t}
variant="secondary"
className="px-2 py-0 text-xs"
>
{t}
</Badge>
))}
</div>
</TooltipContent>
</Tooltip>
) : (
ButtonContent
)}
</div>
);
}