add more dynamic imports to optimize bundle

src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx

@@ -2,8 +2,6 @@ import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 
-import { PlaylistDetailSongListEditTable } from './playlist-detail-song-list-table';
-
 import { ItemListHandle } from '/@/renderer/components/item-list/types';
 import { useListContext } from '/@/renderer/context/list-context';
 import { eventEmitter } from '/@/renderer/events/event-emitter';
@@ -21,6 +19,14 @@ const PlaylistDetailSongListTable = lazy(() =>
     ),
 );
 
+const PlaylistDetailSongListEditTable = lazy(() =>
+    import('/@/renderer/features/playlists/components/playlist-detail-song-list-table').then(
+        (module) => ({
+            default: module.PlaylistDetailSongListEditTable,
+        }),
+    ),
+);
+
 const PlaylistDetailSongListGrid = lazy(() =>
     import('/@/renderer/features/playlists/components/playlist-detail-song-list-grid').then(
         (module) => ({

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

@@ -1,9 +1,8 @@
-import { closeModal, ContextModalProps, openContextModal } from '@mantine/modals';
+import { closeModal, ContextModalProps } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import { t } from 'i18next';
 import { useTranslation } from 'react-i18next';
 
-import i18n from '/@/i18n/i18n';
 import { useUpdatePlaylist } from '/@/renderer/features/playlists/mutations/update-playlist-mutation';
 import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import { useCurrentServer, useCurrentServerId, usePermissions } from '/@/renderer/store';
@@ -17,7 +16,6 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
 import { toast } from '/@/shared/components/toast/toast';
 import { useForm } from '/@/shared/hooks/use-form';
 import {
-    Playlist,
     ServerType,
     SortOrder,
     UpdatePlaylistBody,
@@ -167,24 +165,3 @@ const OwnerSelect = ({ form }: { form: ReturnType<typeof useForm<UpdatePlaylistB
         />
     );
 };
-
-export const openUpdatePlaylistModal = async (args: { playlist: Playlist }) => {
-    const { playlist } = args;
-
-    openContextModal({
-        innerProps: {
-            body: {
-                comment: playlist?.description || undefined,
-                genres: playlist?.genres,
-                name: playlist?.name,
-                ownerId: playlist?.ownerId || undefined,
-                public: playlist?.public || false,
-                queryBuilderRules: playlist?.rules || undefined,
-                sync: playlist?.sync || undefined,
-            },
-            query: { id: playlist?.id },
-        },
-        modalKey: 'updatePlaylist',
-        title: i18n.t('form.editPlaylist.title', { postProcess: 'titleCase' }) as string,
-    });
-};

src/renderer/features/playlists/components/update-playlist-modal.ts

@@ -0,0 +1,25 @@
+import { openContextModal } from '@mantine/modals';
+
+import i18n from '/@/i18n/i18n';
+import { Playlist } from '/@/shared/types/domain-types';
+
+export const openUpdatePlaylistModal = async (args: { playlist: Playlist }) => {
+    const { playlist } = args;
+
+    openContextModal({
+        innerProps: {
+            body: {
+                comment: playlist?.description || undefined,
+                genres: playlist?.genres,
+                name: playlist?.name,
+                ownerId: playlist?.ownerId || undefined,
+                public: playlist?.public || false,
+                queryBuilderRules: playlist?.rules || undefined,
+                sync: playlist?.sync || undefined,
+            },
+            query: { id: playlist?.id },
+        },
+        modalKey: 'updatePlaylist',
+        title: i18n.t('form.editPlaylist.title', { postProcess: 'titleCase' }) as string,
+    });
+};