| | 0 | 1 | | export function SidebarGroup({ title, onAdd, children }: { |
| | | 2 | | title: string; |
| | | 3 | | onAdd?: () => void; |
| | | 4 | | children: React.ReactNode; |
| | | 5 | | }) { |
| | 0 | 6 | | return ( |
| | | 7 | | <div style={{ marginBottom: 18 }}> |
| | | 8 | | <div style={{ |
| | | 9 | | padding: "0 14px 6px", fontSize: 10, fontWeight: 600, |
| | | 10 | | textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--c-fg-3)", |
| | | 11 | | display: "flex", alignItems: "center", justifyContent: "space-between", |
| | | 12 | | }}> |
| | | 13 | | <span className="sidebar-group-title">{title}</span> |
| | | 14 | | {onAdd && ( |
| | | 15 | | <button onClick={onAdd} title="New room" style={{ |
| | | 16 | | border: "none", background: "transparent", color: "var(--c-fg-3)", |
| | | 17 | | fontSize: 14, lineHeight: 1, cursor: "pointer", padding: "0 2px", |
| | | 18 | | fontFamily: "inherit", borderRadius: 3, |
| | | 19 | | }}>＋</button> |
| | | 20 | | )} |
| | | 21 | | </div> |
| | | 22 | | {children} |
| | | 23 | | </div> |
| | | 24 | | ); |
| | | 25 | | } |
| | | 26 | | |
| | 0 | 27 | | export function SidebarRow({ label, count, active, dot, onClick }: { |
| | | 28 | | label: string; |
| | | 29 | | count: number; |
| | | 30 | | active: boolean; |
| | | 31 | | dot?: boolean; |
| | | 32 | | onClick: () => void; |
| | | 33 | | }) { |
| | 0 | 34 | | return ( |
| | | 35 | | <button |
| | | 36 | | onClick={onClick} |
| | | 37 | | className={active ? "sidebar-row-active" : undefined} |
| | | 38 | | style={{ |
| | | 39 | | width: "100%", textAlign: "left", border: "none", cursor: "pointer", |
| | | 40 | | display: "flex", alignItems: "center", justifyContent: "space-between", |
| | | 41 | | padding: "5px 14px", fontSize: 13, |
| | | 42 | | color: active ? "var(--c-fg)" : "var(--c-fg-2)", |
| | | 43 | | background: active ? "var(--c-accent-bg)" : "transparent", |
| | | 44 | | borderLeft: `2px solid ${active ? "var(--c-accent)" : "transparent"}`, |
| | | 45 | | fontFamily: "inherit", |
| | | 46 | | }} |
| | | 47 | | > |
| | | 48 | | <span style={{ display: "flex", alignItems: "center", gap: 8 }}> |
| | | 49 | | {dot && ( |
| | | 50 | | <span style={{ |
| | | 51 | | width: 6, height: 6, borderRadius: 2, |
| | | 52 | | background: "var(--c-accent)", opacity: 0.6, flexShrink: 0, |
| | | 53 | | }} /> |
| | | 54 | | )} |
| | | 55 | | {label} |
| | | 56 | | </span> |
| | | 57 | | <span style={{ fontSize: 11, color: "var(--c-fg-3)", fontVariantNumeric: "tabular-nums" }}> |
| | | 58 | | {count} |
| | | 59 | | </span> |
| | | 60 | | </button> |
| | | 61 | | ); |
| | | 62 | | } |