agent/Understand-Anything
2
0
Fork 0
mirror of https://github.com/Egonex-AI/Understand-Anything.git synced 2026-06-22 10:58:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: customizable heading font via theme settings (#121)

Browse Source 
Add a `headingFont` option to ThemeConfig that lets users switch
heading typography between Serif (default), Sans, and Mono via the
existing Theme Picker UI.

- New `--font-heading` CSS custom property (defaults to `--font-serif`)
- Theme engine applies the selected font on config change
- ThemePicker gets a "Heading Font" toggle section
- All 15 component files updated from `font-serif` to `font-heading`
- Selection persists in localStorage alongside other theme settings
- Backwards-compatible: existing configs without `headingFont` default to serif

Closes #120
This commit is contained in:
Yuxiang Lin
2026-05-08 22:20:47 +08:00
committed by GitHub
Unverified
parent 05fd42343c 92a13eadb5
commit 5a2ffb1e0f
21 changed files with 75 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
understand-anything-plugin/packages/dashboard/src/App.tsx
+1 -1
View File
@@ -401,7 +401,7 @@ function Dashboard({ accessToken }: { accessToken: string }) {
<header className="flex items-center px-3 sm:px-5 py-3 bg-surface border-b border-border-subtle shrink-0 gap-2 sm:gap-4">
{/* Left — fixed */}
<div className="flex items-center gap-3 sm:gap-5 shrink-0 min-w-0">
<h1 className="font-serif text-base sm:text-lg text-text-primary tracking-wide truncate max-w-[160px] sm:max-w-[220px] lg:max-w-none">
<h1 className="font-heading text-base sm:text-lg text-text-primary tracking-wide truncate max-w-[160px] sm:max-w-[220px] lg:max-w-none">
{graph?.project.name ?? "Understand Anything"}
</h1>
<div className="w-px h-5 bg-border-subtle hidden sm:block" />
understand-anything-plugin/packages/dashboard/src/components/CodeViewer.tsx
+1 -1
View File
@@ -155,7 +155,7 @@ export default function CodeViewer({
</span>
<span className="text-[10px] text-text-muted">{lineInfo}</span>
</div>
<div className="text-sm font-serif text-text-primary truncate" title={node.name}>
<div className="text-sm font-heading text-text-primary truncate" title={node.name}>
{node.name}
</div>
{node.filePath && (
understand-anything-plugin/packages/dashboard/src/components/ContainerNode.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ function ContainerNodeComponent({ data, width, height }: NodeProps<ContainerFlow
}}
>
<div
className="flex items-center justify-between font-serif"
className="flex items-center justify-between font-heading"
style={{
padding: "12px 16px",
color: color.label,
understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx
+1 -1
View File
@@ -156,7 +156,7 @@ function CustomNodeComponent({
</span>
</div>
<div className="text-sm font-serif text-text-primary truncate" title={data.label}>
<div className="text-sm font-heading text-text-primary truncate" title={data.label}>
{truncatedName}
</div>
understand-anything-plugin/packages/dashboard/src/components/DomainClusterNode.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ function DomainClusterNode({ data }: NodeProps<DomainClusterFlowNode>) {
<Handle type="target" position={Position.Left} className="!bg-accent/60 !w-2 !h-2" />
<Handle type="source" position={Position.Right} className="!bg-accent/60 !w-2 !h-2" />
<div className="font-serif text-sm text-accent font-semibold mb-1 truncate">
<div className="font-heading text-sm text-accent font-semibold mb-1 truncate">
{data.label}
</div>
<div className="text-[11px] text-text-secondary line-clamp-2 mb-2">
understand-anything-plugin/packages/dashboard/src/components/KeyboardShortcutsHelp.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export default function KeyboardShortcutsHelp({
{/* Header */}
<div className="sticky top-0 glass-heavy border-b border-border-subtle px-6 py-4 flex items-center justify-between">
<div>
<h2 className="text-xl font-serif text-text-primary">
<h2 className="text-xl font-heading text-text-primary">
Keyboard Shortcuts
</h2>
<p className="text-xs text-text-muted mt-1">
understand-anything-plugin/packages/dashboard/src/components/LayerClusterNode.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ function LayerClusterNode({
</div>
{/* Layer name */}
<div className="text-lg font-serif text-text-primary mb-1">
<div className="text-lg font-heading text-text-primary mb-1">
{data.layerName}
</div>
understand-anything-plugin/packages/dashboard/src/components/LearnPanel.tsx
+2 -2
View File
@@ -39,7 +39,7 @@ export default function LearnPanel() {
return (
<div className="h-full w-full overflow-auto p-5">
<div className="mb-4">
<h2 className="text-lg font-serif text-text-primary mb-1">Project Tour</h2>
<h2 className="text-lg font-heading text-text-primary mb-1">Project Tour</h2>
<p className="text-xs text-text-muted">
{tourSteps.length} steps &middot; Guided walkthrough of the codebase
</p>
@@ -112,7 +112,7 @@ export default function LearnPanel() {
{/* Scrollable content */}
<div className="flex-1 overflow-y-auto p-4 min-h-0">
{/* Step title */}
<h2 className="text-lg font-serif text-text-primary mb-3">{step.title}</h2>
<h2 className="text-lg font-heading text-text-primary mb-3">{step.title}</h2>
{/* Description via ReactMarkdown */}
<div className="text-sm text-text-secondary leading-relaxed mb-4 tour-markdown">
understand-anything-plugin/packages/dashboard/src/components/MobileDrawer.tsx
+1 -1
View File
@@ -107,7 +107,7 @@ export default function MobileDrawer({
<span className="text-[10px] font-semibold uppercase tracking-[0.2em] text-accent">
Controls
</span>
<h2 className="font-serif text-lg text-text-primary mt-0.5 leading-none">
<h2 className="font-heading text-lg text-text-primary mt-0.5 leading-none">
{graph?.project.name ?? "Dashboard"}
</h2>
</div>
understand-anything-plugin/packages/dashboard/src/components/MobileLayout.tsx
+1 -1
View File
@@ -95,7 +95,7 @@ export default function MobileLayout({
</svg>
</button>
<h1 className="font-serif text-base flex-1 min-w-0 truncate text-center text-text-primary tracking-wide">
<h1 className="font-heading text-base flex-1 min-w-0 truncate text-center text-text-primary tracking-wide">
{graph?.project.name ?? "Understand Anything"}
</h1>
understand-anything-plugin/packages/dashboard/src/components/NodeInfo.tsx
+1 -1
View File
@@ -410,7 +410,7 @@ export default function NodeInfo() {
</div>
<div className="flex items-center justify-between mb-2">
<h2 className="text-lg font-serif text-text-primary">{node.name}</h2>
<h2 className="text-lg font-heading text-text-primary">{node.name}</h2>
<button
onClick={() => setFocusNode(focusNodeId === node.id ? null : node.id)}
className={`text-[10px] font-semibold uppercase tracking-wider px-2.5 py-1 rounded transition-colors ${
understand-anything-plugin/packages/dashboard/src/components/NodeTooltip.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ export default function NodeTooltip({
</div>
{/* Name */}
<h4 className="text-sm font-serif text-text-primary mb-2 break-words">
<h4 className="text-sm font-heading text-text-primary mb-2 break-words">
{data.label}
</h4>
understand-anything-plugin/packages/dashboard/src/components/PathFinderModal.tsx
+1 -1
View File
@@ -124,7 +124,7 @@ export default function PathFinderModal({ isOpen, onClose }: PathFinderModalProp
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<h2 className="font-serif text-xl text-text-primary">Dependency Path Finder</h2>
<h2 className="font-heading text-xl text-text-primary">Dependency Path Finder</h2>
</div>
<button
onClick={onClose}
understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export default function ProjectOverview() {
return (
<div className="h-full w-full overflow-auto p-5 animate-fade-slide-in">
{/* Project name */}
<h2 className="font-serif text-2xl text-text-primary mb-1">{project.name}</h2>
<h2 className="font-heading text-2xl text-text-primary mb-1">{project.name}</h2>
<p className="text-sm text-text-secondary leading-relaxed mb-6">{project.description}</p>
{/* Stats grid */}
understand-anything-plugin/packages/dashboard/src/components/ThemePicker.tsx
+36 -1
View File
@@ -1,8 +1,9 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { useTheme, PRESETS } from "../themes/index.ts";
import type { HeadingFont } from "../themes/index.ts";
export function ThemePicker() {
const { config, preset, setPreset, setAccent } = useTheme();
const { config, preset, setPreset, setAccent, setHeadingFont } = useTheme();
const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
@@ -136,6 +137,40 @@ export function ThemePicker() {
))}
</div>
</div>
{/* Heading font */}
<div>
<div className="text-[10px] font-semibold text-text-muted uppercase tracking-wider mb-2">
Heading Font
</div>
<div className="flex gap-1">
{([
{ id: "serif" as HeadingFont, label: "Serif", sample: "Aa" },
{ id: "sans" as HeadingFont, label: "Sans", sample: "Aa" },
{ id: "mono" as HeadingFont, label: "Mono", sample: "Aa" },
]).map((opt) => (
<button
key={opt.id}
onClick={() => setHeadingFont(opt.id)}
className={`flex-1 px-2 py-1.5 rounded text-xs transition-colors ${
(config.headingFont ?? "serif") === opt.id
? "bg-accent/15 text-accent"
: "text-text-secondary hover:text-text-primary hover:bg-elevated"
}`}
style={{
fontFamily:
opt.id === "serif"
? "var(--font-serif)"
: opt.id === "mono"
? "var(--font-mono)"
: "var(--font-sans)",
}}
>
{opt.label}
</button>
))}
</div>
</div>
</div>
)}
</div>
understand-anything-plugin/packages/dashboard/src/components/TokenGate.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export default function TokenGate({ onTokenValid }: TokenGateProps) {
<div className="h-screen w-screen flex items-center justify-center bg-root noise-overlay">
<div className="w-full max-w-md px-8 py-10 bg-surface border border-border-subtle rounded-lg shadow-2xl">
{/* Heading */}
<h1 className="font-serif text-2xl text-text-primary tracking-wide text-center mb-2">
<h1 className="font-heading text-2xl text-text-primary tracking-wide text-center mb-2">
Access Token Required
</h1>
<p className="text-text-muted text-sm text-center mb-8">
understand-anything-plugin/packages/dashboard/src/index.css
+3
View File
@@ -80,8 +80,11 @@
--font-serif: 'DM Serif Display', Georgia, serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-sans: 'Inter', system-ui, sans-serif;
--font-heading: var(--font-serif);
}
.font-heading { font-family: var(--font-heading); }
/* Base styles */
html {
transition: background-color 0.2s ease, color 0.2s ease;
understand-anything-plugin/packages/dashboard/src/themes/ThemeContext.tsx
+7 -2
View File
@@ -7,7 +7,7 @@ import {
useState,
type ReactNode,
} from "react";
import type { PresetId, ThemeConfig, ThemePreset } from "./types.ts";
import type { HeadingFont, PresetId, ThemeConfig, ThemePreset } from "./types.ts";
import { DEFAULT_THEME_CONFIG } from "./types.ts";
import { getPreset } from "./presets.ts";
import { applyTheme } from "./theme-engine.ts";
@@ -19,6 +19,7 @@ interface ThemeContextValue {
preset: ThemePreset;
setPreset: (presetId: PresetId) => void;
setAccent: (accentId: string) => void;
setHeadingFont: (font: HeadingFont) => void;
}
const ThemeContext = createContext<ThemeContextValue | null>(null);
@@ -85,10 +86,14 @@ export function ThemeProvider({ metaTheme, children }: ThemeProviderProps) {
setConfig((prev) => ({ ...prev, accentId }));
}, []);
const setHeadingFont = useCallback((font: HeadingFont) => {
setConfig((prev) => ({ ...prev, headingFont: font }));
}, []);
const preset = getPreset(config.presetId);
return (
<ThemeContext.Provider value={{ config, preset, setPreset, setAccent }}>
<ThemeContext.Provider value={{ config, preset, setPreset, setAccent, setHeadingFont }}>
{children}
</ThemeContext.Provider>
);
understand-anything-plugin/packages/dashboard/src/themes/index.ts
+1 -1
View File
@@ -1,5 +1,5 @@
export { ThemeProvider, useTheme } from "./ThemeContext.tsx";
export { PRESETS, getPreset, getAccent } from "./presets.ts";
export { applyTheme } from "./theme-engine.ts";
export type { PresetId, ThemeConfig, ThemePreset, AccentSwatch } from "./types.ts";
export type { HeadingFont, PresetId, ThemeConfig, ThemePreset, AccentSwatch } from "./types.ts";
export { DEFAULT_THEME_CONFIG } from "./types.ts";
understand-anything-plugin/packages/dashboard/src/themes/theme-engine.ts
+9
View File
@@ -53,4 +53,13 @@ export function applyTheme(config: ThemeConfig): void {
// 4. Set data-theme for CSS-only selectors
document.documentElement.setAttribute("data-theme", preset.isDark ? "dark" : "light");
// 5. Apply heading font preference
const fontMap: Record<string, string> = {
serif: "var(--font-serif)",
sans: "var(--font-sans)",
mono: "var(--font-mono)",
};
const headingFont = config.headingFont ?? "serif";
style.setProperty("--font-heading", fontMap[headingFont] ?? fontMap.serif);
}
understand-anything-plugin/packages/dashboard/src/themes/types.ts
+3
View File
@@ -22,9 +22,12 @@ export interface ThemePreset {
defaultAccentId: string;
}
export type HeadingFont = "serif" | "sans" | "mono";
export interface ThemeConfig {
presetId: PresetId;
accentId: string;
headingFont?: HeadingFont;
}
export const DEFAULT_THEME_CONFIG: ThemeConfig = {