refactor: remove dropdown links

tgdrive · Oct 18, 2024 · fe1a30b · fe1a30b
1 parent f58d270
commit fe1a30b
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 51 deletions.
diff --git a/ui/components/list/btsearch.tsx b/ui/components/list/btsearch.tsx
@@ -18,7 +18,7 @@ import {
 import { Link, useNavigate, useSearch } from "@tanstack/react-router";
 import { paginationItemClass, scrollClasses } from "@/ui/utils/classes";
 import { Icons } from "@/ui/utils/icons";
-import { copyDataToClipboard, formattedLongDate } from "@/ui/utils/common";
+import { copyDataToClipboard, formattedLongDate, navigateToExternalUrl } from "@/ui/utils/common";
 import clsx from "clsx";
 import { useDebridStore, useSelectModalStore } from "@/ui/utils/store";
 import { getQueryClient } from "@/ui/utils/queryClient";
@@ -88,7 +88,8 @@ const ControlDropdown = () => {
             },
           },
         );
-      }
+      } else if (key === "link") navigateToExternalUrl(item.link);
+      else if (key === "magnet") navigateToExternalUrl(item.magnet);
     },
     [item?.magnet],
   );
@@ -111,14 +112,7 @@ const ControlDropdown = () => {
         onAction={onAction}
       >
         <DropdownItem key="link" startContent={<Icons.ExternalLink />}>
-          <a
-            rel="noopener noreferrer"
-            target="_blank"
-            className="no-underline block"
-            href={item?.link}
-          >
-            Open Link
-          </a>
+          Open Link
         </DropdownItem>
         <DropdownItem key="add" startContent={<Icons.CirclePlus />}>
           Add Torrent
@@ -130,14 +124,7 @@ const ControlDropdown = () => {
           Copy Magnet
         </DropdownItem>
         <DropdownItem key="magnet" startContent={<Icons.TorrentOutline />}>
-          <a
-            rel="noopener noreferrer"
-            target="_blank"
-            className="no-underline block"
-            href={item?.magnet}
-          >
-            Open Magnet
-          </a>
+          Open Magnet
         </DropdownItem>
       </DropdownMenu>
     </Dropdown>

diff --git a/ui/components/list/download.tsx b/ui/components/list/download.tsx
@@ -1,7 +1,7 @@
 import type React from "react";
 import { type Key, useCallback } from "react";
 import type { DebridUnlock, SetValue } from "@/types";
-import { formattedLongDate, size2round } from "@/ui/utils/common";
+import { formattedLongDate, navigateToExternalUrl, size2round } from "@/ui/utils/common";
 import { useDeleteDebrid } from "@/ui/utils/queryOptions";
 import {
   Button,
@@ -19,26 +19,32 @@ import { ListBox, ListBoxItem } from "react-aria-components";
 import clsx from "clsx";
 import { useShallow } from "zustand/shallow";
 import type { Selection } from "@nextui-org/react";
-import { Link } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 
 const DownloadDropdown = () => {
   const { open, cords } = useDebridStore((state) => state.dropdown);
-  const { closeDropdown } = useDebridStore((state) => state.actions);
+  const actions = useDebridStore((state) => state.actions);
 
   const item = useDebridStore((state) => state.currentDebridItem) as DebridUnlock;
 
   const mutation = useDeleteDebrid("downloads", [item.id]);
 
+  const navigate = useNavigate();
+
   const onAction = useCallback(
-    async (key: Key) => {
+    (key: Key) => {
       if (key === "delete") mutation.mutate();
+      else if (key === "original") navigateToExternalUrl(item.link);
+      else if (key === "play")
+        navigate({ to: "/watch/$", params: { _splat: item.download.replace("https://", "") } });
+      else if (key === "download") navigateToExternalUrl(item.download, false);
     },
     [mutation],
   );
   return (
     <Dropdown
       isOpen={open}
-      onOpenChange={closeDropdown}
+      onOpenChange={actions.closeDropdown}
       classNames={{
         content: "!bg-radial-1 bg-background",
       }}
@@ -55,28 +61,13 @@ const DownloadDropdown = () => {
         disabledKeys={[!item.streamable ? "play" : ""]}
       >
         <DropdownItem key="original" startContent={<Icons.ExternalLink />}>
-          <a
-            rel="noopener noreferrer"
-            target="_blank"
-            className="no-underline block"
-            href={item.link}
-          >
-            Open Link
-          </a>
+          Open Link
         </DropdownItem>
         <DropdownItem key="play" startContent={<Icons.Play />}>
-          <Link
-            to="/watch/$"
-            params={{ _splat: item.download.replace("https://", "") }}
-            className="block"
-          >
-            Play
-          </Link>
+          Play
         </DropdownItem>
         <DropdownItem key="download" startContent={<Icons.Download />}>
-          <a rel="noopener noreferrer" className="no-underline block" href={item.download}>
-            Download
-          </a>
+          Download
         </DropdownItem>
         <DropdownItem key="delete" startContent={<Icons.Delete />}>
           Delete

diff --git a/ui/components/list/torrent.tsx b/ui/components/list/torrent.tsx
@@ -20,7 +20,7 @@ import clsx from "clsx";
 import { useShallow } from "zustand/shallow";
 import type { Selection } from "@nextui-org/react";
 import toast from "react-hot-toast";
-import { Link } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 
 const TorrentDropdown = () => {
   const { open, cords, item, actions } = useDebridStore(
@@ -36,6 +36,8 @@ const TorrentDropdown = () => {
 
   const mutation = useDeleteDebrid("torrents", [item.id]);
 
+  const navigate = useNavigate();
+
   const onAction = useCallback(
     async (key: Key) => {
       if (key === "delete") mutation.mutate();
@@ -56,6 +58,12 @@ const TorrentDropdown = () => {
       } else if (key === "view") {
         modalActions.setCurrentItem(item);
         modalActions.setOpen(true);
+      } else if (key === "unrestict") {
+        navigate({
+          to: "/downloader/$tabId",
+          search: { fileId: item.id },
+          params: { tabId: "links" },
+        });
       }
     },
     [mutation],
@@ -82,14 +90,7 @@ const TorrentDropdown = () => {
           View Files
         </DropdownItem>
         <DropdownItem key="unrestict" startContent={<Icons.DownloadDashed />}>
-          <Link
-            to="/downloader/$tabId"
-            search={{ fileId: item.id }}
-            params={{ tabId: "links" }}
-            className="block"
-          >
-            Unrestict Links
-          </Link>
+          Unrestict Links
         </DropdownItem>
         <DropdownItem key="copy" startContent={<Icons.Copy />}>
           Copy Links

diff --git a/ui/routes/_authed.tsx b/ui/routes/_authed.tsx
@@ -38,7 +38,7 @@ function AuthenticatedLayout() {
         <SideNav />
         <main
           className={clsx(
-            "absolute left-0 right-0 md:bottom-0 md:left-20 bottom-20 top-20 max-w-screen-xl mx-auto",
+            "absolute left-0 right-0 md:bottom-0 md:left-20 bottom-20 top-20 max-w-screen-xl mx-auto overflow-y-auto",
             scrollClasses,
           )}
         >

diff --git a/ui/styles/globals.css b/ui/styles/globals.css
@@ -17,3 +17,14 @@
 input[type="search"]::-webkit-search-cancel-button {
   display: none;
 }
+
+@media (pointer: coarse) {
+  *::-webkit-scrollbar {
+    display: none;
+  }
+
+  * {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
diff --git a/ui/utils/common.ts b/ui/utils/common.ts
@@ -17,6 +17,11 @@ export const copyDataToClipboard = (text: string) => {
   });
 };
 
+export const navigateToExternalUrl = (url: string, shouldOpenNewTab = true) => {
+  if (shouldOpenNewTab) window.open(url, "_blank");
+  else window.location.href = url;
+};
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }