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

@@ -0,0 +1,37 @@
+.tn-card {
+    --card-border-radius: 8px;
+    --card-padding: 8px 16px;
+    --card-section-gap: 3px;
+    --card-nested-section-indent: 30px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--card-section-gap);
+
+    .tn-card-section {
+        padding: var(--card-padding);
+        border: 1px solid var(--card-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);
+        }
+
+        &:last-of-type {
+            border-bottom-left-radius: var(--card-border-radius);
+            border-bottom-right-radius: var(--card-border-radius);
+        }
+
+        &.tn-card-section-nested {
+            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);
+        }
+
+        &.tn-action:hover {
+            background-color: var(--card-background-hover-color);
+            transition: background-color .2s ease-out;
+        }
+
+    }
+}

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

@@ -0,0 +1,51 @@
+import "./Card.css";
+import { ComponentChildren, createContext } from "preact";
+import { JSX } from "preact";
+import { useContext } from "preact/hooks";
+import clsx from "clsx";
+
+interface CardProps {
+    className?: string;
+}
+
+export function Card(props: {children: ComponentChildren} & CardProps) {
+    return <div className={clsx(["tn-card", props.className])}>
+        {props.children}
+    </div>;
+}
+
+interface CardSectionProps {
+    className?: string;
+    subSections?: JSX.Element | JSX.Element[];
+    childrenVisible?: boolean;
+    hasAction?: boolean;
+    onAction?: () => void;
+}
+
+export function CardSection(props: {children: ComponentChildren} & CardSectionProps) {
+    const parentContext = useContext(CardSectionContext);
+    const nestingLevel = (parentContext && parentContext.nestingLevel + 1) ?? 0;
+
+    return <>
+        <section className={clsx(["tn-card-section", {
+                    "tn-card-section-nested": nestingLevel > 0,
+                    "tn-action": props?.hasAction}
+                 ], props.className)}
+                 style={"--tn-card-section-nesting-level: " + nestingLevel}
+                 onClick={() => {props.onAction?.()}}>
+            {props.children}
+        </section>
+
+        {props?.childrenVisible &&
+            <CardSectionContext.Provider value={{nestingLevel}}>
+                {props.subSections}
+            </CardSectionContext.Provider>
+        }
+    </>;
+}
+
+interface CardSectionContextType {
+    nestingLevel: number;
+}
+
+export const CardSectionContext = createContext<CardSectionContextType | undefined>(undefined);