fix: display folder name and color in note cards

Author: typelets

src/components/notes/NotesPanel/NoteCard.tsx

@@ -1,5 +1,5 @@
 import { memo, useMemo } from 'react';
-import { Star, Folder } from 'lucide-react';
+import { Star } from 'lucide-react';
 import type { Note, Folder as FolderType } from '@/types/note.ts';
 
 interface NoteCardProps {
@@ -10,7 +10,13 @@ interface NoteCardProps {
   folders?: FolderType[];
 }
 
-function NoteCard({ note, isSelected, onSelect, onToggleStar, folders }: NoteCardProps) {
+function NoteCard({
+  note,
+  isSelected,
+  onSelect,
+  onToggleStar,
+  folders,
+}: NoteCardProps) {
   const formatDateTime = (date: Date) => {
     try {
       const noteDate = new Date(date);
@@ -55,10 +61,10 @@ function NoteCard({ note, isSelected, onSelect, onToggleStar, folders }: NoteCar
     if (note?.folder) {
       return note.folder;
     }
-    
+
     // Fallback to looking up in folders array
     if (!note?.folderId || !folders || folders.length === 0) return null;
-    return folders.find(f => f.id === note.folderId) || null;
+    return folders.find((f) => f.id === note.folderId) || null;
   }, [note?.folder, note?.folderId, folders]);
 
   if (!note) {
@@ -117,20 +123,24 @@ function NoteCard({ note, isSelected, onSelect, onToggleStar, folders }: NoteCar
           <div className="flex flex-col gap-1">
             <span
               className={`text-xs ${
-                isSelected ? 'text-accent-foreground/70' : 'text-muted-foreground'
+                isSelected
+                  ? 'text-accent-foreground/70'
+                  : 'text-muted-foreground'
               }`}
             >
               {formattedDate}
             </span>
-            
+
             {folder && (
               <div
                 className={`flex items-center gap-1.5 text-xs ${
-                  isSelected ? 'text-accent-foreground/60' : 'text-muted-foreground/80'
+                  isSelected
+                    ? 'text-accent-foreground/60'
+                    : 'text-muted-foreground/80'
                 }`}
               >
                 <div
-                  className="h-2 w-2 rounded-sm shrink-0"
+                  className="h-2 w-2 shrink-0 rounded-sm"
                   style={{ backgroundColor: folder.color || '#6b7280' }}
                 />
                 <span className="truncate">{folder.name}</span>
@@ -183,4 +193,4 @@ export default memo(NoteCard, (prevProps, nextProps) => {
     prevProps.isSelected === nextProps.isSelected &&
     prevProps.folders === nextProps.folders
   );
-});
+});