From 38f4b69d48172dbefbf7e46c90ef87d2283a5408 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:36:01 +0200
Subject: [PATCH] feat: position bookmark type icon in top-left corner of card

- Move bookmark type icon to top-left corner as overlay
- Add bookmark-type-overlay with absolute positioning
- Style icon with background, border, and shadow for visibility
- Update responsive design for smaller screens
- Remove icon from bookmark header to avoid duplication
- Ensure icon is always visible and accessible
---
 src/components/BookmarkViews/CardView.tsx |  8 +++--
 src/styles/components/cards.css           | 41 +++++++++++++++++++++++
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index ae63760b..026eeebd 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -117,6 +117,11 @@ export const CardView: React.FC<CardViewProps> = ({
       onKeyDown={handleKeyDown}
     >
       <div className="card-layout">
+        {/* Bookmark type icon in top-left corner */}
+        <div className="bookmark-type-overlay">
+          <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
+        </div>
+        
         <div className="card-content">
           <div className="card-content-header">
             {(cachedImage || firstUrl) && (
@@ -134,9 +139,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
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index 8bff8f37..d9a307df 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -99,6 +99,27 @@
   flex-direction: column;
   padding: 1.25rem;
   gap: 0.75rem;
+  position: relative;
+}
+
+.bookmark-type-overlay {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  z-index: 10;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.bookmark-type-overlay .content-type-icon {
+  color: var(--color-primary);
+  font-size: 0.9rem;
 }
 
 .card-content-header {
@@ -282,6 +303,16 @@
     gap: 0.5rem;
   }
   
+  .bookmark-type-overlay {
+    top: 0.5rem;
+    left: 0.5rem;
+    padding: 0.375rem;
+  }
+  
+  .bookmark-type-overlay .content-type-icon {
+    font-size: 0.8rem;
+  }
+  
   .card-content-header {
     gap: 0.75rem;
   }
@@ -311,6 +342,16 @@
     gap: 0.5rem;
   }
   
+  .bookmark-type-overlay {
+    top: 0.375rem;
+    left: 0.375rem;
+    padding: 0.25rem;
+  }
+  
+  .bookmark-type-overlay .content-type-icon {
+    font-size: 0.75rem;
+  }
+  
   .card-content-header {
     gap: 0.5rem;
   }