feat(console): persist auto-scroll toggle state in localStorage#8024
feat(console): persist auto-scroll toggle state in localStorage#8024RC-CHN merged 1 commit intoAstrBotDevs:masterfrom
Conversation
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- Consider initializing
autoScrollEnabledfromlocalStoragein amountedhook instead of indata()so the component doesn’t touchwindow.localStorageduring server-side rendering or non-browser usage. - It may be safer to normalize the stored value explicitly (e.g.,
const stored = localStorage.getItem('console_auto_scroll'); this.autoScrollEnabled = stored === null ? true : stored === 'true';) to avoid unexpected behavior if the key is ever set to an unexpected string.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider initializing `autoScrollEnabled` from `localStorage` in a `mounted` hook instead of in `data()` so the component doesn’t touch `window.localStorage` during server-side rendering or non-browser usage.
- It may be safer to normalize the stored value explicitly (e.g., `const stored = localStorage.getItem('console_auto_scroll'); this.autoScrollEnabled = stored === null ? true : stored === 'true';`) to avoid unexpected behavior if the key is ever set to an unexpected string.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
There was a problem hiding this comment.
Code Review
This pull request implements persistence for the console's auto-scroll setting by storing the state in localStorage. The review feedback identifies potential runtime errors if localStorage is restricted and suggests wrapping storage operations in try-catch blocks. Additionally, it notes a synchronization issue where the initial persisted state is not correctly propagated to the child component upon mounting.
| data() { | ||
| return { | ||
| autoScrollEnabled: true, | ||
| autoScrollEnabled: localStorage.getItem('console_auto_scroll') !== 'false', |
There was a problem hiding this comment.
Accessing localStorage can throw an error if it is disabled or restricted in the user's browser. It is safer to wrap this call in a try-catch block to prevent the component from failing to mount.
autoScrollEnabled: (() => {
try {
return localStorage.getItem('console_auto_scroll') !== 'false';
} catch (e) {
return true;
}
})(),
| autoScrollEnabled(val) { | ||
| localStorage.setItem('console_auto_scroll', val); | ||
| if (this.$refs.consoleDisplayer) { | ||
| this.$refs.consoleDisplayer.autoScroll = val; | ||
| } |
There was a problem hiding this comment.
The autoScrollEnabled state is not synchronized with the ConsoleDisplayer component on initial load. ConsoleDisplayer defaults to true, so it will ignore the persisted false state until the user toggles the switch. Consider adding a mounted hook to ConsolePage.vue to set this.$refs.consoleDisplayer.autoScroll = this.autoScrollEnabled;.
| }, | ||
| watch: { | ||
| autoScrollEnabled(val) { | ||
| localStorage.setItem('console_auto_scroll', val); |
There was a problem hiding this comment.
The auto-scroll toggle on the console page resets to its default (
true) on every page refresh, which can be annoying for users who prefer to keep it disabled.Modifications / 改动点
dashboard/src/views/ConsolePage.vue
Initialize
autoScrollEnabledfromlocalStorageon mount, falling back totruewhen no stored value exists.Watch
autoScrollEnabledand persist changes tolocalStorageso the preference survives page reloads.This is NOT a breaking change. / 这不是一个破坏性变更。
Screenshots or Test Results / 运行截图或测试结果
Checklist / 检查清单
😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
/ 如果 PR 中有新加入的功能,已经通过 Issue / 邮件等方式和作者讨论过。
👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
/ 我的更改经过了良好的测试,并已在上方提供了“验证步骤”和“运行截图”。
🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in
requirements.txtandpyproject.toml./ 我确保没有引入新依赖库,或者引入了新依赖库的同时将其添加到
requirements.txt和pyproject.toml文件相应位置。😮 My changes do not introduce malicious code.
/ 我的更改没有引入恶意代码。
Summary by Sourcery
New Features: