From 516f0052efcd7f87cd3f66d1e1df50fe257ae964 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 17 Feb 2026 20:36:01 +0200
Subject: [PATCH 01/27] ui/grid view: use flex gap instead of margins for cards

---
 apps/client/src/stylesheets/theme-next/base.css               | 1 -
 apps/client/src/widgets/collections/legacy/ListOrGridView.css | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 9e39b2f002..f7d65c765f 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -655,7 +655,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     border-radius: 12px;
     user-select: none;
     padding: 0;
-    margin: 5px 10px 5px 0;
 }
 
 :root .note-list .note-book-card:hover {
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 222682cc9f..adc6c8b2b3 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -8,7 +8,6 @@
     border-radius: 10px;
     background-color: var(--accented-background-color);
     padding: 10px 15px 15px 8px;
-    margin: 5px 5px 5px 5px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -304,6 +303,7 @@
 .note-list.grid-view .note-list-container {
     display: flex;
     flex-wrap: wrap;
+    gap: 10px;
 }
 
 .note-list.grid-view .note-book-card {

From 297cbbd8b311711a7ada830de0f4e9b6341efcc5 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 18 Feb 2026 09:15:38 +0200
Subject: [PATCH 02/27] ui/grid view: reuse some styles from list view

---
 .../collections/legacy/ListOrGridView.css     | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index adc6c8b2b3..6b55c0fade 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -99,6 +99,28 @@
     overflow: auto;
 }
 
+.nested-note-list-item,
+.note-book-card {
+    h5 {
+        display: flex;
+        align-items: center;
+        font-size: 1em;
+        font-weight: normal;
+        margin: 0;
+    }
+
+    .tn-icon {
+        font-size: 1.2em;
+    }
+
+    .note-book-title {
+        --link-hover-background: transparent;
+        --link-hover-color: currentColor;
+        color: inherit;
+        font-weight: normal;
+    }
+}
+
 /* #region List view */
 
 @keyframes note-preview-show {
@@ -119,13 +141,6 @@
 
 /* List item */
 .nested-note-list-item {
-    h5 {
-        display: flex;
-        align-items: center;
-        font-size: 1em;
-        font-weight: normal;
-        margin: 0;
-    }
 
     .note-expander {
         margin-inline-end: 4px;
@@ -136,14 +151,6 @@
     .tn-icon {
         margin-inline-end: 8px;
         color: var(--note-list-view-icon-color);
-        font-size: 1.2em;
-    }
-
-    .note-book-title {
-        --link-hover-background: transparent;
-        --link-hover-color: currentColor;
-        color: inherit;
-        font-weight: normal;
     }
 
     .note-path {

From 5036518458fdfd3c63dce41305ae06fe487a0b4c Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 18 Feb 2026 09:20:00 +0200
Subject: [PATCH 03/27] ui/grid view: hide attributes

---
 apps/client/src/widgets/collections/legacy/ListOrGridView.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index cdde8a6087..866ec56537 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -163,7 +163,6 @@ function GridNoteCard({ note, parentNote, highlightedTokens, includeArchived }:
             <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} />
-                <NoteAttributes note={note} />
             </h5>
             <NoteContent
                 note={note}

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 04/27] 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>
     );

From e006550b9f50d7832af3d20b653ac3b318cb775d Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 18 Feb 2026 09:51:18 +0200
Subject: [PATCH 05/27] ui/grid view: add a menu button for grid items

---
 .../collections/legacy/ListOrGridView.css     | 21 +++++++++++----
 .../collections/legacy/ListOrGridView.tsx     | 27 +++++++++++--------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 6b55c0fade..3fac974358 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -119,6 +119,11 @@
         color: inherit;
         font-weight: normal;
     }
+
+    .note-book-item-menu {
+        margin-inline-start: 8px;
+        flex-shrink: 0;
+    }
 }
 
 /* #region List view */
@@ -167,11 +172,6 @@
         opacity: .75;
     }
 
