Replace +/- disclosure indicators with a rotating chevron in RoomInfoPanel

The Files/Integrations/Room settings section toggles used a trailing
"+"/"-" glyph -- confusing as a collapse/expand affordance. Replaced with
a small chevron placed before the label, pointing right when collapsed
and rotating 90deg clockwise (pointing down) when expanded, the more
conventional disclosure-triangle pattern.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-17 18:40:14 -06:00
co-authored by Claude Sonnet 5
parent 84dc99d1a1
commit 8716fc5356
2 changed files with 31 additions and 3 deletions
+14
View File
@@ -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;
+17 -3
View File
@@ -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 (
<span className={`room-info-settings-chevron${open ? ' room-info-settings-chevron-open' : ''}`}>
<svg width="12" height="12" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<polyline points="7,4 13,10 7,16" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
)
}
interface RoomInfoPanelProps {
room: MyRoomItem
members: RoomMember[]
@@ -331,7 +345,7 @@ export function RoomInfoPanel({
<div className="room-info-section">
<button type="button" className="room-info-settings-toggle" onClick={() => setFilesOpen((v) => !v)}>
Files {filesOpen ? '' : '+'}
<DisclosureChevron open={filesOpen} /> Files
</button>
{filesOpen && (
<div className="room-info-files">
@@ -419,7 +433,7 @@ export function RoomInfoPanel({
className="room-info-settings-toggle"
onClick={() => setIntegrationsOpen((v) => !v)}
>
Integrations {integrationsOpen ? '' : '+'}
<DisclosureChevron open={integrationsOpen} /> Integrations
</button>
{integrationsOpen && (
<div className="room-info-integrations">
@@ -518,7 +532,7 @@ export function RoomInfoPanel({
className="room-info-settings-toggle"
onClick={() => setSettingsOpen((v) => !v)}
>
Room settings {settingsOpen ? '' : '+'}
<DisclosureChevron open={settingsOpen} /> Room settings
</button>
{settingsOpen && (
<form className="room-info-settings-form" onSubmit={handleSaveSettings}>