wip(shared): more workbench updates

sites/shared/components/workbench/index.mjs

@@ -115,8 +115,6 @@ export const Workbench = ({ design, Design, set = false }) => {
           account={account}
         />
       )}
-      <pre>{JSON.stringify(settings, null, 2)}</pre>
-      <pre>{JSON.stringify(ui, null, 2)}</pre>
     </>
   )
 }

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

@@ -1,17 +0,0 @@
-import { Li, SumButton, SumDiv, Deg } from 'shared/components/workbench/menus/index.mjs'
-import { useTranslation } from 'next-i18next'
-
-export const XrayDisable = (props) => {
-  const { t } = useTranslation(['cfp', 'settings'])
-
-  return (
-    <Li>
-      <SumButton onClick={() => props.updateGist(['_state', 'xray', 'enabled'], false)}>
-        <SumDiv>
-          <Deg />
-          <span>{t('cfp:thingIsEnabled', { thing: t('settings:xray.t') })}</span>
-        </SumDiv>
-      </SumButton>
-    </Li>
-  )
-}

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

@@ -1,50 +1,67 @@
-import { XrayIcon } from 'shared/components/icons.mjs'
+import { XrayIcon, HelpIcon } from 'shared/components/icons.mjs'
 import { linkClasses, Chevron } from 'shared/components/navigation/primary.mjs'
 import { ConsoleLog } from './log.mjs'
 import { XrayReset } from './reset.mjs'
-import { XrayDisable } from './disable.mjs'
 import { XrayList } from './list.mjs'
 import { Ul, Details, TopSummary } from 'shared/components/workbench/menus/index.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 XrayMenu = (props) => {
-  const { t } = useTranslation(['app', 'settings'])
+export const ns = ['xray']
+
+export const XrayMenu = ({ design, update, settings, ui }) => {
+  const { t } = useTranslation(ns)
+
+  const toggleXray = () => update.ui(['xray', 'enabled'], ui?.xray?.enabled ? false : true)
 
   return (
-    <Details open>
-      <TopSummary icon={<XrayIcon />}>
-        {props.gist?._state?.xray?.enabled ? (
-          <>
-            <span className={`grow ${linkClasses} hover:cursor-resize font-bold uppercase`}>
-              {t('settings:xray.t')}
-            </span>
-            <Chevron />
-          </>
-        ) : (
-          <>
-            <button
-              className={`grow ${linkClasses} hover:cursor-resize uppercase font-bold text-left`}
-              onClick={() => props.updateGist(['_state', 'xray', 'enabled'], true)}
-            >
-              {t('settings:xray.t')}
-            </button>
-            <span className="text-normal text-secondary">
-              {t('cfp:thingIsDisabled', { thing: t('settings:xray.t') })}
-            </span>
-          </>
-        )}
-      </TopSummary>
-      {props.gist?._state?.xray?.enabled && (
-        <Ul>
-          <XrayDisable {...props} />
-          <ConsoleLog {...props} />
-          <XrayReset {...props} />
-          {props.gist?._state?.xray?.parts &&
-            Object.keys(props.gist._state.xray.parts).map((partName) => (
-              <XrayList {...props} partName={partName} key={partName} />
-            ))}
-        </Ul>
+    <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>,
+      ]}
+    >
+      <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>
+        </>
       )}
-    </Details>
+    </Collapse>
   )
 }
+
+//<ConsoleLog  />
+//<XrayReset  />
+//{settings.xray.parts &&
+//  Object.keys(settings.xray.parts).map((partName) => (
+//    <XrayList partName={partName} key={partName} />
+//  ))}

sites/shared/components/workbench/menus/xray/xray.en.yaml

@@ -0,0 +1 @@
+xrayPattern: X-Ray Pattern

sites/shared/components/workbench/views/draft/index.mjs

@@ -14,12 +14,11 @@ export const DraftView = ({
   language,
   account,
 }) => (
-  <div className="flex flex-row items-top">
-    <div className="w-2/3 shrink-0 grow lg:p-4">
+  <div className="flex flex-row items-tope">
+    <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
       <Pattern {...{ pattern, setView, settings, ui, update }} />
-      <pre>{JSON.stringify(settings, null, 2)}</pre>
     </div>
-    <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl">
+    <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
       <DraftMenu {...{ design, pattern, patternConfig, settings, ui, update, language, account }} />
     </div>
   </div>