From de843f658a8d06badb87784e6b70ea32c6a6ee03 Mon Sep 17 00:00:00 2001
From: johnnyjoygh <johnnyjoygg@gmail.com>
Date: Mon, 31 Aug 2026 23:56:36 +0800
Subject: [PATCH] chore: slim down the view options popover

Drop the title bar and section micro-headers, and let the layout
switcher recede: transparent track with an accent fill on the active
segment only, which also reads correctly in dark mode.
---
 web/src/components/MemoDisplaySettingMenu.tsx | 13 ++++---------
 web/src/locales/en.json                       |  2 +-
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/web/src/components/MemoDisplaySettingMenu.tsx b/web/src/components/MemoDisplaySettingMenu.tsx
index 69e1c090..8627cc7c 100644
--- a/web/src/components/MemoDisplaySettingMenu.tsx
+++ b/web/src/components/MemoDisplaySettingMenu.tsx
@@ -71,11 +71,10 @@ function MemoDisplaySettingsContent() {
   return (
     <div>
       <section className="px-3 py-2.5">
-        <p className="mb-2 text-[10px] font-semibold uppercase tracking-[0.09em] text-muted-foreground/65">{t("memo.layout")}</p>
         <div
           role="radiogroup"
           aria-label={t("memo.layout")}
-          className="grid grid-cols-4 gap-0.5 rounded-lg bg-muted/55 p-0.5"
+          className="grid grid-cols-4 gap-0.5"
           onKeyDown={(event) => {
             const delta =
               event.key === "ArrowRight"
@@ -117,8 +116,8 @@ function MemoDisplaySettingsContent() {
                 data-value={value}
                 onClick={() => setMaxColumns(value)}
                 className={cn(
-                  "flex h-8 min-w-0 items-center justify-center gap-1 rounded-md px-1 text-[11px] transition-[background-color,color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
-                  active ? "bg-background text-foreground shadow-xs" : "text-muted-foreground hover:bg-background/60 hover:text-foreground",
+                  "flex h-7 min-w-0 items-center justify-center gap-1 rounded-md px-1 text-[11px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+                  active ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
                 )}
               >
                 <Icon className="size-3.5 shrink-0" strokeWidth={1.8} />
@@ -130,7 +129,6 @@ function MemoDisplaySettingsContent() {
       </section>
 
       <section className="space-y-2 border-t border-border/60 px-3 py-2.5">
-        <p className="text-[10px] font-semibold uppercase tracking-[0.09em] text-muted-foreground/65">{t("memo.order")}</p>
         <SettingRow label={t("memo.order-by")}>
           <Select
             value={timeBasis}
@@ -207,10 +205,7 @@ function MemoDisplaySettingMenu({ className }: Props) {
         </TooltipTrigger>
         <TooltipContent side="top">{t("memo.view-options")}</TooltipContent>
       </Tooltip>
-      <PopoverContent align="end" sideOffset={6} className="w-64 p-0">
-        <div className="border-b border-border/60 px-3 py-2.5">
-          <p className="text-[13px] font-medium text-foreground">{t("memo.view-options")}</p>
-        </div>
+      <PopoverContent align="end" sideOffset={6} aria-label={t("memo.view-options")} className="w-64 p-0">
         <MemoDisplaySettingsContent />
       </PopoverContent>
     </Popover>
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 54702f3d..8b17fb87 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -378,7 +378,7 @@
     "newest-first": "Newest first",
     "oldest-first": "Oldest first",
     "order": "Order",
-    "order-by": "Order By",
+    "order-by": "Order by",
     "outline": "Outline",
     "search-placeholder": "Search memos...",
     "shown-time": "Shown time",