feat: updates

packages/web/components/ContextMenus/ArtistContextMenu.tsx

@@ -1,6 +1,4 @@
-import useUserArtists, {
-  useMutationLikeAArtist,
-} from '@/web/api/hooks/useUserArtists'
+import useUserArtists, { useMutationLikeAArtist } from '@/web/api/hooks/useUserArtists'
 import contextMenus, { closeContextMenu } from '@/web/states/contextMenus'
 import { AnimatePresence } from 'framer-motion'
 import { useMemo, useState } from 'react'
@@ -13,8 +11,7 @@ import BasicContextMenu from './BasicContextMenu'
 const ArtistContextMenu = () => {
   const { t } = useTranslation()
 
-  const { cursorPosition, type, dataSourceID, target, options } =
-    useSnapshot(contextMenus)
+  const { cursorPosition, type, dataSourceID, target, options } = useSnapshot(contextMenus)
   const likeAArtist = useMutationLikeAArtist()
   const [, copyToClipboard] = useCopyToClipboard()
 
@@ -63,19 +60,15 @@ const ArtistContextMenu = () => {
                   type: 'item',
                   label: t`context-menu.copy-netease-link`,
                   onClick: () => {
-                    copyToClipboard(
-                      `https://music.163.com/#/artist?id=${dataSourceID}`
-                    )
+                    copyToClipboard(`https://music.163.com/#/artist?id=${dataSourceID}`)
                     toast.success(t`toasts.copied`)
                   },
                 },
                 {
                   type: 'item',
-                  label: 'Copy YPM Link',
+                  label: t`context-menu.copy-r3play-link`,
                   onClick: () => {
-                    copyToClipboard(
-                      `${window.location.origin}/artist/${dataSourceID}`
-                    )
+                    copyToClipboard(`${window.location.origin}/artist/${dataSourceID}`)
                     toast.success(t`toasts.copied`)
                   },
                 },

packages/web/components/ContextMenus/BasicContextMenu.tsx

@@ -2,7 +2,7 @@ import { useLayoutEffect, useRef, useState } from 'react'
 import { useClickAway } from 'react-use'
 import useLockMainScroll from '@/web/hooks/useLockMainScroll'
 import useMeasure from 'react-use-measure'
-import { ContextMenuItem } from './MenuItem'
+import { ContextMenuItem } from './types'
 import MenuPanel from './MenuPanel'
 import { createPortal } from 'react-dom'
 import { ContextMenuPosition } from './types'

packages/web/components/ContextMenus/MenuPanel.tsx

@@ -1,11 +1,5 @@
 import { css, cx } from '@emotion/css'
-import {
-  ForwardedRef,
-  forwardRef,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
+import { ForwardedRef, forwardRef, useLayoutEffect, useRef, useState } from 'react'
 import { motion } from 'framer-motion'
 import MenuItem from './MenuItem'
 import { ContextMenuItem, ContextMenuPosition } from './types'
@@ -36,7 +30,7 @@ const MenuPanel = forwardRef(
       <div
         ref={ref}
         className={cx(
-          'fixed select-none',
+          'app-region-no-drag fixed select-none',
           isSubmenu ? 'submenu z-30 px-1' : 'z-20'
         )}
         style={{ left: position.x, top: position.y }}
@@ -77,9 +71,7 @@ const MenuPanel = forwardRef(
 
         {/* Submenu */}
         <SubMenu
-          items={
-            submenuProps?.index ? items[submenuProps?.index]?.items : undefined
-          }
+          items={submenuProps?.index ? items[submenuProps?.index]?.items : undefined}
           itemRect={submenuProps?.itemRect}
           onClose={onClose}
         />
@@ -118,9 +110,7 @@ const SubMenu = ({
     const x = isRightSide ? item.x + item.width : item.x - submenu.width
 
     const isTopSide = item.y - 10 + submenu.height <= window.innerHeight
-    const y = isTopSide
-      ? item.y - 10
-      : item.y + item.height + 10 - submenu.height
+    const y = isTopSide ? item.y - 10 : item.y + item.height + 10 - submenu.height
 
     const transformOriginTable = {
       top: {
@@ -137,9 +127,7 @@ const SubMenu = ({
       x,
       y,
       transformOrigin:
-        transformOriginTable[isTopSide ? 'top' : 'bottom'][
-          isRightSide ? 'right' : 'left'
-        ],
+        transformOriginTable[isTopSide ? 'top' : 'bottom'][isRightSide ? 'right' : 'left'],
     })
   }, [itemRect])
 

packages/web/components/ContextMenus/TrackContextMenu.tsx

@@ -15,8 +15,7 @@ const TrackContextMenu = () => {
 
   const [, copyToClipboard] = useCopyToClipboard()
 
-  const { type, dataSourceID, target, cursorPosition, options } =
-    useSnapshot(contextMenus)
+  const { type, dataSourceID, target, cursorPosition, options } = useSnapshot(contextMenus)
 
   return (
     <AnimatePresence>
@@ -84,19 +83,15 @@ const TrackContextMenu = () => {
                   type: 'item',
                   label: t`context-menu.copy-netease-link`,
                   onClick: () => {
-                    copyToClipboard(
-                      `https://music.163.com/#/album?id=${dataSourceID}`
-                    )
+                    copyToClipboard(`https://music.163.com/#/album?id=${dataSourceID}`)
                     toast.success(t`toasts.copied`)
                   },
                 },
                 {
                   type: 'item',
-                  label: 'Copy YPM Link',
+                  label: t`context-menu.copy-r3play-link`,
                   onClick: () => {
-                    copyToClipboard(
-                      `${window.location.origin}/album/${dataSourceID}`
-                    )
+                    copyToClipboard(`${window.location.origin}/album/${dataSourceID}`)
                     toast.success(t`toasts.copied`)
                   },
                 },

packages/web/components/ContextMenus/types.ts

@@ -6,7 +6,7 @@ export interface ContextMenuPosition {
 
 export interface ContextMenuItem {
   type: 'item' | 'submenu' | 'divider'
-  label?: string
+  label?: string | null
   onClick?: (e: MouseEvent) => void
   items?: ContextMenuItem[]
 }