feat(UI): add reload button

[meysam81]

This PR adds the reload button to the dashboard to avoid having to refresh the page to get the data from the backend.

Screenshot below 👇

Click to expand

[knadh]

Hi @meysam81. I'm not sure if a dedicated reload button custom-placed on every template is a good idea.

If at all:

• It should be a single global refresh icon on the top nav bar that emits a page.refresh Vue signal/event.
• Then every component registers a listener on "created" (and de-registers on "destroyed") for the event.
• The mount sequence that involves data fetching in all the components is moved to a named enclosure/function, which is called in mount() and then in the event also.

This will significantly reduce duplicated logic and lines of code.

[meysam81]

done @knadh 👍

Screenshot (navbar)

[graysoncooper]

Hi! Hope you don't mind me adding to the repo, trying to build something for automated QA testing on individual PRs. Here's a summary of my testing. What I did here: create dev container, build a test plan, run test agent against the actual app, and the results below all look good.

Test Execution Report

Summary

Total	Passed	Failed	Skipped
16	16	0	0

Artifact from Test 1
1ba5d4afb587e0289e0c44fe7cd05d66.webm

Result: ALL TESTS PASSED

---

Test Results

UI Tests

ID	Test Case	Status	Notes
UI-1	Verify refresh button presence in navbar	PASSED	Button found with data-cy="btn-reload" attribute in navbar
UI-2	Verify refresh button tooltip on hover	PASSED	"Reload" tooltip appears on hover

Functional Tests

ID	Test Case	Status	Notes
FUNC-1	Dashboard page refresh functionality	PASSED	API calls to /api/dashboard/counts and /api/dashboard/charts verified
FUNC-2	Lists page refresh functionality	PASSED	API call to /api/lists triggered successfully
FUNC-3	Subscribers page refresh functionality	PASSED	API call to /api/subscribers triggered successfully
FUNC-4	Campaigns page refresh functionality	PASSED	API call to /api/campaigns triggered successfully
FUNC-5	Bounces page refresh functionality	PASSED	API call to /api/bounces triggered successfully
FUNC-6	Media page refresh functionality	PASSED	API call to /api/media triggered successfully
FUNC-7	Templates page refresh functionality	PASSED	API call to /api/templates triggered successfully
FUNC-8	Users page refresh functionality	PASSED	API call to /api/users triggered successfully

Animation Tests

ID	Test Case	Status	Notes
ANIM-1	Verify spin animation during loading	PASSED	CSS @keyframes spinAround animation verified in stylesheet
ANIM-2	Verify hover animation on refresh button	PASSED	Tooltip animation on hover confirmed

Edge Case Tests

ID	Test Case	Status	Notes
EDGE-1	Rapid consecutive refresh clicks	PASSED	7 rapid clicks handled gracefully, all API requests returned 200 OK, no console errors
EDGE-2	Navigation during refresh operation	PASSED	Successfully navigated from Subscribers to Campaigns during refresh, UI remained stable
EDGE-3	Refresh with API error response	PASSED	Simulated network failure handled gracefully - UI not stuck in loading, recovered after network restored

Accessibility Tests

ID	Test Case	Status	Notes
A11Y-1	Verify accessibility of refresh button	PASSED	aria-label="Reload" present, keyboard focusable (tabIndex=0), visible focus outline, activatable with Enter key

---

Accessibility Details

The refresh button meets accessibility requirements:

• aria-label: "Reload" (screen reader friendly)
• Keyboard navigation: Fully focusable and activatable
• Focus indicator: Blue outline rgb(0, 95, 204) auto 1px)
• Test attribute: data-cy="btn-reload" for automated testing

---

Environment

• Browser: Chromium (via Playwright)
• Application: listmonk (fresh install)
• Test Account: admin@test.com

---

Conclusion

All 16 test cases passed successfully. The global refresh button feature in PR #2861 works correctly across all tested pages and scenarios. The implementation handles edge cases gracefully and meets accessibility standards.