Fix types

src/lib/moderation.ts

@@ -61,7 +61,7 @@ export function isCauseALabelOnUri(
 export function getModerationCauseKey(cause: ModerationCause): string {
   const source =
     cause.source.type === 'labeler'
-      ? cause.source.labeler.did
+      ? cause.source.did
       : cause.source.type === 'list'
       ? cause.source.list.uri
       : 'user'

src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx

@@ -56,7 +56,9 @@ export function AdultContentEnabledPref({
 
     try {
       mutate({
-        enabled: !(variables?.enabled ?? preferences?.adultContentEnabled),
+        enabled: !(
+          variables?.enabled ?? preferences?.moderationOpts.adultContentEnabled
+        ),
       })
     } catch (e) {
       Toast.show(
@@ -75,7 +77,10 @@ export function AdultContentEnabledPref({
           <Toggle.Item
             name={_(msg`Enable adult content in your feeds`)}
             label={_(msg`Enable adult content in your feeds`)}
-            value={variables?.enabled ?? preferences?.adultContentEnabled}
+            value={
+              variables?.enabled ??
+              preferences?.moderationOpts.adultContentEnabled
+            }
             onChange={onToggleAdultContent}>
             <View
               style={[

src/screens/Onboarding/StepModeration/ModerationOption.tsx

@@ -28,7 +28,8 @@ export function ModerationOption({
   const {data: preferences} = usePreferencesQuery()
   const {mutate, variables} = usePreferencesSetContentLabelMutation()
   const visibility =
-    variables?.visibility ?? preferences?.contentLabels?.[labelGroup]
+    variables?.visibility ??
+    preferences?.moderationOpts.labelGroups?.[labelGroup]
 
   const onChange = React.useCallback(
     (vis: string[]) => {

src/state/queries/actor-autocomplete.ts

@@ -6,17 +6,10 @@ import {logger} from '#/logger'
 import {getAgent} from '#/state/session'
 import {useMyFollowsQuery} from '#/state/queries/my-follows'
 import {STALE} from '#/state/queries'
-import {
+import {DEFAULT_LOGGED_OUT_PREFERENCES, useModerationOpts} from './preferences'
-  DEFAULT_LOGGED_OUT_PREFERENCES,
-  getModerationOpts,
-  useModerationOpts,
-} from './preferences'
 import {isInvalidHandle} from '#/lib/strings/handles'
 
-const DEFAULT_MOD_OPTS = getModerationOpts({
+const DEFAULT_MOD_OPTS = DEFAULT_LOGGED_OUT_PREFERENCES.moderationOpts
-  userDid: '',
-  preferences: DEFAULT_LOGGED_OUT_PREFERENCES,
-})
 
 export const RQKEY = (prefix: string) => ['actor-autocomplete', prefix]
 

src/state/queries/post-feed.ts

@@ -24,7 +24,6 @@ import {STALE} from '#/state/queries'
 import {precacheFeedPostProfiles} from './profile'
 import {getAgent} from '#/state/session'
 import {DEFAULT_LOGGED_OUT_PREFERENCES} from '#/state/queries/preferences/const'
-import {getModerationOpts} from '#/state/queries/preferences/moderation'
 import {KnownError} from '#/view/com/posts/FeedErrorMessage'
 import {embedViewRecordToPostView, getEmbeddedPost} from './util'
 import {useModerationOpts} from './preferences'
@@ -429,11 +428,10 @@ function assertSomePostsPassModeration(feed: AppBskyFeedDefs.FeedViewPost[]) {
   let somePostsPassModeration = false
 
   for (const item of feed) {
-    const moderationOpts = getModerationOpts({
+    const moderation = moderatePost(
-      userDid: '',
+      item.post,
-      preferences: DEFAULT_LOGGED_OUT_PREFERENCES,
+      DEFAULT_LOGGED_OUT_PREFERENCES.moderationOpts,
-    })
+    )
-    const moderation = moderatePost(item.post, moderationOpts)
 
     if (!moderation.content.filter) {
       // we have a sfw post

src/state/queries/preferences/const.ts

@@ -29,21 +29,16 @@ export const DEFAULT_PROD_FEEDS = {
 
 export const DEFAULT_LOGGED_OUT_PREFERENCES: UsePreferencesQueryResponse = {
   birthDate: new Date('2022-11-17'), // TODO(pwi)
-  adultContentEnabled: false,
   feeds: {
     saved: [],
     pinned: [],
     unpinned: [],
   },
-  // labels are undefined until set by user
+  moderationOpts: {
-  contentLabels: {
+    userDid: '',
-    nsfw: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES.nsfw,
+    adultContentEnabled: false,
-    nudity: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES.nudity,
+    labelGroups: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES,
-    suggestive: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES.suggestive,
+    mods: [],
-    gore: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES.gore,
-    hate: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES.hate,
-    spam: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES.spam,
-    impersonation: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES.impersonation,
   },
   feedViewPrefs: DEFAULT_HOME_FEED_PREFS,
   threadViewPrefs: DEFAULT_THREAD_VIEW_PREFS,

src/state/queries/preferences/index.ts

@@ -4,20 +4,17 @@ import {LabelPreference, BskyFeedViewPreference} from '@atproto/api'
 
 import {track} from '#/lib/analytics/analytics'
 import {getAge} from '#/lib/strings/time'
-import {useSession, getAgent} from '#/state/session'
+import {getAgent} from '#/state/session'
-import {DEFAULT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation'
 import {
   ConfigurableLabelGroup,
   UsePreferencesQueryResponse,
   ThreadViewPreferences,
 } from '#/state/queries/preferences/types'
-import {temp__migrateLabelPref} from '#/state/queries/preferences/util'
 import {
   DEFAULT_HOME_FEED_PREFS,
   DEFAULT_THREAD_VIEW_PREFS,
   DEFAULT_LOGGED_OUT_PREFERENCES,
 } from '#/state/queries/preferences/const'
-import {getModerationOpts} from '#/state/queries/preferences/moderation'
 import {STALE} from '#/state/queries'
 import {useHiddenPosts} from '#/state/preferences/hidden-posts'
 
@@ -50,32 +47,6 @@ export function usePreferencesQuery() {
                 return !res.feeds.pinned?.includes(f)
               }) || [],
           },
-          // labels are undefined until set by user
-          contentLabels: {
-            nsfw: temp__migrateLabelPref(
-              res.contentLabels?.nsfw || DEFAULT_LABEL_PREFERENCES.nsfw,
-            ),
-            nudity: temp__migrateLabelPref(
-              res.contentLabels?.nudity || DEFAULT_LABEL_PREFERENCES.nudity,
-            ),
-            suggestive: temp__migrateLabelPref(
-              res.contentLabels?.suggestive ||
-                DEFAULT_LABEL_PREFERENCES.suggestive,
-            ),
-            gore: temp__migrateLabelPref(
-              res.contentLabels?.gore || DEFAULT_LABEL_PREFERENCES.gore,
-            ),
-            hate: temp__migrateLabelPref(
-              res.contentLabels?.hate || DEFAULT_LABEL_PREFERENCES.hate,
-            ),
-            spam: temp__migrateLabelPref(
-              res.contentLabels?.spam || DEFAULT_LABEL_PREFERENCES.spam,
-            ),
-            impersonation: temp__migrateLabelPref(
-              res.contentLabels?.impersonation ||
-                DEFAULT_LABEL_PREFERENCES.impersonation,
-            ),
-          },
           feedViewPrefs: {
             ...DEFAULT_HOME_FEED_PREFS,
             ...(res.feedViewPrefs.home || {}),
@@ -93,23 +64,18 @@ export function usePreferencesQuery() {
 }
 
 export function useModerationOpts() {
-  const {currentAccount} = useSession()
   const prefs = usePreferencesQuery()
   const hiddenPosts = useHiddenPosts()
   const opts = useMemo(() => {
     if (!prefs.data) {
       return
     }
-    const moderationOpts = getModerationOpts({
+    const moderationOpts = prefs.data.moderationOpts
-      userDid: currentAccount?.did || '',
-      preferences: prefs.data,
-    })
-
     return {
       ...moderationOpts,
       hiddenPosts,
     }
-  }, [currentAccount?.did, prefs.data, hiddenPosts])
+  }, [prefs.data, hiddenPosts])
   return opts
 }
 

src/state/queries/preferences/moderation.ts

@@ -1,13 +1,8 @@
-import {
+import {ComAtprotoLabelDefs, DEFAULT_LABEL_GROUP_SETTINGS} from '@atproto/api'
-  LabelPreference,
-  ComAtprotoLabelDefs,
-  ModerationOpts,
-} from '@atproto/api'
 
 import {
   LabelGroup,
   ConfigurableLabelGroup,
-  UsePreferencesQueryResponse,
 } from '#/state/queries/preferences/types'
 
 export type Label = ComAtprotoLabelDefs.Label
@@ -21,36 +16,18 @@ export type LabelGroupConfig = {
   values: string[]
 }
 
-export const DEFAULT_LABEL_PREFERENCES: Record<
-  ConfigurableLabelGroup,
-  LabelPreference
-> = {
-  nsfw: 'hide',
-  nudity: 'warn',
-  suggestive: 'warn',
-  gore: 'warn',
-  hate: 'hide',
-  spam: 'hide',
-  impersonation: 'hide',
-}
-
 /**
  * More strict than our default settings for logged in users.
  *
  * TODO(pwi)
  */
-export const DEFAULT_LOGGED_OUT_LABEL_PREFERENCES: Record<
+export const DEFAULT_LOGGED_OUT_LABEL_PREFERENCES: typeof DEFAULT_LABEL_GROUP_SETTINGS =
-  ConfigurableLabelGroup,
+  Object.fromEntries(
-  LabelPreference
+    Object.entries(DEFAULT_LABEL_GROUP_SETTINGS).map(([key, _pref]) => [
-> = {
+      key,
-  nsfw: 'hide',
+      'hide',
-  nudity: 'hide',
+    ]),
-  suggestive: 'hide',
+  )
-  gore: 'hide',
-  hate: 'hide',
-  spam: 'hide',
-  impersonation: 'hide',
-}
 
 export const CONFIGURABLE_LABEL_GROUPS: Record<
   ConfigurableLabelGroup,
@@ -110,44 +87,3 @@ export const CONFIGURABLE_LABEL_GROUPS: Record<
     values: ['impersonation'],
   },
 }
-
-export function getModerationOpts({
-  userDid,
-  preferences,
-}: {
-  userDid: string
-  preferences: UsePreferencesQueryResponse
-}): ModerationOpts {
-  return {
-    userDid: userDid,
-    adultContentEnabled: preferences.adultContentEnabled,
-    labels: {
-      porn: preferences.contentLabels.nsfw,
-      sexual: preferences.contentLabels.suggestive,
-      nudity: preferences.contentLabels.nudity,
-      nsfl: preferences.contentLabels.gore,
-      corpse: preferences.contentLabels.gore,
-      gore: preferences.contentLabels.gore,
-      torture: preferences.contentLabels.gore,
-      'self-harm': preferences.contentLabels.gore,
-      'intolerant-race': preferences.contentLabels.hate,
-      'intolerant-gender': preferences.contentLabels.hate,
-      'intolerant-sexual-orientation': preferences.contentLabels.hate,
-      'intolerant-religion': preferences.contentLabels.hate,
-      intolerant: preferences.contentLabels.hate,
-      'icon-intolerant': preferences.contentLabels.hate,
-      spam: preferences.contentLabels.spam,
-      impersonation: preferences.contentLabels.impersonation,
-      scam: 'warn',
-    },
-    labelers: [
-      {
-        labeler: {
-          did: '',
-          displayName: 'Bluesky Social',
-        },
-        labels: {},
-      },
-    ],
-  }
-}

src/state/queries/preferences/types.ts

@@ -1,6 +1,5 @@
 import {
   BskyPreferences,
-  LabelPreference,
   BskyThreadViewPreference,
   BskyFeedViewPreference,
 } from '@atproto/api'
@@ -35,12 +34,6 @@ export type UsePreferencesQueryResponse = Omit<
   BskyPreferences,
   'contentLabels' | 'feedViewPrefs' | 'feeds'
 > & {
-  /*
-   * Content labels previously included 'show', which has been deprecated in
-   * favor of 'ignore'. The API can return legacy data from the database, and
-   * we clean up the data in `usePreferencesQuery`.
-   */
-  contentLabels: Record<ConfigurableLabelGroup, LabelPreference>
   feedViewPrefs: BskyFeedViewPreference & {
     lab_mergeFeedEnabled?: boolean
   }

src/state/queries/preferences/util.ts

@@ -1,16 +0,0 @@
-import {LabelPreference} from '@atproto/api'
-
-/**
- * Content labels previously included 'show', which has been deprecated in
- * favor of 'ignore'. The API can return legacy data from the database, and
- * we clean up the data in `usePreferencesQuery`.
- *
- * @deprecated
- */
-export function temp__migrateLabelPref(
-  pref: LabelPreference | 'show',
-): LabelPreference {
-  // @ts-ignore
-  if (pref === 'show') return 'ignore'
-  return pref
-}

src/view/com/modals/ContentFilteringSettings.tsx

@@ -49,22 +49,22 @@ export function Component({}: {}) {
         <ContentLabelPref
           preferences={preferences}
           labelGroup="nsfw"
-          disabled={!preferences?.adultContentEnabled}
+          disabled={!preferences?.moderationOpts.adultContentEnabled}
         />
         <ContentLabelPref
           preferences={preferences}
           labelGroup="nudity"
-          disabled={!preferences?.adultContentEnabled}
+          disabled={!preferences?.moderationOpts.adultContentEnabled}
         />
         <ContentLabelPref
           preferences={preferences}
           labelGroup="suggestive"
-          disabled={!preferences?.adultContentEnabled}
+          disabled={!preferences?.moderationOpts.adultContentEnabled}
         />
         <ContentLabelPref
           preferences={preferences}
           labelGroup="gore"
-          disabled={!preferences?.adultContentEnabled}
+          disabled={!preferences?.moderationOpts.adultContentEnabled}
         />
         <ContentLabelPref preferences={preferences} labelGroup="hate" />
         <ContentLabelPref preferences={preferences} labelGroup="spam" />
@@ -119,7 +119,9 @@ function AdultContentEnabledPref() {
 
     try {
       mutate({
-        enabled: !(variables?.enabled ?? preferences?.adultContentEnabled),
+        enabled: !(
+          variables?.enabled ?? preferences?.moderationOpts.adultContentEnabled
+        ),
       })
     } catch (e) {
       Toast.show(
@@ -136,7 +138,7 @@ function AdultContentEnabledPref() {
   return (
     <View style={s.mb10}>
       {isIOS ? (
-        preferences?.adultContentEnabled ? null : (
+        preferences?.moderationOpts.adultContentEnabled ? null : (
           <Text type="md" style={pal.textLight}>
             <Trans>
               Adult content can only be enabled via the Web at{' '}
@@ -165,7 +167,10 @@ function AdultContentEnabledPref() {
         <ToggleButton
           type="default-light"
           label={_(msg`Enable Adult Content`)}
-          isSelected={variables?.enabled ?? preferences?.adultContentEnabled}
+          isSelected={
+            variables?.enabled ??
+            preferences?.moderationOpts.adultContentEnabled
+          }
           onPress={onToggleAdultContent}
           style={styles.toggleBtn}
         />
@@ -196,7 +201,7 @@ function ContentLabelPref({
   disabled?: boolean
 }) {
   const pal = usePalette('default')
-  const visibility = preferences?.contentLabels?.[labelGroup]
+  const visibility = preferences?.moderationOpts.labelGroups?.[labelGroup]
   const {mutate, variables} = usePreferencesSetContentLabelMutation()
 
   const onChange = React.useCallback(

src/view/com/moderation/AdultContentPref.tsx

@@ -34,7 +34,9 @@ export function AdultContentEnabledPref() {
 
     try {
       mutate({
-        enabled: !(variables?.enabled ?? preferences?.adultContentEnabled),
+        enabled: !(
+          variables?.enabled ?? preferences?.moderationOpts.adultContentEnabled
+        ),
       })
     } catch (e) {
       Toast.show(
@@ -47,7 +49,7 @@ export function AdultContentEnabledPref() {
   return (
     <View style={[pal.border, {borderTopWidth: 1, paddingHorizontal: 12}]}>
       {isIOS ? (
-        preferences?.adultContentEnabled ? null : (
+        preferences?.moderationOpts.adultContentEnabled ? null : (
           <View style={{paddingVertical: 12}}>
             <Text type="md" style={pal.textLight}>
               <Trans>
@@ -68,7 +70,9 @@ export function AdultContentEnabledPref() {
             type="default-light"
             label={_(msg`Enable Adult Content`)}
             isSelected={
-              variables?.enabled ?? preferences?.adultContentEnabled ?? false
+              variables?.enabled ??
+              preferences?.moderationOpts.adultContentEnabled ??
+              false
             }
             onPress={onToggleAdultContent}
             style={styles.toggleBtn}

src/view/com/moderation/LabelGroupPref.tsx

@@ -23,7 +23,7 @@ export function LabelGroupPref({
   disabled?: boolean
 }) {
   const pal = usePalette('default')
-  const visibility = preferences?.contentLabels?.[labelGroup]
+  const visibility = preferences?.moderationOpts.labelGroups?.[labelGroup]
   const {mutate, variables} = usePreferencesSetContentLabelMutation()
 
   const onChange = React.useCallback(

src/view/com/moderation/ModServicePrefs.tsx

@@ -17,22 +17,22 @@ export function ModServicePrefs({}: {}) {
       <LabelGroupPref
         preferences={preferences}
         labelGroup="nsfw"
-        disabled={!preferences?.adultContentEnabled}
+        disabled={!preferences?.moderationOpts.adultContentEnabled}
       />
       <LabelGroupPref
         preferences={preferences}
         labelGroup="nudity"
-        disabled={!preferences?.adultContentEnabled}
+        disabled={!preferences?.moderationOpts.adultContentEnabled}
       />
       <LabelGroupPref
         preferences={preferences}
         labelGroup="suggestive"
-        disabled={!preferences?.adultContentEnabled}
+        disabled={!preferences?.moderationOpts.adultContentEnabled}
       />
       <LabelGroupPref
         preferences={preferences}
         labelGroup="gore"
-        disabled={!preferences?.adultContentEnabled}
+        disabled={!preferences?.moderationOpts.adultContentEnabled}
       />
       <LabelGroupPref preferences={preferences} labelGroup="hate" />
       <LabelGroupPref preferences={preferences} labelGroup="spam" />

src/view/screens/DebugMod.tsx

@@ -3,14 +3,12 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {View} from 'react-native'
 import {
   LABELS,
-  LABEL_GROUPS,
   mock,
   moderatePost,
   moderateProfile,
   PostModeration,
   ProfileModeration,
   ModerationUI,
-  LabelPreference,
   AppBskyActorDefs,
   AppBskyFeedDefs,
 } from '@atproto/api'
@@ -39,12 +37,10 @@ const MOCK_MOD_OPTS = {
   userDid: 'at://did:web:alice',
   adultContentEnabled: true,
   labelGroups: {},
-  labelers: [
+  mods: [
     {
-      labeler: {did: 'did:plc:fake-labeler'},
+      did: 'did:plc:fake-labeler',
-      labelGroups: Object.fromEntries(
+      enabled: true,
-        Object.keys(LABEL_GROUPS).map(key => [key, 'hide' as LabelPreference]),
-      ),
     },
   ],
 }
@@ -201,7 +197,7 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
 
         <H3 style={a.pb_md}>
           Account{' '}
-          <H3 style={[t.atoms.text_contrast_500, a.text_lg]}>in listing</H3>
+          <H3 style={[t.atoms.text_contrast_low, a.text_lg]}>in listing</H3>
         </H3>
         <MockAccountCard
           label={label[0]}
@@ -225,16 +221,11 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
 
         <H3 style={a.pb_md}>
           Account{' '}
-          <H3 style={[t.atoms.text_contrast_500, a.text_lg]}>
+          <H3 style={[t.atoms.text_contrast_low, a.text_lg]}>
             viewing directly
           </H3>
         </H3>
-        <MockAccountScreen
+        <MockAccountScreen label={label[0]} profile={profile} />
-          label={label[0]}
-          profile={profile}
-          moderation={profileModeration}
-          postModeration={postModeration}
-        />
         <View
           style={[
             t.atoms.bg_contrast_50,
@@ -267,7 +258,14 @@ function MockPost({
 }) {
   const t = useTheme()
   return (
-    <View style={[t.atoms.border, a.border, a.rounded_md, a.mb_md, a.p_2xs]}>
+    <View
+      style={[
+        t.atoms.border_contrast_medium,
+        a.border,
+        a.rounded_md,
+        a.mb_md,
+        a.p_2xs,
+      ]}>
       {' '}
       <PostHider
         key={label}
@@ -285,7 +283,7 @@ function MockPost({
           <View style={[a.flex_1]}>
             <View style={[a.flex_row]}>
               <P style={[a.font_bold]}>Bob Robertson </P>
-              <P style={t.atoms.text_contrast_500}>
+              <P style={t.atoms.text_contrast_low}>
                 @bob.bsky.social &middot; 5m
               </P>
             </View>
@@ -302,7 +300,7 @@ function MockPost({
               moderationDecisions={moderation.decisions}>
               <View
                 style={[
-                  t.atoms.border,
+                  t.atoms.border_contrast_medium,
                   a.border,
                   a.rounded_md,
                   a.flex_col,
@@ -312,7 +310,7 @@ function MockPost({
                 ]}>
                 <View style={[a.flex_row]}>
                   <P style={[a.font_bold]}>Bob Robertson </P>
-                  <P style={t.atoms.text_contrast_500}>
+                  <P style={t.atoms.text_contrast_low}>
                     @bob.bsky.social &middot; 5m
                   </P>
                 </View>
@@ -341,7 +339,7 @@ function MockAccountCard({
     <View
       key={label}
       style={[
-        t.atoms.border,
+        t.atoms.border_contrast_medium,
         a.border,
         a.rounded_md,
         a.flex_row,
@@ -359,7 +357,7 @@ function MockAccountCard({
         <P style={[a.font_bold]}>
           {sanitizeDisplayName('Bob Robertson', moderation.profile)}{' '}
         </P>
-        <P style={t.atoms.text_contrast_500}>@bob.bsky.social</P>
+        <P style={t.atoms.text_contrast_low}>@bob.bsky.social</P>
         <P>Thought leader or something.</P>
         <ProfileCardPills followedBy={false} moderation={moderation} />
       </View>
@@ -370,19 +368,20 @@ function MockAccountCard({
 function MockAccountScreen({
   label,
   profile,
-  moderation,
 }: {
   label: string
   profile: AppBskyActorDefs.ProfileViewBasic
-  moderation: ProfileModeration
 }) {
   const t = useTheme()
   return (
-    <View key={label} style={[t.atoms.border, a.border, a.mb_md]}>
+    <View
+      key={label}
+      style={[t.atoms.border_contrast_medium, a.border, a.mb_md]}>
       <ProfileHeader
         // @ts-ignore ProfileViewBasic is close enough -prf
         profile={profile}
-        moderation={moderation}
+        moderationOpts={MOCK_MOD_OPTS}
+        descriptionRT={null /*TODO*/}
       />
 
       {/*
@@ -400,12 +399,12 @@ function MockAccountScreen({
         style={[
           a.pb_2xl,
           a.px_xl,
-          t.atoms.border,
+          t.atoms.border_contrast_medium,
           a.border_b,
           {paddingTop: 60},
         ]}>
         <H3>Bob Robertson</H3>
-        <P style={t.atoms.text_contrast_500}>@bob.bsky.social</P>
+        <P style={t.atoms.text_contrast_low}>@bob.bsky.social</P>
         <P>Thought leader or something.</P>
       </View>
       */}
@@ -435,7 +434,7 @@ function Flag({v, label}: {v: boolean | undefined; label: string}) {
           a.align_center,
           a.rounded_xs,
           a.border,
-          t.atoms.border,
+          t.atoms.border_contrast_medium,
           {
             backgroundColor: v ? t.palette.black : t.palette.white,
             width: 14,