Lint all files

src/renderer/features/playlists/routes/playlist-detail-route.tsx

@@ -13,59 +13,61 @@ import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { useCurrentServer } from '../../../store/auth.store';
 
 const PlaylistDetailRoute = () => {
-  const tableRef = useRef<AgGridReactType | null>(null);
-  const scrollAreaRef = useRef<HTMLDivElement>(null);
-  const headerRef = useRef<HTMLDivElement>(null);
-  const { playlistId } = useParams() as { playlistId: string };
-  const server = useCurrentServer();
+    const tableRef = useRef<AgGridReactType | null>(null);
+    const scrollAreaRef = useRef<HTMLDivElement>(null);
+    const headerRef = useRef<HTMLDivElement>(null);
+    const { playlistId } = useParams() as { playlistId: string };
+    const server = useCurrentServer();
 
-  const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
-  const background = useFastAverageColor(
-    detailQuery?.data?.imageUrl,
-    !detailQuery?.isLoading,
-    'sqrt',
-  );
+    const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
+    const background = useFastAverageColor(
+        detailQuery?.data?.imageUrl,
+        !detailQuery?.isLoading,
+        'sqrt',
+    );
 
-  const handlePlayQueueAdd = usePlayQueueAdd();
-  const playButtonBehavior = usePlayButtonBehavior();
+    const handlePlayQueueAdd = usePlayQueueAdd();
+    const playButtonBehavior = usePlayButtonBehavior();
 
-  const handlePlay = () => {
-    handlePlayQueueAdd?.({
-      byItemType: {
-        id: [playlistId],
-        type: LibraryItem.PLAYLIST,
-      },
-      playType: playButtonBehavior,
-    });
-  };
+    const handlePlay = () => {
+        handlePlayQueueAdd?.({
+            byItemType: {
+                id: [playlistId],
+                type: LibraryItem.PLAYLIST,
+            },
+            playType: playButtonBehavior,
+        });
+    };
 
-  if (!background) return null;
+    if (!background) return null;
 
-  return (
-    <AnimatedPage key={`playlist-detail-${playlistId}`}>
-      <NativeScrollArea
-        ref={scrollAreaRef}
-        pageHeaderProps={{
-          backgroundColor: background,
-          children: (
-            <LibraryHeaderBar>
-              <LibraryHeaderBar.PlayButton onClick={handlePlay} />
-              <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
-            </LibraryHeaderBar>
-          ),
-          target: headerRef,
-        }}
-      >
-        <PlaylistDetailHeader
-          ref={headerRef}
-          background={background}
-          imagePlaceholderUrl={detailQuery?.data?.imageUrl}
-          imageUrl={detailQuery?.data?.imageUrl}
-        />
-        <PlaylistDetailContent tableRef={tableRef} />
-      </NativeScrollArea>
-    </AnimatedPage>
-  );
+    return (
+        <AnimatedPage key={`playlist-detail-${playlistId}`}>
+            <NativeScrollArea
+                ref={scrollAreaRef}
+                pageHeaderProps={{
+                    backgroundColor: background,
+                    children: (
+                        <LibraryHeaderBar>
+                            <LibraryHeaderBar.PlayButton onClick={handlePlay} />
+                            <LibraryHeaderBar.Title>
+                                {detailQuery?.data?.name}
+                            </LibraryHeaderBar.Title>
+                        </LibraryHeaderBar>
+                    ),
+                    target: headerRef,
+                }}
+            >
+                <PlaylistDetailHeader
+                    ref={headerRef}
+                    background={background}
+                    imagePlaceholderUrl={detailQuery?.data?.imageUrl}
+                    imageUrl={detailQuery?.data?.imageUrl}
+                />
+                <PlaylistDetailContent tableRef={tableRef} />
+            </NativeScrollArea>
+        </AnimatedPage>
+    );
 };
 
 export default PlaylistDetailRoute;

src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx

