From 013a169a1265ec9c9ddd7a707e087cf843619127 Mon Sep 17 00:00:00 2001
From: mkfdj <mautlej6@gmail.com>
Date: Sun, 5 Apr 2026 19:55:05 +0200
Subject: [PATCH] folder update

---
 src/components/media/FolderCard.tsx    | 6 +++++-
 src/pages/parts/home/BookmarksPart.tsx | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/media/FolderCard.tsx b/src/components/media/FolderCard.tsx
index 98c317b05..1285e9f17 100644
--- a/src/components/media/FolderCard.tsx
+++ b/src/components/media/FolderCard.tsx
@@ -9,6 +9,7 @@ import { Flare } from "@/components/utils/Flare";
 export interface FolderCardProps {
   groupName: string; // The raw group syntax like "[BOOKMARK]My Folder"
   displayName: string; // The parsed display name like "My Folder"
+  folderIcon?: string;
   onClick?: () => void;
   onEdit?: (e?: React.MouseEvent) => void;
   editable?: boolean;
@@ -17,6 +18,7 @@ export interface FolderCardProps {
 export function FolderCard({
   groupName,
   displayName,
+  folderIcon,
   onClick,
   onEdit,
   editable,
@@ -53,7 +55,9 @@ export function FolderCard({
           <div className="relative pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground mb-4">
             <div className="absolute inset-0 flex flex-col items-center justify-center text-white/60 group-hover:text-white transition-colors">
               <UserIcon
-                icon={UserIcons.USER_GROUP}
+                icon={
+                  folderIcon ? (folderIcon as UserIcons) : UserIcons.USER_GROUP
+                }
                 className="text-5xl mb-3 opacity-60"
               />
               <span className="text-xs text-white/40 uppercase tracking-widest font-semibold">
diff --git a/src/pages/parts/home/BookmarksPart.tsx b/src/pages/parts/home/BookmarksPart.tsx
index 0e716eee5..412b44714 100644
--- a/src/pages/parts/home/BookmarksPart.tsx
+++ b/src/pages/parts/home/BookmarksPart.tsx
@@ -248,12 +248,13 @@ export function BookmarksPart({
         <MediaGrid ref={gridRef}>
           {/* Folder cards */}
           {allGroups.map((group) => {
-            const { name } = parseGroupString(group);
+            const { name, icon } = parseGroupString(group);
             return (
               <div key={`folder-${group}`}>
                 <FolderCard
                   groupName={group}
                   displayName={name}
+                  folderIcon={icon}
                   editable={editing}
                   onClick={() => {
                     if (!editing) {