From bf972018c785a9c02036207e2ab88c5cdfa6e137 Mon Sep 17 00:00:00 2001
From: Marcel Elias <marcel@dromzeh.dev>
Date: Wed, 19 Feb 2025 13:15:18 +0000
Subject: [PATCH] feat: dedicated mode toggle

---
 src/app/[game]/[category]/page.tsx          | 20 ++----
 src/components/asset/asset-item.tsx         | 24 ++++---
 src/components/asset/download-indicator.tsx |  2 -
 src/components/category/asset-handler.tsx   | 71 ++++++++++++++++-----
 src/redux/slice/asset-slice.ts              |  7 ++
 5 files changed, 81 insertions(+), 43 deletions(-)

diff --git a/src/app/[game]/[category]/page.tsx b/src/app/[game]/[category]/page.tsx
index 42703fdf..0509ecb0 100644
--- a/src/app/[game]/[category]/page.tsx
+++ b/src/app/[game]/[category]/page.tsx
@@ -33,7 +33,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 
     return {
         title: `${FormatGameName(response.game)} ${FormatCategoryName(response.asset)} • wanderer.moe`,
-        description: `${FormatGameName(response.game)} ${FormatCategoryName(response.asset)} assets on wanderer.moe`,
+        description: `Current ${FormatCategoryName(response.asset)} assets for ${FormatGameName(response.game)} available on wanderer.moe`,
     };
 }
 
