From 9a6f788b98fb97e129d19fc914159046b64699b3 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 12:55:00 +0200
Subject: [PATCH] feat: move highlight timestamp to top-right corner of cards

---
 src/components/HighlightItem.tsx | 8 ++++----
 src/styles/layout/highlights.css | 4 +++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx
index a2a6d641..d9514d91 100644
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -303,6 +303,10 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       onClick={handleItemClick}
       style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}
     >
+      <span className="highlight-timestamp">
+        {formatDateCompact(highlight.created_at)}
+      </span>
+      
       <div className="highlight-quote-icon">
         <FontAwesomeIcon icon={faQuoteLeft} />
         {relayIndicator && (
@@ -333,10 +337,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           <span className="highlight-author">
             {getUserDisplayName()}
           </span>
-          <span className="highlight-meta-separator">•</span>
-          <span className="highlight-time">
-            {formatDateCompact(highlight.created_at)}
-          </span>
           
           <div className="highlight-menu-wrapper" ref={menuRef}>
             <button
diff --git a/src/styles/layout/highlights.css b/src/styles/layout/highlights.css
index f0742d30..f4269142 100644
--- a/src/styles/layout/highlights.css
+++ b/src/styles/layout/highlights.css
@@ -100,10 +100,12 @@
 .empty-hint { font-size: 0.875rem; color: #666; margin-top: 0.5rem; }
 
 .highlights-list { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
-.highlight-item { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; display: flex; gap: 0.75rem; transition: border-color 0.2s ease; }
+.highlight-item { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; display: flex; gap: 0.75rem; transition: border-color 0.2s ease; position: relative; }
 .highlight-item:hover { border-color: #646cff; }
 .highlight-item.selected { border-color: #646cff; background: #252525; box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.3); }
 
+.highlight-timestamp { position: absolute; top: 0.5rem; right: 0.75rem; font-size: 0.75rem; color: #888; font-weight: 500; white-space: nowrap; pointer-events: none; }
+
 /* Level colors in sidebar items */
 .highlight-item.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent); }
 .highlight-item.level-friends { border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent); }