client/list view: use a sectioned card to display the list items

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

@@ -102,9 +102,8 @@
 
 .note-expander {
     font-size: x-large;
-    position: relative;
-    top: 3px;
     cursor: pointer;
+    opacity: .65;
 }
 
 .note-list-pager {
@@ -117,6 +116,38 @@
     opacity: 0.5;
 }
 
+:root .list-view-card {
+    --card-nested-section-indent: 40px;
+}
+
+.note-list h5 {
+    display: flex;
+    align-items: center;
+    font-size: 1em;
+    margin: 0;
+
+    .tn-icon {
+        color: var(--left-pane-icon-color);
+        margin-inline-end: 8px;
+        font-size: 1.2em;
+    }
+
+    .note-book-title {
+        color: inherit;
+    }
+
+    .note-list-attributes {
+        flex-grow: 1;
+        text-align: right;
+        font-size: .75em;
+        opacity: .75;
+    }
+}
+
+.note-content-preview:has(.note-book-content:empty) {
+    display: none;
+}
+
 /* #region Grid view */
 .note-list.grid-view .note-list-container {
     display: flex;

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

@@ -1,4 +1,5 @@
 import "./ListOrGridView.css";
+import { Card, CardSection } from "../../react/Card";
 
 import { useEffect, useRef, useState } from "preact/hooks";
 
@@ -33,7 +34,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
             { noteIds.length > 0 && <div class="note-list-wrapper">
                 {!hasCollectionProperties && <Pager {...pagination} />}
 
-                <div class="note-list-container use-tn-links">
+                <Card className="list-view-card">
                     {pageNotes?.map(childNote => (
                         <ListNoteCard
                             key={childNote.noteId}
@@ -41,7 +42,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
                             expandDepth={expandDepth} highlightedTokens={highlightedTokens}
                             currentLevel={1} includeArchived={includeArchived} />
                     ))}
-                </div>
+                </Card>
 
                 <Pager {...pagination} />
             </div>}
@@ -93,27 +94,35 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
     // Reset expand state if switching to another note, or if user manually toggled expansion state.
     useEffect(() => setExpanded(currentLevel <= expandDepth), [ note, currentLevel, expandDepth ]);
 
+    const children = <>
+        {isExpanded && <>
+            <CardSection className="note-content-preview">
+                <NoteContent note={note} highlightedTokens={highlightedTokens} noChildrenList includeArchivedNotes={includeArchived} />
+            </CardSection>
+            <NoteChildren note={note} parentNote={parentNote} highlightedTokens={highlightedTokens} currentLevel={currentLevel} expandDepth={expandDepth} includeArchived={includeArchived} />
+        </>}
+    </>
+
     return (
-        <div
-            className={`note-book-card no-tooltip-preview ${isExpanded ? "expanded" : ""} ${note.isArchived ? "archived" : ""}`}
+        <CardSection
+            className={`no-tooltip-preview ${isExpanded ? "expanded" : ""} ${note.isArchived ? "archived" : ""}`}
+            subSections={children}
+            childrenVisible={isExpanded}
+            hasAction
+            onAction={() => setExpanded(!isExpanded)}
             data-note-id={note.noteId}
         >
-            <h5 className="note-book-header">
+            <h5 className="">
                 <span
                     className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`}
-                    onClick={() => setExpanded(!isExpanded)}
+                    onClick={(e) => {setExpanded(!isExpanded); e.stopPropagation();}}
                 />
 
                 <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>
-
-            {isExpanded && <>
-                <NoteContent note={note} highlightedTokens={highlightedTokens} noChildrenList includeArchivedNotes={includeArchived} />
-                <NoteChildren note={note} parentNote={parentNote} highlightedTokens={highlightedTokens} currentLevel={currentLevel} expandDepth={expandDepth} includeArchived={includeArchived} />
-            </>}
-        </div>
+        </CardSection>
     );
 }
 

apps/client/src/widgets/react/Card.css

@@ -2,6 +2,7 @@
     --card-border-radius: 8px;
     --card-padding: 8px 16px;
     --card-section-gap: 3px;
+    --card-nested-section-indent: 30px;
 
     display: flex;
     flex-direction: column;
@@ -23,7 +24,7 @@
         }
 
         &.tn-card-section-nested {
-            padding-left: calc(30px * var(--tn-card-section-nesting-level));
+            padding-left: calc(8px + (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);
         }