Show search tips for MyAnimeList

public/locales/en.json

@@ -1150,6 +1150,13 @@
         "could_not_load_track_info": "Could not load track info"
       }
     },
+    "my_anime_list": {
+      "search": {
+        "label": {
+          "hint": "Search for a ID via \"id:<ID>\" (e.g. \"id:13\")\nLimit search to your lists via \"my:<Title>\" (e.g. \"my:One Piece\""
+        }
+      }
+    },
     "settings": {
       "dialog": {
         "title": {

src/components/atoms/SearchTextField.tsx

@@ -13,8 +13,10 @@ import CancelIcon from '@mui/icons-material/Cancel';
 
 export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps & { onCancel: () => void }) => (
     <TextField
+        {...textFieldProps}
         InputProps={{
-            endAdornment: (
+            ...textFieldProps.InputProps,
+            endAdornment: textFieldProps.InputProps?.endAdornment ?? (
                 <InputAdornment position="end">
                     <IconButton onClick={() => onCancel()}>
                         <CancelIcon />
@@ -22,6 +24,5 @@ export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps
                 </InputAdornment>
             ),
         }}
-        {...textFieldProps}
     />
 );

src/components/tracker/TrackerSearch.tsx

@@ -16,10 +16,15 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
+import InputAdornment from '@mui/material/InputAdornment';
+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 { requestManager } from '@/lib/requests/RequestManager.ts';
 import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { TBaseTracker } from '@/lib/data/Trackers.ts';
+import { TBaseTracker, Tracker } from '@/lib/data/Trackers.ts';
 import { SearchTextField } from '@/components/atoms/SearchTextField.tsx';
 import { makeToast } from '@/components/util/Toast.tsx';
 import { TrackerMangaCard } from '@/components/tracker/TrackerMangaCard.tsx';
@@ -103,6 +108,32 @@ export const TrackerSearch = ({
                             }
                         }}
                         onCancel={() => setTmpSearchString('')}
+                        InputProps={{
+                            startAdornment: tracker.id === Tracker.MYANIMELIST && (
+                                <InputAdornment position="start">
+                                    <PopupState variant="popover" popupId="tracker-search-info">
+                                        {(popupState) => (
+                                            <>
+                                                <IconButton {...bindTrigger(popupState)}>
+                                                    <InfoIcon />
+                                                </IconButton>
+                                                <Popover
+                                                    {...bindPopover(popupState)}
+                                                    anchorOrigin={{
+                                                        vertical: 'bottom',
+                                                        horizontal: 'left',
+                                                    }}
+                                                >
+                                                    <Typography sx={{ padding: 1, whiteSpace: 'pre-line' }}>
+                                                        {t('tracking.my_anime_list.search.label.hint')}
+                                                    </Typography>
+                                                </Popover>
+                                            </>
+                                        )}
+                                    </PopupState>
+                                </InputAdornment>
+                            ),
+                        }}
                     />
                 </Stack>
             </DialogTitle>

src/lib/data/Trackers.ts

@@ -14,6 +14,10 @@ import {
     TrackRecordType,
 } from '@/lib/graphql/generated/graphql.ts';
 
+export enum Tracker {
+    MYANIMELIST = 1,
+}
+
 export const UNSET_DATE = '0';
 
 export type TTrackRecord = GetMangaQuery['manga']['trackRecords']['nodes'][number];