remove stores for artists

src/routes/playlists/edit/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 
-    import type {DeezerArtist, DeezerPlaylistDetails} from "$lib/DeezerApiModel";
+    import type {DeezerArtist} from "$lib/DeezerApiModel";
     import {getToastStore, Tab, TabGroup} from '@skeletonlabs/skeleton';
     import {onDestroy, onMount} from "svelte";
     import {writable} from "svelte/store";
@@ -32,20 +32,18 @@
 
     let {data}: Props = $props();
 
-    const playlistArtists = writable<DeezerArtist[]>([])
-    $effect(() => {
-        playlistArtists.set(data.topArtists)
-    });
 
-    function updatePlaylist(playlist: DeezerPlaylistDetails) {
-        playlistState.isUpdatable = data.currentUser?.id === playlist?.creator?.id
-        playlistState.playlist = playlist
-        playlistState.trackSelections = playlist.tracks.data
+
+    function updatePlaylist(data: PageData) {
+        playlistState.isUpdatable = data.currentUser?.id === data.playlist?.creator?.id
+        playlistState.playlist = data.playlist
+        playlistState.playlistArtists = data.topArtists
+        playlistState.trackSelections = data.playlist.tracks.data
             .map(track => ({track, inPlaylist: true, selected: true}))
     }
 
     $effect(() => {
-        updatePlaylist(data.playlist)
+        updatePlaylist(data)
     })
 
     async function relinkNonReadableTracks() {
@@ -65,13 +63,10 @@
         if (playlistState.trackSelections.length === 0 && playlistState.playlist) {
             playlistState.playlist.title = artist.name + " - Full Discography"
         }
-        playlistArtists.update(artists => {
-            const existingArtistIndex = artists.findIndex(a => a.id === artist.id);
-            if (existingArtistIndex < 0) {
-                artists.push(artist)
-            }
-            return artists
-        })
+        const existingArtistIndex = playlistState.playlistArtists.findIndex(a => a.id === artist.id);
+        if (existingArtistIndex < 0) {
+            playlistState.playlistArtists.push(artist)
+        }
         addArtistTracks(artist, playlistState.trackSelections, toastStore)
     }
 
@@ -161,14 +156,12 @@
                     {#if tabIndex === TabIndex.DESCRIPTION}
                         <PlaylistInfo/>
                     {:else if tabIndex === TabIndex.TRACKS}
-                        <PlaylistTracks artists={$playlistArtists}
-                                        {toastStore}/>
+                        <PlaylistTracks {toastStore}/>
                     {:else if tabIndex === TabIndex.PLAYLIST_ARTISTS}
                         <p><i>
                             you can add/remove all tracks from a playlist artist from here
                         </i></p>
-                        <PlaylistArtists {playlistArtists} trackSelections={playlistState.trackSelections}
-                                         {toastStore}/>
+                        <PlaylistArtists   {toastStore}/>
                     {:else if tabIndex === TabIndex.SEARCH_ARTISTS}
                         <p class="my-4"><i>
                             you can add all tracks from a new artist from here

src/routes/playlists/edit/PlaylistArtists.svelte

@@ -1,25 +1,21 @@
 <script lang="ts">
 
-    import type {DeezerArtist} from "$lib/DeezerApiModel";
     import HorizontalSpan from "$lib/html/HorizontalSpan.svelte";
-    import type {Writable} from "svelte/store";
     import SortAscendingIcon from '~icons/ph/sort-ascending-bold';
     import SortDescendingIcon from '~icons/ph/sort-descending-bold';
     import type {PlaylistArtistsSort} from "./artistsSorter";
     import {sortArtistsWithNewSort} from "./artistsSorter";
     import PlaylistArtistsElement from "./PlaylistArtistsElement.svelte";
 
-    import type {TrackSelection} from "./trackSelection";
     import type {ToastStore} from "@skeletonlabs/skeleton";
+    import {playlistState} from "./playlistState.svelte";
 
 
     interface Props {
-        playlistArtists: Writable<DeezerArtist[]>;
-        trackSelections: TrackSelection[];
         toastStore: ToastStore;
     }
 
-    let { playlistArtists, trackSelections, toastStore }: Props = $props();
+    let {   toastStore }: Props = $props();
     export const playlistArtistsSort: PlaylistArtistsSort = $state({
         ascending: false,
         orderBy: "trackCount"
@@ -32,13 +28,13 @@
         if (newSort.orderBy !== undefined) {
             playlistArtistsSort.orderBy = newSort.orderBy
         }
-        playlistArtists.update(playlistArtists => sortArtistsWithNewSort(playlistArtists, playlistArtistsSort, trackSelections))
+        sortArtistsWithNewSort(playlistState.playlistArtists, playlistArtistsSort, playlistState.trackSelections)
     }
 
 </script>
 
 
-{#if $playlistArtists?.length > 0}
+{#if playlistState.playlistArtists?.length > 0}
         <span class="flex justify-between w-full items-center gap-x-2 my-4">
             <HorizontalSpan><h4>Playlists Artists</h4></HorizontalSpan>
             <HorizontalSpan>
@@ -63,8 +59,8 @@
             </HorizontalSpan>
            </span>
     <ul class="list">
-        {#each $playlistArtists as topArtist}
-            <PlaylistArtistsElement {topArtist} {trackSelections} {toastStore}/>
+        {#each playlistState.playlistArtists as topArtist}
+            <PlaylistArtistsElement {topArtist} {toastStore}/>
         {/each}
     </ul>
 {/if}

src/routes/playlists/edit/PlaylistArtistsElement.svelte

@@ -5,31 +5,27 @@
     import RemoveIcon from '~icons/ph/minus-circle-bold';
     import AddIcon from '~icons/ph/plus-circle-bold';
 
-    import type {TrackSelection} from "./trackSelection";
     import {addArtistTracks, getTrackCount, removeArtistTracks} from "./trackSelection";
     import type {ToastStore} from "@skeletonlabs/skeleton";
+    import {playlistState} from "./playlistState.svelte";
 
 
     interface Props {
         readonly topArtist: DeezerArtist;
-        readonly trackSelections: TrackSelection[];
         readonly toastStore: ToastStore;
     }
 
-    let { topArtist, trackSelections, toastStore }: Props = $props();
-
-    let trackCount = $derived(getTrackCount(topArtist.id, trackSelections))
+    let {topArtist, toastStore}: Props = $props();
 
+    let trackCount = $derived(getTrackCount(topArtist.id, playlistState.trackSelections))
     let addHover = $state(false)
     let removeHover = $state(false)
 
-    // $: {
-    //     console.log({addHover, topArtist})
-    // }
+
 </script>
 
 <li class:variant-ghost-success={addHover}
-    class:variant-ghost-error={removeHover} >
+    class:variant-ghost-error={removeHover}>
     <span class="flex flex-row justify-between w-full items-center gap-x-2">
         <a href={topArtist.link} title="open artist in Deezer web interface" class="w-1/3">
               <HorizontalSpan>
@@ -41,25 +37,25 @@
                <small title="artist has {trackCount} tracks in the playlist ">{trackCount} tracks in playlist</small>
         </span>
         <span class="w-1/4">
-               <small >{topArtist.nb_album} albums</small>
+               <small>{topArtist.nb_album} albums</small>
         </span>
-        <div class="btn-group-vertical btn btn-sm gap-y-1">
+        <span class="btn-group-vertical btn btn-sm gap-y-1">
             <button class="!p-0"
                     title="add all artist titles to the playlist"
                     onmouseenter={()=>addHover=true}
                     onmouseleave={()=>addHover=false}
-                    onclick={()=> addArtistTracks(topArtist, trackSelections,toastStore)}>
+                    onclick={()=> addArtistTracks(topArtist, playlistState.trackSelections,toastStore)}>
                 <AddIcon/>
             </button>
             <button class="!p-0"
                     title="deselect all artist titles from the playlist"
                     class:text-gray-500={trackCount===0}
                     onmouseenter={()=>removeHover=true}
                     onmouseleave={()=>removeHover=false}
-                    onclick={()=> removeArtistTracks(topArtist.id, trackSelections)}>
+                    onclick={()=> removeArtistTracks(topArtist.id, playlistState.trackSelections)}>
                 <RemoveIcon/>
             </button>
-        </div>
+        </span>
 
     </span>
 </li>

src/routes/playlists/edit/PlaylistTracks.svelte

@@ -18,12 +18,10 @@
 
 
     interface Props {
-        artists: DeezerArtist[];
         toastStore: ToastStore;
     }
 
-    let { artists = [], toastStore}: Props = $props();
-
+    let {toastStore}: Props = $props();
 
 
     function computeRowClass(trackSelection: TrackSelection): string {
@@ -156,7 +154,8 @@
                             onRemove={()=> removeArtistTracks(row.artist.id, playlistState.trackSelections)}>
                         <a href={row.artist.link} title="open artist in Deezer web interface">
                             <HorizontalSpan>
-                                <img class="largeonly" src={getArtist(row, artists)?.picture_small} alt="artist"/>
+                                <img class="largeonly"
+                                     src={getArtist(row, playlistState.playlistArtists)?.picture_small} alt="artist"/>
                                 <span class="whitespace-normal">{row.artist.name}</span>
                             </HorizontalSpan>
                         </a>

src/routes/playlists/edit/playlistState.svelte.ts

@@ -1,12 +1,14 @@
-import type {DeezerPlaylistDetails} from "$lib/DeezerApiModel";
+import type {DeezerArtist, DeezerPlaylistDetails} from "$lib/DeezerApiModel";
 import type {TrackSelection} from "./trackSelection";
 
 export const playlistState: {
     playlist: DeezerPlaylistDetails | undefined;
     trackSelections: TrackSelection[],
+    playlistArtists: DeezerArtist[],
     isUpdatable: boolean;
 } = $state({
     playlist: undefined,
     isUpdatable: false,
-    trackSelections: []
+    trackSelections: [],
+    playlistArtists: [],
 });

src/routes/playlists/edit/playlistUpdater.ts

@@ -8,11 +8,14 @@ import type {TrackSelection} from "./trackSelection";
 import type {UpdateTracksProgress} from "./updateTracksProgress";
 
 export async function savePlaylist(
-    playlist: DeezerPlaylistDetails,
+    playlist: DeezerPlaylistDetails | undefined,
     trackSelections: TrackSelection[],
     toastStore: ToastStore,
     updateTracksProgress: Writable<UpdateTracksProgress| undefined>,
 ) {
+    if (!playlist) {
+        return;
+    }
     const searchParams: DeezerSearchParams = {
         request_method: "POST",
     };