fix: display folder name and color in note cards

Author: typelets

src/components/notes/NotesPanel/NoteCard.tsx

@@ -1,15 +1,16 @@
 import { memo, useMemo } from 'react';
-import { Star } from 'lucide-react';
-import type { Note } from '@/types/note.ts';
+import { Star, Folder } from 'lucide-react';
+import type { Note, Folder as FolderType } from '@/types/note.ts';
 
 interface NoteCardProps {
   note: Note;
   isSelected: boolean;
   onSelect: (note: Note) => void;
   onToggleStar: (noteId: string) => void;
+  folders?: FolderType[];
 }
 
-function NoteCard({ note, isSelected, onSelect, onToggleStar }: NoteCardProps) {
+function NoteCard({ note, isSelected, onSelect, onToggleStar, folders }: NoteCardProps) {
   const formatDateTime = (date: Date) => {
     try {
       const noteDate = new Date(date);
@@ -49,6 +50,17 @@ function NoteCard({ note, isSelected, onSelect, onToggleStar }: NoteCardProps) {
     return note?.updatedAt ? formatDateTime(note.updatedAt) : 'No date';
   }, [note?.updatedAt]);
 
+  const folder = useMemo(() => {
+    // First check if note has embedded folder data
+    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;
+  }, [note?.folder, note?.folderId, folders]);
+
   if (!note) {
     return null;
   }
@@ -100,17 +112,35 @@ function NoteCard({ note, isSelected, onSelect, onToggleStar }: NoteCardProps) {
           {previewText}
         </p>
 
-        <div className="flex items-center justify-between">
-          <span
-            className={`text-xs ${
-              isSelected ? 'text-accent-foreground/70' : 'text-muted-foreground'
-            }`}
-          >
-            {formattedDate}
-          </span>
-
+        <div className="space-y-1">
+          {/* Date and Folder */}
+          <div className="flex flex-col gap-1">
+            <span
+              className={`text-xs ${
+                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'
+                }`}
+              >
+                <div
+                  className="h-2 w-2 rounded-sm shrink-0"
+                  style={{ backgroundColor: folder.color || '#6b7280' }}
+                />
+                <span className="truncate">{folder.name}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Tags */}
           {note.tags && note.tags.length > 0 && (
-            <div className="flex gap-1">
+            <div className="flex gap-1 pt-1">
               {note.tags.slice(0, 1).map((tag) => (
                 <span
                   key={tag}
@@ -149,6 +179,8 @@ export default memo(NoteCard, (prevProps, nextProps) => {
     prevProps.note.content === nextProps.note.content &&
     prevProps.note.starred === nextProps.note.starred &&
     prevProps.note.updatedAt === nextProps.note.updatedAt &&
-    prevProps.isSelected === nextProps.isSelected
+    prevProps.note.folderId === nextProps.note.folderId &&
+    prevProps.isSelected === nextProps.isSelected &&
+    prevProps.folders === nextProps.folders
   );
-});
+});

src/components/notes/NotesPanel/NotesList.tsx

@@ -13,7 +13,7 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog.tsx';
 import { Button } from '@/components/ui/button.tsx';
-import type { Note } from '@/types/note.ts';
+import type { Note, Folder } from '@/types/note.ts';
 
 import NoteCard from './NoteCard.tsx';
 
@@ -25,6 +25,7 @@ interface NotesListProps {
   onEmptyTrash?: () => Promise<void>;
   isTrashView?: boolean;
   emptyMessage?: string;
+  folders?: Folder[];
 }
 
 export default function NotesList({
@@ -35,6 +36,7 @@ export default function NotesList({
   onEmptyTrash,
   isTrashView = false,
   emptyMessage,
+  folders,
 }: NotesListProps) {
   const [showEmptyTrashDialog, setShowEmptyTrashDialog] = useState(false);
   const [isEmptyingTrash, setIsEmptyingTrash] = useState(false);
@@ -56,7 +58,6 @@ export default function NotesList({
   return (
     <>
       <div className="divide-y divide-slate-100 dark:divide-slate-700">
-        {/* Empty Trash Button - Only show when in trash view and there are notes */}
         {isTrashView && notes.length > 0 && onEmptyTrash && (
           <div className="border-border bg-muted/20 border-b p-4">
             <div className="flex items-center justify-between">
@@ -79,18 +80,17 @@ export default function NotesList({
           </div>
         )}
 
-        {/* Notes List */}
         {notes.map((note) => (
           <NoteCard
             key={note.id}
             note={note}
             isSelected={selectedNote?.id === note.id}
             onSelect={onSelectNote}
             onToggleStar={onToggleStar}
+            folders={folders}
           />
         ))}
 
-        {/* Empty State */}
         {notes.length === 0 && emptyMessage && (
           <div className="text-muted-foreground p-8 text-center">
             <Trash2 className="mx-auto mb-4 h-12 w-12 opacity-20" />
@@ -99,7 +99,6 @@ export default function NotesList({
         )}
       </div>
 
-      {/* Empty Trash Confirmation Dialog */}
       <AlertDialog
         open={showEmptyTrashDialog}
         onOpenChange={setShowEmptyTrashDialog}
@@ -142,4 +141,4 @@ export default function NotesList({
       </AlertDialog>
     </>
   );
-}
+}

src/components/notes/NotesPanel/index.tsx

@@ -8,6 +8,7 @@ interface FilesPanelProps {
   notes: Note[];
   selectedNote: Note | null;
   selectedFolder: FolderType | null;
+  folders?: FolderType[];
   currentView: ViewMode;
   isFolderPanelOpen: boolean;
   onSelectNote: (note: Note) => void;
@@ -24,6 +25,7 @@ export default function FilesPanel({
   notes,
   selectedNote,
   selectedFolder,
+  folders,
   currentView,
   isFolderPanelOpen,
   onSelectNote,
@@ -149,8 +151,9 @@ export default function FilesPanel({
           isTrashView={isTrashView}
           onEmptyTrash={onEmptyTrash}
           emptyMessage={getEmptyMessage()}
+          folders={folders}
         />
       </div>
     </div>
   );
-}
+}