fix: add missing @keyframes shake animation referenced in popup.ts

[Siddh2024]

fixes #529

Adds the missing @Keyframes shake rule in popup.css and refactors shakeElement() to use CSS classes.

Summary by CodeRabbit

• Bug Fixes
  • Improved error feedback with a clearer red border and shake animation when an input or element needs attention.
  • Switched visual alerts to use reusable styles, making the effect more consistent and reliable.

[github-actions]

🚀 Thank You for Contributing to Late-Meet

Please ensure that:

• the issue was assigned to you before opening this PR
• the PR references the related issue
• your changes follow repository contribution guidelines
• the project builds successfully before submission

Unassigned, duplicate, or low-quality PRs may be closed.

Thank you for contributing 💙

[github-actions]

👋 Thank you @Siddh2024 for your contribution to Late-Meet!

✅ Verified: You are assigned to the linked issue #529.

Please review any automated suggestions or code review comments that may appear below! We will review your PR as soon as possible!

---

Please consider starring the repository ⭐ to show your support!

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a .border-danger CSS class and a .shake class with new @keyframes shake animation to popup.css. Updates shakeElement in popup.ts to toggle these CSS classes instead of directly mutating inline borderColor and animation styles.

Changes

Shake animation fix

Layer / File(s)	Summary
Shake animation and error border styles src/popup.css	Adds a .border-danger class for a red border and a .shake class tied to a new @keyframes shake horizontal shake animation.
Class-based error feedback in shakeElement src/popup.ts	Changes shakeElement to add "shake" and "border-danger" classes and remove them after the timeout, replacing direct inline style mutation of borderColor/animation.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Sequence Diagram(s)

Not applicable — changes are limited to CSS class definitions and a small class-toggling adjustment without multi-component interaction flow.

Related Issues: #529

Suggested labels: bug, css, frontend

Suggested reviewers: shouri123

---

🐰 A shake was promised, none appeared,
Till keyframes danced as engineered,
Now borders flash and inputs quake,
Classes swap for feedback's sake,
No more inline styles to fear! 🎬

🚥 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 clearly matches the main change: adding the missing shake keyframes for popup feedback.
Linked Issues check	✅ Passed	The PR adds the missing shake animation and keeps the invalid-input feedback behavior aligned with issue #529.
Out of Scope Changes check	✅ Passed	The changes stay focused on the popup shake/error feedback fix and do not introduce unrelated scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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.}

[sonarqubecloud]

Quality Gate passed

Issues
5 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

[coderabbitai]

🧹 Nitpick comments (1)

src/popup.ts (1)

537-543: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Animation won't restart on rapid repeated calls.

If shakeElement is invoked again while "shake" is already applied (e.g. two quick invalid submissions within 400ms), classList.add is a no-op since the class is already present, so the CSS animation does not restart. A DOM reflow is needed between removing and re-adding the class for the animation to reliably retrigger.

🔧 Proposed fix to force animation restart

   function shakeElement(el: HTMLElement | null) {
     if (!el) return;
-    el.classList.add("shake", "border-danger");
+    el.classList.remove("shake");
+    void el.offsetWidth; // force reflow to restart animation
+    el.classList.add("shake", "border-danger");
     setTimeout(() => {
       el.classList.remove("shake", "border-danger");
     }, 400);
   }

🤖 Prompt for 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.

In `@src/popup.ts` around lines 537 - 543, The shake animation in shakeElement
can’t reliably restart on rapid repeated calls because the "shake" class stays
applied, so re-adding it is a no-op. Update shakeElement to force a restart by
removing the animation classes, triggering a DOM reflow on the same HTMLElement,
and then re-adding "shake" and "border-danger"; keep the fix localized to
shakeElement so repeated invalid submissions retrigger the animation
consistently.

🤖 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.

Nitpick comments:
In `@src/popup.ts`:
- Around line 537-543: The shake animation in shakeElement can’t reliably
restart on rapid repeated calls because the "shake" class stays applied, so
re-adding it is a no-op. Update shakeElement to force a restart by removing the
animation classes, triggering a DOM reflow on the same HTMLElement, and then
re-adding "shake" and "border-danger"; keep the fix localized to shakeElement so
repeated invalid submissions retrigger the animation consistently.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 57857528-7630-4314-8d60-2668397b01ba

📥 Commits

Reviewing files that changed from the base of the PR and between d216444 and b97e483.

📒 Files selected for processing (2)

• src/popup.css
• src/popup.ts