Add a small explanation to the personal tokens page

Author: sandhose

src/components/page.module.css

@@ -29,6 +29,15 @@
   color: var(--cpd-color-text-primary);
 }
 
+.description {
+  font: var(--cpd-font-body-md-regular);
+  letter-spacing: var(--cpd-font-letter-spacing-body-md);
+  color: var(--cpd-color-text-secondary);
+  max-width: 60ch;
+  text-align: justify;
+  grid-column: 1 / span 2;
+}
+
 .search {
   grid-area: search;
   display: flex;

src/components/page.tsx

@@ -22,6 +22,17 @@ export const Title = ({ className, children, ...props }: TitleProps) => (
   </h1>
 );
 
+type DescriptionProps = React.ComponentProps<"p">;
+export const Description = ({
+  className,
+  children,
+  ...props
+}: DescriptionProps) => (
+  <p className={cx(styles["description"], className)} {...props}>
+    {children}
+  </p>
+);
+
 type ControlsProps = React.ComponentProps<"div">;
 export const Controls = ({ className, children, ...props }: ControlsProps) => (
   <div className={cx(styles["controls"], className)} {...props}>

src/routes/_console.personal-tokens.tsx

@@ -80,6 +80,13 @@ const titleMessage = defineMessage({
   description: "The title of the personal tokens list page",
 });
 
+const descriptionMessage = defineMessage({
+  id: "pages.personal_tokens.description",
+  defaultMessage:
+    "Personal tokens are long-lived access tokens with specific access, including Synapse and MAS administration API access. They are useful for automating tasks and for creating integrations.",
+  description: "The description of the personal tokens list page",
+});
+
 export const Route = createFileRoute("/_console/personal-tokens")({
   staticData: {
     breadcrumb: {
@@ -129,6 +136,9 @@ export const Route = createFileRoute("/_console/personal-tokens")({
                 <FormattedMessage {...messages.actionAdd} />
               </Page.Button>
             </Page.Controls>
+            <Page.Description>
+              <FormattedMessage {...descriptionMessage} />
+            </Page.Description>
           </Page.Header>
 
           <Placeholder.LoadingTable />
@@ -892,12 +902,17 @@ function RouteComponent() {
             <Page.Title>
               <FormattedMessage {...titleMessage} />
             </Page.Title>
+
             <Page.Controls>
               <PersonalTokenAddButton
                 serverName={credentials.serverName}
                 synapseRoot={synapseRoot}
               />
             </Page.Controls>
+
+            <Page.Description>
+              <FormattedMessage {...descriptionMessage} />
+            </Page.Description>
           </Page.Header>
 
           <Table.Root>

translations/extracted/en.json

@@ -231,6 +231,10 @@
     "description": "Label for the token creation date field",
     "message": "Created at"
   },
+  "pages.personal_tokens.description": {
+    "description": "The description of the personal tokens list page",
+    "message": "Personal tokens are long-lived access tokens with specific access, including Synapse and MAS administration API access. They are useful for automating tasks and for creating integrations."
+  },
   "pages.personal_tokens.device_id_help": {
     "description": "Help text for device ID field",
     "message": "Leave empty to generate a random 10-character device ID"