From ec689c3a038b4496d64ef15d6621e867461be04a Mon Sep 17 00:00:00 2001
From: johnnyjoygh <johnnyjoygg@gmail.com>
Date: Fri, 7 Aug 2026 00:04:04 +0800
Subject: [PATCH] chore(sidebar): replace static mode with a library-content
 fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The rail had two navigation grammars for the same destinations: a
compact icon strip on recognized routes, and StaticNavigation — full
labeled rows — on everything else (/about, /403, /404, wildcard).
Crossing onto one of those pages rearranged the entire rail, and any
route nobody remembered to classify silently inherited the alternate
layout.

Make the frame invariant instead: header, global strip, contextual
content, footer — on every route. Pages without a specific sidebar
tenant now fall back to the default library content (the home
collection for signed-in users, explore for guests), following the
convention that error and utility pages render inside the persistent
shell rather than degrading it. The memo-detail route gets the same
fallback while the page has not yet published its descriptor, instead
of a blank scroll area.

Off the collection routes the library is display-plus-navigation, so
StatisticsView and TagsSection accept a navigationTarget: calendar and
tag clicks land on / or /explore with the filter in the query string,
which RootLayout's route-change effect would otherwise wipe.

StaticNavigation is deleted, About returns to living only in the user
menu (the showAbout prop is gone), and the guest strip now marks About
active on /about.
---
 web/src/components/AppSidebar/AppSidebar.tsx  | 111 ++++--------------
 web/src/components/AppSidebar/TagsSection.tsx |  17 ++-
 .../StatisticsView/StatisticsView.tsx         |   4 +-
 web/src/components/UserMenu.tsx               |  13 +-
 web/tests/app-sidebar-logo.test.tsx           |  15 ++-
 5 files changed, 52 insertions(+), 108 deletions(-)

diff --git a/web/src/components/AppSidebar/AppSidebar.tsx b/web/src/components/AppSidebar/AppSidebar.tsx
index 3dd4a841..c750b54a 100644
--- a/web/src/components/AppSidebar/AppSidebar.tsx
+++ b/web/src/components/AppSidebar/AppSidebar.tsx
@@ -62,7 +62,7 @@ import { User_Role, UserNotification_Status } from "@/types/proto/api/v1/user_se
 import { useTranslate } from "@/utils/i18n";
 import MemosLogo from "../MemosLogo";
 import { getSidebarRouteKind } from "./routes";
-import SidebarRow, { SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_COUNT_CLASSES, SIDEBAR_ROW_ICON_CLASSES } from "./SidebarRow";
+import SidebarRow, { SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_ICON_CLASSES } from "./SidebarRow";
 import SidebarSectionHeader from "./SidebarSectionHeader";
 import TagsSection from "./TagsSection";
 
@@ -237,14 +237,19 @@ const CollectionSidebarContent = ({ context }: { context: MemoStatsContext }) =>
 
   const showViews = !!currentUser && (context === "home" || context === "archived" || context === "explore");
 
+  // Off the collection routes (the library shown as fallback content), calendar and tag
+  // clicks must land somewhere that renders the filtered feed.
+  const onCollectionRoute = isMemoScopeRoute(location.pathname) || !!profileMatch;
+  const filterTarget = onCollectionRoute ? undefined : context === "explore" ? ROUTES.EXPLORE : ROUTES.HOME;
+
   return (
     <div className="space-y-3.5">
       {context === "profile" && <ProfileMode />}
       <section>
-        <StatisticsView statisticsData={statistics} onDateSelect={() => setMobileOpen(false)} />
+        <StatisticsView statisticsData={statistics} navigationTarget={filterTarget} onDateSelect={() => setMobileOpen(false)} />
       </section>
       {showViews && <ViewsSection />}
-      <TagsSection tagCount={tags} onSelect={() => setMobileOpen(false)} />
+      <TagsSection tagCount={tags} navigationTarget={filterTarget} onSelect={() => setMobileOpen(false)} />
     </div>
   );
 };
