From b93e4bcef994165a5f054d3fdc9e8b4caad0cfcd Mon Sep 17 00:00:00 2001
From: Lotus CI <ci@lotusguild.org>
Date: Sun, 25 Oct 2026 12:16:14 -0400
Subject: [PATCH] fix(settings): visible radio buttons for the privacy and
 import choices

The app CSS hides native radio inputs, so the read-receipt choice and the
"keep mine / use the file's" import choice showed no selection. Use the
folds RadioButton.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5
---
 src/app/features/settings/general/General.tsx  |  8 +++++---
 src/app/features/settings/general/YourData.tsx | 16 +++++++++-------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index 6e75be3ae..7b4d33c69 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -33,6 +33,7 @@ import {
   Switch,
   Text,
   toRem,
+  RadioButton,
 } from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
 import { HexColorPicker } from 'react-colorful';
@@ -1692,11 +1693,12 @@ export function Privacy() {
               key={value}
               style={{ display: 'flex', gap: config.space.S200, cursor: 'pointer' }}
             >
-              <input
-                type="radio"
+              <RadioButton
                 name="activity-privacy"
+                variant="Primary"
+                size="300"
                 checked={activity === value}
-                onChange={() => chooseActivity(value)}
+                onClick={() => chooseActivity(value)}
               />
               <Box direction="Column">
                 <Text size="T300">{label}</Text>
diff --git a/src/app/features/settings/general/YourData.tsx b/src/app/features/settings/general/YourData.tsx
index 1a9ea2e40..833a497e4 100644
--- a/src/app/features/settings/general/YourData.tsx
+++ b/src/app/features/settings/general/YourData.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { useAtom } from 'jotai';
 import { Method } from 'matrix-js-sdk';
-import { Box, Button, Text, color } from 'folds';
+import { Box, Button, RadioButton, Text, color } from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -224,22 +224,24 @@ export function YourDataSection() {
                   here:
                 </Text>
                 <label>
-                  <input
-                    type="radio"
+                  <RadioButton
                     name="your-data-conflicts"
+                    variant="Primary"
+                    size="300"
                     checked={!preferFile}
-                    onChange={() => setPreferFile(false)}
+                    onClick={() => setPreferFile(false)}
                   />{' '}
                   <Text as="span" size="T200">
                     Keep mine
                   </Text>
                 </label>
                 <label>
-                  <input
-                    type="radio"
+                  <RadioButton
                     name="your-data-conflicts"
+                    variant="Primary"
+                    size="300"
                     checked={preferFile}
-                    onChange={() => setPreferFile(true)}
+                    onClick={() => setPreferFile(true)}
                   />{' '}
                   <Text as="span" size="T200">
                     Use the file&apos;s