feat: |UI| add configAutoRefreshInterval && autoRefresh useStorage

[dreamhunter2333]

PR Type

enhancement

---

Description

• Add autoRefresh and configAutoRefreshInterval to global state.

• Implement auto-refresh functionality with configurable interval.

• Update UI components to support auto-refresh settings.

• Ensure immediate effect of auto-refresh setting changes.

---

Changes walkthrough 📝

Relevant files

Enhancement

MailBox.vue Add auto-refresh functionality with configurable interval frontend/src/components/MailBox.vue Add autoRefresh and configAutoRefreshInterval to state. Implement setupAutoRefresh with configurable interval. Add backFirstPageAndRefresh function. Update refresh button to use backFirstPageAndRefresh. +16/-10  Appearance.vue Add UI support for auto-refresh interval configuration      frontend/src/views/common/Appearance.vue Add configAutoRefreshInterval to global state. Add slider for autoRefreshInterval configuration. Add translations for autoRefreshInterval. +8/-1      index.js Add `autoRefresh` and `configAutoRefreshInterval` to global state frontend/src/store/index.js Add autoRefresh and configAutoRefreshInterval to global state. Initialize autoRefresh and configAutoRefreshInterval with default values. +4/-0

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 37c8890)

Here are some key observations to aid the review process:

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

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Issue The setupAutoRefresh function does not handle the case where configAutoRefreshInterval is changed while auto-refresh is active. This could lead to unexpected behavior if the interval is modified during an ongoing auto-refresh cycle. const setupAutoRefresh = async (autoRefresh) => { // auto refresh every configAutoRefreshInterval seconds autoRefreshInterval.value = configAutoRefreshInterval.value; if (autoRefresh) { clearInterval(timer.value); timer.value = setInterval(async () => { if (loading.value) return; autoRefreshInterval.value--; if (autoRefreshInterval.value <= 0) { autoRefreshInterval.value = configAutoRefreshInterval.value; await backFirstPageAndRefresh(); } }, 1000) } else { clearInterval(timer.value) timer.value = null }

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 37c8890

Explore these optional code suggestions:

Category	Suggestion	Score
General	Validate configAutoRefreshInterval.value to ensure it is within the expected range before using it Ensure that configAutoRefreshInterval.value is validated to be within the expected range before using it to set the interval. frontend/src/components/MailBox.vue [122] -autoRefreshInterval.value = configAutoRefreshInterval.value; +autoRefreshInterval.value = Math.max(30, Math.min(configAutoRefreshInterval.value, 300)); Suggestion importance[1-10]: 9 Why: Validating configAutoRefreshInterval.value ensures that the interval is within a reasonable range, preventing potential issues with extremely short or long intervals that could affect the application's performance and usability.	9
	Add error handling within the setInterval function to catch and log exceptions during the auto-refresh process Add error handling within the setInterval function to catch and log any potential exceptions during the auto-refresh process. frontend/src/components/MailBox.vue [125-132] timer.value = setInterval(async () => { - if (loading.value) return; - autoRefreshInterval.value--; - if (autoRefreshInterval.value <= 0) { - autoRefreshInterval.value = configAutoRefreshInterval.value; - await backFirstPageAndRefresh(); + try { + if (loading.value) return; + autoRefreshInterval.value--; + if (autoRefreshInterval.value <= 0) { + autoRefreshInterval.value = configAutoRefreshInterval.value; + await backFirstPageAndRefresh(); + } + } catch (error) { + console.error('Auto-refresh error:', error); } }, 1000) Suggestion importance[1-10]: 7 Why: Adding error handling within the setInterval function improves the robustness of the auto-refresh process by ensuring that any exceptions are caught and logged, preventing the application from silently failing.	7
Possible issue	Move clearInterval(timer.value) outside the if (autoRefresh) block to prevent multiple intervals from being set Ensure that the clearInterval(timer.value) call is made outside the if (autoRefresh) block to avoid potential issues with multiple intervals being set. frontend/src/components/MailBox.vue [123-125] +clearInterval(timer.value); if (autoRefresh) { - clearInterval(timer.value); timer.value = setInterval(async () => { Suggestion importance[1-10]: 8 Why: This suggestion prevents potential issues with multiple intervals being set by ensuring the interval is cleared before setting a new one, which is crucial for avoiding memory leaks and unexpected behavior.	8

---

Previous suggestions

Suggestions up to commit a91bad2

Category	Suggestion	Score
General	Set timer.value to null after clearing the interval to avoid potential memory leaks Ensure that the clearInterval function sets timer.value to null to avoid potential memory leaks. frontend/src/components/MailBox.vue [133-135] -clearInterval(timer.value) +clearInterval(timer.value); +timer.value = null; Suggestion importance[1-10]: 9 Why: This change ensures that the timer is properly cleaned up, preventing potential memory leaks and ensuring that the timer state is accurately reflected.	9
	Add error handling to the backFirstPageAndRefresh function to manage potential errors during the refresh process Add error handling to the backFirstPageAndRefresh function to manage potential errors during the refresh process. frontend/src/components/MailBox.vue [173-176] const backFirstPageAndRefresh = async () =>{ - page.value = 1; - await refresh(); + try { + page.value = 1; + await refresh(); + } catch (error) { + console.error('Error during refresh:', error); + } } Suggestion importance[1-10]: 7 Why: Adding error handling improves the robustness of the function by ensuring that any errors during the refresh process are caught and logged.	7
Possible issue	Clear the existing interval before setting a new one to prevent multiple intervals from running simultaneously Ensure that the clearInterval function is called before setting a new interval to avoid multiple intervals running simultaneously. frontend/src/components/MailBox.vue [120-133] if (autoRefresh) { + clearInterval(timer.value); timer.value = setInterval(async () => { if (loading.value) return; autoRefreshInterval.value--; if (autoRefreshInterval.value <= 0) { autoRefreshInterval.value = configAutoRefreshInterval.value; await backFirstPageAndRefresh(); } }, 1000) } else { clearInterval(timer.value) Suggestion importance[1-10]: 8 Why: This suggestion prevents multiple intervals from running simultaneously, which can cause unexpected behavior and performance issues.	8

Suggestions up to commit 6c7cbac

Category	Suggestion	Score
Possible issue	Prevent multiple intervals from running simultaneously by clearing the existing interval before setting a new one Ensure that the clearInterval function is called before setting a new interval to prevent multiple intervals from running simultaneously. frontend/src/components/MailBox.vue [123-124] if (autoRefresh) { + clearInterval(timer.value); timer.value = setInterval(async () => { Suggestion importance[1-10]: 9 Why: This suggestion addresses a critical issue where multiple intervals could run simultaneously, leading to unexpected behavior. Clearing the existing interval before setting a new one ensures proper functionality.	9
General	Ensure the auto-refresh interval is reset to the configured value instead of a hardcoded value Reset the autoRefreshInterval to configAutoRefreshInterval.value instead of a hardcoded value of 30 to ensure consistency with the configuration. frontend/src/components/MailBox.vue [128] -autoRefreshInterval.value = 30; +autoRefreshInterval.value = configAutoRefreshInterval.value; Suggestion importance[1-10]: 8 Why: This suggestion improves consistency by using the configured value for the auto-refresh interval instead of a hardcoded value, ensuring the application behaves as expected based on user settings.	8
	Add a null check for configAutoRefreshInterval to prevent potential runtime errors Add a null check for configAutoRefreshInterval to avoid potential runtime errors if the value is not properly initialized. frontend/src/components/MailBox.vue [122] -autoRefreshInterval.value = configAutoRefreshInterval.value; +autoRefreshInterval.value = configAutoRefreshInterval?.value || 60; Suggestion importance[1-10]: 7 Why: Adding a null check for configAutoRefreshInterval enhances the robustness of the code by preventing potential runtime errors if the value is not properly initialized.	7

[github-actions]

Persistent review updated to latest commit a91bad2

[github-actions]

Persistent review updated to latest commit 37c8890