Add private tracking support

src/modules/manga/services/Mangas.ts

@@ -381,8 +381,12 @@ export class Mangas {
             copy: () =>
                 trackBindingsToAdd.map(
                     (trackRecord) =>
-                        requestManager.bindTracker(mangaToMigrateTo.id, trackRecord.trackerId, trackRecord.remoteId)
-                            .response,
+                        requestManager.bindTracker(
+                            mangaToMigrateTo.id,
+                            trackRecord.trackerId,
+                            trackRecord.remoteId,
+                            trackRecord.private,
+                        ).response,
                 ),
             cleanup: () =>
                 mode === 'migrate'

src/modules/tracker/Tracker.types.ts

@@ -56,12 +56,14 @@ export type TTrackRecordBind = TTrackRecordBase &
         | 'displayScore'
         | 'startDate'
         | 'finishDate'
+        | 'private'
     >;
 export type TTrackerManga = TrackRecordSearchFieldsFragment;
 
 export type TTrackerBase = Pick<TrackerType, 'id' | 'name' | 'icon' | 'isLoggedIn' | 'isTokenExpired'>;
 export type TTrackerSearch = TTrackerBase & Pick<TrackerType, 'authUrl'>;
-export type TTrackerBind = TTrackerBase & Pick<TrackerType, 'icon' | 'supportsTrackDeletion' | 'scores' | 'statuses'>;
+export type TTrackerBind = TTrackerBase &
+    Pick<TrackerType, 'icon' | 'supportsTrackDeletion' | 'supportsPrivateTracking' | 'scores' | 'statuses'>;
 export type TrackerIdInfo = Pick<TrackerType, 'id'>;
 export type LoggedInInfo = Pick<TrackerType, 'isLoggedIn' | 'isTokenExpired'>;
 export type TrackRecordTrackerInfo = Pick<TrackRecordType, 'trackerId'>;

src/modules/tracker/components/TrackerSearch.tsx

@@ -21,6 +21,7 @@ import InfoIcon from '@mui/icons-material/Info';
 import PopupState, { bindPopover, bindTrigger } from 'material-ui-popup-state';
 import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPlaceholder.tsx';
@@ -35,28 +36,34 @@ import { MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
-import { Tracker, TrackerIdInfo, TTrackerBase } from '@/modules/tracker/Tracker.types.ts';
+import { Tracker, TrackerIdInfo, TTrackerBind } from '@/modules/tracker/Tracker.types.ts';
+import { CustomButtonIcon } from '@/modules/core/components/buttons/CustomButtonIcon.tsx';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 
 const TrackButton = ({
     mangaId,
     selectedTrackerRemoteId,
     trackerId,
     closeSearchMode,
+    supportsPrivateTracking,
 }: {
     trackerId: TrackerIdInfo['id'];
     mangaId: MangaIdInfo['id'];
     selectedTrackerRemoteId: string | undefined;
     closeSearchMode: () => void;
+    supportsPrivateTracking: boolean;
 }) => {
     const { t } = useTranslation();
     const [bindTracker, bindTrackerMutation] = requestManager.useBindTracker();
 
-    const trackManga = () => {
+    const trackManga = (asPrivate: boolean) => {
         if (selectedTrackerRemoteId === undefined) {
             return;
         }
 
-        bindTracker({ variables: { mangaId, remoteId: selectedTrackerRemoteId, trackerId } })
+        bindTracker({
+            variables: { input: { mangaId, remoteId: selectedTrackerRemoteId, trackerId, private: asPrivate } },
+        })
             .then(() => {
                 makeToast(t('manga.action.track.add.label.success'), 'success');
                 closeSearchMode();
@@ -74,17 +81,34 @@ const TrackButton = ({
                 right: 0,
                 bottom: 0,
                 paddingBottom: DIALOG_PADDING,
+                gap: 2,
+                px: DIALOG_PADDING,
             }}
         >
             <Button
                 disabled={bindTrackerMutation.loading}
                 size="large"
                 variant="contained"
-                onClick={trackManga}
-                sx={{ width: '75%' }}
+                onClick={() => trackManga(false)}
+                sx={{ flexBasis: '65%' }}
             >
                 {t('manga.action.track.add.label.action')}
             </Button>
+            {supportsPrivateTracking && (
+                <CustomTooltip
+                    title={t('tracking.action.button.track_privately')}
+                    disabled={bindTrackerMutation.loading}
+                >
+                    <CustomButtonIcon
+                        disabled={bindTrackerMutation.loading}
+                        sx={{ flexBasis: '10%', maxWidth: '100px' }}
+                        variant="contained"
+                        onClick={() => trackManga(true)}
+                    >
+                        <VisibilityOffIcon />
+                    </CustomButtonIcon>
+                </CustomTooltip>
+            )}
         </Stack>
     );
 };
@@ -96,7 +120,7 @@ export const TrackerSearch = ({
     trackedId,
 }: {
     manga: MangaIdInfo & Pick<MangaType, 'title'>;
-    tracker: Pick<TTrackerBase, 'id'>;
+    tracker: TTrackerBind;
     closeSearchMode: () => void;
     trackedId?: string;
 }) => {
@@ -221,6 +245,7 @@ export const TrackerSearch = ({
                         trackerId={tracker.id}
                         closeSearchMode={closeSearchMode}
                         selectedTrackerRemoteId={selectedTrackerRemoteId}
+                        supportsPrivateTracking={tracker.supportsPrivateTracking}
                     />
                 )}
             </DialogContent>

src/modules/tracker/components/cards/TrackerActiveCard.tsx

@@ -27,6 +27,8 @@ import Typography from '@mui/material/Typography';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PopupState, { bindDialog, bindMenu, bindTrigger } from 'material-ui-popup-state';
 import { useMemo, useState } from 'react';
+import Badge from '@mui/material/Badge';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Trackers } from '@/modules/tracker/services/Trackers.ts';
@@ -50,7 +52,6 @@ const TrackerActiveLink = ({ children, url }: { children: React.ReactNode; url:
 );
 
 type TTrackerActive = Pick<TTrackerBind, 'id' | 'name' | 'icon' | 'supportsTrackDeletion'>;
-type TTrackRecordActive = Pick<TTrackRecordBind, 'id' | 'remoteUrl' | 'title'>;
 const TrackerActiveRemoveBind = ({
     trackerRecordId,
     tracker,
@@ -139,6 +140,33 @@ const TrackerActiveRemoveBind = ({
     );
 };
 
+const TrackerUpdatePrivateStatus = ({
+    trackRecordId,
+    isPrivate,
+    closeMenu,
+}: {
+    trackRecordId: TrackRecordType['id'];
+    isPrivate: boolean;
+    closeMenu: () => void;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <MenuItem
+            onClick={() => {
+                requestManager
+                    .updateTrackerBind(trackRecordId, { private: !isPrivate })
+                    .response.catch((e) =>
+                        makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
+                    );
+                closeMenu();
+            }}
+        >
+            {t(isPrivate ? 'tracking.action.button.track_publicly' : 'tracking.action.button.track_privately')}
+        </MenuItem>
+    );
+};
+type TTrackRecordActive = Pick<TTrackRecordBind, 'id' | 'remoteUrl' | 'title' | 'private'>;
 const TrackerActiveHeader = ({
     trackRecord,
     tracker,
@@ -158,14 +186,24 @@ const TrackerActiveHeader = ({
                 paddingBottom: 2,
             }}
         >
-            <TrackerActiveLink url={trackRecord.remoteUrl}>
-                <Avatar
-                    alt={`${tracker.name}`}
-                    src={requestManager.getValidImgUrlFor(tracker.icon)}
-                    variant="rounded"
-                    sx={{ width: 64, height: 64 }}
-                />
-            </TrackerActiveLink>
+            <Badge
+                badgeContent={
+                    trackRecord.private ? (
+                        <Stack sx={{ p: '2px 6px', backgroundColor: 'primary.main', borderRadius: 100 }}>
+                            <VisibilityOffIcon fontSize="small" sx={{ color: 'primary.contrastText' }} />
+                        </Stack>
+                    ) : null
+                }
+            >
+                <TrackerActiveLink url={trackRecord.remoteUrl}>
+                    <Avatar
+                        alt={`${tracker.name}`}
+                        src={requestManager.getValidImgUrlFor(tracker.icon)}
+                        variant="rounded"
+                        sx={{ width: 64, height: 64 }}
+                    />
+                </TrackerActiveLink>
+            </Badge>
 
             <ListItemButton sx={{ flexGrow: 1 }} onClick={openSearch}>
                 <CustomTooltip title={trackRecord.title}>
@@ -202,6 +240,11 @@ const TrackerActiveHeader = ({
                                         onClick={() => setHideMenu(true)}
                                         onClose={onClose}
                                     />,
+                                    <TrackerUpdatePrivateStatus
+                                        trackRecordId={trackRecord.id}
+                                        isPrivate={trackRecord.private}
+                                        closeMenu={onClose}
+                                    />,
                                 ]}
                             </Menu>
                         </>