Refactor drawer to use dialog

[silte]

Describe your changes

Issue ticket number and link

Checklist before requesting a review

• I have performed a self-review of my code
• If it is a core feature, I have added thorough tests.
• Do we need to implement analytics?
• Will this be part of a product update? If yes, please write one phrase about this update.

This pull request introduces several changes across the codebase, primarily focusing on upgrading dependencies, replacing Popover functionality with Drawer components, and improving button behavior with new attributes. The most significant updates include migrating from Node.js v22 to v24, replacing Popover-related identifiers with Drawer identifiers, and refactoring the Drawer component to enhance its usability and animation behavior.

Dependency Updates:

• .nvmrc: Upgraded Node.js version from v22 to v24.
• Dockerfile: Updated the base image to use node:24-alpine.
• packages/frontend/package.json: Added the invokers-polyfill dependency for enhanced HTML dialog support.

Migration from Popover to Drawer:

• packages/frontend/app/(application)/accounts/[accountId]/page.tsx: Replaced popperId with drawerId in multiple components, including PopperItem and AccountUpdateMarketValueDrawer. (packages/frontend/app/(application)/accounts/[accountId]/page.tsxL83-R88, packages/frontend/app/(application)/accounts/[accountId]/page.tsxL102-R102)
• packages/frontend/app/(application)/categories/[categoryId]/page.tsx: Updated PopperItem to use drawerId instead of popperId. (packages/frontend/app/(application)/categories/[categoryId]/page.tsxL80-R80)
• packages/frontend/app/(application)/transactions/[id]/page.tsx: Migrated PopperItem to use drawerId. (packages/frontend/app/(application)/transactions/[id]/page.tsxL65-R65)
• packages/frontend/src/components/elements/PopperItem.tsx: Refactored PopperItem type and logic to use drawerId instead of popperId. [1] [2]

Refactoring of Drawer Component:

• packages/frontend/src/components/blocks/Drawer.tsx: Replaced forwardRef with FC, added ref to DrawerProps, and implemented new animation and styling logic for dialog elements. [1] [2] [3]

Button Behavior Enhancements:

• packages/frontend/src/components/elements/Button/Button.tsx: Added command and commandFor attributes to ButtonProps for improved interaction with Drawer components. [1] [2]
• packages/frontend/src/features/account/AccountDeleteDrawer.tsx: Replaced popoverTargetAction with command="close" for cancel buttons.
• packages/frontend/src/features/transaction/TransactionTemplateSwitcher.tsx: Updated buttons to use command attributes for opening and closing drawers. [1] [2]

Integration of invokers-polyfill:

• packages/frontend/app/layout.tsx: Added polyfill logic to support HTML dialog invokers in browsers where native support is unavailable. [1] [2]

[Copilot]

Pull Request Overview

This pull request refactors components that previously used popover identifiers to now use drawer/dialog functionality, and upgrades the underlying Node.js environment and dependencies. Key changes include updating component props from popover to drawer, refactoring the Drawer component to use a dialog element with new animation logic, and enhancing button interactions with new command attributes.

Reviewed Changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/frontend/src/features/transaction/TransactionTemplateSwitcher.tsx	Replaced popover refs and actions with drawer refs and command attributes.
packages/frontend/src/features/transaction/TransactionDeleteDrawer.tsx	Updated button actions to use drawer commands.
packages/frontend/src/features/template/TemplateDelete.tsx	Renamed popover identifiers to drawer identifiers.
packages/frontend/src/features/category/CategoryDeleteDrawer.tsx	Updated cancel button to use drawer command attributes.
packages/frontend/src/features/account/AccountUpdateMarketValueDrawer.tsx	Changed prop names from popperId to drawerId and updated ref usage.
packages/frontend/src/features/account/AccountDeleteDrawer.tsx	Updated button actions from popover to drawer commands.
packages/frontend/src/components/elements/PopperItem.tsx	Updated component prop from popperId to drawerId and adjusted button command usage.
packages/frontend/src/components/elements/Button/Button.tsx	Integrated new command and commandFor attributes for button behavior.
packages/frontend/src/components/blocks/Drawer.tsx	Refactored to use a dialog element with updated animation/styling and removed forwardRef.
packages/frontend/src/assets/tailwind.css	Updated CSS selectors and removed problematic styles related to popovers.
packages/frontend/package.json	Added invokers-polyfill dependency.
packages/frontend/app/layout.tsx	Integrated invokers-polyfill logic for HTML dialog support.
packages/frontend/app/(application)/transactions/[id]/page.tsx	Updated PopperItem usage to use drawerId instead of popperId.
packages/frontend/app/(application)/categories/[categoryId]/page.tsx	Updated PopperItem usage to use drawerId instead of popperId.
packages/frontend/app/(application)/accounts/[accountId]/page.tsx	Updated multiple occurrences of popover/drawer identifiers.
Dockerfile	Upgraded the base image from node:22-alpine to node:24-alpine.
.nvmrc	Updated Node.js version from v22 to v24.

Comments suppressed due to low confidence (2)

packages/frontend/src/components/blocks/Drawer.tsx:16

• The Drawer component was refactored from using forwardRef to an FC while still accepting a ref prop. This may prevent proper ref forwarding to the underlying dialog element; consider reverting to forwardRef or implementing ref forwarding to ensure parent components can correctly access the dialog DOM node.

ref?: React.RefObject<HTMLDialogElement | null>;

packages/frontend/src/components/elements/Button/Button.tsx:136

• [nitpick] The custom attribute 'commandFor' is being rendered as 'commandfor' in the DOM. To maintain consistency and clarity, confirm that this lower-case convention is intentional or adjust the implementation to ensure attribute naming reflects the intended usage.

commandfor={commandFor}

[sonarqubecloud]

Quality Gate passed for 'Common'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate passed for 'Playwright'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate failed for 'Frontend'

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate passed for 'Backend'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud