Dropdown menu improvements

assets/icons/eye_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3.135 12C5.413 16.088 8.77 18 12 18s6.587-1.912 8.865-6C18.587 7.912 15.23 6 12 6c-3.228 0-6.587 1.912-8.865 6ZM12 4c4.24 0 8.339 2.611 10.888 7.54a1 1 0 0 1 0 .92C20.338 17.388 16.24 20 12 20c-4.24 0-8.339-2.611-10.888-7.54a1 1 0 0 1 0-.92C3.662 6.612 7.76 4 12 4Zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" clip-rule="evenodd"/></svg>

src/components/Menu/index.tsx

@@ -138,7 +138,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
         t.atoms.border_contrast_low,
         {minHeight: 44, paddingVertical: 10},
         style,
-        (focused || pressed) && [t.atoms.bg_contrast_50],
+        (focused || pressed) && !rest.disabled && [t.atoms.bg_contrast_50],
       ]}>
       {children}
     </Pressable>

src/components/Menu/index.web.tsx

@@ -239,12 +239,13 @@ export function Item({children, label, onPress, ...rest}: ItemProps) {
           a.rounded_xs,
           {minHeight: 32, paddingHorizontal: 10},
           web({outline: 0}),
-          (hovered || focused) && [
+          (hovered || focused) &&
-            web({outline: '0 !important'}),
+            !rest.disabled && [
-            t.name === 'light'
+              web({outline: '0 !important'}),
-              ? t.atoms.bg_contrast_25
+              t.name === 'light'
-              : t.atoms.bg_contrast_50,
+                ? t.atoms.bg_contrast_25
-          ],
+                : t.atoms.bg_contrast_50,
+            ],
         ])}
         {...web({
           onMouseEnter,
@@ -268,9 +269,7 @@ export function ItemText({children, style}: ItemTextProps) {
 export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
   const t = useTheme()
   return (
-    <Comp
+    <View
-      size="md"
-      fill={t.atoms.text_contrast_medium.color}
       style={[
         position === 'left' && {
           marginLeft: -2,
@@ -279,8 +278,9 @@ export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
           marginRight: -2,
           marginLeft: 12,
         },
-      ]}
+      ]}>
-    />
+      <Comp size="md" fill={t.atoms.text_contrast_medium.color} />
+    </View>
   )
 }
 

src/components/icons/Eye.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Eye_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3.135 12C5.413 16.088 8.77 18 12 18s6.587-1.912 8.865-6C18.587 7.912 15.23 6 12 6c-3.228 0-6.587 1.912-8.865 6ZM12 4c4.24 0 8.339 2.611 10.888 7.54a1 1 0 0 1 0 .92C20.338 17.388 16.24 20 12 20c-4.24 0-8.339-2.611-10.888-7.54a1 1 0 0 1 0-.92C3.662 6.612 7.76 4 12 4Zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z',
+})

src/state/queries/postgate/index.ts

@@ -6,7 +6,7 @@ import {
 } from '@atproto/api'
 import {useMutation, useQueryClient} from '@tanstack/react-query'
 
-import {networkRetry} from '#/lib/async/retry'
+import {networkRetry, retry} from '#/lib/async/retry'
 import {logger} from '#/logger'
 import {updatePostShadow} from '#/state/cache/post-shadow'
 import {useGetPosts} from '#/state/queries/post'
@@ -36,12 +36,20 @@ export async function getPostgateRecord({
 
   try {
     // TODO don't retry on 404
-    const {data} = await networkRetry(2, () =>
+    const {data} = await retry(
-      agent.api.com.atproto.repo.getRecord({
+      2,
-        repo: urip.host,
+      e => {
-        collection: POSTGATE_COLLECTION,
+        if (e.message.includes(`Could not locate record:`)) {
-        rkey: urip.rkey,
+          return false
-      }),
+        }
+        return true
+      },
+      () =>
+        agent.api.com.atproto.repo.getRecord({
+          repo: urip.host,
+          collection: POSTGATE_COLLECTION,
+          rkey: urip.rkey,
+        }),
     )
 
     if (data.value && AppBskyFeedPostgate.isRecord(data.value)) {

src/view/com/util/forms/PostDropdownBtn.tsx

@@ -54,6 +54,7 @@ import {
   EmojiSad_Stroke2_Corner0_Rounded as EmojiSad,
   EmojiSmile_Stroke2_Corner0_Rounded as EmojiSmile,
 } from '#/components/icons/Emoji'
+import {Eye_Stroke2_Corner0_Rounded as Eye} from '#/components/icons/Eye'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
 import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
 import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
@@ -61,6 +62,7 @@ import {PaperPlane_Stroke2_Corner0_Rounded as Send} from '#/components/icons/Pap
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
+import {Loader} from '#/components/Loader'
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
@@ -138,7 +140,7 @@ let PostDropdownBtn = ({
   })
   const isReplyHiddenByThreadgate = threadgate?.hiddenReplies?.includes(postUri)
 
-  const {mutateAsync: toggleQuoteDetachment} =
+  const {mutateAsync: toggleQuoteDetachment, isPending} =
     useToggleQuoteDetachmentMutation()
 
   const href = React.useMemo(() => {
@@ -440,7 +442,14 @@ let PostDropdownBtn = ({
                     <Menu.ItemIcon icon={EyeSlash} position="right" />
                   </Menu.Item>
                 )}
+              </Menu.Group>
+            </>
+          )}
 
+          {hasSession && (
+            <>
+              <Menu.Divider />
+              <Menu.Group>
                 {!isAuthor && !isPostHidden && rootPostUri && isReply && (
                   <Menu.Item
                     testID="postDropdownHideBtn"
@@ -455,12 +464,16 @@ let PostDropdownBtn = ({
                         ? _(msg`Show reply for everyone`)
                         : _(msg`Hide reply for everyone`)}
                     </Menu.ItemText>
-                    <Menu.ItemIcon icon={EyeSlash} position="right" />
+                    <Menu.ItemIcon
+                      icon={isReplyHiddenByThreadgate ? Eye : EyeSlash}
+                      position="right"
+                    />
                   </Menu.Item>
                 )}
 
                 {quoteEmbed && quoteEmbed.isOwnedByViewer && (
                   <Menu.Item
+                    disabled={isPending}
                     testID="postDropdownHideBtn"
                     label={
                       quoteEmbed.isDetached
@@ -474,7 +487,13 @@ let PostDropdownBtn = ({
                         : _(msg`Detach quote`)}
                     </Menu.ItemText>
                     <Menu.ItemIcon
-                      icon={quoteEmbed.isDetached ? EyeSlash : EyeSlash}
+                      icon={
+                        isPending
+                          ? Loader
+                          : quoteEmbed.isDetached
+                          ? Eye
+                          : EyeSlash
+                      }
                       position="right"
                     />
                   </Menu.Item>