diff options
| author | Mohamed Bassem <me@mbassem.com> | 2025-12-24 15:15:46 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-12-24 13:15:46 +0000 |
| commit | ef27670f5c027be87d279b9b32553e980e55d888 (patch) | |
| tree | aa30e49787c17499abbe7a12b7a3353d13dbec7d /apps/web/components/dashboard/bookmarks/BookmarkOwnerIcon.tsx | |
| parent | f7d3462790652c6e5ecd90ae0d699e05b0320a97 (diff) | |
| download | karakeep-ef27670f5c027be87d279b9b32553e980e55d888.tar.zst | |
feat: show bookmark owner icon in shared lists (#2277)
* feat: Add owner icon to bookmarks in shared lists
Display a small icon showing the bookmark owner's name and email on hover when viewing bookmarks from other users in shared lists. The icon appears in the top-right corner of bookmark cards across all layout types (grid, list, compact).
Changes:
- Add user field to ZBookmark type to include owner name and email
- Update bookmark queries to fetch user information via join
- Create BookmarkOwnerIcon component with tooltip showing owner details
- Integrate owner indicator into BookmarkLayoutAdaptingCard for all layouts
- Only show icon for bookmarks not owned by current user
* use icons in more places
* remove tooltip providers
* fix non list context
---------
Co-authored-by: Claude <noreply@anthropic.com>
Diffstat (limited to 'apps/web/components/dashboard/bookmarks/BookmarkOwnerIcon.tsx')
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/BookmarkOwnerIcon.tsx | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkOwnerIcon.tsx b/apps/web/components/dashboard/bookmarks/BookmarkOwnerIcon.tsx new file mode 100644 index 00000000..57770547 --- /dev/null +++ b/apps/web/components/dashboard/bookmarks/BookmarkOwnerIcon.tsx @@ -0,0 +1,31 @@ +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { UserAvatar } from "@/components/ui/user-avatar"; + +interface BookmarkOwnerIconProps { + ownerName: string; + ownerAvatar: string | null; +} + +export default function BookmarkOwnerIcon({ + ownerName, + ownerAvatar, +}: BookmarkOwnerIconProps) { + return ( + <Tooltip> + <TooltipTrigger> + <UserAvatar + name={ownerName} + image={ownerAvatar} + className="size-5 shrink-0 rounded-full ring-1 ring-border" + /> + </TooltipTrigger> + <TooltipContent className="font-sm"> + <p className="font-medium">{ownerName}</p> + </TooltipContent> + </Tooltip> + ); +} |
