diff --git a/src/routes/plugins/$name.tsx b/src/routes/plugins/$name.tsx
index c18ba18f..cece18f0 100644
--- a/src/routes/plugins/$name.tsx
+++ b/src/routes/plugins/$name.tsx
@@ -14,7 +14,6 @@ import {
fetchPackageReadme,
fetchPackageVersion,
getPackageDownloadPath,
- isRateLimitedPackageApiError,
type PackageDetailResponse,
type PackageVersionDetail,
} from "../../lib/packageApi";
@@ -36,6 +35,7 @@ type PluginDetailLoaderData = {
export const Route = createFileRoute("/plugins/$name")({
loader: async ({ params }): Promise
=> {
+ // All fetch functions now handle errors internally and return null/empty on failure
const requestedName = params.name;
const candidateNames = requestedName.includes("/")
? [requestedName]
@@ -43,24 +43,9 @@ export const Route = createFileRoute("/plugins/$name")({
let resolvedName = requestedName;
let detail: PackageDetailResponse = { package: null, owner: null };
+
for (const candidateName of candidateNames) {
- let candidateDetail: PackageDetailResponse;
- try {
- candidateDetail = await fetchPackageDetail(candidateName);
- } catch (error) {
- if (isRateLimitedPackageApiError(error)) {
- return {
- detail: { package: null, owner: null },
- version: null,
- readme: null,
- rateLimited: {
- scope: "detail",
- retryAfterSeconds: error.retryAfterSeconds,
- },
- };
- }
- throw error;
- }
+ const candidateDetail = await fetchPackageDetail(candidateName);
if (candidateDetail.package) {
detail = candidateDetail;
resolvedName = candidateName;
@@ -70,35 +55,18 @@ export const Route = createFileRoute("/plugins/$name")({
}
if (!detail.package) {
- return {
- detail,
- version: null,
- readme: null,
- rateLimited: null,
- };
+ return { detail, version: null, readme: null, rateLimited: null };
}
- let metadataRateLimited: PluginDetailRateLimitState = null;
- const readmePromise = fetchPackageReadme(resolvedName).catch((error: unknown) => {
- if (!isRateLimitedPackageApiError(error)) throw error;
- metadataRateLimited ??= {
- scope: "metadata",
- retryAfterSeconds: error.retryAfterSeconds,
- };
- return null;
- });
- const versionPromise = detail.package?.latestVersion
- ? fetchPackageVersion(resolvedName, detail.package.latestVersion).catch((error: unknown) => {
- if (!isRateLimitedPackageApiError(error)) throw error;
- metadataRateLimited ??= {
- scope: "metadata",
- retryAfterSeconds: error.retryAfterSeconds,
- };
- return null;
- })
- : Promise.resolve(null);
- const [version, readme] = await Promise.all([versionPromise, readmePromise]);
- return { detail, version, readme, rateLimited: metadataRateLimited };
+ // Fetch readme and version in parallel - functions handle errors internally
+ const [version, readme] = await Promise.all([
+ detail.package.latestVersion
+ ? fetchPackageVersion(resolvedName, detail.package.latestVersion)
+ : Promise.resolve(null),
+ fetchPackageReadme(resolvedName),
+ ]);
+
+ return { detail, version, readme, rateLimited: null };
},
head: ({ params, loaderData }) => ({
meta: [
diff --git a/src/routes/plugins/index.tsx b/src/routes/plugins/index.tsx
index a6314923..e3ff73a3 100644
--- a/src/routes/plugins/index.tsx
+++ b/src/routes/plugins/index.tsx
@@ -6,7 +6,6 @@ import { PluginListItem } from "../../components/PluginListItem";
import { Button } from "../../components/ui/button";
import {
fetchPluginCatalog,
- isRateLimitedPackageApiError,
type PackageListItem,
} from "../../lib/packageApi";
@@ -23,6 +22,7 @@ type PluginsLoaderData = {
nextCursor: string | null;
rateLimited: boolean;
retryAfterSeconds: number | null;
+ apiError?: boolean;
};
function formatRetryDelay(retryAfterSeconds: number | null) {
@@ -54,42 +54,40 @@ export const Route = createFileRoute("/plugins/")({
: undefined,
}),
loaderDeps: ({ search }) => search,
- loader: async ({ deps }) => {
- try {
- const data = await fetchPluginCatalog({
- q: deps.q,
- cursor: deps.q ? undefined : deps.cursor,
- family: deps.family,
- isOfficial: deps.verified,
- executesCode: deps.executesCode,
- limit: 50,
- });
- return {
- items: data.items ?? [],
- nextCursor: data.nextCursor ?? null,
- rateLimited: false,
- retryAfterSeconds: null,
- } satisfies PluginsLoaderData;
- } catch (error) {
- if (isRateLimitedPackageApiError(error)) {
- return {
- items: [],
- nextCursor: null,
- rateLimited: true,
- retryAfterSeconds: (error as { retryAfterSeconds?: number }).retryAfterSeconds ?? null,
- } satisfies PluginsLoaderData;
- }
- throw error;
- }
+ loader: async ({ deps }): Promise => {
+ // fetchPluginCatalog now handles errors internally and returns empty results
+ const data = await fetchPluginCatalog({
+ q: deps.q,
+ cursor: deps.q ? undefined : deps.cursor,
+ family: deps.family,
+ isOfficial: deps.verified,
+ executesCode: deps.executesCode,
+ limit: 50,
+ });
+
+ const items = data?.items ?? [];
+ return {
+ items,
+ nextCursor: data?.nextCursor ?? null,
+ rateLimited: false,
+ retryAfterSeconds: null,
+ apiError: items.length === 0 && !deps.q && !deps.family && !deps.verified && !deps.executesCode,
},
component: PluginsIndex,
});
-export function PluginsIndex() {
+function PluginsIndex() {
const search = Route.useSearch();
const navigate = Route.useNavigate();
- const { items, nextCursor, rateLimited, retryAfterSeconds } =
- Route.useLoaderData() as PluginsLoaderData;
+ const loaderData = Route.useLoaderData() as PluginsLoaderData | undefined;
+
+ // Defensive handling for when loader data is unavailable (SSR errors, etc.)
+ const items = loaderData?.items ?? [];
+ const nextCursor = loaderData?.nextCursor ?? null;
+ const rateLimited = loaderData?.rateLimited ?? false;
+ const retryAfterSeconds = loaderData?.retryAfterSeconds ?? null;
+ const apiError = loaderData?.apiError ?? !loaderData;
+
const [query, setQuery] = useState(search.q ?? "");
const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -201,7 +199,15 @@ export function PluginsIndex() {
Plugin catalog is temporarily unavailable
diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
index efa04fef..a8efd963 100644
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -1,15 +1,28 @@
import { createFileRoute } from "@tanstack/react-router";
import { useMutation, useQuery } from "convex/react";
+import {
+ Eye,
+ Grid3X3,
+ LayoutGrid,
+ List,
+ Monitor,
+ Moon,
+ RotateCcw,
+ Settings2,
+ Sparkles,
+ Sun,
+ Zap,
+} from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { api } from "../../convex/_generated/api";
import type { Id } from "../../convex/_generated/dataModel";
import { Container } from "../components/layout/Container";
+import { SignInButton } from "../components/SignInButton";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
-import { SignInButton } from "../components/SignInButton";
import {
Dialog,
DialogContent,
@@ -21,9 +34,25 @@ import {
} from "../components/ui/dialog";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../components/ui/select";
import { Separator } from "../components/ui/separator";
+import { Switch } from "../components/ui/switch";
import { Textarea } from "../components/ui/textarea";
import { gravatarUrl } from "../lib/gravatar";
+import {
+ type AnimationLevel,
+ type CodeFontSize,
+ type LayoutDensity,
+ type ListViewMode,
+ usePreferences,
+} from "../lib/preferences";
+import { useThemeMode } from "../lib/theme";
export const Route = createFileRoute("/settings")({
component: Settings,
@@ -33,6 +62,8 @@ export function Settings() {
const me = useQuery(api.users.me);
const updateProfile = useMutation(api.users.updateProfile);
const deleteAccount = useMutation(api.users.deleteAccount);
+ const { mode: themeMode, setMode: setThemeMode } = useThemeMode();
+ const { preferences, updatePreference, resetPreferences, isAdvancedMode } = usePreferences();
const tokens = useQuery(api.tokens.listMine, me ? {} : "skip") as
| Array<{
_id: Id<"apiTokens">;
@@ -208,6 +239,325 @@ export function Settings() {
+ {/* Customization */}
+
+
+
+
+
+
+ Customization
+
+
+ Personalize your ClawHub experience
+
+
+
+
+ updatePreference("advancedMode", checked)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ updatePreference("showDescriptions", checked)}
+ />
+
+
+
+ updatePreference("showStats", checked)}
+ />
+
+
+
+ updatePreference("showTags", checked)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ updatePreference("lineNumbers", checked)}
+ />
+
+
+
+ updatePreference("wordWrap", checked)}
+ />
+
+
+
+
+
+
+
+
+
+
Minimize animations
+
+
updatePreference("reducedMotion", checked)}
+ />
+
+
+
+
+
Increase color contrast
+
+
updatePreference("highContrast", checked)}
+ />
+
+
+
+
+
+
+
+
+
Try new features before they're released
+
+
updatePreference("experimentalFeatures", checked)}
+ />
+
+
+
+
Reset preferences
+
Restore all settings to defaults
+
+
+
+
{/* Organizations */}
diff --git a/src/styles.css b/src/styles.css
index c7a9a57e..84791e7c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -92,62 +92,64 @@
:root {
color-scheme: dark;
- /* Monochrome dark palette — TUI/terminal aesthetic */
+ /* OpenClaw — black, white, red brand palette */
--bg: #0a0a0a;
--bg-soft: #111111;
- --bg-glow-1: #111111;
- --bg-glow-2: #111111;
- --surface: #141414;
- --surface-muted: #1a1a1a;
- --nav-bg: rgba(10, 10, 10, 0.95);
- --ink: #e0e0e0;
- --ink-soft: #818181;
- --accent: #ffffff;
- --accent-fg: #0a0a0a;
- --accent-deep: #cccccc;
- --seafoam: #818181;
- --diff-added: #4a9;
- --diff-added-strong: #3a8;
- --diff-removed: #e55;
- --diff-removed-strong: #c44;
- --diff-diagonal: #ffffff11;
- --diff-scrollbar-rgb: 128, 128, 128;
- --gold: #999999;
+ --bg-glow-1: #141414;
+ --bg-glow-2: #181818;
+ --surface: #121212;
+ --surface-muted: #171717;
+ --nav-bg: rgba(10, 10, 10, 0.96);
+ --ink: #fafafa;
+ --ink-soft: #a1a1a1;
+ --accent: #dc2626;
+ --accent-fg: #ffffff;
+ --accent-deep: #ef4444;
+ --accent-subtle: rgba(220, 38, 38, 0.12);
+ --seafoam: #22c55e;
+ --diff-added: #22c55e;
+ --diff-added-strong: #16a34a;
+ --diff-removed: #ef4444;
+ --diff-removed-strong: #dc2626;
+ --diff-diagonal: rgba(220, 38, 38, 0.08);
+ --diff-scrollbar-rgb: 220, 38, 38;
+ --gold: #fbbf24;
--line: rgba(255, 255, 255, 0.08);
- --border-ui: rgba(255, 255, 255, 0.15);
- --border-ui-hover: rgba(255, 255, 255, 0.25);
- --border-ui-active: rgba(255, 255, 255, 0.4);
- --shadow: none;
+ --border-ui: rgba(255, 255, 255, 0.12);
+ --border-ui-hover: rgba(220, 38, 38, 0.5);
+ --border-ui-active: rgba(220, 38, 38, 0.7);
+ --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
- /* Status colors — monochrome TUI */
- --status-success-bg: rgba(255, 255, 255, 0.06);
- --status-success-fg: #a0a0a0;
- --status-warning-bg: rgba(255, 255, 255, 0.06);
- --status-warning-fg: #999999;
- --status-error-bg: rgba(255, 255, 255, 0.06);
- --status-error-fg: #b0b0b0;
+ /* Status colors — subtle, polished */
+ --status-success-bg: rgba(34, 197, 94, 0.12);
+ --status-success-fg: #22c55e;
+ --status-warning-bg: rgba(251, 191, 36, 0.12);
+ --status-warning-fg: #fbbf24;
+ --status-error-bg: rgba(239, 68, 68, 0.12);
+ --status-error-fg: #ef4444;
- /* Form controls */
- --input-border: rgba(255, 255, 255, 0.12);
- --input-bg: rgba(14, 28, 37, 0.84);
- --input-placeholder: rgba(184, 205, 216, 0.68);
- --input-focus-border: rgba(255, 255, 255, 0.4);
- --input-focus-ring: rgba(255, 255, 255, 0.12);
- --label-fg: rgba(206, 227, 238, 0.76);
+ /* Form controls — crisp, modern */
+ --input-border: rgba(255, 255, 255, 0.1);
+ --input-bg: rgba(18, 18, 18, 0.9);
+ --input-placeholder: rgba(161, 161, 161, 0.7);
+ --input-focus-border: rgba(220, 38, 38, 0.5);
+ --input-focus-ring: rgba(220, 38, 38, 0.2);
+ --label-fg: rgba(250, 250, 250, 0.8);
/* Interactive states */
--hover-bg: rgba(255, 255, 255, 0.04);
- --active-bg: rgba(255, 255, 255, 0.08);
+ --active-bg: rgba(220, 38, 38, 0.1);
/* Overlay */
- --overlay-bg: rgba(10, 10, 10, 0.65);
+ --overlay-bg: rgba(9, 9, 11, 0.75);
- /* Shadows */
- --shadow-dialog: 0 24px 50px rgba(0, 0, 0, 0.35);
- --shadow-hover: none;
+ /* Shadows — refined depth */
+ --shadow-dialog: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+ --shadow-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.3);
+ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.1);
/* Layout widths */
- --page-max: 1536px;
+ --page-max: 1400px;
--page-narrow: 900px;
--page-min: 320px;
@@ -161,73 +163,135 @@
--space-7: 48px;
--space-8: 64px;
- /* Typography scale */
- --fs-xs: 0.72rem;
- --fs-sm: 0.82rem;
- --fs-base: 0.88rem;
- --fs-md: 1rem;
- --fs-lg: 1.1rem;
+ /* Typography scale — refined */
+ --fs-xs: 0.75rem;
+ --fs-sm: 0.8125rem;
+ --fs-base: 0.875rem;
+ --fs-md: 0.9375rem;
+ --fs-lg: 1.0625rem;
--fs-xl: 1.25rem;
--fs-2xl: 1.5rem;
--fs-3xl: 2rem;
- /* No rounded corners — sharp TUI style */
- --r-lg: 2px;
- --r-md: 2px;
- --r-sm: 1px;
- --r-xs: 1px;
- --r-pill: 1px;
+ /* Modern rounded corners — polished but efficient */
+ --r-lg: 12px;
+ --r-md: 8px;
+ --r-sm: 6px;
+ --r-xs: 4px;
+ --r-pill: 9999px;
- /* Monospace-first typography */
- --font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
- --font-body: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+ /* Modern typography — clean and readable */
+ --font-display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+ --font-body: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
-/* Light theme — optional override, default is dark */
+/* Light theme — OpenClaw black, white, red */
[data-theme="light"] {
color-scheme: light;
- --bg: #f0f0f0;
- --bg-soft: #e8e8e8;
+ --bg: #fafafa;
+ --bg-soft: #f5f5f5;
--surface: #ffffff;
- --surface-muted: #f5f5f5;
- --nav-bg: rgba(240, 240, 240, 0.95);
+ --surface-muted: #f8f8f8;
+ --nav-bg: rgba(250, 250, 250, 0.96);
--ink: #0a0a0a;
- --ink-soft: #555555;
- --accent: #0a0a0a;
- --accent-fg: #f0f0f0;
- --accent-deep: #333333;
- --line: rgba(0, 0, 0, 0.12);
- --border-ui: rgba(0, 0, 0, 0.2);
- --border-ui-hover: rgba(0, 0, 0, 0.35);
- --border-ui-active: rgba(0, 0, 0, 0.5);
+ --ink-soft: #525252;
+ --accent: #dc2626;
+ --accent-fg: #ffffff;
+ --accent-deep: #b91c1c;
+ --accent-subtle: rgba(220, 38, 38, 0.08);
+ --line: rgba(0, 0, 0, 0.08);
+ --border-ui: rgba(0, 0, 0, 0.12);
+ --border-ui-hover: rgba(220, 38, 38, 0.4);
+ --border-ui-active: rgba(220, 38, 38, 0.6);
/* Status colors — light */
- --status-success-bg: rgba(0, 0, 0, 0.04);
- --status-success-fg: #555555;
- --status-warning-bg: rgba(0, 0, 0, 0.04);
- --status-warning-fg: #555555;
- --status-error-bg: rgba(0, 0, 0, 0.04);
- --status-error-fg: #333333;
+ --status-success-bg: rgba(34, 197, 94, 0.1);
+ --status-success-fg: #16a34a;
+ --status-warning-bg: rgba(245, 158, 11, 0.1);
+ --status-warning-fg: #d97706;
+ --status-error-bg: rgba(239, 68, 68, 0.1);
+ --status-error-fg: #dc2626;
/* Form controls — light */
- --input-border: rgba(0, 0, 0, 0.2);
- --input-bg: rgba(255, 255, 255, 0.94);
- --input-placeholder: rgba(88, 115, 133, 0.72);
- --input-focus-border: rgba(0, 0, 0, 0.5);
- --input-focus-ring: rgba(0, 0, 0, 0.08);
- --label-fg: rgba(70, 95, 113, 0.9);
+ --input-border: rgba(0, 0, 0, 0.12);
+ --input-bg: #ffffff;
+ --input-placeholder: rgba(82, 82, 82, 0.6);
+ --input-focus-border: rgba(220, 38, 38, 0.5);
+ --input-focus-ring: rgba(220, 38, 38, 0.15);
+ --label-fg: rgba(10, 10, 10, 0.8);
/* Interactive states — light */
- --hover-bg: rgba(0, 0, 0, 0.04);
- --active-bg: rgba(0, 0, 0, 0.08);
+ --hover-bg: rgba(0, 0, 0, 0.03);
+ --active-bg: rgba(220, 38, 38, 0.08);
/* Overlay — light */
- --overlay-bg: rgba(240, 240, 240, 0.65);
+ --overlay-bg: rgba(250, 250, 250, 0.75);
/* Shadows — light */
- --shadow-dialog: 0 24px 50px rgba(0, 0, 0, 0.12);
- --shadow-hover: none;
+ --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+ --shadow-dialog: 0 24px 48px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
+ --shadow-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.1);
+ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* ===== User Preferences ===== */
+
+/* Layout Density */
+[data-density="compact"] {
+ --space-1: 0.125rem;
+ --space-2: 0.25rem;
+ --space-3: 0.375rem;
+ --space-4: 0.5rem;
+ --space-5: 0.75rem;
+ --fs-base: 0.875rem;
+}
+
+/* Animation Level */
+[data-animation="reduced"],
+.reduce-motion {
+ --transition-fast: 0ms;
+ --transition-base: 0ms;
+ --transition-slow: 0ms;
+}
+
+[data-animation="reduced"] *,
+.reduce-motion * {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+}
+
+[data-animation="none"] *,
+[data-animation="none"]::before,
+[data-animation="none"]::after {
+ animation: none !important;
+ transition: none !important;
+}
+
+/* High Contrast Mode */
+.high-contrast {
+ --ink: #000000;
+ --ink-soft: #333333;
+ --line: rgba(0, 0, 0, 0.2);
+ --border-ui: rgba(0, 0, 0, 0.25);
+}
+
+.high-contrast[data-theme="dark"],
+[data-theme="dark"].high-contrast {
+ --ink: #ffffff;
+ --ink-soft: #e5e5e5;
+ --line: rgba(255, 255, 255, 0.2);
+ --border-ui: rgba(255, 255, 255, 0.25);
+}
+
+/* Code font size variable (set by JS) */
+:root {
+ --code-font-size: 14px;
+}
+
+pre, code, .code-block {
+ font-size: var(--code-font-size);
}
* {
@@ -257,8 +321,9 @@ a {
/* Global focus indicator for keyboard navigation */
:focus-visible {
- outline: 1px solid var(--ink);
+ outline: 2px solid var(--accent);
outline-offset: 2px;
+ border-radius: 2px;
}
.sr-only {
@@ -289,7 +354,10 @@ code {
}
.site-footer {
- padding: 0 28px 40px;
+ padding: var(--space-6) var(--space-5);
+ margin-top: auto;
+ background: var(--surface);
+ border-top: 1px solid var(--line);
}
.site-footer-inner {
@@ -300,38 +368,33 @@ code {
.site-footer-divider {
height: 1px;
background: var(--line);
- opacity: 0.6;
- margin: 18px 0 16px;
+ margin: var(--space-5) 0;
}
.site-footer-row {
display: flex;
align-items: center;
- justify-content: center;
- gap: 16px;
+ justify-content: space-between;
+ gap: 24px;
+ flex-wrap: wrap;
}
.site-footer-copy {
- font-size: 0.85rem;
+ font-size: var(--fs-sm);
color: var(--ink-soft);
- opacity: 0.72;
text-align: center;
- max-width: 720px;
+ flex: 1;
}
.site-footer-copy a {
- color: inherit;
- text-decoration: underline;
- text-decoration-color: rgba(255, 255, 255, 0.32);
- text-underline-offset: 3px;
- transition:
- color 0.2s ease,
- text-decoration-color 0.2s ease;
+ color: var(--accent);
+ text-decoration: none;
+ font-weight: 500;
+ transition: opacity 0.15s ease;
}
.site-footer-copy a:hover {
- color: var(--ink);
- text-decoration-color: rgba(255, 255, 255, 0.6);
+ opacity: 0.8;
}
.section-cta {
@@ -344,14 +407,16 @@ code {
position: sticky;
top: 0;
z-index: 10;
- background: var(--bg);
+ background: var(--nav-bg);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.navbar-inner {
max-width: var(--page-max);
margin: 0 auto;
- padding: 0 22px;
+ padding: 0 var(--space-5);
display: flex;
flex-direction: column;
gap: 0;
@@ -360,44 +425,52 @@ code {
.navbar-top {
display: flex;
align-items: center;
- gap: 12px;
- padding: 8px 0 10px;
+ gap: 16px;
+ padding: 12px 0;
}
.navbar-search {
flex: 1;
- max-width: 400px;
+ max-width: 420px;
display: flex;
align-items: center;
gap: var(--space-2);
background: var(--surface);
border: 1px solid var(--line);
- border-radius: var(--r-sm);
+ border-radius: var(--r-md);
padding: 0 var(--space-3);
- height: 32px;
+ height: 38px;
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.navbar-search:focus-within {
- border-color: var(--border-ui-active);
+ border-color: var(--input-focus-border);
+ box-shadow: 0 0 0 2px var(--input-focus-ring);
}
.navbar-search-icon {
color: var(--ink-soft);
- opacity: 0.5;
+ opacity: 0.6;
flex-shrink: 0;
+ transition: color 0.15s ease, opacity 0.15s ease;
+}
+
+.navbar-search:focus-within .navbar-search-icon {
+ color: var(--accent);
+ opacity: 1;
}
.navbar-search-input {
all: unset;
flex: 1;
- font-size: 0.88rem;
+ font-size: var(--fs-sm);
color: var(--ink);
min-width: 0;
}
.navbar-search-input::placeholder {
color: var(--ink-soft);
- opacity: 0.6;
+ opacity: 0.7;
}
.navbar-search-mobile-trigger {
@@ -435,11 +508,12 @@ code {
display: flex;
align-items: center;
justify-content: flex-start;
- gap: 14px;
+ gap: 4px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
- border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
+ border-top: 1px solid var(--line);
+ padding: 4px 0;
}
.navbar-tabs::-webkit-scrollbar {
@@ -454,49 +528,50 @@ code {
}
.navbar-tabs-secondary {
- margin-left: 2px;
- padding-left: 8px;
- border-left: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
+ margin-left: 8px;
+ padding-left: 12px;
+ border-left: 1px solid var(--line);
}
.navbar-tab {
display: inline-flex;
align-items: center;
- gap: var(--space-2);
- padding: 9px 10px;
+ gap: 6px;
+ padding: 8px 14px;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-soft);
- border-bottom: 1px solid transparent;
+ border-radius: var(--r-sm);
white-space: nowrap;
- min-height: 38px;
- transition: color 0.1s ease, border-color 0.1s ease;
+ transition: all 0.15s ease;
text-decoration: none;
}
.navbar-tab:hover {
color: var(--ink);
+ background: var(--hover-bg);
}
.navbar-tab:hover svg {
- opacity: 0.85;
+ opacity: 0.9;
}
.navbar-tab.active,
.navbar-tab[data-status="active"] {
color: var(--ink);
font-weight: 600;
- border-bottom: 1px solid var(--ink);
+ background: var(--active-bg);
}
.navbar-tab.active svg,
.navbar-tab[data-status="active"] svg {
opacity: 1;
+ color: var(--accent);
}
.navbar-tab-secondary {
- font-size: 0.8rem;
- opacity: 0.55;
+ font-size: var(--fs-xs);
+ opacity: 0.7;
}
.navbar-tab-secondary:hover {
@@ -504,14 +579,14 @@ code {
}
.brand {
- font-family: var(--font-mono);
- font-size: var(--fs-base);
- font-weight: 600;
+ font-family: var(--font-display);
+ font-size: var(--fs-md);
+ font-weight: 700;
letter-spacing: -0.02em;
display: flex;
align-items: center;
- gap: var(--space-2);
- text-transform: lowercase;
+ gap: 10px;
+ color: var(--ink);
}
.brand-name {
@@ -519,12 +594,13 @@ code {
}
.brand-mark {
- width: 24px;
- height: 24px;
+ width: 32px;
+ height: 32px;
border-radius: var(--r-sm);
display: grid;
place-items: center;
overflow: hidden;
+ background: transparent;
}
.brand-mark img {
@@ -675,30 +751,32 @@ code {
/* @deprecated — use