@@ -20,217 +20,228 @@ import { PlaylistSongListQuery, ServerType, SongListSort, SortOrder } from '/@/r
 import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
 
 const PlaylistDetailSongListRoute = () => {
-  const navigate = useNavigate();
-  const tableRef = useRef<AgGridReactType | null>(null);
-  const { playlistId } = useParams() as { playlistId: string };
-  const server = useCurrentServer();
+    const navigate = useNavigate();
+    const tableRef = useRef<AgGridReactType | null>(null);
+    const { playlistId } = useParams() as { playlistId: string };
+    const server = useCurrentServer();
 
-  const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
-  const createPlaylistMutation = useCreatePlaylist({});
-  const deletePlaylistMutation = useDeletePlaylist({});
+    const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
+    const createPlaylistMutation = useCreatePlaylist({});
+    const deletePlaylistMutation = useDeletePlaylist({});
 
-  const handleSave = (
-    filter: Record<string, any>,
-    extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
-  ) => {
-    const rules = {
-      ...filter,
-      limit: extraFilters.limit || undefined,
-      order: extraFilters.sortOrder || 'desc',
-      sort: extraFilters.sortBy || 'dateAdded',
+    const handleSave = (
+        filter: Record<string, any>,
+        extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
+    ) => {
+        const rules = {
+            ...filter,
+            limit: extraFilters.limit || undefined,
+            order: extraFilters.sortOrder || 'desc',
+            sort: extraFilters.sortBy || 'dateAdded',
+        };
+
+        if (!detailQuery?.data) return;
+
+        createPlaylistMutation.mutate(
+            {
+                body: {
+                    _custom: {
+                        navidrome: {
+                            owner: detailQuery?.data?.owner || '',
+                            ownerId: detailQuery?.data?.ownerId || '',
+                            public: detailQuery?.data?.public || false,
+                            rules,
+                            sync: detailQuery?.data?.sync || false,
+                        },
+                    },
+                    comment: detailQuery?.data?.description || '',
+                    name: detailQuery?.data?.name,
+                },
+                serverId: detailQuery?.data?.serverId,
+            },
+            {
+                onSuccess: (data) => {
+                    toast.success({ message: 'Playlist has been saved' });
+                    navigate(
+                        generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, {
+                            playlistId: data?.id || '',
+                        }),
+                        {
+                            replace: true,
+                        },
+                    );
+                    deletePlaylistMutation.mutate({
+                        query: { id: playlistId },
+                        serverId: detailQuery?.data?.serverId,
+                    });
+                },
+            },
+        );
     };
 
-    if (!detailQuery?.data) return;
+    const handleSaveAs = (
+        filter: Record<string, any>,
+        extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
+    ) => {
+        openModal({
+            children: (
+                <SaveAsPlaylistForm
+                    body={{
+                        _custom: {
+                            navidrome: {
+                                owner: detailQuery?.data?.owner || '',
+                                ownerId: detailQuery?.data?.ownerId || '',
+                                public: detailQuery?.data?.public || false,
+                                rules: {
+                                    ...filter,
+                                    limit: extraFilters.limit || undefined,
+                                    order: extraFilters.sortOrder || 'desc',
+                                    sort: extraFilters.sortBy || 'dateAdded',
+                                },
+                                sync: detailQuery?.data?.sync || false,
+                            },
+                        },
+                        comment: detailQuery?.data?.description || '',
+                        name: detailQuery?.data?.name,
+                    }}
+                    serverId={detailQuery?.data?.serverId}
+                    onCancel={closeAllModals}
+                    onSuccess={(data) =>
+                        navigate(
+                            generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, {
+                                playlistId: data?.id || '',
+                            }),
+                        )
+                    }
+                />
+            ),
+            title: 'Save as',
+        });
+    };
 
-    createPlaylistMutation.mutate(
-      {
-        body: {
-          _custom: {
-            navidrome: {
-              owner: detailQuery?.data?.owner || '',
-              ownerId: detailQuery?.data?.ownerId || '',
-              public: detailQuery?.data?.public || false,
-              rules,
-              sync: detailQuery?.data?.sync || false,
-            },
-          },
-          comment: detailQuery?.data?.description || '',
-          name: detailQuery?.data?.name,
-        },
-        serverId: detailQuery?.data?.serverId,
-      },
-      {
-        onSuccess: (data) => {
-          toast.success({ message: 'Playlist has been saved' });
-          navigate(generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data?.id || '' }), {
-            replace: true,
-          });
-          deletePlaylistMutation.mutate({
-            query: { id: playlistId },
-            serverId: detailQuery?.data?.serverId,
-          });
-        },
-      },
-    );
-  };
-
-  const handleSaveAs = (
-    filter: Record<string, any>,
-    extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
-  ) => {
-    openModal({
-      children: (
-        <SaveAsPlaylistForm
-          body={{
-            _custom: {
-              navidrome: {
-                owner: detailQuery?.data?.owner || '',
-                ownerId: detailQuery?.data?.ownerId || '',
-                public: detailQuery?.data?.public || false,
-                rules: {
-                  ...filter,
-                  limit: extraFilters.limit || undefined,
-                  order: extraFilters.sortOrder || 'desc',
-                  sort: extraFilters.sortBy || 'dateAdded',
+    const smartPlaylistVariants: Variants = {
+        animate: (custom: { isQueryBuilderExpanded: boolean }) => {
+            return {
+                maxHeight: custom.isQueryBuilderExpanded ? '35vh' : '3.5em',
+                opacity: 1,
+                transition: {
+                    duration: 0.3,
+                    ease: 'easeInOut',
                 },
-                sync: detailQuery?.data?.sync || false,
-              },
-            },
-            comment: detailQuery?.data?.description || '',
-            name: detailQuery?.data?.name,
-          }}
-          serverId={detailQuery?.data?.serverId}
-          onCancel={closeAllModals}
-          onSuccess={(data) =>
-            navigate(generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data?.id || '' }))
-          }
-        />
-      ),
-      title: 'Save as',
-    });
-  };
-
-  const smartPlaylistVariants: Variants = {
-    animate: (custom: { isQueryBuilderExpanded: boolean }) => {
-      return {
-        maxHeight: custom.isQueryBuilderExpanded ? '35vh' : '3.5em',
-        opacity: 1,
-        transition: {
-          duration: 0.3,
-          ease: 'easeInOut',
+                y: 0,
+            };
         },
-        y: 0,
-      };
-    },
-    exit: {
-      opacity: 0,
-      y: -25,
-    },
-    initial: {
-      opacity: 0,
-      y: -25,
-    },
-  };
+        exit: {
+            opacity: 0,
+            y: -25,
+        },
+        initial: {
+            opacity: 0,
+            y: -25,
+        },
+    };
 
