wip(org): More work on managing patterns

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

@@ -146,7 +146,7 @@ export const Setting = ({
 
   return (
     <Collapse
-      color={changed ? 'accent' : 'secondary'}
+      color={changed ? 'accent' : 'primary'}
       openTitle={<CoreTitle open {...titleProps} />}
       title={<CoreTitle {...titleProps} />}
       buttons={buttons}
@@ -167,26 +167,27 @@ export const CoreSettings = ({
   language,
   account,
   DynamicDocs,
+  control,
 }) => {
   // FIXME: Update this namespace
   const { t } = useTranslation(['i18n', 'core-settings', design])
   const { setModal } = useContext(ModalContext)
 
+  // For the simplest experience, not core settings are shown at all
+  if (control < 2) return null
+
   const settingsConfig = loadSettingsConfig({
     language,
-    control: account.control,
+    control,
     sabool: settings.sabool,
     parts: patternConfig.draftOrder,
   })
-  // Default control level is 2 (in case people are not logged in)
-  const control = account.control || 2
 
   const loadDocs = DynamicDocs
     ? (evt, setting = false) => {
         evt.stopPropagation()
         let path = `site/draft/core-settings`
         if (setting) path += `/${setting}`
-        console.log(path)
         setModal(
           <ModalWrapper>
             <div className="max-w-prose">
@@ -210,19 +211,20 @@ export const CoreSettings = ({
     )
 
   return (
-    <Collapse
-      bottom
-      color="primary"
-      title={
-        <div className="w-full flex flex-row gap2 items-center justify-between">
-          <span className="font-bold">{t('core-settings:coreSettings.t')}</span>
-          <SettingsIcon className="w-6 h-6 text-primary" />
-        </div>
-      }
-      openTitle={t('core-settings:coreSettings')}
-      openButtons={openButtons}
-    >
-      <p>{t('core-settings:coreSettings.d')}</p>
+    <>
+      <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">
+              <SettingsIcon />
+              <span>{t('core-settings:coreSettings')}</span>
+            </h5>
+            <p>{t('core-settings:coreSettings.d')}</p>
+          </>
+        )}
+      </div>
       {Object.keys(settingsConfig)
         .filter((name) => settingsConfig[name].control <= control)
         .map((name) => (
@@ -236,6 +238,6 @@ export const CoreSettings = ({
             units={settings.units}
           />
         ))}
-    </Collapse>
+    </>
   )
 }

sites/shared/components/workbench/menus/design-options/index.mjs

@@ -173,8 +173,14 @@ export const DesignOptionGroup = ({
   Option,
   t,
   loadDocs,
+  topLevel = false,
 }) => (
-  <Collapse bottom color="secondary" title={<GroupTitle {...{ group, t }} />} openTitle={t(group)}>
+  <Collapse
+    bottom
+    color={topLevel ? 'primary' : 'secondary'}
+    title={<GroupTitle {...{ group, t }} />}
+    openTitle={t(group)}
+  >
     {Object.entries(options).map(([option, type]) =>
       typeof type === 'string' ? (
         <Option
@@ -214,6 +220,7 @@ export const DesignOptions = ({
   account,
   Option = false,
   DynamicDocs = false,
+  control,
 }) => {
   const { t } = useTranslation([design])
   const { setModal } = useContext(ModalContext)
@@ -239,17 +246,18 @@ export const DesignOptions = ({
     : false
 
   return (
-    <Collapse
-      bottom
-      color="primary"
-      title={
-        <div className="w-full flex flex-row gap2 items-center justify-between">
-          <span className="font-bold">{t('design-options:designOptions')}</span>
-          <OptionsIcon className="w-6 h-6 text-primary" />
-        </div>
-      }
-      openTitle={t('design-options:designOptions')}
-    >
+    <>
+      <div className="px-2 mt-8">
+        {control > 4 ? null : (
+          <>
+            <h5 className="flex flex-row gap-2 items-center">
+              <OptionsIcon />
+              <span>{t('design-options:designOptions')}</span>
+            </h5>
+            <p>{t('design-options:designOptions.d')}</p>
+          </>
+        )}
+      </div>
       {Object.entries(optionsMenu).map(([group, option]) =>
         typeof option === 'string' ? (
           <Option
@@ -265,9 +273,10 @@ export const DesignOptions = ({
             {...{ design, patternConfig, settings, update, group, Option, t, loadDocs }}
             options={option}
             key={group}
+            topLevel
           />
         )
       )}
-    </Collapse>
+    </>
   )
 }

sites/shared/components/workbench/menus/xray/index.mjs

@@ -1,65 +1,35 @@
-import { XrayIcon, HelpIcon } from 'shared/components/icons.mjs'
+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 { Collapse } from 'shared/components/collapse.mjs'
-import { ChoiceButton } from 'shared/components/choice-button.mjs'
 import { Popout } from 'shared/components/popout.mjs'
 
 export const ns = ['xray']
 
-export const XrayMenu = ({ design, update, settings, ui }) => {
+export const XrayMenu = ({ design, update, settings, ui, account, control }) => {
   const { t } = useTranslation(ns)
 
+  if (ui.renderer !== 'react' || control < 4) return null
+
   const toggleXray = () => update.ui(['xray', 'enabled'], ui?.xray?.enabled ? false : true)
 
   return (
-    <Collapse
-      bottom
-      color="primary"
-      title={
-        <div className="w-full flex flex-row gap2 items-center justify-between">
-          <span className="font-bold">{t('xray:xrayPattern')}</span>
-          <XrayIcon className="w-6 h-6 text-primary" />
-        </div>
-      }
-      openTitle={t('xray:xrayPattern')}
-      openButtons={[
-        <button className="btn btn-xs btn-ghost px-0 z-10" onClick={(evt) => loadDocs(evt)}>
-          <HelpIcon className="w-4 h-4" />
-        </button>,
-      ]}
-    >
+    <>
+      <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('xray:xrayPattern')}</span>
+            </h5>
+            <p>{t('core-settings:coreSettings.d')}</p>
+          </>
+        )}
+      </div>
       <Popout fixme>Implement X-Ray</Popout>
-      <ChoiceButton
-        title={t(`yes`)}
-        color={ui?.xray?.enabled ? 'primary' : 'accent'}
-        active={ui?.xray?.enabled}
-        onClick={toggleXray}
-      >
-        {t(`xray:yes.t`)}
-      </ChoiceButton>
-      <ChoiceButton
-        title={t(`no`)}
-        color={ui?.xray?.enabled ? 'accent' : 'primary'}
-        active={!ui?.xray?.enabled}
-        onClick={toggleXray}
-      >
-        {t(`xray:no.t`)}
-      </ChoiceButton>
-      {ui?.xray?.enabled && (
-        <>
-          <p>xray here</p>
-        </>
-      )}
-    </Collapse>
+    </>
   )
 }
-
-//<ConsoleLog  />
-//<XrayReset  />
-//{settings.xray.parts &&
-//  Object.keys(settings.xray.parts).map((partName) => (
-//    <XrayList partName={partName} key={partName} />
-//  ))}