fix playlist item context menu

Team-BTMC · Nov 23, 2024 · 28db214 · 28db214
1 parent 54d3978
commit 28db214
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 89 deletions.
diff --git a/src/renderer/src/components/playlist/context-menu-items/DeletePlaylist.tsx b/src/renderer/src/components/playlist/context-menu-items/DeletePlaylist.tsx
diff --git a/src/renderer/src/components/playlist/context-menu-items/RemoveFromPlaylist.tsx b/src/renderer/src/components/playlist/context-menu-items/RemoveFromPlaylist.tsx
diff --git a/src/renderer/src/components/playlist/context-menu-items/RenamePlaylist.tsx b/src/renderer/src/components/playlist/context-menu-items/RenamePlaylist.tsx
diff --git a/src/renderer/src/components/playlist/playlist-item/PlaylistItem.tsx b/src/renderer/src/components/playlist/playlist-item/PlaylistItem.tsx
@@ -1,21 +1,19 @@
 import SongImage from "../../song/SongImage";
-import DeletePlaylist from "../context-menu-items/DeletePlaylist";
-import RenamePlaylist from "../context-menu-items/RenamePlaylist";
 import {
+  deletePlaylist,
   PLAYLIST_SCENE_SONGS,
   setActivePlaylistName,
   setPlaylistActiveScene,
 } from "../playlist.utils";
 import { renamePlaylist } from "../playlist.utils";
 import { getSongImage } from "./playlist-item.utils";
+import DropdownList from "@renderer/components/dropdown-list/DropdownList";
 import Popover from "@renderer/components/popover/Popover";
-import SongContextMenu, {
-  ignoreClickInContextMenu,
-} from "@renderer/components/song/context-menu/SongContextMenu";
+import { ignoreClickInContextMenu } from "@renderer/components/song/context-menu/SongContextMenu";
 import Impulse from "@renderer/lib/Impulse";
 import draggable from "@renderer/lib/draggable/draggable";
-import { EllipsisVerticalIcon } from "lucide-solid";
-import { Component, createSignal, Match, onMount, Switch } from "solid-js";
+import { EllipsisVerticalIcon, ListXIcon, PencilLineIcon } from "lucide-solid";
+import { Component, createSignal, Match, onMount, Setter, Switch } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Playlist } from "src/@types";
 import { twMerge } from "tailwind-merge";
@@ -68,10 +66,11 @@ const PlaylistItem: Component<PlaylistItemProps> = (props) => {
           }}
         >
           {/* can't pass this as a prop like in song-item because i need the editMode signal */}
-          <SongContextMenu>
-            <RenamePlaylist setEdit={setEditMode} />
-            <DeletePlaylist name={props.playlist.name} reset={props.reset} />
-          </SongContextMenu>
+          <PlaylistItemContextMenuContent
+            editMode={setEditMode}
+            reset={props.reset}
+            playlist={props.playlist}
+          />
         </Popover.Content>
       </Portal>
       <div
@@ -134,4 +133,33 @@ const PlaylistItem: Component<PlaylistItemProps> = (props) => {
   );
 };
 
+type PlaylistItemContextMenuContentProps = {
+  playlist: Playlist;
+  reset: Impulse;
+  editMode: Setter<boolean>;
+};
+const PlaylistItemContextMenuContent: Component<PlaylistItemContextMenuContentProps> = (props) => {
+  return (
+    <DropdownList class="w-40">
+      <DropdownList.Item
+        onClick={() => {
+          props.editMode(true);
+        }}
+      >
+        <span>Rename playlist</span>
+        <PencilLineIcon class="text-subtext" size={20} />
+      </DropdownList.Item>
+      <DropdownList.Item
+        onClick={() => {
+          deletePlaylist(props.playlist.name, props.reset);
+        }}
+        class="text-danger"
+      >
+        <span>Delete playlist</span>
+        <ListXIcon class="opacity-80" size={20} />
+      </DropdownList.Item>
+    </DropdownList>
+  );
+};
+
 export default PlaylistItem;
diff --git a/src/renderer/src/components/playlist/playlist-song-list/PlaylistSongList.tsx b/src/renderer/src/components/playlist/playlist-song-list/PlaylistSongList.tsx
@@ -94,7 +94,7 @@ const PlaylistSongList: Component<PlaylistSongListProps> = (props) => {
                     class="ml-2 rounded-lg"
                     onClick={() => deleteSong(props.playlistName, s)}
                   >
-                    <Trash2Icon class="text-danger" />
+                    <Trash2Icon class="text-danger opacity-80" />
                   </Button>
                 </Show>
               </div>

diff --git a/src/renderer/src/components/song/context-menu/items/PlaylistChooser.tsx b/src/renderer/src/components/song/context-menu/items/PlaylistChooser.tsx
@@ -22,7 +22,7 @@ const PlaylistChooser: Component<PlaylistChooserProps> = (props) => {
     }
     addNotice({
       title: "Song added",
-      description: "Successfully added song to playlist!",
+      description: "Successfully added song to playlist " + name + "!",
       variant: "success",
       icon: <BadgeCheckIcon size={20} />,
     });
@@ -37,7 +37,7 @@ const PlaylistChooser: Component<PlaylistChooserProps> = (props) => {
   };
 
   return (
-    <DropdownList class="w-40">
+    <DropdownList class="max-h-[95vh] w-40 overflow-auto [scrollbar-width:none]">
       <For
         fallback={<DropdownList.Item disabled={true}>No playlists...</DropdownList.Item>}
         each={props.playlistNames}
@@ -60,7 +60,7 @@ const PlaylistChooser: Component<PlaylistChooserProps> = (props) => {
           >
             <span>{child}</span>
             <Show when={isInPlaylist(props.song, props.playlistNames[index()])}>
-              <CheckIcon size={20} />
+              <CheckIcon class="text-subtext" size={20} />
             </Show>
           </DropdownList.Item>
         )}