split frontpage into sub-routes

packages/hub/src/app/(frontpage)/FrontPage.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { FC } from "react";
+import { graphql } from "relay-runtime";
+
+import { SerializablePreloadedQuery } from "@/relay/loadPageQuery";
+import { usePageQuery } from "@/relay/usePageQuery";
+
+import { FrontPageModelList } from "./FrontPageModelList";
+
+import { FrontPageQuery } from "@/__generated__/FrontPageQuery.graphql";
+
+const Query = graphql`
+  query FrontPageQuery {
+    ...FrontPageModelList
+  }
+`;
+
+export const FrontPage: FC<{
+  query: SerializablePreloadedQuery<FrontPageQuery>;
+}> = ({ query }) => {
+  const [data] = usePageQuery(Query, query);
+
+  return <FrontPageModelList dataRef={data} />;
+};

packages/hub/src/app/(frontpage)/definitions/DefinitionsPage.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { FC } from "react";
+import { graphql } from "relay-runtime";
+
+import { SerializablePreloadedQuery } from "@/relay/loadPageQuery";
+import { usePageQuery } from "@/relay/usePageQuery";
+
+import { FrontPageDefinitionList } from "./FrontPageDefinitionList";
+
+import { DefinitionsPageQuery } from "@/__generated__/DefinitionsPageQuery.graphql";
+
+const Query = graphql`
+  query DefinitionsPageQuery {
+    ...FrontPageDefinitionList
+  }
+`;
+
+export const DefinitionsPage: FC<{
+  query: SerializablePreloadedQuery<DefinitionsPageQuery>;
+}> = ({ query }) => {
+  const [data] = usePageQuery(Query, query);
+
+  return <FrontPageDefinitionList dataRef={data} />;
+};

packages/hub/src/app/(frontpage)/definitions/page.tsx

@@ -0,0 +1,13 @@
+import { loadPageQuery } from "@/relay/loadPageQuery";
+
+import { DefinitionsPage } from "./DefinitionsPage";
+
+import QueryNode, {
+  DefinitionsPageQuery,
+} from "@/__generated__/DefinitionsPageQuery.graphql";
+
+export default async function OuterDefinitionsPage() {
+  const query = await loadPageQuery<DefinitionsPageQuery>(QueryNode, {});
+
+  return <DefinitionsPage query={query} />;
+}

packages/hub/src/app/(frontpage)/groups/GroupsPage.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { FC } from "react";
+import { graphql } from "relay-runtime";
+
+import { SerializablePreloadedQuery } from "@/relay/loadPageQuery";
+import { usePageQuery } from "@/relay/usePageQuery";
+
+import { FrontPageGroupList } from "./FrontPageGroupList";
+
+import { GroupsPageQuery } from "@/__generated__/GroupsPageQuery.graphql";
+
+const Query = graphql`
+  query GroupsPageQuery {
+    ...FrontPageGroupList
+  }
+`;
+
+export const GroupsPage: FC<{
+  query: SerializablePreloadedQuery<GroupsPageQuery>;
+}> = ({ query }) => {
+  const [data] = usePageQuery(Query, query);
+
+  return <FrontPageGroupList dataRef={data} />;
+};

packages/hub/src/app/(frontpage)/groups/page.tsx

@@ -0,0 +1,13 @@
+import { loadPageQuery } from "@/relay/loadPageQuery";
+
+import { GroupsPage } from "./GroupsPage";
+
+import QueryNode, {
+  GroupsPageQuery,
+} from "@/__generated__/GroupsPageQuery.graphql";
+
+export default async function OuterGroupsPage() {
+  const query = await loadPageQuery<GroupsPageQuery>(QueryNode, {});
+
+  return <GroupsPage query={query} />;
+}

