Lint all files

src/renderer/hooks/use-container-query.ts

@@ -1,21 +1,21 @@
 import { useElementSize } from '@mantine/hooks';
 
 interface UseContainerQueryProps {
-  lg?: number;
-  md?: number;
-  sm?: number;
-  xl?: number;
+    lg?: number;
+    md?: number;
+    sm?: number;
+    xl?: number;
 }
 
 export const useContainerQuery = (props?: UseContainerQueryProps) => {
-  const { lg, md, sm, xl } = props || {};
-  const { ref, width, height } = useElementSize();
+    const { lg, md, sm, xl } = props || {};
+    const { ref, width, height } = useElementSize();
 
-  const isXs = width >= 0;
-  const isSm = width >= (sm || 600);
-  const isMd = width >= (md || 768);
-  const isLg = width >= (lg || 1200);
-  const isXl = width >= (xl || 1500);
+    const isXs = width >= 0;
+    const isSm = width >= (sm || 600);
+    const isMd = width >= (md || 768);
+    const isLg = width >= (lg || 1200);
+    const isXl = width >= (xl || 1500);
 
-  return { height, isLg, isMd, isSm, isXl, isXs, ref, width };
+    return { height, isLg, isMd, isSm, isXl, isXs, ref, width };
 };

src/renderer/hooks/use-fast-average-color.tsx

@@ -2,41 +2,40 @@ import { useEffect, useState } from 'react';
 import { FastAverageColor } from 'fast-average-color';
 
 export const useFastAverageColor = (
-  src?: string | null,
-  srcLoaded?: boolean,
-  aglorithm?: 'dominant' | 'simple' | 'sqrt',
+    src?: string | null,
+    srcLoaded?: boolean,
+    aglorithm?: 'dominant' | 'simple' | 'sqrt',
 ) => {
-  const [color, setColor] = useState<string | undefined>(undefined);
+    const [color, setColor] = useState<string | undefined>(undefined);
 
-  useEffect(() => {
-    const fac = new FastAverageColor();
+    useEffect(() => {
+        const fac = new FastAverageColor();
 
-    if (src && srcLoaded) {
-      fac
-        .getColorAsync(src, {
-          algorithm: aglorithm || 'dominant',
-          ignoredColor: [
-            [255, 255, 255, 255, 55], // White
-            [0, 0, 0, 255, 20], // Black
-            [0, 0, 0, 0, 20], // Transparent
-          ],
-          mode: 'speed',
-        })
-        .then((color) => {
-          return setColor(color.rgb);
-        })
-        .catch((e) => {
-          console.log('Error fetching average color', e);
-          return setColor('rgba(0, 0, 0, 0)');
-        });
-    } else if (srcLoaded) {
-      return setColor('var(--placeholder-bg)');
-    }
+        if (src && srcLoaded) {
+            fac.getColorAsync(src, {
+                algorithm: aglorithm || 'dominant',
+                ignoredColor: [
+                    [255, 255, 255, 255, 55], // White
+                    [0, 0, 0, 255, 20], // Black
+                    [0, 0, 0, 0, 20], // Transparent
+                ],
+                mode: 'speed',
+            })
+                .then((color) => {
+                    return setColor(color.rgb);
+                })
+                .catch((e) => {
+                    console.log('Error fetching average color', e);
+                    return setColor('rgba(0, 0, 0, 0)');
+                });
+        } else if (srcLoaded) {
+            return setColor('var(--placeholder-bg)');
+        }
 
-    return () => {
-      fac.destroy();
-    };
-  }, [aglorithm, srcLoaded, src]);
+        return () => {
+            fac.destroy();
+        };
+    }, [aglorithm, srcLoaded, src]);
 
-  return color;
+    return color;
 };

src/renderer/hooks/use-hide-scrollbar.ts

