husi-actions-dropdown-menu

Implements Material3 DropdownMenuPopup overflow menus for Husi Compose topbar actions.

1.8k|107|Updated Dec 24, 2023
One-click install
npx skills add https://github.com/xchacha20-poly1305/husi --skill husi-actions-dropdown-menu-xchacha20-poly1305
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: husi-actions-dropdown-menu
Source: https://github.com/xchacha20-poly1305/husi/tree/main/.agents/skills/husi-actions-dropdown-menu
Command: npx skills add https://github.com/xchacha20-poly1305/husi --skill husi-actions-dropdown-menu-xchacha20-poly1305

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent overflow menus in Husi's Compose topbars lead to broken shapes, fake clickable title rows, and compile errors from mixing up shape and shapes parameters. This Skill encodes the house conventions so every more_vert actions menu inside CapsuleTopBar or CapsuleSearchTopBar follows the same Material3 Expressive pattern. ## Core Features & Use Cases - Standard menu structure: Wraps the overflow icon in CapsuleActionButton, uses DropdownMenuPopup with DropdownMenuGroup, and applies MenuDefaults.groupShape and MenuDefaults.itemShape for grouped rounded corners. - Section headers done right: Replaces fake clickable title rows with the shared DropdownMenuSectionHeader helper, and clarifies that headers do not count toward item shape indexing. - Correct shape APIs and interactions: Distinguishes shape for plain onClick rows from shapes for selected/checked rows, and covers checkbox filter rows and dismiss behavior. - Use Case: When adding a sort-mode menu to a topbar, apply checked DropdownMenuItem rows with MenuDefaults.itemShape(index, count), a DropdownMenuSectionHeader label, and verify with ./gradlew :composeApp:compileKotlinDesktop. ## Quick Start Add a more_vert overflow menu to this screen's topbar actions following the husi actions dropdown menu conventions with grouped items and a section header.

Frequently Asked Questions about husi-actions-dropdown-menu

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add an overflow menu to a Compose topbar in Husi?

Wrap a more_vert SimpleIconButton in CapsuleActionButton, place a DropdownMenuPopup in the same Box, and build content with DropdownMenuGroup sections using MenuDefaults.groupShape. Close the popup when an action navigates or commits a selection.

How do I add a section header to a Material3 DropdownMenu?

Use the shared DropdownMenuSectionHeader helper from fr.husi.compose instead of a fake clickable DropdownMenuItem with MenuDefaults.Label. The helper applies centered labelMedium text, onSurfaceVariant color, and a HorizontalDivider, and headers do not count toward item shape indexing.

What is the difference between shape and shapes in Material3 DropdownMenuItem?

Plain onClick DropdownMenuItem overloads take a single Shape, so use MenuDefaults.itemShape(index, count).shape. Selected or checked overloads take MenuItemShapes, so pass MenuDefaults.itemShape(index, count) directly. Mixing them causes compile errors.

Should I use DropdownMenu or DropdownMenuPopup in Compose Material3?

For new Husi topbar actions menus, use DropdownMenuPopup from Material3 Expressive rather than the older plain DropdownMenu, unless the surrounding screen already intentionally uses plain DropdownMenu.

How do I verify Compose menu changes compile in a Kotlin Multiplatform project?

Run ./gradlew :composeApp:compileKotlinDesktop after editing, and also :composeApp:compileAndroidMain if the change touches Android-only UI or resources. Use ripgrep to find existing DropdownMenuPopup and MenuDefaults.Label usages before editing.