Improve account profile and sidebar details

This commit is contained in:
Rafael Foster
2026-04-28 21:11:49 -03:00
parent d22f3c1034
commit 5062e1e61f
21 changed files with 308 additions and 65 deletions
+40 -3
View File
@@ -134,6 +134,7 @@ const PRIMARY_NAV = 4;
const DEFAULT_APP_NAME = 'Oikos';
const APP_NAME_STORAGE_KEY = 'oikos-app-name';
const APP_VERSION_STORAGE_KEY = 'oikos-app-version';
function getDirection(fromPath, toPath) {
const fromIdx = ROUTE_ORDER.indexOf(fromPath ?? '/');
@@ -146,6 +147,10 @@ function getAppName() {
return localStorage.getItem(APP_NAME_STORAGE_KEY) || DEFAULT_APP_NAME;
}
function getAppVersion() {
return localStorage.getItem(APP_VERSION_STORAGE_KEY) || '';
}
function setAppName(name) {
const next = String(name || '').trim();
if (next) {
@@ -155,6 +160,15 @@ function setAppName(name) {
}
}
function setAppVersion(version) {
const next = String(version || '').trim();
if (next) {
localStorage.setItem(APP_VERSION_STORAGE_KEY, next);
} else {
localStorage.removeItem(APP_VERSION_STORAGE_KEY);
}
}
function routeTitle(path) {
const map = {
'/': t('dashboard.title'),
@@ -174,8 +188,14 @@ function routeTitle(path) {
function updateBranding(path = currentPath) {
const appName = getAppName();
const sidebarLogoSpan = document.querySelector('.nav-sidebar__logo span');
if (sidebarLogoSpan) sidebarLogoSpan.textContent = appName;
const sidebarLogoName = document.querySelector('.nav-sidebar__brand-name');
if (sidebarLogoName) sidebarLogoName.textContent = appName;
const sidebarVersion = document.querySelector('.nav-sidebar__version');
if (sidebarVersion) {
const version = getAppVersion();
sidebarVersion.textContent = version ? t('login.version', { version }) : '';
sidebarVersion.hidden = !version;
}
const loginTitle = document.querySelector('.login-hero__title');
if (path === '/login' && loginTitle) loginTitle.textContent = appName;
@@ -284,6 +304,14 @@ async function syncPreferencesOnce() {
} catch {
// Non-critical. The settings page can refresh this later.
}
try {
const res = await api.get('/version');
if (res?.version) setAppVersion(res.version);
if (res?.app_name) setAppName(res.app_name);
updateBranding();
} catch {
// Non-critical. The login page and settings page can refresh branding later.
}
}
/**
@@ -427,9 +455,18 @@ function renderAppShell(container) {
logomark.appendChild(logoSvg);
sidebarLogo.appendChild(logomark);
const sidebarBrandText = document.createElement('div');
sidebarBrandText.className = 'nav-sidebar__brand-text';
const sidebarLogoSpan = document.createElement('span');
sidebarLogoSpan.className = 'nav-sidebar__brand-name';
sidebarLogoSpan.textContent = getAppName();
sidebarLogo.appendChild(sidebarLogoSpan);
const sidebarVersion = document.createElement('small');
sidebarVersion.className = 'nav-sidebar__version';
const cachedVersion = getAppVersion();
sidebarVersion.textContent = cachedVersion ? t('login.version', { version: cachedVersion }) : '';
sidebarVersion.hidden = !cachedVersion;
sidebarBrandText.append(sidebarLogoSpan, sidebarVersion);
sidebarLogo.appendChild(sidebarBrandText);
const sidebarItems = document.createElement('div');
sidebarItems.className = 'nav-sidebar__items';
sidebarItems.setAttribute('role', 'list');