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>
This commit is contained in:
2026-06-26 16:21:33 -04:00
parent d39aef0aac
commit 50076962f6
2 changed files with 34 additions and 65 deletions
+2 -45
View File
@@ -87,7 +87,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {
const [pttMode] = useSetting(settingsAtom, 'pttMode'); const [pttMode] = useSetting(settingsAtom, 'pttMode');
const [pttKey] = useSetting(settingsAtom, 'pttKey'); const [pttKey] = useSetting(settingsAtom, 'pttKey');
const [deafenKey] = useSetting(settingsAtom, 'deafenKey'); const [deafenKey] = useSetting(settingsAtom, 'deafenKey');
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
const [pttActive, setPttActive] = useState(false); const [pttActive, setPttActive] = useState(false);
// Track microphone via ref so the PTT effect doesn't need it as a dep (avoids listener churn) // Track microphone via ref so the PTT effect doesn't need it as a dep (avoids listener churn)
@@ -244,49 +243,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
justifyContent="Center" justifyContent="Center"
alignItems="Center" alignItems="Center"
> >
{pttMode && {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 <Chip
variant={pttActive ? 'Success' : 'Warning'} variant={pttActive ? 'Success' : 'Warning'}
fill="Soft" fill="Soft"
@@ -305,7 +262,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
{pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`} {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
</Text> </Text>
</Chip> </Chip>
))} )}
{shareConfirm && ( {shareConfirm && (
<> <>
<div <div
+14 -2
View File
@@ -1667,7 +1667,13 @@ function SeasonalBgGrid({
onChange: (v: Settings['seasonalThemeOverride']) => void; onChange: (v: Settings['seasonalThemeOverride']) => void;
}) { }) {
return ( 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) => { {SEASONAL_OPTIONS.map((opt) => {
const selected = value === opt.value; const selected = value === opt.value;
const isSpecial = opt.value === 'auto' || opt.value === 'off'; const isSpecial = opt.value === 'auto' || opt.value === 'off';
@@ -1727,7 +1733,13 @@ function ChatBgGrid() {
const isDark = theme.kind === ThemeKind.Dark; const isDark = theme.kind === ThemeKind.Dark;
return ( 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) => ( {BG_OPTIONS.map((opt) => (
<Box key={opt.value} direction="Column" gap="100" style={{ alignItems: 'center' }}> <Box key={opt.value} direction="Column" gap="100" style={{ alignItems: 'center' }}>
<button <button