client/list view: improve appearance

2026-02-21 05:04:24 +01:00 · 2026-02-14 16:22:13 +02:00 · 2026-02-14 16:22:13 +02:00 · fe4a11c5ad
commit fe4a11c5ad
parent 218343ca14
4 changed files with 125 additions and 52 deletions
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@ -100,50 +100,111 @@
    overflow: auto;
 }

-.note-expander {
-    font-size: x-large;
-    cursor: pointer;
-    opacity: .65;
-}
-
 .note-list-pager {
    text-align: center;
 }

-.note-list.list-view .note-path {
-    margin-left: 0.5em;
-    vertical-align: middle;
-    opacity: 0.5;
+@keyframes note-preview-show {
+    from {
+        opacity: 0;
+    } to {
+        opacity: 1;
+    }
 }

-:root .list-view-card {
+.nested-note-list {
    --card-nested-section-indent: 40px;
-}

-.note-list h5 {
-    display: flex;
-    align-items: center;
-    font-size: 1em;
-    margin: 0;
+    h5 {
+        display: flex;
+        align-items: center;
+        font-size: 1em;
+        font-weight: normal;
+        margin: 0;

-    .tn-icon {
-        color: var(--left-pane-icon-color);
-        margin-inline-end: 8px;
-        font-size: 1.2em;
+        .note-expander {
+            font-size: x-large;
+            cursor: pointer;
+            opacity: .65;
+            margin-inline-end: 4px;
+        }
+
+        .tn-icon {
+            color: var(--left-pane-icon-color);
+            margin-inline-end: 8px;
+            font-size: 1.2em;
+        }
+
+        .note-book-title {
+            color: inherit;
+            font-weight: normal;
+        }
+
+        .note-path {
+            margin-left: 0.5em;
+            vertical-align: middle;
+            opacity: 0.5;
+            order: -1;
+        }
+
+        .note-list-attributes {
+            flex-grow: 1;
+            text-align: right;
+            font-size: .75em;
+            opacity: .75;
+        }
    }

-    .note-book-title {
-        color: inherit;
-    }
+    .note-book-content {
+        --background: rgba(0, 0, 0, .2);
+        outline: 1px solid var(--background);
+        border-radius: 8px;
+        background-color: var(--background);
+        overflow: hidden;
+        user-select: text;
+        animation: note-preview-show .25s ease-out;
+        will-change: opacity;

-    .note-list-attributes {
-        flex-grow: 1;
-        text-align: right;
-        font-size: .75em;
-        opacity: .75;
+        > .rendered-content > *:last-child {
+            margin-bottom: 0;
+        }
+
+        &.type-text {
+            padding: 8px 24px;
+
+            .ck-content > *:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        &.type-protectedSession {
+            padding: 20px;
+        }
+
+        &.type-image {
+            padding: 0;
+        }
+
+        &.type-pdf {
+            iframe {
+                height: 50vh;
+            }
+
+            .file-footer {
+                padding: 8px;
+            }
+        }
+
+        &.type-webView {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            min-height: 50vh;
+        }
    }
 }

+
 .note-content-preview:has(.note-book-content:empty) {
    display: none;
 }
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@ -15,6 +15,7 @@ import NoteLink from "../../react/NoteLink";
 import { ViewModeProps } from "../interface";
 import { Pager, usePagination } from "../Pagination";
 import { filterChildNotes, useFilteredNoteIds } from "./utils";
+import { JSX } from "preact/jsx-runtime";

 export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
    const expandDepth = useExpansionDepth(note);
@ -34,7 +35,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
            { noteIds.length > 0 && <div class="note-list-wrapper">
                {!hasCollectionProperties && <Pager {...pagination} />}

-                <Card className="list-view-card">
+                <Card className="nested-note-list">
                    {pageNotes?.map(childNote => (
                        <ListNoteCard
                            key={childNote.noteId}
@ -94,32 +95,42 @@ 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 && <>
+    let subSections: JSX.Element | undefined = undefined;
+    if (isExpanded) {
+        subSections = <>
            <CardSection className="note-content-preview">
-                <NoteContent note={note} highlightedTokens={highlightedTokens} noChildrenList includeArchivedNotes={includeArchived} />
+                <NoteContent note={note}
+                             highlightedTokens={highlightedTokens}
+                             noChildrenList
+                             includeArchivedNotes={includeArchived} />
            </CardSection>
-            <NoteChildren note={note} parentNote={parentNote} highlightedTokens={highlightedTokens} currentLevel={currentLevel} expandDepth={expandDepth} includeArchived={includeArchived} />
-        </>}
-    </>

+            <NoteChildren note={note}
+                          parentNote={parentNote}
+                          highlightedTokens={highlightedTokens}
+                          currentLevel={currentLevel}
+                          expandDepth={expandDepth}
+                          includeArchived={includeArchived} />
+        </>
+    }
+            
    return (
        <CardSection
-            className={`no-tooltip-preview ${isExpanded ? "expanded" : ""} ${note.isArchived ? "archived" : ""}`}
-            subSections={children}
+            className={`nested-note-list-item no-tooltip-preview ${isExpanded ? "expanded" : ""} ${note.isArchived ? "archived" : ""}`}
+            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"}`}
-                    onClick={(e) => {setExpanded(!isExpanded); e.stopPropagation();}}
-                />
-
+                <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`} />
                <Icon className="note-icon" icon={note.getIcon()} />
-                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={parentNote.type === "search"} highlightedTokens={highlightedTokens} />
+                <NoteLink className="note-book-title"
+                          notePath={notePath}
+                          noPreview
+                          showNotePath={parentNote.type === "search"}
+                          highlightedTokens={highlightedTokens} />
                <NoteAttributes note={note} />
            </h5>
        </CardSection>
@ -198,7 +209,8 @@ export function NoteContent({ note, trim, noChildrenList, highlightedTokens, inc
            });
    }, [ note, highlightedTokens ]);

-    return <div ref={contentRef} className="note-book-content" />;
+    return <div ref={contentRef} className="note-book-content">
+        </div>;
 }

 function NoteChildren({ note, parentNote, highlightedTokens, currentLevel, expandDepth, includeArchived }: {
--- a/apps/client/src/widgets/react/Card.css
+++ b/apps/client/src/widgets/react/Card.css
@ -24,7 +24,7 @@
        }

        &.tn-card-section-nested {
-            padding-left: calc(8px + (var(--card-nested-section-indent) * var(--tn-card-section-nesting-level)));
+            padding-left: calc(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);
        }

--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@ -27,16 +27,16 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
    const nestingLevel = (parentContext && parentContext.nestingLevel + 1) ?? 0;

    return <>
-        <section className={clsx(["tn-card-section", {
+        <section className={clsx("tn-card-section", props.className, {
                    "tn-card-section-nested": nestingLevel > 0,
-                    "tn-action": props?.hasAction}
-                 ], props.className)}
-                 style={"--tn-card-section-nesting-level: " + nestingLevel}
-                 onClick={() => {props.onAction?.()}}>
+                    "tn-action": props.hasAction
+                 })}
+                 style={{"--tn-card-section-nesting-level": nestingLevel}}
+                 onClick={props.onAction}>
            {props.children}
        </section>

-        {props?.childrenVisible &&
+        {props.childrenVisible &&
            <CardSectionContext.Provider value={{nestingLevel}}>
                {props.subSections}
            </CardSectionContext.Provider>