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' }),
+    });
+};