Remove useLayout

gui/package.json

@@ -49,9 +49,9 @@
     "dev": "tauri dev",
     "skipbundler": "tauri build --no-bundle",
     "tauri": "tauri",
-    "lint": "tsc --noEmit && eslint --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx,json}\" && prettier --check \"src/**/*.{js,jsx,ts,tsx,css,md,json}\"",
+    "lint": "tsc --noEmit && eslint --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx,json}\" && prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
     "lint:fix": "tsc --noEmit && eslint --fix --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx,json}\" && pnpm run format",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,md,json}\"",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
     "preview-vite": "vite preview",
     "javaversion-build": "cd src-tauri/src/ && javac JavaVersion.java && jar cvfe JavaVersion.jar JavaVersion JavaVersion.class"
   },
@@ -98,6 +98,7 @@
     "prettier": "^3.3.2",
     "pretty-quick": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.77.5",
     "tailwind-gradient-mask-image": "^1.2.0",
     "tailwindcss": "^3.4.4",
     "vite": "^5.3.1"

gui/src/App.tsx

@@ -6,11 +6,11 @@ import {
   Routes,
 } from 'react-router-dom';
 import { Home } from './components/home/Home';
-import { MainLayoutRoute } from './components/MainLayout';
+import { MainLayout } from './components/MainLayout';
 import { AppContextProvider } from './components/providers/AppContext';
 import { GeneralSettings } from './components/settings/pages/GeneralSettings';
 import { Serial } from './components/settings/pages/Serial';
