Radix-related fixes, improved main menu + OSM sign-in

.vscode/settings.json

@@ -26,5 +26,8 @@
   "prettier.enable": false,
   "[jsonc]": {
     "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
-}
+}

biome.json

@@ -8,7 +8,9 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["dist"]
+    "ignore": [
+      "dist"
+    ]
   },
   "formatter": {
     "enabled": true,
@@ -28,4 +30,4 @@
       "quoteStyle": "double"
     }
   }
-}
+}

package.json

@@ -133,7 +133,7 @@
     "rimraf": "^2.6.3",
     "source-map-explorer": "^2.5.3",
     "ttag-cli": "^1.9.3",
-    "typescript": "^5.5.4",
+    "typescript": "^5.7.2",
     "webdriverio": "^6.1.5"
   },
   "scripts": {

src/components/App/AppStateLink.tsx

@@ -1,10 +1,15 @@
-import Link from 'next/link'
-import { ComponentProps, useMemo } from 'react'
-import { preserveSearchParams, useAppStateAwareRouter } from '../../lib/util/useAppStateAwareRouter'
+import Link from "next/link";
+import type { ComponentProps, Ref } from "react";
+import { useAppStateAwareHref } from "./useAppStateAwareHref";
+import React from "react";
 
-export const AppStateLink = ({ href, ...props }: ComponentProps<typeof Link>) => {
-  const { searchParams, query } = useAppStateAwareRouter()
+export const AppStateLink = React.forwardRef(
+  (
+    { href, ...props }: ComponentProps<typeof Link>,
+    ref: Ref<HTMLAnchorElement>,
+  ) => {
+    const extendedHref = useAppStateAwareHref(href);
 
-  const extendedHref = useMemo(() => preserveSearchParams(href, searchParams, query), [href, searchParams, query])
-  return <Link {...props} href={extendedHref} />
-}
+    return <Link {...props} href={extendedHref} ref={ref} />;
+  },
+);

src/components/App/MainMenu/LogoHomeLink.tsx

@@ -0,0 +1,25 @@
+import { Button } from "@radix-ui/themes";
+import Link from "next/link";
+import { t } from "ttag";
+import type { IBranding } from "../../../lib/model/ac/IBranding";
+import VectorImage from "../../shared/VectorImage";
+
+export default function LogoHomeLink({
+  branding,
+  productName,
+}: { branding: IBranding | undefined; productName: string }) {
+  return (
+    <Button aria-label={t`Home`} variant="ghost" radius="none" asChild>
+      <Link href="/onboarding">
+        <VectorImage
+          className="logo"
+          svg={branding?.vectorLogoSVG}
+          aria-label={productName}
+          maxHeight="30px"
+          maxWidth="150px"
+          hasShadow={false}
+        />
+      </Link>
+    </Button>
+  );
+}