significant refactor

src/hooks/use-appshell-height.ts

@@ -7,15 +7,15 @@ const useAppShellHeight = () => {
   const { header } = useRouterConfig();
 
   const height = useMemo(() => {
-    const appShellBottomPadding = isMobile ? '70px' : '0px';
-    const pageBottomPadding = '20px';
-    const mobileNavbar = isMobile && !header.collapsed ? '4rem' : '0px';
-    const pullablePadding = '1.285rem';
-    
+    const appShellBottomPadding = isMobile ? "70px" : "0px";
+    const pageBottomPadding = "20px";
+    const mobileNavbar = isMobile && !header.collapsed ? "4rem" : "0px";
+    const pullablePadding = "1.285rem";
+
     return `calc(100dvh - var(--app-shell-header-height, 0px) - ${mobileNavbar} - ${pullablePadding} - ${appShellBottomPadding} - ${pageBottomPadding})`;
   }, [isMobile, header.collapsed]);
 
   return height;
-}
+};
 
 export default useAppShellHeight;

src/hooks/use-is-mobile.ts

@@ -1,6 +1,6 @@
 import { useMediaQuery } from "@mantine/hooks";
 
 export const useIsMobile = () => {
-    const isMobile = useMediaQuery('(max-width: 48em)');
-    return isMobile;
-}
+  const isMobile = useMediaQuery("(max-width: 48em)");
+  return isMobile;
+};

src/hooks/use-sheet.ts

@@ -9,7 +9,7 @@ export function useSheet(options: UseSheetOptions = {}) {
 
   const open = useCallback(() => setIsOpen(true), []);
   const close = useCallback(() => setIsOpen(false), []);
-  const toggle = useCallback(() => setIsOpen(prev => !prev), []);
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
 
   return {
     isOpen,
@@ -19,6 +19,6 @@ export function useSheet(options: UseSheetOptions = {}) {
     props: {
       opened: isOpen,
       onChange: setIsOpen,
-    }
+    },
   };
-}
+}