Fix dashboard internal navigation

apps/dashboard/src/components/layouts/not-found-screen.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@diffkit/ui/components/button";
+import { Logo } from "@diffkit/ui/components/logo";
+import { Link } from "@tanstack/react-router";
+
+export function NotFoundScreen() {
+	return (
+		<main className="isolate flex min-h-dvh items-center justify-center bg-background p-6">
+			<div className="mx-auto flex w-full max-w-md flex-col items-center gap-6 text-center">
+				<Logo
+					className="size-12 text-foreground"
+					variant={import.meta.env.DEV ? "dev" : "default"}
+				/>
+
+				<div className="flex flex-col gap-2">
+					<p className="text-sm font-medium tabular-nums text-muted-foreground">
+						404
+					</p>
+					<h1 className="text-3xl font-semibold tracking-tight text-balance text-foreground">
+						Page not found
+					</h1>
+					<p className="text-base text-pretty text-muted-foreground sm:text-sm">
+						Check the URL or head back to your dashboard.
+					</p>
+				</div>
+
+				<div className="flex flex-col items-center gap-2 sm:flex-row">
+					<Button asChild>
+						<Link to="/">Go to dashboard</Link>
+					</Button>
+					<Button variant="ghost" asChild>
+						<Link to="/login" search={{ redirect: "/" }}>
+							Sign in
+						</Link>
+					</Button>
+				</div>
+			</div>
+		</main>
+	);
+}

apps/dashboard/src/components/profile/pinned-repo-card.tsx

@@ -1,12 +1,12 @@
 import { GitForkIcon, StarIcon } from "@diffkit/icons";
+import { Link } from "@tanstack/react-router";
 import type { PinnedRepo } from "#/lib/github.types";
 
 export function PinnedRepoCard({ repo }: { repo: PinnedRepo }) {
 	return (
-		<a
-			href={repo.url}
-			target="_blank"
-			rel="noopener noreferrer"
+		<Link
+			to="/$owner/$repo"
+			params={{ owner: repo.owner, repo: repo.name }}
 			className="flex flex-col gap-2 rounded-xl bg-surface-1 p-4"
 		>
 			<div className="flex items-center gap-2 min-w-0">
@@ -49,7 +49,7 @@ export function PinnedRepoCard({ repo }: { repo: PinnedRepo }) {
 					</span>
 				)}
 			</div>
-		</a>
+		</Link>
 	);
 }
 

apps/dashboard/src/components/repo/repo-activity-cards.tsx

@@ -168,7 +168,7 @@ function ActivityCard<T>({
 
 function PullItem({ pr }: { pr: PullSummary }) {
 	const { icon: StateIcon, color } = getPrStateConfig(pr);
-	const href = `/${pr.repository.owner}/${pr.repository.name}/pulls/${pr.number}`;
+	const href = `/${pr.repository.owner}/${pr.repository.name}/pull/${pr.number}`;
 
 	return (
 		<Link

apps/dashboard/src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as SetupRouteImport } from './routes/setup'
 import { Route as PrivacyRouteImport } from './routes/privacy'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as ProtectedRouteImport } from './routes/_protected'
+import { Route as SplatRouteImport } from './routes/$'
 import { Route as ProtectedIndexRouteImport } from './routes/_protected/index'
 import { Route as ProtectedSettingsRouteImport } from './routes/_protected/settings'
 import { Route as ProtectedReviewsRouteImport } from './routes/_protected/reviews'
@@ -55,6 +56,11 @@ const ProtectedRoute = ProtectedRouteImport.update({
   id: '/_protected',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SplatRoute = SplatRouteImport.update({
+  id: '/$',
+  path: '/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ProtectedIndexRoute = ProtectedIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -141,6 +147,7 @@ const ProtectedOwnerRepoIssuesIssueIdRoute =
   } as any)
 
 export interface FileRoutesByFullPath {
+  '/$': typeof SplatRoute
   '/': typeof ProtectedIndexRoute
   '/login': typeof LoginRoute
   '/privacy': typeof PrivacyRoute
@@ -163,6 +170,7 @@ export interface FileRoutesByFullPath {
   '/$owner/$repo/review/$pullId': typeof ProtectedOwnerRepoReviewPullIdRoute
 }
 export interface FileRoutesByTo {
+  '/$': typeof SplatRoute
   '/login': typeof LoginRoute
   '/privacy': typeof PrivacyRoute
   '/setup': typeof SetupRoute
@@ -185,6 +193,7 @@ export interface FileRoutesByTo {
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
+  '/$': typeof SplatRoute
   '/_protected': typeof ProtectedRouteWithChildren
   '/login': typeof LoginRoute
   '/privacy': typeof PrivacyRoute
@@ -210,6 +219,7 @@ export interface FileRoutesById {
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
+    | '/$'
     | '/'
     | '/login'
     | '/privacy'
@@ -232,6 +242,7 @@ export interface FileRouteTypes {
     | '/$owner/$repo/review/$pullId'
   fileRoutesByTo: FileRoutesByTo
   to:
+    | '/$'
     | '/login'
     | '/privacy'
     | '/setup'
@@ -253,6 +264,7 @@ export interface FileRouteTypes {
     | '/$owner/$repo/review/$pullId'
   id:
     | '__root__'
+    | '/$'
     | '/_protected'
     | '/login'
     | '/privacy'
@@ -277,6 +289,7 @@ export interface FileRouteTypes {
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
+  SplatRoute: typeof SplatRoute
   ProtectedRoute: typeof ProtectedRouteWithChildren
   LoginRoute: typeof LoginRoute
   PrivacyRoute: typeof PrivacyRoute
@@ -325,6 +338,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProtectedRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/$': {
+      id: '/$'
+      path: '/$'
+      fullPath: '/$'
+      preLoaderRoute: typeof SplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_protected/': {
       id: '/_protected/'
       path: '/'
@@ -484,6 +504,7 @@ const ProtectedRouteWithChildren = ProtectedRoute._addFileChildren(
 )
 
 const rootRouteChildren: RootRouteChildren = {
+  SplatRoute: SplatRoute,
   ProtectedRoute: ProtectedRouteWithChildren,
   LoginRoute: LoginRoute,
   PrivacyRoute: PrivacyRoute,

apps/dashboard/src/router.tsx

@@ -1,6 +1,7 @@
 import { createRouter as createTanStackRouter } from "@tanstack/react-router";
 import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
 import { DashboardErrorScreen } from "#/components/layouts/dashboard-error-screen";
+import { NotFoundScreen } from "#/components/layouts/not-found-screen";
 import {
 	AppQueryClientProvider,
 	createAppQueryClient,
@@ -19,6 +20,7 @@ export function getRouter() {
 		defaultPreloadStaleTime: 0,
 		defaultPendingMs: 0,
 		defaultErrorComponent: DashboardErrorScreen,
+		defaultNotFoundComponent: NotFoundScreen,
 		Wrap: ({ children }) => (
 			<AppQueryClientProvider queryClient={queryClient}>
 				{children}

apps/dashboard/src/routes/$.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { NotFoundScreen } from "#/components/layouts/not-found-screen";
+import { buildSeo, formatPageTitle } from "#/lib/seo";
+
+export const Route = createFileRoute("/$")({
+	beforeLoad: () => {
+		throw notFound();
+	},
+	head: ({ match }) =>
+		buildSeo({
+			path: match.pathname,
+			title: formatPageTitle("Page not found"),
+			description: "Check the URL or return to your dashboard.",
+			robots: "noindex",
+			includeCanonical: false,
+		}),
+	notFoundComponent: NotFoundScreen,
+});