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 public/lib
stats.html stats.html
pnpm-lock.yaml pnpm-lock.yaml
android
ios

View File

@ -1,6 +1,6 @@
import { lazy, Suspense } from "react"; import { lazy, Suspense } from "react";
import { Spinner } from "@chakra-ui/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"; import GlobalStyles from "./styles";
@ -12,16 +12,14 @@ import useSetColorMode from "./hooks/use-set-color-mode";
import TaskManagerProvider from "./views/task-manager/provider"; import TaskManagerProvider from "./views/task-manager/provider";
/* const getScrollKey = (location: Location) => location.pathname + location.search + location.hash;
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 RootPage = () => { const RootPage = () => {
useSetColorMode(); useSetColorMode();
return ( return (
<RouteProviders> <RouteProviders>
<ScrollRestoration /> <ScrollRestoration getKey={getScrollKey} />
<AppLayout /> <AppLayout />
</RouteProviders> </RouteProviders>
); );
@ -29,7 +27,7 @@ const RootPage = () => {
const NoLayoutPage = () => { const NoLayoutPage = () => {
return ( return (
<RouteProviders> <RouteProviders>
<ScrollRestoration /> <ScrollRestoration getKey={getScrollKey} />
<Suspense fallback={<Spinner />}> <Suspense fallback={<Spinner />}>
<Outlet /> <Outlet />
</Suspense> </Suspense>

View File

@ -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({ export default function PanelItemToggle({
label, label,
value, value,
onChange, onChange,
...props ...props
}: Omit<FormControlProps, 'children'> & { }: Omit<FormControlProps, "children"> & {
label?: string; label?: string;
value: boolean; value: boolean;
onChange: () => void; onChange: () => void;

View File

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

View File

@ -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) { export default function TextButton({ children, ...props }: ButtonProps) {
return ( return (

View File

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

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() { 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 useCurrentAccount from "./use-current-account";
import useReplaceableEvent from "./use-replaceable-event"; 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 account = useCurrentAccount();
const key = pubkey ?? account?.pubkey; const key = pubkey ?? account?.pubkey;