tm-quick-action

Top Bar Quick Menu

Build new Tabame quick menu buttons by matching the existing launcher-to-modal structure and the "Instrument Panel" design language used across bookmarks, apps, vault, currency converter, and timezone.

Use these files as the baseline references:

• lib/widgets/itzy/quickmenu/button_bookmarks.dart
• lib/widgets/itzy/quickmenu/button_apps.dart
• lib/widgets/itzy/quickmenu/button_vault.dart
• lib/widgets/itzy/quickmenu/button_currency_converter.dart
• lib/widgets/itzy/quickmenu/button_timezone.dart
• lib/widgets/widgets/panel_header.dart, lib/widgets/widgets/quick_actions_item.dart, lib/models/util/quickmenu_modal.dart

1. Design Philosophy

• High Performance: Interfaces should feel like professional tools (DAWs, IDEs, flight panels) — fast, utilitarian, desktop-oriented.
• Information Density: Maximize data visibility in small spaces without causing cognitive overload.
• Tactile Feedback: Every interaction (hover, drag, tap) must have immediate, precise visual feedback.
• Distilled Aesthetics: Ruthlessly remove generic "AI slop" or standard Material/Cupertino defaults. Avoid glossy/high-glow effects or saturated solid blocks. Use custom shapes, subtle outlines, and alpha-blended color to keep a technical, matte tone.

2. Core Pattern

Start with a small launcher widget that only opens the panel:

class ExampleButton extends StatelessWidget {
  const ExampleButton({super.key});

  @override
  Widget build(BuildContext context) {
    return QuickActionItem(
      message: "Example",
      icon: const Icon(Icons.extension_rounded),
      onTap: () => showQuickMenuModal(
        context: context,
        child: const ExamplePanel(),
      ),
    );
  }
}

Follow this split:

• Keep the top-bar button thin. It should declare the label, icon, and modal entry point only.
• Put state, async work, controllers, and layout logic inside the panel widget.
• Prefer StatelessWidget for the launcher unless the button itself owns transient state.
• Use showQuickMenuModal() for most buttons. Pass maxWidth or heightFactor only when the interaction clearly needs it, like timezone.