diff --git a/frontend/src/components/RoomInfoPanel.css b/frontend/src/components/RoomInfoPanel.css index be47f7a..25d196d 100644 --- a/frontend/src/components/RoomInfoPanel.css +++ b/frontend/src/components/RoomInfoPanel.css @@ -193,6 +193,9 @@ } .room-info-settings-toggle { + display: flex; + align-items: center; + gap: 6px; background: transparent; border: 1px solid var(--ds-border); color: var(--ds-text); @@ -205,6 +208,17 @@ text-align: left; } +.room-info-settings-chevron { + display: inline-flex; + flex: none; + color: var(--ds-muted); + transition: transform 0.15s ease; +} + +.room-info-settings-chevron-open { + transform: rotate(90deg); +} + .room-info-settings-form { display: flex; flex-direction: column; diff --git a/frontend/src/components/RoomInfoPanel.tsx b/frontend/src/components/RoomInfoPanel.tsx index e43bb6a..fa326ed 100644 --- a/frontend/src/components/RoomInfoPanel.tsx +++ b/frontend/src/components/RoomInfoPanel.tsx @@ -47,6 +47,20 @@ import './RoomInfoPanel.css' const EVENT_TYPES: EventType[] = ['message.created', 'message.updated'] +// Disclosure chevron for the collapsible sections below (Files, +// Integrations, Room settings) -- points right when collapsed, rotates 90° +// clockwise (pointing down) when expanded, same convention as most +// disclosure triangles rather than a +/- glyph. +function DisclosureChevron({ open }: { open: boolean }) { + return ( + + + + ) +} + interface RoomInfoPanelProps { room: MyRoomItem members: RoomMember[] @@ -331,7 +345,7 @@ export function RoomInfoPanel({
{filesOpen && (
@@ -419,7 +433,7 @@ export function RoomInfoPanel({ className="room-info-settings-toggle" onClick={() => setIntegrationsOpen((v) => !v)} > - Integrations {integrationsOpen ? '−' : '+'} + Integrations {integrationsOpen && (
@@ -518,7 +532,7 @@ export function RoomInfoPanel({ className="room-info-settings-toggle" onClick={() => setSettingsOpen((v) => !v)} > - Room settings {settingsOpen ? '−' : '+'} + Room settings {settingsOpen && (