admin/custom: persist section

admin/src/CustomHtmlPage.ts

@@ -10,6 +10,7 @@ import { Save } from '@mui/icons-material'
 import _ from 'lodash'
 import { useDebounce } from 'usehooks-ts'
 import { TextEditor } from './TextEditor';
+import { state, useSnapState } from './state'
 
 const names: any = {
     top: "Top of HTML Body",
@@ -18,15 +19,15 @@ const names: any = {
 
 export default function CustomHtmlPage() {
     const { data, reload } = useApiEx<{ sections: Dict<string> }>('get_custom_html')
-    const [section, setSection] = useState('')
+    const { customHtmlSection: section } = useSnapState()
     const [all, setAll] = useState<Dict<string>>({})
     const [saved, setSaved] = useState({})
     useEffect(() => data && setSaved(data?.sections), [data])
     useEffect(() => setAll(saved), [saved])
     const options = useMemo(() => {
         const keys = _.sortBy(Object.keys(all), x => !isNaN(+x)) // http codes at the bottom
-        if (!keys.includes(section))
-            setSection(_.findKey(all, Boolean) || keys?.[0] || '') // prefer any key with content
+        if (keys.length && !keys.includes(section))
+            state.customHtmlSection = _.findKey(all, Boolean) || keys?.[0] || '' // prefer any key with content
         return keys.map(x => ({
             value: x,
             label: (names[x] || prefix('HTTP ', HTTP_MESSAGES[x as any]) || _.startCase(x)) + (all[x]?.trim() ? ' *' : '')
@@ -40,7 +41,12 @@ export default function CustomHtmlPage() {
             wikiLink('customization', "More help")
         ),
         h(Box, { display: 'flex', alignItems: 'center', gap: 1, mb: 1 },
-            h(SelectField as Field<string>, { label: "Section", value: section, options, onChange: setSection }),
+            h(SelectField as Field<string>, {
+                label: "Section",
+                value: section,
+                options,
+                onChange: v => state.customHtmlSection = v
+            }),
             reloadBtn(reload),
             h(IconBtn, {
                 icon: Save,

admin/src/FileForm.ts

@@ -5,7 +5,7 @@ import { createElement as h, forwardRef, ReactElement, ReactNode, useEffect, use
 import { Alert, Box, Collapse, FormHelperText, Link, MenuItem, MenuList, useTheme } from '@mui/material'
 import { BoolField, DisplayField, Field, FieldProps, Form, MultiSelectField, SelectField, StringField
 } from '@hfs/mui-grid-form'
-import { apiCall, UseApi, useApiEx } from './api'
+import { apiCall, UseApi } from './api'
 import { basename, defaultPerms, formatBytes, formatTimestamp, isEqualLax, isWhoObject, newDialog, objSameKeys,
     onlyTruthy, prefix, VfsPerms, wantArray, Who, WhoObject, matches, HTTP_MESSAGES, xlate, md } from './misc'
 import { Btn, IconBtn, LinkBtn, modifiedProps, useBreakpoint, wikiLink } from './mui'

admin/src/state.ts

@@ -16,6 +16,7 @@ export const state = proxy<{
     loginRequired: boolean | number
     username: string
     monitorOnlyFiles: boolean
+    customHtmlSection: string,
     onlinePluginsColumns: Dict<boolean>
 }>(Object.assign({
     title: '',
@@ -26,6 +27,7 @@ export const state = proxy<{
     loginRequired: false,
     username: '',
     monitorOnlyFiles: true,
+    customHtmlSection: '',
     onlinePluginsColumns: {
         version: false,
         pushed_at: false,