-    .nested-note-list-item-menu {
-        margin-inline-start: 8px;
-        flex-shrink: 0;
-    }
-
     &.archived {
         span.tn-icon + span,
         .tn-icon {
@@ -307,6 +307,17 @@
 /* #endregion */
 
 /* #region Grid view */
+
+.note-book-card {
+    h5 {
+
+        .tn-icon + span {
+            flex-grow: 1;
+        }
+    }
+
+}
+
 .note-list.grid-view .note-list-container {
     display: flex;
     flex-wrap: wrap;
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 2d34681666..8534b8d564 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -1,7 +1,7 @@
 import "./ListOrGridView.css";
 import { Card, CardSection } from "../../react/Card";
 
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import attribute_renderer from "../../../services/attribute_renderer";
@@ -139,10 +139,7 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
                           showNotePath={parentNote.type === "search"}
                           highlightedTokens={highlightedTokens} />
                 <NoteAttributes note={note} />
-                <ActionButton className="nested-note-list-item-menu"
-                              icon="bx bx-dots-vertical-rounded" text=""
-                              onClick={(e) => openNoteMenu(notePath, e)} 
-                />
+                <NoteMenuButton notePath={notePath} />
             </h5>
         </CardSection>
     );
@@ -174,6 +171,7 @@ function GridNoteCard(props: GridNoteCardProps) {
                           showNotePath={props.parentNote.type === "search"}
                           highlightedTokens={props.highlightedTokens}
                 />
+                <NoteMenuButton notePath={notePath} />
             </h5>
             <NoteContent note={props.note}
                          trim
@@ -261,6 +259,18 @@ function NoteChildren({ note, parentNote, highlightedTokens, currentLevel, expan
     />);
 }
 
+function NoteMenuButton(props: {notePath: string}) {
+    const openMenu = useCallback((e: TargetedMouseEvent<HTMLElement>) => {
+            linkContextMenuService.openContextMenu(props.notePath, e);
+            e.stopPropagation()
+    }, [props.notePath]);
+
+    return  <ActionButton className="note-book-item-menu"
+                          icon="bx bx-dots-vertical-rounded" text=""
+                          onClick={openMenu} 
+            />
+}
+
 function getNotePath(parentNote: FNote, childNote: FNote) {
     if (parentNote.type === "search") {
         // for search note parent, we want to display a non-search path
@@ -282,9 +292,4 @@ function useExpansionDepth(note: FNote) {
     }
     return parseInt(expandDepth, 10);
 
-}
-
-function openNoteMenu(notePath, e: TargetedMouseEvent<HTMLElement>) {
-    linkContextMenuService.openContextMenu(notePath, e);
-    e.stopPropagation()
-}
+}
\ No newline at end of file

From 75c7d55e016b157eb19d362cd39c066c55b963bc Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 18 Feb 2026 10:08:50 +0200
Subject: [PATCH 06/27] ui/grid view: tweak style

---
 .../src/stylesheets/theme-next/base.css       | 28 -------------------
 .../collections/legacy/ListOrGridView.css     |  8 +++++-
 2 files changed, 7 insertions(+), 29 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index f7d65c765f..995e796d73 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -678,34 +678,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     color: inherit !important;
 }
 
-.note-list-wrapper .note-book-card .note-book-header {
-    font-size: 1em;
-    font-weight: bold;
-    padding: 0.5em 1rem;
-    border-bottom-color: var(--card-border-color);
-}
-
-.note-list-wrapper .note-book-card .note-book-header .note-icon {
-    font-size: 17px;
-    vertical-align: text-bottom;
-}
-
-.note-list-wrapper .note-book-card .note-book-header .note-book-title {
-    font-size: 1em;
-    color: var(--active-item-text-color);
-    vertical-align: middle;
-}
-
-.note-list-wrapper .note-book-card .note-book-header .rendered-note-attributes {
-    font-size: 0.7em;
-    font-weight: normal;
-    margin-bottom: 0;
-}
-
-.note-list-wrapper .note-book-card .note-book-header:last-child {
-    border-bottom: 0;
-}
-
 .note-list-wrapper .note-book-card .note-book-content {
     padding: 0 !important;
     font-size: 0.8rem;
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 3fac974358..3e151d79bf 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -309,10 +309,16 @@
 /* #region Grid view */
 
 .note-book-card {
-    h5 {
+    .note-book-header {
+        padding: .5em 1em;
+        padding-inline-end: 8px;
+        border-bottom-color: var(--card-border-color);
 
         .tn-icon + span {
             flex-grow: 1;
+            a {
+                font-weight: 500;
+            }
         }
     }
 

From 419e87b0de1d92c74e9b21575355ad495b14ff7e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 18 Feb 2026 10:29:41 +0200
Subject: [PATCH 07/27] ui/grid view: add support for colored notes

---
 apps/client/src/stylesheets/theme-next-dark.css  |  3 ++-
 apps/client/src/stylesheets/theme-next-light.css |  3 ++-
 apps/client/src/stylesheets/theme-next/base.css  |  4 ----
 .../collections/legacy/ListOrGridView.css        | 16 ++++++++--------
 .../collections/legacy/ListOrGridView.tsx        |  2 +-
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index dfdc209040..ab86bcc4bd 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -314,7 +314,8 @@
  */
 
 #left-pane .fancytree-node.tinted,
-.nested-note-list-item.use-note-color {
+.nested-note-list-item.use-note-color,
+.note-book-card.use-note-color {
     --custom-color: var(--dark-theme-custom-color);
 
     /* The background color of the active item in the note tree.
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index 4b6b37718c..ead60aa992 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -308,7 +308,8 @@
 }
 
 #left-pane .fancytree-node.tinted,
-.nested-note-list-item.use-note-color {
+.nested-note-list-item.use-note-color,
+.note-book-card.use-note-color {
     --custom-color: var(--light-theme-custom-color);
 
     /* The background color of the active item in the note tree.
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 995e796d73..6a0ea97e53 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -727,10 +727,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     margin-bottom: 0;
 }
 
-.note-list-wrapper .note-book-card .tn-icon {
-    color: var(--left-pane-icon-color) !important;
-}
-
 .note-list.grid-view .note-book-card:hover {
     filter: contrast(105%);
 }
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 3e151d79bf..93af378501 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -124,6 +124,14 @@
         margin-inline-start: 8px;
         flex-shrink: 0;
     }
+
+    &.use-note-color {
+        span.tn-icon + span,
+        .tn-icon,
+        .rendered-note-attributes {
+            color: var(--custom-color);
+        }
+    }
 }
 
 /* #region List view */
@@ -178,14 +186,6 @@
             opacity: .6;
         }
     }
-
-    &.use-note-color {
-        span.tn-icon + span,
-        .nested-note-list:not(.search-results) & .tn-icon,
-        .rendered-note-attributes {
-            color: var(--custom-color);
-        }
-    }
 }
 
 .nested-note-list:not(.search-results) h5 {
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 8534b8d564..dec8934043 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -156,7 +156,7 @@ function GridNoteCard(props: GridNoteCardProps) {
     const notePath = getNotePath(props.parentNote, props.note);
 
     return (
-        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
+        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
                 "archived": props.note.isArchived
              })}
              data-href={`#${notePath}`}

From f200ac898aa81120589a317a399e02eed939c574 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 19 Feb 2026 19:14:01 +0200
Subject: [PATCH 08/27] ui/grid view: add support for search view

---
 .../src/stylesheets/theme-next-dark.css       |   3 +-
 .../src/stylesheets/theme-next-light.css      |   3 +-
 .../collections/legacy/ListOrGridView.css     | 108 +++++++++---------
 .../collections/legacy/ListOrGridView.tsx     |   2 +-
 4 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index ab86bcc4bd..94f6254d25 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -366,7 +366,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue,
-.nested-note-list-item.with-hue {
+.nested-note-list-item.with-hue,
+.note-book-card.with-hue {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%);
     --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%);
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index ead60aa992..a4d3eced8a 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -336,7 +336,8 @@
 
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue,
-.nested-note-list-item.with-hue {
+.nested-note-list-item.with-hue,
+.note-book-card.with-hue {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%);
     --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%);
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 93af378501..cf0187ab89 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -57,13 +57,6 @@
     content: "\00a0\00a0";
 }
 
-.note-book-header .note-icon {
-    font-size: 100%;
-    display: inline-block;
-    padding-inline-end: 7px;
-    position: relative;
-}
-
 .note-book-card .note-book-card {
     border: 1px solid var(--main-border-color);
 }
@@ -134,6 +127,59 @@
     }
 }
 
+/* Search result view */
+.nested-note-list.search-results .nested-note-list-item,
+.note-list-container.search-results .note-book-card .note-book-header {
+    span.tn-icon + span > span {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: flex-start;
+    }
+
+    small {
+        line-height: .85em;
+    }
+
+    .note-path {
+        margin-left: 0;
+        font-size: .85em;
+        line-height: .85em;
+        font-weight: 500;
+        letter-spacing: .5pt;
+    }
+
+    .tn-icon {
+        display: flex;
+        flex-shrink: 0;
+        justify-content: center;
+        align-items: center;
+        width: 1.75em;
+        height: 1.75em;
+        margin-inline-end: 12px;
+        border-radius: 50%;
+        background: var(--note-icon-custom-background-color, var(--note-list-view-large-icon-background));
+        font-size: 1.2em;
+        color: var(--note-icon-custom-color, var(--note-list-view-large-icon-color));
+    }
+
+    .ck-find-result {
+        background: var(--note-list-view-search-result-highlight-background);
+        color: var(--note-list-view-search-result-highlight-color);
+        font-weight: 600;
+        text-decoration: underline;
+    }
+}
+
+.nested-note-list .note-book-content,
+.note-list-container .note-book-content {
+    .ck-find-result {
+        outline: 2px solid var(--note-list-view-content-search-result-highlight-background);
+        border-radius: 4px;
+        background: var(--note-list-view-content-search-result-highlight-background);
+        color: var(--note-list-view-content-search-result-highlight-color);
+    }
+}
+
 /* #region List view */
 
 @keyframes note-preview-show {
@@ -197,47 +243,6 @@
     }
 }
 
