chore: convert last few routes

app/pages/system/SiloImagesPage.tsx → app/pages/SiloImagesPage.tsx

@@ -51,11 +51,13 @@ const EmptyState = () => (
 
 const imageList = getListQFn('imageList', {})
 
-export async function loader() {
+export async function clientLoader() {
   await queryClient.prefetchQuery(imageList.optionsFn())
   return null
 }
 
+export const handle = { crumb: 'Images' }
+
 const colHelper = createColumnHelper<Image>()
 const staticCols = [
   colHelper.accessor('name', {
@@ -66,8 +68,7 @@ const staticCols = [
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
-Component.displayName = 'SiloImagesPage'
-export function Component() {
+export default function SiloImagesPage() {
   const [showModal, setShowModal] = useState(false)
   const [demoteImage, setDemoteImage] = useState<Image | null>(null)
 

app/pages/project/vpcs/VpcPage.tsx

@@ -27,12 +27,12 @@ import { VpcDocsPopover } from './VpcsPage'
 const vpcView = ({ project, vpc }: PP.Vpc) =>
   apiq('vpcView', { path: { vpc }, query: { project } })
 
-VpcPage.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   await queryClient.prefetchQuery(vpcView(getVpcSelector(params)))
   return null
 }
 
-export function VpcPage() {
+export default function VpcPage() {
   const navigate = useNavigate()
   const vpcSelector = useVpcSelector()
   const { project, vpc: vpcName } = vpcSelector

app/pages/project/vpcs/VpcRoutersTab.tsx

@@ -35,14 +35,15 @@ const colHelper = createColumnHelper<VpcRouter>()
 
 const vpcRouterList = (query: PP.Vpc) => getListQFn('vpcRouterList', { query })
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project, vpc } = getVpcSelector(params)
   await queryClient.prefetchQuery(vpcRouterList({ project, vpc }).optionsFn())
   return null
 }
 
-Component.displayName = 'VpcRoutersTab'
-export function Component() {
+export const handle = { crumb: 'Routers' }
+
+export default function VpcRoutersTab() {
   const vpcSelector = useVpcSelector()
   const navigate = useNavigate()
   const { project, vpc } = vpcSelector

app/pages/project/vpcs/VpcsPage.tsx

@@ -15,6 +15,7 @@ import { Networking16Icon, Networking24Icon } from '@oxide/design-system/icons/r
 
 import { DocsPopover } from '~/components/DocsPopover'
 import { HL } from '~/components/HL'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
@@ -65,13 +66,15 @@ const colHelper = createColumnHelper<Vpc>()
 
 // just as in the vpcList call for the quick actions menu, include limit to make
 // sure it matches the call in the QueryTable
-VpcsPage.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project } = getProjectSelector(params)
   await queryClient.prefetchQuery(vpcList(project).optionsFn())
   return null
 }
 
-export function VpcsPage() {
+export const handle = makeCrumb('VPCs', (p) => pb.vpcs(getProjectSelector(p)))
+
+export default function VpcsPage() {
   const { project } = useProjectSelector()
   const navigate = useNavigate()
 

app/pages/system/inventory/DisksTab.tsx

@@ -40,11 +40,13 @@ const EmptyState = () => (
 
 const diskList = getListQFn('physicalDiskList', {})
 
-export async function loader() {
+export async function clientLoader() {
   await queryClient.prefetchQuery(diskList.optionsFn())
   return null
 }
 
+export const handle = { crumb: 'Disks' }
+
 const colHelper = createColumnHelper<PhysicalDisk>()
 const staticCols = [
   colHelper.accessor('id', {}),
@@ -69,8 +71,7 @@ const staticCols = [
   }),
 ]
 
-Component.displayName = 'DisksTab'
-export function Component() {
+export default function DisksTab() {
   const emptyState = <EmptyState />
   const { table } = useQueryTable({ query: diskList, columns: staticCols, emptyState })
   return table

app/pages/system/inventory/InventoryPage.tsx

@@ -11,18 +11,21 @@ import { Servers16Icon, Servers24Icon } from '@oxide/design-system/icons/react'
 
 import { DocsPopover } from '~/components/DocsPopover'
 import { RouteTabs, Tab } from '~/components/RouteTabs'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 const rackList = getListQFn('rackList', {})
 
-InventoryPage.loader = async () => {
+export async function clientLoader() {
   await queryClient.prefetchQuery(rackList.optionsFn())
   return null
 }
 
-export function InventoryPage() {
+export const handle = makeCrumb('Inventory', pb.sledInventory())
+
+export default function InventoryPage() {
   const { data: racks } = usePrefetchedQuery(rackList.optionsFn())
   const rack = racks?.items[0]
 

app/pages/system/inventory/SledsTab.tsx

@@ -30,11 +30,13 @@ const STATE_BADGE_COLORS: Record<SledState, BadgeColor> = {
 
 const sledList = getListQFn('sledList', {})
 
-export async function loader() {
+export async function clientLoader() {
   await queryClient.prefetchQuery(sledList.optionsFn())
   return null
 }
 
+export const handle = { crumb: 'Sleds' }
+
 const colHelper = createColumnHelper<Sled>()
 const staticCols = [
   colHelper.accessor('id', {
@@ -88,8 +90,7 @@ const staticCols = [
   }),
 ]
 
-Component.displayName = 'SledsTab'
-export function Component() {
+export default function SledsTab() {
   const emptyState = <EmptyMessage icon={<Servers24Icon />} title="No sleds found" />
   const { table } = useQueryTable({ query: sledList, columns: staticCols, emptyState })
   return table

app/pages/system/inventory/sled/SledInstancesTab.tsx

@@ -33,12 +33,14 @@ const EmptyState = () => {
   )
 }
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { sledId } = requireSledParams(params)
   await queryClient.prefetchQuery(sledInstanceList(sledId).optionsFn())
   return null
 }
 
+export const handle = { crumb: 'Instances' }
+
 // passing in empty function because we still want the copy ID button
 const makeActions = (): MenuAction[] => []
 
@@ -69,8 +71,7 @@ const staticCols = [
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
-Component.displayName = 'SledInstancesTab'
-export function Component() {
+export default function SledInstancesTab() {
   const { sledId } = useSledParams()
   const columns = useColsWithActions(staticCols, makeActions)
   const { table } = useQueryTable({

app/pages/system/inventory/sled/SledPage.tsx

@@ -12,21 +12,26 @@ import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
 import { Servers24Icon } from '@oxide/design-system/icons/react'
 
 import { RouteTabs, Tab } from '~/components/RouteTabs'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { requireSledParams, useSledParams } from '~/hooks/use-params'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
+import { truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { sledId } = requireSledParams(params)
   await apiQueryClient.prefetchQuery('sledView', {
     path: { sledId },
   })
   return null
 }
+export const handle = makeCrumb(
+  (p) => truncate(p.sledId!, 12, 'middle'),
+  (p) => pb.sled({ sledId: p.sledId! })
+)
 
-Component.displayName = 'SledPage'
-export function Component() {
+export default function SledPage() {
   const { sledId } = useSledParams()
   const { data: sled } = usePrefetchedApiQuery('sledView', { path: { sledId } })
 

app/pages/system/networking/IpPoolPage.tsx

@@ -33,6 +33,7 @@ import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { HL } from '~/components/HL'
 import { MoreActionsMenu } from '~/components/MoreActionsMenu'
 import { QueryParamTabs } from '~/components/QueryParamTabs'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { getIpPoolSelector, useIpPoolSelector } from '~/hooks/use-params'
 import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
@@ -59,7 +60,7 @@ const ipPoolView = (pool: string) => apiq('ipPoolView', { path: { pool } })
 const ipPoolSiloList = (pool: string) => getListQFn('ipPoolSiloList', { path: { pool } })
 const ipPoolRangeList = (pool: string) => getListQFn('ipPoolRangeList', { path: { pool } })
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { pool } = getIpPoolSelector(params)
   await Promise.all([
     queryClient.prefetchQuery(ipPoolView(pool)),
@@ -79,8 +80,9 @@ export async function loader({ params }: LoaderFunctionArgs) {
   return null
 }
 
-Component.displayName = 'IpPoolPage'
-export function Component() {
+export const handle = makeCrumb((p) => p.pool!)
+
+export default function IpPoolpage() {
   const poolSelector = useIpPoolSelector()
   const { data: pool } = usePrefetchedQuery(ipPoolView(poolSelector.pool))
   const { data: ranges } = usePrefetchedQuery(

app/pages/system/networking/IpPoolsPage.tsx

@@ -69,13 +69,14 @@ const staticColumns = [
 
 const ipPoolList = () => getListQFn('ipPoolList', {})
 
-export async function loader() {
+export async function clientLoader() {
   await queryClient.prefetchQuery(ipPoolList().optionsFn())
   return null
 }
 
-Component.displayName = 'IpPoolsPage'
-export function Component() {
+export const handle = { crumb: 'IP Pools' }
+
+export default function IpPoolsPage() {
   const navigate = useNavigate()
 
   const { mutateAsync: deletePool } = useApiMutation('ipPoolDelete', {