From 50076962f669a88444a25f142934cc223b797c47 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 26 Jun 2026 16:21:33 -0400
Subject: [PATCH] fix(ui): collapse PTT badge to single folds Chip (N53);
 responsive bg pickers (N81)

N53: removed the duplicate lotusTerminal PTT-badge branch (raw <Box> with
--lt-* vars + bespoke rem/animation styling). The standard folds <Chip>
path now renders in all modes; TDS theming still flows through the CSS var
layer. Dropped the now-unused lotusTerminal read.

N81: ChatBgGrid / SeasonalBgGrid containers switched from flex-wrap with
fixed-width cells to a responsive CSS grid (repeat(auto-fill, minmax(76px,
1fr))), so swatches fill the row evenly instead of orphaning a lopsided
last row at arbitrary widths.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/features/call/CallControls.tsx        | 83 +++++--------------
 src/app/features/settings/general/General.tsx | 16 +++-
 2 files changed, 34 insertions(+), 65 deletions(-)

diff --git a/src/app/features/call/CallControls.tsx b/src/app/features/call/CallControls.tsx
index 7164ea7b6..d8f4970e4 100644
--- a/src/app/features/call/CallControls.tsx
+++ b/src/app/features/call/CallControls.tsx
@@ -87,7 +87,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   const [pttMode] = useSetting(settingsAtom, 'pttMode');
   const [pttKey] = useSetting(settingsAtom, 'pttKey');
   const [deafenKey] = useSetting(settingsAtom, 'deafenKey');
-  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
   const [pttActive, setPttActive] = useState(false);
 
   // Track microphone via ref so the PTT effect doesn't need it as a dep (avoids listener churn)
@@ -244,68 +243,26 @@ export function CallControls({ callEmbed }: CallControlsProps) {
       justifyContent="Center"
       alignItems="Center"
     >
-      {pttMode &&
-        (lotusTerminal ? (
-          <Box
-            style={{
-              position: 'absolute',
-              top: '-2.5rem',
-              left: '50%',
-              transform: 'translateX(-50%)',
-              background: pttActive ? 'var(--lt-accent-green-dim)' : 'var(--lt-accent-orange-dim)',
-              border: `1px solid ${pttActive ? 'var(--lt-accent-green-border)' : 'var(--lt-accent-orange-border)'}`,
-              borderRadius: '99px',
-              padding: '0.2rem 0.9rem',
-              pointerEvents: 'none',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            <Text
-              size="T200"
-              style={{
-                color: pttActive ? 'var(--lt-accent-green)' : 'var(--lt-accent-orange)',
-                fontWeight: 700,
-                letterSpacing: '0.08em',
-                fontFamily: 'JetBrains Mono, monospace',
-              }}
-            >
-              {pttActive ? (
-                <>
-                  <span
-                    style={{
-                      display: 'inline-block',
-                      animation: 'pttLivePulse 900ms ease-in-out infinite',
-                    }}
-                  >
-                    ●
-                  </span>
-                  {' LIVE'}
-                </>
-              ) : (
-                `PTT — Hold ${pttKeyLabel}`
-              )}
-            </Text>
-          </Box>
-        ) : (
-          <Chip
-            variant={pttActive ? 'Success' : 'Warning'}
-            fill="Soft"
-            radii="400"
-            style={{
-              position: 'absolute',
-              top: '-2.2rem',
-              left: '50%',
-              transform: 'translateX(-50%)',
-              pointerEvents: 'none',
-              whiteSpace: 'nowrap',
-            }}
-            outlined
-          >
-            <Text size="T200" style={{ fontWeight: 700 }}>
-              {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
-            </Text>
-          </Chip>
-        ))}
+      {pttMode && (
+        <Chip
+          variant={pttActive ? 'Success' : 'Warning'}
+          fill="Soft"
+          radii="400"
+          style={{
+            position: 'absolute',
+            top: '-2.2rem',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            pointerEvents: 'none',
+            whiteSpace: 'nowrap',
+          }}
+          outlined
+        >
+          <Text size="T200" style={{ fontWeight: 700 }}>
+            {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
+          </Text>
+        </Chip>
+      )}
       {shareConfirm && (
         <>
           <div
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index fcd12f630..01eba4812 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -1667,7 +1667,13 @@ function SeasonalBgGrid({
   onChange: (v: Settings['seasonalThemeOverride']) => void;
 }) {
   return (
-    <Box wrap="Wrap" gap="200">
+    <Box
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(${toRem(76)}, 1fr))`,
+        gap: config.space.S200,
+      }}
+    >
       {SEASONAL_OPTIONS.map((opt) => {
         const selected = value === opt.value;
         const isSpecial = opt.value === 'auto' || opt.value === 'off';
@@ -1727,7 +1733,13 @@ function ChatBgGrid() {
   const isDark = theme.kind === ThemeKind.Dark;
 
   return (
-    <Box wrap="Wrap" gap="200">
+    <Box
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(${toRem(76)}, 1fr))`,
+        gap: config.space.S200,
+      }}
+    >
       {BG_OPTIONS.map((opt) => (
         <Box key={opt.value} direction="Column" gap="100" style={{ alignItems: 'center' }}>
           <button