@@ -119,24 +119,12 @@ export default async function GameCategoryPage(props: Readonly<Props>) {
                 <div>
                     <Alert>
                         <div className="flex flex-row items-center gap-2 p-1">
-                            <img
-                                src="https://cdn.wanderer.moe/cdn-cgi/image/width=64,height=64,quality=75/wuthering-waves/emotes/T_ChatEmo_C_01.png"
-                                alt="ww emote"
-                                className="w-12 h-12"
-                            />
                             <div className="flex flex-col">
                                 <AlertDescription className="text-muted-foreground flex flex-col">
                                     <p>
-                                        <span className="text-primary">
-                                            Single Click:
-                                        </span>{" "}
-                                        Select Asset
-                                    </p>
-                                    <p>
-                                        <span className="text-primary">
-                                            Double Click:
-                                        </span>{" "}
-                                        View Asset
+                                        Toggle between view and multi-select
+                                        mode from the Mode button. Tap or click
+                                        on an asset to view/select.
                                     </p>
                                 </AlertDescription>
                             </div>
diff --git a/src/components/asset/asset-item.tsx b/src/components/asset/asset-item.tsx
index 5259cb8a..0c80c943 100644
--- a/src/components/asset/asset-item.tsx
+++ b/src/components/asset/asset-item.tsx
@@ -20,6 +20,7 @@ import { useAppDispatch, useAppSelector } from "~/redux/store";
 import {
     toggleAssetSelection,
     isAssetSelected,
+    getSelectMode,
 } from "~/redux/slice/asset-slice";
 
 export function AssetItem({
@@ -35,21 +36,26 @@ export function AssetItem({
 
     const dispatch = useAppDispatch();
 
-    const isSelected = isAssetSelected(
-        useAppSelector((state) => state.assets),
-        asset,
+    const isSelected = useAppSelector((state) =>
+        isAssetSelected(state.assets, asset),
     );
+    const selectMode = useAppSelector((state) => getSelectMode(state.assets));
+
+    const handleClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (selectMode) {
+            dispatch(toggleAssetSelection(asset));
+        } else {
+            setDialogOpen(true);
+        }
+    };
 
     return (
         <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
             <div className="flex flex-col gap-2">
                 <Card
                     className={`group p-2 rounded-lg ring-2 ease-linear transition-all cursor-pointer ${isSelected ? "ring-primary" : "ring-transparent"} hover:ring-primary`}
-                    onDoubleClick={() => setDialogOpen(true)}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        dispatch(toggleAssetSelection(asset));
-                    }}
+                    onClick={handleClick}
                 >
                     <div className="flex items-center justify-center relative">
                         <img
@@ -61,7 +67,7 @@ export function AssetItem({
                         <div className="absolute inset-0" />
                         <Button
                             size="icon"
-                            className="rounded-full absolute bottom-1 right-1 transition-opacity opacity-100 md:opacity-0 md:group-hover:opacity-100"
+                            className="rounded-full absolute bottom-1 right-1 transition-opacity opacity-0 md:group-hover:opacity-100"
                             onClick={(e) => {
                                 e.stopPropagation();
                                 setDialogOpen(true);
diff --git a/src/components/asset/download-indicator.tsx b/src/components/asset/download-indicator.tsx
index 54f0da95..39c2571e 100644
--- a/src/components/asset/download-indicator.tsx
+++ b/src/components/asset/download-indicator.tsx
@@ -287,8 +287,6 @@ function ShowMassDownloadProgress() {
                 error instanceof AxiosError &&
                 error.message === "Network Error"
             ) {
-                // TODO: this is either CORS or a user network issue
-                // fetching assets on 0.1% of all downloads sometimes causes a CORS error and i don't know why ??
                 userErrorMessage = "Failed to fetch assets, try again later";
                 isCorsError = true;
             }
diff --git a/src/components/category/asset-handler.tsx b/src/components/category/asset-handler.tsx
index 6739734c..a5e648a6 100644
--- a/src/components/category/asset-handler.tsx
+++ b/src/components/category/asset-handler.tsx
@@ -15,7 +15,14 @@ import {
     DropdownMenuTrigger,
     DropdownMenuItem,
 } from "~/components/ui/dropdown-menu";
-import { Ellipsis, FilterIcon, LinkIcon, ToggleRight } from "lucide-react";
+import {
+    Ellipsis,
+    FilterIcon,
+    LinkIcon,
+    ToggleRight,
+    SquareMousePointer,
+    Eye,
+} from "lucide-react";
 import { toast } from "sonner";
 import Masonry from "react-masonry-css";
 import { useAppDispatch, useAppSelector } from "~/redux/store";
@@ -23,6 +30,8 @@ import { useAppDispatch, useAppSelector } from "~/redux/store";
 import {
     toggleAssetSelection,
     isAssetSelected,
+    toggleSelectMode,
+    getSelectMode,
 } from "~/redux/slice/asset-slice";
 import { FormatCategoryName, FormatGameName } from "~/lib/format";
 
@@ -93,22 +102,52 @@ export function AssetHandler({
         700: 2,
     };
 
+    const dispatch = useAppDispatch();
+
     return (
         <div className="flex flex-col gap-4">
-            <div className="flex flex-row gap-2">
-                <Input
-                    type="search"
-                    className="bg-background"
-                    placeholder="Search assets"
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value)}
-                />
-                <FilterOptions
-                    filter={filter}
-                    setFilter={setFilter}
-                    filterList={filterList}
-                />
-                <MoreOptions assets={assets} game={game} category={category} />
+            <div className="flex sm:flex-row flex-col gap-2">
+                <div className="flex-1">
+                    <Input
+                        type="search"
+                        className="bg-background w-full"
+                        placeholder="Search assets..."
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                    />
+                </div>
+                <div className="flex flex-row gap-2 max-sm:w-full">
+                    <Button
+                        variant={"secondary"}
+                        onClick={() => dispatch(toggleSelectMode())}
+                        className="relative group max-sm:w-full min-w-[120px] flex items-center"
+                    >
+                        {useAppSelector((state) =>
+                            getSelectMode(state.assets),
+                        ) ? (
+                            <SquareMousePointer
+                                className={`w-4 h-4 mr-2 transition-transform`}
+                            />
+                        ) : (
+                            <Eye
+                                className={`w-4 h-4 mr-2 transition-transform`}
+                            />
+                        )}
+                        {useAppSelector((state) => getSelectMode(state.assets))
+                            ? "Mode: Multi-Select"
+                            : "Mode: View"}
+                    </Button>
+                    <FilterOptions
+                        filter={filter}
+                        setFilter={setFilter}
+                        filterList={filterList}
+                    />
+                    <MoreOptions
+                        assets={filteredAssets}
+                        game={game}
+                        category={category}
+                    />
+                </div>
             </div>
             <Masonry
                 breakpointCols={breakpointColumnsObj}
@@ -235,7 +274,7 @@ function SelectAllAssets({
         <DropdownMenuItem onClick={handleSelectAll}>
             <div className="flex flex-row gap-2 items-center transition-all duration-150">
                 <ToggleRight size={16} className="translate-y-[1px]" />
-                Toggle Selection
+                {allSelected ? "Deselect All" : "Select All"}
             </div>
         </DropdownMenuItem>
     );
diff --git a/src/redux/slice/asset-slice.ts b/src/redux/slice/asset-slice.ts
index ad2d2e9f..a3c84c50 100644
--- a/src/redux/slice/asset-slice.ts
+++ b/src/redux/slice/asset-slice.ts
@@ -4,11 +4,13 @@ import type { Asset } from "~/lib/types";
 export interface IAssetState {
     isMassDownloading: boolean;
     selectedAssets: Asset[];
+    selectMode: boolean;
 }
 
 const initialState: IAssetState = {
     isMassDownloading: false,
     selectedAssets: [],
+    selectMode: false,
 };
 
 export const assetSlice = createSlice({
@@ -36,6 +38,9 @@ export const assetSlice = createSlice({
         clearSelectedAssets: (state) => {
             state.selectedAssets = [];
         },
+        toggleSelectMode: (state) => {
+            state.selectMode = !state.selectMode;
+        },
     },
 });
 
@@ -45,12 +50,14 @@ export const isAssetSelected = (state: IAssetState, asset: Asset) =>
     );
 
 export const getSelectedAssets = (state: IAssetState) => state.selectedAssets;
+export const getSelectMode = (state: IAssetState) => state.selectMode;
 
 export const {
     setSelectedAssets,
     setIsMassDownloading,
     toggleAssetSelection,
     clearSelectedAssets,
+    toggleSelectMode,
 } = assetSlice.actions;
 
 export default assetSlice.reducer;