-  const isSmartPlaylist =
-    !detailQuery?.isLoading && detailQuery?.data?.rules && server?.type === ServerType.NAVIDROME;
+    const isSmartPlaylist =
+        !detailQuery?.isLoading &&
+        detailQuery?.data?.rules &&
+        server?.type === ServerType.NAVIDROME;
 
-  const [showQueryBuilder, setShowQueryBuilder] = useState(false);
-  const [isQueryBuilderExpanded, setIsQueryBuilderExpanded] = useState(false);
+    const [showQueryBuilder, setShowQueryBuilder] = useState(false);
+    const [isQueryBuilderExpanded, setIsQueryBuilderExpanded] = useState(false);
 
-  const handleToggleExpand = () => {
-    setIsQueryBuilderExpanded((prev) => !prev);
-  };
+    const handleToggleExpand = () => {
+        setIsQueryBuilderExpanded((prev) => !prev);
+    };
 
-  const handleToggleShowQueryBuilder = () => {
-    setShowQueryBuilder((prev) => !prev);
-    setIsQueryBuilderExpanded(true);
-  };
+    const handleToggleShowQueryBuilder = () => {
+        setShowQueryBuilder((prev) => !prev);
+        setIsQueryBuilderExpanded(true);
+    };
 
-  const page = usePlaylistDetailStore();
-  const filters: Partial<PlaylistSongListQuery> = {
-    sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
-    sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
-  };
+    const page = usePlaylistDetailStore();
+    const filters: Partial<PlaylistSongListQuery> = {
+        sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
+        sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
+    };
 
-  const itemCountCheck = usePlaylistSongList({
-    options: {
-      cacheTime: 1000 * 60 * 60 * 2,
-      staleTime: 1000 * 60 * 60 * 2,
-    },
-    query: {
-      id: playlistId,
-      limit: 1,
-      startIndex: 0,
-      ...filters,
-    },
-    serverId: server?.id,
-  });
+    const itemCountCheck = usePlaylistSongList({
+        options: {
+            cacheTime: 1000 * 60 * 60 * 2,
+            staleTime: 1000 * 60 * 60 * 2,
+        },
+        query: {
+            id: playlistId,
+            limit: 1,
+            startIndex: 0,
+            ...filters,
+        },
+        serverId: server?.id,
+    });
 
-  const itemCount =
-    itemCountCheck.data?.totalRecordCount === null
-      ? undefined
-      : itemCountCheck.data?.totalRecordCount;
+    const itemCount =
+        itemCountCheck.data?.totalRecordCount === null
+            ? undefined
+            : itemCountCheck.data?.totalRecordCount;
 
