UI (feature incoming) : add undo and redo buttons

[Babali42]

Summary by CodeRabbit

• New Features

  • Added undo and redo buttons to the sequencer interface, enabling users to revert or re-apply recent actions during sequencing.

• Tests

  • Enhanced test suite with updated assertions and new tests to verify undo/redo functionality and sequencer component behavior.

[coderabbitai]

Warning

Review limit reached

@Babali42, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 35 minutes and 39 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more credits in the billing tab to continue.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 312df421-679c-4ddb-b444-c36e4cb5cd94

📥 Commits

Reviewing files that changed from the base of the PR and between 2813923 and d6a25cc.

📒 Files selected for processing (3)

• frontend/src/app/ui/components/sequencer/sequencer.component.html
• frontend/src/app/ui/components/sequencer/sequencer.component.spec.ts
• frontend/src/app/ui/components/sequencer/sequencer.component.ts

📝 Walkthrough

Walkthrough

Adds historyLength and futureLength numeric properties (initialized to 0) to SequencerComponent. The template conditionally renders undo and redo icon buttons when those values are greater than zero. The spec is updated with refactored existing tests and new tests asserting undo/redo button visibility.

Changes

Undo/Redo Button Feature

Layer / File(s)	Summary
Component state fields and template rendering frontend/src/app/ui/components/sequencer/sequencer.component.ts, frontend/src/app/ui/components/sequencer/sequencer.component.html	Declares historyLength and futureLength as public numeric fields initialized to 0; template conditionally renders undo and redo buttons with icon images when those values are greater than zero.
Spec refactors and undo/redo visibility tests frontend/src/app/ui/components/sequencer/sequencer.component.spec.ts	Updates "should create" assertion to toBeTruthy(), replaces step-button display test with a click-toggle test, refactors beat-change test to use modifiedActiveCount/resetActiveCount, simplifies export tests by removing inline comments, and adds four new tests verifying undo/redo button absence at zero and presence at non-zero values.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Hippity-hop, I pressed the wrong key,
But undo and redo are here to set me free!
historyLength > 0 brings the arrow to light,
futureLength > 0 makes the redo just right.
With buttons so small and tests painted true,
This bunny can drum without worry anew! 🥁

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding undo and redo buttons to the sequencer UI component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch add-undo-redo-buttons

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/app/ui/components/sequencer/sequencer.component.html`:
- Line 28: Replace the incorrect alt text "drum" with semantically accurate
descriptions for the undo and redo icons. At line 28 where the undo icon is
used, change the alt attribute to "undo". At line 33 where the redo icon is
used, change the alt attribute to "redo". Additionally, add aria-label
attributes to both button elements (or their parent container) to provide clear,
accessible labels for screen reader users, such as aria-label="Undo" for the
undo button and aria-label="Redo" for the redo button.
- Around line 26-35: The undo and redo buttons in the template are missing click
event handlers, making them non-functional. Add a (click) event binding to each
button to call the corresponding handler methods: bind the undo button with
(click)="undo()" and the redo button with (click)="redo()". Then implement these
two methods (undo and redo) in the component class as stub implementations with
TODO comments indicating where the actual undo/redo logic should be added.

In `@frontend/src/app/ui/components/sequencer/sequencer.component.spec.ts`:
- Line 190: Fix the grammatical errors in the test description strings within
sequencer.component.spec.ts. At line 190, correct "when there is not future
command to apply" to "when there are no future commands to apply" by changing
the singular form and negation structure to plural with proper grammar. At line
199, correct "when there is none future commands" to "when there are future
commands" to fix the improper verb form and remove the incorrect negation
phrasing. Both corrections address subject-verb agreement and proper English
grammar in the it() test case descriptions.

In `@frontend/src/app/ui/components/sequencer/sequencer.component.ts`:
- Around line 60-61: The historyLength and futureLength properties in the
SequencerComponent are initialized to 0 but never updated despite being used in
template conditionals for rendering undo/redo buttons and having test
expectations that they should reflect command history changes. Add update logic
to modify historyLength and futureLength whenever the command history stack
changes, or at minimum add TODO comments documenting where the command pattern
integration will handle these updates and what the expected behavior should be
when command history changes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1a8e34f8-37d8-4bce-a5d0-2cd8391c59ae

📥 Commits

Reviewing files that changed from the base of the PR and between 2a0074c and 2813923.

⛔ Files ignored due to path filters (4)

• frontend/src/assets/images/icons/redo-dark.svg is excluded by !**/*.svg
• frontend/src/assets/images/icons/redo-light.svg is excluded by !**/*.svg
• frontend/src/assets/images/icons/undo-dark.svg is excluded by !**/*.svg
• frontend/src/assets/images/icons/undo-light.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• frontend/src/app/ui/components/sequencer/sequencer.component.html
• frontend/src/app/ui/components/sequencer/sequencer.component.spec.ts
• frontend/src/app/ui/components/sequencer/sequencer.component.ts