Revert "fix: nsfw images now open iimage viewer in compact mode"

src/components/common/Comments/CommentItem.tsx

@@ -1,31 +1,49 @@
-import { Divider, Pressable, useTheme, View, VStack } from "native-base";
+import {
+  Divider,
+  HStack,
+  Pressable,
+  Text,
+  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) {
@@ -42,6 +60,8 @@ function CommentItem({
     onPressOverride,
   });
 
+  const myVote = comment.comment.my_vote;
+
   return (
     <>
       <SwipeableRow
@@ -83,15 +103,42 @@ function CommentItem({
               pl={depth > 2 ? 2 : 0}
               mt={0}
             >
-              <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}
-              />
+              <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>
               {comment.collapsed ? (
                 <CommentCollapsed />
               ) : (
@@ -103,11 +150,40 @@ function CommentItem({
                     instance={getBaseUrl(comment.comment.comment.ap_id)}
                   />
                   {settings.showCommentActions && (
-                    <CommentActions
-                      onVote={commentHook.onVote}
-                      onReply={commentHook.onReply}
-                      myVote={comment.comment.my_vote as ILemmyVote}
-                    />
+                    <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>
                   )}
                 </>
               )}

src/components/common/ImageViewer/ImageExitButton.tsx

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

src/components/common/ImageViewer/ImageViewFooter.tsx

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