From 3b55d64468a68203b7a2da9ab92408b40a96d54b Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 9 Oct 2025 21:17:14 +0100
Subject: [PATCH] feat(ui): ultra-compact date format for bookmarks sidebar
 (now, 5m, 3h, 2d, 1mo, 1y)

---
 src/components/BookmarkViews/CompactView.tsx |  4 ++--
 src/utils/bookmarkUtils.tsx                  | 22 +++++++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/BookmarkViews/CompactView.tsx b/src/components/BookmarkViews/CompactView.tsx
index 88cdf9cb..9adf69e1 100644
--- a/src/components/BookmarkViews/CompactView.tsx
+++ b/src/components/BookmarkViews/CompactView.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookmark, faUserLock, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { IndividualBookmark } from '../../types/bookmarks'
-import { formatDate } from '../../utils/bookmarkUtils'
+import { formatDateCompact } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
 import { IconGetter } from './shared'
 
@@ -75,7 +75,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
             <ContentWithResolvedProfiles content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} />
           </div>
         )}
-        <span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
+        <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
         {isClickable && (
           <button
             className="compact-read-btn"
diff --git a/src/utils/bookmarkUtils.tsx b/src/utils/bookmarkUtils.tsx
index 48ed55d2..14ba5f39 100644
--- a/src/utils/bookmarkUtils.tsx
+++ b/src/utils/bookmarkUtils.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { formatDistanceToNow } from 'date-fns'
+import { formatDistanceToNow, differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays, differenceInMonths, differenceInYears } from 'date-fns'
 import { ParsedContent, ParsedNode } from '../types/bookmarks'
 import ResolvedMention from '../components/ResolvedMention'
 // Note: ContentWithResolvedProfiles is imported by components directly to keep this file component-only for fast refresh
@@ -9,6 +9,26 @@ export const formatDate = (timestamp: number) => {
   return formatDistanceToNow(date, { addSuffix: true })
 }
 
+// Ultra-compact date format for tight spaces (e.g., compact view)
+export const formatDateCompact = (timestamp: number) => {
+  const date = new Date(timestamp * 1000)
+  const now = new Date()
+  
+  const seconds = differenceInSeconds(now, date)
+  const minutes = differenceInMinutes(now, date)
+  const hours = differenceInHours(now, date)
+  const days = differenceInDays(now, date)
+  const months = differenceInMonths(now, date)
+  const years = differenceInYears(now, date)
+  
+  if (seconds < 60) return 'now'
+  if (minutes < 60) return `${minutes}m`
+  if (hours < 24) return `${hours}h`
+  if (days < 30) return `${days}d`
+  if (months < 12) return `${months}mo`
+  return `${years}y`
+}
+
 // Component to render content with resolved nprofile names
 // Intentionally no exports except components and render helpers