diff --git a/src/components/manga/MangaActionMenuItems.tsx b/src/components/manga/MangaActionMenuItems.tsx index f0fcebf2..1061b325 100644 --- a/src/components/manga/MangaActionMenuItems.tsx +++ b/src/components/manga/MangaActionMenuItems.tsx @@ -17,6 +17,8 @@ import Label from '@mui/icons-material/Label'; import { useMemo, useState } from 'react'; import SyncAltIcon from '@mui/icons-material/SyncAlt'; import { Link } from 'react-router-dom'; +import SyncIcon from '@mui/icons-material/Sync'; +import { Dialog } from '@mui/material'; import { TManga } from '@/typings.ts'; import { actionToTranslationKey, MangaAction, MangaDownloadInfo, Mangas, MangaUnreadInfo } from '@/lib/data/Mangas.ts'; import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts'; @@ -24,13 +26,14 @@ import { CategorySelect } from '@/components/navbar/action/CategorySelect.tsx'; import { MenuItem } from '@/components/menu/MenuItem.tsx'; import { createGetMenuItemTitle, createIsMenuItemDisabled, createShouldShowMenuItem } from '@/components/menu/util.ts'; import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts'; +import { TrackManga } from '@/components/tracker/TrackManga.tsx'; const ACTION_DISABLES_SELECTION_MODE: MangaAction[] = ['remove_from_library'] as const; type BaseProps = { onClose: (selectionModeState: boolean) => void; setHideMenu: (hide: boolean) => void }; export type SingleModeProps = { - manga: Pick & MangaDownloadInfo & MangaUnreadInfo; + manga: Pick & MangaDownloadInfo & MangaUnreadInfo; handleSelection?: SelectableCollectionReturnType['handleSelection']; }; @@ -52,6 +55,7 @@ export const MangaActionMenuItems = ({ const { t } = useTranslation(); const [isCategorySelectOpen, setIsCategorySelectOpen] = useState(false); + const [isTrackDialogOpen, setIsTrackDialogOpen] = useState(false); const isSingleMode = !!manga; const selectedMangas = passedSelectedMangas ?? []; @@ -140,6 +144,16 @@ export const MangaActionMenuItems = ({ )} + {isSingleMode && ( + { + setIsTrackDialogOpen(true); + setHideMenu(true); + }} + Icon={SyncIcon} + title={getMenuItemTitle('track', selectedMangas.length)} + /> + )} { setIsCategorySelectOpen(true); @@ -164,6 +178,20 @@ export const MangaActionMenuItems = ({ mangaIds={(passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined) as number[]} /> )} + {isTrackDialogOpen && ( + { + setIsTrackDialogOpen(false); + onClose(true); + }} + > + + + )} ); }; diff --git a/src/components/tracker/TrackManga.tsx b/src/components/tracker/TrackManga.tsx index bd082589..45bd9482 100644 --- a/src/components/tracker/TrackManga.tsx +++ b/src/components/tracker/TrackManga.tsx @@ -29,7 +29,7 @@ const getTrackerMode = (id: number, trackersInUse: number[], searchModeForTracke return TrackerMode.UNTRACKED; }; -export const TrackManga = ({ manga }: { manga: TManga }) => { +export const TrackManga = ({ manga }: { manga: Pick }) => { const navigate = useNavigate(); const [searchModeForTracker, setSearchModeForTracker] = useState(); diff --git a/src/lib/data/Mangas.ts b/src/lib/data/Mangas.ts index 0095c0f9..b91b3b44 100644 --- a/src/lib/data/Mangas.ts +++ b/src/lib/data/Mangas.ts @@ -27,7 +27,8 @@ export type MangaAction = | 'mark_as_unread' | 'remove_from_library' | 'change_categories' - | 'migrate'; + | 'migrate' + | 'track'; export const actionToTranslationKey: { [key in MangaAction]: { @@ -95,6 +96,14 @@ export const actionToTranslationKey: { success: 'manga.action.migrate.label.success', error: 'manga.action.migrate.label.error', }, + track: { + action: { + single: 'manga.action.track.add.label.action', + selected: 'manga.action.track.add.label.action', // not supported + }, + success: 'manga.action.track.add.label.success', + error: 'manga.action.track.add.label.error', + }, }; export type MangaChapterCountInfo = { chapters: Pick };