Show playlist panel after creating first playlist (#3044)

* Show playlist panel after creating first playlist

Kind of awkward if you get stuck on the very first screen in the app x:

* fixes

src/containers/AddToPlaylistMenu.tsx

@@ -32,7 +32,7 @@ function AddToPlaylistMenuContainer() {
     if ('error' in result) {
       throw result.error;
     }
-    return result.payload;
+    return result.payload.playlist;
   }, [dispatch]);
   const onSelect = useCallback((playlist: Playlist) => {
     if (isFavorite) {

src/reducers/playlists.ts

@@ -152,12 +152,18 @@ const createPlaylist = createAsyncThunk('playlists/create', async (name: string)
       createdAt: string,
       size: number,
     },
+    meta: {
+      active: boolean,
+    },
   }>(['/playlists', {
     method: 'post',
     data: { name },
   }]);
 
-  return response.data satisfies Playlist;
+  const playlist = response.data satisfies Playlist;
+  const { active } = response.meta;
+
+  return { playlist, active };
 });
 
 const deletePlaylist = createAsyncThunk('playlists/delete', async (playlistID: string) => {
@@ -584,11 +590,14 @@ const slice = createSlice({
       .addCase(createPlaylist.fulfilled, (state, action) => {
         delete state.playlists[action.meta.requestId];
 
-        const playlist = action.payload;
+        const { playlist, active } = action.payload;
         state.playlists[playlist._id] = playlist;
-        if (state.selectedPlaylistID === action.meta.requestId) {
+        if (state.selectedPlaylistID === action.meta.requestId || active) {
           state.selectedPlaylistID = playlist._id;
         }
+        if (active) {
+          state.activePlaylistID = playlist._id;
+        }
       })
       .addCase(renamePlaylist.fulfilled, (state, action) => {
         const playlist = state.playlists[action.payload._id];

src/sources/youtube/reducer.ts

@@ -31,7 +31,8 @@ const importPlaylist = createAsyncThunk('youtube/importPlaylist', async (
     data: { id: sourceID, name },
   }]);
 
-  api.dispatch(createPlaylist.fulfilled(playlist, api.requestId, name));
+  // TODO: `active: false` is definitely a lie here!
+  api.dispatch(createPlaylist.fulfilled({ playlist, active: false }, api.requestId, name));
 });
 
 const slice = createSlice({