From 25e67f62d5f4f2d1445039eb94e7ad1b75964ad1 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 23 Feb 2026 11:10:39 +0200 Subject: [PATCH 01/12] ui/list & grid view: use background effects --- apps/client/src/widgets/note_wrapper.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/client/src/widgets/note_wrapper.ts b/apps/client/src/widgets/note_wrapper.ts index fa912e25a8..10739ae81a 100644 --- a/apps/client/src/widgets/note_wrapper.ts +++ b/apps/client/src/widgets/note_wrapper.ts @@ -94,6 +94,11 @@ export default class NoteWrapperWidget extends FlexContainer { "application/pdf" ] + const COLLECTIONS_WITH_BACKGROUND_EFFECTS = [ + "grid", + "list" + ] + if (note.isOptions()) { return true; } @@ -102,6 +107,10 @@ export default class NoteWrapperWidget extends FlexContainer { return true; } + if (note.type === "book" && COLLECTIONS_WITH_BACKGROUND_EFFECTS.includes(note.getLabelValue("viewType") ?? "")) { + return true; + } + return false; } From 00046d41459e293a73bd65732ed4129533b60a47 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 23 Feb 2026 11:15:35 +0200 Subject: [PATCH 02/12] ui/grid view: do not show the item menu for the options root --- apps/client/src/widgets/collections/legacy/ListOrGridView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx index 3fd7d2215a..86958615e7 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx @@ -175,7 +175,8 @@ function GridNoteCard(props: GridNoteCardProps) { showNotePath={props.parentNote.type === "search"} highlightedTokens={props.highlightedTokens} /> - + {(!props.note.isOptions()) && } + Date: Mon, 23 Feb 2026 11:28:35 +0200 Subject: [PATCH 03/12] ui/pager: add support for custom CSS class --- apps/client/src/widgets/collections/Pagination.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx index 26d22215cb..f42b477e88 100644 --- a/apps/client/src/widgets/collections/Pagination.tsx +++ b/apps/client/src/widgets/collections/Pagination.tsx @@ -10,6 +10,7 @@ import "./Pagination.css"; import clsx from "clsx"; interface PaginationContext { + className?: string; page: number; setPage: Dispatch>; pageNotes?: FNote[]; @@ -18,11 +19,11 @@ interface PaginationContext { totalNotes: number; } -export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit) { +export function Pager({ className, page, pageSize, setPage, pageCount, totalNotes }: Omit) { if (pageCount < 2) return; return ( -
+
Date: Mon, 23 Feb 2026 11:36:04 +0200 Subject: [PATCH 04/12] ui/list & grid view: add block margin for the bottom pager --- .../src/widgets/collections/legacy/ListOrGridView.css | 4 ++++ .../src/widgets/collections/legacy/ListOrGridView.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css index 0f963f0d59..552599ffda 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css @@ -13,6 +13,10 @@ flex-wrap: wrap; gap: 10px; } + + .note-list-bottom-pager { + margin-block: 8px; + } } /* #region List view / Grid view common styles */ diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx index 86958615e7..9f95fdd635 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx @@ -33,7 +33,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
} + centerChildren={} /> { noteIds.length > 0 &&
@@ -49,7 +49,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens } ))} - +
}
); @@ -66,7 +66,7 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
} + centerChildren={} />
@@ -82,7 +82,7 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens } ))}
- +
); From d7339ff14d35b7436754830d3fac7f8faf3d62eb Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 23 Feb 2026 11:40:02 +0200 Subject: [PATCH 05/12] ui/collection properties: apply the correct inline padding --- apps/client/src/widgets/note_bars/CollectionProperties.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/note_bars/CollectionProperties.css b/apps/client/src/widgets/note_bars/CollectionProperties.css index c8802a42a0..00232bcc2e 100644 --- a/apps/client/src/widgets/note_bars/CollectionProperties.css +++ b/apps/client/src/widgets/note_bars/CollectionProperties.css @@ -1,5 +1,5 @@ .collection-properties { - padding: 0.55em 12px; + padding: 0.55em var(--content-margin-inline); display: flex; gap: 0.25em; align-items: center; From fec929dfee038de2635972cdd157da379e0b401e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 23 Feb 2026 12:21:07 +0200 Subject: [PATCH 06/12] ui/list & grid view: refactor --- .../src/widgets/collections/Pagination.tsx | 2 +- .../collections/legacy/ListOrGridView.tsx | 103 +++++++++--------- 2 files changed, 53 insertions(+), 52 deletions(-) diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx index f42b477e88..256d3a39f9 100644 --- a/apps/client/src/widgets/collections/Pagination.tsx +++ b/apps/client/src/widgets/collections/Pagination.tsx @@ -9,7 +9,7 @@ import Button from "../react/Button"; import "./Pagination.css"; import clsx from "clsx"; -interface PaginationContext { +export interface PaginationContext { className?: string; page: number; setPage: Dispatch>; diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx index 9f95fdd635..c6f869c844 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx @@ -13,13 +13,13 @@ import { useImperativeSearchHighlighlighting, useNoteLabel, useNoteLabelBoolean, import Icon from "../../react/Icon"; import NoteLink from "../../react/NoteLink"; import { ViewModeProps } from "../interface"; -import { Pager, usePagination } from "../Pagination"; +import { Pager, usePagination, PaginationContext } from "../Pagination"; import { filterChildNotes, useFilteredNoteIds } from "./utils"; import { JSX } from "preact/jsx-runtime"; import { clsx } from "clsx"; import ActionButton from "../../react/ActionButton"; import linkContextMenuService from "../../../menus/link_context_menu"; -import { TargetedMouseEvent } from "preact"; +import { ComponentChildren, TargetedMouseEvent } from "preact"; export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) { const expandDepth = useExpansionDepth(note); @@ -27,32 +27,18 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens } const { pageNotes, ...pagination } = usePagination(note, noteIds); const [ includeArchived ] = useNoteLabelBoolean(note, "includeArchived"); const noteType = useNoteProperty(note, "type"); - const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? ""); - return ( -
- } - /> - - { noteIds.length > 0 &&
- {!hasCollectionProperties && } - - - {pageNotes?.map(childNote => ( - - ))} - - - -
} -
- ); + return + + {pageNotes?.map(childNote => ( + + ))} + + ; } export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) { @@ -60,32 +46,47 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens } const { pageNotes, ...pagination } = usePagination(note, noteIds); const [ includeArchived ] = useNoteLabelBoolean(note, "includeArchived"); const noteType = useNoteProperty(note, "type"); - const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? ""); - return ( -
- } - /> - -
- {!hasCollectionProperties && } - -
- {pageNotes?.map(childNote => ( - - ))} -
- - -
+ return +
+ {pageNotes?.map(childNote => ( + + ))}
- ); + +} + +interface NoteListProps { + note: FNote, + viewMode: "list" | "grid-view", + noteIds: string[], + pagination: PaginationContext, + children: ComponentChildren +} + +function NoteList(props: NoteListProps) { + const noteType = useNoteProperty(props.note, "type"); + const hasCollectionProperties = ["book", "search"].includes(noteType ?? ""); + + return
+ } + /> + + {props.noteIds.length > 0 &&
+ {!hasCollectionProperties && } + + {props.children} + + +
} + +
} function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expandDepth, includeArchived }: { From 19d2f02694f69e2368f0460247c23ec26b13c361 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 23 Feb 2026 12:29:28 +0200 Subject: [PATCH 07/12] ui/list & grid view: fix some issues --- apps/client/src/widgets/collections/legacy/ListOrGridView.tsx | 2 +- apps/client/src/widgets/note_wrapper.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx index c6f869c844..ce93e507a6 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx @@ -176,7 +176,7 @@ function GridNoteCard(props: GridNoteCardProps) { showNotePath={props.parentNote.type === "search"} highlightedTokens={props.highlightedTokens} /> - {(!props.note.isOptions()) && } + {!props.note.isOptions() && } { return true; } - if (note.type === "book" && COLLECTIONS_WITH_BACKGROUND_EFFECTS.includes(note.getLabelValue("viewType") ?? "")) { + if (note.type === "book" && COLLECTIONS_WITH_BACKGROUND_EFFECTS.includes(note.getLabelValue("viewType") ?? "none")) { return true; } From f4b0f810bd20f657c02498651ad001092904978b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 24 Feb 2026 09:24:55 +0200 Subject: [PATCH 08/12] ui/list & grid view: increase content entrance transition duration --- apps/client/src/widgets/collections/legacy/ListOrGridView.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css index 552599ffda..0149f1c604 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css @@ -111,7 +111,7 @@ .nested-note-list .note-book-content, .note-list-container .note-book-content { display: none; - animation: note-preview-show .25s ease-out; + animation: note-preview-show .35s ease-out; will-change: opacity; &.note-book-content-ready { From 87ee1185f21fba8513cfbcab06d6941345ae0044 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 24 Feb 2026 09:33:28 +0200 Subject: [PATCH 09/12] ui/list & grid view: add bottom margin if the pager is not visible --- apps/client/src/widgets/collections/legacy/ListOrGridView.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css index 0149f1c604..44718439c0 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css @@ -17,6 +17,10 @@ .note-list-bottom-pager { margin-block: 8px; } + + &:not(:has(.note-list-bottom-pager)) { + margin-bottom: 48px; + } } /* #region List view / Grid view common styles */ From d40191257c5c834253698976229d6d419d658dd0 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 24 Feb 2026 09:53:35 +0200 Subject: [PATCH 10/12] ui/grid view: tweak the height of video previews --- apps/client/src/widgets/collections/legacy/ListOrGridView.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css index 44718439c0..bb3a09ecc9 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css @@ -376,6 +376,10 @@ padding: 0; } + &.type-video video { + max-height: 200px; + } + h1, h2, h3, h4, h5, h6 { font-size: 1rem; color: var(--active-item-text-color); From 535054b2d254f01c55fb9c43227087e046c9038d Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 24 Feb 2026 10:07:26 +0200 Subject: [PATCH 11/12] style/card: fix hover color on nested items --- apps/client/src/widgets/react/Card.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css index b14279d2ad..0aecb56dbd 100644 --- a/apps/client/src/widgets/react/Card.css +++ b/apps/client/src/widgets/react/Card.css @@ -7,7 +7,7 @@ } .tn-card-frame, -.tn-card-section { +.tn-card-body .tn-card-section { padding: var(--card-padding-block) var(--card-padding-inline); border: 1px solid var(--card-border-color, var(--main-border-color)); background: var(--card-background-color); From 57e888911dec47b7f96b83742b52769b6fa6f153 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 24 Feb 2026 10:15:51 +0200 Subject: [PATCH 12/12] ui/list & grid view: refactor --- .../src/widgets/collections/legacy/ListOrGridView.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx index ce93e507a6..1bb7b71d65 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx @@ -28,7 +28,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens } const [ includeArchived ] = useNoteLabelBoolean(note, "includeArchived"); const noteType = useNoteProperty(note, "type"); - return + return {pageNotes?.map(childNote => ( + return
}