From 4634ced281c069fedb6e2d7db4f773db9824c253 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Sat, 29 Jan 2022 18:24:36 +0100
Subject: [PATCH] chore(lab): Refactoring workbench menu

---
 .../menu/core-settings/core-setting-bool.js   |  50 ++-----
 .../menu/core-settings/core-setting-list.js   |   8 +-
 .../core-settings/core-setting-sa-bool.js     |  49 ++-----
 .../workbench/menu/core-settings/index.js     |  40 ++----
 .../workbench/menu/core-settings/setting.js   | 126 ++++++------------
 .../workbench/menu/design-options/index.js    |  27 ++--
 .../menu/design-options/option-group.js       |  49 +++----
 .../menu/design-options/option-sub-group.js   |  49 ++-----
 .../workbench/menu/design-options/option.js   |  96 ++++---------
 .../components/workbench/menu/index.js        |  64 +++++++++
 .../components/workbench/menu/xray/disable.js |  39 ++----
 .../components/workbench/menu/xray/index.js   |  21 +--
 .../components/workbench/menu/xray/list.js    |  60 ++++-----
 .../components/workbench/menu/xray/path.js    |   5 +
 .../components/workbench/menu/xray/reset.js   |  42 ++----
 15 files changed, 270 insertions(+), 455 deletions(-)
 create mode 100644 packages/freesewing.shared/components/workbench/menu/xray/path.js

diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-bool.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-bool.js
index e5aa79caaae..fbb2be48d1f 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-bool.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-bool.js
@@ -1,11 +1,9 @@
 import { useState } from 'react'
