From 6a43777cd78579cdf0963ec60af6e3cb738411fa Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 18 Dec 2024 12:53:39 -0600
Subject: [PATCH] Tweak radio styles, add Menu.LabelText

---
 src/components/Menu/index.tsx           | 49 ++++++++++++++++++++++++
 src/components/Menu/index.web.tsx       | 51 +++++++++++++++++++++++++
 src/view/com/post-thread/PostThread.tsx | 23 ++++++-----
 3 files changed, 114 insertions(+), 9 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 73eb9da526..d5b27679d6 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -190,6 +190,55 @@ export function ItemIcon({icon: Comp}: ItemIconProps) {
   )
 }
 
+export function ItemRadio({selected}: {selected: boolean}) {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.justify_center,
+        a.align_center,
+        a.rounded_full,
+        t.atoms.border_contrast_high,
+        {
+          borderWidth: 1,
+          height: 24,
+          width: 24,
+        },
+      ]}>
+      {selected ? (
+        <View
+          style={[
+            a.absolute,
+            a.rounded_full,
+            {height: 16, width: 16},
+            selected
+              ? {
+                  backgroundColor: t.palette.primary_500,
+                }
+              : {},
+          ]}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+export function LabelText({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  return (
+    <Text
+      style={[
+        a.font_bold,
+        t.atoms.text_contrast_medium,
+        {
+          marginBottom: -10,
+        },
+      ]}>
+      {children}
+    </Text>
+  )
+}
+
 export function Group({children, style}: GroupProps) {
   const t = useTheme()
   return (
diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
index ab0c9d20a1..bc8596218c 100644
--- a/src/components/Menu/index.web.tsx
+++ b/src/components/Menu/index.web.tsx
@@ -304,6 +304,57 @@ export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
   )
 }
 
+export function ItemRadio({selected}: {selected: boolean}) {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.justify_center,
+        a.align_center,
+        a.rounded_full,
+        t.atoms.border_contrast_high,
+        {
+          borderWidth: 1,
+          height: 24,
+          width: 24,
+        },
+      ]}>
+      {selected ? (
+        <View
+          style={[
+            a.absolute,
+            a.rounded_full,
+            {height: 16, width: 16},
+            selected
+              ? {
+                  backgroundColor: t.palette.primary_500,
+                }
+              : {},
+          ]}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+export function LabelText({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  return (
+    <Text
+      style={[
+        a.font_bold,
+        a.pt_lg,
+        a.pb_sm,
+        t.atoms.text_contrast_low,
+        {
+          paddingHorizontal: 10,
+        },
+      ]}>
+      {children}
+    </Text>
+  )
+}
+
 export function Group({children}: GroupProps) {
   return children
 }
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index 53f590eef5..dfe183d958 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -42,7 +42,6 @@ import {Header} from '#/components/Layout'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import * as Menu from '#/components/Menu'
 import {Text} from '#/components/Typography'
-import {RadioCircle} from '../util/forms/RadioButton'
 import {PostThreadComposePrompt} from './PostThreadComposePrompt'
 import {PostThreadItem} from './PostThreadItem'
 import {PostThreadLoadMore} from './PostThreadLoadMore'
@@ -530,7 +529,7 @@ export function PostThread({uri}: {uri: string | undefined}) {
 
   return (
     <>
-      <Header.Outer sticky={true} headerRef={headerRef}>
+      <Header.Outer headerRef={headerRef}>
         <Header.BackButton />
         <Header.Content>
           <Header.TitleText>
@@ -619,6 +618,9 @@ let ThreadMenu = ({
         )}
       </Menu.Trigger>
       <Menu.Outer>
+        <Menu.LabelText>
+          <Trans>Thread display</Trans>
+        </Menu.LabelText>
         <Menu.Group>
           <Menu.Item
             label={_(msg`Show replies as a list`)}
@@ -628,7 +630,7 @@ let ThreadMenu = ({
             <Menu.ItemText>
               <Trans>Show replies as a list</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={!treeViewEnabled} />
+            <Menu.ItemRadio selected={!treeViewEnabled} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Show replies as a tree`)}
@@ -638,10 +640,13 @@ let ThreadMenu = ({
             <Menu.ItemText>
               <Trans>Show replies as a tree</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={treeViewEnabled} />
+            <Menu.ItemRadio selected={treeViewEnabled} />
           </Menu.Item>
         </Menu.Group>
         <Menu.Divider />
+        <Menu.LabelText>
+          <Trans>Reply sorting</Trans>
+        </Menu.LabelText>
         <Menu.Group>
           <Menu.Item
             label={_(msg`Hot replies first`)}
@@ -651,7 +656,7 @@ let ThreadMenu = ({
             <Menu.ItemText>
               <Trans>Hot replies first</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'hotness'} />
+            <Menu.ItemRadio selected={sortReplies === 'hotness'} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Oldest replies first`)}
@@ -661,7 +666,7 @@ let ThreadMenu = ({
             <Menu.ItemText>
               <Trans>Oldest replies first</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'oldest'} />
+            <Menu.ItemRadio selected={sortReplies === 'oldest'} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Newest replies first`)}
@@ -671,7 +676,7 @@ let ThreadMenu = ({
             <Menu.ItemText>
               <Trans>Newest replies first</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'newest'} />
+            <Menu.ItemRadio selected={sortReplies === 'newest'} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Most-liked replies first`)}
@@ -681,7 +686,7 @@ let ThreadMenu = ({
             <Menu.ItemText>
               <Trans>Most-liked replies first</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'most-likes'} />
+            <Menu.ItemRadio selected={sortReplies === 'most-likes'} />
           </Menu.Item>
           <Menu.Item
             label={_(msg`Random (aka "Poster's Roulette")`)}
@@ -691,7 +696,7 @@ let ThreadMenu = ({
             <Menu.ItemText>
               <Trans>Random (aka "Poster's Roulette")</Trans>
             </Menu.ItemText>
-            <RadioCircle isSelected={sortReplies === 'random'} />
+            <Menu.ItemRadio selected={sortReplies === 'random'} />
           </Menu.Item>
         </Menu.Group>
       </Menu.Outer>