From 4fa418438fc78a29fc2b52cd92755774a20b0347 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Mon, 12 Jan 2026 22:02:31 +0100
Subject: [PATCH] fix: display notebook icons correctly instead of icon names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes issue where notebook dropdown showed icon name (e.g., "folder")
instead of the actual icon component.

Problem:
- note-card.tsx was displaying {notebook.icon} as text
- Users saw "folder", "book", etc. instead of icons

Solution:
- Import Lucide icon components (Folder, Book, Briefcase, etc.)
- Add ICON_MAP matching icon names to components
- Use getNotebookIcon() function to resolve icon name to component
- Render component as <NotebookIcon className="h-4 w-4 mr-2" />

Changes:
- components/note-card.tsx:
  - Add LucideIcon and icon imports
  - Add ICON_MAP and getNotebookIcon() helper
  - Update notebook dropdown to render icon components

Result:
✓ Notebook icons now display correctly in dropdown menu
✓ Consistent with notebooks-list.tsx implementation

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .claude/settings.local.json         |  3 +-
 keep-notes/components/note-card.tsx | 45 ++++++++++++++++++++++-------
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 8c72afc..47a3f1f 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -55,7 +55,8 @@
       "mcp__web-search-prime__webSearchPrime",
       "mcp__context7__query-docs",
       "Bash(docker logs:*)",
-      "Bash(docker run:*)"
+      "Bash(docker run:*)",
+      "Bash(docker exec:*)"
     ]
   }
 }
diff --git a/keep-notes/components/note-card.tsx b/keep-notes/components/note-card.tsx
index 8da1bac..b8c8720 100644
--- a/keep-notes/components/note-card.tsx
+++ b/keep-notes/components/note-card.tsx
@@ -10,7 +10,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Pin, Bell, GripVertical, X, Link2, FolderOpen, StickyNote } from 'lucide-react'
+import { Pin, Bell, GripVertical, X, Link2, FolderOpen, StickyNote, LucideIcon, Folder, Briefcase, FileText, Zap, BarChart3, Globe, Sparkles, Book, Heart, Crown, Music, Building2 } from 'lucide-react'
 import { useState, useEffect, useTransition, useOptimistic } from 'react'
 import { useSession } from 'next-auth/react'
 import { useRouter, useSearchParams } from 'next/navigation'
@@ -56,6 +56,28 @@ function getDateLocale(language: string): Locale {
   return localeMap[language] || dateFnsLocales.enUS
 }
 
+// Map icon names to lucide-react components
+const ICON_MAP: Record<string, LucideIcon> = {
+  'folder': Folder,
+  'briefcase': Briefcase,
+  'document': FileText,
+  'lightning': Zap,
+  'chart': BarChart3,
+  'globe': Globe,
+  'sparkle': Sparkles,
+  'book': Book,
+  'heart': Heart,
+  'crown': Crown,
+  'music': Music,
+  'building': Building2,
+}
+
+// Function to get icon component by name
+function getNotebookIcon(iconName: string): LucideIcon {
+  const IconComponent = ICON_MAP[iconName] || Folder
+  return IconComponent
+}
+
 interface NoteCardProps {
   note: Note
   onEdit?: (note: Note, readOnly?: boolean) => void
@@ -278,15 +300,18 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
               <StickyNote className="h-4 w-4 mr-2" />
               {t('notebookSuggestion.generalNotes')}
             </DropdownMenuItem>
-            {notebooks.map((notebook: any) => (
-              <DropdownMenuItem
-                key={notebook.id}
-                onClick={() => handleMoveToNotebook(notebook.id)}
-              >
-                <span className="text-lg mr-2">{notebook.icon || '📁'}</span>
-                {notebook.name}
-              </DropdownMenuItem>
-            ))}
+            {notebooks.map((notebook: any) => {
+              const NotebookIcon = getNotebookIcon(notebook.icon || 'folder')
+              return (
+                <DropdownMenuItem
+                  key={notebook.id}
+                  onClick={() => handleMoveToNotebook(notebook.id)}
+                >
+                  <NotebookIcon className="h-4 w-4 mr-2" />
+                  {notebook.name}
+                </DropdownMenuItem>
+              )
+            })}
           </DropdownMenuContent>
         </DropdownMenu>
       </div>