fix: wire up API quota refresh button

[Dotify71]

Fixes #78

Description

Wired up the "dead" API Quota refresh button on the Settings page so that users can actually click it to fetch their updated GitHub rate limits without needing to trigger a full page reload or a new organization query.

Solution

• Exported a new refreshRateLimit callback from AppContext.jsx.
• Attached the onClick handler to the FiRefreshCw icon in SettingsPage.jsx.
• Added a seamless CSS transform: rotate animation to provide visual feedback while the API call is in flight.

Summary by CodeRabbit

Release Notes

• New Features
  • Added ability to refresh API rate limit information from the Settings page. Click the refresh icon in the API Quota card to update your current quota status with visual loading feedback and protection against multiple simultaneous refresh requests.

[coderabbitai]

Warning

Review limit reached

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

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

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ 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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 63a31f7a-2000-4135-9bf8-cf687c04911a

📥 Commits

Reviewing files that changed from the base of the PR and between 73c7243 and b5b1daa.

📒 Files selected for processing (1)

• src/pages/SettingsPage.jsx

Walkthrough

AppProvider gains a refreshRateLimit useCallback that calls fetchRateLimit(pat) and updates rateLimit state; this function is added to the context value. SettingsPage consumes it, adds isRefreshing local state, and replaces the static refresh icon with an animated, click-guarded version.

Changes

API Quota Refresh Feature

Layer / File(s)	Summary
refreshRateLimit callback in AppContext src/context/AppContext.jsx	Defines refreshRateLimit as a useCallback that asynchronously fetches the GitHub rate limit using the stored PAT and updates rateLimit state; exposes it through Ctx.Provider value.
Spinning refresh icon in SettingsPage src/pages/SettingsPage.jsx	Destructures refreshRateLimit from useApp, introduces isRefreshing state, and replaces the static FiRefreshCw icon with a clickable component that blocks re-entry, triggers the refresh, animates during loading, and resets after a fixed timeout.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

Typescript Lang

Poem

🐇 Hop, hop, the button was bare,
No onClick to handle with care.
Now a spin and a call,
Rate limits stand tall —
The refresh icon twirls through the air! 🔄

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: wiring up the API quota refresh button functionality.
Linked Issues check	✅ Passed	All three objectives from issue #78 are met: refreshRateLimit callback created [#78], onClick handler attached [#78], and CSS rotation animation added for visual feedback [#78].
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing the refresh button functionality. No unrelated modifications or out-of-scope alterations were introduced.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 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 `@src/pages/SettingsPage.jsx`:
- Around line 208-218: The refresh icon (FiRefreshCw) is implemented as a
clickable element that lacks proper keyboard accessibility, preventing
keyboard-only users from accessing the refresh functionality. Replace the icon
with a semantic HTML button element that wraps the FiRefreshCw icon, moving the
onClick handler with the isRefreshing check, setIsRefreshing state management,
and refreshRateLimit call to the button element. This ensures the control is
properly focusable via keyboard and operable with Enter/Space keys while
maintaining the visual styling and rotation animation behavior.

🪄 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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 80562388-23b1-40f5-85b8-e7c4e8fe5cd5

📥 Commits

Reviewing files that changed from the base of the PR and between 46c5c95 and 0cbd3b8.

📒 Files selected for processing (2)

• src/context/AppContext.jsx
• src/pages/SettingsPage.jsx

[Dotify71]

@coderabbitai Great catch on accessibility! I have updated the code to wrap the FiRefreshCw icon inside a proper semantic HTML <button> element with an aria-label to ensure full keyboard focusability and operability for all users.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@Dotify71 That's a great improvement! Using a semantic <button> element ensures native keyboard focusability (Tab key navigation), proper Enter/Space key activation, and correct announcement by screen readers — far better than a styled <div> or bare icon with a cursor pointer. The aria-label addition is the perfect complement to convey the button's purpose to assistive technology users. Well done! 🎉

(◕‿◕✿) 🐇

---

If you found this review helpful, would you consider giving us a shout-out on X?

Thank you for using CodeRabbit!

[coderabbitai]

♻️ Duplicate comments (1)

src/pages/SettingsPage.jsx (1)

210-215: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Ensure isRefreshing is always reset on refresh failure.

If refreshRateLimit() throws (Line 213), the reset path at Line 214 is skipped, leaving isRefreshing stuck true and effectively disabling future refresh attempts.

Proposed fix

                 onClick={async () => {
-                  if (isRefreshing) return;
-                  setIsRefreshing(true);
-                  await refreshRateLimit();
-                  setTimeout(() => setIsRefreshing(false), 500); // Minimum spin duration for visual feedback
+                  if (isRefreshing) return
+                  setIsRefreshing(true)
+                  try {
+                    await refreshRateLimit()
+                  } finally {
+                    setTimeout(() => setIsRefreshing(false), 500) // Minimum spin duration for visual feedback
+                  }
                 }}

🤖 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/pages/SettingsPage.jsx` around lines 210 - 215, The onClick handler for
the refresh button does not handle failures in the refreshRateLimit() call,
which means if refreshRateLimit() throws an error, the setTimeout that resets
isRefreshing to false will never execute, leaving the state stuck at true and
preventing future refresh attempts. Wrap the await refreshRateLimit() call in a
try-catch block (or use a finally block) to ensure that setIsRefreshing(false)
is always called to reset the loading state, regardless of whether the refresh
succeeds or fails.

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

Duplicate comments:
In `@src/pages/SettingsPage.jsx`:
- Around line 210-215: The onClick handler for the refresh button does not
handle failures in the refreshRateLimit() call, which means if
refreshRateLimit() throws an error, the setTimeout that resets isRefreshing to
false will never execute, leaving the state stuck at true and preventing future
refresh attempts. Wrap the await refreshRateLimit() call in a try-catch block
(or use a finally block) to ensure that setIsRefreshing(false) is always called
to reset the loading state, regardless of whether the refresh succeeds or fails.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: f7f99aec-66e9-4d22-8465-96b7bacfbc07

📥 Commits

Reviewing files that changed from the base of the PR and between 0cbd3b8 and 73c7243.

📒 Files selected for processing (1)

• src/pages/SettingsPage.jsx

[Dotify71]

@coderabbitai Nice catch on the missing error handling! I've wrapped the await refreshRateLimit() call in a try...finally block to ensure the isRefreshing state is always safely reset, preventing the button from becoming permanently disabled if a network error occurs.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@Dotify71 That's exactly the right pattern! Using try...finally guarantees that isRefreshing is reset to false whether the refresh succeeds, fails, or throws — preventing the button from becoming permanently stuck in a disabled/spinning state after a network error or unexpected exception. Solid defensive programming! 🎉

(✿◠‿◠) 🐇

[Dotify71]

Hi @Zahnentferner, I've finished implementing this fix and addressing the automated review feedback. All CI checks are passing green and CodeRabbit has approved the changes.

Could you please take a look when you have a free moment? Let me know if you'd like any further adjustments! Thanks.