Skip to content

ui: rebuild the header nav #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kevincodex1 merged 1 commit into from
Oct 6, 2026
Merged

ui: rebuild the header nav #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
278 changes: 168 additions & 110 deletions app/src/components/HeaderNav.tsx
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 7 additions & 9 deletions app/src/components/NotificationSettings.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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); }
Expand Down
13 changes: 9 additions & 4 deletions app/src/components/ThemeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

/**
Expand All @@ -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 />;
Expand All @@ -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>
);
}
12 changes: 7 additions & 5 deletions app/src/components/bridge/BridgeDialog.module.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions app/src/components/launchpad/LivePulse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
8 changes: 4 additions & 4 deletions app/src/components/navigation-shell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] }}
Expand Down Expand Up @@ -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",
Expand Down
Loading