Add the research input in the Pokédex list component

[PokemonWorkshop]

As a User I would like to be able to research some Pokémon in the Pokédex list So that I can update it easily

[NuriYuri]

Véto (pour la 2.0.0).

J'ai tenté de m'en occuper et franchement c'est pas faisable.

1. Si l'input de recherche n'utilise pas de Ref, CALAGAMORT
2. Le DataBlockEditor est trop complexe et ne permet pas la gestion d'un input à droite du titre. J'ai du modifier le composant pour supporter ça.
3. Il y a aucun moyen de déplacer la liste à un Pokémon en particulier donc ça nécessite beaucoup de taff
4. On peut pas se contenter de réduire la liste du Pokédex parce que c'est un drag & drop, ça risque d'amener des tonnes de problème d'UX

Changement de code tentés: src\views\components\database\dex\DexPokemonList.tsx

export const DexPokemonList = ({ dex, cannotImport, allPokemon, dialogsRef, setCreatureIndex }: DexPokemonListProps) => {
  const isAddUnavailable = useMemo(() => checkAddUnavailable(dex, allPokemon), [dex, allPokemon]);
  const searchRef = useRef<HTMLInputElement>(null);

  const onChangeSearchInput = () => {
    if (!searchRef.current) return;
    const creatureName = searchRef.current.value.toLowerCase();
    const dbSymbolMatch = dex.creatures.find(({ dbSymbol }) => dbSymbol.toLowerCase().startsWith(creatureName));
    if (dbSymbolMatch) {
      setCreatureIndex(dex.creatures.indexOf(dbSymbolMatch));
    }
  };

  const onClearSearch = () => {
    if (!searchRef.current) return;

    searchRef.current.value = '';
  };

  const { t } = useTranslation('database_dex');
  return (
    <DataBlockEditor
      size="full"
      color="light"
      title={
        <TitleContainer>
          <h3>{t('dex_pokemon_list_title')}</h3>
          <ClearInput placeholder={t('search_pokemon')} ref={searchRef} onChange={onChangeSearchInput} onClear={onClearSearch} />
        </TitleContainer>
      }
      onClickDelete={() => dialogsRef?.current?.openDialog('deletion_list', true)}
      importation={{ label: t('import_a_pokemon_list'), onClick: () => dialogsRef?.current?.openDialog('import') }}
      add={{ label: t('add_a_pokemon'), onClick: () => dialogsRef?.current?.openDialog('add_pokemon') }}
      disabledDeletion={dex.creatures.length === 0}
      disabledImport={cannotImport}
      disabledAdd={isAddUnavailable}
    >
      <DexPokemonListTable dex={dex} dialogsRef={dialogsRef} setCreatureIndex={setCreatureIndex} />
    </DataBlockEditor>
  );
};

src\views\components\editor\DataBlockEditor.tsx

type DataBlockEditorProps = Omit<DataBlockCollapseEditorProps, 'editorTitle' | 'title'> & { title: ReactNode };

export const DataBlockEditor = ({
  title,
  size,
  children,
  disabled,
  onClickDelete,
  importation,
  add,
  disabledDeletion,
  disabledImport,
  disabledAdd,
  color,
}: DataBlockEditorProps) => {
  const { t } = useTranslation('editor');
  return (
    <DataBlockEditorContainer size={size} color={color} data-disabled={disabled && 'true'} data-noactive>
      {typeof title === 'string' ? (
        <TitleContainer>
          <h3>{title}</h3>
        </TitleContainer>
      ) : (
        title
      )}
      {children}