small fix for scroll restoration

format code
This commit is contained in:
hzrd149 2025-01-16 15:02:02 -06:00
parent ae8f3a4d22
commit 7ad01e97c8
8 changed files with 54 additions and 54 deletions

View File

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

View File

@ -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>

View File

@ -1,19 +1,19 @@
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'> & {
label?: string;
value: boolean;
onChange: () => void;
label,
value,
onChange,
...props
}: Omit<FormControlProps, "children"> & {
label?: string;
value: boolean;
onChange: () => void;
}) {
return (
<FormControl display="flex" alignItems="center" justifyContent="space-between" {...props}>
<FormLabel mb="0">{label}</FormLabel>
<Switch isChecked={value} onChange={onChange} />
</FormControl>
);
return (
<FormControl display="flex" alignItems="center" justifyContent="space-between" {...props}>
<FormLabel mb="0">{label}</FormLabel>
<Switch isChecked={value} onChange={onChange} />
</FormControl>
);
}

View File

@ -1,19 +1,19 @@
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);
const [open, setOpen] = useState(true);
return (
<Flex borderWidth={1} rounded="lg" p="4" direction="column" {...props}>
<Flex justifyContent="space-between" mb={open ? 2 : 0}>
<Heading size="sm">{label}</Heading>
<TextButton onClick={() => setOpen(!open)} type="button">
[{open ? '-' : '+'}]
</TextButton>
</Flex>
{open && children}
</Flex>
);
return (
<Flex borderWidth={1} rounded="lg" p="4" direction="column" {...props}>
<Flex justifyContent="space-between" mb={open ? 2 : 0}>
<Heading size="sm">{label}</Heading>
<TextButton onClick={() => setOpen(!open)} type="button">
[{open ? "-" : "+"}]
</TextButton>
</Flex>
{open && children}
</Flex>
);
}

View File

@ -1,9 +1,9 @@
import { Button, ButtonProps } from '@chakra-ui/react';
import { Button, ButtonProps } from "@chakra-ui/react";
export default function TextButton({ children, ...props }: ButtonProps) {
return (
<Button variant="link" fontFamily="monospace" {...props}>
{children}
</Button>
);
return (
<Button variant="link" fontFamily="monospace" {...props}>
{children}
</Button>
);
}

View File

@ -1,10 +1,10 @@
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 });
const mobile = useBreakpointValue({ base: true, md: false });
if (mobile) return <MobileLayout />;
else return <DesktopLayout />;
if (mobile) return <MobileLayout />;
else return <DesktopLayout />;
}

View File

@ -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);
return useObservable(report?.status);
}

View File

@ -5,7 +5,7 @@ import { getAddressPointersFromList, getEventPointersFromList } from "applesauce
import useCurrentAccount from "./use-current-account";
import useReplaceableEvent from "./use-replaceable-event";
export default function userUserBookmarksList(pubkey?: string, relays: string[] = [], force=false) {
export default function userUserBookmarksList(pubkey?: string, relays: string[] = [], force = false) {
const account = useCurrentAccount();
const key = pubkey ?? account?.pubkey;