Move collection files into new folder

src/modules/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 Tooltip from '@mui/material/Tooltip';
+import Checkbox from '@mui/material/Checkbox';
+import { useTranslation } from 'react-i18next';
+
+export const SelectableCollectionSelectAll = ({
+    areAllItemsSelected,
+    areNoItemsSelected,
+    onChange,
+}: {
+    areAllItemsSelected: boolean;
+    areNoItemsSelected: boolean;
+    onChange: (checked: boolean) => void;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <Tooltip title={t(!areAllItemsSelected ? 'global.button.select_all' : 'global.button.clear')}>
+            <Checkbox
+                sx={{
+                    padding: '8px',
+                    color: 'inherit',
+                    '&.Mui-checked, &.MuiCheckbox-indeterminate': {
+                        color: 'inherit',
+                    },
+                }}
+                checked={areAllItemsSelected}
+                indeterminate={!areNoItemsSelected && !areAllItemsSelected}
+                onChange={(_, checked) => onChange(checked)}
+            />
+        </Tooltip>
+    );
+};

src/modules/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 Tooltip from '@mui/material/Tooltip';
+import Checkbox from '@mui/material/Checkbox';
+import { useTranslation } from 'react-i18next';
+import ClearIcon from '@mui/icons-material/Clear';
+import { SelectableCollectionSelectAll } from '@/modules/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}
+                />
+            )}
+            <Tooltip 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)}
+                />
+            </Tooltip>
+        </>
+    );
+};

src/modules/collection/components/SelectionFAB.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 from 'react';
+import { useTranslation } from 'react-i18next';
+import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
+import { DEFAULT_FAB_STYLE } from '@/modules/core/components/buttons/StyledFab.tsx';
+import { Menu } from '@/modules/core/components/menu/Menu.tsx';
+import { TranslationKey } from '@/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>
+    );
+};