wip(shared): Work on workbench views

sites/shared/components/workbench/menus/ui-settings/inputs.mjs

@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import { ChoiceButton } from 'shared/components/choice-button.mjs'
+import { ControlSettings } from 'shared/components/account/control.mjs'
+
+// Shared input for list inputs
+export const ListSetting = ({ name, list, config, current, update, t }) => {
+  if (typeof current === 'undefined') current = config.dflt
+
+  const [value, setValue] = useState(current)
+
+  const handleChange = (newCurrent) => {
+    if (newCurrent === config.dflt) reset()
+    else {
+      update.ui([name], newCurrent)
+      setValue(newCurrent)
+    }
+  }
+
+  const reset = () => {
+    update.ui([name])
+    setValue(config.dflt)
+  }
+
+  return (
+    <>
+      <p>{t(`ui-settings:${name}.d`)}</p>
+      {config.list.map((entry) => (
+        <ChoiceButton
+          key={entry}
+          title={t(`ui-settings:${config.choiceTitles[entry]}.t`)}
+          color={entry === config.dflt ? 'primary' : 'accent'}
+          active={current === entry}
+          onClick={() => handleChange(entry)}
+        >
+          {t(`ui-settings:${config.choiceTitles[entry]}.d`)}
+        </ChoiceButton>
+      ))}
+    </>
+  )
+}
+
+export const ControlSettingInput = ({ t, name }) => (
+  <>
+    <p>{t(`ui-settings:${name}.d`)}</p>
+    <ControlSettings noBack />
+  </>
+)
+
+export const RendererSettingInput = ({ name, config, current, update, t }) => (
+  <ListSetting
+    {...{ name, config, current, update, t }}
+    list={config.list.map((key) => ({
+      key,
+      title: key,
+    }))}
+  />
+)
+
+export const XRaySettingInput = (props) => <ListSetting {...props} />