fix album art res 0 and allow resizing volume bar

src/i18n/locales/en.json

@@ -621,6 +621,8 @@
         "useSystemTheme_description": "follow the system-defined light or dark preference",
         "volumeWheelStep": "volume wheel step",
         "volumeWheelStep_description": "the amount of volume to change when scrolling the mouse wheel on the volume slider",
+        "volumeWidth": "volume slider width",
+        "volumeWidth_description": "the width of the volume slider",
         "windowBarStyle": "window bar style",
         "windowBarStyle_description": "select the style of the window bar",
         "zoom": "zoom percentage",

src/renderer/features/player/components/right-controls.tsx

@@ -18,6 +18,7 @@ import {
     useHotkeySettings,
     useMuted,
     usePreviousSong,
+    useSettingsStore,
     useSidebarStore,
     useSpeed,
     useVolume,
@@ -54,6 +55,7 @@ export const RightControls = () => {
     } = useRightControls();
 
     const speed = useSpeed();
+    const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
 
     const updateRatingMutation = useSetRating({});
     const addToFavoritesMutation = useCreateFavorite({});
@@ -324,7 +326,7 @@ export const RightControls = () => {
                             min={0}
                             size={6}
                             value={volume}
-                            w="60px"
+                            w={volumeWidth}
                             onChange={handleVolumeSlider}
                             onWheel={handleVolumeWheel}
                         />

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

@@ -71,14 +71,15 @@ export const ControlSettings = () => {
                 <NumberInput
                     defaultValue={settings.albumArtRes || undefined}
                     max={2500}
-                    min={175}
                     placeholder="0"
                     rightSection="px"
+                    value={settings.albumArtRes ?? 0}
                     width={75}
                     onBlur={(e) => {
-                        const newVal = e.currentTarget.value
-                            ? Math.min(Math.max(Number(e.currentTarget.value), 175), 2500)
-                            : null;
+                        const newVal =
+                            e.currentTarget.value !== '0'
+                                ? Math.min(Math.max(Number(e.currentTarget.value), 175), 2500)
+                                : null;
                         setSettings({ general: { ...settings, albumArtRes: newVal } });
                     }}
                 />
@@ -322,6 +323,29 @@ export const ControlSettings = () => {
             isHidden: false,
             title: t('setting.volumeWheelStep', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <NumberInput
+                    defaultValue={settings.volumeWidth}
+                    max={180}
+                    min={30}
+                    placeholder="0"
+                    rightSection="px"
+                    width={75}
+                    onBlur={(e) => {
+                        setSettings({
+                            general: { ...settings, volumeWidth: Number(e.currentTarget.value) },
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.volumeWidth', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.volumeWidth', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Switch

src/renderer/store/settings.store.ts

@@ -220,6 +220,7 @@ export interface SettingsState {
         themeDark: AppTheme;
         themeLight: AppTheme;
         volumeWheelStep: number;
+        volumeWidth: number;
         zoomFactor: number;
     };
     hotkeys: {
@@ -344,6 +345,7 @@ const initialState: SettingsState = {
         themeDark: AppTheme.DEFAULT_DARK,
         themeLight: AppTheme.DEFAULT_LIGHT,
         volumeWheelStep: 5,
+        volumeWidth: 60,
         zoomFactor: 100,
     },
     hotkeys: {