@@ -2,24 +2,24 @@ import { useEffect, useState } from 'react';
 import { useTimeout } from '@mantine/hooks';
 
 export const useHideScrollbar = (timeout: number) => {
-  const [hideScrollbar, setHideScrollbar] = useState(false);
-  const { start, clear } = useTimeout(() => setHideScrollbar(true), timeout);
+    const [hideScrollbar, setHideScrollbar] = useState(false);
+    const { start, clear } = useTimeout(() => setHideScrollbar(true), timeout);
 
-  // Automatically hide the scrollbar after the timeout duration
-  useEffect(() => {
-    start();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    // Automatically hide the scrollbar after the timeout duration
+    useEffect(() => {
+        start();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-  const hideScrollbarElementProps = {
-    onMouseEnter: () => {
-      setHideScrollbar(false);
-      clear();
-    },
-    onMouseLeave: () => {
-      start();
-    },
-  };
+    const hideScrollbarElementProps = {
+        onMouseEnter: () => {
+            setHideScrollbar(false);
+            clear();
+        },
+        onMouseLeave: () => {
+            start();
+        },
+    };
 
-  return { hideScrollbarElementProps, isScrollbarHidden: hideScrollbar };
+    return { hideScrollbarElementProps, isScrollbarHidden: hideScrollbar };
 };

src/renderer/hooks/use-is-mounted.ts

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 
 export const useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
 
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
 
-  return isMounted;
+    return isMounted;
 };

src/renderer/hooks/use-should-pad-titlebar.tsx

@@ -5,19 +5,19 @@ import { useSidebarRightExpanded, useGeneralSettings, useWindowSettings } from '
 import { Platform } from '/@/renderer/types';
 
 export const useShouldPadTitlebar = () => {
-  const location = useLocation();
-  const isSidebarExpanded = useSidebarRightExpanded();
-  const isQueuePage = location.pathname === AppRoute.NOW_PLAYING;
-  const { sideQueueType } = useGeneralSettings();
-  const { windowBarStyle } = useWindowSettings();
+    const location = useLocation();
+    const isSidebarExpanded = useSidebarRightExpanded();
+    const isQueuePage = location.pathname === AppRoute.NOW_PLAYING;
+    const { sideQueueType } = useGeneralSettings();
+    const { windowBarStyle } = useWindowSettings();
 
-  const conditions = [
-    isElectron(),
-    windowBarStyle === Platform.WEB,
-    !(isSidebarExpanded && sideQueueType === 'sideQueue' && !isQueuePage),
-  ];
+    const conditions = [
+        isElectron(),
+        windowBarStyle === Platform.WEB,
+        !(isSidebarExpanded && sideQueueType === 'sideQueue' && !isQueuePage),
+    ];
 
-  const shouldPadTitlebar = conditions.every((condition) => condition);
+    const shouldPadTitlebar = conditions.every((condition) => condition);
 
-  return shouldPadTitlebar;
+    return shouldPadTitlebar;
 };

src/renderer/hooks/use-theme.ts

@@ -3,40 +3,40 @@ import { useSettingsStore } from '/@/renderer/store/settings.store';
 import { AppTheme } from '/@/renderer/themes/types';
 
 export const THEME_DATA = [
-  { label: 'Default Dark', type: 'dark', value: AppTheme.DEFAULT_DARK },
-  { label: 'Default Light', type: 'light', value: AppTheme.DEFAULT_LIGHT },
+    { label: 'Default Dark', type: 'dark', value: AppTheme.DEFAULT_DARK },
+    { label: 'Default Light', type: 'light', value: AppTheme.DEFAULT_LIGHT },
 ];
 
 export const useTheme = () => {
-  const getCurrentTheme = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
-  const [isDarkTheme, setIsDarkTheme] = useState(getCurrentTheme());
-  const { followSystemTheme, theme, themeDark, themeLight } = useSettingsStore(
-    (state) => state.general,
-  );
+    const getCurrentTheme = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const [isDarkTheme, setIsDarkTheme] = useState(getCurrentTheme());
+    const { followSystemTheme, theme, themeDark, themeLight } = useSettingsStore(
+        (state) => state.general,
+    );
 
-  const mqListener = (e: any) => {
-    setIsDarkTheme(e.matches);
-  };
+    const mqListener = (e: any) => {
+        setIsDarkTheme(e.matches);
+    };
 
-  const getTheme = () => {
-    if (followSystemTheme) {
-      return isDarkTheme ? themeDark : themeLight;
-    }
+    const getTheme = () => {
+        if (followSystemTheme) {
+            return isDarkTheme ? themeDark : themeLight;
+        }
 
-    return theme;
-  };
+        return theme;
+    };
 
-  const appTheme = getTheme();
+    const appTheme = getTheme();
 
-  useEffect(() => {
-    const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
-    darkThemeMq.addListener(mqListener);
-    return () => darkThemeMq.removeListener(mqListener);
-  }, []);
+    useEffect(() => {
+        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
+        darkThemeMq.addListener(mqListener);
+        return () => darkThemeMq.removeListener(mqListener);
+    }, []);
 
-  useEffect(() => {
-    document.body.setAttribute('data-theme', appTheme);
-  }, [appTheme]);
+    useEffect(() => {
+        document.body.setAttribute('data-theme', appTheme);
+    }, [appTheme]);
 
-  return THEME_DATA.find((t) => t.value === appTheme)?.type || 'dark';
+    return THEME_DATA.find((t) => t.value === appTheme)?.type || 'dark';
 };