chore(lab): Refactoring workbench menu

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">
+    <Li>
-      <button className={`
+      <SumButton onClick={toggle}>
-        flex flex-row
+        <SumDiv>
-        w-full
+          <Deg />
-        justify-between
+          <span>{ props.app.t(`settings.${props.setting}.title`) }</span>
-        px-2
+        </SumDiv>
-        text-left
+        <SecText>{props.app.t('app.'+ (value ? 'yes' : 'no'))}</SecText>
-        text-base-content
+      </SumButton>
-        sm:text-neutral-content
+    </Li>
-        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>
   )
 }
 

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={`
+              <Deg />
-                text-3xl mr-2 inline-block p-0 leading-3
-                translate-y-3
-              `}>
-                <>&deg;</>
-              </span>
               {entry.title}
             </button>
           ))}

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">
+    <Li>
-      <button className={`
+      <SumButton onClick={toggle}>
-        flex flex-row
+        <SumDiv>
-        w-full
+          <Deg />
-        justify-between
+          <span>{ props.app.t(`settings.sa.title`) }</span>
-        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>
           <span className="ml-4 opacity-50">
             [ { props.app.t(`app.yes`) }/
             { props.app.t(`app.no`) } ]
           </span>
-        </div>
+        </SumDiv>
-        <span className="text-secondary">
+        <SecText>{props.app.t('app.'+ (value ? 'yes' : 'no'))}</SecText>
-          {props.app.t('app.'+ (value ? 'yes' : 'no'))}
+      </SumButton>
-        </span>
+    </Li>
-      </button>
-    </li>
   )
 }
 

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 => {
+const CoreSettings = props => (
-
+  <Details open>
-  return (
+    <TopSummary icon={<SettingsIcon />}>
-    <details className='py-1' open>
+      <TopSumTitle>{props.app.t('app.settings')}</TopSumTitle>
-      <summary className={`
+      <Chevron />
-        flex flex-row uppercase gap-4 font-bold text-lg
+    </TopSummary>
-        hover:cursor-row-resize
+    <Ul>
-        p-2
+      {Object.keys(settings).map(setting => (
-        text-base-content
+        <Setting key={setting} setting={setting} config={settings[setting]} {...props} />
-        sm:text-neutral-content
+      ))}
-        items-center
+    </Ul>
-      `}>
+  </Details>
-        <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>
-  )
-}
 
 export default CoreSettings

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 => {
+  paperless: props => (
-    return (
+    <SecText>
-      <span className="text-secondary">
+      {props.app.t(`app.${props.gist.paperless ? 'yes' : 'no'}`)}
-        {props.app.t(`app.${props.gist.paperless ? 'yes' : 'no'}`)}
+    </SecText>
-      </span>
+  ),
-    )
+  complete: props => (
-  },
+    <SecText>
-  complete: props => {
+      {props.app.t(`app.${props.gist.complete ? 'yes' : 'no'}`)}
-    return (
+    </SecText>
-      <span className="text-secondary">
+  ),
-        {props.app.t(`app.${props.gist.complete ? 'yes' : 'no'}`)}
+  debug: props => (
-      </span>
+    <SecText>
-    )
+      {props.app.t(`app.${props.gist.debug ? 'yes' : 'no'}`)}
-  },
+    </SecText>
-  debug: props => {
+  ),
-    return (
+  locale: props => (
-      <span className="text-secondary">
+    <SecText>
-        {props.app.t(`app.${props.gist.debug ? 'yes' : 'no'}`)}
+      {props.app.t(`i18n.${props.gist.locale}`)}
-      </span>
+    </SecText>
-    )
+  ),
-  },
+  units: props => (
-  locale: props => {
+    <SecText>
-    return (
+      {props.app.t(`app.${props.gist.units}Units`)}
-      <span className="text-secondary">
+    </SecText>
-        {props.app.t(`i18n.${props.gist.locale}`)}
+  ),
-      </span>
+  margin: props => <SecText raw={formatMm(props.gist.margin, props.gist.units)} />,
-    )
-  },
-  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)
-      }} />
-    )
-  },
   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 => {
+  saMm: props => <SecText raw={formatMm(props.gist.saMm, props.gist.units)} />,
-    return (
-      <span className="text-secondary" dangerouslySetInnerHTML={{
-        __html: 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">
+    <Li>
-      <details className="grow">
+      <Details>
-        <summary className={`
+        <Summary>
-          flex flex-row
+          <SumDiv>
-          px-2
+            <Deg />
-          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>
             {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}/>
+          <Chevron />
-        </summary>
+        </Summary>
         <Input {...props} />
-      </details>
+      </Details>
-    </li>
+    </Li>
   )
 }
 

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>
+    <Details open>
-      <summary className={`
+      <TopSummary icon={<OptionsIcon />}>
-        flex flex-row uppercase gap-4 font-bold text-lg
+        <TopSumTitle>{props.app.t('app.designOptions')}</TopSumTitle>
-        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>
         <Chevron />
-      </summary>
+      </TopSummary>
-      <ul className="pl-5 list-inside">
+      <Ul className="pl-5 list-inside">
         {Object.keys(props.pattern.config.optionGroups).map(group => (
           <OptionGroup {...props} group={group} key={group} />
         ))}
-      </ul>
+      </Ul>
-    </details>
+    </Details>
   )
 }
 

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">
+    <Li>
-      <details className="grow">
+      <Details>
-        <summary className={`
+        <Summary>
-          flex flex-row
+          <SumDiv>
-          px-2
+            <Deg />
-          text-base-content
+            <span className="font-bold">
-          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.${props.group}`) }
             </span>
-          </div>
+          </SumDiv>
-          <Chevron w={6} m={3}/>
+          <Chevron />
-        </summary>
+        </Summary>
-        <ul className="pl-5 list-inside">
+        <Ul>
           {config.map(option => typeof option === 'string'
             ? <Option {...props} option={option} key={option} />
             : <OptionSubGroup {...props} sub={option} config={config} />
           )}
-        </ul>
+        </Ul>
-      </details>
+      </Details>
-    </li>
+    </Li>
   )
 }
 

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">
+    <Li>
-      <details className="grow">
+      <Details>
-        <summary className={`
+        <Summary>
-          flex flex-row
+          <SumDiv>
-          px-2
+            <Deg />
-          text-base-content
+            <span className="font-bold">{ props.app.t(`optiongroups.${name}`) }</span>
-          sm:text-neutral-content
+          </SumDiv>
-          hover:cursor-row-resize
+          <Chevron />
-          items-center
+        </Summary>
-        `}>
+        <Ul>
-          <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">
           {props.sub[name].map(option => typeof option === 'string'
             ? <Option {...props} option={option} key={option} />
             : <OptionSubGroup {...props} sub={option} config={config} />
           )}
