chore(lab): Refactoring workbench menu

2022-01-29 18:24:36 +01:00 · 2022-01-29 18:24:36 +01:00 · 4634ced281
commit 4634ced281
parent 9e2babfc7b
15 changed files with 270 additions and 455 deletions
--- 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>
  )
 }

--- 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>
          ))}
--- 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>
  )
 }

--- 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>
+const CoreSettings = props => (
+  <Details open>
+    <TopSummary icon={<SettingsIcon />}>
+      <TopSumTitle>{props.app.t('app.settings')}</TopSumTitle>
      <Chevron />
-      </summary>
-      <ul className="pl-5 list-inside">
+    </TopSummary>
+    <Ul>
      {Object.keys(settings).map(setting => (
        <Setting key={setting} setting={setting} config={settings[setting]} {...props} />
      ))}
-      </ul>
-    </details>
+    </Ul>
+  </Details>
 )
-}

 export default CoreSettings
--- 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">
+  paperless: props => (
+    <SecText>
      {props.app.t(`app.${props.gist.paperless ? 'yes' : 'no'}`)}
-      </span>
-    )
-  },
-  complete: props => {
-    return (
-      <span className="text-secondary">
+    </SecText>
+  ),
+  complete: props => (
+    <SecText>
      {props.app.t(`app.${props.gist.complete ? 'yes' : 'no'}`)}
-      </span>
-    )
-  },
-  debug: props => {
-    return (
-      <span className="text-secondary">
+    </SecText>
+  ),
+  debug: props => (
+    <SecText>
      {props.app.t(`app.${props.gist.debug ? 'yes' : 'no'}`)}
-      </span>
-    )
-  },
-  locale: props => {
-    return (
-      <span className="text-secondary">
+    </SecText>
+  ),
+  locale: props => (
+    <SecText>
      {props.app.t(`i18n.${props.gist.locale}`)}
-      </span>
-    )
-  },
-  units: props => {
-    return (
-      <span className="text-secondary">
+    </SecText>
+  ),
+  units: props => (
+    <SecText>
      {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)
-      }} />
-    )
-  },
+    </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>
  )
 }

--- 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>
  )
 }

--- 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>
  )
 }

--- 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>
  ))
 }

--- 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,76 +95,35 @@ 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>
+  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} />
-      </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>
+        </SumButton>
+      </Li>
+    ) : (
+      <Li>
+        <Details>
+          <Summary>
+            <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>
+          </Summary>
          <Input {...props} />
-      </details>
-    </li>
+        </Details>
+      </Li>
    )
 }

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

--- 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>
  )
 }

--- a/packages/freesewing.shared/components/workbench/menu/xray/path.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/path.js
@ -0,0 +1,5 @@
+const XrayPath = props => {
+
+}
+
+export default XrayPath
--- 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