Add collapse comment gesture

src/features/comment/CommentTree.tsx

@@ -109,11 +109,11 @@ export default function CommentTree({
   return payload;
 }
 
-function scrollViewUpIfNeeded(target: EventTarget) {
+export function scrollViewUpIfNeeded(target: EventTarget) {
   if (!(target instanceof HTMLElement)) return;
 
   const scrollView = target.closest(".virtual-scroller");
-  const item = target.closest("ion-item");
+  const item = target.closest("ion-item-sliding")?.querySelector("ion-item");
 
   if (!(scrollView instanceof HTMLElement) || !(item instanceof HTMLElement))
     return;

src/features/settings/gestures/SwipeSettings.tsx

@@ -28,7 +28,7 @@ import {
   setDisableRightSwipes,
 } from "./gestureSlice";
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
-import { Dictionary } from "lodash";
+import { Dictionary, startCase } from "lodash";
 import { useState } from "react";
 import { IonActionSheetCustomEvent, OverlayEventDetail } from "@ionic/core";
 import ShortSwipeSvg from "./swipeShort.svg?react";
@@ -42,6 +42,7 @@ import {
   chevronCollapseOutline,
   eyeOffOutline,
   mailUnreadOutline,
+  chevronDownOutline,
 } from "ionicons/icons";
 import { isNative } from "../../../helpers/device";
 
@@ -165,7 +166,8 @@ const swipeIcons = {
   [OSwipeActionAll.Reply]: arrowUndoOutline,
   [OSwipeActionAll.Save]: bookmarkOutline,
   [OSwipeActionAll.Hide]: eyeOffOutline,
-  [OSwipeActionAll.Collapse]: chevronCollapseOutline,
+  [OSwipeActionAll.CollapseToTop]: chevronCollapseOutline,
+  [OSwipeActionAll.Collapse]: chevronDownOutline,
   [OSwipeActionAll.MarkUnread]: mailUnreadOutline,
   [OSwipeActionAll.Share]: shareOutline,
 };
@@ -198,6 +200,10 @@ function SwipeList({
     (state) => state.gesture.swipe.disableRightSwipes,
   );
 
+  function getSelectedLabel(option: string): string {
+    return option === "collapse-to-top" ? "Collapse Top" : startCase(option);
+  }
+
   return (
     <>
       <ListHeader>
@@ -212,6 +218,7 @@ function SwipeList({
           options={options}
           optionIcons={swipeIcons}
           disabled={disableLeftSwipes}
+          getSelectedLabel={getSelectedLabel}
         />
         <Selector
           icon={LongSwipeSvg}
@@ -221,6 +228,7 @@ function SwipeList({
           options={options}
           optionIcons={swipeIcons}
           disabled={disableLeftSwipes}
+          getSelectedLabel={getSelectedLabel}
         />
         <Selector
           icon={ShortSwipeSvg}
@@ -231,6 +239,7 @@ function SwipeList({
           options={options}
           optionIcons={swipeIcons}
           disabled={disableRightSwipes}
+          getSelectedLabel={getSelectedLabel}
         />
         <Selector
           icon={LongSwipeSvg}
@@ -241,6 +250,7 @@ function SwipeList({
           options={options}
           optionIcons={swipeIcons}
           disabled={disableRightSwipes}
+          getSelectedLabel={getSelectedLabel}
         />
       </IonList>
     </>

src/features/settings/gestures/gestureSlice.tsx

@@ -28,7 +28,7 @@ const defaultSwipeActionsPost: SwipeActions = {
 const defaultSwipeActionsComment: SwipeActions = {
   farStart: OSwipeActionComment.Downvote,
   start: OSwipeActionComment.Upvote,
-  end: OSwipeActionComment.Collapse,
+  end: OSwipeActionComment.CollapseToTop,
   farEnd: OSwipeActionComment.Reply,
 } as const;
 

src/features/shared/sliding/BaseSlidingVote.tsx

@@ -4,14 +4,22 @@ import {
   arrowUpSharp,
   bookmark,
   chevronCollapse,
+  chevronDown,
   chevronExpand,
+  chevronUp,
   eyeOffOutline,
   eyeOutline,
   mailOpen,
   mailUnread,
   share as shareIcon,
 } from "ionicons/icons";
-import React, { useCallback, useContext, useMemo } from "react";
+import React, {
+  MouseEvent,
+  TouchEvent,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
 import SlidingItem, { ActionList, SlidingItemAction } from "./SlidingItem";
 import {
   CommentReplyView,
@@ -30,7 +38,11 @@ import {
   saveSuccess,
   voteError,
 } from "../../../helpers/toastMessages";
-import { saveComment, voteOnComment } from "../../comment/commentSlice";
+import {
+  saveComment,
+  updateCommentCollapseState,
+  voteOnComment,
+} from "../../comment/commentSlice";
 import { PageContext } from "../../auth/PageContext";
 import { SwipeAction, SwipeActions } from "../../../services/db";
 import useCollapseRootComment from "../../comment/useCollapseRootComment";
@@ -39,6 +51,7 @@ import { CommentsContext } from "../../comment/CommentsContext";
 import styled from "@emotion/styled";
 import useAppToast from "../../../helpers/useAppToast";
 import { share } from "../../../helpers/lemmy";
+import { scrollViewUpIfNeeded } from "../../comment/CommentTree";
 
 const StyledItemContainer = styled.div`
   --ion-item-border-color: transparent;
@@ -213,7 +226,7 @@ function BaseSlidingVoteInternal({
     !isPost ? item : undefined,
     rootIndex,
   );
-  const collapseAction = useMemo(() => {
+  const collapseToTopAction = useMemo(() => {
     return collapseRootComment
       ? {
           icon: collapsed ? chevronExpand : chevronCollapse,
@@ -223,6 +236,29 @@ function BaseSlidingVoteInternal({
       : undefined;
   }, [collapsed, collapseRootComment]);
 
+  const collapse = useCallback(
+    (e: TouchEvent | MouseEvent) => {
+      if (isPost) return;
+
+      dispatch(
+        updateCommentCollapseState({
+          commentId: item.comment.id,
+          collapsed: !collapsed,
+        }),
+      );
+
+      if (e.target) scrollViewUpIfNeeded(e.target);
+    },
+    [collapsed, dispatch, isPost, item],
+  );
+  const collapseAction = useMemo(() => {
+    return {
+      icon: collapsed ? chevronDown : chevronUp,
+      trigger: collapse,
+      bgColor: "tertiary",
+    };
+  }, [collapsed, collapse]);
+
   const isRead = useMemo(() => {
     return isInboxItem(item) ? readByInboxItemId[getInboxItemId(item)] : false;
   }, [item, readByInboxItemId]);
@@ -280,8 +316,9 @@ function BaseSlidingVoteInternal({
         },
         save: saveAction,
         hide: hideAction,
+        "collapse-to-top": collapseToTopAction,
         collapse: collapseAction,
-        mark_unread: markUnreadAction,
+        "mark-unread": markUnreadAction,
         share: {
           icon: shareIcon,
           trigger: shareTrigger,
@@ -294,6 +331,7 @@ function BaseSlidingVoteInternal({
       saveAction,
       hideAction,
       collapseAction,
+      collapseToTopAction,
       markUnreadAction,
       onVote,
       shareTrigger,

src/features/shared/sliding/SlidingItem.tsx

@@ -10,7 +10,13 @@ import {
 } from "@ionic/react";
 import { Dictionary } from "@reduxjs/toolkit";
 import { bookmark, mailUnread } from "ionicons/icons";
-import React, { useMemo, useRef, useState } from "react";
+import React, {
+  MouseEvent,
+  TouchEvent,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import useHapticFeedback from "../../../helpers/useHapticFeedback";
 import { bounceAnimation } from "../animations";
 
@@ -97,7 +103,7 @@ export type SlidingItemAction = {
    * If `string`, it's passed to IonIcon as an icon value
    */
   icon: string;
-  trigger: () => void;
+  trigger: (e: TouchEvent | MouseEvent) => void;
   bgColor: string;
   slash?: boolean;
 };
@@ -238,14 +244,14 @@ export default function SlidingItem({
     return endActions[0] ? FIRST_ACTION_RATIO : SECOND_ACTION_RATIO;
   }, [endActions]);
 
-  async function onDragStop() {
+  async function onDragStop(e: TouchEvent | MouseEvent) {
     if (!dragRef.current) return;
     if (!dragging) return;
 
     if (ratio <= startRatio) {
-      startActions[currentStartActionIndex]?.trigger();
+      startActions[currentStartActionIndex]?.trigger(e);
     } else if (ratio >= endRatio) {
-      endActions[currentEndActionIndex]?.trigger();
+      endActions[currentEndActionIndex]?.trigger(e);
     }
 
     dragRef.current.target.closeOpened();

src/services/db.ts

@@ -213,12 +213,13 @@ export const OSwipeActionPost = {
 
 export const OSwipeActionComment = {
   ...OSwipeActionBase,
+  CollapseToTop: "collapse-to-top",
   Collapse: "collapse",
 } as const;
 
 export const OSwipeActionInbox = {
   ...OSwipeActionBase,
-  MarkUnread: "mark_unread",
+  MarkUnread: "mark-unread",
 } as const;
 
 export const OSwipeActionAll = {
@@ -343,6 +344,38 @@ export class WefwefDB extends Dexie {
         updated
       `,
     });
+
+    this.version(5).upgrade(async () => {
+      // Upgrade comment gesture "collapse" => "collapse-to-top"
+      await (async () => {
+        const gestures = await this.getSetting("gesture_swipe_comment");
+
+        if (!gestures) return;
+
+        Object.entries(gestures).map(([direction, gesture]) => {
+          if (!gestures) return;
+          if (gesture === "collapse")
+            gestures[direction as keyof typeof gestures] = "collapse-to-top";
+        });
+
+        await this.setSetting("gesture_swipe_comment", gestures);
+      })();
+
+      // Upgrade inbox gesture "mark_unread" => "mark-unread"
+      await (async () => {
+        const gestures = await this.getSetting("gesture_swipe_inbox");
+
+        if (!gestures) return;
+
+        Object.entries(gestures).map(([direction, gesture]) => {
+          if (!gestures) return;
+          if ((gesture as string) === "mark_unread")
+            gestures[direction as keyof typeof gestures] = "mark-unread";
+        });
+
+        await this.setSetting("gesture_swipe_inbox", gestures);
+      })();
+    });
   }
 
   /*