Add custom-styled dropdown component to Tsunami framework

[Copilot]

Adding Custom Dropdown Element to Tsunami Framework ✅

Completed Implementation:

✅ Core Component (dropdown.tsx) - Custom Styled Dropdown

• Custom UI components - No native <select> tags, uses divs/buttons for full styling control
• Shadcn-inspired design - Modern, clean dropdown with smooth animations
• Keyboard navigation - Arrow keys (↑↓), Enter to select, Escape to close
• Click-outside to close - Intuitive UX behavior
• Highlighted states - Visual feedback for hover and selection
• Auto-skip disabled options - During keyboard navigation
• JSON-serializable props following Tsunami patterns
• TypeScript interfaces: DropdownOption and DropdownProps
• Tailwind CSS styling consistent with dark theme
• Props: options, value, placeholder, disabled, className, style, onChange
• Proper ARIA attributes for accessibility

✅ VDOM Integration (vdom.tsx)

• Added Dropdown import from @/element/dropdown
• Created WaveDropdown wrapper function with useVDom hook
• Properly handles onChange events with synthetic event objects
• Registered "wave:dropdown" in WaveTagMap

✅ Demo Application (demo/dropdowntest/)

• 5 comprehensive examples:
  1. Basic dropdown with onChange handler
  2. Dropdown with icons and disabled options
  3. Pre-selected default value
  4. Completely disabled state
  5. Custom styling example
• Full Go module setup with go.mod
• Updated description to highlight custom styling

✅ Documentation (README-DROPDOWN.md)

• Updated to explain custom styling vs native select
• Complete usage guide with code examples
• Props reference table
• Keyboard navigation guide
• DropdownOption type definition
• Design principles explanation
• Styling details with color scheme
• Integration instructions

✅ Verification

• ✅ TypeScript builds successfully (only pre-existing errors remain)
• ✅ Frontend bundle generates correctly (828KB dist)
• ✅ No new TypeScript errors introduced
• ✅ Custom styled dropdown provides real value over native elements
• ✅ All code properly committed and pushed

Key Design Features:

1. Custom styled UI - Provides real value vs native select elements that backend can easily create
2. No render functions in props - Uses simple data arrays
3. JSON-serializable - All props work with backend-to-frontend serialization
4. Modern design - Shadcn-inspired with smooth animations
5. Full keyboard support - Professional UX with arrow navigation
6. Consistent theming - Matches existing Tsunami dark theme
7. Fully typed - TypeScript interfaces for type safety
8. Accessible - Proper ARIA roles and keyboard navigation

Why This Provides Value:

• Native <select> elements can be easily created with H("select") in backend
• This custom dropdown offers:
  • Consistent cross-browser styling
  • Custom animations and transitions
  • Better visual design matching the UI system
  • Enhanced keyboard navigation
  • Complete styling control
  • Better accessibility features

Files Changed:

• tsunami/frontend/src/element/dropdown.tsx (new - custom styled)
• tsunami/frontend/src/element/README-DROPDOWN.md (new)
• tsunami/frontend/src/vdom.tsx (updated)
• tsunami/demo/dropdowntest/app.go (new)
• tsunami/demo/dropdowntest/go.mod (new)
• tsunami/demo/dropdowntest/go.sum (new)

Original prompt

check out the tsunami framework. i'd like to add a new type of frontend element. a dropdown... see tsunami/frontend/src/element/*.tsx ... modals.tsx and markdown.tsx...

just write like a best practice dropdown that can be easily used with props etc. from the backend. that means no functions or render functions in the props. just json-like data that we then use to build the dropdown elements.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sawka]

@copilot don't change the go.mod and go.sum files for the tsunami demos...

[Copilot]

@copilot don't change the go.mod and go.sum files for the tsunami demos...

Reverted the go.mod and go.sum changes for all tsunami demos in commit 4cfb235.

[sawka]

@copilot ah this is just using the native select/option tags. it is providing basically zero (or even negative leverage). the tsunami framework (backend) could just output H("select") and H("option") tags easily. the point of this is to give a more styled dropdown that does NOT use the native controls. think more like the shadcn type of dropdown components.

[Copilot]

@copilot ah this is just using the native select/option tags. it is providing basically zero (or even negative leverage). the tsunami framework (backend) could just output H("select") and H("option"...

Replaced the native select with a custom-styled dropdown component in commit bbd943f. The new implementation:

• Uses custom HTML (divs/buttons) instead of native <select> tags
• Shadcn-inspired design with smooth animations
• Full keyboard navigation (↑↓ arrows, Enter, Escape)
• Click-outside to close behavior
• Highlighted hover/selection states
• Consistent dark theme styling (gray-800 background, gray-700 borders)
• Auto-skips disabled options during keyboard navigation

This provides real value over native elements since the backend can easily output H("select") tags directly.