Improve "Jump To" (cmd-k) dialog

app/pages/ProjectsPage.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
 import { Outlet, useNavigate } from 'react-router'
@@ -24,6 +25,7 @@ import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
+import { ALL_ISH } from '~/util/consts'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
@@ -94,25 +96,27 @@ export default function ProjectsPage() {
   )
 
   const columns = useColsWithActions(staticCols, makeActions)
-  const {
-    table,
-    query: { data: projects },
-  } = useQueryTable({ query: projectList, columns, emptyState: <EmptyState /> })
+  const { table } = useQueryTable({
+    query: projectList,
+    columns,
+    emptyState: <EmptyState />,
+  })
 
+  const { data: allProjects } = useQuery(q(api.projectList, { query: { limit: ALL_ISH } }))
   useQuickActions(
     useMemo(
       () => [
         {
           value: 'New project',
           onSelect: () => navigate(pb.projectsNew()),
         },
-        ...(projects?.items || []).map((p) => ({
+        ...(allProjects?.items || []).map((p) => ({
           value: p.name,
           onSelect: () => navigate(pb.project({ project: p.name })),
           navGroup: 'Go to project',
         })),
       ],
-      [navigate, projects]
+      [navigate, allProjects]
     )
   )
 
@@ -128,7 +132,7 @@ export default function ProjectsPage() {
         />
       </PageHeader>
       <TableActions>
-        <CreateLink to={pb.projectsNew()}>New Project</CreateLink>
+        <CreateLink to={pb.projectsNew()}>New project</CreateLink>
       </TableActions>
       {table}
       <Outlet />

app/pages/SiloAccessPage.tsx

@@ -30,6 +30,7 @@ import {
   SiloAccessEditUserSideModal,
 } from '~/forms/silo-access'
 import { useCurrentUser } from '~/hooks/use-current-user'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import { getActionsCol } from '~/table/columns/action-col'
@@ -164,6 +165,18 @@ export default function SiloAccessPage() {
     getCoreRowModel: getCoreRowModel(),
   })
 
+  useQuickActions(
+    useMemo(
+      () => [
+        {
+          value: 'Add user or group',
+          onSelect: () => setAddModalOpen(true),
+        },
+      ],
+      []
+    )
+  )
+
   return (
     <>
       <PageHeader>

app/pages/SiloImagesPage.tsx

@@ -9,7 +9,7 @@ import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { Outlet } from 'react-router'
+import { Outlet, useNavigate } from 'react-router'
 
 import { api, getListQFn, q, queryClient, useApiMutation, type Image } from '@oxide/api'
 import { Images16Icon, Images24Icon } from '@oxide/design-system/icons/react'
@@ -20,6 +20,7 @@ import { toImageComboboxItem } from '~/components/form/fields/ImageSelectField'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { ModalForm } from '~/components/form/ModalForm'
 import { HL } from '~/components/HL'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import { makeLinkCell } from '~/table/cells/LinkCell'
@@ -32,6 +33,7 @@ import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
+import { ALL_ISH } from '~/util/consts'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
@@ -93,6 +95,26 @@ export default function SiloImagesPage() {
 
   const columns = useColsWithActions(staticCols, makeActions)
   const { table } = useQueryTable({ query: imageList, columns, emptyState: <EmptyState /> })
+
+  const navigate = useNavigate()
+  const { data: allImages } = useQuery(q(api.imageList, { query: { limit: ALL_ISH } }))
+  useQuickActions(
+    useMemo(
+      () => [
+        {
+          value: 'Promote image',
+          onSelect: () => setShowModal(true),
+        },
+        ...(allImages?.items || []).map((i) => ({
+          value: i.name,
+          onSelect: () => navigate(pb.siloImageEdit({ image: i.name })),
+          navGroup: 'Go to silo image',
+        })),
+      ],
+      [navigate, allImages]
+    )
+  )
+
   return (
     <>
       <PageHeader>

app/pages/project/access/ProjectAccessPage.tsx

@@ -35,6 +35,7 @@ import {
   ProjectAccessEditUserSideModal,
 } from '~/forms/project-access'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import { getActionsCol } from '~/table/columns/action-col'
@@ -205,6 +206,18 @@ export default function ProjectAccessPage() {
     getCoreRowModel: getCoreRowModel(),
   })
 
+  useQuickActions(
+    useMemo(
+      () => [
+        {
+          value: 'Add user or group',
+          onSelect: () => setAddModalOpen(true),
+        },
+      ],
+      []
+    )
+  )
+
   return (
     <>
       <PageHeader>

app/pages/project/affinity/AffinityPage.tsx

@@ -7,8 +7,8 @@
  */
 
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { useCallback } from 'react'
-import { Outlet, type LoaderFunctionArgs } from 'react-router'
+import { useCallback, useMemo } from 'react'
+import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import {
   api,
@@ -25,6 +25,7 @@ import { AffinityDocsPopover, AffinityPolicyHeader } from '~/components/Affinity
 import { HL } from '~/components/HL'
 import { antiAffinityGroupList, antiAffinityGroupMemberList } from '~/forms/affinity-util'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell'
@@ -138,6 +139,25 @@ export default function AffinityPage() {
     getCoreRowModel: getCoreRowModel(),
   })
 
+  const navigate = useNavigate()
+  useQuickActions(
+    useMemo(
+      () => [
+        {
+          value: 'New anti-affinity group',
+          onSelect: () => navigate(pb.affinityNew({ project })),
+        },
+        ...antiAffinityGroups.map((g) => ({
+          value: g.name,
+          onSelect: () =>
+            navigate(pb.antiAffinityGroup({ project, antiAffinityGroup: g.name })),
+          navGroup: 'Go to anti-affinity group',
+        })),
+      ],
+      [navigate, project, antiAffinityGroups]
+    )
+  )
+
   return (
     <>
       <PageHeader>

app/pages/project/disks/DisksPage.tsx

@@ -5,9 +5,10 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
-import { Outlet, type LoaderFunctionArgs } from 'react-router'
+import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import {
   api,
@@ -26,6 +27,7 @@ import { HL } from '~/components/HL'
 import { DiskStateBadge, DiskTypeBadge, ReadOnlyBadge } from '~/components/StateBadge'
 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'
 import { addToast } from '~/stores/toast'
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
@@ -37,6 +39,7 @@ import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
+import { ALL_ISH } from '~/util/consts'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -186,6 +189,27 @@ export default function DisksPage() {
     emptyState: <EmptyState />,
   })
 
+  const navigate = useNavigate()
+  const { data: allDisks } = useQuery(
+    q(api.diskList, { query: { project, limit: ALL_ISH } })
+  )
+  useQuickActions(
+    useMemo(
+      () => [
+        {
+          value: 'New disk',
+          onSelect: () => navigate(pb.disksNew({ project })),
+        },
+        ...(allDisks?.items || []).map((d) => ({
+          value: d.name,
+          onSelect: () => navigate(pb.disk({ project, disk: d.name })),
+          navGroup: 'Go to disk',
+        })),
+      ],
+      [navigate, project, allDisks]
+    )
+  )
+
   return (
     <>
       <PageHeader>
@@ -198,7 +222,7 @@ export default function DisksPage() {
         />
       </PageHeader>
       <TableActions>
-        <CreateLink to={pb.disksNew({ project })}>New Disk</CreateLink>
+        <CreateLink to={pb.disksNew({ project })}>New disk</CreateLink>
       </TableActions>
       {table}
       <Outlet />

app/pages/project/floating-ips/FloatingIpsPage.tsx

@@ -5,8 +5,9 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router'
 
@@ -28,6 +29,7 @@ import { ModalForm } from '~/components/form/ModalForm'
 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 { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
@@ -211,6 +213,26 @@ export default function FloatingIpsPage() {
     emptyState: <EmptyState />,
   })
 
+  const { data: allFips } = useQuery(
+    q(api.floatingIpList, { query: { project, limit: ALL_ISH } })
+  )
+  useQuickActions(
+    useMemo(
+      () => [
+        {
+          value: 'New floating IP',
+          onSelect: () => navigate(pb.floatingIpsNew({ project })),
+        },
+        ...(allFips?.items || []).map((f) => ({
+          value: f.name,
+          onSelect: () => navigate(pb.floatingIpEdit({ project, floatingIp: f.name })),
+          navGroup: 'Go to floating IP',
+        })),
+      ],
+      [project, navigate, allFips]
+    )
+  )
+
   return (
     <>
       <PageHeader>

app/pages/project/images/ImagesPage.tsx

@@ -5,17 +5,19 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo, useState } from 'react'
-import { Outlet, type LoaderFunctionArgs } from 'react-router'
+import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router'
 
-import { api, getListQFn, queryClient, useApiMutation, type Image } from '@oxide/api'
+import { api, getListQFn, q, queryClient, useApiMutation, type Image } from '@oxide/api'
 import { Images16Icon, Images24Icon } from '@oxide/design-system/icons/react'
 
 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'
 import { addToast } from '~/stores/toast'
 import { makeLinkCell } from '~/table/cells/LinkCell'
@@ -28,6 +30,7 @@ import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
+import { ALL_ISH } from '~/util/consts'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -106,6 +109,27 @@ export default function ImagesPage() {
     emptyState: <EmptyState />,
   })
 
+  const navigate = useNavigate()
+  const { data: allImages } = useQuery(
+    q(api.imageList, { query: { project, limit: ALL_ISH } })
+  )
+  useQuickActions(
+    useMemo(
+      () => [
+        {
+          value: 'Upload image',
+          onSelect: () => navigate(pb.projectImagesNew({ project })),
+        },
+        ...(allImages?.items || []).map((i) => ({
+          value: i.name,
+          onSelect: () => navigate(pb.projectImageEdit({ project, image: i.name })),
+          navGroup: 'Go to project image',
+        })),
+      ],
+      [project, navigate, allImages]
+    )
+  )
+
   return (
     <>
       <PageHeader>