From e433a7d1cecb236889f14fc6f859f43a51d5dbc6 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sat, 19 Apr 2025 17:52:48 +0200
Subject: [PATCH] [org] fix: Menus in Editor

---
 .../Editor/components/Accordion.mjs           |  42 ++++---
 .../Editor/components/HeaderMenu.mjs          | 108 +++++++++---------
 .../Editor/components/PatternLayout.mjs       |  23 +++-
 .../Editor/components/menus/Container.mjs     |   2 +-
 .../Editor/components/menus/Input.mjs         |   2 +-
 packages/react/components/Input/index.mjs     |  10 +-
 sites/org/src/css/custom.css                  |   5 +
 .../src/pages/{typography.js => styles.js}    |  23 +++-
 sites/org/tailwind-force.html                 |  37 ++++++
 9 files changed, 163 insertions(+), 89 deletions(-)
 rename sites/org/src/pages/{typography.js => styles.js} (86%)

diff --git a/packages/react/components/Editor/components/Accordion.mjs b/packages/react/components/Editor/components/Accordion.mjs
index 224f53583c5..6c597eeff7d 100644
--- a/packages/react/components/Editor/components/Accordion.mjs
+++ b/packages/react/components/Editor/components/Accordion.mjs
@@ -5,19 +5,21 @@ import React, { useState } from 'react'
  * So instead, we handle this in React state
  */
 const getProps = (isActive = false) => ({
-  className: `tw:p-2 tw:px-4 tw:rounded-lg tw:bg-transparent tw:shadow tw:hover:cursor-pointer
-    tw:w-full tw:h-auto tw:content-start tw:text-left
-    ${isActive ? 'tw:hover:bg-transparent' : 'tw:hover:bg-secondary/10'}`,
+  className: `tw:p-0 tw:rounded-lg tw:bg-transparent tw:hover:cursor-pointer
+    tw:w-full tw:h-auto tw:content-start tw:text-left tw:list-none`,
 })
 
 const getSubProps = (isActive) => ({
-  className: `tw:p-2 tw:px-4 tw:rounded-none tw:bg-transparent tw:w-full tw:h-auto
-  tw:content-start tw:bg-secondary/20 tw:text-left
-  ${isActive ? 'tw:bg-secondary tw:hover:bg-transparent tw:shadow' : 'tw:hover:bg-secondary/10 '}`,
+  className: `tw:p-0 tw:rounded-none tw:bg-transparent tw:w-full tw:h-auto
+  tw:content-start tw:bg-secondary/20 tw:text-left tw:list-none`,
 })
 
 const components = {
-  button: (props) => <button {...props}>{props.children}</button>,
+  button: (props) => (
+    <li role="button" {...props}>
+      {props.children}
+    </li>
+  ),
   div: (props) => <div {...props}>{props.children}</div>,
 }
 
