From c92a620ea860346017b1c2c9b756b4f6a4b286c8 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:39:08 +0200
Subject: [PATCH] feat: move bookmark type icon to bottom right footer

- Remove type icon from header and move to footer
- Position author name on left, type icon on right in footer
- Update header to right-align date only
- Add flex layout to footer for proper spacing
- Maintain consistent styling and responsive design
---
 src/components/BookmarkViews/CardView.tsx |  8 +++-----
 src/styles/components/cards.css           | 13 +++++++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index 8ac1f037..39e1caaf 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -132,10 +132,6 @@ export const CardView: React.FC<CardViewProps> = ({
             )}
             <div className="card-text-content">
         <div className="bookmark-header">
-          <span className="bookmark-type">
-            <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
-          </span>
-          
           {getInternalRoute() ? (
             <Link
               to={getInternalRoute()!}
@@ -208,7 +204,9 @@ export const CardView: React.FC<CardViewProps> = ({
               {getAuthorDisplayName()}
             </Link>
           </div>
-          {/* CTA removed */}
+          <span className="bookmark-type">
+            <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
+          </span>
         </div>
       </div>
     </div>
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index 77909d65..7da0dd34 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -166,6 +166,8 @@
 
 .card-content .bookmark-header {
   margin-bottom: 0.5rem;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .card-content .bookmark-title {
@@ -201,6 +203,17 @@
 .card-content .bookmark-footer {
   margin-top: auto;
   padding-top: 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-content .bookmark-footer .bookmark-type {
+  color: var(--color-primary);
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
 }
 
 /* Reading progress as separator - always shown, full width */