kai/smart-support
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): implement premium beige design system and ux refinements

Browse Source
This commit is contained in:
Yaojia Wang
2026-04-05 22:35:48 +02:00
parent d2b4610df9
commit 189a0fad34
30 changed files with 3651 additions and 801 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/src/components/NavBar.tsx
View File

@@ -1,64 +1,56 @@
import { NavLink } from "react-router-dom";
const navLinks = [
{ to: "/", label: "Chat", exact: true },
{ to: "/replay", label: "Replay" },
{ to: "/dashboard", label: "Dashboard" },
{ to: "/review", label: "API Review" },
{ to: "/dashboard", label: "Dashboard", icon: "grid" },
{ to: "/", label: "Inbox", icon: "inbox" },
{ to: "/replay", label: "Conversation Replay", icon: "play" },
{ to: "/review", label: "Agents & Tools", icon: "cpu" },
];
const styles: Record<string, React.CSSProperties> = {
nav: {
display: "flex",
alignItems: "center",
gap: "0",
padding: "0 16px",
borderBottom: "1px solid #e0e0e0",
background: "#fff",
height: "48px",
boxShadow: "0 1px 4px rgba(0,0,0,0.06)",
},
brand: {
fontWeight: 700,
fontSize: "16px",
color: "#1a1a1a",
marginRight: "24px",
textDecoration: "none",
},
link: {
padding: "0 14px",
height: "48px",
display: "flex",
alignItems: "center",
fontSize: "14px",
color: "#555",
textDecoration: "none",
borderBottom: "2px solid transparent",
transition: "color 0.15s, border-color 0.15s",
},
activeLink: {
color: "#1976d2",
borderBottom: "2px solid #1976d2",
},
};
function getIcon(name: string) {
switch (name) {
case "grid": return <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>;
case "inbox": return <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>;
case "play": return <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>;
case "cpu": return <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>;
default: return null;
}
}
export function NavBar() {
return (
<nav style={styles.nav}>
<span style={styles.brand}>Smart Support</span>
{navLinks.map(({ to, label }) => (
<NavLink
key={to}
to={to}
end={to === "/"}
style={({ isActive }) => ({
...styles.link,
...(isActive ? styles.activeLink : {}),
})}
>
{label}
</NavLink>
))}
<nav className="app-sidebar">
<div className="brand-header">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="brand-logo-svg">
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
<line x1="9" y1="9" x2="9.01" y2="9"></line>
<line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>
<span style={{ fontSize: "1.25rem", letterSpacing: "-0.03em" }}>Nexus AI</span>
</div>
<div className="nav-links" style={{ marginTop: "1rem" }}>
{navLinks.map(({ to, label, icon }) => (
<NavLink
key={to}
to={to}
end={to === "/"}
className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
style={{ display: "flex", gap: "12px", padding: "0.875rem 1rem", fontSize: "0.9375rem" }}
>
<span style={{ opacity: 0.7 }}>{getIcon(icon)}</span>
{label}
</NavLink>
))}
</div>
<div style={{ flex: 1 }} />
<div style={{ display: "flex", alignItems: "center", gap: "12px", borderTop: "1px solid var(--border-light)", paddingTop: "1rem" }}>
<div style={{ width: "36px", height: "36px", borderRadius: "50%", background: "var(--brand-primary)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold" }}>A</div>
<div>
<div style={{ fontWeight: 600, fontSize: "0.875rem" }}>Alex Thompson</div>
<div style={{ fontSize: "0.75rem", color: "var(--text-secondary)" }}>Nexus Corp</div>
</div>
</div>
</nav>
);
}