From d821e0a1f81e4c27f752e3621272bce77163ac26 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Fri, 12 Dec 2025 19:32:15 -0800 Subject: [PATCH] make create playlist form implementation consistent --- .../components/create-playlist-form.tsx | 24 +++++++++++++++++-- .../playlist-list-header-filters.tsx | 15 ++++++------ .../search/components/home-commands.tsx | 17 ++++--------- .../components/sidebar-playlist-list.tsx | 13 +++------- 4 files changed, 37 insertions(+), 32 deletions(-) diff --git a/src/renderer/features/playlists/components/create-playlist-form.tsx b/src/renderer/features/playlists/components/create-playlist-form.tsx index 7c3ce5bf7..0c7018e6a 100644 --- a/src/renderer/features/playlists/components/create-playlist-form.tsx +++ b/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) => { ); }; + +export const openCreatePlaylistModal = ( + server?: ServerListItem, + e?: MouseEvent, +) => { + e?.stopPropagation(); + + openModal({ + children: closeAllModals()} />, + size: server?.type === ServerType?.NAVIDROME ? 'xl' : 'sm', + title: t('form.createPlaylist.title', { postProcess: 'titleCase' }), + }); +}; diff --git a/src/renderer/features/playlists/components/playlist-list-header-filters.tsx b/src/renderer/features/playlists/components/playlist-list-header-filters.tsx index 01bbd5e43..a996e37be 100644 --- a/src/renderer/features/playlists/components/playlist-list-header-filters.tsx +++ b/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 = () => { - openModal({ - children: closeAllModals()} />, - size: 'lg', - title: t('form.createPlaylist.title', { postProcess: 'sentenceCase' }), - }); + const server = useCurrentServer(); + + const handleCreatePlaylistModal = (e: MouseEvent) => { + openCreatePlaylistModal(server, e); }; return ( diff --git a/src/renderer/features/search/components/home-commands.tsx b/src/renderer/features/search/components/home-commands.tsx index 835e854e1..88f334949 100644 --- a/src/renderer/features/search/components/home-commands.tsx +++ b/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 } from 'react-router'; +import { createSearchParams, generatePath, useNavigate } 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(); - - openModal({ - children: closeAllModals()} />, - size: server?.type === ServerType?.NAVIDROME ? 'lg' : 'sm', - title: t('form.createPlaylist.title', { postProcess: 'sentenceCase' }), - }); - }, [handleClose, server?.type, t]); + openCreatePlaylistModal(server); + }, [handleClose, server]); const handleSearch = () => { navigate( diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx index 48ca9775b..72af350c4 100644 --- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx +++ b/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) => { - e.stopPropagation(); - - openModal({ - children: closeAllModals()} />, - size: server?.type === ServerType?.NAVIDROME ? 'lg' : 'sm', - title: t('form.createPlaylist.title', { postProcess: 'titleCase' }), - }); + openCreatePlaylistModal(server, e); }; return (