Add container query hook

packages/renderer/src/features/home/routes/home-route.tsx

@@ -3,10 +3,11 @@ import { AlbumListSort, SortOrder } from '/@/api/types';
 import { GridCarousel, PageHeader, ScrollArea, TextTitle } from '/@/components';
 import { useAlbumList } from '/@/features/albums';
 import { useRecentlyPlayed } from '/@/features/home/queries/recently-played-query';
-import { AnimatedPage, useContainerQuery } from '/@/features/shared';
+import { AnimatedPage } from '/@/features/shared';
 import { AppRoute } from '/@/router/routes';
 import { useSetState } from '@mantine/hooks';
 import { throttle } from 'lodash';
+import { useContainerQuery } from '/@/hooks';
 
 const HomeRoute = () => {
   const rootElement = document.querySelector(':root') as HTMLElement;

packages/renderer/src/hooks/index.ts

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

packages/renderer/src/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 };
+};