@@ -380,6 +385,8 @@ const MemoDetailSidebarContent = () => {
 
 const RouteSidebarContent = () => {
   const location = useLocation();
+  const currentUser = useCurrentUser();
+  const { memoDetail } = useAppSidebar();
   const kind = getSidebarRouteKind(location.pathname);
   if (kind === "home" || kind === "archived" || kind === "explore" || kind === "profile") {
     return <CollectionSidebarContent context={kind} />;
@@ -388,8 +395,10 @@ const RouteSidebarContent = () => {
   if (kind === "attachments") return <AttachmentsSidebarContent />;
   if (kind === "inbox") return <InboxSidebarContent />;
   if (kind === "settings") return <SettingsSidebarContent />;
-  if (kind === "memo") return <MemoDetailSidebarContent />;
-  return null;
+  if (kind === "memo" && memoDetail) return <MemoDetailSidebarContent />;
+  // Routes without a specific tenant (about, error pages, unknown paths, memo detail
+  // before the page publishes its descriptor) fall back to the default library content.
+  return <CollectionSidebarContent context={currentUser ? "home" : "explore"} />;
 };
 
 interface GlobalNavItem {
@@ -467,7 +476,7 @@ const GlobalNavigation = () => {
           icon: EarthIcon,
           active: routeKind === "explore" || routeKind === "profile" || routeKind === "memo",
         },
-        { id: "about", label: t("common.about"), path: ROUTES.ABOUT, icon: InfoIcon, active: false },
+        { id: "about", label: t("common.about"), path: ROUTES.ABOUT, icon: InfoIcon, active: location.pathname === ROUTES.ABOUT },
       ];
 
   const scopeTrigger = (
@@ -584,80 +593,10 @@ const GlobalNavigation = () => {
   );
 };
 
-const StaticNavigation = () => {
-  const t = useTranslate();
-  const location = useLocation();
-  const currentUser = useCurrentUser();
-  const { data: notifications = [] } = useNotifications();
-  const { setMobileOpen } = useAppSidebar();
-  const unreadCount = notifications.filter((notification) => notification.status === UserNotification_Status.UNREAD).length;
-  const primaryItems: Array<{ id: string; label: string; path: string; icon: LucideIcon }> = currentUser
-    ? [
-        { id: "home", label: t("common.home"), path: ROUTES.HOME, icon: HouseIcon },
-        { id: "explore", label: t("common.explore"), path: ROUTES.EXPLORE, icon: EarthIcon },
-      ]
-    : [{ id: "explore", label: t("common.explore"), path: ROUTES.EXPLORE, icon: EarthIcon }];
-  const personalItems: Array<{ id: string; label: string; path: string; icon: LucideIcon; count?: number }> = currentUser
-    ? [
-        { id: "attachments", label: t("common.attachments"), path: ROUTES.ATTACHMENTS, icon: PaperclipIcon },
-        { id: "inbox", label: t("common.inbox"), path: ROUTES.INBOX, icon: BellIcon, count: unreadCount },
-      ]
-    : [];
-
-  const renderLink = (item: (typeof primaryItems)[number] | (typeof personalItems)[number]) => {
-    const Icon = item.icon;
-    const count = "count" in item ? item.count : undefined;
-    return (
-      <Link
-        key={item.id}
-        to={item.path}
-        onClick={() => setMobileOpen(false)}
-        className={cn(SIDEBAR_ROW_CLASSES, "text-muted-foreground hover:bg-sidebar-accent/65 hover:text-foreground")}
-      >
-        <Icon className={SIDEBAR_ROW_ICON_CLASSES} strokeWidth={1.8} />
-        <span className="min-w-0 flex-1 truncate">{item.label}</span>
-        {count != null && count > 0 && <span className={SIDEBAR_ROW_COUNT_CLASSES}>{count}</span>}
-      </Link>
-    );
-  };
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      <nav className={cn("pt-1", SIDEBAR_HORIZONTAL_PADDING)} aria-label="Primary">
-        <div className="space-y-0.5">{primaryItems.map(renderLink)}</div>
-        {personalItems.length > 0 && (
-          <>
-            <div className="mx-2 my-2 border-t border-border/70" />
-            <div className="space-y-0.5">{personalItems.map(renderLink)}</div>
-          </>
-        )}
-      </nav>
-      <nav className={cn("mt-auto pb-2", SIDEBAR_HORIZONTAL_PADDING)} aria-label="Utility">
-        <Link
-          to={ROUTES.ABOUT}
-          onClick={() => setMobileOpen(false)}
-          aria-current={location.pathname === ROUTES.ABOUT ? "page" : undefined}
-          className={cn(
-            SIDEBAR_ROW_CLASSES,
-            location.pathname === ROUTES.ABOUT
-              ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
-              : "text-muted-foreground hover:bg-sidebar-accent/65 hover:text-foreground",
-          )}
-        >
-          <InfoIcon className={SIDEBAR_ROW_ICON_CLASSES} strokeWidth={1.8} />
-          <span className="min-w-0 flex-1 truncate">{t("common.about")}</span>
-        </Link>
-      </nav>
-    </div>
-  );
-};
-
 const AppSidebar = ({ className }: { className?: string }) => {
   const t = useTranslate();
-  const location = useLocation();
   const currentUser = useCurrentUser();
   const { setMobileOpen, setQuickFindOpen } = useAppSidebar();
-  const staticMode = getSidebarRouteKind(location.pathname) === "empty";
   return (
     <aside className={cn("flex h-full w-full select-none flex-col bg-sidebar text-sidebar-foreground", className)}>
       <div className={cn("flex h-13 shrink-0 items-center justify-between gap-2", SIDEBAR_HORIZONTAL_PADDING)}>
@@ -680,22 +619,14 @@ const AppSidebar = ({ className }: { className?: string }) => {
           <SearchIcon className="size-4" strokeWidth={1.8} />
         </Button>
       </div>
-      {staticMode ? (
-        <StaticNavigation />
-      ) : (
-        <>
-          <GlobalNavigation />
-          <div className="mx-3 mt-2 border-t border-border/70" />
-          <div
-            className={cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden pt-2 pb-3 [scrollbar-width:thin]", SIDEBAR_HORIZONTAL_PADDING)}
-          >
-            <RouteSidebarContent />
-          </div>
-        </>
-      )}
+      <GlobalNavigation />
+      <div className="mx-3 mt-2 border-t border-border/70" />
+      <div className={cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden pt-2 pb-3 [scrollbar-width:thin]", SIDEBAR_HORIZONTAL_PADDING)}>
+        <RouteSidebarContent />
+      </div>
       <footer className="shrink-0 border-t border-border/70">
         {currentUser ? (
-          <UserMenu showAbout={!staticMode} />
+          <UserMenu />
         ) : (
           <Link
             to={ROUTES.AUTH}
diff --git a/web/src/components/AppSidebar/TagsSection.tsx b/web/src/components/AppSidebar/TagsSection.tsx
index 00280915..6a6ab9c2 100644
--- a/web/src/components/AppSidebar/TagsSection.tsx
+++ b/web/src/components/AppSidebar/TagsSection.tsx
@@ -1,7 +1,8 @@
 import { HashIcon, ListIcon, ListTreeIcon } from "lucide-react";
 import { forwardRef, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
-import { useMemoFilterContext } from "@/contexts/MemoFilterContext";
+import { replaceFiltersByFactor, stringifyFilters, useMemoFilterContext } from "@/contexts/MemoFilterContext";
 import { useLocalStorage, useOverflowTitle } from "@/hooks";
 import { cn } from "@/lib/utils";
 import { useTranslate } from "@/utils/i18n";
@@ -12,6 +13,8 @@ import SidebarSectionHeader from "./SidebarSectionHeader";
 interface Props {
   tagCount: Record<string, number>;
   onSelect?: () => void;
+  /** When set, tag clicks land on this route with the tag filter instead of filtering the current one. */
+  navigationTarget?: string;
 }
 
 const TagPath = forwardRef<HTMLSpanElement, { tag: string }>(({ tag }, ref) => {
@@ -55,9 +58,10 @@ const FlatTagRow = ({ tag, amount, active, onClick }: FlatTagRowProps) => {
   );
 };
 
-const TagsSection = ({ tagCount, onSelect }: Props) => {
+const TagsSection = ({ tagCount, onSelect, navigationTarget }: Props) => {
   const t = useTranslate();
-  const { getFiltersByFactor, addFilter, removeFilter } = useMemoFilterContext();
+  const navigate = useNavigate();
+  const { filters, setFilters, getFiltersByFactor, addFilter, removeFilter } = useMemoFilterContext();
   const [treeMode, setTreeMode] = useLocalStorage<boolean>("tag-view-as-tree", false);
   const activeTags = new Set(getFiltersByFactor("tagSearch").map((filter) => filter.value));
   const activeTag = activeTags.values().next().value as string | undefined;
@@ -68,6 +72,13 @@ const TagsSection = ({ tagCount, onSelect }: Props) => {
   }
 
   const handleTagClick = (tag: string) => {
+    if (navigationTarget) {
+      const nextFilters = replaceFiltersByFactor(filters, "tagSearch", [{ factor: "tagSearch", value: tag }]);
+      setFilters(nextFilters);
+      navigate({ pathname: navigationTarget, search: `?filter=${stringifyFilters(nextFilters)}` });
+      onSelect?.();
+      return;
+    }
     const active = activeTags.has(tag);
     if (active) {
       removeFilter((filter) => filter.factor === "tagSearch" && filter.value === tag);
diff --git a/web/src/components/StatisticsView/StatisticsView.tsx b/web/src/components/StatisticsView/StatisticsView.tsx
index 169f359e..7d5709c5 100644
--- a/web/src/components/StatisticsView/StatisticsView.tsx
+++ b/web/src/components/StatisticsView/StatisticsView.tsx
@@ -9,13 +9,15 @@ import { MonthNavigator } from "./MonthNavigator";
 interface Props {
   statisticsData: StatisticsData;
   onDateSelect?: () => void;
+  /** When set, day clicks land on this route with the date filter instead of filtering the current one. */
+  navigationTarget?: string;
 }
 
 const StatisticsView = (props: Props) => {
   const { statisticsData } = props;
   const { activityStats, timeBasis } = statisticsData;
   const { filters } = useMemoFilterContext();
-  const navigateToDateFilter = useDateFilterNavigation();
+  const navigateToDateFilter = useDateFilterNavigation(props.navigationTarget);
   const [visibleMonthString, setVisibleMonthString] = useState(dayjs().format("YYYY-MM"));
   const selectedDate = filters.find((filter) => filter.factor === "displayTime")?.value;
 
diff --git a/web/src/components/UserMenu.tsx b/web/src/components/UserMenu.tsx
index ef221a96..9394b427 100644
--- a/web/src/components/UserMenu.tsx
+++ b/web/src/components/UserMenu.tsx
@@ -34,11 +34,10 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 interface Props {
   collapsed?: boolean;
-  showAbout?: boolean;
 }
 
 const UserMenu = (props: Props) => {
-  const { collapsed, showAbout = true } = props;
+  const { collapsed } = props;
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const { setMobileOpen } = useAppSidebar();
@@ -179,12 +178,10 @@ const UserMenu = (props: Props) => {
             ))}
           </DropdownMenuSubContent>
         </DropdownMenuSub>
-        {showAbout && (
-          <DropdownMenuItem onClick={() => navigateFromMenu(Routes.ABOUT)}>
-            <InfoIcon className="size-4 text-muted-foreground" />
-            {t("common.about")}
-          </DropdownMenuItem>
-        )}
+        <DropdownMenuItem onClick={() => navigateFromMenu(Routes.ABOUT)}>
+          <InfoIcon className="size-4 text-muted-foreground" />
+          {t("common.about")}
+        </DropdownMenuItem>
         <DropdownMenuItem onClick={() => navigateFromMenu(Routes.SETTING)}>
           <SettingsIcon className="size-4 text-muted-foreground" />
           {t("common.settings")}
diff --git a/web/tests/app-sidebar-logo.test.tsx b/web/tests/app-sidebar-logo.test.tsx
index c8ccdaa2..af11406e 100644
--- a/web/tests/app-sidebar-logo.test.tsx
+++ b/web/tests/app-sidebar-logo.test.tsx
@@ -124,20 +124,21 @@ describe("App sidebar logo", () => {
     expect(screen.queryByRole("link", { name: "common.home" })).not.toBeInTheDocument();
   });
 
-  it("shows common destinations instead of empty route content for an authenticated user", () => {
+  it("falls back to the library content on a route without a specific tenant", () => {
     render(
       <MemoryRouter initialEntries={["/404"]}>
         <AppSidebar />
       </MemoryRouter>,
     );
 
-    expect(screen.getByRole("link", { name: "common.home" })).toHaveAttribute("href", "/");
-    expect(screen.getByRole("link", { name: "common.explore" })).toHaveAttribute("href", "/explore");
+    expect(screen.getByText("Calendar")).toBeInTheDocument();
+    expect(screen.getByText("common.views")).toBeInTheDocument();
+    expect(screen.getByText("Tags")).toBeInTheDocument();
     expect(screen.getByRole("link", { name: "common.attachments" })).toHaveAttribute("href", "/attachments");
     expect(screen.getByRole("link", { name: "common.inbox" })).toHaveAttribute("href", "/inbox");
-    expect(screen.getByRole("link", { name: "common.about" })).toHaveAttribute("href", "/about");
+    expect(screen.queryByRole("link", { name: "common.home" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: "common.about" })).not.toBeInTheDocument();
     expect(screen.getByText("User menu").closest("footer")).not.toBeNull();
-    expect(screen.queryByText("Calendar")).not.toBeInTheDocument();
   });
 
   it("uses a visitor sidebar for a guest on a route without contextual content", () => {
@@ -156,7 +157,8 @@ describe("App sidebar logo", () => {
     expect(screen.getByRole("link", { name: "common.sign-in-to-memos" }).closest("footer")).not.toBeNull();
   });
 
-  it("marks About active on the About page", () => {
+  it("marks About active for a guest on the About page", () => {
+    authState.currentUser = undefined;
     render(
       <MemoryRouter initialEntries={["/about"]}>
         <AppSidebar />
@@ -164,6 +166,7 @@ describe("App sidebar logo", () => {
     );
 
     expect(screen.getByRole("link", { name: "common.about" })).toHaveAttribute("aria-current", "page");
+    expect(screen.getByText("Calendar")).toBeInTheDocument();
   });
 
   it("uses a compact scope menu and places views below the calendar", async () => {