Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/hooks/index.ts

@@ -3,6 +3,4 @@ export * from './use-container-query';
 export * from './use-fast-average-color';
 export * from './use-hide-scrollbar';
 export * from './use-is-mounted';
-export * from './use-is-overflow';
 export * from './use-should-pad-titlebar';
-export * from './use-theme';

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

@@ -36,7 +36,7 @@ export const useFastAverageColor = (args: {
                 });
         } else if (srcLoaded) {
             idRef.current = id;
-            return setBackground('var(--placeholder-bg)');
+            return setBackground('var(--theme-colors-foreground-muted)');
         }
 
         return () => {

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

@@ -1,20 +0,0 @@
-import { MutableRefObject, useLayoutEffect, useState } from 'react';
-
-export const useIsOverflow = (ref: MutableRefObject<HTMLDivElement | null>) => {
-    const [isOverflow, setIsOverflow] = useState<boolean | undefined>(undefined);
-
-    useLayoutEffect(() => {
-        const { current } = ref;
-
-        const trigger = () => {
-            const hasOverflow = (current?.scrollHeight || 0) > (current?.clientHeight || 0);
-            setIsOverflow(hasOverflow);
-        };
-
-        if (current) {
-            trigger();
-        }
-    }, [ref]);
-
-    return isOverflow;
-};

src/renderer/hooks/use-server-authenticated.ts

@@ -2,8 +2,8 @@ import { debounce } from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { api } from '/@/renderer/api';
-import { toast } from '/@/renderer/components';
 import { useCurrentServer } from '/@/renderer/store';
+import { toast } from '/@/shared/components/toast/toast';
 import { SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { AuthState, ServerListItem, ServerType } from '/@/shared/types/types';
 

src/renderer/hooks/use-theme.ts

@@ -1,43 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { useSettingsStore } from '/@/renderer/store/settings.store';
-import { AppTheme } from '/@/shared/types/domain-types';
-
-export const THEME_DATA = [
-    { 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 mqListener = (e: any) => {
-        setIsDarkTheme(e.matches);
-    };
-
-    const getTheme = () => {
-        if (followSystemTheme) {
-            return isDarkTheme ? themeDark : themeLight;
-        }
-
-        return theme;
-    };
-
-    const appTheme = getTheme();
-
-    useEffect(() => {
-        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
-        darkThemeMq.addListener(mqListener);
-        return () => darkThemeMq.removeListener(mqListener);
-    }, []);
-
-    useEffect(() => {
-        document.body.setAttribute('data-theme', appTheme);
-    }, [appTheme]);
-
-    return THEME_DATA.find((t) => t.value === appTheme)?.type || 'dark';
-};