[Threadgate] Tweak threadgate buttons (#9173)

* tweak in-post threadgate button

* tweak composer threadgate button

* reduce date length slightly

* pressed styles

* make date length depend on breakpoint

* add chevron to label btn

* add tiny chevron, special-case button icon width

* [Threadgate] Add hint (#9350)

* get tooltip working on web

* add compatibility layer for working in iOS sheets

* add timeout to profile tooltip now that it appears instantly

* rm debug code

* Update ThreadgateBtn.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* remeasure when keyboard changes

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* fix types

* [Threadgate] Refresh dialog (#9342)

* wip new ui

* update threadgate dialog with new designs

* restore nobody option

* relayout android sheet when ratio changes

* fix ratio changing case in bottom sheet

* timebox reached, use setTimeout

* update panel styles

* missing imports

* extract out Panel

* tweak layout animation

* fix icon color

* use same color mechamism for icon as text

* restore the header

* refreshed toggle styles (#9343)

* [Threadgate] Persist settings (#9341)

* add persist toggle to threadgate dialog

* move state back down

* sort out spacing

* wire up query

* @surfdude29 tweaks

* use tiny chevron in WhoCanReply

* wait for prefetch before opening

* move Panel into the Toggle namespace

* default -> pref

* use medium date length

* rm hover state from web selects, fix border radius

* fix key issue in Selects

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

src/components/Select/index.web.tsx

@@ -1,4 +1,4 @@
-import {createContext, forwardRef, useContext, useMemo} from 'react'
+import {createContext, forwardRef, Fragment, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 import {Select as RadixSelect} from 'radix-ui'
 
@@ -96,8 +96,7 @@ export function Trigger({children, label}: TriggerProps) {
         style={flatten([
           a.flex,
           a.relative,
-          t.atoms.bg_contrast_25,
-          a.rounded_sm,
+          t.atoms.bg_contrast_50,
           a.w_full,
           a.align_center,
           a.gap_sm,
@@ -106,15 +105,14 @@ export function Trigger({children, label}: TriggerProps) {
           a.px_md,
           a.pointer,
           {
+            borderRadius: 10,
             maxWidth: 400,
             outline: 0,
             borderWidth: 2,
             borderStyle: 'solid',
             borderColor: focused
               ? t.palette.primary_500
-              : hovered
-                ? t.palette.contrast_100
-                : t.palette.contrast_25,
+              : t.palette.contrast_50,
           },
         ])}>
         {children}
@@ -140,7 +138,11 @@ export function Icon({style}: IconProps) {
   )
 }
 
-export function Content<T>({items, renderItem}: ContentProps<T>) {
+export function Content<T>({
+  items,
+  renderItem,
+  valueExtractor = defaultItemValueExtractor,
+}: ContentProps<T>) {
   const t = useTheme()
   const selectedValue = useContext(SelectedValueContext)
 
@@ -198,7 +200,11 @@ export function Content<T>({items, renderItem}: ContentProps<T>) {
             <ChevronUpIcon style={[t.atoms.text]} size="xs" />
           </RadixSelect.ScrollUpButton>
           <RadixSelect.Viewport style={flatten([a.p_xs])}>
-            {items.map((item, index) => renderItem(item, index, selectedValue))}
+            {items.map((item, index) => (
+              <Fragment key={valueExtractor(item)}>
+                {renderItem(item, index, selectedValue)}
+              </Fragment>
+            ))}
           </RadixSelect.Viewport>
           <RadixSelect.ScrollDownButton style={flatten(down)}>
             <ChevronDownIcon style={[t.atoms.text]} size="xs" />
@@ -209,6 +215,10 @@ export function Content<T>({items, renderItem}: ContentProps<T>) {
   )
 }
 
+function defaultItemValueExtractor(item: any) {
+  return item.value
+}
+
 const ItemContext = createContext<{
   hovered: boolean
   focused: boolean