wip(shared): Work on workbench views

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

@@ -0,0 +1,210 @@
+import { XrayIcon } from 'shared/components/icons.mjs'
+//import { ConsoleLog } from './log.mjs'
+//import { XrayReset } from './reset.mjs'
+//import { XrayList } from './list.mjs'
+import { useTranslation } from 'next-i18next'
+import { Popout } from 'shared/components/popout.mjs'
+//Dependencies
+import { loadSettingsConfig } from './config.mjs'
+// Components
+import { Collapse } from 'shared/components/collapse.mjs'
+import { HelpIcon } from 'shared/components/icons.mjs'
+import { ControlSettingInput, RendererSettingInput, XRaySettingInput } from './inputs.mjs'
+import { ControlSettingValue, RendererSettingValue, XRaySettingValue } from './values.mjs'
+
+export const ns = ['ui-settings']
+
+// Facilitate lookup of the value component
+const values = {
+  control: ControlSettingValue,
+  renderer: RendererSettingValue,
+  xray: XRaySettingValue,
+}
+
+// Facilitate lookup of the input component
+const inputs = {
+  control: ControlSettingInput,
+  renderer: RendererSettingInput,
+  xray: XRaySettingInput,
+}
+
+const wasChanged = (current, name, settingsConfig) => {
+  if (typeof current === 'undefined') return false
+  if (current === settingsConfig[name].dflt) return false
+
+  return true
+}
+
+export const UiTitle = ({ name, t, changed, current = null, open = false, emoji = '' }) => (
+  <div className={`flex flex-row gap-1 items-center w-full ${open ? '' : 'justify-between'}`}>
+    <span className="font-medium">
+      <span role="img" className="pr-2">
+        {emoji}
+      </span>
+      {t(`ui-settings:${name}.t`)}
+      {open ? ':' : ''}
+    </span>
+    <span className="font-bold">{current}</span>
+  </div>
+)
+
+export const Setting = ({
+  name,
+  config,
+  current,
+  update,
+  t,
+  settingsConfig,
+  changed,
+  loadDocs,
+  control,
+  ui,
+}) => {
+  const drillProps = { name, config, current, update, t, changed, control }
+
+  // Don't bother with X-Ray in SVG mode
+  if (name === 'xray' && ui.renderer === 'svg') return null
+
+  const Input = inputs[name]
+  const Value = values[name]
+
+  const buttons = []
+  const openButtons = []
+  if (loadDocs)
+    openButtons.push(
+      <button
+        className="btn btn-xs btn-ghost px-0"
+        key="help"
+        onClick={(evt) => loadDocs(evt, name)}
+      >
+        <HelpIcon className="w-4 h-4" />
+      </button>
+    )
+  if (changed) {
+    buttons.push(
+      <button
+        className="btn btn-accent"
+        key="clear"
+        onClick={(evt) => {
+          evt.stopPropagation()
+          update.settings([name], config.dflt)
+        }}
+      >
+        <ClearIcon />
+      </button>
+    )
+    openButtons.push(
+      <button
+        className="btn btn-ghost btn-xs px-0"
+        key="clear"
+        onClick={(evt) => {
+          evt.stopPropagation()
+          update.settings([name], config.dflt)
+        }}
+      >
+        <ClearIcon />
+      </button>
+    )
+  }
+
+  const titleProps = { name, t, current: <Value {...drillProps} />, emoji: config.emoji }
+
+  const boolSettings = ['sabool', 'paperless', 'details']
+
+  if (control > 4) {
+    // Save gurus some clicks
+    if (name === 'renderer')
+      return (
+        <Collapse
+          color={changed ? 'accent' : 'primary'}
+          title={<UiTitle {...titleProps} />}
+          onClick={() => (current === 'svg' ? update.ui([name]) : update.ui([name], 'svg'))}
+        />
+      )
+  }
+
+  return (
+    <Collapse
+      color={changed ? 'accent' : 'primary'}
+      openTitle={<UiTitle open {...titleProps} />}
+      title={<UiTitle {...titleProps} />}
+      buttons={buttons}
+      openButtons={openButtons}
+    >
+      <Input {...drillProps} />
+    </Collapse>
+  )
+}
+
+export const UiSettings = ({
+  design,
+  update,
+  settings,
+  ui,
+  account,
+  control,
+  language,
+  DynamicDocs,
+}) => {
+  const { t } = useTranslation(ns)
+
+  const settingsConfig = loadSettingsConfig()
+
+  const loadDocs = DynamicDocs
+    ? (evt, setting = false) => {
+        evt.stopPropagation()
+        let path = `site/draft/ui-settings`
+        if (setting) path += `/${setting}`
+        setModal(
+          <ModalWrapper>
+            <div className="max-w-prose">
+              <DynamicDocs path={path} language={language} />
+            </div>
+          </ModalWrapper>
+        )
+      }
+    : false
+
+  const openButtons = []
+  if (loadDocs)
+    openButtons.push(
+      <button
+        className="btn btn-xs btn-ghost px-0 z-10"
+        key="help"
+        onClick={(evt) => loadDocs(evt)}
+      >
+        <HelpIcon className="w-4 h-4" />
+      </button>
+    )
+
+  const toggleXray = () => update.ui(['xray', 'enabled'], ui?.xray?.enabled ? false : true)
+
+  return (
+    <>
+      <div className="px-2 mt-8">
+        {control > 4 ? (
+          <div className="border-t border-solid border-base-300 pb-2 mx-36"></div>
+        ) : (
+          <>
+            <h5 className="flex flex-row gap-2 items-center">
+              <XrayIcon />
+              <span>{t('ui-settings:uiSettings')}</span>
+            </h5>
+            <p>{t('ui-settings:uiSettings.d')}</p>
+          </>
+        )}
+      </div>
+      {Object.keys(settingsConfig)
+        .filter((name) => settingsConfig[name].control <= control)
+        .map((name) => (
+          <Setting
+            key={name}
+            {...{ name, design, update, t, loadDocs, control }}
+            config={settingsConfig[name]}
+            current={ui[name]}
+            changed={wasChanged(settings[name], name, settingsConfig)}
+          />
+        ))}
+    </>
+  )
+}