refactor(modal): migrate SavePlaylistModal onto the Modal primitive

src/components/queuePanel/SavePlaylistModal.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import Modal from '../Modal';
 
 interface Props {
   onClose: () => void;
@@ -10,26 +10,32 @@ interface Props {
 export function SavePlaylistModal({ onClose, onSave }: Props) {
   const { t } = useTranslation();
   const [name, setName] = useState('');
+  const submit = () => { if (name.trim()) onSave(name.trim()); };
+
   return (
-    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true">
-      <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '400px' }}>
-        <button className="modal-close" onClick={onClose}><X size={18} /></button>
-        <h3 style={{ marginBottom: '1rem', fontFamily: 'var(--font-display)' }}>{t('queue.savePlaylist')}</h3>
-        <input
-          type="text"
-          className="live-search-field"
-          placeholder={t('queue.playlistName')}
-          value={name}
-          onChange={e => setName(e.target.value)}
-          autoFocus
-          onKeyDown={e => e.key === 'Enter' && name.trim() && onSave(name.trim())}
-          style={{ width: '100%', marginBottom: '1rem', padding: '10px 16px' }}
-        />
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+    <Modal
+      open
+      onClose={onClose}
+      title={t('queue.savePlaylist')}
+      size="sm"
+      closeLabel={t('queue.cancel')}
+      bodyClassName="ui-modal-body--padded"
+      footer={
+        <>
           <button className="btn btn-ghost" onClick={onClose}>{t('queue.cancel')}</button>
-          <button className="btn btn-primary" onClick={() => name.trim() && onSave(name.trim())}>{t('queue.save')}</button>
-        </div>
-      </div>
-    </div>
+          <button className="btn btn-primary" onClick={submit}>{t('queue.save')}</button>
+        </>
+      }
+    >
+      <input
+        type="text"
+        className="live-search-field"
+        placeholder={t('queue.playlistName')}
+        value={name}
+        onChange={e => setName(e.target.value)}
+        onKeyDown={e => { if (e.key === 'Enter') submit(); }}
+        style={{ width: '100%', padding: '10px 16px' }}
+      />
+    </Modal>
   );
 }