vasyansk
36964c9f21
Top bar (breadcrumb + actions + account), rounded panel cards with active accent + rich headers, sidebar count pills/collapsible groups/daemon footer, preset chips + scrollback pill, Event Center tabs + external-notify footer, JetBrains Mono + Inter via @fontsource, shared theme tokens. Backend-absent pieces are mocked (search, zoom, uptime, channels) pending SP1–SP5. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
24 lines
1.2 KiB
TypeScript
24 lines
1.2 KiB
TypeScript
import { Search } from "lucide-react";
|
|
import { COLORS, FONT } from "./theme";
|
|
import { PresetPicker } from "./PresetPicker";
|
|
|
|
/** Top-of-grid toolbar: layout presets on the left, scrollback search on the right (search is a mock). */
|
|
export function CenterToolbar({ selected, onSelect }: { selected: string; onSelect: (id: string) => void }) {
|
|
return (
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 12px", height: 46, borderBottom: `1px solid ${COLORS.borderSubtle}` }}>
|
|
<PresetPicker selected={selected} onSelect={onSelect} />
|
|
<div style={{ flex: 1 }} />
|
|
<div
|
|
title="Search scrollback (mock)"
|
|
style={{
|
|
display: "flex", alignItems: "center", gap: 6, height: 24, padding: "0 8px", borderRadius: 6,
|
|
background: COLORS.bgPanel, border: `1px solid ${COLORS.borderSubtle}`, cursor: "pointer",
|
|
}}>
|
|
<Search size={12} color={COLORS.textMuted} />
|
|
<span style={{ fontFamily: FONT.ui, fontSize: 11, color: COLORS.textMuted }}>Search scrollback</span>
|
|
<span style={{ fontFamily: FONT.mono, fontSize: 11, color: COLORS.textMuted }}>⌘F</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|