From ae0471946ece079769596495269597f05067ad3c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:41:40 +0200
Subject: [PATCH] feat: move timestamp to footer next to type icon

- Move timestamp from header to footer positioned next to type icon
- Create bookmark-footer-right container for timestamp and type icon
- Hide empty bookmark-header since timestamp is now in footer
- Update footer layout: author (left), timestamp + type icon (right)
- Maintain proper spacing and alignment for all elements
---
 src/components/BookmarkViews/CardView.tsx | 32 ++++++++++++-----------
 src/styles/components/cards.css           | 10 ++++---
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index 150e0596..93c097d8 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -135,18 +135,6 @@ export const CardView: React.FC<CardViewProps> = ({
             )}
             <div className="card-text-content">
         <div className="bookmark-header">
-          {getInternalRoute() ? (
-            <Link
-              to={getInternalRoute()!}
-              className="bookmark-date-link"
-              title="Open in app"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
-            </Link>
-          ) : (
-            <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
-          )}
         </div>
         
         {/* Display title for articles or bookmarks with titles */}
@@ -207,9 +195,23 @@ export const CardView: React.FC<CardViewProps> = ({
               {getAuthorDisplayName()}
             </Link>
           </div>
-          <span className="bookmark-type">
-            <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
-          </span>
+          <div className="bookmark-footer-right">
+            {getInternalRoute() ? (
+              <Link
+                to={getInternalRoute()!}
+                className="bookmark-date-link"
+                title="Open in app"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
+              </Link>
+            ) : (
+              <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
+            )}
+            <span className="bookmark-type">
+              <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
+            </span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index db4e34a3..62af012f 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -165,9 +165,7 @@
 }
 
 .card-content .bookmark-header {
-  margin-bottom: 0.5rem;
-  display: flex;
-  justify-content: flex-end;
+  display: none;
 }
 
 .card-content .bookmark-title {
@@ -208,6 +206,12 @@
   align-items: center;
 }
 
+.card-content .bookmark-footer-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .card-content .bookmark-footer .bookmark-type {
   font-size: 0.9rem;
   display: flex;