packages/hub/src/app/(frontpage)/layout.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from "react";
+
+import { NarrowPageLayout } from "@/components/layout/NarrowPageLayout";
+import {
+  StyledTabLink,
+  StyledTabLinkList,
+} from "@/components/ui/StyledTabLink";
+import { definitionsRoute, groupsRoute, variablesRoute } from "@/routes";
+
+export default function FrontPageLayout({ children }: PropsWithChildren) {
+  return (
+    <NarrowPageLayout>
+      <StyledTabLinkList>
+        <StyledTabLink name="Models" href="/" prefetch />
+        <StyledTabLink name="Variables" href={variablesRoute()} prefetch />
+        <StyledTabLink name="Definitions" href={definitionsRoute()} prefetch />
+        <StyledTabLink name="Groups" href={groupsRoute()} prefetch />
+      </StyledTabLinkList>
+      <div className="mt-4">{children}</div>
+    </NarrowPageLayout>
+  );
+}

packages/hub/src/app/page.tsx → packages/hub/src/app/(frontpage)/page.tsx

@@ -1,4 +1,3 @@
-import { NarrowPageLayout } from "@/components/layout/NarrowPageLayout";
 import { loadPageQuery } from "@/relay/loadPageQuery";
 
 import { FrontPage } from "./FrontPage";
@@ -10,9 +9,5 @@ import QueryNode, {
 export default async function OuterFrontPage() {
   const query = await loadPageQuery<FrontPageQuery>(QueryNode, {});
 
-  return (
-    <NarrowPageLayout>
-      <FrontPage query={query} />
-    </NarrowPageLayout>
-  );
+  return <FrontPage query={query} />;
 }

packages/hub/src/app/(frontpage)/variables/VariablesPage.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { FC } from "react";
+import { graphql } from "relay-runtime";
+
+import { SerializablePreloadedQuery } from "@/relay/loadPageQuery";
+import { usePageQuery } from "@/relay/usePageQuery";
+
+import { FrontPageVariableList } from "./FrontPageVariableList";
+
+import { VariablesPageQuery } from "@/__generated__/VariablesPageQuery.graphql";
+
+const Query = graphql`
+  query VariablesPageQuery {
+    ...FrontPageVariableList
+  }
+`;
+
+export const VariablesPage: FC<{
+  query: SerializablePreloadedQuery<VariablesPageQuery>;
+}> = ({ query }) => {
+  const [data] = usePageQuery(Query, query);
+
+  return <FrontPageVariableList dataRef={data} />;
+};

packages/hub/src/app/(frontpage)/variables/page.tsx

@@ -0,0 +1,13 @@
+import { loadPageQuery } from "@/relay/loadPageQuery";
+
+import { VariablesPage } from "./VariablesPage";
+
+import QueryNode, {
+  VariablesPageQuery,
+} from "@/__generated__/VariablesPageQuery.graphql";
+
+export default async function OuterVariablesPage() {
+  const query = await loadPageQuery<VariablesPageQuery>(QueryNode, {});
+
+  return <VariablesPage query={query} />;
+}

packages/hub/src/components/ui/StyledTabLink.tsx

@@ -11,6 +11,7 @@ type StyledTabLinkProps = {
   href: string;
   icon?: FC<IconProps>;
   selected?: (pathname: string, href: string) => boolean;
+  prefetch?: boolean;
 };
 
 type StyledTabLinkType = React.FC<StyledTabLinkProps> & {
@@ -22,15 +23,19 @@ export const StyledTabLink: StyledTabLinkType = ({
   href,
   icon: Icon,
   selected,
+  prefetch,
 }) => {
   const pathname = usePathname();
   const isSelected = selected ? selected(pathname, href) : pathname === href;
 
   return (
-    <Link href={href}>
+    <Link href={href} prefetch={prefetch}>
       <StyledTab.Button isSelected={isSelected} name={name} icon={Icon} />
     </Link>
   );
 };
 
-StyledTabLink.List = StyledTab.ListDiv;
+const StyledTabLinkList = StyledTab.ListDiv;
+StyledTabLink.List = StyledTabLinkList;
+
+export { StyledTabLinkList };

packages/hub/src/routes.ts

@@ -148,6 +148,18 @@ export function userVariablesRoute({ username }: { username: string }) {
   return `/users/${username}/variables`;
 }
 
+export function groupsRoute() {
+  return "/groups";
+}
+
+export function definitionsRoute() {
+  return "/definitions";
+}
+
+export function variablesRoute() {
+  return "/variables";
+}
+
 export function groupRoute({ slug }: { slug: string }) {
   return `/groups/${slug}`;
 }