update

packages/web/pages/Settings/Controls.tsx

@@ -39,7 +39,7 @@ export function Select<T extends string>({
       <select
         onChange={e => onChange(e.target.value as T)}
         value={value}
-        className='h-full w-full appearance-none bg-transparent py-1 pr-7 pl-3 focus:outline-none'
+        className='h-full w-full appearance-none bg-transparent py-1 pl-3 pr-7 focus:outline-none'
       >
         {options.map(option => (
           <option key={option.value} value={option.value}>
@@ -71,7 +71,7 @@ export function Input({
       <div className='mb-1 text-14 font-medium text-white/30'>Host</div>
       <div className='inline-block rounded-md bg-neutral-800 font-medium text-neutral-400'>
         <input
-          className='appearance-none bg-transparent py-1 px-3'
+          className='appearance-none bg-transparent px-3 py-1'
           onChange={e => onChange(e.target.value)}
           {...{ type, value }}
         />
@@ -80,11 +80,20 @@ export function Input({
   )
 }
 
-export function Button({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
+export function Button({
+  disalbed: disabled,
+  children,
+  onClick,
+}: {
+  disalbed?: boolean
+  children: React.ReactNode
+  onClick: () => void
+}) {
   return (
     <button
       onClick={onClick}
-      className='rounded-md bg-neutral-800 py-1 px-3 font-medium text-neutral-400 transition-colors duration-300 hover:bg-neutral-700 hover:text-neutral-300'
+      disabled={disabled}
+      className='rounded-md bg-neutral-800 px-3 py-1 font-medium text-neutral-400 transition-colors duration-300 hover:bg-neutral-700 hover:text-neutral-300 disabled:opacity-10'
     >
       {children}
     </button>
@@ -104,5 +113,9 @@ export function Option({ children }: { children: React.ReactNode }) {
 }
 
 export function OptionText({ children }: { children: React.ReactNode }) {
-  return <div className='text-16 font-medium text-neutral-400'>{children}</div>
+  return (
+    <div className='line-clamp-1 flex-shrink-0 text-16 font-medium text-neutral-400'>
+      {children}
+    </div>
+  )
 }

packages/web/pages/Settings/Player.tsx

@@ -6,12 +6,14 @@ import Slider from '@/web/components/Slider'
 import { cx } from '@emotion/css'
 import player from '@/web/states/player'
 import { ceil } from 'lodash'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { IpcChannels } from '@/shared/IpcChannels'
+import { useCopyToClipboard } from 'react-use'
 
 function Player() {
   return (
     <div className={cx(`space-y-7`)}>
       <FindTrackOnYouTube />
-      <VolumeSlider />
     </div>
   )
 }
@@ -59,31 +61,4 @@ function FindTrackOnYouTube() {
   )
 }
 
-function VolumeSlider() {
-  const { t } = useTranslation()
-  const { volume } = useSnapshot(player)
-  const onChange = (volume: number) => {
-    player.volume = volume
-  }
-  return (
-    <div>
-      <BlockTitle>{t(`settings.volume-control`)}</BlockTitle>
-      <div className='pt-2 pr-1'>
-        <Slider
-          value={volume}
-          min={0}
-          max={1}
-          onChange={onChange}
-          alwaysShowTrack
-          alwaysShowThumb
-        />
-      </div>
-      <div className='mt-1 flex justify-between text-14 font-bold text-neutral-100'>
-        <span>0</span>
-        <span>{ceil(volume * 100)}</span>
-      </div>
-    </div>
-  )
-}
-
 export default Player

packages/web/pages/Settings/Settings.tsx

@@ -11,7 +11,7 @@ import PageTransition from '@/web/components/PageTransition'
 import { ease } from '@/web/utils/const'
 
 export const categoryIds = ['general', 'appearance', 'player', 'lab', 'about'] as const
-export type Category = typeof categoryIds[number]
+export type Category = (typeof categoryIds)[number]
 
 const Sidebar = ({
   activeCategory,
@@ -42,7 +42,7 @@ const Sidebar = ({
         initial={{ y: 11.5 }}
         animate={indicatorAnimation}
         transition={{ type: 'spring', duration: 0.6, bounce: 0.36 }}
-        className='absolute top-0 left-3 mr-2 h-4 w-1 rounded-full bg-brand-700'
+        className='absolute left-3 top-0 mr-2 h-4 w-1 rounded-full bg-brand-700'
       ></motion.div>
 
       {categories.map(category => (