Make Profile page the default route (#1653)

* make profile the default route

* src/pages/Home.tsx -> src/pages/SessionsOverview.tsx

* UserHome -> UserSessionsOverview

* update snapshots, fix session overview button alignment

frontend/src/Router.test.tsx

@@ -18,18 +18,13 @@ import { segmentsToRoute } from "./Router";
 
 describe("Router", () => {
   describe("segmentsToRoute", () => {
-    it("returns home for route with no segments", () => {
+    it("returns profile for route with no segments", () => {
       const segments: string[] = [];
-      expect(segmentsToRoute(segments)).toEqual({ type: "home" });
+      expect(segmentsToRoute(segments)).toEqual({ type: "profile" });
     });
 
-    it("returns home for route with and empty string segment", () => {
+    it("returns profile for route with and empty string segment", () => {
       const segments: string[] = [""];
-      expect(segmentsToRoute(segments)).toEqual({ type: "home" });
-    });
-
-    it("returns profile for route with profile", () => {
-      const segments: string[] = ["profile"];
       expect(segmentsToRoute(segments)).toEqual({ type: "profile" });
     });
 

frontend/src/Router.tsx

@@ -25,8 +25,8 @@ type Location = {
   searchParams?: URLSearchParams;
 };
 
-type HomeRoute = { type: "home" };
 type ProfileRoute = { type: "profile" };
+type SessionOverviewRoute = { type: "sessions-overview" };
 type OAuth2ClientRoute = { type: "client"; id: string };
 type OAuth2SessionList = { type: "oauth2-session-list" };
 type BrowserSessionRoute = { type: "session"; id: string };
@@ -36,7 +36,7 @@ type VerifyEmailRoute = { type: "verify-email"; id: string };
 type UnknownRoute = { type: "unknown"; segments: string[] };
 
 export type Route =
-  | HomeRoute
+  | SessionOverviewRoute
   | ProfileRoute
   | OAuth2ClientRoute
   | OAuth2SessionList
@@ -48,10 +48,10 @@ export type Route =
 
 const routeToSegments = (route: Route): string[] => {
   switch (route.type) {
-    case "home":
-      return [];
     case "profile":
-      return ["profile"];
+      return [];
+    case "sessions-overview":
+      return ["sessions-overview"];
     case "verify-email":
       return ["emails", route.id, "verify"];
     case "client":
@@ -97,11 +97,11 @@ export const segmentsToRoute = (segments: string[]): Route => {
 
   // Special case for the home page
   if (segments.length === 0 || (segments.length === 1 && segments[0] === "")) {
-    return { type: "home" };
+    return { type: "profile" };
   }
 
-  if (matches("profile")) {
+  if (matches("sessions-overview")) {
-    return { type: "profile" };
+    return { type: "sessions-overview" };
   }
 
   if (matches("sessions")) {
@@ -169,7 +169,7 @@ export const routeAtom = atom(
   },
 );
 
-const Home = lazy(() => import("./pages/Home"));
+const SessionsOverview = lazy(() => import("./pages/SessionsOverview"));
 const Profile = lazy(() => import("./pages/Profile"));
 const OAuth2Client = lazy(() => import("./pages/OAuth2Client"));
 const BrowserSession = lazy(() => import("./pages/BrowserSession"));
@@ -182,10 +182,10 @@ const InnerRouter: React.FC = () => {
   const route = useAtomValue(routeAtom);
 
   switch (route.type) {
-    case "home":
-      return <Home />;
     case "profile":
       return <Profile />;
+    case "sessions-overview":
+      return <SessionsOverview />;
     case "oauth2-session-list":
       return <OAuth2SessionList />;
     case "browser-session-list":

frontend/src/components/Layout.tsx

@@ -42,8 +42,8 @@ const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
       <UserGreeting userId={userId} />
 
       <NavBar>
-        <NavItem route={{ type: "home" }}>Sessions</NavItem>
         <NavItem route={{ type: "profile" }}>Profile</NavItem>
+        <NavItem route={{ type: "sessions-overview" }}>Sessions</NavItem>
       </NavBar>
 
       <main>{children}</main>

frontend/src/components/NavBar/NavBar.stories.tsx

@@ -29,8 +29,8 @@ const meta = {
     <Provider>
       <WithHomePage>
         <NavBar {...props}>
-          <NavItem route={{ type: "home" }}>Home</NavItem>
+          <NavItem route={{ type: "sessions-overview" }}>Sessions</NavItem>
-          <NavItem route={{ type: "profile" }}>Emails</NavItem>
+          <NavItem route={{ type: "profile" }}>Profile</NavItem>
           <ExternalLink href="https://example.com">External</ExternalLink>
         </NavBar>
       </WithHomePage>

frontend/src/components/NavItem/NavItem.stories.tsx

@@ -46,8 +46,8 @@ type Story = StoryObj<typeof NavItem>;
 
 export const Active: Story = {
   args: {
-    route: { type: "home" },
+    route: { type: "sessions-overview" },
-    children: "Home",
+    children: "Sessions",
   },
 };
 

frontend/src/components/NavItem/NavItem.test.tsx

@@ -59,7 +59,7 @@ describe("NavItem", () => {
   it("render an active <NavItem />", () => {
     const component = create(
       <WithLocation path="/">
-        <NavItem route={{ type: "home" }}>Active</NavItem>
+        <NavItem route={{ type: "profile" }}>Active</NavItem>
       </WithLocation>,
     );
     const tree = component.toJSON();
@@ -69,7 +69,7 @@ describe("NavItem", () => {
   it("render an inactive <NavItem />", () => {
     const component = create(
       <WithLocation path="/account">
-        <NavItem route={{ type: "home" }}>Inactive</NavItem>
+        <NavItem route={{ type: "sessions-overview" }}>Inactive</NavItem>
       </WithLocation>,
     );
     const tree = component.toJSON();
@@ -79,7 +79,7 @@ describe("NavItem", () => {
   it("renders a different route", () => {
     const component = create(
       <WithLocation path="/">
-        <NavItem route={{ type: "profile" }}>Emails</NavItem>
+        <NavItem route={{ type: "sessions-overview" }}>Sessions</NavItem>
       </WithLocation>,
     );
     const tree = component.toJSON();

frontend/src/components/NavItem/__snapshots__/NavItem.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`NavItem > render an inactive <NavItem /> 1`] = `
 >
   <a
     className="_navItem_8603fc"
-    href="/"
+    href="/sessions-overview"
     onClick={[Function]}
   >
     Inactive
@@ -36,10 +36,10 @@ exports[`NavItem > renders a different route 1`] = `
 >
   <a
     className="_navItem_8603fc"
-    href="/profile"
+    href="/sessions-overview"
     onClick={[Function]}
   >
-    Emails
+    Sessions
   </a>
 </li>
 `;

frontend/src/components/UnverifiedEmailAlert/__snapshots__/UnverifiedEmailAlert.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`<UnverifiedEmailAlert /> > renders a warning when there are unverified
          
         <a
           class="_linkButton_4f14fc"
-          href="/profile"
+          href="/"
         >
           Review and verify
         </a>

frontend/src/components/UserSessionsOverview/UserSessionsOverview.module.css

@@ -17,7 +17,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-content: center;
+    align-items: flex-start;
     gap: var(--cpd-space-1x);
  }
 

frontend/src/components/UserSessionsOverview/UserSessionsOverview.stories.tsx

@@ -20,7 +20,7 @@ import { appConfigAtom, locationAtom } from "../../Router";
 import { makeFragmentData } from "../../gql";
 import { FRAGMENT as EMAIL_FRAGMENT } from "../UserEmail";
 
-import UserHome, { FRAGMENT } from "./UserHome";
+import UserSessionsOverview, { FRAGMENT } from "./UserSessionsOverview";
 
 type Props = {
   primaryEmail: string | null;
@@ -86,14 +86,14 @@ const Template: React.FC<Props> = ({
   return (
     <Provider>
       <WithHomePage>
-        <UserHome user={data} />
+        <UserSessionsOverview user={data} />
       </WithHomePage>
     </Provider>
   );
 };
 
 const meta = {
-  title: "Pages/User Home",
+  title: "Pages/User Sessions Overview",
   component: Template,
   tags: ["autodocs"],
 } satisfies Meta<typeof Template>;

frontend/src/components/UserSessionsOverview/UserSessionsOverview.test.tsx

@@ -18,10 +18,10 @@ import { describe, expect, it } from "vitest";
 import { makeFragmentData } from "../../gql";
 import { FRAGMENT as EMAIL_FRAGMENT } from "../UserEmail";
 
-import UserHome, { FRAGMENT } from "./";
+import UserSessionsOverview, { FRAGMENT } from "./";
 
-describe("UserHome", () => {
+describe("UserSessionsOverview", () => {
-  it("render an simple <UserHome />", () => {
+  it("render an simple <UserSessionsOverview />", () => {
     const primaryEmail = makeFragmentData(
       {
         id: "email:123",
@@ -56,12 +56,12 @@ describe("UserHome", () => {
       },
       FRAGMENT,
     );
-    const component = create(<UserHome user={user} />);
+    const component = create(<UserSessionsOverview user={user} />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it("render a <UserHome /> with sessions", () => {
+  it("render a <UserSessionsOverview /> with sessions", () => {
     const primaryEmail = makeFragmentData(
       {
         id: "email:123",
@@ -96,7 +96,7 @@ describe("UserHome", () => {
       },
       FRAGMENT,
     );
-    const component = create(<UserHome user={user} />);
+    const component = create(<UserSessionsOverview user={user} />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });

frontend/src/components/UserSessionsOverview/UserSessionsOverview.tsx

@@ -19,10 +19,10 @@ import { FragmentType, graphql, useFragment } from "../../gql";
 import Block from "../Block/Block";
 import BlockList from "../BlockList/BlockList";
 
-import styles from "./UserHome.module.css";
+import styles from "./UserSessionsOverview.module.css";
 
 export const FRAGMENT = graphql(/* GraphQL */ `
-  fragment UserHome_user on User {
+  fragment UserSessionsOverview_user on User {
     id
 
     primaryEmail {
@@ -48,7 +48,7 @@ export const FRAGMENT = graphql(/* GraphQL */ `
   }
 `);
 
-const UserHome: React.FC<{
+const UserSessionsOverview: React.FC<{
   user: FragmentType<typeof FRAGMENT>;
 }> = ({ user }) => {
   const data = useFragment(FRAGMENT, user);
@@ -106,4 +106,4 @@ const UserHome: React.FC<{
   );
 };
 
-export default UserHome;
+export default UserSessionsOverview;

frontend/src/components/UserSessionsOverview/__snapshots__/UserSessionsOverview.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UserHome > render a <UserHome /> with sessions 1`] = `
+exports[`UserSessionsOverview > render a <UserSessionsOverview /> with sessions 1`] = `
 <div
   className="_blockList_f8cc7f"
 >
@@ -10,10 +10,10 @@ exports[`UserHome > render a <UserHome /> with sessions 1`] = `
     Where you're signed in
   </h3>
   <div
-    className="_block_17898c _sessionListBlock_5d2854"
+    className="_block_17898c _sessionListBlock_1c0f31"
   >
     <div
-      className="_sessionListBlockInfo_5d2854"
+      className="_sessionListBlockInfo_1c0f31"
     >
       <h6
         className="_font-body-md-semibold_1g2sj_69"
@@ -38,10 +38,10 @@ exports[`UserHome > render a <UserHome /> with sessions 1`] = `
     </a>
   </div>
   <div
-    className="_block_17898c _sessionListBlock_5d2854"
+    className="_block_17898c _sessionListBlock_1c0f31"
   >
     <div
-      className="_sessionListBlockInfo_5d2854"
+      className="_sessionListBlockInfo_1c0f31"
     >
       <h6
         className="_font-body-md-semibold_1g2sj_69"
@@ -66,10 +66,10 @@ exports[`UserHome > render a <UserHome /> with sessions 1`] = `
     </a>
   </div>
   <div
-    className="_block_17898c _sessionListBlock_5d2854"
+    className="_block_17898c _sessionListBlock_1c0f31"
   >
     <div
-      className="_sessionListBlockInfo_5d2854"
+      className="_sessionListBlockInfo_1c0f31"
     >
       <h6
         className="_font-body-md-semibold_1g2sj_69"
@@ -96,7 +96,7 @@ exports[`UserHome > render a <UserHome /> with sessions 1`] = `
 </div>
 `;
 
-exports[`UserHome > render an simple <UserHome /> 1`] = `
+exports[`UserSessionsOverview > render an simple <UserSessionsOverview /> 1`] = `
 <div
   className="_blockList_f8cc7f"
 >
@@ -106,10 +106,10 @@ exports[`UserHome > render an simple <UserHome /> 1`] = `
     Where you're signed in
   </h3>
   <div
-    className="_block_17898c _sessionListBlock_5d2854"
+    className="_block_17898c _sessionListBlock_1c0f31"
   >
     <div
-      className="_sessionListBlockInfo_5d2854"
+      className="_sessionListBlockInfo_1c0f31"
     >
       <h6
         className="_font-body-md-semibold_1g2sj_69"
@@ -134,10 +134,10 @@ exports[`UserHome > render an simple <UserHome /> 1`] = `
     </a>
   </div>
   <div
-    className="_block_17898c _sessionListBlock_5d2854"
+    className="_block_17898c _sessionListBlock_1c0f31"
   >
     <div
-      className="_sessionListBlockInfo_5d2854"
+      className="_sessionListBlockInfo_1c0f31"
     >
       <h6
         className="_font-body-md-semibold_1g2sj_69"
@@ -162,10 +162,10 @@ exports[`UserHome > render an simple <UserHome /> 1`] = `
     </a>
   </div>
   <div
-    className="_block_17898c _sessionListBlock_5d2854"
+    className="_block_17898c _sessionListBlock_1c0f31"
   >
     <div
-      className="_sessionListBlockInfo_5d2854"
+      className="_sessionListBlockInfo_1c0f31"
     >
       <h6
         className="_font-body-md-semibold_1g2sj_69"

frontend/src/components/UserSessionsOverview/index.ts

@@ -12,4 +12,4 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export { default, FRAGMENT } from "./UserHome";
+export { default, FRAGMENT } from "./UserSessionsOverview";

frontend/src/components/__snapshots__/Layout.test.tsx.snap

@@ -2,8 +2,9 @@
 
 exports[`<Layout /> > renders app navigation correctly 1`] = `
 <a
+  aria-current="page"
   class="_navItem_8603fc"
-  href="/profile"
+  href="/"
 >
   Profile
 </a>
@@ -11,9 +12,8 @@ exports[`<Layout /> > renders app navigation correctly 1`] = `
 
 exports[`<Layout /> > renders app navigation correctly 2`] = `
 <a
-  aria-current="page"
   class="_navItem_8603fc"
-  href="/"
+  href="/sessions-overview"
 >
   Sessions
 </a>

frontend/src/gql/gql.ts

@@ -47,8 +47,6 @@ const documents = {
     types.SetPrimaryEmailDocument,
   "\n  query UserGreeting($userId: ID!) {\n    user(id: $userId) {\n      id\n      username\n      matrix {\n        mxid\n        displayName\n      }\n    }\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...UnverifiedEmailAlert\n      }\n    }\n  }\n":
     types.UserGreetingDocument,
-  "\n  fragment UserHome_user on User {\n    id\n\n    primaryEmail {\n      id\n      ...UserEmail_email\n    }\n\n    confirmedEmails: emails(first: 0, state: CONFIRMED) {\n      totalCount\n    }\n\n    browserSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    oauth2Sessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    compatSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n  }\n":
-    types.UserHome_UserFragmentDoc,
   "\n  mutation AddEmail($userId: ID!, $email: String!) {\n    addEmail(input: { userId: $userId, email: $email }) {\n      status\n      violations\n      email {\n        id\n        ...UserEmail_email\n      }\n    }\n  }\n":
     types.AddEmailDocument,
   "\n  query UserEmailListQuery(\n    $userId: ID!\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n  ) {\n    user(id: $userId) {\n      id\n\n      emails(first: $first, after: $after, last: $last, before: $before) {\n        edges {\n          cursor\n          node {\n            id\n            ...UserEmail_email\n          }\n        }\n        totalCount\n        pageInfo {\n          hasNextPage\n          hasPreviousPage\n          startCursor\n          endCursor\n        }\n      }\n    }\n  }\n":
@@ -57,6 +55,8 @@ const documents = {
     types.UserPrimaryEmailDocument,
   "\n  mutation SetDisplayName($userId: ID!, $displayName: String) {\n    setDisplayName(input: { userId: $userId, displayName: $displayName }) {\n      status\n      user {\n        id\n        matrix {\n          displayName\n        }\n      }\n    }\n  }\n":
     types.SetDisplayNameDocument,
+  "\n  fragment UserSessionsOverview_user on User {\n    id\n\n    primaryEmail {\n      id\n      ...UserEmail_email\n    }\n\n    confirmedEmails: emails(first: 0, state: CONFIRMED) {\n      totalCount\n    }\n\n    browserSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    oauth2Sessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    compatSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n  }\n":
+    types.UserSessionsOverview_UserFragmentDoc,
   "\n  fragment UserEmail_verifyEmail on UserEmail {\n    id\n    email\n  }\n":
     types.UserEmail_VerifyEmailFragmentDoc,
   "\n  mutation VerifyEmail($id: ID!, $code: String!) {\n    verifyEmail(input: { userEmailId: $id, code: $code }) {\n      status\n\n      user {\n        id\n        primaryEmail {\n          id\n        }\n      }\n\n      email {\n        id\n        ...UserEmail_email\n      }\n    }\n  }\n":
@@ -65,10 +65,10 @@ const documents = {
     types.ResendVerificationEmailDocument,
   "\n  query BrowserSessionQuery($id: ID!) {\n    browserSession(id: $id) {\n      id\n      createdAt\n      lastAuthentication {\n        id\n        createdAt\n      }\n      user {\n        id\n        username\n      }\n    }\n  }\n":
     types.BrowserSessionQueryDocument,
-  "\n  query HomeQuery {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...UserHome_user\n      }\n    }\n  }\n":
-    types.HomeQueryDocument,
   "\n  query OAuth2ClientQuery($id: ID!) {\n    oauth2Client(id: $id) {\n      id\n      clientId\n      clientName\n      clientUri\n      tosUri\n      policyUri\n      redirectUris\n    }\n  }\n":
     types.OAuth2ClientQueryDocument,
+  "\n  query SessionsOverviewQuery {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...UserSessionsOverview_user\n      }\n    }\n  }\n":
+    types.SessionsOverviewQueryDocument,
   "\n  query VerifyEmailQuery($id: ID!) {\n    userEmail(id: $id) {\n      ...UserEmail_verifyEmail\n    }\n  }\n":
     types.VerifyEmailQueryDocument,
 };
@@ -189,12 +189,6 @@ export function graphql(
 export function graphql(
   source: "\n  query UserGreeting($userId: ID!) {\n    user(id: $userId) {\n      id\n      username\n      matrix {\n        mxid\n        displayName\n      }\n    }\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...UnverifiedEmailAlert\n      }\n    }\n  }\n",
 ): (typeof documents)["\n  query UserGreeting($userId: ID!) {\n    user(id: $userId) {\n      id\n      username\n      matrix {\n        mxid\n        displayName\n      }\n    }\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...UnverifiedEmailAlert\n      }\n    }\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(
-  source: "\n  fragment UserHome_user on User {\n    id\n\n    primaryEmail {\n      id\n      ...UserEmail_email\n    }\n\n    confirmedEmails: emails(first: 0, state: CONFIRMED) {\n      totalCount\n    }\n\n    browserSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    oauth2Sessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    compatSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n  }\n",
-): (typeof documents)["\n  fragment UserHome_user on User {\n    id\n\n    primaryEmail {\n      id\n      ...UserEmail_email\n    }\n\n    confirmedEmails: emails(first: 0, state: CONFIRMED) {\n      totalCount\n    }\n\n    browserSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    oauth2Sessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    compatSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -219,6 +213,12 @@ export function graphql(
 export function graphql(
   source: "\n  mutation SetDisplayName($userId: ID!, $displayName: String) {\n    setDisplayName(input: { userId: $userId, displayName: $displayName }) {\n      status\n      user {\n        id\n        matrix {\n          displayName\n        }\n      }\n    }\n  }\n",
 ): (typeof documents)["\n  mutation SetDisplayName($userId: ID!, $displayName: String) {\n    setDisplayName(input: { userId: $userId, displayName: $displayName }) {\n      status\n      user {\n        id\n        matrix {\n          displayName\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: "\n  fragment UserSessionsOverview_user on User {\n    id\n\n    primaryEmail {\n      id\n      ...UserEmail_email\n    }\n\n    confirmedEmails: emails(first: 0, state: CONFIRMED) {\n      totalCount\n    }\n\n    browserSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    oauth2Sessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    compatSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n  }\n",
+): (typeof documents)["\n  fragment UserSessionsOverview_user on User {\n    id\n\n    primaryEmail {\n      id\n      ...UserEmail_email\n    }\n\n    confirmedEmails: emails(first: 0, state: CONFIRMED) {\n      totalCount\n    }\n\n    browserSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    oauth2Sessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n\n    compatSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -247,14 +247,14 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query HomeQuery {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...UserHome_user\n      }\n    }\n  }\n",
+  source: "\n  query OAuth2ClientQuery($id: ID!) {\n    oauth2Client(id: $id) {\n      id\n      clientId\n      clientName\n      clientUri\n      tosUri\n      policyUri\n      redirectUris\n    }\n  }\n",
-): (typeof documents)["\n  query HomeQuery {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...UserHome_user\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query OAuth2ClientQuery($id: ID!) {\n    oauth2Client(id: $id) {\n      id\n      clientId\n      clientName\n      clientUri\n      tosUri\n      policyUri\n      redirectUris\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query OAuth2ClientQuery($id: ID!) {\n    oauth2Client(id: $id) {\n      id\n      clientId\n      clientName\n      clientUri\n      tosUri\n      policyUri\n      redirectUris\n    }\n  }\n",
+  source: "\n  query SessionsOverviewQuery {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...UserSessionsOverview_user\n      }\n    }\n  }\n",
-): (typeof documents)["\n  query OAuth2ClientQuery($id: ID!) {\n    oauth2Client(id: $id) {\n      id\n      clientId\n      clientName\n      clientUri\n      tosUri\n      policyUri\n      redirectUris\n    }\n  }\n"];
+): (typeof documents)["\n  query SessionsOverviewQuery {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...UserSessionsOverview_user\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

frontend/src/gql/graphql.ts

@@ -1214,29 +1214,6 @@ export type UserGreetingQuery = {
       });
 };
 
-export type UserHome_UserFragment = {
-  __typename?: "User";
-  id: string;
-  primaryEmail?:
-    | ({ __typename?: "UserEmail"; id: string } & {
-        " $fragmentRefs"?: { UserEmail_EmailFragment: UserEmail_EmailFragment };
-      })
-    | null;
-  confirmedEmails: { __typename?: "UserEmailConnection"; totalCount: number };
-  browserSessions: {
-    __typename?: "BrowserSessionConnection";
-    totalCount: number;
-  };
-  oauth2Sessions: {
-    __typename?: "Oauth2SessionConnection";
-    totalCount: number;
-  };
-  compatSessions: {
-    __typename?: "CompatSessionConnection";
-    totalCount: number;
-  };
-} & { " $fragmentName"?: "UserHome_UserFragment" };
-
 export type AddEmailMutationVariables = Exact<{
   userId: Scalars["ID"]["input"];
   email: Scalars["String"]["input"];
@@ -1325,6 +1302,29 @@ export type SetDisplayNameMutation = {
   };
 };
 
+export type UserSessionsOverview_UserFragment = {
+  __typename?: "User";
+  id: string;
+  primaryEmail?:
+    | ({ __typename?: "UserEmail"; id: string } & {
+        " $fragmentRefs"?: { UserEmail_EmailFragment: UserEmail_EmailFragment };
+      })
+    | null;
+  confirmedEmails: { __typename?: "UserEmailConnection"; totalCount: number };
+  browserSessions: {
+    __typename?: "BrowserSessionConnection";
+    totalCount: number;
+  };
+  oauth2Sessions: {
+    __typename?: "Oauth2SessionConnection";
+    totalCount: number;
+  };
+  compatSessions: {
+    __typename?: "CompatSessionConnection";
+    totalCount: number;
+  };
+} & { " $fragmentName"?: "UserSessionsOverview_UserFragment" };
+
 export type UserEmail_VerifyEmailFragment = {
   __typename?: "UserEmail";
   id: string;
@@ -1395,17 +1395,6 @@ export type BrowserSessionQueryQuery = {
   } | null;
 };
 
-export type HomeQueryQueryVariables = Exact<{ [key: string]: never }>;
-
-export type HomeQueryQuery = {
-  __typename?: "Query";
-  viewer:
-    | { __typename: "Anonymous" }
-    | ({ __typename: "User"; id: string } & {
-        " $fragmentRefs"?: { UserHome_UserFragment: UserHome_UserFragment };
-      });
-};
-
 export type OAuth2ClientQueryQueryVariables = Exact<{
   id: Scalars["ID"]["input"];
 }>;
@@ -1424,6 +1413,21 @@ export type OAuth2ClientQueryQuery = {
   } | null;
 };
 
+export type SessionsOverviewQueryQueryVariables = Exact<{
+  [key: string]: never;
+}>;
+
+export type SessionsOverviewQueryQuery = {
+  __typename?: "Query";
+  viewer:
+    | { __typename: "Anonymous" }
+    | ({ __typename: "User"; id: string } & {
+        " $fragmentRefs"?: {
+          UserSessionsOverview_UserFragment: UserSessionsOverview_UserFragment;
+        };
+      });
+};
+
 export type VerifyEmailQueryQueryVariables = Exact<{
   id: Scalars["ID"]["input"];
 }>;
@@ -1640,12 +1644,12 @@ export const UserEmail_EmailFragmentDoc = {
     },
   ],
 } as unknown as DocumentNode<UserEmail_EmailFragment, unknown>;
-export const UserHome_UserFragmentDoc = {
+export const UserSessionsOverview_UserFragmentDoc = {
   kind: "Document",
   definitions: [
     {
       kind: "FragmentDefinition",
-      name: { kind: "Name", value: "UserHome_user" },
+      name: { kind: "Name", value: "UserSessionsOverview_user" },
       typeCondition: {
         kind: "NamedType",
         name: { kind: "Name", value: "User" },
@@ -1777,7 +1781,7 @@ export const UserHome_UserFragmentDoc = {
       },
     },
   ],
-} as unknown as DocumentNode<UserHome_UserFragment, unknown>;
+} as unknown as DocumentNode<UserSessionsOverview_UserFragment, unknown>;
 export const UserEmail_VerifyEmailFragmentDoc = {
   kind: "Document",
   definitions: [
@@ -3942,13 +3946,70 @@ export const BrowserSessionQueryDocument = {
   BrowserSessionQueryQuery,
   BrowserSessionQueryQueryVariables
 >;
-export const HomeQueryDocument = {
+export const OAuth2ClientQueryDocument = {
   kind: "Document",
   definitions: [
     {
       kind: "OperationDefinition",
       operation: "query",
-      name: { kind: "Name", value: "HomeQuery" },
+      name: { kind: "Name", value: "OAuth2ClientQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "id" } },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "ID" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "oauth2Client" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "id" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "id" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                { kind: "Field", name: { kind: "Name", value: "clientId" } },
+                { kind: "Field", name: { kind: "Name", value: "clientName" } },
+                { kind: "Field", name: { kind: "Name", value: "clientUri" } },
+                { kind: "Field", name: { kind: "Name", value: "tosUri" } },
+                { kind: "Field", name: { kind: "Name", value: "policyUri" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "redirectUris" },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  OAuth2ClientQueryQuery,
+  OAuth2ClientQueryQueryVariables
+>;
+export const SessionsOverviewQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "SessionsOverviewQuery" },
       selectionSet: {
         kind: "SelectionSet",
         selections: [
@@ -3971,7 +4032,10 @@ export const HomeQueryDocument = {
                       { kind: "Field", name: { kind: "Name", value: "id" } },
                       {
                         kind: "FragmentSpread",
-                        name: { kind: "Name", value: "UserHome_user" },
+                        name: {
+                          kind: "Name",
+                          value: "UserSessionsOverview_user",
+                        },
                       },
                     ],
                   },
@@ -4000,7 +4064,7 @@ export const HomeQueryDocument = {
     },
     {
       kind: "FragmentDefinition",
-      name: { kind: "Name", value: "UserHome_user" },
+      name: { kind: "Name", value: "UserSessionsOverview_user" },
       typeCondition: {
         kind: "NamedType",
         name: { kind: "Name", value: "User" },
@@ -4116,63 +4180,9 @@ export const HomeQueryDocument = {
       },
     },
   ],
-} as unknown as DocumentNode<HomeQueryQuery, HomeQueryQueryVariables>;
-export const OAuth2ClientQueryDocument = {
-  kind: "Document",
-  definitions: [
-    {
-      kind: "OperationDefinition",
-      operation: "query",
-      name: { kind: "Name", value: "OAuth2ClientQuery" },
-      variableDefinitions: [
-        {
-          kind: "VariableDefinition",
-          variable: { kind: "Variable", name: { kind: "Name", value: "id" } },
-          type: {
-            kind: "NonNullType",
-            type: { kind: "NamedType", name: { kind: "Name", value: "ID" } },
-          },
-        },
-      ],
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          {
-            kind: "Field",
-            name: { kind: "Name", value: "oauth2Client" },
-            arguments: [
-              {
-                kind: "Argument",
-                name: { kind: "Name", value: "id" },
-                value: {
-                  kind: "Variable",
-                  name: { kind: "Name", value: "id" },
-                },
-              },
-            ],
-            selectionSet: {
-              kind: "SelectionSet",
-              selections: [
-                { kind: "Field", name: { kind: "Name", value: "id" } },
-                { kind: "Field", name: { kind: "Name", value: "clientId" } },
-                { kind: "Field", name: { kind: "Name", value: "clientName" } },
-                { kind: "Field", name: { kind: "Name", value: "clientUri" } },
-                { kind: "Field", name: { kind: "Name", value: "tosUri" } },
-                { kind: "Field", name: { kind: "Name", value: "policyUri" } },
-                {
-                  kind: "Field",
-                  name: { kind: "Name", value: "redirectUris" },
-                },
-              ],
-            },
-          },
-        ],
-      },
-    },
-  ],
 } as unknown as DocumentNode<
-  OAuth2ClientQueryQuery,
+  SessionsOverviewQueryQuery,
-  OAuth2ClientQueryQueryVariables
+  SessionsOverviewQueryQueryVariables
 >;
 export const VerifyEmailQueryDocument = {
   kind: "Document",

frontend/src/pages/SessionsOverview.tsx

@@ -18,28 +18,28 @@ import { atomWithQuery } from "jotai-urql";
 import { mapQueryAtom } from "../atoms";
 import GraphQLError from "../components/GraphQLError";
 import NotLoggedIn from "../components/NotLoggedIn";
-import UserHome from "../components/UserHome";
+import UserSessionsOverview from "../components/UserSessionsOverview";
 import { graphql } from "../gql";
 import { isErr, unwrapErr, unwrapOk } from "../result";
 
 const QUERY = graphql(/* GraphQL */ `
-  query HomeQuery {
+  query SessionsOverviewQuery {
     viewer {
       __typename
 
       ... on User {
         id
-        ...UserHome_user
+        ...UserSessionsOverview_user
       }
     }
   }
 `);
 
-const homeQueryAtom = atomWithQuery({
+const sessionsOverviewQueryAtom = atomWithQuery({
   query: QUERY,
 });
 
-const homeAtom = mapQueryAtom(homeQueryAtom, (data) => {
+const sessionsOverviewAtom = mapQueryAtom(sessionsOverviewQueryAtom, (data) => {
   if (data.viewer?.__typename === "User") {
     return data.viewer;
   }
@@ -47,14 +47,14 @@ const homeAtom = mapQueryAtom(homeQueryAtom, (data) => {
   return null;
 });
 
-const Home: React.FC = () => {
+const SessionsOverview: React.FC = () => {
-  const result = useAtomValue(homeAtom);
+  const result = useAtomValue(sessionsOverviewAtom);
   if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
 
   const data = unwrapOk(result);
   if (data === null) return <NotLoggedIn />;
 
-  return <UserHome user={data} />;
+  return <UserSessionsOverview user={data} />;
 };
 
-export default Home;
+export default SessionsOverview;

frontend/src/test-utils/WithLocation.tsx

@@ -37,7 +37,7 @@ const HydrateLocation: React.FC<React.PropsWithChildren<{ path: string }>> = ({
  * ```
  * const component = create(
       <WithLocation path="/">
-        <NavItem route={{ type: "home" }}>Active</NavItem>
+        <NavItem route={{ type: "profile" }}>Active</NavItem>
       </WithLocation>,
     );
  * ```