735 flip card block

[Paulson-Robert]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

735 flip card block

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Add interactive flip card block component.

• Configure widget with customizable styles.

• Integrate component into default block registry.

• Update client assets and menu entries.

---

Changes walkthrough 📝

Relevant files

Enhancement

7 files FlipCardBlock.tsx Introduce interactive flip card component with hover flipping. +99/-0    config.tsx Configure flip card widget with style and settings.            +84/-0    index.ts Export flip card component and its configuration.                +2/-0      index.ts Integrate flip card configuration into block registry.      +8/-0      index.ts Export SwitchSettings needed for flip card settings.          +1/-0      index.ts Add flip card active and hover images.                                      +2/-0      default-menu.ts Add flip card menu entry for layout section.                          +27/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Accessibility The component relies on hover events (mouse enter/leave) to trigger the flip. Consider adding alternative interaction methods (e.g., keyboard or click events) to improve accessibility and mobile support. <CardContainer onMouseEnter={() => setFlipped(true)} onMouseLeave={() => setFlipped(false)} cssStyle={data.style} {...attrs}

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
General	Enable mobile flip toggle Add an onClick handler to toggle the flip state for improved mobile and touch interactivity. libs/renderer/src/components/block-defaults/flip-card-block/FlipCardBlock.tsx [73-78] <CardContainer onMouseEnter={() => setFlipped(true)} onMouseLeave={() => setFlipped(false)} + onClick={() => setFlipped(prev => !prev)} cssStyle={data.style} {...attrs} > Suggestion importance[1-10]: 6 __ Why: The suggestion provides a useful enhancement for mobile interactions by adding an onClick handler; however, it is a minor usability tweak that slightly deviates from the current hover-only design.	Low

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-04-24 *

Added

• Flip Card block with front/back slots and hover flip behavior
• Block settings for flip action toggle and background colors
• Client menu entry and assets for Flip Card helper text and icons

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'