Move "SelectableCollection" to "base" folder

src/base/collection/components/SelectableCollectionSelectAll.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Checkbox from '@mui/material/Checkbox';
+import { useTranslation } from 'react-i18next';
+import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
+
+export const SelectableCollectionSelectAll = ({
+    areAllItemsSelected,
+    areNoItemsSelected,
+    onChange,
+}: {
+    areAllItemsSelected: boolean;
+    areNoItemsSelected: boolean;
+    onChange: (checked: boolean) => void;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <CustomTooltip title={t(!areAllItemsSelected ? 'global.button.select_all' : 'global.button.clear_selection')}>
+            <Checkbox
+                sx={{
+                    padding: '8px',
+                    color: 'inherit',
+                    '&.Mui-checked, &.MuiCheckbox-indeterminate': {
+                        color: 'inherit',
+                    },
+                }}
+                checked={areAllItemsSelected}
+                indeterminate={!areNoItemsSelected && !areAllItemsSelected}
+                onChange={(_, checked) => onChange(checked)}
+            />
+        </CustomTooltip>
+    );
+};

src/base/collection/components/SelectableCollectionSelectMode.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Checkbox from '@mui/material/Checkbox';
+import { useTranslation } from 'react-i18next';
+import ClearIcon from '@mui/icons-material/Clear';
+import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
+import { SelectableCollectionSelectAll } from '@/base/collection/components/SelectableCollectionSelectAll.tsx';
+
+export const SelectableCollectionSelectMode = ({
+    isActive,
+    areAllItemsSelected,
+    areNoItemsSelected,
+    onSelectAll,
+    onModeChange,
+}: {
+    isActive: boolean;
+    areAllItemsSelected: boolean;
+    areNoItemsSelected: boolean;
+    onSelectAll: (selectAll: boolean) => void;
+    onModeChange: (checked: boolean) => void;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <>
+            {isActive && (
+                <SelectableCollectionSelectAll
+                    areAllItemsSelected={areAllItemsSelected}
+                    areNoItemsSelected={areNoItemsSelected}
+                    onChange={onSelectAll}
+                />
+            )}
+            <CustomTooltip title={t(!isActive ? 'global.button.select_all' : 'global.button.cancel')}>
+                <Checkbox
+                    checkedIcon={<ClearIcon />}
+                    sx={{
+                        padding: '8px',
+                        color: 'inherit',
+                        '&.Mui-checked': {
+                            color: 'inherit',
+                        },
+                    }}
+                    checked={isActive}
+                    onChange={(_, checked) => onModeChange(checked)}
+                />
+            </CustomTooltip>
+        </>
+    );
+};

src/base/collection/components/SelectionFAB.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import MoreHoriz from '@mui/icons-material/MoreHoriz';
+import Fab from '@mui/material/Fab';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import React, { type JSX } from 'react';
+import { useTranslation } from 'react-i18next';
+import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
+import { DEFAULT_FAB_STYLE } from '@/base/components/buttons/StyledFab.tsx';
+import { Menu } from '@/base/components/menu/Menu.tsx';
+
+import { TranslationKey } from '@/base/Base.types.ts';
+
+interface SelectionFABProps {
+    children: (handleClose: () => void, setHideMenu: (hide: boolean) => void) => JSX.Element;
+    selectedItemsCount: number;
+    title: TranslationKey;
+}
+
+const FabContainer = styled(Box)(({ theme }) => ({
+    ...DEFAULT_FAB_STYLE,
+    height: `calc(${DEFAULT_FAB_STYLE.height} + 1)`,
+    paddingTop: '8px',
+    zIndex: 1, // the "Checkbox" (MUI) component of the "ChapterCard" has z-index 1, which causes it to take over the mouse events
+    [theme.breakpoints.down('md')]: {
+        marginBottom: '64px',
+    },
+}));
+
+export const SelectionFAB: React.FC<SelectionFABProps> = ({ children, selectedItemsCount, title }) => {
+    const { t } = useTranslation();
+
+    return (
+        <PopupState variant="popover" popupId="selection-fab-menu">
+            {(popupState) => (
+                <>
+                    <FabContainer {...bindTrigger(popupState)}>
+                        <Fab variant="extended" color="primary" id="selectionMenuButton">
+                            {`${selectedItemsCount} ${t(title, { count: selectedItemsCount })}`}
+                            <MoreHoriz sx={{ ml: 1 }} />
+                        </Fab>
+                    </FabContainer>
+                    <Menu
+                        {...bindMenu(popupState)}
+                        id="selectionMenu"
+                        anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
+                        transformOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                        MenuListProps={{
+                            'aria-labelledby': 'selectionMenuButton',
+                        }}
+                    >
+                        {(onClose, setHideMenu) => children(onClose, setHideMenu)}
+                    </Menu>
+                </>
+            )}
+        </PopupState>
+    );
+};

src/base/collection/hooks/useSelectableCollection.ts

