Merge Release 2.4.0

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "app.vger.voyager"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 237
-        versionName "2.3.1"
+        versionCode 238
+        versionName "2.4.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

ios/App/App/Info.plist

@@ -17,7 +17,7 @@
     <key>CFBundlePackageType</key>
     <string>APPL</string>
     <key>CFBundleShortVersionString</key>
-    <string>2.3.1</string>
+    <string>2.4.0</string>
     <key>CFBundleURLTypes</key>
     <array>
       <dict>
@@ -32,7 +32,7 @@
       </dict>
     </array>
     <key>CFBundleVersion</key>
-    <string>237</string>
+    <string>238</string>
     <key>ITSAppUsesNonExemptEncryption</key>
     <false/>
     <key>LSRequiresIPhoneOS</key>

package.json

@@ -2,7 +2,7 @@
   "name": "voyager",
   "description": "A progressive webapp Lemmy client",
   "private": true,
-  "version": "2.3.1",
+  "version": "2.4.0",
   "type": "module",
   "packageManager": "pnpm@8.15.6+sha256.01c01eeb990e379b31ef19c03e9d06a14afa5250b82e81303f88721c99ff2e6f",
   "scripts": {

src/features/comment/CommentContent.tsx

@@ -1,7 +1,7 @@
 import { Comment, Post } from "lemmy-js-client";
 import { useMemo } from "react";
 import CommentMarkdown from "./CommentMarkdown";
-import CommentLinks from "./links/CommentLinks";
+import CommentLinks from "./CommentLinks";
 import { useAppSelector } from "../../store";
 
 interface CommentContentProps {

src/features/comment/links/CommentLinks.tsx → src/features/comment/CommentLinks.tsx

@@ -2,13 +2,13 @@ import { useMemo } from "react";
 import { unified } from "unified";
 import { SKIP, visit } from "unist-util-visit";
 import remarkParse from "remark-parse";
-import CommentLink from "./CommentLink";
+import CommentLink from "../post/link/CommentLink";
 import { styled } from "@linaria/react";
-import customRemarkGfm from "../../shared/markdown/customRemarkGfm";
-import { useAppSelector } from "../../../store";
+import customRemarkGfm from "../shared/markdown/customRemarkGfm";
+import { useAppSelector } from "../../store";
 import { Text } from "mdast";
 import { uniqBy } from "lodash";
-import { isValidUrl } from "../../../helpers/url";
+import { isValidUrl } from "../../helpers/url";
 import spoiler from "@aeharding/remark-lemmy-spoiler";
 
 const Container = styled.div`

src/features/inbox/SendMessageBox.tsx

@@ -0,0 +1,139 @@
+import { styled } from "@linaria/react";
+import { MaxWidthContainer } from "../shared/AppContent";
+import TextareaAutosize from "react-textarea-autosize";
+import { IonIcon } from "@ionic/react";
+import { KeyboardEvent, useCallback, useState } from "react";
+import useClient from "../../helpers/useClient";
+import useAppToast from "../../helpers/useAppToast";
+import { receivedMessages } from "./inboxSlice";
+import { useAppDispatch } from "../../store";
+import { arrowUp } from "ionicons/icons";
+
+const MaxSizeContainer = styled(MaxWidthContainer)`
+  height: 100%;
+`;
+
+const SendContainer = styled.div`
+  position: relative;
+
+  padding: 0.5rem;
+
+  background: var(
+    --ion-tab-bar-background,
+    var(--ion-background-color-step-50, #f7f7f7)
+  );
+  border-top: 1px solid
+    var(
+      --ion-tab-bar-border-color,
+      var(
+        --ion-border-color,
+        var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2))
+      )
+    );
+`;
+
+const InputContainer = styled.div`
+  position: relative;
+
+  display: flex;
+`;
+
+const Input = styled(TextareaAutosize)`
+  border: 1px solid var(--ion-color-medium);
+  border-radius: 1rem;
+
+  // Exact px measurements to prevent
+  // pixel rounding browser inconsistencies
+  padding: 8px 1rem;
+  line-height: 18px;
+  font-size: 16px;
+
+  background: var(--ion-background-color);
+  color: var(--ion-text-color);
+  outline: none;
+
+  width: 100%;
+  resize: none;
+  appearance: none;
+`;
+
+const SendButton = styled(IonIcon)`
+  position: absolute;
+  bottom: calc(36px / 2);
+  transform: translateY(50%);
+  right: 4px;
+  background: var(--ion-color-primary);
+  height: 21px;
+  width: 21px;
+  border-radius: 50%;
+  padding: 3px;
+  color: white;
+`;
+
+interface SendMessageBoxProps {
+  recipientId: number;
+}
+
+export default function SendMessageBox({ recipientId }: SendMessageBoxProps) {
+  const dispatch = useAppDispatch();
+  const [loading, setLoading] = useState(false);
+  const [value, setValue] = useState("");
+  const client = useClient();
+  const presentToast = useAppToast();
+
+  const send = useCallback(async () => {
+    setLoading(true);
+
+    let message;
+
+    try {
+      message = await client.createPrivateMessage({
+        content: value,
+        recipient_id: recipientId,
+      });
+    } catch (error) {
+      presentToast({
+        message: `Message failed to send. Please try again`,
+        color: "danger",
+      });
+      setLoading(false);
+      throw error;
+    }
+
+    dispatch(receivedMessages([message.private_message_view]));
+
+    setLoading(false);
+    setValue("");
+  }, [client, dispatch, presentToast, recipientId, value]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      if (e.key !== "Enter") return;
+
+      send();
+    },
+    [send],
+  );
+
+  return (
+    <SendContainer>
+      <MaxSizeContainer>
+        <InputContainer>
+          <Input
+            disabled={loading}
+            placeholder="Message"
+            onChange={(e) => setValue(e.target.value)}
+            value={value}
+            rows={1}
+            maxRows={5}
+            onKeyDown={onKeyDown}
+          />
+          {value.trim() && !loading && (
+            <SendButton icon={arrowUp} onClick={send} />
+          )}
+        </InputContainer>
+      </MaxSizeContainer>
+    </SendContainer>
+  );
+}

src/features/media/gallery/GalleryMedia.tsx

@@ -54,6 +54,8 @@ export default forwardRef<
       )
         return;
 
+      if (e.target instanceof HTMLElement && e.target.closest("a")) return;
+
       open(e.currentTarget, props.src, post, animationType);
 
       // marking read happens after the gallery has finished animating

src/features/post/detail/PostHeader.tsx

@@ -11,7 +11,6 @@ import { useAppDispatch, useAppSelector } from "../../../store";
 import useAppToast from "../../../helpers/useAppToast";
 import { findLoneImage } from "../../../helpers/markdown";
 import Markdown from "../../shared/markdown/Markdown";
-import Embed from "../shared/Embed";
 import InlineMarkdown from "../../shared/markdown/InlineMarkdown";
 import Nsfw, { isNsfw } from "../../labels/Nsfw";
 import { megaphone } from "ionicons/icons";
@@ -30,6 +29,7 @@ import { AppContext } from "../../auth/AppContext";
 import AnimateHeight from "react-animate-height";
 import useIsPostUrlMedia from "../useIsPostUrlMedia";
 import { findIonContentScrollView } from "../../../helpers/ionic";
+import PostLink from "../link/PostLink";
 
 const BorderlessIonItem = styled(IonItem)`
   --padding-start: 0;
@@ -64,7 +64,7 @@ const StyledMarkdown = styled(Markdown)`
   }
 `;
 
-const StyledEmbed = styled(Embed)`
+const StyledPostLink = styled(PostLink)`
   margin: 0 0 12px;
 `;
 
@@ -214,7 +214,7 @@ function PostHeader({
     if (post.post.body?.trim() && !usedLoneImage) {
       return (
         <>
-          {post.post.url && !urlIsMedia && <Embed post={post} />}
+          {post.post.url && !urlIsMedia && <PostLink post={post} />}
           <StyledMarkdown className="collapse-md-margins" id={post.post.ap_id}>
             {post.post.body}
           </StyledMarkdown>
@@ -223,7 +223,7 @@ function PostHeader({
     }
 
     if (post.post.url && !urlIsMedia) {
-      return <StyledEmbed post={post} />;
+      return <StyledPostLink post={post} />;
     }
   }, [post, crosspostUrl, markdownLoneImage, urlIsMedia]);
 

src/features/post/inFeed/large/LargePostContents.tsx

@@ -6,10 +6,10 @@ import { findLoneImage } from "../../../../helpers/markdown";
 import { useAppSelector } from "../../../../store";
 import { isNsfwBlurred } from "../../../labels/Nsfw";
 import LargeFeedPostMedia from "./media/LargeFeedPostMedia";
-import Embed from "../../shared/Embed";
 import InlineMarkdown from "../../../shared/markdown/InlineMarkdown";
 import { InFeedContext } from "../../../feed/Feed";
 import useIsPostUrlMedia from "../../useIsPostUrlMedia";
+import PostLink from "../../link/PostLink";
 
 const PostBody = styled.div`
   font-size: 0.8em;
@@ -78,7 +78,7 @@ export default function LargePostContents({ post }: LargePostContentsProps) {
    * Embedded video, image with a thumbanil
    */
   if (post.post.thumbnail_url && post.post.url) {
-    return <Embed post={post} />;
+    return <PostLink post={post} />;
   }
 
   /**
@@ -87,7 +87,7 @@ export default function LargePostContents({ post }: LargePostContentsProps) {
   if (post.post.body?.trim()) {
     return (
       <>
-        {post.post.url && <Embed post={post} />}
+        {post.post.url && <PostLink post={post} />}
 
         <PostBody className={hasBeenRead ? postBodyReadCss : postBodyUnreadCss}>
           <InlineMarkdown>{post.post.body}</InlineMarkdown>
@@ -97,6 +97,6 @@ export default function LargePostContents({ post }: LargePostContentsProps) {
   }
 
   if (post.post.url) {
-    return <Embed post={post} />;
+    return <PostLink post={post} />;
   }
 }

src/features/post/inFeed/large/media/LargeFeedMedia.tsx

@@ -26,8 +26,9 @@ export default function LargeFeedMedia({
   blur,
   className,
   style: baseStyle,
+  defaultAspectRatio,
   ...props
-}: PostGalleryImgProps & { blur: boolean }) {
+}: PostGalleryImgProps & { blur?: boolean; defaultAspectRatio?: number }) {
   const dispatch = useAppDispatch();
   const [mediaRef, currentAspectRatio] = useMediaLoadObserver(src);
 
@@ -59,6 +60,7 @@ export default function LargeFeedMedia({
       className={className}
       style={baseStyle}
       state={placeholderState}
+      defaultAspectRatio={defaultAspectRatio}
     >
       <StyledPostMedia
         {...props}