From 02caf98c7bd038bd03dd7984cdfe51ec2652491e Mon Sep 17 00:00:00 2001
From: johnnyjoygh <johnnyjoygg@gmail.com>
Date: Thu, 3 Sep 2026 09:23:01 +0800
Subject: [PATCH] chore: separate the header brand from the navigator

The space switcher and the navigator pills shared one grammar (rounded
pill, same padding, 16-20px glyph, labels on the same rail), so the
header read as two rows of a list. Make the brand a title (24px mark,
15px semibold, small chevron), keep only the bordered compose control in
the header, move search to the trailing end of the navigator, and size
the nav pills as 28px squares to match compose.
---
 web/src/components/AppSidebar/AppSidebar.tsx  | 53 +++++++++++--------
 .../components/AppSidebar/SpaceSwitcher.tsx   | 14 +++--
 .../components/AppSidebar/sidebar-layout.ts   | 11 ++--
 web/src/components/MemosLogo.tsx              |  2 +-
 web/src/components/SpaceMark.tsx              |  2 +
 5 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/web/src/components/AppSidebar/AppSidebar.tsx b/web/src/components/AppSidebar/AppSidebar.tsx
index 39eca063..b21e4281 100644
--- a/web/src/components/AppSidebar/AppSidebar.tsx
+++ b/web/src/components/AppSidebar/AppSidebar.tsx
@@ -63,8 +63,6 @@ import {
 import TagsSection from "./TagsSection";
 import ViewsSection from "./ViewsSection";
 
-const SIDEBAR_HEADER_ACTION_CLASSES =
-  "size-7 shrink-0 rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50";
 const SIDEBAR_HEADER_PRIMARY_ACTION_CLASSES =
   "size-7 shrink-0 text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50";
 
@@ -324,8 +322,9 @@ interface GlobalNavItem {
 }
 
 /**
- * The compact navigator is intentionally horizontal. Its 16px glyph plus 8px padding
- * on each side makes the collapsed control an exact 32px square. Expanding the
+ * The compact navigator is intentionally horizontal. Its 16px glyph plus 6px padding
+ * on each side makes the collapsed control an exact 28px square, the same box as the
+ * header's compose control. Expanding the
  * label only opens the text track, so the artwork and surface never jump.
  */
 const navPillClasses = (active: boolean) =>
@@ -336,7 +335,7 @@ const NavPillLabel = ({ expanded, label, children }: { expanded: boolean; label:
     aria-hidden={!expanded || undefined}
     className={cn(
       "grid min-w-0 transition-[grid-template-columns,padding] duration-200 ease-out motion-reduce:transition-none",
-      expanded ? "grid-cols-[1fr] ps-2" : "grid-cols-[0fr] ps-0",
+      expanded ? "grid-cols-[1fr] ps-2.5" : "grid-cols-[0fr] ps-0",
     )}
   >
     <span className="flex min-w-0 items-center gap-1.5 overflow-hidden">
@@ -353,7 +352,7 @@ const GlobalNavigation = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const currentUser = useCurrentUser();
-  const { memoDetail, memoScope, setMemoScope, setMobileOpen } = useAppSidebar();
+  const { memoDetail, memoScope, setMemoScope, setMobileOpen, setQuickFindOpen } = useAppSidebar();
   const { filters } = useMemoFilterContext();
   const routeKind = getSidebarRouteKind(location.pathname);
   const resolvedScope = resolveMemoScope(location.pathname, {
@@ -442,7 +441,7 @@ const GlobalNavigation = () => {
 
   return (
     <TooltipProvider>
-      <nav className={cn("flex h-8 items-center gap-1", SIDEBAR_RAIL_CLASSES)} aria-label="Primary">
+      <nav className={cn("flex h-7 items-center gap-1", SIDEBAR_RAIL_CLASSES)} aria-label="Primary">
         {currentUser && (
           <DropdownMenu
             onOpenChange={(open, eventDetails) => {
@@ -522,6 +521,28 @@ const GlobalNavigation = () => {
             </Tooltip>
           );
         })}
+        {/* Search is a place to go, not a header action: it closes the navigator's row
+            so the header keeps only the brand and the bordered compose control. */}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                aria-label={t("common.search")}
+                className={cn("ms-auto", navPillClasses(false))}
+                onClick={() => {
+                  setMobileOpen(false);
+                  setQuickFindOpen(true);
+                }}
+              />
+            }
+          >
+            <span className={SIDEBAR_NAV_LEADING_SLOT_CLASSES} aria-hidden="true">
+              <SearchIcon className="size-4 opacity-75" strokeWidth={1.8} />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{t("common.search")}</TooltipContent>
+        </Tooltip>
       </nav>
     </TooltipProvider>
   );
@@ -553,27 +574,13 @@ const SidebarBrand = ({ className, size = "md" }: { className?: string; size?: "
 const AppSidebar = ({ className }: { className?: string }) => {
   const t = useTranslate();
   const currentUser = useCurrentUser();
-  const { setMobileOpen, setQuickFindOpen } = useAppSidebar();
+  const { setMobileOpen } = useAppSidebar();
   const { canOpen: canCompose, openEditor } = useGlobalMemoEditor();
   return (
     <aside className={cn("flex h-full w-full select-none flex-col bg-sidebar text-sidebar-foreground", className)}>
       <div data-sidebar-header className={cn("flex h-13 shrink-0 items-center justify-between gap-2", SIDEBAR_RAIL_CLASSES)}>
         <SidebarBrand className="min-w-0" size="header" />
-        <div className="flex shrink-0 items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className={SIDEBAR_HEADER_ACTION_CLASSES}
-            onClick={() => {
-              setMobileOpen(false);
-              setQuickFindOpen(true);
-            }}
-            aria-label={t("common.search")}
-          >
-            <SearchIcon className="size-4" strokeWidth={1.8} />
-          </Button>
-          {canCompose && <NewMemoAction onClick={openEditor} />}
-        </div>
+        {canCompose && <NewMemoAction onClick={openEditor} />}
       </div>
       <GlobalNavigation />
       <div className="mx-3 mt-2 border-t border-border/70" />
diff --git a/web/src/components/AppSidebar/SpaceSwitcher.tsx b/web/src/components/AppSidebar/SpaceSwitcher.tsx
index 2d02e9e0..0da27384 100644
--- a/web/src/components/AppSidebar/SpaceSwitcher.tsx
+++ b/web/src/components/AppSidebar/SpaceSwitcher.tsx
@@ -65,7 +65,7 @@ function SpaceSwitcher({ className, size = "md" }: { className?: string; size?:
     ? `${selectedSpace?.title || t("space.current")}${showSelectedSpaceUid && selectedSpaceUid ? ` (${selectedSpaceUid})` : ""}`
     : t("common.memos");
   const brandSize = size === "header" ? "header" : "md";
-  const spaceMarkSize = size === "header" ? "sm" : "md";
+  const spaceMarkSize = size === "header" ? "header" : "md";
 
   const handleMenuOpenChange = (open: boolean) => {
     if (!open) return;
@@ -99,15 +99,15 @@ function SpaceSwitcher({ className, size = "md" }: { className?: string; size?:
             />
           }
         >
-          <span className={cn("flex min-w-0 items-center overflow-hidden", size === "header" ? "gap-1" : "gap-1.5")}>
+          <span className={cn("flex min-w-0 items-center overflow-hidden", size === "header" ? "gap-2" : "gap-1.5")}>
             {selectedSpaceName ? (
               <>
                 <SpaceMark size={spaceMarkSize} />
                 <span data-sidebar-label className="flex min-w-0 flex-1 flex-col justify-center overflow-hidden">
                   <span
                     className={cn(
-                      "block truncate text-[14px] tracking-[-0.01em] text-foreground",
-                      size === "header" ? "font-semibold leading-5" : "font-medium leading-4",
+                      "block truncate tracking-[-0.01em] text-foreground",
+                      size === "header" ? "text-[15px] font-semibold leading-5" : "text-[14px] font-medium leading-4",
                     )}
                   >
                     {selectedSpace?.title || t("space.current")}
@@ -127,7 +127,11 @@ function SpaceSwitcher({ className, size = "md" }: { className?: string; size?:
               <MemosLogo compact size={brandSize} />
             )}
           </span>
-          <ChevronsUpDownIcon aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground/70" strokeWidth={1.8} />
+          <ChevronsUpDownIcon
+            aria-hidden="true"
+            className={cn("shrink-0 text-muted-foreground/70", size === "header" ? "size-3" : "size-3.5")}
+            strokeWidth={1.8}
+          />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           size="sm"
diff --git a/web/src/components/AppSidebar/sidebar-layout.ts b/web/src/components/AppSidebar/sidebar-layout.ts
index 72a71efb..1363e459 100644
--- a/web/src/components/AppSidebar/sidebar-layout.ts
+++ b/web/src/components/AppSidebar/sidebar-layout.ts
@@ -4,25 +4,28 @@ import { cva } from "class-variance-authority";
  * The sidebar is drawn on one shared rail: inset surfaces start 12px from the shell,
  * visible artwork starts at 20px, and first-level labels start at 44px. The full-bleed
  * footer action pads its content directly onto those same rails. Rows reserve a 20px
- * artwork column; compact navigation reaches the label rail with an 8px gap.
+ * artwork column. Compact navigation is a 28px square like the header's compose control,
+ * so its glyph sits 2px inside the artwork rail and reaches the label rail with a 10px gap.
  */
 export const SIDEBAR_RAIL_CLASSES = "px-3";
 // Content rows reserve 20px so 16px icons and 20px marks share a stable label rail.
 export const SIDEBAR_LEADING_SLOT_CLASSES = "flex size-5 shrink-0 items-center justify-center";
-// Compact nav uses the visible 16px glyph itself as the cell, keeping 8px x/y padding.
+// Compact nav uses the visible 16px glyph itself as the cell, keeping 6px x/y padding.
 export const SIDEBAR_NAV_LEADING_SLOT_CLASSES = "flex size-4 shrink-0 items-center justify-center";
 
 /**
  * Brand controls hug their content, ordinary rows fill the inset rail, and the account
  * action fills the footer shell (or becomes a rail-aligned square when collapsed).
+ * The header brand is the sidebar's title, not a row: a 24px mark on the artwork rail and
+ * a larger label, so it reads as a different kind of object from the 16px nav pills below.
  * Heights stay fixed so data cannot change a surface's padding or vertical position.
  */
 export const sidebarSurfaceVariants = cva("min-w-0 items-center", {
   variants: {
     role: {
       row: "flex h-7 w-full gap-1 rounded-md px-2 text-ui",
-      navPill: "relative flex h-8 rounded-md px-2",
-      headerBrand: "flex h-9 max-w-full gap-1 rounded-md px-2",
+      navPill: "relative flex h-7 rounded-md px-1.5",
+      headerBrand: "flex h-9 max-w-full gap-2 rounded-md px-2",
       mobileBrand: "flex h-9 max-w-full gap-1.5 rounded-md px-1",
       account: "flex h-9 w-full gap-1 rounded-none px-5",
       accountCollapsed: "ms-3 flex size-9 rounded-md p-2",
diff --git a/web/src/components/MemosLogo.tsx b/web/src/components/MemosLogo.tsx
index dfb016db..c66fff21 100644
--- a/web/src/components/MemosLogo.tsx
+++ b/web/src/components/MemosLogo.tsx
@@ -14,7 +14,7 @@ interface Props {
 // wherever the two are listed together.
 const COMPACT_SCALE = {
   md: { mark: "size-7 rounded-[7px]", gap: "gap-1.5", title: "text-[14px]", weight: "font-medium" },
-  header: { mark: "size-5 rounded-[5px]", gap: "gap-1", title: "text-[14px] leading-5", weight: "font-semibold" },
+  header: { mark: "size-6 rounded-[6px]", gap: "gap-2", title: "text-[15px] leading-5", weight: "font-semibold" },
   sm: { mark: "size-5 rounded-[5px]", gap: "gap-1.5", title: "text-ui", weight: "font-medium" },
 } as const;
 
diff --git a/web/src/components/SpaceMark.tsx b/web/src/components/SpaceMark.tsx
index 5168ad58..b17de693 100644
--- a/web/src/components/SpaceMark.tsx
+++ b/web/src/components/SpaceMark.tsx
@@ -5,6 +5,8 @@ const MARK_SCALE = {
   xl: { mark: "size-11 rounded-lg", icon: "size-6" },
   lg: { mark: "size-9 rounded-[7px]", icon: "size-5" },
   md: { mark: "size-7 rounded-[7px]", icon: "size-4" },
+  /** Primary chrome: kept in step with MemosLogo's header scale. */
+  header: { mark: "size-6 rounded-[6px]", icon: "size-3.5" },
   sm: { mark: "size-5 rounded-[5px]", icon: "size-3" },
 } as const;