Add files

src/renderer/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './use-theme';
+export * from './use-is-mounted';
+export * from './use-should-pad-titlebar';
+export * from './use-container-query';

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

@@ -0,0 +1,21 @@
+import { useElementSize } from '@mantine/hooks';
+
+interface UseContainerQueryProps {
+  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 isXs = width >= 0;
+  const isSm = width >= (sm || 600);
+  const isMd = width >= (md || 900);
+  const isLg = width >= (lg || 1200);
+  const isXl = width >= (xl || 1500);
+
+  return { height, isLg, isMd, isSm, isXl, isXs, ref, width };
+};

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

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

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

@@ -0,0 +1,9 @@
+import { useSidebarRightExpanded } from '/@/renderer/store';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
+
+export const useShouldPadTitlebar = () => {
+  const isSidebarExpanded = useSidebarRightExpanded();
+  const { sideQueueType } = useGeneralSettings();
+
+  return !(isSidebarExpanded && sideQueueType === 'sideQueue');
+};

src/renderer/hooks/use-theme.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+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 },
+];
+
+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';
+};