-import { linkClasses } from 'shared/components/navigation/primary.js'
+import { SecText, SumButton, Li, SumDiv, Deg } from 'shared/components/workbench/menu/index.js'
 
 const CoreSettingBool = props => {
-  const val = props.gist[props.setting]
-  const dflt = props.dflt
 
-  const [value, setValue] = useState(val)
+  const [value, setValue] = useState(props.gist[props.setting])
 
   const toggle = (evt) => {
     props.updateGist([props.setting], !value)
@@ -13,41 +11,15 @@ const CoreSettingBool = props => {
   }
 
   return (
-    <li className="flex flex-row">
-      <button className={`
-        flex flex-row
-        w-full
-        justify-between
-        px-2
-        text-left
-        text-base-content
-        sm:text-neutral-content
-        items-center
-        pr-6
-      `} onClick={toggle}>
-        <div className={`
-          grow pl-2 border-l-2
-          ${linkClasses}
-          hover:cursor-pointer
-          hover:border-secondary
-          sm:hover:border-secondary-focus
-          text-base-content sm:text-neutral-content
-        `}>
-          <span className={`
-            text-3xl mr-2 inline-block p-0 pl-2 leading-3
-            translate-y-3
-          `}>
-            <>&deg;</>
-          </span>
-          <span>
-            { props.app.t(`settings.${props.setting}.title`) }
-          </span>
-        </div>
-        <span className="text-secondary">
-          {props.app.t('app.'+ (value ? 'yes' : 'no'))}
-        </span>
-      </button>
-    </li>
+    <Li>
+      <SumButton onClick={toggle}>
+        <SumDiv>
+          <Deg />
+          <span>{ props.app.t(`settings.${props.setting}.title`) }</span>
+        </SumDiv>
+        <SecText>{props.app.t('app.'+ (value ? 'yes' : 'no'))}</SecText>
+      </SumButton>
+    </Li>
   )
 }
 
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
index bc4c85d6d4e..761c57e0890 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Deg } from 'shared/components/workbench/menu/index.js'
 
 const CoreSettingList = props => {
   const { dflt, list } = props
@@ -35,12 +36,7 @@ const CoreSettingList = props => {
                 ${entry.key === value && 'font-bold text-secondary'}
               `}
             >
-              <span className={`
-                text-3xl mr-2 inline-block p-0 leading-3
-                translate-y-3
-              `}>
-                <>&deg;</>
-              </span>
+              <Deg />
               {entry.title}
             </button>
           ))}
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-bool.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-bool.js
index 9cb1a87a969..6766e1fc1ba 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-bool.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-bool.js
@@ -1,10 +1,9 @@
 import { useState } from 'react'
-import { linkClasses } from 'shared/components/navigation/primary.js'
+import { SecText, SumButton, Li, SumDiv, Deg } from 'shared/components/workbench/menu/index.js'
 
 const CoreSettingSaBool = props => {
-  const val = props.gist.saBool || false
 
-  const [value, setValue] = useState(val)
+  const [value, setValue] = useState(props.gist.saBool || false)
 
   const toggle = () => {
     props.setGist({
@@ -16,45 +15,19 @@ const CoreSettingSaBool = props => {
   }
 
   return (
-    <li className="flex flex-row">
-      <button className={`
-        flex flex-row
-        w-full
-        justify-between
-        px-2
-        text-left
-        text-base-content
-        sm:text-neutral-content
-        items-center
-        pr-6
-      `} onClick={toggle}>
-        <div className={`
-          grow pl-2 border-l-2
-          ${linkClasses}
-          hover:cursor-pointer
-          hover:border-secondary
-          sm:hover:border-secondary-focus
-          text-base-content sm:text-neutral-content
-        `}>
-          <span className={`
-            text-3xl mr-2 inline-block p-0 pl-2 leading-3
-            translate-y-3
-          `}>
-            <>&deg;</>
-          </span>
-          <span>
-            { props.app.t(`settings.sa.title`) }
-          </span>
+    <Li>
+      <SumButton onClick={toggle}>
+        <SumDiv>
+          <Deg />
+          <span>{ props.app.t(`settings.sa.title`) }</span>
           <span className="ml-4 opacity-50">
             [ { props.app.t(`app.yes`) }/
             { props.app.t(`app.no`) } ]
           </span>
-        </div>
-        <span className="text-secondary">
-          {props.app.t('app.'+ (value ? 'yes' : 'no'))}
-        </span>
-      </button>
-    </li>
+        </SumDiv>
+        <SecText>{props.app.t('app.'+ (value ? 'yes' : 'no'))}</SecText>
+      </SumButton>
+    </Li>
   )
 }
 
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/index.js b/packages/freesewing.shared/components/workbench/menu/core-settings/index.js
index d91bdd5f367..81c622ab939 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/index.js
@@ -1,6 +1,7 @@
 import SettingsIcon from 'shared/components/icons/settings.js'
 import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
 import Setting from './setting.js'
+import { Ul, Details, TopSummary, TopSumTitle } from '../index.js'
 
 const settings = {
   paperless: {
@@ -46,31 +47,18 @@ const settings = {
   },
 }
 
-const CoreSettings = props => {
-
-  return (
-    <details className='py-1' open>
-      <summary className={`
-        flex flex-row uppercase gap-4 font-bold text-lg
-        hover:cursor-row-resize
-        p-2
-        text-base-content
-        sm:text-neutral-content
-        items-center
-      `}>
-        <span className="text-secondary-focus mr-4"><SettingsIcon /></span>
-        <span className={`grow ${linkClasses} hover:cursor-resize`}>
-          {props.app.t('app.settings')}
-        </span>
-        <Chevron />
-      </summary>
-      <ul className="pl-5 list-inside">
-        {Object.keys(settings).map(setting => (
-          <Setting key={setting} setting={setting} config={settings[setting]} {...props} />
-        ))}
-      </ul>
-    </details>
-  )
-}
+const CoreSettings = props => (
+  <Details open>
+    <TopSummary icon={<SettingsIcon />}>
+      <TopSumTitle>{props.app.t('app.settings')}</TopSumTitle>
+      <Chevron />
+    </TopSummary>
+    <Ul>
+      {Object.keys(settings).map(setting => (
+        <Setting key={setting} setting={setting} config={settings[setting]} {...props} />
+      ))}
+    </Ul>
+  </Details>
+)
 
 export default CoreSettings
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/setting.js b/packages/freesewing.shared/components/workbench/menu/core-settings/setting.js
index d28d0e9e109..eef31c32db1 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/setting.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/setting.js
@@ -1,4 +1,4 @@
-import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import { Chevron } from 'shared/components/navigation/primary.js'
 import PctDegOption from 'shared/components/workbench/inputs/design-option-pct-deg'
 import CountOption from 'shared/components/workbench/inputs/design-option-count'
 import ListSetting from './core-setting-list'
@@ -9,67 +9,46 @@ import BoolSetting from './core-setting-bool.js'
 import SaBoolSetting from './core-setting-sa-bool.js'
 import SaMmSetting from './core-setting-sa-mm.js'
 import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
+import { SecText, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu/index.js'
 
 const settings = {
-  paperless: props => {
-    return (
-      <span className="text-secondary">
-        {props.app.t(`app.${props.gist.paperless ? 'yes' : 'no'}`)}
-      </span>
-    )
-  },
-  complete: props => {
-    return (
-      <span className="text-secondary">
-        {props.app.t(`app.${props.gist.complete ? 'yes' : 'no'}`)}
-      </span>
-    )
-  },
-  debug: props => {
-    return (
-      <span className="text-secondary">
-        {props.app.t(`app.${props.gist.debug ? 'yes' : 'no'}`)}
-      </span>
-    )
-  },
-  locale: props => {
-    return (
-      <span className="text-secondary">
-        {props.app.t(`i18n.${props.gist.locale}`)}
-      </span>
-    )
-  },
-  units: props => {
-    return (
-      <span className="text-secondary">
-        {props.app.t(`app.${props.gist.units}Units`)}
-      </span>
-    )
-  },
-  margin: props => {
-    return (
-      <span className="text-secondary" dangerouslySetInnerHTML={{
-        __html: formatMm(props.gist.margin, props.gist.units)
-      }} />
-    )
-  },
+  paperless: props => (
+    <SecText>
+      {props.app.t(`app.${props.gist.paperless ? 'yes' : 'no'}`)}
+    </SecText>
+  ),
+  complete: props => (
+    <SecText>
+      {props.app.t(`app.${props.gist.complete ? 'yes' : 'no'}`)}
+    </SecText>
+  ),
+  debug: props => (
+    <SecText>
+      {props.app.t(`app.${props.gist.debug ? 'yes' : 'no'}`)}
+    </SecText>
+  ),
+  locale: props => (
+    <SecText>
+      {props.app.t(`i18n.${props.gist.locale}`)}
+    </SecText>
+  ),
+  units: props => (
+    <SecText>
+      {props.app.t(`app.${props.gist.units}Units`)}
+    </SecText>
+  ),
+  margin: props => <SecText raw={formatMm(props.gist.margin, props.gist.units)} />,
   scale: props => props.gist.scale === 1
-    ? <span className="text-secondary">{props.gist.scale}</span>
+    ? <SecText>{props.gist.scale}</SecText>
     : <span className="text-accent">{props.gist.scale}</span>,
-  saMm: props => {
-    return (
-      <span className="text-secondary" dangerouslySetInnerHTML={{
-        __html: formatMm(props.gist.saMm, props.gist.units)
-      }} />
-    )
-  },
+  saMm: props => <SecText raw={formatMm(props.gist.saMm, props.gist.units)} />,
   renderer: props => (
-    <span className="text-secondary">
+    <SecText>
       {props.config.titles[props.gist.renderer]}
-    </span>
+    </SecText>
   ),
   only: props => (props.gist?.only && props.gist.only.length > 0)
-    ? <span className="text-accent">{props.gist.only.length}</span>
+    ? <SecText>{props.gist.only.length}</SecText>
     : <span className="text-secondary">{props.app.t('app.default')}</span>
 }
 
@@ -112,30 +91,11 @@ const Setting = props => {
   const Value = settings[props.setting]
 
   return (
-    <li className="flex flex-row">
-      <details className="grow">
-        <summary className={`
-          flex flex-row
-          px-2
-          text-base-content
-          sm:text-neutral-content
-          hover:cursor-row-resize
-          items-center
-        `}>
-          <div className={`
-            grow pl-2 border-l-2
-            ${linkClasses}
-            hover:cursor-resize
-            hover:border-secondary
-            sm:hover:border-secondary-focus
-            text-base-content sm:text-neutral-content
-          `}>
-            <span className={`
-              text-3xl inline-block p-0 leading-3 px-2
-              translate-y-3
-            `}>
-              <>&deg;</>
-            </span>
+    <Li>
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
             {props.setting === 'saMm'
               ? (
                 <>
@@ -145,13 +105,13 @@ const Setting = props => {
               )
               : <span>{props.app.t(`settings.${props.setting}.title`)}</span>
             }
-          </div>
+          </SumDiv>
           <Value setting={props.setting} {...props} />
-          <Chevron w={6} m={3}/>
-        </summary>
+          <Chevron />
+        </Summary>
         <Input {...props} />
-      </details>
-    </li>
+      </Details>
+    </Li>
   )
 }
 
diff --git a/packages/freesewing.shared/components/workbench/menu/design-options/index.js b/packages/freesewing.shared/components/workbench/menu/design-options/index.js
index 34d27542653..321dad6a005 100644
--- a/packages/freesewing.shared/components/workbench/menu/design-options/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/design-options/index.js
@@ -1,31 +1,22 @@
 import OptionsIcon from 'shared/components/icons/options.js'
-import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import { Chevron } from 'shared/components/navigation/primary.js'
 import OptionGroup from './option-group'
+import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbench/menu'
 
 const DesignOptions = props => {
 
   return (
-    <details className='py-1' open>
-      <summary className={`
-        flex flex-row uppercase gap-4 font-bold text-lg
-        hover:cursor-row-resize
-        p-2
-        text-base-content
-        sm:text-neutral-content
-        items-center
-      `}>
-        <span className="text-secondary-focus mr-4"><OptionsIcon /></span>
-        <span className={`grow ${linkClasses}`}>
-          {props.app.t('app.designOptions')}
-        </span>
+    <Details open>
+      <TopSummary icon={<OptionsIcon />}>
+        <TopSumTitle>{props.app.t('app.designOptions')}</TopSumTitle>
         <Chevron />
-      </summary>
-      <ul className="pl-5 list-inside">
+      </TopSummary>
+      <Ul className="pl-5 list-inside">
         {Object.keys(props.pattern.config.optionGroups).map(group => (
           <OptionGroup {...props} group={group} key={group} />
         ))}
-      </ul>
-    </details>
+      </Ul>
+    </Details>
   )
 }
 
diff --git a/packages/freesewing.shared/components/workbench/menu/design-options/option-group.js b/packages/freesewing.shared/components/workbench/menu/design-options/option-group.js
index 0dae9cdd78a..39d132344b5 100644
--- a/packages/freesewing.shared/components/workbench/menu/design-options/option-group.js
+++ b/packages/freesewing.shared/components/workbench/menu/design-options/option-group.js
@@ -1,49 +1,30 @@
-import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import { Chevron } from 'shared/components/navigation/primary.js'
 import Option from './option'
 import OptionSubGroup from './option-sub-group'
+import { Li, Ul, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu'
 
 const OptionGroup = props => {
   const config = props.config || props.pattern.config.optionGroups[props.group]
   return (
-    <li className="flex flex-row">
-      <details className="grow">
-        <summary className={`
-          flex flex-row
-          px-2
-          text-base-content
-          sm:text-neutral-content
-          hover:cursor-row-resize
-          items-center
-        `}>
-          <div className={`
-            grow pl-2 border-l-2
-            ${linkClasses}
-            hover:cursor-resize
-            hover:border-secondary
-            sm:hover:border-secondary-focus
-            text-base-content sm:text-neutral-content
-            font-bold
-          `}>
-            <span className={`
-              text-3xl mr-2 inline-block p-0 leading-3
-              translate-y-3
-            `}>
-              <>&deg;</>
-            </span>
-            <span>
+    <Li>
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
+            <span className="font-bold">
               { props.app.t(`optiongroups.${props.group}`) }
             </span>
-          </div>
-          <Chevron w={6} m={3}/>
-        </summary>
-        <ul className="pl-5 list-inside">
+          </SumDiv>
+          <Chevron />
+        </Summary>
+        <Ul>
           {config.map(option => typeof option === 'string'
             ? <Option {...props} option={option} key={option} />
             : <OptionSubGroup {...props} sub={option} config={config} />
           )}
-        </ul>
-      </details>
-    </li>
+        </Ul>
+      </Details>
+    </Li>
   )
 }
 
diff --git a/packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js b/packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js
index c5eb0eca145..ccc52c7c09b 100644
--- a/packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js
+++ b/packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js
@@ -1,47 +1,26 @@
 import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
 import Option from './option'
+import { Li, Ul, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
 
 const OptionSubGroup = props => {
   return Object.keys(props.sub).map(name => (
-    <li className="flex flex-row">
-      <details className="grow">
-        <summary className={`
-          flex flex-row
-          px-2
-          text-base-content
-          sm:text-neutral-content
-          hover:cursor-row-resize
-          items-center
-        `}>
-          <div className={`
-            grow pl-2 border-l-2
-            ${linkClasses}
-            hover:cursor-resize
-            hover:border-secondary
-            sm:hover:border-secondary-focus
-            text-base-content sm:text-neutral-content
-            font-bold
-          `}>
-            <span className={`
-              text-3xl mr-2 inline-block p-0 leading-3
-              translate-y-3
-            `}>
-              <>&deg;</>
-            </span>
-            <span>
-              { props.app.t(`optiongroups.${name}`) }
-            </span>
-          </div>
-          <Chevron w={6} m={3}/>
-        </summary>
-        <ul className="pl-5 list-inside">
+    <Li>
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
+            <span className="font-bold">{ props.app.t(`optiongroups.${name}`) }</span>
+          </SumDiv>
+          <Chevron />
+        </Summary>
+        <Ul>
           {props.sub[name].map(option => typeof option === 'string'
             ? <Option {...props} option={option} key={option} />
             : <OptionSubGroup {...props} sub={option} config={config} />
           )}
-        </ul>
-      </details>
-    </li>
+        </Ul>
+      </Details>
+    </Li>
   ))
 }
 
diff --git a/packages/freesewing.shared/components/workbench/menu/design-options/option.js b/packages/freesewing.shared/components/workbench/menu/design-options/option.js
index 44098c0522c..5394e8ce202 100644
--- a/packages/freesewing.shared/components/workbench/menu/design-options/option.js
+++ b/packages/freesewing.shared/components/workbench/menu/design-options/option.js
@@ -1,8 +1,9 @@
-import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import { Chevron } from 'shared/components/navigation/primary.js'
 import PctDegOption from 'shared/components/workbench/inputs/design-option-pct-deg'
 import CountOption from 'shared/components/workbench/inputs/design-option-count'
 import ListOption from 'shared/components/workbench/inputs/design-option-list'
 import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
+import { Li, Ul, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
 
 const values = {
   pct: props => {
@@ -94,77 +95,36 @@ const Option = props => {
     else props.unsetGist(['options', props.option])
   }
 
-  if (type === 'bool') return (
-    <li className="flex flex-row">
-      <button className={`
-        flex flex-row
-        w-full
-        justify-between
-        px-2
-        text-left
-        text-base-content
-        sm:text-neutral-content
-        items-center
-        pr-6
-      `} onClick={toggleBoolean}>
-        <div className={`
-          grow pl-2 border-l-2
-          ${linkClasses}
-          hover:border-secondary
-          sm:hover:border-secondary-focus
-          text-base-content sm:text-neutral-content
-        `}>
-          <span className={`
-            text-3xl mr-2 inline-block p-0 leading-3
-            translate-y-3
-          `}>
-            <>&deg;</>
-          </span>
-          <span>
-            { props.app.t(`options.${props.pattern.config.name}.${props.option}.title`) }
-          </span>
-        </div>
-        <Value type={type} {...props} />
-      </button>
-    </li>
-
-  )
-
-  return (
-    <li className="flex flex-row">
-      <details className="grow">
-        <summary className={`
-          flex flex-row
-          px-2
-          text-base-content
-          sm:text-neutral-content
-          hover:cursor-row-resize
-          items-center
-        `}>
-          <div className={`
-            grow pl-2 border-l-2
-            ${linkClasses}
-            hover:border-secondary
-            sm:hover:border-secondary-focus
-            text-base-content sm:text-neutral-content
-          `}>
-            <span className={`
-              text-3xl mr-2 inline-block p-0 leading-3
-              translate-y-3
-            `}>
-              <>&deg;</>
-            </span>
+  return (type === 'bool')
+    ? (
+      <Li>
+        <SumButton onClick={toggleBoolean}>
+          <SumDiv>
+            <Deg />
             <span>
               { props.app.t(`options.${props.pattern.config.name}.${props.option}.title`) }
             </span>
-          </div>
+          </SumDiv>
           <Value type={type} {...props} />
-          <Chevron w={6} m={3}/>
-        </summary>
-        <Input {...props} />
-      </details>
-    </li>
-  )
+        </SumButton>
+      </Li>
+    ) : (
+      <Li>
+        <Details>
+          <Summary>
+            <SumDiv>
+              <Deg />
+              <span>
+                { props.app.t(`options.${props.pattern.config.name}.${props.option}.title`) }
+              </span>
+            </SumDiv>
+            <Value type={type} {...props} />
+            <Chevron w={6} m={3}/>
+          </Summary>
+          <Input {...props} />
+        </Details>
+      </Li>
+    )
 }
 
 export default Option
diff --git a/packages/freesewing.shared/components/workbench/menu/index.js b/packages/freesewing.shared/components/workbench/menu/index.js
index 8cccf4cb41d..93e6dde5d2b 100644
--- a/packages/freesewing.shared/components/workbench/menu/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/index.js
@@ -1,8 +1,72 @@
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
 import ModesMenu from './modes.js'
 import DesignOptions from './design-options'
 import CoreSettings from './core-settings'
 import Xray from './xray'
 
+export const Ul = props => <ul className="pl-5 list-inside">{props.children}</ul>
+export const Li = props => <li className="flex flex-row">{props.children}</li>
+export const Details = props => (
+  <details className="grow" open={props.open || false}>
+    {props.children}
+  </details>
+)
+export const Deg = props => <span className="text-3xl inline-block p-0 leading-3 px-2 translate-y-3">&deg;</span>
+export const SumDiv = props => (
+  <div className={`
+    grow pl-2 border-l-2
+    ${linkClasses}
+    hover:cursor-resize
+    hover:border-secondary
+    sm:hover:border-secondary-focus
+    text-base-content sm:text-neutral-content
+  `}>{props.children}</div>
+)
+export const Summary = props => (
+  <summary className={`
+    flex flex-row
+    px-2
+    text-base-content
+    sm:text-neutral-content
+    hover:cursor-row-resize
+    items-center
+  `}>{props.children}</summary>
+)
+export const TopSummary = props => (
+  <summary className={`
+    flex flex-row gap-4 text-lg
+    hover:cursor-row-resize
+    p-2
+    text-base-content
+    sm:text-neutral-content
+    items-center
+  `}>
+    <span className="text-secondary-focus mr-4">{props.icon || null}</span>
+    {props.children}
+  </summary>
+)
+export const SumButton = props => (
+  <button className={`
+    flex flex-row
+    px-2
+    w-full justify-between
+    text-left
+    text-base-content
+    sm:text-neutral-content
+    hover:cursor-pointer
+    items-center
+    mr-4
+  `} onClick={props.onClick}>{props.children}</button>
+)
+export const TopSumTitle = props => (
+  <span className={`grow ${linkClasses} hover:cursor-resize font-bold uppercase`}>
+    {props.children}
+  </span>
+)
+export const SecText = props => props.raw
+  ? <span className="text-secondary" dangerouslySetInnerHTML={{__html: props.raw}} />
+  : <span className="text-secondary">{props.children}</span>
+
 const WorkbenchMenu = props => {
   return (
     <nav className="smmax-w-96 grow mb-12">
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/disable.js b/packages/freesewing.shared/components/workbench/menu/xray/disable.js
index 471fe669f36..9a3b1a3c848 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/disable.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/disable.js
@@ -1,39 +1,16 @@
-import { useState } from 'react'
-import { linkClasses } from 'shared/components/navigation/primary.js'
+import { Li, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
 
 const DisableXray = props => (
-  <li className="flex flex-row">
-    <button className={`
-      flex flex-row
-      w-full
-      justify-between
-      px-2
-      text-left
-      text-base-content
-      sm:text-neutral-content
-      items-center
-      pr-6
-    `} onClick={() => props.updateGist(['xray', 'enabled'], false)}>
-      <div className={`
-        grow pl-2 border-l-2
-        ${linkClasses}
-        hover:cursor-pointer
-        hover:border-secondary
-        sm:hover:border-secondary-focus
-        text-base-content sm:text-neutral-content
-      `}>
-        <span className={`
-          text-3xl mr-2 inline-block p-0 pl-2 leading-3
-          translate-y-3
-        `}>
-          <>&deg;</>
-        </span>
+  <Li>
+    <SumButton onClick={() => props.updateGist(['xray', 'enabled'], false)}>
+      <SumDiv>
+        <Deg />
         <span>
           {props.app.t('cfp.thingIsEnabled', { thing: props.app.t('settings.xray.title') })}
         </span>
-      </div>
-    </button>
-  </li>
+      </SumDiv>
+    </SumButton>
+  </Li>
 )
 
 export default DisableXray
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/index.js b/packages/freesewing.shared/components/workbench/menu/xray/index.js
index 633f364b38c..03c6d87bd0d 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/index.js
@@ -3,20 +3,13 @@ import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
 import Reset from './reset.js'
 import Disable from './disable.js'
 import List from './list.js'
+import { Ul, Details, TopSummary } from 'shared/components/workbench/menu'
 
 const Xray = props => {
 
   return (
-    <details className='py-1' open>
-      <summary className={`
-        flex flex-row gap-4 text-lg
-        hover:cursor-row-resize
-        p-2
-        text-base-content
-        sm:text-neutral-content
-        items-center
-      `}>
-        <span className="text-secondary-focus mr-4"><XrayIcon /></span>
+    <Details open>
+      <TopSummary icon={<XrayIcon />}>
         {props.gist?.xray?.enabled
           ? (
             <>
@@ -39,18 +32,18 @@ const Xray = props => {
             </>
           )
         }
-      </summary>
+      </TopSummary>
       {props.gist?.xray?.enabled && (
-        <ul className="pl-5 list-inside">
+        <Ul>
           <Disable {...props} />
           <Reset {...props} />
           {
             props.gist?.xray?.parts &&
             Object.keys(props.gist.xray.parts).map(partName => <List {...props} partName={partName} />)
           }
-        </ul>
+        </Ul>
       )}
-    </details>
+    </Details>
   )
 }
 
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/list.js b/packages/freesewing.shared/components/workbench/menu/xray/list.js
index e7e7abf411a..5f09ad9cb14 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/list.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/list.js
@@ -1,5 +1,9 @@
-import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import { Chevron } from 'shared/components/navigation/primary.js'
 import ClearIcon from 'shared/components/icons/clear.js'
+import { Ul, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu'
+
+
+const Path = props => <p>{props.pathName}</p>
 
 const XrayList = props => {
 
@@ -7,33 +11,14 @@ const XrayList = props => {
   if (title !== props.partName || true) title + ` (${props.partName})`
 
   return (
-    <li className="flex flex-row">
-      <details className="grow">
-        <summary className={`
-          flex flex-row
-          px-2
-          text-base-content
-          sm:text-neutral-content
-          hover:cursor-row-resize
-          items-center
-        `}>
-          <div className={`
-            grow pl-2 border-l-2
-            ${linkClasses}
-            hover:cursor-resize
-            hover:border-secondary
-            sm:hover:border-secondary-focus
-            text-base-content sm:text-neutral-content
-          `}>
-            <span className={`
-              text-3xl inline-block p-0 leading-3 px-2
-              translate-y-3
-            `}>
-              <>&deg;</>
-            </span>
+    <Li>
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
             <span>{title}</span>
             <span className="ml-2 opacity-60">[{props.partName}]</span>
-          </div>
+          </SumDiv>
           <button
             className="text-accent px-3 hover:text-secondary-focus"
             onClick={() => props.unsetGist(['xray', 'parts', props.partName])}
@@ -41,10 +26,25 @@ const XrayList = props => {
             <ClearIcon />
           </button>
           <Chevron w={6} m={3}/>
-        </summary>
-        fixme: something
-      </details>
-    </li>
+        </Summary>
+        {props.gist.xray.parts[props.partName].paths && (
+          <Ul>
+            <Li>
+              <Details>
+                <Summary>
+                  <SumDiv>
+                    <span>Paths</span>
+                  </SumDiv>
+                </Summary>
+                {Object.keys(props.gist.xray.parts[props.partName].paths)
+                  .map(pathName => <Path {...props} pathName={pathName} />)
+                }
+              </Details>
+            </Li>
+          </Ul>
+        )}
+      </Details>
+    </Li>
   )
 }
 
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/path.js b/packages/freesewing.shared/components/workbench/menu/xray/path.js
new file mode 100644
index 00000000000..7ce2713d319
--- /dev/null
+++ b/packages/freesewing.shared/components/workbench/menu/xray/path.js
@@ -0,0 +1,5 @@
+const XrayPath = props => {
+
+}
+
+export default XrayPath
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/reset.js b/packages/freesewing.shared/components/workbench/menu/xray/reset.js
index 72760a9904e..299d3eef173 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/reset.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/reset.js
@@ -1,38 +1,14 @@
-import { linkClasses } from 'shared/components/navigation/primary.js'
+import { Li, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
 
 const ResetXray = props =>  (
-  <li className="flex flex-row">
-    <button className={`
-      flex flex-row
-      w-full
-      justify-between
-      px-2
-      text-left
-      text-base-content
-      sm:text-neutral-content
-      items-center
-      pr-6
-    `} onClick={() => props.updateGist(['xray'], { enabled: true })}>
-      <div className={`
-        grow pl-2 border-l-2
-        ${linkClasses}
-        hover:cursor-pointer
-        hover:border-secondary
-        sm:hover:border-secondary-focus
-        text-base-content sm:text-neutral-content
-      `}>
-        <span className={`
-          text-3xl mr-2 inline-block p-0 pl-2 leading-3
-          translate-y-3
-        `}>
-          <>&deg;</>
-        </span>
-        <span>
-          { props.app.t(`app.reset`) }
-        </span>
-      </div>
-    </button>
-  </li>
+  <Li>
+    <SumButton onClick={() => props.updateGist(['xray'], { enabled: true })}>
+      <SumDiv>
+        <Deg />
+        <span>{ props.app.t(`app.reset`) }</span>
+      </SumDiv>
+    </SumButton>
+  </Li>
 )
 
 export default ResetXray