From 8716fc5356c89decc40a3c1eec4ac0d104b69e73 Mon Sep 17 00:00:00 2001
From: Keith Smith <keithsmith@darksingularity.org>
Date: Mon, 17 Aug 2026 18:40:14 -0600
Subject: [PATCH] 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>
---
 frontend/src/components/RoomInfoPanel.css | 14 ++++++++++++++
 frontend/src/components/RoomInfoPanel.tsx | 20 +++++++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

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 (
+    <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}>