From 6ffbe196674ddcbb1e86aaa06530932b12c1f8a6 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 18:07:35 +0200
Subject: [PATCH] client/list view: add support for tinted notes

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

diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index eeac40a1fe..43fdeda2d7 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -312,7 +312,8 @@
  * Dark color scheme tweaks
  */
 
-#left-pane .fancytree-node.tinted {
+#left-pane .fancytree-node.tinted,
+.nested-note-list-item.use-note-color {
     --custom-color: var(--dark-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -351,7 +352,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 }
 
 .note-split.with-hue,
-.quick-edit-dialog-wrapper.with-hue {
+.quick-edit-dialog-wrapper.with-hue,
+.nested-note-list-item.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 70883f2368..d9f267d6f3 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -306,7 +306,8 @@
     --calendar-coll-today-background-color: #00000006;
 }
 
-#left-pane .fancytree-node.tinted {
+#left-pane .fancytree-node.tinted,
+.nested-note-list-item.use-note-color {
     --custom-color: var(--light-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -322,7 +323,8 @@
 }
 
 .note-split.with-hue,
-.quick-edit-dialog-wrapper.with-hue {
+.quick-edit-dialog-wrapper.with-hue,
+.nested-note-list-item.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 4cee5d215b..7e36c445f0 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -165,6 +165,14 @@
     }
 }
 
+.nested-note-list-item.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 {
     span.tn-icon + span,
     .note-list-attributes {
@@ -203,9 +211,9 @@
         height: 1.75em;
         margin-inline-end: 12px;
         border-radius: 50%;
-        background: var(--note-list-view-large-icon-background);
+        background: var(--note-icon-custom-background-color, var(--note-list-view-large-icon-background));
         font-size: 1.2em;
-        color: var(--note-list-view-large-icon-color);
+        color: var(--note-icon-custom-color, var(--note-list-view-large-icon-color));
     }
 
     h5 .ck-find-result {
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index be244cbbe7..3f92f8ed62 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -116,16 +116,19 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
                           includeArchived={includeArchived} />
         </>
     }
-            
+    
     return (
         <CardSection
-            className={`nested-note-list-item no-tooltip-preview ${isExpanded ? "expanded" : ""} ${note.isArchived ? "archived" : ""}`}
+            className={clsx("nested-note-list-item", "no-tooltip-preview", note.getColorClass(), {
+                "expanded": isExpanded,
+                "archived": note.isArchived
+            })}
             subSections={subSections}
             childrenVisible={isExpanded}
             hasAction
             data-note-id={note.noteId}
         >
-            <h5 className="">
+            <h5>
                 <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`} 
                       onClick={() => setExpanded(!isExpanded)}/>
                 <Icon className="note-icon" icon={note.getIcon()} />