feat: implement search input component for manga data retrieval

src/api/generated/api.schemas.ts

@@ -215,9 +215,9 @@ export interface PageMangaImportJobDTO {
   number?: number;
   pageable?: PageableObject;
   numberOfElements?: number;
-  sort?: SortObject;
   first?: boolean;
   last?: boolean;
+  sort?: SortObject;
   empty?: boolean;
 }
 
@@ -236,6 +236,28 @@ export interface SortObject {
   unsorted?: boolean;
 }
 
+export interface DefaultResponseDTOListMangaProxyDataDTO {
+  timestamp?: string;
+  data?: MangaProxyDataDTO[];
+  message?: string;
+}
+
+export interface MangaProxyDataDTO {
+  imageUrl?: string;
+  /** @minLength 1 */
+  title: string;
+  alternativeTitles: string[];
+  authors: string[];
+  publishedAt?: string;
+  id: number;
+}
+
+export interface DefaultResponseDTOMangaProxyDataDTO {
+  timestamp?: string;
+  data?: MangaProxyDataDTO;
+  message?: string;
+}
+
 export interface DefaultResponseDTOPageMangaListDTO {
   timestamp?: string;
   data?: PageMangaListDTO;
@@ -278,9 +300,9 @@ export interface PageMangaListDTO {
   number?: number;
   pageable?: PageableObject;
   numberOfElements?: number;
-  sort?: SortObject;
   first?: boolean;
   last?: boolean;
+  sort?: SortObject;
   empty?: boolean;
 }
 

src/api/generated/catalog-proxy/catalog-proxy.ts

@@ -0,0 +1,405 @@
+/**
+ * Generated by orval v7.17.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import {
+  useQuery
+} from '@tanstack/react-query';
+import type {
+  DataTag,
+  DefinedInitialDataOptions,
+  DefinedUseQueryResult,
+  QueryClient,
+  QueryFunction,
+  QueryKey,
+  UndefinedInitialDataOptions,
+  UseQueryOptions,
+  UseQueryResult
+} from '@tanstack/react-query';
+
+import type {
+  DefaultResponseDTOListMangaProxyDataDTO,
+  DefaultResponseDTOMangaProxyDataDTO
+} from '../api.schemas';
+
+import { customInstance } from '../../api';
+
+
+type SecondParameter<T extends (...args: never) => unknown> = Parameters<T>[1];
+
+
+
+/**
+ * Fetches manga information from MyAnimeList using the provided title. This endpoint serves as a proxy to search for manga data without directly exposing the MyAnimeList API.
+ * @summary Get manga data from MyAnimeList by title
+ */
+export const searchMyAnimeListMangaDataByTitle = (
+    title: string,
+ options?: SecondParameter<typeof customInstance>,signal?: AbortSignal
+) => {
+      
+      
+      return customInstance<DefaultResponseDTOListMangaProxyDataDTO>(
+      {url: `/catalog/proxy/myanimelist/${encodeURIComponent(String(title))}/search`, method: 'GET', signal
+    },
+      options);
+    }
+  
+
+
+
+export const getSearchMyAnimeListMangaDataByTitleQueryKey = (title?: string,) => {
+    return [
+    `/catalog/proxy/myanimelist/${title}/search`
+    ] as const;
+    }
+
+    
+export const getSearchMyAnimeListMangaDataByTitleQueryOptions = <TData = Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError = unknown>(title: string, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+) => {
+
+const {query: queryOptions, request: requestOptions} = options ?? {};
+
+  const queryKey =  queryOptions?.queryKey ?? getSearchMyAnimeListMangaDataByTitleQueryKey(title);
+
+  
+
+    const queryFn: QueryFunction<Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>> = ({ signal }) => searchMyAnimeListMangaDataByTitle(title, requestOptions, signal);
+
+      
+
+      
+
+   return  { queryKey, queryFn, enabled: !!(title), ...queryOptions} as UseQueryOptions<Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError, TData> & { queryKey: DataTag<QueryKey, TData, TError> }
+}
+
+export type SearchMyAnimeListMangaDataByTitleQueryResult = NonNullable<Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>>
+export type SearchMyAnimeListMangaDataByTitleQueryError = unknown
+
+
+export function useSearchMyAnimeListMangaDataByTitle<TData = Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError = unknown>(
+ title: string, options: { query:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError, TData>> & Pick<
+        DefinedInitialDataOptions<
+          Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>,
+          TError,
+          Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>
+        > , 'initialData'
+      >, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  DefinedUseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useSearchMyAnimeListMangaDataByTitle<TData = Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError = unknown>(
+ title: string, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError, TData>> & Pick<
+        UndefinedInitialDataOptions<
+          Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>,
+          TError,
+          Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>
+        > , 'initialData'
+      >, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useSearchMyAnimeListMangaDataByTitle<TData = Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError = unknown>(
+ title: string, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+/**
+ * @summary Get manga data from MyAnimeList by title
+ */
+
+export function useSearchMyAnimeListMangaDataByTitle<TData = Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError = unknown>(
+ title: string, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchMyAnimeListMangaDataByTitle>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient 
+ ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {
+
+  const queryOptions = getSearchMyAnimeListMangaDataByTitleQueryOptions(title,options)
+
+  const query = useQuery(queryOptions, queryClient) as  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> };
+
+  query.queryKey = queryOptions.queryKey ;
+
+  return query;
+}
+
+
+
+
+/**
+ * Fetches manga information from MyAnimeList using the provided ID. This endpoint serves as a proxy to retrieve manga data without directly exposing the MyAnimeList API.
+ * @summary Get manga data from MyAnimeList by ID
+ */
+export const getMyAnimeListMangaDataById = (
+    id: number,
+ options?: SecondParameter<typeof customInstance>,signal?: AbortSignal
+) => {
+      
+      
+      return customInstance<DefaultResponseDTOMangaProxyDataDTO>(
+      {url: `/catalog/proxy/myanimelist/${encodeURIComponent(String(id))}`, method: 'GET', signal
+    },
+      options);
+    }
+  
+
+
+
+export const getGetMyAnimeListMangaDataByIdQueryKey = (id?: number,) => {
+    return [
+    `/catalog/proxy/myanimelist/${id}`
+    ] as const;
+    }
+
+    
+export const getGetMyAnimeListMangaDataByIdQueryOptions = <TData = Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError = unknown>(id: number, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+) => {
+
+const {query: queryOptions, request: requestOptions} = options ?? {};
+
+  const queryKey =  queryOptions?.queryKey ?? getGetMyAnimeListMangaDataByIdQueryKey(id);
+
+  
+
+    const queryFn: QueryFunction<Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>> = ({ signal }) => getMyAnimeListMangaDataById(id, requestOptions, signal);
+
+      
+
+      
+
+   return  { queryKey, queryFn, enabled: !!(id), ...queryOptions} as UseQueryOptions<Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError, TData> & { queryKey: DataTag<QueryKey, TData, TError> }
+}
+
+export type GetMyAnimeListMangaDataByIdQueryResult = NonNullable<Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>>
+export type GetMyAnimeListMangaDataByIdQueryError = unknown
+
+
+export function useGetMyAnimeListMangaDataById<TData = Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError = unknown>(
+ id: number, options: { query:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError, TData>> & Pick<
+        DefinedInitialDataOptions<
+          Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>,
+          TError,
+          Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>
+        > , 'initialData'
+      >, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  DefinedUseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useGetMyAnimeListMangaDataById<TData = Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError = unknown>(
+ id: number, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError, TData>> & Pick<
+        UndefinedInitialDataOptions<
+          Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>,
+          TError,
+          Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>
+        > , 'initialData'
+      >, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useGetMyAnimeListMangaDataById<TData = Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError = unknown>(
+ id: number, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+/**
+ * @summary Get manga data from MyAnimeList by ID
+ */
+
+export function useGetMyAnimeListMangaDataById<TData = Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError = unknown>(
+ id: number, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMyAnimeListMangaDataById>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient 
+ ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {
+
+  const queryOptions = getGetMyAnimeListMangaDataByIdQueryOptions(id,options)
+
+  const query = useQuery(queryOptions, queryClient) as  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> };
+
+  query.queryKey = queryOptions.queryKey ;
+
+  return query;
+}
+
+
+
+
+/**
+ * Fetches manga information from AniList using the provided title. This endpoint serves as a proxy to search for manga data without directly exposing the AniList API.
+ * @summary Get manga data from AniList by title
+ */
+export const searchAniListMangaDataByTitle = (
+    title: string,
+ options?: SecondParameter<typeof customInstance>,signal?: AbortSignal
+) => {
+      
+      
+      return customInstance<DefaultResponseDTOListMangaProxyDataDTO>(
+      {url: `/catalog/proxy/anilist/${encodeURIComponent(String(title))}/search`, method: 'GET', signal
+    },
+      options);
+    }
+  
+
+
+
+export const getSearchAniListMangaDataByTitleQueryKey = (title?: string,) => {
+    return [
+    `/catalog/proxy/anilist/${title}/search`
+    ] as const;
+    }
+
+    
+export const getSearchAniListMangaDataByTitleQueryOptions = <TData = Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError = unknown>(title: string, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+) => {
+
+const {query: queryOptions, request: requestOptions} = options ?? {};
+
+  const queryKey =  queryOptions?.queryKey ?? getSearchAniListMangaDataByTitleQueryKey(title);
+
+  
+
+    const queryFn: QueryFunction<Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>> = ({ signal }) => searchAniListMangaDataByTitle(title, requestOptions, signal);
+
+      
+
+      
+
+   return  { queryKey, queryFn, enabled: !!(title), ...queryOptions} as UseQueryOptions<Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError, TData> & { queryKey: DataTag<QueryKey, TData, TError> }
+}
+
+export type SearchAniListMangaDataByTitleQueryResult = NonNullable<Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>>
+export type SearchAniListMangaDataByTitleQueryError = unknown
+
+
+export function useSearchAniListMangaDataByTitle<TData = Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError = unknown>(
+ title: string, options: { query:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError, TData>> & Pick<
+        DefinedInitialDataOptions<
+          Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>,
+          TError,
+          Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>
+        > , 'initialData'
+      >, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  DefinedUseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useSearchAniListMangaDataByTitle<TData = Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError = unknown>(
+ title: string, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError, TData>> & Pick<
+        UndefinedInitialDataOptions<
+          Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>,
+          TError,
+          Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>
+        > , 'initialData'
+      >, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useSearchAniListMangaDataByTitle<TData = Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError = unknown>(
+ title: string, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+/**
+ * @summary Get manga data from AniList by title
+ */
+
+export function useSearchAniListMangaDataByTitle<TData = Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError = unknown>(
+ title: string, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof searchAniListMangaDataByTitle>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient 
+ ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {
+
+  const queryOptions = getSearchAniListMangaDataByTitleQueryOptions(title,options)
+
+  const query = useQuery(queryOptions, queryClient) as  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> };
+
+  query.queryKey = queryOptions.queryKey ;
+
+  return query;
+}
+
+
+
+
+/**
+ * Fetches manga information from AniList using the provided ID. This endpoint serves as a proxy to retrieve manga data without directly exposing the AniList API.
+ * @summary Get manga data from AniList by ID
+ */
+export const getAniListMangaDataById = (
+    id: number,
+ options?: SecondParameter<typeof customInstance>,signal?: AbortSignal
+) => {
+      
+      
+      return customInstance<DefaultResponseDTOMangaProxyDataDTO>(
+      {url: `/catalog/proxy/anilist/${encodeURIComponent(String(id))}`, method: 'GET', signal
+    },
+      options);
+    }
+  
+
+
+
+export const getGetAniListMangaDataByIdQueryKey = (id?: number,) => {
+    return [
+    `/catalog/proxy/anilist/${id}`
+    ] as const;
+    }
+
+    
+export const getGetAniListMangaDataByIdQueryOptions = <TData = Awaited<ReturnType<typeof getAniListMangaDataById>>, TError = unknown>(id: number, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getAniListMangaDataById>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+) => {
+
+const {query: queryOptions, request: requestOptions} = options ?? {};
+
+  const queryKey =  queryOptions?.queryKey ?? getGetAniListMangaDataByIdQueryKey(id);
+
+  
+
+    const queryFn: QueryFunction<Awaited<ReturnType<typeof getAniListMangaDataById>>> = ({ signal }) => getAniListMangaDataById(id, requestOptions, signal);
+
+      
+
+      
+
+   return  { queryKey, queryFn, enabled: !!(id), ...queryOptions} as UseQueryOptions<Awaited<ReturnType<typeof getAniListMangaDataById>>, TError, TData> & { queryKey: DataTag<QueryKey, TData, TError> }
+}
+
+export type GetAniListMangaDataByIdQueryResult = NonNullable<Awaited<ReturnType<typeof getAniListMangaDataById>>>
+export type GetAniListMangaDataByIdQueryError = unknown
+
+
+export function useGetAniListMangaDataById<TData = Awaited<ReturnType<typeof getAniListMangaDataById>>, TError = unknown>(
+ id: number, options: { query:Partial<UseQueryOptions<Awaited<ReturnType<typeof getAniListMangaDataById>>, TError, TData>> & Pick<
+        DefinedInitialDataOptions<
+          Awaited<ReturnType<typeof getAniListMangaDataById>>,
+          TError,
+          Awaited<ReturnType<typeof getAniListMangaDataById>>
+        > , 'initialData'
+      >, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  DefinedUseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useGetAniListMangaDataById<TData = Awaited<ReturnType<typeof getAniListMangaDataById>>, TError = unknown>(
+ id: number, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getAniListMangaDataById>>, TError, TData>> & Pick<
+        UndefinedInitialDataOptions<
+          Awaited<ReturnType<typeof getAniListMangaDataById>>,
+          TError,
+          Awaited<ReturnType<typeof getAniListMangaDataById>>
+        > , 'initialData'
+      >, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useGetAniListMangaDataById<TData = Awaited<ReturnType<typeof getAniListMangaDataById>>, TError = unknown>(
+ id: number, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getAniListMangaDataById>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient
+  ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+/**
+ * @summary Get manga data from AniList by ID
+ */
+
+export function useGetAniListMangaDataById<TData = Awaited<ReturnType<typeof getAniListMangaDataById>>, TError = unknown>(
+ id: number, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getAniListMangaDataById>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient 
+ ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {
+
+  const queryOptions = getGetAniListMangaDataByIdQueryOptions(id,options)
+
+  const query = useQuery(queryOptions, queryClient) as  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> };
+
+  query.queryKey = queryOptions.queryKey ;
+
+  return query;
+}
+
+
+
+

src/features/admin/components/AniListInput.tsx

@@ -0,0 +1,21 @@
+import {
+  useGetAniListMangaDataById,
+  useSearchAniListMangaDataByTitle,
+} from "@/api/generated/catalog-proxy/catalog-proxy.ts"
+import { CatalogSearchInput } from "./CatalogSearchInput"
+
+interface AniListSearchInputProps {
+  onChange: (id: number | undefined) => void
+  disabled?: boolean
+}
+
+export const AniListInput = ({ onChange, disabled }: AniListSearchInputProps) => (
+  <CatalogSearchInput
+    onChange={onChange}
+    disabled={disabled}
+    useGetById={useGetAniListMangaDataById}
+    useSearchByTitle={useSearchAniListMangaDataByTitle}
+    idLabel="AniList ID"
+    placeholder="Search by title or enter AniList ID..."
+  />
+)

src/features/admin/components/CatalogSearchInput.tsx

@@ -0,0 +1,257 @@
+import { useState, useEffect, useRef } from "react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Search, RefreshCw } from "lucide-react"
+import type { MangaProxyDataDTO } from "@/api/generated/api.schemas.ts"
+import { useDebounce } from "use-debounce"
+import { useQueryClient } from "@tanstack/react-query"
+import { formatToTwoDigits } from "@/utils/dateFormatter.ts"
+import type { UseQueryResult, DataTag, QueryKey } from "@tanstack/react-query"
+import type {
+  DefaultResponseDTOListMangaProxyDataDTO,
+  DefaultResponseDTOMangaProxyDataDTO,
+} from "@/api/generated/api.schemas.ts"
+
+type ByTitleResult = UseQueryResult<DefaultResponseDTOListMangaProxyDataDTO, unknown> & {
+  queryKey: DataTag<QueryKey, DefaultResponseDTOListMangaProxyDataDTO, unknown>
+}
+
+type ByIdResult = UseQueryResult<DefaultResponseDTOMangaProxyDataDTO, unknown> & {
+  queryKey: DataTag<QueryKey, DefaultResponseDTOMangaProxyDataDTO, unknown>
+  refetch: () => void
+}
+
+export interface CatalogSearchInputProps {
+  onChange: (id: number | undefined) => void
+  disabled?: boolean
+  /**
+   * Hook that searches by title. Should be enabled only when the text is non-empty and non-numeric.
+   * Signature mirrors the generated `useSearch*MangaDataByTitle` hooks.
+   */
+  useSearchByTitle: (
+    title: string,
+    options: { query: { enabled: boolean } }
+  ) => ByTitleResult
+  /**
+   * Hook that fetches a single entry by numeric ID. Should be called with `enabled: false`
+   * so the consumer controls when to fire (via the returned `refetch`).
+   * Signature mirrors the generated `useGet*MangaDataById` hooks.
+   */
+  useGetById: (
+    id: number,
+    options: { query: { enabled: boolean } }
+  ) => ByIdResult
+  idLabel?: string
+  placeholder?: string
+}
+
+export const CatalogSearchInput = ({
+  onChange,
+  disabled = false,
+  useSearchByTitle,
+  useGetById,
+  idLabel = "ID",
+  placeholder = "Search by title or enter ID...",
+}: CatalogSearchInputProps) => {
+  const queryClient = useQueryClient()
+
+  const [selectedManga, setSelectedManga] = useState<MangaProxyDataDTO | undefined>(undefined)
+  const [searchText, setSearchText] = useState("")
+  const [debouncedSearchText] = useDebounce(searchText, 500)
+  const searchTriggered = useRef(false)
+
+  const isNumericInput = /^\d+$/.test(debouncedSearchText.trim())
+
+  const showDropdown = !disabled && !isNumericInput && debouncedSearchText.trim().length > 0
+
+  const {
+    data: mangaDataById,
+    refetch: refetchMangaDataById,
+    isFetching: isFetchingMangaDataById,
+    queryKey: mangaDataByIdQueryKey,
+  } = useGetById(Number.parseInt(debouncedSearchText), { query: { enabled: false } })
+
+  const {
+    data: mangaDataByTitle,
+    isFetching: isFetchingMangaDataByTitle,
+    queryKey: mangaDataByTitleQueryKey,
+  } = useSearchByTitle(debouncedSearchText, {
+    query: { enabled: debouncedSearchText.trim().length > 0 && !isNumericInput },
+  })
+
+  useEffect(() => {
+    onChange(selectedManga?.id)
+  }, [onChange, selectedManga])
+
+  useEffect(() => {
+    if (isNumericInput && mangaDataById?.data && searchTriggered.current) {
+      searchTriggered.current = false
+      setSelectedManga(mangaDataById.data)
+      setSearchText("")
+    }
+  }, [isNumericInput, mangaDataById?.data])
+
+  const handleSelectManga = (manga: MangaProxyDataDTO) => {
+    setSelectedManga(manga)
+    setSearchText("")
+  }
+
+  const handleReset = () => {
+    setSelectedManga(undefined)
+    setSearchText("")
+
+    queryClient.setQueryData(mangaDataByIdQueryKey, undefined)
+    queryClient.setQueryData(mangaDataByTitleQueryKey, undefined)
+  }
+
+  // If a manga is selected, show the card
+  if (selectedManga) {
+    return (
+      <Card className="p-3">
+        <div className="flex gap-3">
+          <img
+            src={selectedManga.imageUrl}
+            alt={selectedManga.title}
+            className="h-20 w-14 rounded object-cover"
+          />
+          <div className="flex flex-1 flex-col justify-between">
+            <div>
+              <h4 className="font-medium text-sm leading-tight">{selectedManga.title}</h4>
+              {selectedManga.alternativeTitles && selectedManga.alternativeTitles.length > 0 && (
+                <p className="text-xs text-muted-foreground truncate">{selectedManga.alternativeTitles.join(", ")}</p>
+              )}
+              <div className="flex items-center text-xs text-muted-foreground mt-1 min-w-0">
+                {/* The authors container gets 'truncate' and 'min-w-0' */}
+                <span className="truncate min-w-0">
+                  {selectedManga.authors.join(", ")}
+                </span>
+
+                {/* The date gets 'shrink-0' to ensure it never disappears */}
+                <span className="shrink-0 whitespace-nowrap">
+                  &nbsp;· {formatToTwoDigits(selectedManga.publishedAt)}
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">{idLabel}: {selectedManga.id}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleReset}
+                disabled={disabled}
+                className="h-6 px-2 text-xs"
+              >
+                <RefreshCw className="h-3 w-3 mr-1" />
+                Change
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <Input
+          placeholder={placeholder}
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          disabled={disabled}
+          className="pr-10"
+        />
+        {!disabled && isNumericInput && searchText.trim() && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              if (mangaDataById?.data) {
+                setSelectedManga(mangaDataById.data)
+                setSearchText("")
+              } else {
+                searchTriggered.current = true
+                refetchMangaDataById()
+              }
+            }}
+            disabled={isFetchingMangaDataById}
+            className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0"
+          >
+            <Search className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Search Results Dropdown */}
+      {showDropdown && (
+        <Card className="absolute z-50 mt-1 w-full max-h-64 overflow-y-auto">
+          {isFetchingMangaDataByTitle ? (
+            <div className="p-3 space-y-3">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="flex gap-3">
+                  <Skeleton className="h-16 w-12 rounded" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-4 w-3/4" />
+                    <Skeleton className="h-3 w-1/2" />
+                    <Skeleton className="h-3 w-1/3" />
+                  </div>
+                </div>
+              ))}
+            </div>) :
+          !isFetchingMangaDataByTitle && mangaDataByTitle?.data && mangaDataByTitle.data.length > 0 ? (
+            <div className="">
+              {mangaDataByTitle.data.map((manga, index) => (
+                <div key={manga.id}>
+                  {index > 0 && (
+                    <div className="mx-4 border-t border-border/50" />
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => handleSelectManga(manga)}
+                    className="flex w-full gap-4 px-4 py-3 text-left hover:bg-accent/50 transition-colors"
+                  >
+                    <img
+                      src={manga.imageUrl}
+                      alt={manga.title}
+                      className="h-[72px] w-12 rounded-md object-cover shadow-sm"
+                    />
+                    <div className="flex-1 min-w-0 py-0.5">
+                      <h4 className="font-medium text-sm leading-tight truncate">{manga.title}</h4>
+                      {manga.alternativeTitles && manga.alternativeTitles.length > 0 && (
+                          <p className="text-xs text-muted-foreground truncate">{manga.alternativeTitles.join(", ")}</p>
+                      )}
+                      <div className="flex items-center text-xs text-muted-foreground mt-1 min-w-0">
+                        {/* The authors container gets 'truncate' and 'min-w-0' */}
+                        <span className="truncate min-w-0">
+                  {manga.authors.join(", ")}
+                </span>
+
+                        {/* The date gets 'shrink-0' to ensure it never disappears */}
+                        <span className="shrink-0 whitespace-nowrap">
+                  &nbsp;· {formatToTwoDigits(manga.publishedAt)}
+                </span>
+                      </div>
+                      <p className="text-[11px] text-muted-foreground/70 mt-0.5">{idLabel}: {manga.id}</p>
+                    </div>
+                  </button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+              No results found for &quot;{searchText}&quot;
+            </div>
+          )}
+        </Card>
+      )}
+
+      <p className="mt-1 text-xs text-muted-foreground">
+        Enter a number to search by {idLabel}, or type a title to search
+      </p>
+    </div>
+  )
+}

src/features/admin/components/MalInput.tsx

@@ -0,0 +1,21 @@
+import {
+  useGetMyAnimeListMangaDataById,
+  useSearchMyAnimeListMangaDataByTitle,
+} from "@/api/generated/catalog-proxy/catalog-proxy.ts"
+import { CatalogSearchInput } from "./CatalogSearchInput"
+
+interface MalSearchInputProps {
+  onChange: (id: number | undefined) => void
+  disabled?: boolean
+}
+
+export const MalInput = ({ onChange, disabled }: MalSearchInputProps) => (
+  <CatalogSearchInput
+    onChange={onChange}
+    disabled={disabled}
+    useGetById={useGetMyAnimeListMangaDataById}
+    useSearchByTitle={useSearchMyAnimeListMangaDataByTitle}
+    idLabel="MAL ID"
+    placeholder="Search by title or enter MAL ID..."
+  />
+)

src/features/admin/components/MangaManualImportDialog.tsx

@@ -13,8 +13,9 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog.tsx";
-import { Input } from "@/components/ui/input.tsx";
 import { Progress } from "@/components/ui/progress.tsx";
+import {MalInput} from "@/features/admin/components/MalInput.tsx";
+import {AniListInput} from "@/features/admin/components/AniListInput.tsx";
 
 interface MangaManualImportDialogProps {
 	fileImportDialogOpen: boolean;
@@ -146,24 +147,12 @@ export const MangaManualImportDialog = ({
 				</DialogHeader>
 				<div className="space-y-4">
 					<div>
-						<label className="text-sm font-medium">AniList ID</label>
+						<label className="text-sm font-medium">AniList</label>
-						<Input
+						<AniListInput onChange={(value) => setAniListId(value ? value.toString() : "")} disabled={isUploading}/>
-							placeholder="17"
-							value={aniListId}
-							onChange={(e) => setAniListId(e.target.value)}
-							className="mt-2"
-							disabled={isUploading}
-						/>
 					</div>
 					<div>
-						<label className="text-sm font-medium">MyAnimeList ID</label>
+						<label className="text-sm font-medium">MyAnimeList</label>
-						<Input
+						<MalInput onChange={(value) => setMalId(value ? value.toString() : "")} disabled={isUploading} />
-							placeholder="20"
-							value={malId}
-							onChange={(e) => setMalId(e.target.value)}
-							className="mt-2"
-							disabled={isUploading}
-						/>
 					</div>
 					{!isUploading && (
 						<div>