feat: hostd config simple

.changeset/chatty-jobs-knock.md

@@ -0,0 +1,5 @@
+---
+'hostd': minor
+---
+
+The configuration now has an advanced mode that allows the user to view and change all settings.

.changeset/honest-hotels-relate.md

@@ -0,0 +1,5 @@
+---
+'hostd': minor
+---
+
+The configuration page now shows the changed status on fields if the user has made a change but the server values were since updated.

.changeset/late-nails-type.md

@@ -0,0 +1,5 @@
+---
+'hostd': minor
+---
+
+The command palette now includes navigation to configuration sections.

.changeset/seven-eagles-pull.md

@@ -0,0 +1,5 @@
+---
+'hostd': minor
+---
+
+The configuration is now much simpler by default, only requiring the user to set essential settings.

apps/hostd/components/CmdRoot/ConfigCmdGroup.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import { useDialog } from '../../contexts/dialog'
 import { CommandGroup, CommandItemNav, CommandItemSearch } from './Item'
 import { Page } from './types'
+import { useConfig } from '../../contexts/config'
 
 const commandPage = {
   namespace: 'configuration',
@@ -17,6 +18,7 @@ type Props = {
 
 export function ConfigCmdGroup({ currentPage, parentPage, pushPage }: Props) {
   const router = useRouter()
+  const { showAdvanced } = useConfig()
   const { closeDialog } = useDialog()
   return (
     <CommandGroup currentPage={currentPage} commandPage={commandPage}>
@@ -40,26 +42,70 @@ export function ConfigCmdGroup({ currentPage, parentPage, pushPage }: Props) {
       >
         Open configuration
       </CommandItemSearch>
-      {/* <CommandItemSearch
+      <CommandItemSearch
+        currentPage={currentPage}
+        commandPage={commandPage}
+        onSelect={() => {
+          router.push(routes.config.host)
+          closeDialog()
+        }}
+      >
+        Configure host
+      </CommandItemSearch>
+      <CommandItemSearch
         currentPage={currentPage}
         commandPage={commandPage}
         onSelect={() => {
-          router.push(routes.config.gouging)
+          router.push(routes.config.pricing)
           closeDialog()
         }}
       >
-        Configure gouging
+        Configure pricing
       </CommandItemSearch>
       <CommandItemSearch
         currentPage={currentPage}
         commandPage={commandPage}
         onSelect={() => {
-          router.push(routes.config.redundancy)
+          router.push(routes.config.dns)
           closeDialog()
         }}
       >
-        Configure redundancy
-      </CommandItemSearch> */}
+        Configure DNS
+      </CommandItemSearch>
+      <CommandItemSearch
+        currentPage={currentPage}
+        commandPage={commandPage}
+        onSelect={() => {
+          router.push(routes.config.bandwidth)
+          closeDialog()
+        }}
+      >
+        Configure bandwidth
+      </CommandItemSearch>
+      {showAdvanced && (
+        <>
+          <CommandItemSearch
+            currentPage={currentPage}
+            commandPage={commandPage}
+            onSelect={() => {
+              router.push(routes.config.registry)
+              closeDialog()
+            }}
+          >
+            Configure registry
+          </CommandItemSearch>
+          <CommandItemSearch
+            currentPage={currentPage}
+            commandPage={commandPage}
+            onSelect={() => {
+              router.push(routes.config.accounts)
+              closeDialog()
+            }}
+          >
+            Configure accounts
+          </CommandItemSearch>
+        </>
+      )}
     </CommandGroup>
   )
 }

apps/hostd/components/Config/ConfigNav.tsx

@@ -0,0 +1,22 @@
+import { Text, Switch, Tooltip } from '@siafoundation/design-system'
+import { useConfig } from '../../contexts/config'
+
+export function ConfigNav() {
+  const { showAdvanced, setShowAdvanced } = useConfig()
+
+  return (
+    <div className="pl-1">
+      <Tooltip content={showAdvanced ? 'Hide advanced' : 'Show advanced'}>
+        <div className="flex gap-1 items-center">
+          <Switch
+            checked={showAdvanced}
+            onCheckedChange={(checked) => setShowAdvanced(checked)}
+          />
+          <Text size="12" color="subtle">
+            Advanced
+          </Text>
+        </div>
+      </Tooltip>
+    </div>
+  )
+}