allow hiding context menu items

src/i18n/locales/en.json

@@ -461,6 +461,8 @@
         "clearQueryCache": "clear feishin cache",
         "clearQueryCache_description": "a 'soft clear' of feishin. this will refresh playlists, track metadata, and reset saved lyrics. settings, server credentials and cached images are preserved",
         "clearCacheSuccess": "cache cleared successfully",
+        "contextMenu": "context menu (right click) configuration",
+        "contextMenu_description": "allows you to hide items that are shown in the menu when you right click on an item. items that are unchecked will be hidden",
         "crossfadeDuration": "crossfade duration",
         "crossfadeDuration_description": "sets the duration of the crossfade effect",
         "crossfadeStyle": "crossfade style",

src/renderer/features/context-menu/context-menu-provider.tsx

@@ -57,6 +57,7 @@ import {
     useCurrentServer,
     usePlayerStore,
     useQueueControls,
+    useSettingsStore,
 } from '/@/renderer/store';
 import { usePlaybackType } from '/@/renderer/store/settings.store';
 import { Play, PlaybackType } from '/@/renderer/types';
@@ -99,6 +100,7 @@ export interface ContextMenuProviderProps {
 }
 
 export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
+    const disabledItems = useSettingsStore((state) => state.general.disabledContextMenu);
     const { t } = useTranslation();
     const [opened, setOpened] = useState(false);
     const clickOutsideRef = useClickOutside(() => setOpened(false));
