From fcf16fd65403a7b0550b8e2dca20ce2164aeb31f Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 10 Jun 2026 17:15:34 -0400
Subject: [PATCH] refactor(settings): replace composer toolbar toggle rows with
 chip grid

8 individual SettingTile rows collapsed into a single wrapped chip grid.
Active chips show as Primary+outlined; inactive as Secondary. Clicking
any chip toggles it. Drops from ~83 lines to ~25 and reads at a glance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/features/settings/general/General.tsx | 116 ++++++------------
 1 file changed, 35 insertions(+), 81 deletions(-)

diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index efa9874c9..8a83441c8 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -933,6 +933,17 @@ function Editor() {
     setComposerToolbarButtons({ ...composerToolbarButtons, [key]: !composerToolbarButtons[key] });
   };
 
+  const TOOLBAR_CHIPS: Array<{ key: keyof ComposerToolbarSettings; label: string }> = [
+    { key: 'showFormat', label: 'Format' },
+    { key: 'showEmoji', label: 'Emoji' },
+    { key: 'showSticker', label: 'Sticker' },
+    { key: 'showGif', label: 'GIF' },
+    { key: 'showLocation', label: 'Location' },
+    { key: 'showPoll', label: 'Poll' },
+    { key: 'showVoice', label: 'Voice' },
+    { key: 'showSchedule', label: 'Schedule' },
+  ];
+
   return (
     <Box direction="Column" gap="100">
       <Text size="L400">Editor</Text>
@@ -958,89 +969,32 @@ function Editor() {
           after={<Switch variant="Primary" value={editorToolbar} onChange={setEditorToolbar} />}
         />
       </SequenceCard>
-      <Text size="L400" style={{ marginTop: '8px' }}>Composer Toolbar Buttons</Text>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column" gap="300">
         <SettingTile
-          title="Format Toggle"
-          description="Button to show/hide the text formatting toolbar."
-          after={
-            <Switch
-              variant="Primary"
-              value={composerToolbarButtons?.showFormat ?? true}
-              onChange={() => toggleToolbarButton('showFormat')}
-            />
-          }
-        />
-        <SettingTile
-          title="Emoji"
-          after={
-            <Switch
-              variant="Primary"
-              value={composerToolbarButtons?.showEmoji ?? true}
-              onChange={() => toggleToolbarButton('showEmoji')}
-            />
-          }
-        />
-        <SettingTile
-          title="Sticker"
-          after={
-            <Switch
-              variant="Primary"
-              value={composerToolbarButtons?.showSticker ?? true}
-              onChange={() => toggleToolbarButton('showSticker')}
-            />
-          }
-        />
-        <SettingTile
-          title="GIF"
-          after={
-            <Switch
-              variant="Primary"
-              value={composerToolbarButtons?.showGif ?? true}
-              onChange={() => toggleToolbarButton('showGif')}
-            />
-          }
-        />
-        <SettingTile
-          title="Location"
-          after={
-            <Switch
-              variant="Primary"
-              value={composerToolbarButtons?.showLocation ?? true}
-              onChange={() => toggleToolbarButton('showLocation')}
-            />
-          }
-        />
-        <SettingTile
-          title="Poll"
-          after={
-            <Switch
-              variant="Primary"
-              value={composerToolbarButtons?.showPoll ?? true}
-              onChange={() => toggleToolbarButton('showPoll')}
-            />
-          }
-        />
-        <SettingTile
-          title="Voice Message"
-          after={
-            <Switch
-              variant="Primary"
-              value={composerToolbarButtons?.showVoice ?? true}
-              onChange={() => toggleToolbarButton('showVoice')}
-            />
-          }
-        />
-        <SettingTile
-          title="Schedule Message"
-          after={
-            <Switch
-              variant="Primary"
-              value={composerToolbarButtons?.showSchedule ?? true}
-              onChange={() => toggleToolbarButton('showSchedule')}
-            />
-          }
+          title="Composer Toolbar"
+          description="Tap a button to show or hide it in the message composer."
         />
+        <Box
+          wrap="Wrap"
+          gap="200"
+          style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}
+        >
+          {TOOLBAR_CHIPS.map(({ key, label }) => {
+            const active = composerToolbarButtons?.[key] ?? true;
+            return (
+              <Chip
+                key={key}
+                variant={active ? 'Primary' : 'Secondary'}
+                outlined={active}
+                radii="Pill"
+                onClick={() => toggleToolbarButton(key)}
+                aria-pressed={active}
+              >
+                <Text size="T300">{label}</Text>
+              </Chip>
+            );
+          })}
+        </Box>
       </SequenceCard>
     </Box>
   );