fix(shared): Deal with list option inputs

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

@@ -67,16 +67,18 @@ const values = {
 
 // Emojis for option groups :)
 const emojis = {
+  advanced: '🤓',
   fit: '👕',
   style: '💃🏽',
   dflt: '🕹️',
+  groupDflt: '📁',
 }
 
 const GroupTitle = ({ group, t, open = false }) => (
   <div className={`flex flex-row gap-1 items-center w-full ${open ? '' : 'justify-between'}`}>
     <span className="font-medium">
       <span role="img" className="pr-2">
-        {emojis[group] ? emojis[group] : emojis.dflt}
+        {emojis[group] ? emojis[group] : emojis.groupDflt}
       </span>
       {t(`design-options:${group}.t`)}
       {open ? ':' : ''}
@@ -138,7 +140,7 @@ export const DesignOption = ({
       <HelpIcon className="w-4 h-4" />
     </button>,
   ]
-  if (['pct'].includes(type))
+  if (['pct', 'count'].includes(type))
     openButtons.push(
       <button
         className="btn btn-xs btn-ghost px-0"
@@ -196,7 +198,7 @@ export const DesignOptionGroup = ({
           changed={wasChanged(settings.options?.[option], patternConfig.options[option])}
         />
       ) : (
-        <OptionGroup
+        <DesignOptionGroup
           {...{ design, patternConfig, settings, update, Option, t, loadDocs }}
           group={option}
           options={type}

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

@@ -25,12 +25,11 @@ const EditCount = (props) => (
   </div>
 )
 
-export const CountOptionInput = ({ name, config, current, update, t }) => {
+export const CountOptionInput = ({ name, design, config, current, update, t, override }) => {
   const { count, max, min } = config
   if (typeof current === 'undefined') current = count
 
   const [value, setValue] = useState(current)
-  const [editCount, setEditCount] = useState(false)
 
   const handleChange = (evt) => {
     const newCurrent = evt.target.value
@@ -43,10 +42,11 @@ export const CountOptionInput = ({ name, config, current, update, t }) => {
   }
 
   return (
-    <div className="py-4 mx-6 border-l-2 pl-2">
+    <>
+      <p>{t(`${design}:o.${name}.d`)}</p>
       <div className="flex flex-row justify-between">
-        {editCount ? (
-          <EditCount {...{ value, handleChange, min, max, setEditCount, t }} />
+        {override ? (
+          <EditCount {...{ value, handleChange, min, max, t }} />
         ) : (
           <>
             <span className="opacity-50">{min}</span>
@@ -64,25 +64,10 @@ export const CountOptionInput = ({ name, config, current, update, t }) => {
         onChange={handleChange}
         className={`
           range range-sm mt-1
-          ${val === count ? 'range-secondary' : 'range-accent'}
+          ${current === count ? 'range-secondary' : 'range-accent'}
         `}
       />
-      <div className="flex flex-row justify-between">
-        <span></span>
-        <div>
-          <button
-            title={t('editThing', { thing: '#' })}
-            className={`
-              btn btn-ghost btn-xs hover:text-secondary-focus
-              ${editCount ? 'text-accent' : 'text-secondary'}
-            `}
-            onClick={() => setEditCount(!editCount)}
-          >
-            <EditIcon />
-          </button>
-        </div>
-      </div>
-    </div>
+    </>
   )
 }
 

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

@@ -35,7 +35,7 @@ export const CountOptionValue = ({ name, config, current }) =>
   )
 
 export const ListOptionValue = ({ name, config, current, t }) => {
-  const translate = config.doNotTranslate ? (input) => input : (input) => t(`${option}.o.${input}`)
+  const translate = config.doNotTranslate ? (input) => input : (input) => t(`${name}.o.${input}`)
 
   return config.dflt == current || typeof current === 'undefined' ? (
     <span className="text-secondary-focus">{translate(config.dflt)}</span>