diff --git a/src/renderer/features/context-menu/context-menu-items.tsx b/src/renderer/features/context-menu/context-menu-items.tsx index 014a64f6..a0eefa0b 100644 --- a/src/renderer/features/context-menu/context-menu-items.tsx +++ b/src/renderer/features/context-menu/context-menu-items.tsx @@ -3,7 +3,7 @@ import { SetContextMenuItems } from '/@/renderer/features/context-menu/events'; export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [ { id: 'play' }, { id: 'playLast' }, - { id: 'playNext' }, + { divider: true, id: 'playNext' }, { disabled: true, id: 'addToPlaylist' }, { disabled: true, id: 'addToFavorites' }, { disabled: true, id: 'removeFromFavorites' }, @@ -13,7 +13,7 @@ export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [ export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [ { id: 'play' }, { id: 'playLast' }, - { id: 'playNext' }, + { divider: true, id: 'playNext' }, { disabled: true, id: 'addToPlaylist' }, { disabled: true, id: 'addToFavorites' }, { disabled: true, id: 'removeFromFavorites' }, @@ -23,7 +23,7 @@ export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [ export const ARTIST_CONTEXT_MENU_ITEMS: SetContextMenuItems = [ { id: 'play' }, { id: 'playLast' }, - { id: 'playNext' }, + { divider: true, id: 'playNext' }, { disabled: true, id: 'addToPlaylist' }, { disabled: true, id: 'addToFavorites' }, { disabled: true, id: 'removeFromFavorites' }, diff --git a/src/renderer/features/context-menu/context-menu-provider.tsx b/src/renderer/features/context-menu/context-menu-provider.tsx index 6fd306eb..0ac9d6d9 100644 --- a/src/renderer/features/context-menu/context-menu-provider.tsx +++ b/src/renderer/features/context-menu/context-menu-provider.tsx @@ -1,6 +1,6 @@ -import { Stack } from '@mantine/core'; +import { Divider, Stack } from '@mantine/core'; import { useClickOutside, useResizeObserver, useSetState, useViewportSize } from '@mantine/hooks'; -import { createContext, useState } from 'react'; +import { createContext, Fragment, useState } from 'react'; import { ContextMenu, ContextMenuButton } from '/@/renderer/components'; import { OpenContextMenuProps, @@ -48,7 +48,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => { const handlePlayQueueAdd = useHandlePlayQueueAdd(); const openContextMenu = (args: OpenContextMenuProps) => { - console.log('args.data', args.data); const { xPos, yPos, menuItems, data, type } = args; const shouldReverseY = yPos + menuRect.height > viewport.height; @@ -114,12 +113,12 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => { }, playLast: { id: 'playLast', - label: 'Play Last', + label: 'Add to queue (last)', onClick: () => handlePlay(Play.LAST), }, playNext: { id: 'playNext', - label: 'Play Next', + label: 'Add to queue (next)', onClick: () => handlePlay(Play.NEXT), }, removeFromFavorites: { @@ -151,14 +150,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => { > {ctx.menuItems?.map((item) => { return ( - - {contextMenuItems[item.id].label} - + + + {contextMenuItems[item.id as keyof typeof contextMenuItems].label} + + {item.divider && } + ); })} diff --git a/src/renderer/features/context-menu/events.ts b/src/renderer/features/context-menu/events.ts index 60396b4d..460a2807 100644 --- a/src/renderer/features/context-menu/events.ts +++ b/src/renderer/features/context-menu/events.ts @@ -25,6 +25,7 @@ export type ContextMenuItem = export type SetContextMenuItems = { disabled?: boolean; + divider?: boolean; id: ContextMenuItem; onClick?: () => void; }[];