From fec929dfee038de2635972cdd157da379e0b401e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 12:21:07 +0200
Subject: [PATCH] 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<StateUpdater<number>>;
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 (
-        <div className="note-list list-view">
-            <CollectionProperties
-                note={note}
-                centerChildren={<Pager className="note-list-top-pager" {...pagination} />}
-            />
-
-            { noteIds.length > 0 && <div className="note-list-wrapper">
-                {!hasCollectionProperties && <Pager {...pagination} />}
-
-                <Card className={clsx("nested-note-list", {"search-results": (noteType === "search")})}>
-                    {pageNotes?.map(childNote => (
-                        <ListNoteCard
-                            key={childNote.noteId}
-                            note={childNote} parentNote={note}
-                            expandDepth={expandDepth} highlightedTokens={highlightedTokens}
-                            currentLevel={1} includeArchived={includeArchived} />
-                    ))}
-                </Card>
-
-                <Pager className="note-list-bottom-pager" {...pagination} />
-            </div>}
-        </div>
-    );
+    return <NoteList note={note} viewMode="list" noteIds={noteIds} pagination={pagination}>
+        <Card className={clsx("nested-note-list", {"search-results": (noteType === "search")})}>
+            {pageNotes?.map(childNote => (
+                <ListNoteCard
+                    key={childNote.noteId}
+                    note={childNote} parentNote={note}
+                    expandDepth={expandDepth} highlightedTokens={highlightedTokens}
+                    currentLevel={1} includeArchived={includeArchived} />
+            ))}
+        </Card>
+    </NoteList>;
 }
 
 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 (
-        <div className="note-list grid-view">
-            <CollectionProperties
-                note={note}
-                centerChildren={<Pager className="note-list-top-pager" {...pagination} />}
-            />
-
-            <div className="note-list-wrapper">
-                {!hasCollectionProperties && <Pager {...pagination} />}
-
-                <div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
-                    {pageNotes?.map(childNote => (
-                        <GridNoteCard key={childNote.noteId}
-                                      note={childNote}
-                                      parentNote={note}
-                                      highlightedTokens={highlightedTokens}
-                                      includeArchived={includeArchived} />
-                    ))}
-                </div>
-
-                <Pager className="note-list-bottom-pager" {...pagination} />
-            </div>
+    return <NoteList note={note} viewMode="grid-view" noteIds={noteIds} pagination={pagination}>
+        <div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
+            {pageNotes?.map(childNote => (
+                <GridNoteCard key={childNote.noteId}
+                                note={childNote}
+                                parentNote={note}
+                                highlightedTokens={highlightedTokens}
+                                includeArchived={includeArchived} />
+            ))}
         </div>
-    );
+    </NoteList>
+}
+
+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 <div className={"note-list " + props.viewMode}>
+        <CollectionProperties
+            note={props.note}
+            centerChildren={<Pager className="note-list-top-pager" {...props.pagination} />}
+        />
+
+        {props.noteIds.length > 0 && <div className="note-list-wrapper">
+            {!hasCollectionProperties && <Pager {...props.pagination} />}
+            
+            {props.children}
+
+            <Pager className="note-list-bottom-pager" {...props.pagination} />
+        </div>}
+
+    </div>
 }
 
 function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expandDepth, includeArchived }: {