feat(shares): multi-select deletion on My Shares page (#3033)

The batch share-delete endpoint (DELETE /share {ids}) already existed
but the UI only exposed per-card deletion. The My Shares header now has
a Select mode: cards toggle via checkbox, with Select all and a
batch Delete action wired to the existing endpoint.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

frontend/src/api/api.ts

@@ -587,6 +587,23 @@ export function sendDeleteShare(id: string): ThunkResponse<void> {
   };
 }
 
+export function sendDeleteShares(ids: string[]): ThunkResponse<void> {
+  return async (dispatch, _getState) => {
+    return await dispatch(
+      send(
+        "/share",
+        {
+          method: "DELETE",
+          data: { ids },
+        },
+        {
+          ...defaultOpts,
+        },
+      ),
+    );
+  };
+}
+
 export function getShareInfo(
   id: string,
   password?: string,

frontend/src/component/Pages/Shares/ShareCard.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Checkbox,
   Chip,
   Grid,
   ListItemIcon,
@@ -42,6 +43,9 @@ export interface ShareCardProps {
   onLoad?: () => void;
   loading?: boolean;
   onShareDeleted: (id: string) => void;
+  selecting?: boolean;
+  selected?: boolean;
+  onToggleSelect?: (id: string) => void;
 }
 
 interface ActionMenuProps extends MenuProps {
@@ -127,7 +131,7 @@ const ActionMenu = ({ share, onShareDeleted, onClose, ...rest }: ActionMenuProps
   );
 };
 
-const ShareCard = ({ share, onShareDeleted, onLoad, loading }: ShareCardProps) => {
+const ShareCard = ({ share, onShareDeleted, onLoad, loading, selecting, selected, onToggleSelect }: ShareCardProps) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { ref, inView } = useInView({
@@ -162,12 +166,21 @@ const ShareCard = ({ share, onShareDeleted, onLoad, loading }: ShareCardProps) =
           expanded={false}
           onContextMenu={(e) => {
             e.preventDefault();
+            if (selecting) {
+              return;
+            }
             if (share?.owner?.id === user?.user.id) {
               popupState.open(e);
             }
           }}
           sx={{ p: 0, minHeight: 0, width: "100%", textAlign: "left" }}
-          {...(share?.owner?.id != user?.user.id
+          {...(selecting && share?.owner?.id == user?.user.id
+            ? {
+                onClick: () => {
+                  share && onToggleSelect?.(share.id);
+                },
+              }
+            : share?.owner?.id != user?.user.id
               ? {
                   onClick: () => {
                     window.open(share?.url ?? "#", "_blank");
@@ -187,7 +200,9 @@ const ShareCard = ({ share, onShareDeleted, onLoad, loading }: ShareCardProps) =
                 p: 1.5,
               }}
             >
-              {share ? (
+              {selecting ? (
+                <Checkbox size="small" checked={selected ?? false} disableRipple sx={{ p: 0, mt: 0.5 }} />
+              ) : share ? (
                 <FileTypeIcon
                   sx={{
                     fontSize: 32,

frontend/src/component/Pages/Shares/ShareList.tsx

@@ -1,11 +1,14 @@
 import * as React from "react";
 import { useCallback, useState } from "react";
-import { Box, Container, FormControl, Grid, ListItemText, SelectChangeEvent } from "@mui/material";
+import { Box, Button, Container, FormControl, Grid, ListItemText, SelectChangeEvent, Stack } from "@mui/material";
+import { useSnackbar } from "notistack";
 import { useTranslation } from "react-i18next";
 import PageHeader from "../PageHeader.tsx";
-import { getShares } from "../../../api/api.ts";
+import { getShares, sendDeleteShares } from "../../../api/api.ts";
 import { useAppDispatch } from "../../../redux/hooks.ts";
+import { confirmOperation } from "../../../redux/thunks/dialog.ts";
 import Nothing from "../../Common/Nothing.tsx";
+import { DefaultCloseAction } from "../../Common/Snackbar/snackbar.tsx";
 import { setSelected } from "../../../redux/fileManagerSlice.ts";
 import ShareCard from "./ShareCard.tsx";
 import { Share } from "../../../api/explorer.ts";
@@ -18,10 +21,13 @@ const defaultPageSize = 50;
 const ShareList = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const { enqueueSnackbar } = useSnackbar();
   const [nextPageToken, setNextPageToken] = useState<string | undefined>("");
   const [shares, setShares] = useState<Share[]>([]);
   const [loading, setLoading] = useState(false);
   const [orderDirection, setOrderDirection] = useState("desc");
+  const [selecting, setSelecting] = useState(false);
+  const [selected, setSelectedIds] = useState<Set<string>>(new Set());
 
   const loadNextPage = useCallback(
     (originShares: Share[], token?: string, direction?: string) => () => {
@@ -62,6 +68,40 @@ const ShareList = () => {
     [setShares],
   );
 
+  const onToggleSelect = useCallback(
+    (id: string) => {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) {
+          next.delete(id);
+        } else {
+          next.add(id);
+        }
+        return next;
+      });
+    },
+    [setSelectedIds],
+  );
+
+  const exitSelecting = useCallback(() => {
+    setSelecting(false);
+    setSelectedIds(new Set());
+  }, []);
+
+  const deleteSelected = useCallback(() => {
+    dispatch(confirmOperation(t("fileManager.deleteShareWarning"))).then(() => {
+      dispatch(sendDeleteShares([...selected])).then(() => {
+        enqueueSnackbar({
+          message: t("application:share.shareCanceled"),
+          variant: "success",
+          action: DefaultCloseAction,
+        });
+        setShares((shares) => shares.filter((share) => !selected.has(share.id)));
+        exitSelecting();
+      });
+    });
+  }, [dispatch, selected, t, enqueueSnackbar, exitSelecting]);
+
   const onSelectChange = useCallback(
     (e: SelectChangeEvent<unknown>) => {
       setOrderDirection(e.target.value as string);
@@ -75,6 +115,30 @@ const ShareList = () => {
       <Container maxWidth="lg">
         <PageHeader
           secondaryAction={
+            <Stack direction="row" spacing={1} alignItems="center">
+              {selecting && (
+                <>
+                  <Button
+                    size="small"
+                    variant="text"
+                    onClick={() => setSelectedIds(new Set(shares.map((s) => s.id)))}
+                  >
+                    {t("application:fileManager.selectAll")}
+                  </Button>
+                  <Button
+                    size="small"
+                    variant="text"
+                    color="error"
+                    disabled={selected.size == 0}
+                    onClick={deleteSelected}
+                  >
+                    {t("fileManager.delete")} ({selected.size})
+                  </Button>
+                </>
+              )}
+              <Button size="small" variant="text" onClick={selecting ? exitSelecting : () => setSelecting(true)}>
+                {selecting ? t("common:cancel") : t("common:select")}
+              </Button>
               <FormControl variant="outlined">
                 <DenseSelect variant="outlined" value={orderDirection} onChange={onSelectChange}>
                   <SquareMenuItem value={"desc"}>
@@ -97,6 +161,7 @@ const ShareList = () => {
                   </SquareMenuItem>
                 </DenseSelect>
               </FormControl>
+            </Stack>
           }
           onRefresh={() => refresh()}
           loading={loading}
@@ -105,7 +170,14 @@ const ShareList = () => {
 
         <Grid container spacing={1}>
           {shares.map((share) => (
-            <ShareCard share={share} key={share.id} onShareDeleted={onShareDeleted} />
+            <ShareCard
+              share={share}
+              key={share.id}
+              onShareDeleted={onShareDeleted}
+              selecting={selecting}
+              selected={selected.has(share.id)}
+              onToggleSelect={onToggleSelect}
+            />
           ))}
           {nextPageToken != undefined && (
             <>