feat(ui): add data caching and hash-based routing

- Implement localStorage-based caching in data-store to restore accounts, models, and usage data on load, improving initial render performance
- Add hash-based routing in global store to sync active tab with URL, enabling browser back/forward navigation and direct linking to tabs
This commit is contained in:
jgor20
2026-01-11 13:47:15 +00:00
parent 11e256ac70
commit 0a0e3e2851
2 changed files with 70 additions and 1 deletions

View File

@@ -5,6 +5,33 @@
document.addEventListener('alpine:init', () => {
Alpine.store('global', {
init() {
// Hash-based routing
const validTabs = ['dashboard', 'models', 'accounts', 'logs', 'settings'];
const getHash = () => window.location.hash.substring(1);
// 1. Initial load from hash
const initialHash = getHash();
if (validTabs.includes(initialHash)) {
this.activeTab = initialHash;
}
// 2. Sync State -> URL
Alpine.effect(() => {
if (validTabs.includes(this.activeTab) && getHash() !== this.activeTab) {
window.location.hash = this.activeTab;
}
});
// 3. Sync URL -> State (Back/Forward buttons)
window.addEventListener('hashchange', () => {
const hash = getHash();
if (validTabs.includes(hash) && this.activeTab !== hash) {
this.activeTab = hash;
}
});
},
// App State
version: '1.0.0',
activeTab: 'dashboard',