@@ -0,0 +1,145 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useCallback, useRef, useState } from 'react';
+
+export type SelectableCollectionReturnType<Id extends number | string, Key extends string = string> = {
+    selectedItemIds: Id[];
+    keySelectedItemIds: Id[];
+    areAllItemsSelected: boolean;
+    areNoItemsSelected: boolean;
+    areAllItemsForKeySelected: boolean;
+    areNoItemsForKeySelected: boolean;
+    handleSelection: (id: Id, selected: boolean, options?: { selectRange?: boolean; key?: Key }) => void;
+    handleSelectAll: (selectAll: boolean, ids: Id[], key?: Key) => void;
+    setSelectionForKey: (key: Key, ids: Id[]) => void;
+    getSelectionForKey: (key: Key) => Id[];
+    clearSelection: () => void;
+    reset: () => void;
+};
+
+export const useSelectableCollection = <Id extends number | string, Key extends string = 'default'>(
+    totalCount: number,
+    {
+        itemIds = [],
+        keyCount = totalCount,
+        currentKey,
+        initialState = {} as Record<Key, Id[]>,
+    }: {
+        itemIds?: Id[];
+        keyCount?: number;
+        currentKey: Key;
+        initialState?: Record<Key, Id[]>;
+    },
+): SelectableCollectionReturnType<Id, Key> => {
+    const [keyToSelectedItemIds, setKeyToSelectedItemIds] = useState<Record<string, Id[]>>(initialState);
+
+    const lastSelectedItemInfoRef = useRef<{ id: Id; key: Key }>(undefined);
+
+    const selectedItemIds = [...new Set(Object.values(keyToSelectedItemIds).flat())];
+    const areAllItemsSelected = selectedItemIds.length === totalCount;
+    const areNoItemsSelected = !selectedItemIds.length;
+
+    const keySelectedItemIds = keyToSelectedItemIds[currentKey] ?? [];
+    const areAllItemsForKeySelected = keySelectedItemIds.length === keyCount;
+    const areNoItemsForKeySelected = keySelectedItemIds.length === 0;
+
+    if (areNoItemsForKeySelected) {
+        lastSelectedItemInfoRef.current = undefined;
+    }
+
+    const handleSelection: SelectableCollectionReturnType<Id, Key>['handleSelection'] = useCallback(
+        (id, selected, { selectRange = false, key = currentKey } = {}) => {
+            const deselect = !selected;
+
+            const { id: lastSelectedItemId, key: lastSelectedItemIdKey } = lastSelectedItemInfoRef.current ?? {};
+            lastSelectedItemInfoRef.current = { id, key };
+
+            const isSelectRange = selectRange && key === lastSelectedItemIdKey && lastSelectedItemId !== undefined;
+
+            const indexOfLastSelectedItemId = isSelectRange ? itemIds.indexOf(lastSelectedItemId) : -1;
+            const indexOfSelectedId = isSelectRange ? itemIds.indexOf(id) : -1;
+
+            const selectedIds = isSelectRange
+                ? itemIds.slice(
+                      Math.min(indexOfLastSelectedItemId, indexOfSelectedId),
+                      Math.max(indexOfLastSelectedItemId, indexOfSelectedId) + 1,
+                  )
+                : [id];
+
+            if (deselect) {
+                setKeyToSelectedItemIds((prevState) => ({
+                    ...prevState,
+                    [key]: prevState[key]?.filter((selectedItemId) => !selectedIds.includes(selectedItemId)) ?? [],
+                }));
+                return;
+            }
+
+            setKeyToSelectedItemIds((prevState) => ({
+                ...prevState,
+                [key]: [...new Set([...(prevState[key] ?? []), ...selectedIds])],
+            }));
+        },
+        [currentKey, itemIds],
+    );
+
+    const handleSelectAll = useCallback(
+        (selectAll: boolean, ids: Id[], key: Key = currentKey) => {
+            switch (selectAll) {
+                case true:
+                    setKeyToSelectedItemIds((prevState) => ({
+                        ...prevState,
+                        [key]: [...ids],
+                    }));
+                    break;
+                case false:
+                    setKeyToSelectedItemIds((prevState) => ({
+                        ...prevState,
+                        [key]: [],
+                    }));
+                    break;
+                default:
+                    break;
+            }
+        },
+        [currentKey],
+    );
+
+    const setSelectionForKey = useCallback((key: Key, ids: Id[]) => {
+        setKeyToSelectedItemIds((prevState) => ({
+            ...prevState,
+            [key]: [...ids],
+        }));
+    }, []);
+
+    const getSelectionForKey = useCallback((key: Key) => keyToSelectedItemIds[key], [keyToSelectedItemIds]);
+
+    const clearSelection = useCallback(() => {
+        setKeyToSelectedItemIds({});
+    }, []);
+
+    const reset = useCallback(() => {
+        clearSelection();
+        setKeyToSelectedItemIds(initialState);
+    }, [clearSelection, initialState]);
+
+    return {
+        selectedItemIds,
+        keySelectedItemIds,
+        handleSelection,
+        handleSelectAll,
+        areAllItemsSelected,
+        areNoItemsSelected,
+        areAllItemsForKeySelected,
+        areNoItemsForKeySelected,
+        setSelectionForKey,
+        getSelectionForKey,
+        clearSelection,
+        reset,
+    };
+};

src/base/components/settings/CheckboxListSetting.tsx

@@ -17,7 +17,7 @@ import Stack from '@mui/material/Stack';
 import { useCallback, useMemo } from 'react';
 import { CheckboxProps } from '@mui/material/Checkbox';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
-import { useSelectableCollection } from '@/features/collection/hooks/useSelectableCollection.ts';
+import { useSelectableCollection } from '@/base/collection/hooks/useSelectableCollection.ts';
 
 export function CheckboxListSetting<Item>({
     title,