From 2a424f8dc46a0a629a7953b9e863a475406f1211 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 18 Feb 2026 09:31:03 +0200
Subject: [PATCH] ui/grid view: refactor

---
 .../collections/legacy/ListOrGridView.tsx     | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 866ec56537..2d34681666 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -148,27 +148,37 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
     );
 }
 
-function GridNoteCard({ note, parentNote, highlightedTokens, includeArchived }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined, includeArchived: boolean }) {
-    const titleRef = useRef<HTMLSpanElement>(null);
-    const [ noteTitle, setNoteTitle ] = useState<string>();
-    const notePath = getNotePath(parentNote, note);
+interface GridNoteCardProps {
+    note: FNote;
+    parentNote: FNote;
+    highlightedTokens: string[] | null | undefined;
+    includeArchived: boolean
+}
+
+function GridNoteCard(props: GridNoteCardProps) {
+    const notePath = getNotePath(props.parentNote, props.note);
 
     return (
-        <div
-            className={`note-book-card no-tooltip-preview block-link ${note.isArchived ? "archived" : ""}`}
-            data-href={`#${notePath}`}
-            data-note-id={note.noteId}
-            onClick={(e) => link.goToLink(e)}
+        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
+                "archived": props.note.isArchived
+             })}
+             data-href={`#${notePath}`}
+             data-note-id={props.note.noteId}
+             onClick={(e) => link.goToLink(e)}
         >
             <h5 className="note-book-header">
-                <Icon className="note-icon" icon={note.getIcon()} />
-                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={parentNote.type === "search"} highlightedTokens={highlightedTokens} />
+                <Icon className="note-icon" icon={props.note.getIcon()} />
+                <NoteLink className="note-book-title"
+                          notePath={notePath}
+                          noPreview
+                          showNotePath={props.parentNote.type === "search"}
+                          highlightedTokens={props.highlightedTokens}
+                />
             </h5>
-            <NoteContent
-                note={note}
-                trim
-                highlightedTokens={highlightedTokens}
-                includeArchivedNotes={includeArchived}
+            <NoteContent note={props.note}
+                         trim
+                         highlightedTokens={props.highlightedTokens}
+                         includeArchivedNotes={props.includeArchived}
             />
         </div>
     );