support navidrome playlist image upload

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

@@ -8,6 +8,8 @@ import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
 import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
+import { useDeletePlaylistImage } from '/@/renderer/features/playlists/mutations/delete-playlist-image-mutation';
+import { useUploadPlaylistImage } from '/@/renderer/features/playlists/mutations/upload-playlist-image-mutation';
 import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
 import {
     LibraryHeader,
@@ -18,9 +20,14 @@ import { ListSearchInput } from '/@/renderer/features/shared/components/list-sea
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDurationString } from '/@/renderer/utils';
+import { hasFeature } from '/@/shared/api/utils';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { FileButton } from '/@/shared/components/file-button/file-button';
+import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
 import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
-import { LibraryItem, Song } from '/@/shared/types/domain-types';
+import { LibraryItem, Playlist, Song } from '/@/shared/types/domain-types';
+import { ServerFeature } from '/@/shared/types/features-types';
 import { Play } from '/@/shared/types/types';
 
 interface PlaylistDetailSongListHeaderProps {
@@ -30,6 +37,64 @@ interface PlaylistDetailSongListHeaderProps {
     onToggleQueryBuilder?: () => void;
 }
 
+function ImageUploadOverlay({ data }: { data?: Playlist }) {
+    const uploadPlaylistImageMutation = useUploadPlaylistImage({});
+    const deletePlaylistImageMutation = useDeletePlaylistImage({});
+    const server = useCurrentServer();
+
+    if (!data) return null;
+    if (!hasFeature(server, ServerFeature.PLAYLIST_IMAGE_UPLOAD)) return null;
+
+    return (
+        <Group gap="xs">
+            <FileButton
+                accept="image/*"
+                onChange={async (file) => {
+                    if (!file || !data?._serverId) return;
+
+                    const buffer = await file.arrayBuffer();
+                    uploadPlaylistImageMutation.mutate({
+                        apiClientProps: {
+                            serverId: data._serverId,
+                        },
+                        body: { image: new Uint8Array(buffer) },
+                        query: { id: data.id },
+                    });
+                }}
+            >
+                {(props) => (
+                    <ActionIcon
+                        icon="uploadImage"
+                        iconProps={{ size: 'lg' }}
+                        radius="xl"
+                        size="xs"
+                        variant="default"
+                        {...props}
+                    />
+                )}
+            </FileButton>
+            <ActionIcon
+                disabled={!data?.uploadedImage}
+                icon="delete"
+                iconProps={{ size: 'lg' }}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    if (!data?._serverId) return;
+                    deletePlaylistImageMutation.mutate({
+                        apiClientProps: {
+                            serverId: data._serverId,
+                        },
+                        query: { id: data.id },
+                    });
+                }}
+                radius="xl"
+                size="xs"
+                variant="default"
+            />
+        </Group>
+    );
+}
+
 export const PlaylistDetailSongListHeader = ({
     isSmartPlaylist,
 }: PlaylistDetailSongListHeaderProps) => {
@@ -94,6 +159,7 @@ export const PlaylistDetailSongListHeader = ({
             ) : (
                 <LibraryHeader
                     compact
+                    imageOverlay={<ImageUploadOverlay data={detailQuery?.data} />}
                     imageUrl={imageUrl}
                     item={{
                         imageId: detailQuery?.data?.imageId,

src/renderer/features/playlists/mutations/delete-playlist-image-mutation.ts

@@ -0,0 +1,38 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import { DeletePlaylistImageArgs, DeletePlaylistImageResponse } from '/@/shared/types/domain-types';
+
+export const useDeletePlaylistImage = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<DeletePlaylistImageResponse, AxiosError, DeletePlaylistImageArgs, null>({
+        mutationFn: (args) => {
+            return api.controller.deletePlaylistImage({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_data, variables) => {
+            const { apiClientProps, query } = variables;
+            const serverId = apiClientProps.serverId;
+
+            if (!serverId) return;
+
+            queryClient.invalidateQueries({
+                queryKey: queryKeys.playlists.list(serverId),
+            });
+
+            if (query?.id) {
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.playlists.detail(serverId, query.id),
+                });
+            }
+        },
+        ...options,
+    });
+};

src/renderer/features/playlists/mutations/upload-playlist-image-mutation.ts

@@ -0,0 +1,38 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { MutationHookArgs } from '/@/renderer/lib/react-query';
+import { UploadPlaylistImageArgs, UploadPlaylistImageResponse } from '/@/shared/types/domain-types';
+
+export const useUploadPlaylistImage = (args: MutationHookArgs) => {
+    const { options } = args || {};
+    const queryClient = useQueryClient();
+
+    return useMutation<UploadPlaylistImageResponse, AxiosError, UploadPlaylistImageArgs, null>({
+        mutationFn: (args) => {
+            return api.controller.uploadPlaylistImage({
+                ...args,
+                apiClientProps: { serverId: args.apiClientProps.serverId },
+            });
+        },
+        onSuccess: (_data, variables) => {
+            const { apiClientProps, query } = variables;
+            const serverId = apiClientProps.serverId;
+
+            if (!serverId) return;
+
+            queryClient.invalidateQueries({
+                queryKey: queryKeys.playlists.list(serverId),
+            });
+
+            if (query?.id) {
+                queryClient.invalidateQueries({
+                    queryKey: queryKeys.playlists.detail(serverId, query.id),
+                });
+            }
+        },
+        ...options,
+    });
+};

src/renderer/features/shared/components/library-header.module.css

@@ -112,6 +112,7 @@
 }
 
 .image-section {
+    position: relative;
     z-index: 15;
     display: flex;
     grid-area: image;
@@ -124,6 +125,21 @@
     }
 }
 
+.image-overlay {
+    position: absolute;
+    right: var(--theme-spacing-xs);
+    bottom: var(--theme-spacing-xs);
+    z-index: 2;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 120ms ease;
+}
+
+.image-section:hover .image-overlay {
+    pointer-events: auto;
+    opacity: 1;
+}
+
 .metadata-section {
     z-index: 15;
     display: flex;

src/renderer/features/shared/components/library-header.tsx

@@ -35,6 +35,7 @@ interface LibraryHeaderProps {
     children?: ReactNode;
     compact?: boolean;
     containerClassName?: string;
+    imageOverlay?: ReactNode;
     imagePlaceholderUrl?: null | string;
     imageUrl?: null | string;
     item: {
@@ -56,6 +57,7 @@ export const LibraryHeader = forwardRef(
             children,
             compact,
             containerClassName,
+            imageOverlay,
             imageUrl,
             item,
             title,
@@ -168,6 +170,16 @@ export const LibraryHeader = forwardRef(
                         src={imageUrl || ''}
                         type="header"
                     />
+                    {imageOverlay && (
+                        <div
+                            className={styles.imageOverlay}
+                            onClick={(e) => e.stopPropagation()}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            role="presentation"
+                        >
+                            {imageOverlay}
+                        </div>
+                    )}
                 </div>
                 {title && (
                     <div className={styles.metadataSection}>