From a9cd1e9895e6c569d25e1af0491a9c6b263d1c34 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 29 Sep 2025 16:05:31 -0600
Subject: [PATCH] remove the hold to edit bookmarks/watching feature

---
 src/pages/parts/home/BookmarksCarousel.tsx | 47 +---------------------
 src/pages/parts/home/BookmarksPart.tsx     | 46 +--------------------
 src/pages/parts/home/WatchingCarousel.tsx  | 44 +-------------------
 src/pages/parts/home/WatchingPart.tsx      | 45 +--------------------
 4 files changed, 4 insertions(+), 178 deletions(-)

diff --git a/src/pages/parts/home/BookmarksCarousel.tsx b/src/pages/parts/home/BookmarksCarousel.tsx
index 45c92183..78cde76c 100644
--- a/src/pages/parts/home/BookmarksCarousel.tsx
+++ b/src/pages/parts/home/BookmarksCarousel.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
@@ -39,7 +39,6 @@ interface BookmarksCarouselProps {
   onShowDetails?: (media: MediaItem) => void;
 }
 
-const LONG_PRESS_DURATION = 500; // 0.5 seconds
 const MAX_ITEMS_PER_SECTION = 20; // Limit items per section
 
 function MediaCardSkeleton() {
@@ -92,7 +91,6 @@ export function BookmarksCarousel({
   let isScrolling = false;
   const [editing, setEditing] = useState(false);
   const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
-  const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
   const backendUrl = useBackendUrl();
   const account = useAuthStore((s) => s.account);
 
@@ -297,41 +295,6 @@ export function BookmarksCarousel({
     }
   };
 
-  const handleLongPress = () => {
-    // Find the button by ID and simulate a click
-    const editButton = document.getElementById("edit-button-bookmark");
-    if (editButton) {
-      (editButton as HTMLButtonElement).click();
-    }
-  };
-
-  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
-    e.preventDefault(); // Prevent default touch action
-    pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
-  };
-
-  const handleTouchEnd = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-  };
-
-  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    // Only trigger long press for left mouse button (button 0)
-    if (e.button === 0) {
-      e.preventDefault(); // Prevent default mouse action
-      pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
-    }
-  };
-
-  const handleMouseUp = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-  };
-
   const handleEditGroupOrder = () => {
     // Initialize with current order or default order
     if (groupOrder.length === 0) {
@@ -424,10 +387,6 @@ export function BookmarksCarousel({
                         onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
                           e.preventDefault()
                         }
-                        onTouchStart={handleTouchStart}
-                        onTouchEnd={handleTouchEnd}
-                        onMouseDown={handleMouseDown}
-                        onMouseUp={handleMouseUp}
                         className="relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto"
                       >
                         <WatchedMediaCard
@@ -502,10 +461,6 @@ export function BookmarksCarousel({
                           onContextMenu={(
                             e: React.MouseEvent<HTMLDivElement>,
                           ) => e.preventDefault()}
-                          onTouchStart={handleTouchStart}
-                          onTouchEnd={handleTouchEnd}
-                          onMouseDown={handleMouseDown}
-                          onMouseUp={handleMouseUp}
                           className="relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto"
                         >
                           <WatchedMediaCard
diff --git a/src/pages/parts/home/BookmarksPart.tsx b/src/pages/parts/home/BookmarksPart.tsx
index bd4ab3fd..babd284e 100644
--- a/src/pages/parts/home/BookmarksPart.tsx
+++ b/src/pages/parts/home/BookmarksPart.tsx
@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { EditButton } from "@/components/buttons/EditButton";
@@ -30,8 +30,6 @@ function parseGroupString(group: string): { icon: UserIcons; name: string } {
   return { icon: UserIcons.BOOKMARK, name: group };
 }
 
-const LONG_PRESS_DURATION = 700; // 0.7 seconds
-
 export function BookmarksPart({
   onItemsChange,
   onShowDetails,
@@ -52,8 +50,6 @@ export function BookmarksPart({
   const backendUrl = useBackendUrl();
   const account = useAuthStore((s) => s.account);
 
-  const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
-
   const items = useMemo(() => {
     let output: MediaItem[] = [];
     Object.entries(bookmarks).forEach((entry) => {
@@ -219,38 +215,6 @@ export function BookmarksPart({
     onItemsChange(items.length > 0);
   }, [items, onItemsChange]);
 
-  const handleLongPress = () => {
-    // Find the button by ID and simulate a click
-    const editButton = document.getElementById("edit-button-bookmark");
-    if (editButton) {
-      (editButton as HTMLButtonElement).click();
-    }
-  };
-
-  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
-    e.preventDefault(); // Prevent default touch action
-    pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
-  };
-
-  const handleTouchEnd = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-  };
-
-  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.preventDefault(); // Prevent default mouse action
-    pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
-  };
-
-  const handleMouseUp = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-  };
-
   const handleEditGroupOrder = () => {
     // Initialize with current order or default order
     if (groupOrder.length === 0) {
@@ -327,10 +291,6 @@ export function BookmarksPart({
                     onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
                       e.preventDefault()
                     }
-                    onTouchStart={handleTouchStart}
-                    onTouchEnd={handleTouchEnd}
-                    onMouseDown={handleMouseDown}
-                    onMouseUp={handleMouseUp}
                   >
                     <WatchedMediaCard
                       media={v}
@@ -375,10 +335,6 @@ export function BookmarksPart({
                   onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
                     e.preventDefault()
                   }
-                  onTouchStart={handleTouchStart}
-                  onTouchEnd={handleTouchEnd}
-                  onMouseDown={handleMouseDown}
-                  onMouseUp={handleMouseUp}
                 >
                   <WatchedMediaCard
                     media={v}
diff --git a/src/pages/parts/home/WatchingCarousel.tsx b/src/pages/parts/home/WatchingCarousel.tsx
index 2c9d7f46..a8286567 100644
--- a/src/pages/parts/home/WatchingCarousel.tsx
+++ b/src/pages/parts/home/WatchingCarousel.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { EditButton } from "@/components/buttons/EditButton";
@@ -18,8 +18,6 @@ interface WatchingCarouselProps {
   onShowDetails?: (media: MediaItem) => void;
 }
 
-const LONG_PRESS_DURATION = 500; // 0.5 seconds
-
 function MediaCardSkeleton() {
   return (
     <div className="relative mt-4 group cursor-default user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto">
@@ -40,7 +38,6 @@ export function WatchingCarousel({
   let isScrolling = false;
   const [editing, setEditing] = useState(false);
   const removeItem = useProgressStore((s) => s.removeItem);
-  const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   const { isMobile } = useIsMobile();
 
@@ -87,41 +84,6 @@ export function WatchingCarousel({
   const categorySlug = "continue-watching";
   const SKELETON_COUNT = 10;
 
-  const handleLongPress = () => {
-    // Find the button by ID and simulate a click
-    const editButton = document.getElementById("edit-button-watching");
-    if (editButton) {
-      (editButton as HTMLButtonElement).click();
-    }
-  };
-
-  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
-    e.preventDefault(); // Prevent default touch action
-    pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
-  };
-
-  const handleTouchEnd = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-  };
-
-  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    // Only trigger long press for left mouse button (button 0)
-    if (e.button === 0) {
-      e.preventDefault(); // Prevent default mouse action
-      pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
-    }
-  };
-
-  const handleMouseUp = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-  };
-
   if (itemsLength === 0) return null;
 
   return (
@@ -158,10 +120,6 @@ export function WatchingCarousel({
                   onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
                     e.preventDefault()
                   }
-                  onTouchStart={handleTouchStart}
-                  onTouchEnd={handleTouchEnd}
-                  onMouseDown={handleMouseDown}
-                  onMouseUp={handleMouseUp}
                   className="relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto"
                 >
                   <WatchedMediaCard
diff --git a/src/pages/parts/home/WatchingPart.tsx b/src/pages/parts/home/WatchingPart.tsx
index ac9041d4..a703dfe7 100644
--- a/src/pages/parts/home/WatchingPart.tsx
+++ b/src/pages/parts/home/WatchingPart.tsx
@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { EditButton } from "@/components/buttons/EditButton";
@@ -11,8 +11,6 @@ import { useProgressStore } from "@/stores/progress";
 import { shouldShowProgress } from "@/stores/progress/utils";
 import { MediaItem } from "@/utils/mediaTypes";
 
-const LONG_PRESS_DURATION = 700; // 0.7 seconds
-
 export function WatchingPart({
   onItemsChange,
   onShowDetails,
@@ -26,8 +24,6 @@ export function WatchingPart({
   const [editing, setEditing] = useState(false);
   const [gridRef] = useAutoAnimate<HTMLDivElement>();
 
-  const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
-
   const sortedProgressItems = useMemo(() => {
     const output: MediaItem[] = [];
     Object.entries(progressItems)
@@ -47,41 +43,6 @@ export function WatchingPart({
     onItemsChange(sortedProgressItems.length > 0);
   }, [sortedProgressItems, onItemsChange]);
 
-  const handleLongPress = () => {
-    // Find the button by ID and simulate a click
-    const editButton = document.getElementById("edit-button-watching");
-    if (editButton) {
-      (editButton as HTMLButtonElement).click();
-    }
-  };
-
-  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
-    e.preventDefault(); // Prevent default touch action
-    pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
-  };
-
-  const handleTouchEnd = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-  };
-
-  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    // Only trigger long press for left mouse button (button 0)
-    if (e.button === 0) {
-      e.preventDefault(); // Prevent default mouse action
-      pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
-    }
-  };
-
-  const handleMouseUp = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-  };
-
   if (sortedProgressItems.length === 0) return null;
 
   return (
@@ -104,10 +65,6 @@ export function WatchingPart({
             onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
               e.preventDefault()
             }
-            onTouchStart={handleTouchStart}
-            onTouchEnd={handleTouchEnd}
-            onMouseDown={handleMouseDown}
-            onMouseUp={handleMouseUp}
           >
             <WatchedMediaCard
               media={v}