client/list view: add support for tinted notes

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%);

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%);

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 {

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()} />