fix: nsfw images now open iimage viewer in compact mode (#699)

src/components/common/Comments/CommentActions.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { HStack, useTheme } from "native-base";
+import { IconMessagePlus } from "tabler-icons-react-native";
+import IconButtonWithText from "../IconButtonWithText";
+import VoteButton from "../Vote/VoteButton";
+import { ILemmyVote } from "../../../types/lemmy/ILemmyVote";
+
+interface IProps {
+  onReply: () => unknown;
+  onVote: (value: ILemmyVote) => unknown;
+  myVote: ILemmyVote;
+}
+
+function CommentActions({ onReply, onVote, myVote }: IProps) {
+  const theme = useTheme();
+
+  return (
+    <HStack justifyContent="flex-end" space={2} mb={1}>
+      <IconButtonWithText
+        onPressHandler={onReply}
+        icon={<IconMessagePlus color={theme.colors.app.accent} size={22} />}
+      />
+      <VoteButton
+        onPressHandler={async () => (myVote === 1 ? onVote(0) : onVote(1))}
+        type="upvote"
+        isVoted={myVote === 1}
+        isAccented
+        iconSize={22}
+      />
+      <VoteButton
+        onPressHandler={async () => (myVote === -1 ? onVote(0) : onVote(-1))}
+        type="downvote"
+        isVoted={myVote === -1}
+        isAccented
+        iconSize={22}
+        textSize="md"
+      />
+    </HStack>
+  );
+}
+
+export default React.memo(CommentActions);

src/components/common/Comments/CommentHeader.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { HStack, Text, useTheme } from "native-base";
+import { IconChevronDown, IconDots } from "tabler-icons-react-native";
+import { CommentAggregates, Person } from "lemmy-js-client";
+import AvatarUsername from "../AvatarUsername";
+import SmallVoteIcons from "../Vote/SmallVoteIcons";
+import { ILemmyVote } from "../../../types/lemmy/ILemmyVote";
+import IconButtonWithText from "../IconButtonWithText";
+import { timeFromNowShort } from "../../../helpers/TimeHelper";
+
+interface IProps {
+  creator: Person;
+  counts: CommentAggregates;
+  myVote: ILemmyVote;
+  collapsed: boolean;
+  published: string;
+  opId: number;
+  onButtonPress: () => unknown;
+}
+
+function CommentHeader({
+  creator,
+  counts,
+  myVote,
+  collapsed,
+  published,
+  opId,
+  onButtonPress,
+}: IProps) {
+  const theme = useTheme();
+  return (
+    <HStack
+      space={2}
+      justifyContent="space-between"
+      alignItems="center"
+      mb={-3}
+      pb={2}
+    >
+      <AvatarUsername creator={creator} opId={opId}>
+        <SmallVoteIcons
+          upvotes={counts.upvotes}
+          downvotes={counts.downvotes}
+          myVote={myVote}
+        />
+      </AvatarUsername>
+      {!collapsed ? (
+        <HStack alignItems="center" space={2}>
+          <IconButtonWithText
+            onPressHandler={onButtonPress}
+            icon={<IconDots size={24} color={theme.colors.app.textSecondary} />}
+          />
+          <Text color={theme.colors.app.textSecondary}>
+            {timeFromNowShort(published)}
+          </Text>
+        </HStack>
+      ) : (
+        <IconChevronDown size={24} color={theme.colors.app.textSecondary} />
+      )}
+    </HStack>
+  );
+}
+
+export default React.memo(CommentHeader);

src/components/common/Comments/CommentItem.tsx

@@ -1,49 +1,31 @@
-import {
-  Divider,
-  HStack,
-  Pressable,
-  Text,
-  useTheme,
-  View,
-  VStack,
-} from "native-base";
+import { Divider, Pressable, useTheme, View, VStack } from "native-base";
 import React from "react";
-import {
-  IconChevronDown,
-  IconDots,
-  IconMessagePlus,
-} from "tabler-icons-react-native";
-import { timeFromNowShort } from "../../../helpers/TimeHelper";
 import useComment from "../../../hooks/post/useComment";
 import ILemmyComment from "../../../types/lemmy/ILemmyComment";
 import { ILemmyVote } from "../../../types/lemmy/ILemmyVote";
-import AvatarUsername from "../AvatarUsername";
-import IconButtonWithText from "../IconButtonWithText";
 import { ReplyOption } from "../SwipeableRow/ReplyOption";
 import { SwipeableRow } from "../SwipeableRow/SwipeableRow";
 import { VoteOption } from "../SwipeableRow/VoteOption";
-import SmallVoteIcons from "../Vote/SmallVoteIcons";
-import VoteButton from "../Vote/VoteButton";
 import CommentBody from "./CommentBody";
 import CommentCollapsed from "./CommentCollapsed";
 import { selectSettings } from "../../../slices/settings/settingsSlice";
 import { useAppSelector } from "../../../../store";
 import { getBaseUrl } from "../../../helpers/LinkHelper";
+import CommentActions from "./CommentActions";
+import CommentHeader from "./CommentHeader";
 
 interface IProps {
   comment: ILemmyComment;
   setComments: any;
   onPressOverride?: () => Promise<void> | void;
   depth?: number;
-  opId?: number;
   isUnreadReply?: boolean;
 }
 
 function CommentItem({
   comment,
   setComments,
   onPressOverride,
-  opId,
   depth,
   isUnreadReply,
 }: IProps) {
@@ -60,8 +42,6 @@ function CommentItem({
     onPressOverride,
   });
 
-  const myVote = comment.comment.my_vote;
-
   return (
     <>
       <SwipeableRow
@@ -103,42 +83,15 @@ function CommentItem({
               pl={depth > 2 ? 2 : 0}
               mt={0}
             >
-              <HStack
-                space={2}
-                justifyContent="space-between"
-                alignItems="center"
-                mb={-3}
-                pb={2}
-              >
-                <AvatarUsername creator={comment.comment.creator} opId={opId}>
-                  <SmallVoteIcons
-                    upvotes={comment.comment.counts.upvotes}
-                    downvotes={comment.comment.counts.downvotes}
-                    myVote={comment.comment.my_vote as ILemmyVote}
-                  />
-                </AvatarUsername>
-                {!comment.collapsed ? (
-                  <HStack alignItems="center" space={2}>
-                    <IconButtonWithText
-                      onPressHandler={commentHook.onCommentLongPress}
-                      icon={
-                        <IconDots
-                          size={24}
-                          color={theme.colors.app.textSecondary}
-                        />
-                      }
-                    />
-                    <Text color={theme.colors.app.textSecondary}>
-                      {timeFromNowShort(comment.comment.comment.published)}
-                    </Text>
-                  </HStack>
-                ) : (
-                  <IconChevronDown
-                    size={24}
-                    color={theme.colors.app.textSecondary}
-                  />
-                )}
-              </HStack>
+              <CommentHeader
+                myVote={comment.comment.my_vote as ILemmyVote}
+                collapsed={comment.collapsed}
+                counts={comment.comment.counts}
+                opId={comment.comment.post.creator_id}
+                creator={comment.comment.creator}
+                onButtonPress={commentHook.onCommentLongPress}
+                published={comment.comment.comment.published}
+              />
               {comment.collapsed ? (
                 <CommentCollapsed />
               ) : (
@@ -150,40 +103,11 @@ function CommentItem({
                     instance={getBaseUrl(comment.comment.comment.ap_id)}
                   />
                   {settings.showCommentActions && (
-                    <HStack justifyContent="flex-end" space={2} mb={1}>
-                      <IconButtonWithText
-                        onPressHandler={commentHook.onReply}
-                        icon={
-                          <IconMessagePlus
-                            color={theme.colors.app.accent}
-                            size={22}
-                          />
-                        }
-                      />
-                      <VoteButton
-                        onPressHandler={async () =>
-                          myVote === 1
-                            ? commentHook.onVote(0)
-                            : commentHook.onVote(1)
-                        }
-                        type="upvote"
-                        isVoted={myVote === 1}
-                        isAccented
-                        iconSize={22}
-                      />
-                      <VoteButton
-                        onPressHandler={async () =>
-                          myVote === -1
-                            ? commentHook.onVote(0)
-                            : commentHook.onVote(-1)
-                        }
-                        type="downvote"
-                        isVoted={myVote === -1}
-                        isAccented
-                        iconSize={22}
-                        textSize="md"
-                      />
-                    </HStack>
+                    <CommentActions
+                      onVote={commentHook.onVote}
+                      onReply={commentHook.onReply}
+                      myVote={comment.comment.my_vote as ILemmyVote}
+                    />
                   )}
                 </>
               )}

src/components/common/ImageViewer/ImageExitButton.tsx

@@ -5,19 +5,11 @@ import { IconX } from "tabler-icons-react-native";
 
 interface IProps {
   onPress: () => void;
-  visible: boolean;
 }
 
-function ImageExitButton({ onPress, visible }: IProps) {
+function ImageExitButton({ onPress }: IProps) {
   return (
-    <View
-      style={[
-        styles.buttonPosition,
-        {
-          opacity: visible ? 0.5 : 0,
-        },
-      ]}
-    >
+    <View style={[styles.buttonPosition]}>
       <Pressable onPress={onPress} hitSlop={10} padding={1.5}>
         <View>
           <IconX color="white" />

src/components/common/ImageViewer/ImageViewFooter.tsx

@@ -9,10 +9,9 @@ import { saveImage } from "../../../helpers/ImageHelper";
 
 interface ImageViewFooterProps {
   source: string;
-  visible: boolean;
 }
 
-function ImageViewFooter({ source, visible }: ImageViewFooterProps) {
+function ImageViewFooter({ source }: ImageViewFooterProps) {
   const theme = useTheme();
 
   const onSave = async () => {
@@ -33,13 +32,7 @@ function ImageViewFooter({ source, visible }: ImageViewFooterProps) {
   };
 
   return (
-    <View
-      position="absolute"
-      bottom={0}
-      width="100%"
-      zIndex={2}
-      opacity={visible ? 1 : 0}
-    >
+    <View position="absolute" bottom={0} width="100%" zIndex={2}>
       <HStack
         flex={1}
         mb={10}