fix: renterd and hostd refine config

.changeset/breezy-knives-cover.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Allowance now has a field-specific option to auto-calculate its value. Closes https://github.com/SiaFoundation/web/issues/628

.changeset/brown-wolves-chew.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed an issue where first-time configuration would not show the optimal recommendations.

.changeset/chilly-mugs-exercise.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed a bug where the churn alert would display NaN for the percentage when the total size was zero.

.changeset/lemon-timers-turn.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Fields now have better support and styling for readOnly.

.changeset/popular-timers-tan.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed an issue where toggling between basic and advanced modes would sometimes not revalidate all configuration fields.

.changeset/rich-houses-exist.md

@@ -0,0 +1,5 @@
+---
+'hostd': minor
+---
+
+Max collateral now has a field-specific option to auto-calculate its value. Closes https://github.com/SiaFoundation/web/issues/628

.changeset/thirty-peaches-switch.md

@@ -0,0 +1,6 @@
+---
+'hostd': minor
+'renterd': minor
+---
+
+The configuration page now has a view menu in the action bar that is consistent with all other feature pages.

.changeset/weak-cherries-press.md

@@ -0,0 +1,6 @@
+---
+'hostd': minor
+'renterd': minor
+---
+
+Basic configuration mode no longer sets certain fields in the background. Closes https://github.com/SiaFoundation/web/issues/628

apps/hostd/components/CmdRoot/ConfigCmdGroup.tsx

@@ -18,7 +18,7 @@ type Props = {
 
 export function ConfigCmdGroup({ currentPage, parentPage, pushPage }: Props) {
   const router = useRouter()
-  const { showAdvanced } = useConfig()
+  const { configViewMode } = useConfig()
   const { closeDialog } = useDialog()
   return (
     <CommandGroup currentPage={currentPage} commandPage={commandPage}>
@@ -82,7 +82,7 @@ export function ConfigCmdGroup({ currentPage, parentPage, pushPage }: Props) {
       >
         Configure bandwidth
       </CommandItemSearch>
-      {showAdvanced && (
+      {configViewMode === 'advanced' && (
         <>
           <CommandItemSearch
             currentPage={currentPage}

apps/hostd/components/Config/ConfigActions.tsx

@@ -3,6 +3,7 @@ import { Reset16, Save16 } from '@siafoundation/react-icons'
 import { AnnounceButton } from './AnnounceButton'
 import { useConfig } from '../../contexts/config'
 import { ConfigContextMenu } from './ConfigContextMenu'
+import { ConfigViewDropdownMenu } from './ConfigViewDropdownMenu'
 
 export function ConfigActions() {
   const { changeCount, revalidateAndResetForm, form, onSubmit } = useConfig()
@@ -32,6 +33,7 @@ export function ConfigActions() {
       </Button>
       <AnnounceButton />
       <ConfigContextMenu />
+      <ConfigViewDropdownMenu />
     </div>
   )
 }

apps/hostd/components/Config/ConfigNav.tsx

@@ -1,22 +1,3 @@
-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>
-  )
+  return <div className="pl-1"></div>
 }

apps/hostd/components/Config/ConfigViewDropdownMenu.tsx

@@ -0,0 +1,34 @@
+import {
+  Button,
+  Label,
+  Popover,
+  MenuItemRightSlot,
+  BaseMenuItem,
+} from '@siafoundation/design-system'
+import { CaretDown16, SettingsAdjust16 } from '@siafoundation/react-icons'
+import { ViewModeToggle } from './ViewModeToggle'
+
+export function ConfigViewDropdownMenu() {
+  return (
+    <Popover
+      trigger={
+        <Button size="small" tip="Configure view" tipAlign="end">
+          <SettingsAdjust16 />
+          View
+          <CaretDown16 />
+        </Button>
+      }
+      contentProps={{
+        align: 'end',
+        className: 'max-w-[300px]',
+      }}
+    >
+      <BaseMenuItem>
+        <Label>Show advanced settings</Label>
+        <MenuItemRightSlot>
+          <ViewModeToggle />
+        </MenuItemRightSlot>
+      </BaseMenuItem>
+    </Popover>
+  )
+}

apps/hostd/components/Config/ViewModeToggle.tsx

@@ -0,0 +1,28 @@
+import { Switch, Tooltip } from '@siafoundation/design-system'
+import { useConfig } from '../../contexts/config'
+
+export function ViewModeToggle() {
+  const { configViewMode, setConfigViewMode } = useConfig()
+
+  return (
+    <div className="pl-1">
+      <Tooltip
+        content={
+          configViewMode === 'advanced'
+            ? 'Show advanced settings'
+            : 'Hide advanced settings'
+        }
+      >
+        <div>
+          <Switch
+            aria-label="configViewMode"
+            checked={configViewMode === 'advanced'}
+            onCheckedChange={(checked) =>
+              setConfigViewMode(checked ? 'advanced' : 'basic')
+            }
+          />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}