Add sidebar metadata

[charliepark]

We have a number of forms and views contained within sidebars. In our designs, we have a Properties Table at the top of the sidebar including static metadata, like the ID, Created At, Updated At, (more on those three in a sec, but "etc. for now") details for the given resource. Not all of our sidebars currently include the relevant metadata.

This PR adds those PropertiesTables to the sidebars throughout the app. A few examples …

As you can see, every resource ends up having the three elements of ID, Created At, and Updated At. Part of this PR involves setting those as the defaults, with the easy addition of relevant-to-that-type-of-resource extra rows. This does make the metadata tables a little taller, and Crespo noted in #994 that we might want to figure out how to tighten up the tables, possibly by removing the Updated row. That's certainly an option if we feel like it's too tall.

The PR also updates a few of the resources to have LinkCells, where you can click on the name of the resource in the parent overview table and open the sidebar, without needing to click on the action button and then the "Edit" button from within the dropdown. This PR doesn't remove the existing Edit button in the action menu, even though there's a bit of redundancy there.

Closes #994

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
console	Ready	Preview	Jul 22, 2026 10:30pm

[charliepark]

Worth noting that currently we disable the edit button on the router route if the route is a VPC subnet. By making this a LinkCell, the route sidebar is openable, but we already prevent the user from modifying the route:

[fakemonster]

just a couple little ideas

[fakemonster]

here and in external-subnet-edit there aren't form dividers after their properties table. i'm not totally sure if the goal is "all edit forms have a divider after a properties table", but if it is, maybe we make that part of the form itself. stop me if the idea is too cute

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index dc2ba135..c6192c02 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -11,19 +11,24 @@ import type { FieldValues, UseFormReturn } from 'react-hook-form'
 
 import { useShouldAnimateModal } from '~/hooks/use-should-animate-modal'
 import { Button } from '~/ui/lib/Button'
+import { FormDivider } from '~/ui/lib/Divider'
 import { Modal } from '~/ui/lib/Modal'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { SideModal } from '~/ui/lib/SideModal'
 
 type CreateFormProps = {
   formType: 'create'
   /** Only needed if you need to override the default button text (`Create ${resourceName}`) */
   submitLabel?: string
+  metadata?: never
 }
 
 type EditFormProps = {
   formType: 'edit'
   /** Not permitted, as all edit form buttons should read `Update ${resourceName}` */
   submitLabel?: never
+  /** Read-only resource rows shown above the editable fields. */
+  metadata?: ReactNode
 }
 
 type SideModalFormProps<TFieldValues extends FieldValues> = {
@@ -53,6 +58,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
   form,
   formType,
   children,
+  metadata,
   onDismiss,
   resourceName,
   submitDisabled,
@@ -107,6 +113,12 @@ export function SideModalForm<TFieldValues extends FieldValues>({
             form.handleSubmit(onSubmit)(e)
           }}
         >
+          {metadata && (
+            <>
+              <PropertiesTable>{metadata}</PropertiesTable>
+              <FormDivider />
+            </>
+          )}
           {children}
         </form>
       </SideModal.Body>
diff --git a/app/forms/project-edit.tsx b/app/forms/project-edit.tsx
index 00dea190..1abda782 100644
--- a/app/forms/project-edit.tsx
+++ b/app/forms/project-edit.tsx
@@ -17,7 +17,6 @@ import { HL } from '~/components/HL'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
-import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
@@ -69,11 +68,8 @@ export default function EditProjectSideModalForm() {
       }}
       loading={editProject.isPending}
       submitError={editProject.error}
+      metadata={<PropertiesTable.ResourceRows resource={project} />}
     >
-      <PropertiesTable>
-        <PropertiesTable.ResourceRows resource={project} />
-      </PropertiesTable>
-      <FormDivider />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <SideModalFormDocs docs={[docLinks.projects]} />
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
index 8bc8415d..c949f2d6 100644
--- a/app/forms/subnet-edit.tsx
+++ b/app/forms/subnet-edit.tsx
@@ -95,13 +95,14 @@ export default function EditSubnetForm() {
       }}
       loading={updateSubnet.isPending}
       submitError={updateSubnet.error}
+      metadata={
+        <>
+          <PropertiesTable.ResourceRows resource={subnet} />
+          <PropertiesTable.Row label="IPv4 block">{subnet.ipv4Block}</PropertiesTable.Row>
+          <PropertiesTable.Row label="IPv6 block">{subnet.ipv6Block}</PropertiesTable.Row>
+        </>
+      }
     >
-      <PropertiesTable>
-        <PropertiesTable.ResourceRows resource={subnet} />
-        <PropertiesTable.Row label="IPv4 block">{subnet.ipv4Block}</PropertiesTable.Row>
-        <PropertiesTable.Row label="IPv6 block">{subnet.ipv6Block}</PropertiesTable.Row>
-      </PropertiesTable>
-      <FormDivider />
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <FormDivider />

[fakemonster]

i think it's perfectly possible for this to be deleted between requesting it and getting a response, but it seems more likely that you'd reach this case by having a network error... in which case perhaps the more reasonable thing to do is not assume it's been deleted, and just show the id?