made signal for detecting screen sizes

src/app/index.tsx

@@ -1,9 +1,11 @@
-import { StrictMode, useRef } from "react";
+import { StrictMode, useRef, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router";
 
+import { layout } from "~/signals/";
+
 import "./global.css";
 
 const App = () => {
@@ -15,6 +17,19 @@ const App = () => {
     console.warn(`App rerendered ${AppRerenderCount.current} times`);
   }
 
+  useEffect(() => {
+    const { windowWidth, windowHeight } = layout.signals;
+
+    const handleResize = () => {
+      windowWidth.value = window.innerWidth;
+      windowHeight.value = window.innerHeight;
+    };
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   return <RouterProvider router={router} />;
 };
 

src/pages/login.tsx

@@ -1,4 +1,5 @@
 import { useRef } from "react";
+import { useSignals } from "@preact/signals-react/runtime";
 import { useNavigate, useSearchParams, Link } from "react-router-dom";
 import { useSignalEffect } from "@preact/signals-react/runtime";
 
@@ -7,6 +8,7 @@ import { Button, Input, Loader } from "~/components/ui";
 import { authentication } from "~/signals";
 
 export const Login = () => {
+  useSignals();
   const {
     signals: { status: authStatus },
     fetchers: { login },

src/pages/main/BottomMenu.tsx

@@ -0,0 +1,17 @@
+import { useSignals } from "@preact/signals-react/runtime";
+import { layout } from "~/signals";
+export const BottomMenu = () => {
+  useSignals();
+  const {
+    signals: { isMobile, windowWidth, windowHeight },
+  } = layout;
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <p>If you need to put buttons somewhere, this could be the spot.</p>
+      <p>
+        Layout is {windowWidth.value} x {windowHeight.value},{" "}
+        <b>{isMobile.value ? "Mobile" : "Not Mobile"}</b>
+      </p>
+    </div>
+  );
+};

src/pages/main/index.tsx

@@ -1,16 +1,32 @@
-import { useCallback } from "react";
-import { withProtectionRoute } from "~/components/hoc";
-import { authentication } from "~/signals";
-import { PanelRight, PanelBottom } from "~/components/ui";
-import { ProfileDropdown, KonaContainer } from "~/components/features";
-import { KonvaApp } from "~/KonvaApp";
+import { useCallback, useRef } from "react";
 import { twMerge } from "tailwind-merge";
+// import { useSignals } from "@preact/signals-react/runtime";
+import { withProtectionRoute } from "~/components/hoc";
+// import { authentication } from "~/signals";
+
+import {
+  //PanelRight,
+  PanelBottom,
+} from "~/components/ui";
+import { ProfileDropdown, KonaContainer } from "~/components/features";
+
+import { KonvaApp } from "~/KonvaApp";
+
+import { BottomMenu } from "./BottomMenu";
 
 export const Main = withProtectionRoute(() => {
-  const {
-    signals: { userInfo },
-    fetchers: { logout },
-  } = authentication;
+  // useSignals();
+  const MainPageRerenderCount = useRef(0);
+  MainPageRerenderCount.current++;
+  if (MainPageRerenderCount.current === 1) {
+    console.log(`Main page rerendered ${MainPageRerenderCount.current} times`);
+  } else {
+    console.warn(`Main page rerendered ${MainPageRerenderCount.current} times`);
+  }
+  // const {
+  //   signals: { userInfo },
+  //   fetchers: { logout },
+  // } = authentication;
 
   const konaContainerCallbackRef = useCallback((node: HTMLDivElement) => {
     if (node !== null) {
@@ -51,9 +67,7 @@ export const Main = withProtectionRoute(() => {
         <button onClick={() => logout()}>Logout</button>
       </PanelRight> */}
       <PanelBottom>
-        <div className="flex h-full items-center justify-center">
-          <p>If you need to put buttons somewhere, this could be the spot.</p>
-        </div>
+        <BottomMenu />
       </PanelBottom>
     </div>
   );

src/signals/index.ts

@@ -1 +1,2 @@
 export * from "./authentication";
+export * from "./layout";

src/signals/layout/index.ts

@@ -0,0 +1,5 @@
+import * as signals from "./signals";
+
+export const layout = {
+  signals,
+};

src/signals/layout/signals.ts

@@ -0,0 +1,8 @@
+import { computed, signal } from "@preact/signals-core";
+
+export const windowWidth = signal(window.innerWidth);
+export const windowHeight = signal(window.innerHeight);
+
+export const isMobile = computed(() => {
+  return windowWidth.value < 768 && windowWidth.value < windowHeight.value;
+});