-/* List item (search results view) */
-.nested-note-list.search-results .nested-note-list-item {
-    span.tn-icon + span > span {
-        display: flex;
-        flex-direction: column-reverse;
-        align-items: flex-start;
-    }
-
-    small {
-        line-height: .85em;
-    }
-
-    .note-path {
-        margin-left: 0;
-        font-size: .85em;
-        line-height: .85em;
-        font-weight: 500;
-        letter-spacing: .5pt;
-    }
-
-    .tn-icon {
-        display: flex;
-        flex-shrink: 0;
-        justify-content: center;
-        align-items: center;
-        width: 1.75em;
-        height: 1.75em;
-        margin-inline-end: 12px;
-        border-radius: 50%;
-        background: var(--note-icon-custom-background-color, var(--note-list-view-large-icon-background));
-        font-size: 1.2em;
-        color: var(--note-icon-custom-color, var(--note-list-view-large-icon-color));
-    }
-
-    h5 .ck-find-result {
-        background: var(--note-list-view-search-result-highlight-background);
-        color: var(--note-list-view-search-result-highlight-color);
-        font-weight: 600;
-        text-decoration: underline;
-    }
-}
 
 /* Note content preview */
 .nested-note-list .note-book-content {
@@ -291,13 +296,6 @@
         justify-content: center;
         min-height: 50vh;
     }
-
-    .ck-find-result {
-        outline: 2px solid var(--note-list-view-content-search-result-highlight-background);
-        border-radius: 4px;
-        background: var(--note-list-view-content-search-result-highlight-background);
-        color: var(--note-list-view-content-search-result-highlight-color);
-    }
 }
 
 .note-content-preview:has(.note-book-content:empty) {
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index dec8934043..2d1c4deb22 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -72,7 +72,7 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
             <div class="note-list-wrapper">
                 {!hasCollectionProperties && <Pager {...pagination} />}
 
-                <div class="note-list-container use-tn-links">
+                <div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
                     {pageNotes?.map(childNote => (
                         <GridNoteCard note={childNote} parentNote={note} highlightedTokens={highlightedTokens} includeArchived={includeArchived} />
                     ))}

From 60ae094d3b78a032b61f5e60c97eb70676dcbbb9 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 19 Feb 2026 19:26:51 +0200
Subject: [PATCH 09/27] ui/grid view: reveal the content using a fade in
 transition

---
 .../collections/legacy/ListOrGridView.css     | 31 ++++++++++---------
 .../collections/legacy/ListOrGridView.tsx     |  6 +++-
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index cf0187ab89..5d9b092f5b 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -170,8 +170,24 @@
     }
 }
 
