make create playlist form implementation consistent

src/renderer/features/playlists/components/create-playlist-form.tsx

@@ -1,4 +1,5 @@
-import { useRef, useState } from 'react';
+import { t } from 'i18next';
+import { MouseEvent, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -10,6 +11,7 @@ import { convertQueryGroupToNDQuery } from '/@/renderer/features/playlists/utils
 import { useCurrentServer } from '/@/renderer/store';
 import { hasFeature } from '/@/shared/api/utils';
 import { Group } from '/@/shared/components/group/group';
+import { closeAllModals, openModal } from '/@/shared/components/modal/modal';
 import { ModalButton } from '/@/shared/components/modal/model-shared';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
@@ -18,7 +20,12 @@ import { Text } from '/@/shared/components/text/text';
 import { Textarea } from '/@/shared/components/textarea/textarea';
 import { toast } from '/@/shared/components/toast/toast';
 import { useForm } from '/@/shared/hooks/use-form';
-import { CreatePlaylistBody, ServerType, SongListSort } from '/@/shared/types/domain-types';
+import {
+    CreatePlaylistBody,
+    ServerListItem,
+    ServerType,
+    SongListSort,
+} from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';
 
 interface CreatePlaylistFormProps {
@@ -190,3 +197,16 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
         </form>
     );
 };
+
+export const openCreatePlaylistModal = (
+    server?: ServerListItem,
+    e?: MouseEvent<HTMLButtonElement>,
+) => {
+    e?.stopPropagation();
+
+    openModal({
+        children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
+        size: server?.type === ServerType?.NAVIDROME ? 'xl' : 'sm',
+        title: t('form.createPlaylist.title', { postProcess: 'titleCase' }),
+    });
+};

src/renderer/features/playlists/components/playlist-list-header-filters.tsx

@@ -1,14 +1,15 @@
-import { closeAllModals, openModal } from '@mantine/modals';
+import { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PLAYLIST_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
-import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
+import { openCreatePlaylistModal } from '/@/renderer/features/playlists/components/create-playlist-form';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { ListDisplayTypeToggleButton } from '/@/renderer/features/shared/components/list-display-type-toggle-button';
 import { ListFiltersModal } from '/@/renderer/features/shared/components/list-filters';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
+import { useCurrentServer } from '/@/renderer/store';
 import { Button } from '/@/shared/components/button/button';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Flex } from '/@/shared/components/flex/flex';
@@ -19,12 +20,10 @@ import { ItemListKey } from '/@/shared/types/types';
 export const PlaylistListHeaderFilters = () => {
     const { t } = useTranslation();
 
-    const handleCreatePlaylistModal = () => {
+    const server = useCurrentServer();
-        openModal({
+
-            children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
+    const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
-            size: 'lg',
+        openCreatePlaylistModal(server, e);
-            title: t('form.createPlaylist.title', { postProcess: 'sentenceCase' }),
-        });
     };
 
     return (

src/renderer/features/search/components/home-commands.tsx

@@ -1,15 +1,13 @@
-import { closeAllModals, openModal } from '@mantine/modals';
 import { nanoid } from 'nanoid/non-secure';
 import { Dispatch, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath, useNavigate } from 'react-router';
+import { createSearchParams, generatePath, useNavigate } from 'react-router';
-import { createSearchParams } from 'react-router';
 
-import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
+import { openCreatePlaylistModal } from '/@/renderer/features/playlists/components/create-playlist-form';
 import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
-import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
+import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface HomeCommandsProps {
     handleClose: () => void;
@@ -32,13 +30,8 @@ export const HomeCommands = ({
 
     const handleCreatePlaylistModal = useCallback(() => {
         handleClose();
-
+        openCreatePlaylistModal(server);
-        openModal({
+    }, [handleClose, server]);
-            children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
-            size: server?.type === ServerType?.NAVIDROME ? 'lg' : 'sm',
-            title: t('form.createPlaylist.title', { postProcess: 'sentenceCase' }),
-        });
-    }, [handleClose, server?.type, t]);
 
     const handleSearch = () => {
         navigate(

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -1,4 +1,4 @@
-import { closeAllModals, openContextModal, openModal } from '@mantine/modals';
+import { openContextModal } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
 import { memo, MouseEvent, useCallback, useMemo, useState } from 'react';
@@ -11,7 +11,7 @@ import { getDraggedItems } from '/@/renderer/components/item-list/helpers/get-dr
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
-import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
+import { openCreatePlaylistModal } from '/@/renderer/features/playlists/components/create-playlist-form';
 import {
     LONG_PRESS_PLAY_BEHAVIOR,
     PlayTooltip,
@@ -32,7 +32,6 @@ import {
     LibraryItem,
     Playlist,
     PlaylistListSort,
-    ServerType,
     Song,
     SortOrder,
 } from '/@/shared/types/domain-types';
@@ -331,13 +330,7 @@ export const SidebarPlaylistList = () => {
     }, [playlistsQuery.data?.items, handlePlayPlaylist, server?.type, server.username]);
 
     const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
-        e.stopPropagation();
+        openCreatePlaylistModal(server, e);
-
-        openModal({
-            children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
-            size: server?.type === ServerType?.NAVIDROME ? 'lg' : 'sm',
-            title: t('form.createPlaylist.title', { postProcess: 'titleCase' }),
-        });
     };
 
     return (