-  return (
-    <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
-      <PlaylistDetailSongListHeader
-        handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
-        itemCount={itemCount}
-        tableRef={tableRef}
-      />
-      <AnimatePresence
-        custom={{ isQueryBuilderExpanded }}
-        initial={false}
-      >
-        {(isSmartPlaylist || showQueryBuilder) && (
-          <motion.div
-            animate="animate"
-            custom={{ isQueryBuilderExpanded }}
-            exit="exit"
-            initial="initial"
-            transition={{ duration: 0.2, ease: 'easeInOut' }}
-            variants={smartPlaylistVariants}
-          >
-            <Paper
-              h="100%"
-              pos="relative"
-              w="100%"
+    return (
+        <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
+            <PlaylistDetailSongListHeader
+                handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
+                itemCount={itemCount}
+                tableRef={tableRef}
+            />
+            <AnimatePresence
+                custom={{ isQueryBuilderExpanded }}
+                initial={false}
             >
-              <Group
-                pt="1rem"
-                px="1rem"
-              >
-                <Button
-                  compact
-                  variant="default"
-                  onClick={handleToggleExpand}
-                >
-                  {isQueryBuilderExpanded ? (
-                    <RiArrowUpSLine size={20} />
-                  ) : (
-                    <RiArrowDownSLine size={20} />
-                  )}
-                </Button>
-                <Text>Query Editor</Text>
-              </Group>
-              <PlaylistQueryBuilder
-                key={JSON.stringify(detailQuery?.data?.rules)}
-                isSaving={createPlaylistMutation?.isLoading}
-                limit={detailQuery?.data?.rules?.limit}
-                query={detailQuery?.data?.rules}
-                sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
-                sortOrder={detailQuery?.data?.rules?.order || 'asc'}
-                onSave={handleSave}
-                onSaveAs={handleSaveAs}
-              />
-            </Paper>
-          </motion.div>
-        )}
-      </AnimatePresence>
-      <PlaylistDetailSongListContent tableRef={tableRef} />
-    </AnimatedPage>
-  );
+                {(isSmartPlaylist || showQueryBuilder) && (
+                    <motion.div
+                        animate="animate"
+                        custom={{ isQueryBuilderExpanded }}
+                        exit="exit"
+                        initial="initial"
+                        transition={{ duration: 0.2, ease: 'easeInOut' }}
+                        variants={smartPlaylistVariants}
+                    >
+                        <Paper
+                            h="100%"
+                            pos="relative"
+                            w="100%"
+                        >
+                            <Group
+                                pt="1rem"
+                                px="1rem"
+                            >
+                                <Button
+                                    compact
+                                    variant="default"
+                                    onClick={handleToggleExpand}
+                                >
+                                    {isQueryBuilderExpanded ? (
+                                        <RiArrowUpSLine size={20} />
+                                    ) : (
+                                        <RiArrowDownSLine size={20} />
+                                    )}
+                                </Button>
+                                <Text>Query Editor</Text>
+                            </Group>
+                            <PlaylistQueryBuilder
+                                key={JSON.stringify(detailQuery?.data?.rules)}
+                                isSaving={createPlaylistMutation?.isLoading}
+                                limit={detailQuery?.data?.rules?.limit}
+                                query={detailQuery?.data?.rules}
+                                sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
+                                sortOrder={detailQuery?.data?.rules?.order || 'asc'}
+                                onSave={handleSave}
+                                onSaveAs={handleSaveAs}
+                            />
+                        </Paper>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+            <PlaylistDetailSongListContent tableRef={tableRef} />
+        </AnimatedPage>
+    );
 };
 
 export default PlaylistDetailSongListRoute;

src/renderer/features/playlists/routes/playlist-list-route.tsx

@@ -8,37 +8,37 @@ import { AnimatedPage } from '/@/renderer/features/shared';
 import { useCurrentServer } from '/@/renderer/store';
 
 const PlaylistListRoute = () => {
-  const tableRef = useRef<AgGridReactType | null>(null);
-  const server = useCurrentServer();
+    const tableRef = useRef<AgGridReactType | null>(null);
+    const server = useCurrentServer();
 
-  const itemCountCheck = usePlaylistList({
-    options: {
-      cacheTime: 1000 * 60 * 60 * 2,
-      staleTime: 1000 * 60 * 60 * 2,
-    },
-    query: {
-      limit: 1,
-      sortBy: PlaylistListSort.NAME,
-      sortOrder: SortOrder.ASC,
-      startIndex: 0,
-    },
-    serverId: server?.id,
-  });
+    const itemCountCheck = usePlaylistList({
+        options: {
+            cacheTime: 1000 * 60 * 60 * 2,
+            staleTime: 1000 * 60 * 60 * 2,
+        },
+        query: {
+            limit: 1,
+            sortBy: PlaylistListSort.NAME,
+            sortOrder: SortOrder.ASC,
+            startIndex: 0,
+        },
+        serverId: server?.id,
+    });
 
-  const itemCount =
-    itemCountCheck.data?.totalRecordCount === null
-      ? undefined
-      : itemCountCheck.data?.totalRecordCount;
+    const itemCount =
+        itemCountCheck.data?.totalRecordCount === null
+            ? undefined
+            : itemCountCheck.data?.totalRecordCount;
 
-  return (
-    <AnimatedPage>
-      <PlaylistListHeader
-        itemCount={itemCount}
-        tableRef={tableRef}
-      />
-      <PlaylistListContent tableRef={tableRef} />
-    </AnimatedPage>
-  );
+    return (
+        <AnimatedPage>
+            <PlaylistListHeader
+                itemCount={itemCount}
+                tableRef={tableRef}
+            />
+            <PlaylistListContent tableRef={tableRef} />
+        </AnimatedPage>
+    );
 };
 
 export default PlaylistListRoute;