UI minor brush ups

This commit is contained in:
debu-2 2026-10-04 00:23:52 +05:30
parent 1a15409b2d
commit 67ccf91e6f
7 changed files with 303 additions and 109 deletions

View file

@ -63,9 +63,9 @@ function SidebarSection({ title, children, className = "" }) {
);
}
function NavBadge({ value }) {
function NavBadge({ value, variant = "coral" }) {
if (!value || value <= 0) return null;
return <em>{value}</em>;
return <em className={variant === "neutral" ? "nav-badge-neutral" : "nav-badge-coral"}>{value}</em>;
}
export default function DashboardPage() {
@ -81,6 +81,7 @@ export default function DashboardPage() {
const [mailRefreshKey, setMailRefreshKey] = useState(0);
const [lens, setLens] = useState("all");
const [agentNav, setAgentNav] = useState(null);
const [labelsExpanded, setLabelsExpanded] = useState(false);
const [mailStats, setMailStats] = useState({
unread: 0,
starred: 0,
@ -223,11 +224,17 @@ export default function DashboardPage() {
<button aria-label="Close navigation" type="button" onClick={() => setMenuOpen(false)}><X size={19} /></button>
</div>
<button className="dashboard-compose" type="button" onClick={() => setComposeOpen(true)}>
<Mail size={17} />
<span>Compose</span>
<ChevronDown size={14} className="dashboard-compose-caret" />
</button>
<div className="dashboard-compose-wrap">
<button className="dashboard-compose" type="button" onClick={() => setComposeOpen(true)}>
<span className="dashboard-compose-main">
<Mail size={16} strokeWidth={1.75} />
<span>Compose</span>
</span>
</button>
<button className="dashboard-compose-menu" type="button" aria-label="Compose options">
<ChevronDown size={14} strokeWidth={1.75} />
</button>
</div>
<SidebarSection title="Mail" className="dashboard-sidebar-mail">
<nav aria-label="Mail">
@ -257,9 +264,17 @@ export default function DashboardPage() {
>
<i className={`label-dot label-dot-${tone}`} />
<span>{name}</span>
<NavBadge value={mailStats.labels?.[countKey]} />
<NavBadge variant="neutral" value={mailStats.labels?.[countKey]} />
</button>
))}
<button
type="button"
className="dashboard-nav-item dashboard-label-more"
onClick={() => setLabelsExpanded((open) => !open)}
>
<ChevronDown size={14} strokeWidth={1.75} className={labelsExpanded ? "open" : ""} />
<span>{labelsExpanded ? "Less" : "More"}</span>
</button>
</nav>
</SidebarSection>