Merge Release 2.1.0

.dockerignore

@@ -5,6 +5,8 @@
 .prettierignore
 .vscode/
 
+*.tsbuildinfo
+
 node_modules
 *.md
 dist

.gitignore

@@ -32,5 +32,8 @@ yarn-error.log*
 
 vite.config.ts.timestamp-*
 
+# Typescript Incremental Cache
+*.tsbuildinfo
+
 # fly.io
 fly.toml

android/app/build.gradle

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

fastlane/metadata/android/en-US/full_description.txt

@@ -13,4 +13,5 @@ What does Voyager offer?
 - A beautiful private messages UI
 - Settings to customize Voyager to your desire
 - Quick community switcher
+- Mod tools
 - Open source: code is available on Github

ios/App/App/Info.plist

@@ -17,7 +17,7 @@
     <key>CFBundlePackageType</key>
     <string>APPL</string>
     <key>CFBundleShortVersionString</key>
-    <string>2.0.0</string>
+    <string>2.1.0</string>
     <key>CFBundleURLTypes</key>
     <array>
       <dict>
@@ -32,7 +32,7 @@
       </dict>
     </array>
     <key>CFBundleVersion</key>
-    <string>228</string>
+    <string>229</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.0.0",
+  "version": "2.1.0",
   "type": "module",
   "packageManager": "pnpm@8.15.5+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589",
   "scripts": {

src/core/listeners/index.ts

@@ -2,3 +2,4 @@ import "./androidSafeArea";
 import "./keyboardPageResizer";
 import "./statusTap";
 import "./network/listener";
+import "./ionActivatable";

src/core/listeners/ionActivatable.ts

@@ -0,0 +1,13 @@
+/**
+ * This prevents the `ion-activatable` tap highlight
+ * when tapping buttons and other things within the activatable ion-item
+ **/
+function onPreventIonicTapClick(e: MouseEvent | TouchEvent) {
+  if (!(e.target instanceof HTMLElement)) return;
+  if (!e.target.closest("ion-button,a,img,input,button")) return;
+
+  document.dispatchEvent(new CustomEvent("ionGestureCaptured"));
+}
+
+document.addEventListener("touchstart", onPreventIonicTapClick);
+document.addEventListener("mousedown", onPreventIonicTapClick);

src/core/theme/variables.ts

@@ -117,23 +117,27 @@ export const lightVariables = css`
         --ion-color-primary: var(--app-primary);
         --ion-color-primary-fixed: #3880ff; // always blue always blue!
 
-        --ion-item-border-color: #ddd;
-      }
+        ion-item {
+          // default ionic light mode opacity is too harsh
+          --background-activated-opacity: 0.06;
+        }
 
-      &:root.ios .grey-bg {
-        --ion-background-color: var(--ion-background-color-step-50, #f2f2f7);
-      }
-      &:root.ios .grey-bg ion-header {
-        --opacity: 0;
-      }
-      &:root.ios .grey-bg ion-modal ion-content {
-        --background: #fff;
-      }
-      &:root.ios .grey-bg ion-item {
-        --ion-background-color: #fff;
-      }
-      &:root.ios .grey-bg ion-item-sliding {
-        background: #fff;
+        &.ios .grey-bg {
+          --ion-background-color: var(--ion-background-color-step-50, #f2f2f7);
+
+          ion-header {
+            --opacity: 0;
+          }
+          ion-modal ion-content {
+            --background: #fff;
+          }
+          ion-item {
+            --ion-background-color: #fff;
+          }
+          ion-item-sliding {
+            background: #fff;
+          }
+        }
       }
     }
   }

src/features/comment/Comment.tsx

@@ -17,6 +17,8 @@ import { styled } from "@linaria/react";
 import { PositionedContainer } from "./elements/PositionedContainer";
 import CommentContainer from "./elements/CommentContainer";
 import CommentHeader, { isStubComment } from "./CommentHeader";
+import { cx } from "@linaria/core";
+import { isTouchDevice } from "../../helpers/device";
 
 export const CustomIonItem = styled(IonItem)`
   scroll-margin-bottom: 35vh;
@@ -88,10 +90,10 @@ function Comment({
 
   const stub = isStubComment(comment, canModerate);
 
-  const collapsed =
-    (showCollapsedComment || stub) && !commentView.counts.child_count
-      ? false
-      : _collapsed;
+  const cannotCollapse =
+    (showCollapsedComment || stub) && !commentView.counts.child_count;
+
+  const collapsed = cannotCollapse ? false : _collapsed;
 
   const onCommentLongPress = useCallback(() => {
     commentEllipsisHandleRef.current?.present();
@@ -111,14 +113,18 @@ function Comment({
       collapsed={!!collapsed}
     >
       <CustomIonItem
+        mode="ios" // Use iOS style activatable tap highlight
+        className={cx(
+          !cannotCollapse && isTouchDevice() && "ion-activatable",
+          `comment-${comment.id}`,
+        )}
         routerLink={routerLink}
         href={undefined}
         onClick={(e) => {
           if (preventOnClickNavigationBug(e)) return;
 
           onClick?.(e);
         }}
-        className={`comment-${comment.id}`}
         {...bind()}
       >
         <ModeratableItem

src/features/icons/index.ts

@@ -14,3 +14,6 @@ export { default as faceid } from "./svg/faceid.svg";
 export { default as quote } from "./svg/quote.svg";
 export { default as listUnordered } from "./svg/listUnordered.svg";
 export { default as listOrdered } from "./svg/listOrdered.svg";
+export { default as superscript } from "./svg/superscript.svg";
+export { default as subscript } from "./svg/subscript.svg";
+export { default as strikethrough } from "./svg/strikethrough.svg";

src/features/inbox/InboxItem.tsx

@@ -18,7 +18,8 @@ import SlidingInbox from "../shared/sliding/SlidingInbox";
 import useAppToast from "../../helpers/useAppToast";
 import InboxItemMoreActions from "./InboxItemMoreActions";
 import { styled } from "@linaria/react";
-import { css } from "@linaria/core";
+import { css, cx } from "@linaria/core";
+import { isTouchDevice } from "../../helpers/device";
 
 const Hr = styled.div`
   ${maxWidthCss}
@@ -221,7 +222,11 @@ export default function InboxItem({ item }: InboxItemProps) {
 
   const contents = (
     <StyledIonItem
-      className={!read ? itemUnreadCss : undefined}
+      mode="ios" // Use iOS style activatable tap highlight
+      className={cx(
+        !read && itemUnreadCss,
+        isTouchDevice() && "ion-activatable",
+      )}
       routerLink={getLink()}
       href={undefined}
       detail={false}

src/features/labels/Edited.tsx

@@ -4,8 +4,9 @@ import { pencil } from "ionicons/icons";
 import { MouseEvent, useMemo } from "react";
 import { formatRelative } from "./Ago";
 import { styled } from "@linaria/react";
+import { PlainButton } from "../shared/PlainButton";
 
-const Container = styled.div`
+const Container = styled(PlainButton)`
   display: flex;
   align-items: center;
   gap: inherit;

src/features/labels/Vote.tsx

@@ -19,8 +19,9 @@ import useAppToast from "../../helpers/useAppToast";
 import { formatNumber } from "../../helpers/number";
 import { styled } from "@linaria/react";
 import { getVoteErrorMessage } from "../../helpers/lemmyErrors";
+import { PlainButton } from "../shared/PlainButton";
 
-const Container = styled.div<{
+const Container = styled(PlainButton)<{
   vote?: 1 | -1 | 0;
   voteRepresented?: 1 | -1;
 }>`

src/features/post/inFeed/Post.tsx

@@ -15,6 +15,8 @@ import { useLongPress } from "use-long-press";
 import usePostActions from "../shared/usePostActions";
 import { filterEvents } from "../../../helpers/longPress";
 import { preventOnClickNavigationBug } from "../../../helpers/ionic";
+import { cx } from "@linaria/core";
+import { isTouchDevice } from "../../../helpers/device";
 
 const CustomIonItem = styled(IonItem)`
   --padding-start: 0;
@@ -111,6 +113,8 @@ function Post(props: PostProps) {
       >
         {/* href=undefined: Prevent drag failure on firefox */}
         <CustomIonItem
+          mode="ios" // Use iOS style activatable tap highlight
+          className={cx(isTouchDevice() && "ion-activatable")}
           detail={false}
           routerLink={buildGeneralBrowseLink(
             `/c/${getHandle(props.post.community)}/comments/${

src/features/post/inFeed/compact/CompactPost.tsx

@@ -23,6 +23,7 @@ import useCrosspostUrl from "../../shared/useCrosspostUrl";
 import { useInModqueue } from "../../../../routes/pages/shared/ModqueuePage";
 import { PageTypeContext } from "../../../feed/PageTypeContext";
 import { styled } from "@linaria/react";
+import { isUrlImage, parseUrlForDisplay } from "../../../../helpers/url";
 
 const Container = styled.div`
   width: 100%;
@@ -126,6 +127,21 @@ const EndDetails = styled.div`
   margin-left: auto;
 `;
 
+const Domain = styled.span`
+  white-space: nowrap;
+
+  font-size: 0.9em;
+  opacity: 0.8;
+
+  display: inline-flex;
+  max-width: 100%;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
 export default function CompactPost({ post }: PostProps) {
   const compactThumbnailPositionType = useAppSelector(
     (state) => state.settings.appearance.compact.thumbnailsPosition,
@@ -146,6 +162,14 @@ export default function CompactPost({ post }: PostProps) {
     post.read;
   const nsfw = useMemo(() => isNsfw(post), [post]);
 
+  const [domain] = useMemo(
+    () =>
+      post.post.url && !isUrlImage(post.post.url)
+        ? parseUrlForDisplay(post.post.url)
+        : [],
+    [post],
+  );
+
   return (
     <ModeratableItem itemView={post}>
       <Container>
@@ -165,6 +189,13 @@ export default function CompactPost({ post }: PostProps) {
             )}
             <Title isRead={hasBeenRead}>
               <InlineMarkdown>{post.post.name}</InlineMarkdown>{" "}
+              {domain && (
+                <>
+                  <Domain>
+                    (<span>{domain}</span>)
+                  </Domain>{" "}
+                </>
+              )}
               {nsfw && <Nsfw />}
             </Title>
             <Aside isRead={hasBeenRead}>

src/features/shared/Url.tsx

@@ -1,5 +1,6 @@
 import { styled } from "@linaria/react";
 import { useMemo } from "react";
+import { parseUrlForDisplay } from "../../helpers/url";
 
 const Rest = styled.span`
   opacity: 0.6;
@@ -10,29 +11,10 @@ interface UrlProps {
 }
 
 export default function Url({ children }: UrlProps) {
-  const [domain, rest] = useMemo(() => {
-    let url;
-
-    try {
-      url = new URL(children);
-    } catch (error) {
-      console.error(error);
-      return [];
-    }
-
-    const protocolPrefix = url.protocol === "https:" ? "" : `${url.protocol}//`;
-    const normalizedHost = (() => {
-      if (protocolPrefix) return url.host;
-      if (url.host.startsWith("www.")) return url.host.slice(4);
-
-      return url.host;
-    })();
-
-    return [
-      `${protocolPrefix}${normalizedHost}`,
-      `${url.pathname}${url.search}${url.hash}`,
-    ];
-  }, [children]);
+  const [domain, rest] = useMemo(
+    () => parseUrlForDisplay(children),
+    [children],
+  );
 
   if (!domain || !rest) return;