+@keyframes note-preview-show {
+    from {
+        opacity: 0;
+    } to {
+        opacity: 1;
+    }
+}
+
 .nested-note-list .note-book-content,
 .note-list-container .note-book-content {
+    display: none;
+    animation: note-preview-show .25s ease-out;
+    will-change: opacity;
+
+    &.note-book-content-ready {
+        display: block;
+    }
+
     .ck-find-result {
         outline: 2px solid var(--note-list-view-content-search-result-highlight-background);
         border-radius: 4px;
@@ -182,14 +198,6 @@
 
 /* #region List view */
 
-@keyframes note-preview-show {
-    from {
-        opacity: 0;
-    } to {
-        opacity: 1;
-    }
-}
-
 .nested-note-list {
     --card-nested-section-indent: 25px;
 
@@ -246,19 +254,12 @@
 
 /* Note content preview */
 .nested-note-list .note-book-content {
-    display: none;
     outline: 1px solid var(--note-list-view-content-background);
     border-radius: 8px;
     background-color: var(--note-list-view-content-background);
     overflow: hidden;
     user-select: text;
     font-size: .85rem;
-    animation: note-preview-show .25s ease-out;
-    will-change: opacity;
-
-    &.note-book-content-ready {
-        display: block;
-    }
 
     > .rendered-content > *:last-child {
         margin-bottom: 0;
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 2d1c4deb22..a6fd7f0797 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -74,7 +74,11 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
 
                 <div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
                     {pageNotes?.map(childNote => (
-                        <GridNoteCard note={childNote} parentNote={note} highlightedTokens={highlightedTokens} includeArchived={includeArchived} />
+                        <GridNoteCard key={note.noteId}
+                                      note={childNote}
+                                      parentNote={note}
+                                      highlightedTokens={highlightedTokens}
+                                      includeArchived={includeArchived} />
                     ))}
                 </div>
 

From 5588042ab696984b4e8a0b0a67009a71e0f6a34b Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 19 Feb 2026 19:52:40 +0200
Subject: [PATCH 10/27] ui/grid view: refactor CSS

---
 .../collections/legacy/ListOrGridView.css     | 150 +++++++-----------
 1 file changed, 57 insertions(+), 93 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 5d9b092f5b..1705cfd9df 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -4,103 +4,20 @@
     height: 100%;
 }
 
-.note-book-card {
-    border-radius: 10px;
-    background-color: var(--accented-background-color);
-    padding: 10px 15px 15px 8px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    flex-grow: 1;
-}
-
-.note-book-card.archived {
-    opacity: 0.5;
-}
-
-.note-book-card:not(.expanded) .note-book-content {
-    padding: 10px
-}
-
-.note-book-card.expanded .note-book-content {
-    display: block;
-    min-height: 0;
-    height: 100%;
-    padding-top: 10px;
-}
-
-.note-book-content .rendered-content {
-    height: 100%;
-}
-
-.note-book-header {
-    border-bottom: 1px solid var(--main-border-color);
-    margin-bottom: 0;
-    padding-bottom: .5rem;
-    word-break: break-all;
-    flex-shrink: 0;
-}
-
-/* not-expanded title is limited to one line only */
-.note-book-card:not(.expanded) .note-book-header {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.note-book-header .rendered-note-attributes {
-    font-size: medium;
-}
-
-.note-book-header .rendered-note-attributes:before {
-    content: "\00a0\00a0";
-}
-
-.note-book-card .note-book-card {
-    border: 1px solid var(--main-border-color);
-}
-
-.note-book-content.type-image, .note-book-content.type-file, .note-book-content.type-protectedSession {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 10px;
-    flex-grow: 1;
-}
-
-.note-book-content.type-image img, .note-book-content.type-canvas svg {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-}
-
-.note-book-card.type-image .note-book-content img,
-.note-book-card.type-text .note-book-content img,
-.note-book-card.type-canvas .note-book-content img {
-    max-width: 100%;
-    max-height: 100%;
-}
-
-.note-book-header {
-    flex-grow: 0;
-}
-
 .note-list-wrapper {
     height: 100%;
     overflow: auto;
 }
 
-.nested-note-list-item,
-.note-book-card {
-    h5 {
-        display: flex;
-        align-items: center;
-        font-size: 1em;
-        font-weight: normal;
-        margin: 0;
-    }
+/* #region List view / Grid view common styles */
+
+.nested-note-list-item h5,
+.note-book-card .note-book-header {
+    display: flex;
+    align-items: center;
+    font-size: 1em;
+    font-weight: normal;
+    margin: 0;
 
     .tn-icon {
         font-size: 1.2em;
@@ -196,6 +113,27 @@
     }
 }
 
+.note-book-content {
+    height: 100%;
+
+    &.type-image, &.type-file, &.type-protectedSession {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 10px;
+        flex-grow: 1;
+    }
+
+    &.type-image img, &.type-canvas svg {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
+}
+
+/* #endregion */
+
 /* #region List view */
 
 .nested-note-list {
@@ -308,7 +246,25 @@
 /* #region Grid view */
 
 .note-book-card {
+    border-radius: 10px;
+    background-color: var(--accented-background-color);
+    padding: 10px 15px 15px 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    flex-grow: 1;
+
+    &.archived {
+        opacity: 0.5;
+    }
+
     .note-book-header {
+        margin-bottom: 0;
+        border-bottom: 1px solid var(--main-border-color);
+        padding-bottom: .5rem;
+        word-break: break-all;
+        flex-shrink: 0;
         padding: .5em 1em;
         padding-inline-end: 8px;
         border-bottom-color: var(--card-border-color);
@@ -321,6 +277,13 @@
         }
     }
 
+    &.type-image .note-book-content img,
+    &.type-text .note-book-content img,
+    &.type-canvas .note-book-content img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
 }
 
 .note-list.grid-view .note-list-container {
@@ -358,4 +321,5 @@ body.mobile .note-list.grid-view .note-book-card {
     vertical-align: middle;
     opacity: 0.5;
 }
-/* #endregion */
+
+/* #endregion */
\ No newline at end of file

From 8b5d88bf2b4f0581ce51eab0ae2438dcaf4fcd24 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 19 Feb 2026 20:05:42 +0200
Subject: [PATCH 11/27] ui/grid view: fix CSS selector

---
 .../widgets/collections/legacy/ListOrGridView.css   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 1705cfd9df..c39b5a049c 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -34,13 +34,14 @@
         margin-inline-start: 8px;
         flex-shrink: 0;
     }
+}
 
-    &.use-note-color {
-        span.tn-icon + span,
-        .tn-icon,
-        .rendered-note-attributes {
-            color: var(--custom-color);
-        }
+.note-book-card.use-note-color,
+.note-book-card.use-note-color {
+    span.tn-icon + span,
+    .tn-icon,
+    .rendered-note-attributes {
+        color: var(--custom-color);
     }
 }
 

From b4cd66db5005297349a3872e2fb49c78d0bb0735 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 19 Feb 2026 22:18:55 +0200
Subject: [PATCH 12/27] ui/grid view: fix some issues

---
 apps/client/src/stylesheets/theme-next-dark.css             | 4 ++--
 apps/client/src/stylesheets/theme-next-light.css            | 4 ++--
 .../src/widgets/collections/legacy/ListOrGridView.css       | 6 +++---
 .../src/widgets/collections/legacy/ListOrGridView.tsx       | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index 94f6254d25..dbe4701368 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -315,7 +315,7 @@
 
 #left-pane .fancytree-node.tinted,
 .nested-note-list-item.use-note-color,
-.note-book-card.use-note-color {
+.note-book-card .note-book-header.use-note-color {
     --custom-color: var(--dark-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -367,7 +367,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue,
 .nested-note-list-item.with-hue,
-.note-book-card.with-hue {
+.note-book-card .note-book-header.with-hue {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%);
     --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%);
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index a4d3eced8a..3cbf47a8e9 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -309,7 +309,7 @@
 
 #left-pane .fancytree-node.tinted,
 .nested-note-list-item.use-note-color,
-.note-book-card.use-note-color {
+.note-book-card .note-book-header.use-note-color {
     --custom-color: var(--light-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -337,7 +337,7 @@
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue,
 .nested-note-list-item.with-hue,
-.note-book-card.with-hue {
+.note-book-card .note-book-header.with-hue {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%);
     --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%);
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index c39b5a049c..f7ada94514 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -21,6 +21,7 @@
 
     .tn-icon {
         font-size: 1.2em;
+        margin-inline-end: 8px;
     }
 
     .note-book-title {
@@ -36,8 +37,8 @@
     }
 }
 
-.note-book-card.use-note-color,
-.note-book-card.use-note-color {
+.note-book-card-note-color,
+.note-book-header.use-note-color {
     span.tn-icon + span,
     .tn-icon,
     .rendered-note-attributes {
@@ -155,7 +156,6 @@
     }
 
     .tn-icon {
-        margin-inline-end: 8px;
         color: var(--note-list-view-icon-color);
     }
 
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index a6fd7f0797..54ee065fd3 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -160,14 +160,14 @@ function GridNoteCard(props: GridNoteCardProps) {
     const notePath = getNotePath(props.parentNote, props.note);
 
     return (
-        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
+        <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">
+            <h5 className={clsx("note-book-header", props.note.getColorClass())}>
                 <Icon className="note-icon" icon={props.note.getIcon()} />
                 <NoteLink className="note-book-title"
                           notePath={notePath}

From 4b098e2008afa57fd0531246e4f6df6b98e2c5ca Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 19 Feb 2026 22:20:18 +0200
Subject: [PATCH 13/27] ui/list & grid view: correct attribute name

---
 .../src/widgets/collections/legacy/ListOrGridView.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 54ee065fd3..22ade248d9 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -30,13 +30,13 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
     const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? "");
 
     return (
-        <div class="note-list list-view">
+        <div className="note-list list-view">
             <CollectionProperties
                 note={note}
                 centerChildren={<Pager {...pagination} />}
             />
 
-            { noteIds.length > 0 && <div class="note-list-wrapper">
+            { noteIds.length > 0 && <div className="note-list-wrapper">
                 {!hasCollectionProperties && <Pager {...pagination} />}
 
                 <Card className={clsx("nested-note-list", {"search-results": (noteType === "search")})}>
@@ -63,13 +63,13 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
     const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? "");
 
     return (
-        <div class="note-list grid-view">
+        <div className="note-list grid-view">
             <CollectionProperties
                 note={note}
                 centerChildren={<Pager {...pagination} />}
             />
 
-            <div class="note-list-wrapper">
+            <div className="note-list-wrapper">
                 {!hasCollectionProperties && <Pager {...pagination} />}
 
                 <div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>

From 47859d401e9f4756b244fe7b1437db55ad8b9d1e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 19 Feb 2026 22:46:01 +0200
Subject: [PATCH 14/27] ui/grid view: refactor CSS

---
 .../src/stylesheets/theme-next/base.css       | 100 ------------------
 .../collections/legacy/ListOrGridView.css     |  84 +++++++++++++--
 2 files changed, 76 insertions(+), 108 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 6a0ea97e53..e57de8cd67 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -643,106 +643,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     transform: translateY(4%);
 }
 
-/*
- * NOTE LIST
- */
-
- .note-list .note-book-card {
-    --note-list-horizontal-padding: 22px;
-    --note-list-vertical-padding: 15px;
-    background-color: var(--card-background-color);
-    border: 1px solid var(--card-border-color) !important;
-    border-radius: 12px;
-    user-select: none;
-    padding: 0;
-}
-
-:root .note-list .note-book-card:hover {
-    background-color: var(--card-background-hover-color);
-    transition: background-color 200ms ease-out;
-}
-
-:root .note-list.grid-view .note-book-card:active {
-    transform: scale(.98);
-}
-
-.note-list.list-view .note-book-card {
-    box-shadow: 0 0 3px var(--card-shadow-color);
-}
-
-.note-list.list-view .note-book-card .note-book-header .note-icon {
-    vertical-align: middle;
-}
-
-.note-list-wrapper .note-book-card a {
-    color: inherit !important;
-}
-
-.note-list-wrapper .note-book-card .note-book-content {
-    padding: 0 !important;
-    font-size: 0.8rem;
-}
-
-.note-list-wrapper .note-book-card .note-book-content .rendered-content {
-    padding: 1rem;
-}
-
-.note-list-wrapper .note-book-card .note-book-content.type-image .rendered-content,
-.note-list-wrapper .note-book-card .note-book-content.type-pdf .rendered-content {
-    padding: 0;
-}
-
-.note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis {
-    padding: 1rem !important;
-}
-
-.note-list-wrapper .note-book-card .note-book-content h1,
-.note-list-wrapper .note-book-card .note-book-content h2,
-.note-list-wrapper .note-book-card .note-book-content h3,
-.note-list-wrapper .note-book-card .note-book-content h4,
-.note-list-wrapper .note-book-card .note-book-content h5,
-.note-list-wrapper .note-book-card .note-book-content h6 {
-    font-size: 1rem;
-    color: var(--active-item-text-color);
-}
-
-.note-list-wrapper .note-book-card .note-book-content p:last-child {
-    margin-bottom: 0;
-}
-
-.note-list-wrapper .note-book-card .note-book-content.type-canvas .rendered-content,
-.note-list-wrapper .note-book-card .note-book-content.type-mindMap .rendered-content,
-.note-list-wrapper .note-book-card .note-book-content.type-code .rendered-content,
-.note-list-wrapper .note-book-card .note-book-content.type-video .rendered-content {
-    padding: 0;
-}
-
-.note-list-wrapper .note-book-card .note-book-content.type-code {
-    height: 100%;
-}
-
-.note-list-wrapper .note-book-card .note-book-content.type-code pre {
-    height: 100%;
-    padding: 1em;
-    margin-bottom: 0;
-}
-
-.note-list.grid-view .note-book-card:hover {
-    filter: contrast(105%);
-}
-
-.note-list.grid-view .ck-content {
-    line-height: 1.3;
-}
-
-.note-list.grid-view .ck-content p {
-    margin-bottom: 0.5em;
-}
-
-.note-list.grid-view .ck-content figure.image {
-    width: 25%;
-}
-
 /*
  * NOTE SEARCH SUGGESTIONS
  */
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index f7ada94514..0b88a9c284 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -2,11 +2,11 @@
     overflow: visible;
     position: relative;
     height: 100%;
-}
 
-.note-list-wrapper {
-    height: 100%;
-    overflow: auto;
+    .note-list-wrapper {
+        height: 100%;
+        overflow: auto;
+    }
 }
 
 /* #region List view / Grid view common styles */
@@ -247,14 +247,29 @@
 /* #region Grid view */
 
 .note-book-card {
-    border-radius: 10px;
-    background-color: var(--accented-background-color);
-    padding: 10px 15px 15px 8px;
-    overflow: hidden;
+    --note-list-horizontal-padding: 22px;
+    --note-list-vertical-padding: 15px;
+    
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     flex-grow: 1;
+    border: 1px solid var(--card-border-color) !important;
+    border-radius: 12px;
+    background-color: var(--card-background-color, var(--accented-background-color));
+    padding: 0;
+    overflow: hidden;
+    user-select: none;
+
+    &:hover {
+        background-color: var(--card-background-hover-color);
+        filter: contrast(105%);
+        transition: background-color 200ms ease-out;
+    }
+
+    &:active {
+        transform: scale(.98);
+    }
 
     &.archived {
         opacity: 0.5;
@@ -323,4 +338,57 @@ body.mobile .note-list.grid-view .note-book-card {
     opacity: 0.5;
 }
 
+.note-book-card .note-book-content {
+    padding: 0;
+    font-size: 0.8rem;
+    
+    .ck-content p {
+        margin-bottom: 0.5em;
+        line-height: 1.3;
+    }
+
+    .ck-content figure.image {
+        width: 25%;
+    }
+
+    .rendered-content {
+        padding: 1rem;
+    }
+
+    &.type-image .rendered-content,
+    &.type-pdf .rendered-content {
+        padding: 0;
+    }
+
+    .rendered-content.text-with-ellipsis {
+        padding: 1rem !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        font-size: 1rem;
+        color: var(--active-item-text-color);
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+
+    &.type-canvas .rendered-content,
+    &.type-mindMap .rendered-content,
+    &.type-code .rendered-content,
+    &.type-video .rendered-content {
+        padding: 0;
+    }
+
+    &.type-code {
+        height: 100%;
+    }
+
+    &.type-code pre {
+        height: 100%;
+        padding: 1em;
+        margin-bottom: 0;
+    }
+}
+
 /* #endregion */
\ No newline at end of file

From dfb5322b1af4b1e3fc36f69afa16cf0e60314727 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 19 Feb 2026 23:49:59 +0200
Subject: [PATCH 15/27] ui/list view: fix a regression

---
 apps/client/src/widgets/collections/legacy/ListOrGridView.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 0b88a9c284..33fa84e2b5 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -37,7 +37,7 @@
     }
 }
 
-.note-book-card-note-color,
+.nested-note-list-item.use-note-color,
 .note-book-header.use-note-color {
     span.tn-icon + span,
     .tn-icon,

From ad2df957c76e9968f78c1286cf6a7cf06a1344e6 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 22 Feb 2026 19:25:30 +0200
Subject: [PATCH 16/27] ui/cards: create a card frame component

---
 apps/client/src/widgets/react/Card.css | 27 ++++++++++++++++----------
 apps/client/src/widgets/react/Card.tsx | 21 +++++++++++++++++++-
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css
index cabc4a0889..b14279d2ad 100644
--- a/apps/client/src/widgets/react/Card.css
+++ b/apps/client/src/widgets/react/Card.css
@@ -1,4 +1,4 @@
-:where(.tn-card) {
+:where(.tn-card, .tn-card-frame) {
     --card-border-radius: 8px;
     --card-padding-block: 8px;
     --card-padding-inline: 16px;
@@ -6,6 +6,22 @@
     --card-nested-section-indent: 30px;
 }
 
+.tn-card-frame,
+.tn-card-section {
+    padding: var(--card-padding-block) var(--card-padding-inline);
+    border: 1px solid var(--card-border-color, var(--main-border-color));
+    background: var(--card-background-color);
+
+    &.tn-card-highlight-on-hover:hover {
+        background-color: var(--card-background-hover-color);
+        transition: background-color .2s ease-out;
+    }
+}
+
+.tn-card-frame {
+    border-radius: var(--card-border-radius);
+}
+
 .tn-card-heading {
     margin-bottom: 10px;
     font-size: .75rem;
@@ -20,10 +36,6 @@
     gap: var(--card-section-gap);
 
     .tn-card-section {
-        padding: var(--card-padding-block) var(--card-padding-inline);
-        border: 1px solid var(--card-border-color, var(--main-border-color));
-        background: var(--card-background-color);
-
         &:first-of-type {
             border-top-left-radius: var(--card-border-radius);
             border-top-right-radius: var(--card-border-radius);
@@ -38,10 +50,5 @@
             padding-left: calc(var(--card-padding-inline) + var(--card-nested-section-indent) * var(--tn-card-section-nesting-level));
             background-color: color-mix(in srgb, var(--card-background-color) calc(100% / (var(--tn-card-section-nesting-level) + 1)) , transparent);
         }
-
-        &.tn-card-section-highlight-on-hover:hover {
-            background-color: var(--card-background-hover-color);
-            transition: background-color .2s ease-out;
-        }
     }
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index 224a151504..afc09b3438 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -4,6 +4,25 @@ import { JSX } from "preact";
 import { useContext } from "preact/hooks";
 import clsx from "clsx";
 
+// #region Card Frame
+
+export interface CardFrameProps {
+    className?: string;
+    highlightOnHover?: boolean;
+    children: ComponentChildren;
+}
+
+export function CardFrame(props: CardFrameProps) {
+    return <div className={clsx("tn-card-frame", props.className, {
+                    "tn-card-highlight-on-hover": props.highlightOnHover
+                })}>
+
+        {props.children}
+    </div>;
+}
+
+// #endregion
+
 // #region Card
 
 export interface CardProps {
@@ -45,7 +64,7 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
     return <>
         <section className={clsx("tn-card-section", props.className, {
                     "tn-card-section-nested": nestingLevel > 0,
-                    "tn-card-section-highlight-on-hover": props.highlightOnHover || props.onAction
+                    "tn-card-highlight-on-hover": props.highlightOnHover || props.onAction
                  })}
                  style={{"--tn-card-section-nesting-level": (nestingLevel) ? nestingLevel : null}}
                  onClick={props.onAction}>

From e6e132e90578a6083b5dd67faefe4e42a800c38a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 22 Feb 2026 19:42:08 +0200
Subject: [PATCH 17/27] ui/card frame: add support for arbitrary HTML
 attributes and event handlers

---
 apps/client/src/widgets/react/Card.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index afc09b3438..1abd259f0c 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -1,23 +1,24 @@
 import "./Card.css";
 import { ComponentChildren, createContext } from "preact";
-import { JSX } from "preact";
+import { JSX, HTMLAttributes } from "preact";
 import { useContext } from "preact/hooks";
 import clsx from "clsx";
 
 // #region Card Frame
 
-export interface CardFrameProps {
+export interface CardFrameProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     highlightOnHover?: boolean;
     children: ComponentChildren;
 }
 
-export function CardFrame(props: CardFrameProps) {
-    return <div className={clsx("tn-card-frame", props.className, {
-                    "tn-card-highlight-on-hover": props.highlightOnHover
+export function CardFrame({className, highlightOnHover, children, ...rest}: CardFrameProps) {
+    return <div {...rest}
+                className={clsx("tn-card-frame", className, {
+                    "tn-card-highlight-on-hover": highlightOnHover
                 })}>
 
-        {props.children}
+        {children}
     </div>;
 }
 

From 47aa24d0f450fc25e2c16f789da91ad30c27ce64 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 22 Feb 2026 19:43:25 +0200
Subject: [PATCH 18/27] ui/list view: use card frame component instead of a
 custom styled element

---
 .../src/widgets/collections/legacy/ListOrGridView.css      | 7 ++-----
 .../src/widgets/collections/legacy/ListOrGridView.tsx      | 6 +++---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 33fa84e2b5..0e8eb57a4f 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -246,17 +246,14 @@
 
 /* #region Grid view */
 
-.note-book-card {
+.note-list .note-book-card {
     --note-list-horizontal-padding: 22px;
     --note-list-vertical-padding: 15px;
-    
+
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     flex-grow: 1;
-    border: 1px solid var(--card-border-color) !important;
-    border-radius: 12px;
-    background-color: var(--card-background-color, var(--accented-background-color));
     padding: 0;
     overflow: hidden;
     user-select: none;
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 22ade248d9..fc32be9957 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -1,5 +1,5 @@
 import "./ListOrGridView.css";
-import { Card, CardSection } from "../../react/Card";
+import { Card, CardFrame, CardSection } from "../../react/Card";
 
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
@@ -160,7 +160,7 @@ function GridNoteCard(props: GridNoteCardProps) {
     const notePath = getNotePath(props.parentNote, props.note);
 
     return (
-        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
+        <CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
                 "archived": props.note.isArchived
              })}
              data-href={`#${notePath}`}
@@ -182,7 +182,7 @@ function GridNoteCard(props: GridNoteCardProps) {
                          highlightedTokens={props.highlightedTokens}
                          includeArchivedNotes={props.includeArchived}
             />
-        </div>
+        </CardFrame>
     );
 }
 

From f84a4c48569f0365ebd6a0e53966d57607501a53 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 22 Feb 2026 19:48:58 +0200
Subject: [PATCH 19/27] ui/grid view: do not animate the card when pressing the
 item menu button

---
 apps/client/src/widgets/collections/legacy/ListOrGridView.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 0e8eb57a4f..c71ad07423 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -264,7 +264,7 @@
         transition: background-color 200ms ease-out;
     }
 
-    &:active {
+    &:not(:has(.note-book-item-menu:active)):active {
         transform: scale(.98);
     }
 

From a4a3d6a82c238c9d9a644ef5e6c163cd6f825220 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 09:08:54 +0200
Subject: [PATCH 20/27] ui/grid view card: restyle the button bar

---
 apps/client/src/services/content_renderer.ts  |  2 +-
 .../collections/legacy/ListOrGridView.css     | 41 ++++++++++++++++---
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/services/content_renderer.ts b/apps/client/src/services/content_renderer.ts
index aca5d3efe3..d5e6025fbd 100644
--- a/apps/client/src/services/content_renderer.ts
+++ b/apps/client/src/services/content_renderer.ts
@@ -189,7 +189,7 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
         throw new Error(`Can't recognize entity type of '${entity}'`);
     }
 
-    const $content = $('<div style="display: flex; flex-direction: column; height: 100%;">');
+    const $content = $('<div style="display: flex; flex-direction: column; height: 100%; justify-content: end;">');
 
     if (type === "pdf") {
         const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index c71ad07423..a239f87a17 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -290,13 +290,42 @@
         }
     }
 
-    &.type-image .note-book-content img,
-    &.type-text .note-book-content img,
-    &.type-canvas .note-book-content img {
-    max-width: 100%;
-    max-height: 100%;
-}
+    & .note-book-content {
+        &.type-image .note-book-content img,
+        &.type-text .note-book-content img,
+        &.type-canvas .note-book-content img {
+            max-width: 100%;
+            max-height: 100%;
+        }
 
+        .rendered-content {
+            height: 100%;
+        }
+
+        .rendered-content:has(.file-footer) {
+            padding: 0;
+        }
+
+        .file-footer {
+            display: flex;
+            gap: 8px;
+            justify-content: space-between;
+            padding: 0;
+
+            .btn.btn-primary {
+                flex: 1;
+                margin: 0;
+                box-shadow: unset;
+                background: transparent;
+                border-radius: 0;
+                padding: 8px;
+
+                &:hover {
+                    background: var(--more-accented-background-color);
+                }
+            }
+        }
+    }
 }
 
 .note-list.grid-view .note-list-container {

From eaf0c690e1cd1355826a08e0dc1bd2b034a0a0c1 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 09:19:01 +0200
Subject: [PATCH 21/27] ui/grid view card: tweak layout

---
 apps/client/src/services/content_renderer_text.ts     |  1 -
 .../src/widgets/collections/legacy/ListOrGridView.css | 11 ++++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/services/content_renderer_text.ts b/apps/client/src/services/content_renderer_text.ts
index e72f9e178b..9317d0b6e0 100644
--- a/apps/client/src/services/content_renderer_text.ts
+++ b/apps/client/src/services/content_renderer_text.ts
@@ -120,7 +120,6 @@ async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: F
         return;
     }
 
-    $renderedContent.css("padding", "10px");
     $renderedContent.addClass("text-with-ellipsis");
 
     // just load the first 10 child notes
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index a239f87a17..6d37ab4b29 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -278,7 +278,7 @@
         padding-bottom: .5rem;
         word-break: break-all;
         flex-shrink: 0;
-        padding: .5em 1em;
+        padding: .5rem 1rem;
         padding-inline-end: 8px;
         border-bottom-color: var(--card-border-color);
 
@@ -377,8 +377,9 @@ body.mobile .note-list.grid-view .note-book-card {
         width: 25%;
     }
 
-    .rendered-content {
-        padding: 1rem;
+    .rendered-content,
+    .rendered-content.text-with-ellipsis {
+        padding: .5rem 1rem 1rem 1rem;
     }
 
     &.type-image .rendered-content,
@@ -386,10 +387,6 @@ body.mobile .note-list.grid-view .note-book-card {
         padding: 0;
     }
 
-    .rendered-content.text-with-ellipsis {
-        padding: 1rem !important;
-    }
-
     h1, h2, h3, h4, h5, h6 {
         font-size: 1rem;
         color: var(--active-item-text-color);

From 538e1f0fdd3f22c7f41b1fb68d79dfcedc2f65eb Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 09:21:52 +0200
Subject: [PATCH 22/27] ui/grid view card: tweak layout

---
 apps/client/src/widgets/collections/legacy/ListOrGridView.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 6d37ab4b29..c0c85a8cd7 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -181,7 +181,8 @@
     }
 }
 
-.nested-note-list:not(.search-results) h5 {
+.nested-note-list:not(.search-results) h5,
+.note-book-card:not(.search-results) h5 {
     span.tn-icon + span,
     .note-list-attributes {
         white-space: nowrap;

From dc8c10e531712c81db02518ff1e308173f01976a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 09:34:08 +0200
Subject: [PATCH 23/27] ui/grid view card: refactor CSS

---
 .../collections/legacy/ListOrGridView.css     | 69 ++++++-------------
 1 file changed, 22 insertions(+), 47 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index c0c85a8cd7..9f7075df3b 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -7,6 +7,12 @@
         height: 100%;
         overflow: auto;
     }
+
+    &.grid-view .note-list-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
 }
 
 /* #region List view / Grid view common styles */
@@ -60,6 +66,7 @@
     }
 
     .note-path {
+        opacity: 0.5;
         margin-left: 0;
         font-size: .85em;
         line-height: .85em;
@@ -134,6 +141,10 @@
     }
 }
 
+.note-content-preview:has(.note-book-content:empty) {
+    display: none;
+}
+
 /* #endregion */
 
 /* #region List view */
@@ -159,12 +170,6 @@
         color: var(--note-list-view-icon-color);
     }
 
-    .note-path {
-        margin-left: 0.5em;
-        vertical-align: middle;
-        opacity: 0.5;
-    }
-
     .note-list-attributes {
         flex-grow: 1;
         margin-inline-start: 1em;
@@ -191,7 +196,6 @@
     }
 }
 
-
 /* Note content preview */
 .nested-note-list .note-book-content {
     outline: 1px solid var(--note-list-view-content-background);
@@ -239,10 +243,6 @@
     }
 }
 
-.note-content-preview:has(.note-book-content:empty) {
-    display: none;
-}
-
 /* #endregion */
 
 /* #region Grid view */
@@ -255,10 +255,16 @@
     flex-direction: column;
     flex-shrink: 0;
     flex-grow: 1;
+    flex-basis: 300px;
+    max-height: 300px;
     padding: 0;
     overflow: hidden;
     user-select: none;
 
+    body.mobile & {
+        flex-basis: 150px;
+    }
+
     &:hover {
         background-color: var(--card-background-hover-color);
         filter: contrast(105%);
@@ -307,6 +313,11 @@
             padding: 0;
         }
 
+        img {
+            max-height: 220px;
+            object-fit: contain;
+        }
+
         .file-footer {
             display: flex;
             gap: 8px;
@@ -329,42 +340,6 @@
     }
 }
 
-.note-list.grid-view .note-list-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-.note-list.grid-view .note-book-card {
-    flex-basis: 300px;
-    border: 1px solid transparent;
-}
-
-body.mobile .note-list.grid-view .note-book-card {
-    flex-basis: 150px;
-}
-
-.note-list.grid-view .note-book-card {
-    max-height: 300px;
-}
-
-.note-list.grid-view .note-book-card img {
-    max-height: 220px;
-    object-fit: contain;
-}
-
-.note-list.grid-view .note-book-card:hover {
-    cursor: pointer;
-    border: 1px solid var(--main-border-color);
-    background: var(--more-accented-background-color);
-}
-
-.note-list.grid-view .note-path {
-    margin-left: 0.5em;
-    vertical-align: middle;
-    opacity: 0.5;
-}
-
 .note-book-card .note-book-content {
     padding: 0;
     font-size: 0.8rem;

From d28661fee369e5118a241b04015b53489d27cd0d Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 09:55:47 +0200
Subject: [PATCH 24/27] ui/grid view card: use tinted background

---
 apps/client/src/stylesheets/theme-next-dark.css            | 7 ++++++-
 apps/client/src/stylesheets/theme-next-light.css           | 7 ++++++-
 .../src/widgets/collections/legacy/ListOrGridView.css      | 2 +-
 .../src/widgets/collections/legacy/ListOrGridView.tsx      | 4 ++--
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index dbe4701368..1705dc2b76 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -367,7 +367,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue,
 .nested-note-list-item.with-hue,
-.note-book-card .note-book-header.with-hue {
+.note-book-card.with-hue .note-book-header {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%);
     --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%);
@@ -377,3 +377,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 49.2%, 35%);
 }
+
+.note-book-card.with-hue {
+    --card-background-color: hsl(var(--custom-color-hue), 6%, 21%);
+    --card-background-hover-color: hsl(var(--custom-color-hue), 8%, 25%);
+}
\ No newline at end of file
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index 3cbf47a8e9..fe604906dc 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -337,7 +337,7 @@
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue,
 .nested-note-list-item.with-hue,
-.note-book-card .note-book-header.with-hue {
+.note-book-card.with-hue .note-book-header {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%);
     --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%);
@@ -347,3 +347,8 @@
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 60%, 90%);
 }
+
+.note-book-card.with-hue {
+    --card-background-color: hsl(var(--custom-color-hue), 21%, 94%);
+    --card-background-hover-color: hsl(var(--custom-color-hue), 21%, 87%);
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 9f7075df3b..4afc4e1e02 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -44,7 +44,7 @@
 }
 
 .nested-note-list-item.use-note-color,
-.note-book-header.use-note-color {
+.note-book-card.use-note-color .note-book-header {
     span.tn-icon + span,
     .tn-icon,
     .rendered-note-attributes {
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index fc32be9957..6ede859681 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -160,14 +160,14 @@ function GridNoteCard(props: GridNoteCardProps) {
     const notePath = getNotePath(props.parentNote, props.note);
 
     return (
-        <CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
+        <CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
                 "archived": props.note.isArchived
              })}
              data-href={`#${notePath}`}
              data-note-id={props.note.noteId}
              onClick={(e) => link.goToLink(e)}
         >
-            <h5 className={clsx("note-book-header", props.note.getColorClass())}>
+            <h5 className={clsx("note-book-header")}>
                 <Icon className="note-icon" icon={props.note.getIcon()} />
                 <NoteLink className="note-book-title"
                           notePath={notePath}

From 29df06626b6ab1b74d3cad1d4cae302c0fdef615 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 10:06:11 +0200
Subject: [PATCH 25/27] ui/grid view card: tweak CSS

---
 apps/client/src/widgets/collections/legacy/ListOrGridView.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 4afc4e1e02..8a3717e7bf 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -287,7 +287,6 @@
         flex-shrink: 0;
         padding: .5rem 1rem;
         padding-inline-end: 8px;
-        border-bottom-color: var(--card-border-color);
 
         .tn-icon + span {
             flex-grow: 1;
@@ -329,8 +328,10 @@
                 margin: 0;
                 box-shadow: unset;
                 background: transparent;
+                border: 0;
                 border-radius: 0;
                 padding: 8px;
+                color: var(--main-text-color);
 
                 &:hover {
                     background: var(--more-accented-background-color);

From 90844d5bc2eadc7100300d0ef9fcf8fe24fb2951 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 10:11:52 +0200
Subject: [PATCH 26/27] ui/grid view card: tweak style

---
 .../src/widgets/collections/legacy/ListOrGridView.css     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 8a3717e7bf..0f963f0d59 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -271,7 +271,7 @@
         transition: background-color 200ms ease-out;
     }
 
-    &:not(:has(.note-book-item-menu:active)):active {
+    &:not(:has(:is(.note-book-item-menu:active, .btn-primary:active))):active {
         transform: scale(.98);
     }
 
@@ -281,7 +281,7 @@
 
     .note-book-header {
         margin-bottom: 0;
-        border-bottom: 1px solid var(--main-border-color);
+        border-bottom: 1px solid var(--card-border-color, var(--main-border-color));
         padding-bottom: .5rem;
         word-break: break-all;
         flex-shrink: 0;
@@ -336,6 +336,10 @@
                 &:hover {
                     background: var(--more-accented-background-color);
                 }
+
+                &:active {
+                    transform: none;
+                }
             }
         }
     }

From 39e0d5b629b23f2d6f93e8d5657e2c6d8464edc0 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 10:16:04 +0200
Subject: [PATCH 27/27] ui/grid view: fix some issues

---
 .../src/widgets/collections/legacy/ListOrGridView.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 6ede859681..3fd7d2215a 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -74,7 +74,7 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
 
                 <div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
                     {pageNotes?.map(childNote => (
-                        <GridNoteCard key={note.noteId}
+                        <GridNoteCard key={childNote.noteId}
                                       note={childNote}
                                       parentNote={note}
                                       highlightedTokens={highlightedTokens}
@@ -153,7 +153,7 @@ interface GridNoteCardProps {
     note: FNote;
     parentNote: FNote;
     highlightedTokens: string[] | null | undefined;
-    includeArchived: boolean
+    includeArchived: boolean;
 }
 
 function GridNoteCard(props: GridNoteCardProps) {
@@ -265,8 +265,8 @@ function NoteChildren({ note, parentNote, highlightedTokens, currentLevel, expan
 
 function NoteMenuButton(props: {notePath: string}) {
     const openMenu = useCallback((e: TargetedMouseEvent<HTMLElement>) => {
-            linkContextMenuService.openContextMenu(props.notePath, e);
-            e.stopPropagation()
+        linkContextMenuService.openContextMenu(props.notePath, e);
+        e.stopPropagation()
     }, [props.notePath]);
 
     return  <ActionButton className="note-book-item-menu"