@@ -31,20 +33,24 @@ export const BaseAccordion = ({
   const Component = components[component]
 
   return (
-    <nav>
+    <>
       {items
         .filter((item) => item[0])
         .map((item, i) =>
           active === item[2] ? (
-            <div key={i} {...propsGetter(true)}>
-              <Component
-                onClick={setActive}
-                className="tw:w-full tw:bg-transparent tw:border-0 tw:hover:bg-secondary/20 tw:hover:cursor-pointer"
-              >
-                {item[0]}
-              </Component>
-              {item[1]}
-            </div>
+            <li key={i} {...propsGetter(true)}>
+              <div className="tw:flex tw:flex-col tw:w-full tw:active:bg-transparent tw:hover:bg-transparent tw:p-0 tw:m-0">
+                <Component
+                  onClick={setActive}
+                  className="tw:w-full tw:bg-transparent tw:border-0 tw:hover:cursor-pointer tw:active:bg-transparent"
+                >
+                  {item[0]}
+                </Component>
+                <div className="tw:pl-4 tw:p-2 tw:flex tw:flex-col tw:flex-nowrap tw:w-full">
+                  {item[1]}
+                </div>
+              </div>
+            </li>
           ) : (
             <Component
               key={i}
@@ -55,7 +61,7 @@ export const BaseAccordion = ({
             </Component>
           )
         )}
-    </nav>
+    </>
   )
 }
 
diff --git a/packages/react/components/Editor/components/HeaderMenu.mjs b/packages/react/components/Editor/components/HeaderMenu.mjs
index 4edfb2c6215..903cc86d09b 100644
--- a/packages/react/components/Editor/components/HeaderMenu.mjs
+++ b/packages/react/components/Editor/components/HeaderMenu.mjs
@@ -6,7 +6,6 @@ import { useBackend } from '@freesewing/react/hooks/useBackend'
 import { useDesignTranslation } from '@freesewing/react/hooks/useDesignTranslation'
 // Components
 import { Null } from '@freesewing/react/components/Null'
-import { AsideViewMenuSpacer } from './AsideViewMenu.mjs'
 import { ViewIcon, viewLabels } from './views/index.mjs'
 import { Tooltip } from './Tooltip.mjs'
 import {
@@ -118,7 +117,7 @@ export const HeaderMenuTestViewDesignMeasurements = (props) => {
     <HeaderMenuDropdown
       {...props}
       id="designMeasurements"
-      tooltip="See how changes to a measurment influence the pattern being generated."
+      tooltip="See how changes to a measurement influence the pattern being generated."
       toggle={
         <>
           <HeaderMenuIcon name="options" extraClasses="tw:text-secondary" />
@@ -133,52 +132,56 @@ export const HeaderMenuTestViewDesignMeasurements = (props) => {
 
 export const HeaderMenuDropdown = (props) => {
   const { tooltip, toggle, open, setOpen, id, end = false } = props
-  /*
-   * We need to use both !fixed and md:!absolute here to override DaisyUI's
-   * classes on dropdown-content to force the dropdown to use the available
-   * screen space on mobile, rather than be positioned under its toggle button
-   */
+  const [localOpen, setLocalOpen] = useState(false)
 
+  useEffect(() => {
+    if (open) {
+      if (open === id) setLocalOpen(true)
+      else setLocalOpen(false)
+    }
+  }, [open, id])
+
+  /*
+   * New DaisyUI 5 implementation
+   */
   return props.disabled ? (
-    <Tooltip tip={tooltip}>
-      <button
-        disabled
-        tabIndex={0}
-        role="button"
-        className={`tw:daisy-btn tw:daisy-btn-ghost tw:hover:bg-secondary/20 tw:hover:border-solid tw:hover:border-2 tw:hover:border-secondary tw:border tw:border-secondary tw:border-2 tw:border-dotted tw:daisy-btn-sm tw:px-2 tw:z-20 tw:relative`}
-      >
-        {toggle}
-      </button>
-    </Tooltip>
+    <button
+      disabled
+      data-component="Editor/HeaderMenuDropdown"
+      tabIndex={0}
+      role="button"
+      className={`tw:daisy-btn tw:daisy-btn-ghost tw:hover:bg-secondary/20 tw:hover:border-solid tw:hover:border-2 tw:hover:border-secondary tw:border tw:border-secondary tw:border-2 tw:border-dotted tw:daisy-btn-sm tw:px-2 tw:z-20 tw:relative`}
+    >
+      {toggle}
+    </button>
   ) : (
-    <Tooltip tip={tooltip}>
-      <div
-        className={`tw:daisy-dropdown ${open === id ? 'tw:daisy-dropdown-open tw:z-20' : ''} ${end ? ' tw:daisy-dropdown-end' : ''}`}
+    <>
+      <details
+        className="tw:daisy-dropdown"
+        open={localOpen}
+        data-component="Editor/HeaderMenuDropdown"
       >
-        <div
-          tabIndex={0}
-          role="button"
-          className="tw:daisy-btn tw:daisy-btn-ghost tw:hover:bg-secondary/20 tw:border-secondary/10 tw:hover:border-2 tw:hover:border-secondary tw:border tw:border-secondary tw:border-2 tw:border-solid tw:daisy-btn-sm tw:px-2 tw:z-20 tw:relative"
-          onClick={() => setOpen(open === id ? false : id)}
-        >
+        <summary className="tw:daisy-btn tw:m-1" onClick={() => setOpen(id)}>
           {toggle}
-        </div>
-        <div
-          tabIndex={0}
-          className="tw:daisy-dropdown-content tw:bg-base-100/90 tw:z-20 tw:shadow tw:left-0 tw:fixed! tw:md:absolute! tw:top-12 tw:w-screen tw:md:max-w-md tw:overflow-y-scroll tw:mb-12 tw:h-fit"
-          style={{ maxHeight: 'calc(100vh - 12rem)' }}
+        </summary>
+        <ul
+          className="tw:daisy-menu tw:daisy-dropdown-content tw:flex-nowrap tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-screen tw:md:max-w-md tw:overflow-y-scroll tw:m-0 tw:p-0 tw:pl-0"
+          style={{ padding: 0, maxHeight: 'calc(100vh - 8rem)' }}
         >
           {props.children}
-        </div>
-        {open === id && (
-          <div
-            className="tw:w-screen tw:h-screen tw:absolute tw:top-10 tw:left-0 tw:opacity-0"
-            style={{ width: '200vw', transform: 'translateX(-100vw)' }}
-            onClick={() => setOpen(false)}
-          ></div>
-        )}
-      </div>
-    </Tooltip>
+        </ul>
+      </details>
+      {localOpen && (
+        <div
+          className="tw:w-screen tw:h-screen tw:fixed tw:top-10 tw:left-0 tw:opacity-100"
+          style={{ width: '200vw', transform: 'translateX(-100vw)' }}
+          onClick={() => {
+            setOpen(false)
+            setLocalOpen(false)
+          }}
+        ></div>
+      )}
+    </>
   )
 }
 
@@ -394,7 +397,7 @@ export const HeaderMenuUndoIcons = (props) => {
         }
       >
         {undos ? (
-          <ul className="tw:daisy-dropdown-content tw:bg-base-100/90 tw:z-20 tw:shadow tw:left-0 tw:fixed! tw:md:absolute! tw:w-screen tw:md:w-96 tw:px-4 tw:md:p-2 tw:md:pt-0 tw:contents">
+          <>
             {undos.slice(0, 9).map((step, index) => (
               <li key={index}>
                 <UndoStep {...{ step, update, state, Design, index }} compact />
@@ -411,7 +414,7 @@ export const HeaderMenuUndoIcons = (props) => {
                 </div>
               </ButtonFrame>
             </li>
-          </ul>
+          </>
         ) : null}
       </HeaderMenuDropdown>
       <Button
@@ -509,6 +512,8 @@ export const HeaderMenuButton = ({
   </Tooltip>
 )
 
+export const HeaderMenuSpacer = () => <li></li>
+
 export const HeaderMenuViewMenu = (props) => {
   const { config, update, state } = props
   const output = []
@@ -523,9 +528,9 @@ export const HeaderMenuViewMenu = (props) => {
     'spacer',
     'picker',
   ]) {
-    if (viewName === 'spacer') output.push(<AsideViewMenuSpacer key={i} />)
+    if (viewName === 'spacer') output.push(<HeaderMenuSpacer key={i} />)
     else if (viewName === 'spacerOver3')
-      output.push(state.ui.ux > 3 ? <AsideViewMenuSpacer key={i} /> : null)
+      output.push(state.ui.ux > 3 ? <HeaderMenuSpacer key={i} /> : null)
     else if (
       state.ui.ux >= config.uxLevels.views[viewName] &&
       (config.measurementsFreeViews.includes(viewName) || state._.missingMeasurements.length < 1)
@@ -538,12 +543,12 @@ export const HeaderMenuViewMenu = (props) => {
           <a
             className={`tw:w-full tw:text-base-content
             tw:flex tw:flex-row tw:items-center tw:gap-2 tw:md:gap-4 tw:p-2 tw:px-4
-            tw:hover:cursor-pointer tw:hover:text-base-content
+            tw:hover:cursor-pointer tw:hover:text-base-content tw:hover:cursor-pointer
             tw:hover:bg-secondary/20 ${viewName === state.view ? 'tw:bg-secondary/20' : ''}`}
             onClick={() => update.view(viewName)}
           >
-            <ViewIcon view={viewName} className="tw:w-6 tw:h-6 tw:grow-0" />
-            <span className="tw:text-left tw:grow tw:font-medium">
+            <ViewIcon view={viewName} className="tw:w-6 tw:h-6 tw:grow-0 tw:text-base-content" />
+            <span className="tw:text-left tw:grow tw:font-medium tw:text-base-content">
               {viewLabels[viewName]?.t || viewName}
             </span>
           </a>
@@ -566,12 +571,7 @@ export const HeaderMenuViewMenu = (props) => {
         </>
       }
     >
-      <ul
-        tabIndex={i}
-        className="tw:daisy-dropdown-content tw:bg-base-100/95tw:z-20 tw:shadow tw:left-0 tw:fixed! tw:md:absolute! tw:w-screen tw:md:max-w-lg tw:md:pt-0 tw:mt-14 tw:md:mt-0 tw:contents"
-      >
-        {output}
-      </ul>
+      {output}
     </HeaderMenuDropdown>
   )
 }
diff --git a/packages/react/components/Editor/components/PatternLayout.mjs b/packages/react/components/Editor/components/PatternLayout.mjs
index 406c1e6b0cb..b2b6fc85720 100644
--- a/packages/react/components/Editor/components/PatternLayout.mjs
+++ b/packages/react/components/Editor/components/PatternLayout.mjs
@@ -41,14 +41,20 @@ export const PatternLayout = (props) => {
           </div>
           {state.ui?.aside ? (
             <div
-              className={`tw:hidden tw:xl:block tw:w-1/3 tw:shrink tw:grow-0 tw:lg:p-4 tw:max-w-2xl tw:h-full tw:overflow-scroll`}
+              className={`tw:hidden tw:md:block tw:w-1/3 tw:shrink tw:grow-0 tw:lg:p-4 tw:max-w-2xl tw:h-full tw:overflow-scroll`}
             >
               <h5 className="tw:capitalize">{pattern.designConfig.data.id} Options</h5>
-              <DesignOptionsMenu {...props} />
+              <SideMenuUl>
+                <DesignOptionsMenu {...props} />
+              </SideMenuUl>
               <h5>Core Settings</h5>
-              <CoreSettingsMenu {...props} />
+              <SideMenuUl>
+                <CoreSettingsMenu {...props} />
+              </SideMenuUl>
               <h5>UI Preferences</h5>
-              <UiPreferencesMenu {...props} />
+              <SideMenuUl>
+                <UiPreferencesMenu {...props} />
+              </SideMenuUl>
             </div>
           ) : null}
         </div>
@@ -56,3 +62,12 @@ export const PatternLayout = (props) => {
     </ZoomContextProvider>
   )
 }
+
+export const SideMenuUl = ({ children }) => (
+  <ul
+    className="tw:daisy-menu tw:daisy-dropdown-content tw:flex-nowrap tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-full tw:p-0 tw:pl-0"
+    style={{ padding: 0 }}
+  >
+    {children}
+  </ul>
+)
diff --git a/packages/react/components/Editor/components/menus/Container.mjs b/packages/react/components/Editor/components/menus/Container.mjs
index bcb81edb30e..4eeeb308568 100644
--- a/packages/react/components/Editor/components/menus/Container.mjs
+++ b/packages/react/components/Editor/components/menus/Container.mjs
@@ -110,7 +110,7 @@ export const MenuItem = ({
         labelBR={<div className="tw:flex tw:flex-row tw:items-center tw:gap-2">{buttons}</div>}
         labelBL={
           <span
-            className={`tw:text-base tw:font-medium tw:-mt-2 tw:block ${changed ? 'tw:text-accent' : 'tw:opacity-50'}`}
+            className={`tw:text-sm tw:-mt-2 tw:block ${changed ? 'tw:text-accent' : 'tw:text-base-100-content'}`}
           >
             {changed ? 'This is a custom value' : 'This is the default value'}
           </span>
diff --git a/packages/react/components/Editor/components/menus/Input.mjs b/packages/react/components/Editor/components/menus/Input.mjs
index f0e2b4fa875..a2a1d05cbb6 100644
--- a/packages/react/components/Editor/components/menus/Input.mjs
+++ b/packages/react/components/Editor/components/menus/Input.mjs
@@ -349,7 +349,7 @@ export const MenuSliderInput = ({
         {...{ min, max, value: val, step: config.step || 0.1 }}
         onChange={(evt) => handleChange(evt.target.value)}
         className={`
-          tw:daisy-range tw:daisy-range-sm tw:mt-1
+          tw:daisy-range tw:daisy-range-sm tw:mt-1 tw:w-full
           ${changed ? 'tw:daisy-range-accent' : 'tw:daisy-range-secondary'}
         `}
       />
diff --git a/packages/react/components/Input/index.mjs b/packages/react/components/Input/index.mjs
index e2b77651a1f..b9fbcb83c34 100644
--- a/packages/react/components/Input/index.mjs
+++ b/packages/react/components/Input/index.mjs
@@ -96,10 +96,10 @@ export const FormControl = ({
     </>
   )
   const bottomLabelChildren = (
-    <>
+    <div className="tw:flex tw:flex-row tw:justify-between tw:w-full tw:items-start">
       {labelBL ? <span className="tw:daisy-label-text-alt">{labelBL}</span> : null}
       {labelBR ? <span className="tw:daisy-label-text-alt">{labelBR}</span> : null}
-    </>
+    </div>
   )
 
   return (
@@ -114,11 +114,11 @@ export const FormControl = ({
       {children}
       {labelBL || labelBR ? (
         forId ? (
-          <label className="tw:daisy-label" htmlFor={forId}>
+          <label className="tw:daisy-label tw:w-full" htmlFor={forId}>
             {bottomLabelChildren}
           </label>
         ) : (
-          <div className="tw:daisy-label">{bottomLabelChildren}</div>
+          <div className="tw:daisy-label tw:w-full">{bottomLabelChildren}</div>
         )
       ) : null}
     </div>
@@ -137,7 +137,7 @@ export const ButtonFrame = ({
 }) => (
   <button
     className={`
-    tw:daisy-btn tw:daisy-btn-ghost tw:daisy-btn-secondary tw:h-fit
+    tw:daisy-btn tw:daisy-btn-ghost tw:h-fit
     tw:w-full ${dense ? 'tw:mt-1 tw:daisy-btn-sm tw:font-light' : 'tw:mt-2 tw:py-4 tw:h-auto tw:content-start'}
     tw:border-2 tw:border-secondary tw:text-left tw:bg-secondary/20
     ${accordion ? 'tw:hover:bg-transparent' : 'tw:hover:bg-secondary/10'}
diff --git a/sites/org/src/css/custom.css b/sites/org/src/css/custom.css
index 579bcb4dd8d..1af60e2b6e1 100644
--- a/sites/org/src/css/custom.css
+++ b/sites/org/src/css/custom.css
@@ -17,6 +17,7 @@
 
 @source '../**/*.{js,mjs,mdx}';
 @source '../../docs/**/*.mdx';
+@source '../../tailwind-force.html';
 @source '../../../../node_modules/daisyui/**/*.{js,mjs,ts,tsx}';
 @source '../../../../packages/react/components/**/*.mjs';
 @source '../../../../packages/react/context/**/*.mjs';
@@ -168,6 +169,10 @@ a.tw\:daisy-btn-primary.tw\:daisy-btn-outline:hover {
   color: var(--color-primary-content);
   text-decoration: none;
 }
+.tw\:daisy-menu {
+  --daisy-menu-active-fg: currentColor;
+  --daisy-menu-active-bg: var(--bg-transparent);
+}
 
 /*
  * Make the 'edit this page' link look consistent
diff --git a/sites/org/src/pages/typography.js b/sites/org/src/pages/styles.js
similarity index 86%
rename from sites/org/src/pages/typography.js
rename to sites/org/src/pages/styles.js
index 64d0e423b4f..f8cccbe0eff 100644
--- a/sites/org/src/pages/typography.js
+++ b/sites/org/src/pages/styles.js
@@ -24,7 +24,7 @@ const namedColors = [
   'error',
 ]
 
-const TypographyPage = ({ page }) => {
+const StylesPage = ({ page }) => {
   return (
     <Layout
       title={`FreeSewing documentation for developers and contributors`}
@@ -32,11 +32,12 @@ const TypographyPage = ({ page }) => {
     >
       <div className="tailwind-container">
         <div className="tw:text-base-content mdx tw:max-w-prose tw:text-base-content tw:max-w-prose tw:text-current tw:xl:pl-4 tw:mx-auto tw:my-8">
-          <h1>Typography</h1>
+          <h1>Styles</h1>
+          <p>This styles page shows an overview of different elements and how they are styled.</p>
           <p>
-            This typography page shows an overview of different elements and how they are styled.
+            It&apos;s a good starting point for theme development. It is also a good resource for
+            debugging styling issues.
           </p>
-          <p>It&apos;s a good starting point for theme development.</p>
           <h2>Headings (this is h2)</h2>
           {p} {p}
           <h3>This is h3</h3>
@@ -113,9 +114,19 @@ const TypographyPage = ({ page }) => {
             ))}
             {namedColors.map((color) => (
               <li key={color} className={`tw:text-${color}-content tw:bg-${color}`}>
-                tw:{color}-content tw:bg-{color}
+                tw:text-{color}-content tw:bg-{color}
               </li>
             ))}
+            {namedColors.map((color) => (
+              <li key={color} className="tw:flex tw:flex-row">
+                <div className={`tw:text-${color}-content tw:bg-${color}/80`}>
+                  tw:text-{color}-content tw:bg-{color}/80
+                </div>
+              </li>
+            ))}
+            <li className="tw:bg-primary/80 tw:text-primary-content">
+              tw:bg-primary/80 tw:text-primary-content
+            </li>
           </ul>
           <h2>Tabs</h2>
           <Tabs>
@@ -138,4 +149,4 @@ const TypographyPage = ({ page }) => {
   )
 }
 
-export default TypographyPage
+export default StylesPage
diff --git a/sites/org/tailwind-force.html b/sites/org/tailwind-force.html
index e5ff3285237..334b9392c74 100644
--- a/sites/org/tailwind-force.html
+++ b/sites/org/tailwind-force.html
@@ -64,3 +64,40 @@
 <div className="bg-gradient-to-tr from-secondary from-10% to-primary"></div>
 <div className="bg-gradient-to-tr from-accent from-10% to-primary"></div>
 
+<!-- colors on transparent backgrounds -->
+<div class=" bg-base-100/10" />
+<div class=" bg-base-200/10" />
+<div class=" bg-base-300/10" />
+<div class="  bg-primary/10" />
+<div class="bg-secondary/10" />
+<div class="  bg-neutral/10" />
+<div class="   bg-accent/10" />
+<div class="  bg-success/10" />
+<div class="     bg-info/10" />
+<div class="  bg-warning/10" />
+<div class="    bg-error/10" />
+
+<div class=" bg-base-100/70" />
+<div class=" bg-base-200/70" />
+<div class=" bg-base-300/70" />
+<div class="  bg-primary/70" />
+<div class="bg-secondary/70" />
+<div class="  bg-neutral/70" />
+<div class="   bg-accent/70" />
+<div class="  bg-success/70" />
+<div class="     bg-info/70" />
+<div class="  bg-warning/70" />
+<div class="    bg-error/70" />
+
+<div class=" bg-base-100/80" />
+<div class=" bg-base-200/80" />
+<div class=" bg-base-300/80" />
+<div class="  bg-primary/80" />
+<div class="bg-secondary/80" />
+<div class="  bg-neutral/80" />
+<div class="   bg-accent/80" />
+<div class="  bg-success/80" />
+<div class="     bg-info/80" />
+<div class="  bg-warning/80" />
+<div class="    bg-error/80" />
+