From feb3f8d4442cc35893d97dec88f66842ada4cd1d Mon Sep 17 00:00:00 2001
From: Local Admin <root@localhost>
Date: Sun, 25 Jan 2026 18:59:19 +0000
Subject: [PATCH 1/3] Add collapsible pinned section on Home

---
 .../PagedMemoList/PagedMemoList.tsx           | 70 +++++++++++++++++--
 web/src/pages/Home.tsx                        |  1 +
 2 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/web/src/components/PagedMemoList/PagedMemoList.tsx b/web/src/components/PagedMemoList/PagedMemoList.tsx
index 518635094..5dcc31892 100644
--- a/web/src/components/PagedMemoList/PagedMemoList.tsx
+++ b/web/src/components/PagedMemoList/PagedMemoList.tsx
@@ -1,5 +1,5 @@
 import { useQueryClient } from "@tanstack/react-query";
-import { ArrowUpIcon } from "lucide-react";
+import { ArrowUpIcon, ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { matchPath } from "react-router-dom";
 import { Button } from "@/components/ui/button";
@@ -28,6 +28,7 @@ interface Props {
   pageSize?: number;
   showCreator?: boolean;
   enabled?: boolean;
+  collapsiblePinned?: boolean;
 }
 
 function useAutoFetchWhenNotScrollable({
@@ -104,6 +105,29 @@ const PagedMemoList = (props: Props) => {
 
   // Apply custom sorting if provided, otherwise use memos directly
   const sortedMemoList = useMemo(() => (props.listSort ? props.listSort(memos) : memos), [memos, props.listSort]);
+  const enablePinnedSection = props.collapsiblePinned === true;
+  const pinnedStorageKey = "memos.ui.pinsCollapsed";
+
+  const [isPinnedCollapsed, setIsPinnedCollapsed] = useState(() => {
+    if (!enablePinnedSection) return false;
+    if (typeof window === "undefined") return false;
+    return window.localStorage.getItem(pinnedStorageKey) === "true";
+  });
+
+  const pinnedMemos = useMemo(() => {
+    if (!enablePinnedSection) return [];
+    return sortedMemoList.filter((memo) => memo.pinned);
+  }, [enablePinnedSection, sortedMemoList]);
+
+  const unpinnedMemos = useMemo(() => {
+    if (!enablePinnedSection) return sortedMemoList;
+    return sortedMemoList.filter((memo) => !memo.pinned);
+  }, [enablePinnedSection, sortedMemoList]);
+
+  useEffect(() => {
+    if (!enablePinnedSection || typeof window === "undefined") return;
+    window.localStorage.setItem(pinnedStorageKey, String(isPinnedCollapsed));
+  }, [enablePinnedSection, isPinnedCollapsed]);
 
   // Prefetch creators when new data arrives to improve performance
   useEffect(() => {
@@ -155,19 +179,51 @@ const PagedMemoList = (props: Props) => {
         <Skeleton showCreator={props.showCreator} count={4} />
       ) : (
         <>
-          <MasonryView
-            memoList={sortedMemoList}
-            renderer={props.renderer}
-            prefixElement={
+          {(() => {
+            const hasPinned = pinnedMemos.length > 0;
+            const pinnedToggle = enablePinnedSection && hasPinned && (
+              <button
+                type="button"
+                onClick={() => setIsPinnedCollapsed((prev) => !prev)}
+                className="w-full mt-1 mb-2 flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                aria-expanded={!isPinnedCollapsed}
+              >
+                {isPinnedCollapsed ? <ChevronRightIcon className="w-4 h-4" /> : <ChevronDownIcon className="w-4 h-4" />}
+                <span className="font-medium">
+                  {t("common.pinned")} ({pinnedMemos.length})
+                </span>
+                <span className="text-xs opacity-70">{isPinnedCollapsed ? t("common.expand") : t("common.collapse")}</span>
+              </button>
+            );
+
+            const prefixElement = (
               <>
                 {showMemoEditor ? (
                   <MemoEditor className="mb-2" cacheKey="home-memo-editor" placeholder={t("editor.any-thoughts")} />
                 ) : undefined}
                 <MemoFilters />
+                {pinnedToggle}
               </>
+            );
+
+            if (!enablePinnedSection) {
+              return <MasonryView memoList={sortedMemoList} renderer={props.renderer} prefixElement={prefixElement} listMode={layout === "LIST"} />;
             }
-            listMode={layout === "LIST"}
-          />
+
+            return (
+              <>
+                <MasonryView
+                  memoList={isPinnedCollapsed ? [] : pinnedMemos}
+                  renderer={props.renderer}
+                  prefixElement={prefixElement}
+                  listMode={layout === "LIST"}
+                />
+                <div className={hasPinned ? "mt-2" : ""}>
+                  <MasonryView memoList={unpinnedMemos} renderer={props.renderer} listMode={layout === "LIST"} />
+                </div>
+              </>
+            );
+          })()}
 
           {/* Loading indicator for pagination */}
           {isFetchingNextPage && <Skeleton showCreator={props.showCreator} count={2} />}
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 417a0cd10..c055b6dd4 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -28,6 +28,7 @@ const Home = () => {
         listSort={listSort}
         orderBy={orderBy}
         filter={memoFilter}
+        collapsiblePinned
         enabled={isInitialized && !!user} // Wait for contexts to stabilize before fetching
       />
     </div>

From e14f88232ace0af643726dbbf82c3b46dbdf6b77 Mon Sep 17 00:00:00 2001
From: Local Admin <root@localhost>
Date: Sun, 25 Jan 2026 19:49:31 +0000
Subject: [PATCH 2/3] Add pinned section dividers

---
 .../PagedMemoList/PagedMemoList.tsx           | 44 ++++++++++++++-----
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/web/src/components/PagedMemoList/PagedMemoList.tsx b/web/src/components/PagedMemoList/PagedMemoList.tsx
index 5dcc31892..25fabd14a 100644
--- a/web/src/components/PagedMemoList/PagedMemoList.tsx
+++ b/web/src/components/PagedMemoList/PagedMemoList.tsx
@@ -182,18 +182,21 @@ const PagedMemoList = (props: Props) => {
           {(() => {
             const hasPinned = pinnedMemos.length > 0;
             const pinnedToggle = enablePinnedSection && hasPinned && (
-              <button
-                type="button"
-                onClick={() => setIsPinnedCollapsed((prev) => !prev)}
-                className="w-full mt-1 mb-2 flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
-                aria-expanded={!isPinnedCollapsed}
-              >
-                {isPinnedCollapsed ? <ChevronRightIcon className="w-4 h-4" /> : <ChevronDownIcon className="w-4 h-4" />}
-                <span className="font-medium">
-                  {t("common.pinned")} ({pinnedMemos.length})
-                </span>
-                <span className="text-xs opacity-70">{isPinnedCollapsed ? t("common.expand") : t("common.collapse")}</span>
-              </button>
+              <div className="w-full mt-1 mb-2 flex items-center gap-3 text-sm text-muted-foreground">
+                <button
+                  type="button"
+                  onClick={() => setIsPinnedCollapsed((prev) => !prev)}
+                  className="flex items-center gap-2 hover:text-foreground transition-colors"
+                  aria-expanded={!isPinnedCollapsed}
+                >
+                  {isPinnedCollapsed ? <ChevronRightIcon className="w-4 h-4" /> : <ChevronDownIcon className="w-4 h-4" />}
+                  <span className="font-medium">
+                    {t("common.pinned")} ({pinnedMemos.length})
+                  </span>
+                  <span className="text-xs opacity-70">{isPinnedCollapsed ? t("common.expand") : t("common.collapse")}</span>
+                </button>
+                <div className="h-px flex-1 bg-border/60" aria-hidden="true" />
+              </div>
             );
 
             const prefixElement = (
@@ -210,6 +213,22 @@ const PagedMemoList = (props: Props) => {
               return <MasonryView memoList={sortedMemoList} renderer={props.renderer} prefixElement={prefixElement} listMode={layout === "LIST"} />;
             }
 
+            if (layout === "LIST") {
+              const listMemoList = isPinnedCollapsed ? unpinnedMemos : sortedMemoList;
+              const lastPinnedName = !isPinnedCollapsed && hasPinned ? pinnedMemos[pinnedMemos.length - 1]?.name : undefined;
+              const listRenderer = lastPinnedName
+                ? (memo: Memo, context?: MemoRenderContext) => (
+                    <>
+                      {props.renderer(memo, context)}
+                      {memo.name === lastPinnedName && (
+                        <div className="w-full max-w-2xl mx-auto my-2 h-px bg-border/60" aria-hidden="true" />
+                      )}
+                    </>
+                  )
+                : props.renderer;
+
+              return <MasonryView memoList={listMemoList} renderer={listRenderer} prefixElement={prefixElement} listMode />;
+            }
             return (
               <>
                 <MasonryView
@@ -218,6 +237,7 @@ const PagedMemoList = (props: Props) => {
                   prefixElement={prefixElement}
                   listMode={layout === "LIST"}
                 />
+                {hasPinned && !isPinnedCollapsed && <div className="w-full max-w-2xl mx-auto my-2 h-px bg-border/60" aria-hidden="true" />}
                 <div className={hasPinned ? "mt-2" : ""}>
                   <MasonryView memoList={unpinnedMemos} renderer={props.renderer} listMode={layout === "LIST"} />
                 </div>

From 2b78dc1dc7395be52b1dcc9030dea9eec0caef80 Mon Sep 17 00:00:00 2001
From: Local Admin <root@localhost>
Date: Mon, 26 Jan 2026 15:14:41 +0000
Subject: [PATCH 3/3] fix(ui): avoid list mode checks in masonry branch

---
 web/src/components/PagedMemoList/PagedMemoList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/PagedMemoList/PagedMemoList.tsx b/web/src/components/PagedMemoList/PagedMemoList.tsx
index 25fabd14a..f1dc9a336 100644
--- a/web/src/components/PagedMemoList/PagedMemoList.tsx
+++ b/web/src/components/PagedMemoList/PagedMemoList.tsx
@@ -235,11 +235,11 @@ const PagedMemoList = (props: Props) => {
                   memoList={isPinnedCollapsed ? [] : pinnedMemos}
                   renderer={props.renderer}
                   prefixElement={prefixElement}
-                  listMode={layout === "LIST"}
+                  listMode={false}
                 />
                 {hasPinned && !isPinnedCollapsed && <div className="w-full max-w-2xl mx-auto my-2 h-px bg-border/60" aria-hidden="true" />}
                 <div className={hasPinned ? "mt-2" : ""}>
-                  <MasonryView memoList={unpinnedMemos} renderer={props.renderer} listMode={layout === "LIST"} />
+                  <MasonryView memoList={unpinnedMemos} renderer={props.renderer} listMode={false} />
                 </div>
               </>
             );