Merge pull request #65 from Twigpine/ui/overhaul-2-nav

ui: rebuild the header nav

Author: kevincodex1

app/src/components/HeaderNav.tsx

@@ -4,22 +4,20 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: 1px solid var(--color-line);
+  /* one borderless tool in the header's rail (HeaderNav), which draws the frame */
+  width: 30px;
+  height: 30px;
+  border: 1px solid transparent;
   border-radius: 999px;
-  background: var(--color-card);
+  background: transparent;
   color: var(--color-body);
   cursor: pointer;
   transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
 }
-/* Larger hit area without widening the desktop instrument strip. */
-.trigger::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
-.trigger:hover, .trigger[data-popup-open] { background: var(--color-line); border-color: var(--color-line-strong); color: var(--color-ink); }
+.trigger:hover, .trigger[data-popup-open] { background: var(--color-line); color: var(--color-ink); }
 .bell { position: relative; display: flex; }
 .dot { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 2px var(--color-card); }
-.block { width: 100%; min-height: 48px; height: auto; padding: 12px; justify-content: start; gap: 12px; border-color: transparent; border-radius: 12px; font-size: 14px; font-weight: 500; }
-.block::before { display: none; }
+.block { width: 100%; min-height: 48px; height: auto; padding: 12px; justify-content: start; gap: 12px; border-color: transparent; border-radius: 12px; color: var(--color-ink); font-size: 15px; font-weight: 500; }
 .triggerStatus { margin-left: auto; color: var(--color-muted); font-size: 12px; font-weight: 400; }
 .positioner { z-index: 70; }
 .backdrop { position: fixed; inset: 0; z-index: 69; background: color-mix(in srgb, var(--color-scrim) 55%, transparent); }

app/src/components/NotificationSettings.module.css

@@ -2,6 +2,7 @@
 
 import { useSyncExternalStore } from "react";
 import { useTheme } from "next-themes";
+import { SunMoon } from "lucide-react";
 import { AnimatedThemeToggler } from "@/components/vendor/animated-theme-toggler";
 
 /**
@@ -20,7 +21,10 @@ export default function ThemeToggle({ block = false }: { block?: boolean }) {
     () => false,
   );
 
-  const control = "h-9 w-9 inline-flex items-center justify-center rounded-full border border-line bg-card text-body hover:text-ink hover:border-line-strong [&_svg]:size-4";
+  // in the header it is one borderless tool in the rail; in the phone menu's settings row it keeps its own frame
+  const control = block
+    ? "h-9 w-9 inline-flex items-center justify-center rounded-full border border-line bg-card text-body hover:text-ink hover:border-line-strong [&_svg]:size-4"
+    : "h-7.5 w-7.5 inline-flex shrink-0 items-center justify-center rounded-full text-body transition-colors hover:bg-line hover:text-ink motion-reduce:transition-none [&_svg]:size-4";
 
   if (!mounted) {
     return block ? <div className="min-h-12" aria-hidden /> : <div className={control} aria-hidden />;
@@ -35,13 +39,14 @@ export default function ThemeToggle({ block = false }: { block?: boolean }) {
   if (!block) return toggler;
 
   // In the mobile menu the toggler sits in a list of labelled rows, so it gets
-  // a visible label too — a settings row, label left, control right.
+  // a visible label too — a settings row: icon and label left, control right.
   return (
-    <div className="min-h-12 px-3 flex items-center justify-between gap-3 rounded-xl text-base font-medium text-ink">
+    <div className="min-h-12 px-3 flex items-center gap-3 rounded-xl text-[15px] font-medium text-ink">
+      <SunMoon size={17} strokeWidth={1.8} aria-hidden className="shrink-0" />
       <span>
         Theme <span className="text-muted">· {theme === "dark" ? "Dark" : "Light"}</span>
       </span>
-      {toggler}
+      <span className="ml-auto">{toggler}</span>
     </div>
   );
 }

app/src/components/ThemeToggle.tsx

@@ -49,12 +49,13 @@ export default function LivePulse({ initial, block = false }: { initial: Pulse;
   );
 
   if (block) {
+    // the phone menu's footer line: quiet, under the buttons
     return (
-      <div className="flex items-center justify-between min-h-12 px-3 rounded-xl text-base font-medium text-ink" title="cookie-free: all-time visits · people here right now">
+      <div className="flex items-center justify-between gap-3 px-3 pb-1 pt-3 text-xs text-muted" title="cookie-free: all-time visits · people here right now">
         <span>
-          <LiveNumber value={p.visits} className="font-mono tnum" /> visits
+          <LiveNumber value={p.visits} className="font-mono tnum text-body" /> visits
         </span>
-        <span className="text-sm text-muted">{online}</span>
+        {online}
       </div>
     );
   }

app/src/components/bridge/BridgeDialog.module.css

@@ -39,7 +39,7 @@ function NavigationSurface({ children, className, visible = false, mobile = fals
         width,
         y: visible ? 20 : 0,
         borderRadius: visible ? 28 : 0,
-        backdropFilter: visible ? "blur(10px)" : "blur(0px)",
+        backdropFilter: visible ? "blur(16px) saturate(1.5)" : "blur(0px) saturate(1)",
         ...(mobile ? { paddingLeft: visible ? 12 : 16, paddingRight: visible ? 12 : 16 } : {}),
       }}
       transition={{ duration: reduced ? 0 : 0.28, ease: [0.22, 1, 0.36, 1] }}
@@ -87,9 +87,9 @@ export function MobileNavMenu({ children, className, isOpen, onClose }: SlotProp
       {isOpen ? (
         <motion.div
           key="mobile-navigation"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
+          initial={{ opacity: 0, y: -6 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -6 }}
           transition={{ duration: reduced ? 0 : 0.12 }}
           className={cn(
             "absolute inset-x-0 top-16 z-50 flex flex-col gap-2 rounded-2xl border border-line bg-card p-2",