client/list view: add an alternate style for search results

apps/client/src/widgets/collections/legacy/ListOrGridView.css

@@ -209,6 +209,48 @@
     }
 }
 
+.nested-note-list.search-results {
+    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;
+        justify-content: center;
+        align-items: center;
+        margin-inline-end: 12px;
+        background: rgb(88, 88, 88);
+        border-radius: 50%;
+        width: 1.75em;
+        height: 1.75em;
+        font-size: 1.2em;
+    }
+
+    .note-book-title {
+        --link-hover-background: transparent;
+    }
+
+    .ck-find-result {
+        background: transparent;
+        color: var(--quick-search-result-highlight-color);
+        font-weight: 600;
+        text-decoration: underline;
+    }
+}
 
 .note-content-preview:has(.note-book-content:empty) {
     display: none;

apps/client/src/widgets/collections/legacy/ListOrGridView.tsx

@@ -36,7 +36,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
             { noteIds.length > 0 && <div class="note-list-wrapper">
                 {!hasCollectionProperties && <Pager {...pagination} />}
 
-                <Card className="nested-note-list">
+                <Card className={clsx("nested-note-list", {"search-results": (noteType === "search")})}>
                     {pageNotes?.map(childNote => (
                         <ListNoteCard
                             key={childNote.noteId}
@@ -121,11 +121,11 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
             subSections={subSections}
             childrenVisible={isExpanded}
             hasAction
-            onAction={() => setExpanded(!isExpanded)}
             data-note-id={note.noteId}
         >
             <h5 className="">
-                <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`} />
+                <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`} 
+                      onClick={() => setExpanded(!isExpanded)}/>
                 <Icon className="note-icon" icon={note.getIcon()} />
                 <NoteLink className="note-book-title"
                           notePath={notePath}