📅 UI: Display bookmark creation date on cards for timeline functionality

[Melvynx]

Problem Description

Bookmark cards don't display creation dates anywhere in the UI, despite this data being available in the database. Users have requested this feature to track when they saved bookmarks and enable potential timeline functionality.

Current State Analysis

Database Schema ✅

• createdAt: DateTime @default(now()) exists on Bookmark model
• updatedAt: DateTime @updatedAt also available

Data Fetching ✅

• createdAt is already being fetched in bookmark queries
• Located in /apps/web/src/lib/search/default-browsing.ts:53

TypeScript Types ✅

• BookmarkCardData type already includes createdAt?: Date and updatedAt?: Date
• Located in /apps/web/app/app/bookmark-card/bookmark.types.ts

UI Display ❌

• Creation date is not displayed anywhere in bookmark cards
• Data is fetched but not utilized in the UI

Expected Behavior

Display the creation date on bookmark cards to help users:

• Track when they saved items - Better organization and recall
• Enable timeline features - Foundation for chronological browsing
• Complete metadata display - Show all available bookmark information

Implementation Suggestions

Option 1: Below Description

Add date in BookmarkCardContent component:

<div className="text-xs text-muted-foreground mt-1">
  Saved {new Date(bookmark.createdAt).toLocaleDateString()}
</div>

Option 2: Header Overlay

Add subtle date display in top-right corner of card

Option 3: Extended Metadata

Include in expandable metadata section with other details

Date Formatting Pattern

Use existing pattern from codebase:

// Simple format
new Date(bookmark.createdAt).toLocaleDateString()

// Detailed format for hover/tooltip
new Date(bookmark.createdAt).toLocaleDateString("en-US", {
  year: "numeric",
  month: "long", 
  day: "numeric"
})

Files to Modify

1. Main Implementation:

   • /apps/web/app/app/bookmark-card/bookmark-card-content.tsx

2. Alternative Locations:

   • /apps/web/app/app/bookmark-card/bookmark-card-header.tsx
   • Create new component for metadata display

Priority

Medium - Enhances user experience and provides foundation for timeline features. Data already exists and is fetched, just needs UI display.

Future Benefits

This change enables:

• Timeline view implementation
• "On this day" features
• Better bookmark organization by date
• Improved user context for saved items