Show QP button but disable it

src/components/Menu/context.tsx

@@ -1,8 +1,12 @@
 import React from 'react'
 
-import type {ContextType} from '#/components/Menu/types'
+import type {ContextType, ItemContextType} from '#/components/Menu/types'
 
 export const Context = React.createContext<ContextType>({
   // @ts-ignore
   control: null,
 })
+
+export const ItemContext = React.createContext<ItemContextType>({
+  disabled: false,
+})

src/components/Menu/index.tsx

@@ -9,7 +9,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {Context} from '#/components/Menu/context'
+import {Context, ItemContext} from '#/components/Menu/context'
 import {
   ContextType,
   GroupProps,
@@ -146,13 +146,16 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
         style,
         (focused || pressed) && !rest.disabled && [t.atoms.bg_contrast_50],
       ]}>
-      {children}
+      <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
+        {children}
+      </ItemContext.Provider>
     </Pressable>
   )
 }
 
 export function ItemText({children, style}: ItemTextProps) {
   const t = useTheme()
+  const {disabled} = React.useContext(ItemContext)
   return (
     <Text
       numberOfLines={1}
@@ -161,9 +164,10 @@ export function ItemText({children, style}: ItemTextProps) {
         a.flex_1,
         a.text_md,
         a.font_bold,
-        t.atoms.text_contrast_medium,
+        t.atoms.text_contrast_high,
         {paddingTop: 3},
         style,
+        disabled && t.atoms.text_contrast_low,
       ]}>
       {children}
     </Text>
@@ -172,7 +176,17 @@ export function ItemText({children, style}: ItemTextProps) {
 
 export function ItemIcon({icon: Comp}: ItemIconProps) {
   const t = useTheme()
-  return <Comp size="lg" fill={t.atoms.text_contrast_medium.color} />
+  const {disabled} = React.useContext(ItemContext)
+  return (
+    <Comp
+      size="lg"
+      fill={
+        disabled
+          ? t.atoms.text_contrast_low.color
+          : t.atoms.text_contrast_medium.color
+      }
+    />
+  )
 }
 
 export function Group({children, style}: GroupProps) {

src/components/Menu/index.web.tsx

@@ -9,7 +9,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {atoms as a, flatten, useTheme, web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {Context} from '#/components/Menu/context'
+import {Context, ItemContext} from '#/components/Menu/context'
 import {
   ContextType,
   GroupProps,
@@ -251,7 +251,9 @@ export function Item({children, label, onPress, ...rest}: ItemProps) {
           onMouseEnter,
           onMouseLeave,
         })}>
-        {children}
+        <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
+          {children}
+        </ItemContext.Provider>
       </Pressable>
     </DropdownMenu.Item>
   )
@@ -259,8 +261,16 @@ export function Item({children, label, onPress, ...rest}: ItemProps) {
 
 export function ItemText({children, style}: ItemTextProps) {
   const t = useTheme()
+  const {disabled} = React.useContext(ItemContext)
   return (
-    <Text style={[a.flex_1, a.font_bold, t.atoms.text_contrast_high, style]}>
+    <Text
+      style={[
+        a.flex_1,
+        a.font_bold,
+        t.atoms.text_contrast_high,
+        style,
+        disabled && t.atoms.text_contrast_low,
+      ]}>
       {children}
     </Text>
   )
@@ -268,6 +278,7 @@ export function ItemText({children, style}: ItemTextProps) {
 
 export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
   const t = useTheme()
+  const {disabled} = React.useContext(ItemContext)
   return (
     <View
       style={[
@@ -279,7 +290,14 @@ export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
           marginLeft: 12,
         },
       ]}>
-      <Comp size="md" fill={t.atoms.text_contrast_medium.color} />
+      <Comp
+        size="md"
+        fill={
+          disabled
+            ? t.atoms.text_contrast_low.color
+            : t.atoms.text_contrast_medium.color
+        }
+      />
     </View>
   )
 }

src/components/Menu/types.ts

@@ -1,18 +1,22 @@
 import React from 'react'
 import {
+  AccessibilityProps,
   GestureResponderEvent,
   PressableProps,
-  AccessibilityProps,
 } from 'react-native'
 
-import {Props as SVGIconProps} from '#/components/icons/common'
-import * as Dialog from '#/components/Dialog'
 import {TextStyleProp, ViewStyleProp} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {Props as SVGIconProps} from '#/components/icons/common'
 
 export type ContextType = {
   control: Dialog.DialogOuterProps['control']
 }
 
+export type ItemContextType = {
+  disabled: boolean
+}
+
 export type RadixPassThroughTriggerProps = {
   id: string
   type: 'button'

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -112,26 +112,31 @@ let RepostButton = ({
                     : _(msg({message: `Repost`, context: 'action'}))}
                 </Text>
               </Button>
-              {embeddingDisabled ? null : (
+              <Button
-                <Button
+                disabled={embeddingDisabled}
-                  testID="quoteBtn"
+                testID="quoteBtn"
-                  style={[a.justify_start, a.px_md]}
+                style={[a.justify_start, a.px_md]}
-                  label={_(msg`Quote post`)}
+                label={
-                  onPress={() => {
+                  embeddingDisabled
-                    playHaptic()
+                    ? _(msg`Quote posts disabled`)
-                    dialogControl.close(() => {
+                    : _(msg`Quote post`)
-                      onQuote()
+                }
-                    })
+                onPress={() => {
-                  }}
+                  playHaptic()
-                  size="large"
+                  dialogControl.close(() => {
-                  variant="ghost"
+                    onQuote()
-                  color="primary">
+                  })
-                  <Quote size="lg" fill={t.palette.primary_500} />
+                }}
-                  <Text style={[a.font_bold, a.text_xl]}>
+                size="large"
-                    {_(msg`Quote post`)}
+                variant="ghost"
-                  </Text>
+                color="primary">
-                </Button>
+                <Quote size="lg" fill={t.palette.primary_500} />
-              )}
+                <Text style={[a.font_bold, a.text_xl]}>
+                  {embeddingDisabled
+                    ? _(msg`Quote posts disabled`)
+                    : _(msg`Quote post`)}
+                </Text>
+              </Button>
             </View>
             <Button
               label={_(msg`Cancel quote post`)}

src/view/com/util/post-ctrls/RepostButton.web.tsx

@@ -77,15 +77,22 @@ export const RepostButton = ({
             </Menu.ItemText>
             <Menu.ItemIcon icon={Repost} position="right" />
           </Menu.Item>
-          {embeddingDisabled ? null : (
+          <Menu.Item
-            <Menu.Item
+            disabled={embeddingDisabled}
-              label={_(msg`Quote post`)}
+            label={
-              testID="repostDropdownQuoteBtn"
+              embeddingDisabled
-              onPress={onQuote}>
+                ? _(msg`Quote posts disabled`)
-              <Menu.ItemText>{_(msg`Quote post`)}</Menu.ItemText>
+                : _(msg`Quote post`)
-              <Menu.ItemIcon icon={Quote} position="right" />
+            }
-            </Menu.Item>
+            testID="repostDropdownQuoteBtn"
-          )}
+            onPress={onQuote}>
+            <Menu.ItemText>
+              {embeddingDisabled
+                ? _(msg`Quote posts disabled`)
+                : _(msg`Quote post`)}
+            </Menu.ItemText>
+            <Menu.ItemIcon icon={Quote} position="right" />
+          </Menu.Item>
         </Menu.Outer>
       </Menu.Root>
     </EventStopper>