small fix for scroll restoration

format code

.prettierignore

@@ -3,3 +3,5 @@ dist
 public/lib
 stats.html
 pnpm-lock.yaml
+android
+ios

src/app.tsx

@@ -1,6 +1,6 @@
 import { lazy, Suspense } from "react";
 import { Spinner } from "@chakra-ui/react";
-import { createBrowserRouter, Outlet, RouterProvider, ScrollRestoration } from "react-router";
+import { createBrowserRouter, Outlet, RouterProvider, ScrollRestoration, Location } from "react-router";
 
 import GlobalStyles from "./styles";
 
@@ -12,16 +12,14 @@ import useSetColorMode from "./hooks/use-set-color-mode";
 
 import TaskManagerProvider from "./views/task-manager/provider";
 
-/*
-  TODO: update scroll restoration to use a different key then location.key
-  the location.key changes when location.state changes, but that should not change the scroll position
-*/
+const getScrollKey = (location: Location) => location.pathname + location.search + location.hash;
+
 const RootPage = () => {
   useSetColorMode();
 
   return (
     <RouteProviders>
-      <ScrollRestoration />
+      <ScrollRestoration getKey={getScrollKey} />
       <AppLayout />
     </RouteProviders>
   );
@@ -29,7 +27,7 @@ const RootPage = () => {
 const NoLayoutPage = () => {
   return (
     <RouteProviders>
-      <ScrollRestoration />
+      <ScrollRestoration getKey={getScrollKey} />
       <Suspense fallback={<Spinner />}>
         <Outlet />
       </Suspense>

src/components/dashboard/panel-item-toggle.tsx

@@ -1,11 +1,11 @@
-import { FormControl, FormControlProps, FormLabel, Switch } from '@chakra-ui/react';
+import { FormControl, FormControlProps, FormLabel, Switch } from "@chakra-ui/react";
 
 export default function PanelItemToggle({
   label,
   value,
   onChange,
   ...props
-}: Omit<FormControlProps, 'children'> & {
+}: Omit<FormControlProps, "children"> & {
   label?: string;
   value: boolean;
   onChange: () => void;

src/components/dashboard/panel.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
-import { Flex, FlexProps, Heading } from '@chakra-ui/react';
-import TextButton from './text-button';
+import { useState } from "react";
+import { Flex, FlexProps, Heading } from "@chakra-ui/react";
+import TextButton from "./text-button";
 
 export default function Panel({ label, children, ...props }: FlexProps & { label?: string }) {
   const [open, setOpen] = useState(true);
@@ -10,7 +10,7 @@ export default function Panel({ label, children, ...props }: FlexProps & { label
       <Flex justifyContent="space-between" mb={open ? 2 : 0}>
         <Heading size="sm">{label}</Heading>
         <TextButton onClick={() => setOpen(!open)} type="button">
-					[{open ? '-' : '+'}]
+          [{open ? "-" : "+"}]
         </TextButton>
       </Flex>
       {open && children}

src/components/dashboard/text-button.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonProps } from '@chakra-ui/react';
+import { Button, ButtonProps } from "@chakra-ui/react";
 
 export default function TextButton({ children, ...props }: ButtonProps) {
   return (

src/components/layout/index.tsx

@@ -1,6 +1,6 @@
-import MobileLayout from './mobile';
-import DesktopLayout from './desktop';
-import { useBreakpointValue } from '../../providers/global/breakpoint-provider';
+import MobileLayout from "./mobile";
+import DesktopLayout from "./desktop";
+import { useBreakpointValue } from "../../providers/global/breakpoint-provider";
 
 export default function AppLayout() {
   const mobile = useBreakpointValue({ base: true, md: false });

src/hooks/reports/use-network-status-report.ts

@@ -1,9 +1,9 @@
-import { useObservable } from 'applesauce-react/hooks';
+import { useObservable } from "applesauce-react/hooks";
 
-import useReport from '../use-report';
+import useReport from "../use-report";
 
 export default function useNetworkOverviewReport() {
-	const report = useReport('NETWORK_STATUS', 'network-status', {});
+  const report = useReport("NETWORK_STATUS", "network-status", {});
 
   return useObservable(report?.status);
 }