Idiomatic place to store page metaData?

[yatesco]

(Hi, I'm new to TanStack but pretty familiar with TS/JS and React)

Where do you store the metadata that every application must surely use? For example, each page typically has a bunch of metadata:

• which roles are allowed to see it
• title
• description
• icon
• etc

This is used when:

• rendering a <MyMenu/> for the currently logged in user (e.g. matching on roles)
• rendering the standard <MyLayout ..../>
• etc

in the past I model this (something like the following) types and structs (excuse the hackery):

import { ReactNode } from "react";
import { IconType } from "react-icons";
import { FaBeer } from "react-icons/fa";

export enum PageId {
  Dashboard = "dashboard",
  BedStatus = "bed-status",
  PatientPriorityList = "patient-priority-list",
  TaskManager = "task-management-list",
}

export type PageItem = {
  contextRoot: PageId;
  title: string;
  page: ReactNode;
  icon: IconType;
  // allowedRoles: Role[]
};

// TODO =- what is the type here?
export const PagesArray: PageItem[] = [
  {
    contextRoot: PageId.Dashboard,
    title: "Dashboard",
    page: <div>Dashboard</div>,
    icon: FaBeer,
  },
  {
    contextRoot: PageId.BedStatus,
    title: "Bed Status",
    page: <div>The bed status page</div>,
    icon: FaBeer,
  },
  {
    contextRoot: PageId.PatientPriorityList,
    title: "Priority List",
    page: <div>The patient priority list</div>,
    icon: FaBeer,
  },
  {
    contextRoot: PageId.TaskManager,
    title: "Task Manager",
    page: <div>The task management list</div>,
    icon: FaBeer,
  },
];

export const IdToPage = new Map<PageId, PageItem>(
  PagesArray.map((obj) => [obj.contextRoot, obj])
);

// may throw error if there is no current page
export const currentPageId = (): PageId => {
  // replace this by hooking in the current routing machinery
  return PageId.BedStatus;
};

It feels right to me that this is decoupled from the current implementation of routing (i.e. TanStack Router) but what do you all do? How much do you couple your "these are the routes you can see" to the actual routing implementation library?

For example, I could store this meta data against each route's static data (although note that staticData isn't present on lazily loaded file routes!).

It feels clean to keep this separate, but then it feels like I'm not taking full advantage of the library. What do you all do? :-)