Update @tanstack/router and fix links

Author: sandhose

frontend/package-lock.json

@@ -21,7 +21,7 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-form": "^0.0.3",
-    "@tanstack/react-router": "^1.20.1",
+    "@tanstack/react-router": "^1.24.0",
     "@types/ua-parser-js": "^0.7.39",
     "@urql/core": "^4.3.0",
     "@urql/devtools": "^2.0.3",
@@ -54,8 +54,8 @@
     "@storybook/addon-essentials": "^8.0.5",
     "@storybook/react": "^8.0.5",
     "@storybook/react-vite": "^8.0.5",
-    "@tanstack/router-devtools": "^1.20.1",
-    "@tanstack/router-vite-plugin": "^1.20.2",
+    "@tanstack/router-devtools": "^1.24.0",
+    "@tanstack/router-vite-plugin": "^1.25.0",
     "@testing-library/react": "^14.2.2",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.73",

frontend/package.json

@@ -12,13 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {
-  UseLinkPropsOptions,
-  createLink,
-  useLinkProps,
-} from "@tanstack/react-router";
+import { createLink } from "@tanstack/react-router";
 import { Button } from "@vector-im/compound-web";
-import { forwardRef } from "react";
+import { PropsWithChildren, forwardRef } from "react";
 
 type Props = {
   kind?: "primary" | "secondary" | "tertiary";
@@ -27,15 +23,14 @@ type Props = {
   destructive?: boolean;
 };
 
-// XXX: createLink is broken, so we work around it by using useLinkProps directly
-export const ButtonLink = forwardRef<
-  HTMLAnchorElement,
-  Props & UseLinkPropsOptions
->(({ children, ...props }, ref) => {
-  const linkProps = useLinkProps(props);
-  return (
-    <Button as="a" {...linkProps} ref={ref}>
-      {children}
-    </Button>
-  );
-}) as ReturnType<typeof createLink<typeof Button>>;
+export const ButtonLink = createLink(
+  forwardRef<HTMLAnchorElement, PropsWithChildren<Props>>(
+    ({ children, ...props }, ref) => {
+      return (
+        <Button as="a" {...props} ref={ref}>
+          {children}
+        </Button>
+      );
+    },
+  ),
+);

frontend/src/components/ButtonLink.tsx

@@ -12,13 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { createLink, useLinkProps } from "@tanstack/react-router";
+import { createLink } from "@tanstack/react-router";
 import { Link as CompoundLink } from "@vector-im/compound-web";
 
-export const Link: ReturnType<typeof createLink<typeof CompoundLink>> = ({
-  children,
-  ...props
-}: Parameters<typeof useLinkProps>[0]) => {
-  const linkProps = useLinkProps(props);
-  return <CompoundLink {...linkProps}>{children}</CompoundLink>;
-};
+export const Link = createLink(CompoundLink);

frontend/src/components/Link.tsx

@@ -12,13 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {
-  UseLinkPropsOptions,
-  createLink,
-  useLinkProps,
-} from "@tanstack/react-router";
+import { createLink } from "@tanstack/react-router";
 import cx from "classnames";
-import { AnchorHTMLAttributes, forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { DeviceType } from "../../gql/graphql";
 import ClientAvatar from "../Session/ClientAvatar";
@@ -30,35 +26,31 @@ export const Root: React.FC<React.PropsWithChildren> = ({ children }) => (
   <section className={styles.sessionCardRoot}>{children}</section>
 );
 
-// XXX: createLink is broken, so we work around it by using useLinkProps directly
 type BodyProps = React.PropsWithChildren<{
   disabled?: boolean;
   compact?: boolean;
+  className?: string;
 }>;
-export const LinkBody = forwardRef<
-  HTMLAnchorElement,
-  BodyProps & UseLinkPropsOptions
->(({ children, disabled, compact, ...props }, ref) => {
-  const { className, ...linkProps } = useLinkProps({ disabled, ...props });
-  return (
-    <a
-      className={cx(
-        className,
-        styles.sessionCard,
-        compact && styles.compact,
-        disabled && styles.disabled,
-      )}
-      {...linkProps}
-      ref={ref}
-    >
-      {children}
-    </a>
-  );
-}) as ReturnType<
-  typeof createLink<
-    React.FC<BodyProps & AnchorHTMLAttributes<HTMLAnchorElement>>
-  >
->;
+export const LinkBody = createLink(
+  forwardRef<HTMLAnchorElement, BodyProps>(
+    ({ children, disabled, compact, className, ...props }, ref) => {
+      return (
+        <a
+          className={cx(
+            className,
+            styles.sessionCard,
+            compact && styles.compact,
+            disabled && styles.disabled,
+          )}
+          {...props}
+          ref={ref}
+        >
+          {children}
+        </a>
+      );
+    },
+  ),
+);
 
 export const Body: React.FC<BodyProps> = ({ children, compact, disabled }) => (
   <div