@@ -927,7 +929,8 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                                 >
                                     {ctx.menuItems?.map((item) => {
                                         return (
-                                            !contextMenuItems[item.id].disabled && (
+                                            !contextMenuItems[item.id].disabled &&
+                                            !disabledItems[item.id] && (
                                                 <Fragment key={`context-menu-${item.id}`}>
                                                     {item.children ? (
                                                         <HoverCard

src/renderer/features/context-menu/events.ts

@@ -39,6 +39,30 @@ export type ContextMenuItemType =
     | 'playSimilarSongs'
     | 'download';
 
+export const CONFIGURABLE_CONTEXT_MENU_ITEMS: ContextMenuItemType[] = [
+    'moveToBottomOfQueue',
+    'moveToTopOfQueue',
+    'play',
+    'playLast',
+    'playNext',
+    'playSimilarSongs',
+    'addToPlaylist',
+    'removeFromPlaylist',
+    'addToFavorites',
+    'removeFromFavorites',
+    'setRating',
+    'download',
+    'shareItem',
+    'showDetails',
+];
+
+export const CONTEXT_MENU_ITEM_MAPPING: { [k in ContextMenuItemType]?: string } = {
+    moveToBottomOfQueue: 'moveToBottom',
+    moveToTopOfQueue: 'moveToTop',
+    playLast: 'addLast',
+    playNext: 'addNext',
+};
+
 export type SetContextMenuItems = {
     children?: boolean;
     disabled?: boolean;

src/renderer/features/settings/components/general/context-menu-settings.tsx

@@ -0,0 +1,58 @@
+import { useTranslation } from 'react-i18next';
+import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
+import { useState } from 'react';
+import { Button, Checkbox } from '/@/renderer/components';
+import { Divider, Stack } from '@mantine/core';
+import {
+    CONFIGURABLE_CONTEXT_MENU_ITEMS,
+    CONTEXT_MENU_ITEM_MAPPING,
+} from '/@/renderer/features/context-menu';
+import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
+
+export const ContextMenuSettings = () => {
+    const disabledItems = useSettingsStore((state) => state.general.disabledContextMenu);
+    const { toggleContextMenuItem } = useSettingsStoreActions();
+    const [open, setOpen] = useState(false);
+    const { t } = useTranslation();
+
+    return (
+        <>
+            <SettingsOptions
+                control={
+                    <Button
+                        compact
+                        variant="filled"
+                        onClick={() => setOpen(!open)}
+                    >
+                        {t(open ? 'common.close' : 'common.edit', { postProcess: 'titleCase' })}
+                    </Button>
+                }
+                description={t('setting.contextMenu', {
+                    context: 'description',
+                    postProcess: 'sentenceCase',
+                })}
+                title={t('setting.contextMenu', {
+                    postProcess: 'sentenceCase',
+                })}
+            />
+            {open && (
+                <Stack>
+                    {CONFIGURABLE_CONTEXT_MENU_ITEMS.map((item) => (
+                        <Checkbox
+                            key={item}
+                            checked={!disabledItems[item]}
+                            label={t(
+                                `page.contextMenu.${CONTEXT_MENU_ITEM_MAPPING[item] || item}`,
+                                {
+                                    postProcess: 'sentenceCase',
+                                },
+                            )}
+                            onChange={() => toggleContextMenuItem(item)}
+                        />
+                    ))}
+                </Stack>
+            )}
+            <Divider />
+        </>
+    );
+};

src/renderer/features/settings/components/general/general-tab.tsx

@@ -8,6 +8,7 @@ import { CacheSettings } from '/@/renderer/features/settings/components/window/c
 import isElectron from 'is-electron';
 import { HomeSettings } from '/@/renderer/features/settings/components/general/home-settings';
 import { SidebarReorder } from '/@/renderer/features/settings/components/general/sidebar-reorder';
+import { ContextMenuSettings } from '/@/renderer/features/settings/components/general/context-menu-settings';
 
 export const GeneralTab = () => {
     return (
@@ -18,6 +19,7 @@ export const GeneralTab = () => {
             <HomeSettings />
             <SidebarReorder />
             <SidebarSettings />
+            <ContextMenuSettings />
             {isElectron() && <RemoteSettings />}
             <CacheSettings />
         </Stack>

src/renderer/store/settings.store.ts

@@ -24,6 +24,7 @@ import { randomString } from '/@/renderer/utils';
 import i18n from '/@/i18n/i18n';
 import { usePlayerStore } from '/@/renderer/store/player.store';
 import { mergeOverridingColumns } from '/@/renderer/store/utils';
+import type { ContextMenuItemType } from '/@/renderer/features/context-menu';
 
 const utils = isElectron() ? window.electron.utils : null;
 
@@ -196,6 +197,7 @@ export interface SettingsState {
         albumArtRes?: number | null;
         buttonSize: number;
         defaultFullPlaylist: boolean;
+        disabledContextMenu: { [k in ContextMenuItemType]?: boolean };
         doubleClickQueueAll: boolean;
         externalLinks: boolean;
         followSystemTheme: boolean;
@@ -293,6 +295,7 @@ export interface SettingsSlice extends SettingsState {
         setSettings: (data: Partial<SettingsState>) => void;
         setSidebarItems: (items: SidebarItemType[]) => void;
         setTable: (type: TableType, data: DataTableProps) => void;
+        toggleContextMenuItem: (item: ContextMenuItemType) => void;
         toggleSidebarCollapseShare: () => void;
     };
 }
@@ -324,6 +327,7 @@ const initialState: SettingsState = {
         albumArtRes: undefined,
         buttonSize: 20,
         defaultFullPlaylist: true,
+        disabledContextMenu: {},
         doubleClickQueueAll: true,
         externalLinks: true,
         followSystemTheme: false,
@@ -648,6 +652,12 @@ export const useSettingsStore = create<SettingsSlice>()(
                             state.tables[type] = data;
                         });
                     },
+                    toggleContextMenuItem: (item: ContextMenuItemType) => {
+                        set((state) => {
+                            state.general.disabledContextMenu[item] =
+                                !state.general.disabledContextMenu[item];
+                        });
+                    },
                     toggleSidebarCollapseShare: () => {
                         set((state) => {
                             state.general.sidebarCollapseShared =