🎨 UI: Bookmark titles appear small while URLs are bold/prominent (should be reversed)

[Melvynx]

Problem Description

Based on user feedback, YouTube bookmark cards specifically have a confusing visual hierarchy where:

• URLs/domain names are displayed bold and prominent
• Bookmark titles are displayed small and muted/gray

This is the opposite of what users expect for YouTube videos - titles should be prominent, URLs should be secondary.

Current Implementation Analysis

YouTube Card Issue

File: /apps/web/app/app/bookmark-card/bookmark-card-youtube.tsx:49-50

<BookmarkCardTitle>{domainName}</BookmarkCardTitle>           // URL bold  
<BookmarkCardDescription>{bookmark.title}</BookmarkCardDescription>  // Title muted

UI Components: /packages/ui/src/components/card.tsx

• CardTitle: font-semibold leading-none - Makes text bold
• CardDescription: text-muted-foreground text-sm - Makes text muted/gray

Additional Issue Location

File: /apps/web/src/features/bookmarks/bookmark-content-view.tsx:37-44

<Typography variant="large" className="line-clamp-1 cursor-pointer hover:underline">
  {bookmark.url}  // URL gets large styling
</Typography>
<Typography variant="muted">{bookmark.title}</Typography>  // Title gets muted styling

Expected Behavior

For YouTube videos specifically:

• Video titles should be bold/prominent (using CardTitle styling)
• YouTube domain should be muted/secondary (using CardDescription styling)

This is especially important for YouTube content where the video title is the most valuable information for users.

Files to Fix

• /apps/web/app/app/bookmark-card/bookmark-card-youtube.tsx (lines 49-50)
• /apps/web/src/features/bookmarks/bookmark-content-view.tsx (lines 37-44)

Priority

Medium - This affects user experience and first impressions for YouTube content specifically.

Note

Other bookmark card types (page, base) have correct styling - this issue is specific to YouTube cards where video titles should be more prominent than the domain.