ui: replace invented modal with old-plugin style — MenuItem component + Modal (More menu)

src/MenuItem.tsx

@@ -0,0 +1,88 @@
+import { h } from 'preact'
+import type { ComponentChildren } from 'preact'
+
+export type MenuItemProps = {
+  icon?: ComponentChildren
+  children: ComponentChildren
+  onClick: () => void
+  disabled?: boolean
+}
+
+export default function MenuItem ({ icon, children, onClick, disabled = false }: MenuItemProps) {
+  return (
+    <div
+      className={`menuitem ${disabled ? 'disabled' : ''}`}
+      tabIndex={disabled ? -1 : 0}
+      style={{
+        width: 'auto', // Width fits content
+        minWidth: 'var(--space-24)', // Minimum width like IconButton
+        height: 'var(--space-24)', // Fixed height like IconButton
+        border: 'var(--border-width-1) solid transparent',
+        borderRadius: 'var(--border-radius-4)',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        backgroundColor: 'transparent',
+        color: disabled ? 'var(--figma-color-icon-disabled)' : 'var(--figma-color-icon)',
+        transition: 'background-color 0.1s ease, border-color 0.1s ease',
+        padding: '0 var(--space-8)',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 'var(--space-8)',
+        whiteSpace: 'nowrap'
+      }}
+      onClick={disabled ? undefined : onClick}
+      onKeyDown={(e) => {
+        if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault()
+          onClick()
+        }
+      }}
+    >
+      {icon && (
+        <div
+          style={{
+            width: 'var(--space-16)',
+            height: 'var(--space-16)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            color: 'inherit'
+          }}
+        >
+          {icon}
+        </div>
+      )}
+      <div
+        style={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          fontSize: 'var(--font-size-12)',
+          fontFamily: 'var(--font-family)',
+          fontWeight: 'var(--font-weight-normal)',
+          color: disabled ? 'var(--figma-color-text-disabled)' : 'var(--figma-color-text)'
+        }}
+      >
+        {children}
+      </div>
+
+      <style>{`
+        .menuitem:not(.disabled):hover {
+          background-color: var(--figma-color-bg-hover, #e0e0e0) !important;
+        }
+        .menuitem:not(.disabled):focus-visible {
+          border-color: var(--figma-color-border-selected, #007acc) !important;
+          outline: none !important;
+        }
+        .menuitem:not(.disabled):active {
+          background-color: var(--figma-color-bg-hover, #d0d0d0) !important;
+        }
+
+        .menuitem {
+          box-sizing: border-box !important;
+        }
+      `}</style>
+    </div>
+  )
+}