-import { SettingsLayoutRoute } from './components/settings/SettingsLayout';
+import { SettingsLayout } from './components/settings/SettingsLayout';
 import {
   useProvideWebsocketApi,
   WebSocketApiContext,
@@ -75,33 +75,33 @@ function Layout() {
           <Route
             path="/"
             element={
-              <MainLayoutRoute isMobile={isMobile}>
+              <MainLayout isMobile={isMobile}>
                 <Home />
-              </MainLayoutRoute>
+              </MainLayout>
             }
           />
           <Route
             path="/vr-mode"
             element={
-              <MainLayoutRoute isMobile={isMobile}>
+              <MainLayout isMobile={isMobile}>
                 <VRModePage />
-              </MainLayoutRoute>
+              </MainLayout>
             }
           />
           <Route
             path="/tracker/:trackernum/:deviceid"
             element={
-              <MainLayoutRoute background={false} isMobile={isMobile}>
+              <MainLayout background={false} isMobile={isMobile}>
                 <TrackerSettingsPage />
-              </MainLayoutRoute>
+              </MainLayout>
             }
           />
           <Route
             path="/settings"
             element={
-              <SettingsLayoutRoute>
+              <SettingsLayout>
                 <Outlet />
-              </SettingsLayoutRoute>
+              </SettingsLayout>
             }
           >
             <Route path="trackers" element={<GeneralSettings />} />

gui/src/components/MainLayout.scss

@@ -0,0 +1,22 @@
+.main-layout {
+  display: grid;
+  grid-template:
+    't t' var(--topbar-h)
+    's c' calc(100% - var(--topbar-h))
+    / var(--navbar-w) calc(100% - var(--navbar-w));
+
+  &:has(.widgets) {
+    grid-template:
+      't t t' var(--topbar-h)
+      's c w' calc(100% - var(--topbar-h))
+      / var(--navbar-w) calc(100% - var(--navbar-w) - var(--widget-w)) var(--widget-w);
+  }
+
+  @screen mobile {
+    grid-template:
+      't' var(--topbar-h)
+      'c' calc(100% - var(--topbar-h) - var(--navbar-h))
+      's' calc(var(--navbar-h))
+      / 100%;
+  }
+}

gui/src/components/MainLayout.tsx

@@ -6,13 +6,13 @@ import {
   RpcMessage,
   SettingsRequestT,
 } from 'solarxr-protocol';
-import { useElemSize, useLayout } from '@/hooks/layout';
 import { Navbar } from './Navbar';
 import { TopBar } from './TopBar';
 import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { WidgetsComponent } from './WidgetsComponent';
+import './MainLayout.scss';
 
-export function MainLayoutRoute({
+export function MainLayout({
   children,
   background = true,
   widgets = true,
@@ -23,9 +23,6 @@ export function MainLayoutRoute({
   isMobile?: boolean;
   widgets?: boolean;
 }) {
-  const { height, ref: navRef } = useElemSize<HTMLDivElement>();
-  const { layoutHeight, ref } = useLayout<HTMLDivElement>();
-  const { layoutWidth, ref: refw } = useLayout<HTMLDivElement>();
   const { sendRPCPacket } = useWebsocketAPI();
   const [ProportionsLastPageOpen, setProportionsLastPageOpen] = useState(true);
 
@@ -61,37 +58,33 @@ export function MainLayoutRoute({
   });
 
   return (
-    <>
-      <TopBar></TopBar>
-      <div
-        ref={ref}
-        className="flex-grow"
-        style={{ height: layoutHeight - height }}
-      >
-        <div className="flex h-full xs:pb-3">
-          {!isMobile && <Navbar></Navbar>}
+    <div className="">
+      <div className="main-layout w-full h-screen">
+        <div style={{ gridArea: 't' }}>
+          <TopBar></TopBar>
+        </div>
+        <div style={{ gridArea: 's' }} className="overflow-y-auto">
+          <Navbar></Navbar>
+        </div>
+        <div
+          style={{ gridArea: 'c' }}
+          className={classNames(
+            'overflow-y-auto mr-2 my-2 mobile:m-0',
+            'flex flex-col rounded-xl',
+            background && 'bg-background-70'
+          )}
+        >
+          {children}
+        </div>
+        {!isMobile && widgets && (
           <div
-            className="flex gap-2 xs:pr-3  w-full"
-            ref={refw}
-            style={{ minWidth: layoutWidth }}
+            style={{ gridArea: 'w' }}
+            className="overflow-y-auto mr-2 my-2 rounded-xl bg-background-70 flex flex-col gap-2 p-2 widgets"
           >
-            <div
-              className={classNames(
-                'flex flex-col rounded-xl w-full overflow-clip mobile:overflow-y-auto',
-                background && 'bg-background-70'
-              )}
-            >
-              {children}
-            </div>
-            {!isMobile && widgets && (
-              <div className="flex flex-col px-2 min-w-[274px] w-[274px] gap-2 pt-2 rounded-xl overflow-y-auto bg-background-70">
-                <WidgetsComponent></WidgetsComponent>
-              </div>
-            )}
+            <WidgetsComponent></WidgetsComponent>
           </div>
-        </div>
-        <div ref={navRef}>{isMobile && <Navbar></Navbar>}</div>
+        )}
       </div>
-    </>
+    </div>
   );
 }

gui/src/components/Navbar.tsx

@@ -110,7 +110,7 @@ export function Navbar() {
       <MainLinks></MainLinks>
     </div>
   ) : (
-    <div className="flex flex-col px-2 pt-2">
+    <div className="flex flex-col h-full p-2 gap-2">
       <div className="flex flex-col flex-grow gap-2">
         <MainLinks></MainLinks>
       </div>

gui/src/components/commons/Button.tsx

@@ -84,7 +84,7 @@ export function Button({
     };
     return classNames(
       variantsMap[variant],
-      'focus:ring-4 text-center relative',
+      'focus:ring-4 text-center relative flex items-center justify-center',
       {
         'rounded-full p-2 text-center min-h-[35px] min-w-[35px]': rounded,
         'rounded-md px-5 py-2.5': !rounded,

gui/src/components/home/Home.tsx

@@ -51,7 +51,7 @@ export function Home() {
       <div className="h-full overflow-y-auto">
         <div
           className={classNames(
-            'px-2 pt-4 gap-3 w-full grid md:grid-cols-2 mobile:grid-cols-1',
+            'px-2 pt-2 gap-3 w-full grid md:grid-cols-2 mobile:grid-cols-1',
             filteredStatuses.filter(([, status]) => status.prioritized)
               .length === 0 && 'hidden'
           )}

gui/src/components/onboarding/OnboardingLayout.scss

@@ -0,0 +1,11 @@
+.onboarding-layout {
+  display: grid;
+  grid-template:
+    't' var(--topbar-h)
+    'c' calc(100% - var(--topbar-h))
+    / 100%;
+
+  @screen mobile {
+    --topbar-h: 74px;
+  }
+}

gui/src/components/onboarding/OnboardingLayout.tsx

@@ -1,46 +1,41 @@
 import { ReactNode, useState } from 'react';
-import { useLayout } from '@/hooks/layout';
 import { useOnboarding } from '@/hooks/onboarding';
-import { MainLayoutRoute } from '@/components/MainLayout';
+import { MainLayout } from '@/components/MainLayout';
 import { TopBar } from '@/components/TopBar';
 import { useBreakpoint } from '@/hooks/breakpoint';
 import { SkipSetupButton } from './SkipSetupButton';
 import { SkipSetupWarningModal } from './SkipSetupWarningModal';
+import './OnboardingLayout.scss';
 
 export function OnboardingLayout({ children }: { children: ReactNode }) {
-  const { layoutHeight, ref } = useLayout<HTMLDivElement>();
   const { isMobile } = useBreakpoint('mobile');
   const { state, skipSetup } = useOnboarding();
   const [skipWarning, setSkipWarning] = useState(false);
 
   return !state.alonePage ? (
-    <>
-      <TopBar progress={state.progress}></TopBar>
-      <div
-        ref={ref}
-        className="flex-grow relative"
-        style={{ height: layoutHeight }}
-      >
+    <div className="onboarding-layout h-full">
+      <div style={{ gridArea: 't' }}>
+        <TopBar progress={state.progress}></TopBar>
+      </div>
+      <div style={{ gridArea: 'c' }} className="mt-2 relative">
         <div className="absolute top-12 mobile:top-0 right-2 z-50">
           <SkipSetupButton
             visible={true}
             modalVisible={skipWarning}
             onClick={() => setSkipWarning(true)}
           ></SkipSetupButton>
         </div>
-        {children}
+        <div className="h-full w-full overflow-y-auto">{children}</div>
         <SkipSetupWarningModal
           accept={skipSetup}
           onClose={() => setSkipWarning(false)}
           isOpen={skipWarning}
         ></SkipSetupWarningModal>
       </div>
-    </>
+    </div>
   ) : (
-    <MainLayoutRoute widgets={false} isMobile={isMobile}>
-      <div className="flex-grow xs:pt-10 mobile:pt-2 overflow-y-auto">
-        {children}
-      </div>
-    </MainLayoutRoute>
+    <MainLayout widgets={false} isMobile={isMobile}>
+      {children}
+    </MainLayout>
   );
 }

gui/src/components/onboarding/pages/ConnectTracker.scss

@@ -0,0 +1,26 @@
+:root {
+  --connect-tracker-layout-sidebar: 350px;
+  --connect-tracker-layout-top: 20px;
+
+  @screen lg {
+    --connect-tracker-layout-sidebar: 400px;
+  }
+}
+
+.connect-tracker-layout {
+  display: grid;
+  grid-template:
+    's t' var(--connect-tracker-layout-top)
+    's c' calc(100% - var(--connect-tracker-layout-top))
+    / calc(var(--connect-tracker-layout-sidebar)) calc(100% - var(
+          --connect-tracker-layout-sidebar
+        ));
+
+  @screen mobile {
+    grid-template:
+      's' auto
+      't' auto
+      'c' auto
+      / 100%;
+  }
+}