-        </ul>
+        </Ul>
-      </details>
+      </Details>
-    </li>
+    </Li>
   ))
 }
 

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 (
+  return (type === 'bool')
-    <li className="flex flex-row">
+    ? (
-      <button className={`
+      <Li>
-        flex flex-row
+        <SumButton onClick={toggleBoolean}>
-        w-full
+          <SumDiv>
-        justify-between
+            <Deg />
-        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>
             <span>
               { props.app.t(`options.${props.pattern.config.name}.${props.option}.title`) }
             </span>
-          </div>
+          </SumDiv>
           <Value type={type} {...props} />
-          <Chevron w={6} m={3}/>
+        </SumButton>
-        </summary>
+      </Li>
-        <Input {...props} />
+    ) : (
-      </details>
+      <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

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">

packages/freesewing.shared/components/workbench/menu/xray/disable.js

@@ -1,39 +1,16 @@
-import { useState } from 'react'
+import { Li, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
-import { linkClasses } from 'shared/components/navigation/primary.js'
 
 const DisableXray = props => (
-  <li className="flex flex-row">
+  <Li>
-    <button className={`
+    <SumButton onClick={() => props.updateGist(['xray', 'enabled'], false)}>
-      flex flex-row
+      <SumDiv>
-      w-full
+        <Deg />
-      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>
         <span>
           {props.app.t('cfp.thingIsEnabled', { thing: props.app.t('settings.xray.title') })}
         </span>
-      </div>
+      </SumDiv>
-    </button>
+    </SumButton>
-  </li>
+  </Li>
 )
 
 export default DisableXray

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>
+    <Details open>
-      <summary className={`
+      <TopSummary icon={<XrayIcon />}>
-        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>
         {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>
   )
 }
 

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">
+    <Li>
-      <details className="grow">
+      <Details>
-        <summary className={`
+        <Summary>
-          flex flex-row
+          <SumDiv>
-          px-2
+            <Deg />
-          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>
             <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>
+        </Summary>
-        fixme: something
+        {props.gist.xray.parts[props.partName].paths && (
-      </details>
+          <Ul>
-    </li>
+            <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>
   )
 }
 

packages/freesewing.shared/components/workbench/menu/xray/path.js

@@ -0,0 +1,5 @@
+const XrayPath = props => {
+
+}
+
+export default XrayPath

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">
+  <Li>
-    <button className={`
+    <SumButton onClick={() => props.updateGist(['xray'], { enabled: true })}>
-      flex flex-row
+      <SumDiv>
-      w-full
+        <Deg />
-      justify-between
+        <span>{ props.app.t(`app.reset`) }</span>
-      px-2
+      </SumDiv>
-      text-left
+    </SumButton>
-      text-base-content
+  </Li>
-      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>
 )
 
 export default ResetXray