From f2be29ea3aad8476b7cbbae8772c14ed5c80a538 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Tue, 7 May 2024 14:42:02 +0200
Subject: [PATCH] Show search tips for MyAnimeList

---
 public/locales/en.json                   |  7 +++++
 src/components/atoms/SearchTextField.tsx |  5 ++--
 src/components/tracker/TrackerSearch.tsx | 33 +++++++++++++++++++++++-
 src/lib/data/Trackers.ts                 |  4 +++
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/public/locales/en.json b/public/locales/en.json
index e37cf19e..b01a3b0d 100644
--- a/public/locales/en.json
+++ b/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": {
diff --git a/src/components/atoms/SearchTextField.tsx b/src/components/atoms/SearchTextField.tsx
index 3c977145..37310b48 100644
--- a/src/components/atoms/SearchTextField.tsx
+++ b/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}
     />
 );
diff --git a/src/components/tracker/TrackerSearch.tsx b/src/components/tracker/TrackerSearch.tsx
index 704c584a..b4d067a8 100644
--- a/src/components/tracker/TrackerSearch.tsx
+++ b/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>
diff --git a/src/lib/data/Trackers.ts b/src/lib/data/Trackers.ts
index 3806c083..190f7b20 100644
--- a/src/lib/data/Trackers.ts
+++ b/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];