peter
b382eb857b
- Replace the gear/username button with a round initials avatar (per-user deterministic color via a new daybook_extras template filter); dropdown now shows the username and keeps Settings/About/theme/logout. Sets up an optional profile photo later. - Regroup the settings nav into "You" (Account, API Keys, Storage, Demo Data) and a superuser-only "Admin" (Users), About separate — the split now reflects who each setting affects, not a flat list. - Register ApiKey (key read-only) and TagColor in Django admin so /admin/ is complete as the operator break-glass tool, distinct from the themed Settings product surface. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
60 lines
2.6 KiB
HTML
60 lines
2.6 KiB
HTML
{% load daybook_extras %}
|
|
<header class="topbar">
|
|
<div class="brandline">
|
|
<a class="brand-link" href="{% url 'feed' %}"><img class="brand-logo" src="/static/logo.png" alt=""><h1>AgentFeed</h1></a>
|
|
</div>
|
|
<div class="toolbar">
|
|
{% if topbar_toolbar %}{% include topbar_toolbar %}{% endif %}
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<button class="avatar-button" type="button" data-user-menu-toggle aria-haspopup="true" aria-expanded="false" title="{{ request.user.username }}" aria-label="{{ request.user.username }} menu">
|
|
<span class="avatar" style="background: {{ request.user.username|avatar_color }};">{{ request.user.username|avatar_initial }}</span>
|
|
</button>
|
|
<div class="user-menu-dropdown" hidden data-user-menu>
|
|
<div class="user-menu-name">{{ request.user.username }}</div>
|
|
<a href="{% url 'settings-account' %}">Settings</a>
|
|
<a href="{% url 'settings-about' %}">About</a>
|
|
<button type="button" data-theme-toggle>Dark mode</button>
|
|
<form method="post" action="{% url 'logout' %}">{% csrf_token %}<button type="submit">Log out</button></form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<script>
|
|
(() => {
|
|
const toggle = document.querySelector("[data-user-menu-toggle]");
|
|
const menu = document.querySelector("[data-user-menu]");
|
|
if (!toggle || !menu) return;
|
|
toggle.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
const isHidden = menu.hidden;
|
|
menu.hidden = !isHidden;
|
|
toggle.setAttribute("aria-expanded", String(isHidden));
|
|
});
|
|
document.addEventListener("click", (event) => {
|
|
if (!menu.hidden && !menu.contains(event.target) && event.target !== toggle) {
|
|
menu.hidden = true;
|
|
toggle.setAttribute("aria-expanded", "false");
|
|
}
|
|
});
|
|
|
|
const themeToggle = document.querySelector("[data-theme-toggle]");
|
|
if (themeToggle) {
|
|
const syncLabel = () => {
|
|
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
|
|
themeToggle.textContent = isDark ? "Light mode" : "Dark mode";
|
|
};
|
|
syncLabel();
|
|
themeToggle.addEventListener("click", () => {
|
|
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
|
|
if (isDark) {
|
|
document.documentElement.removeAttribute("data-theme");
|
|
try { localStorage.setItem("daybook.theme", "light"); } catch (e) {}
|
|
} else {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
try { localStorage.setItem("daybook.theme", "dark"); } catch (e) {}
|
|
}
|
|
syncLabel();
|
|
});
|
|
}
|
|
})();
|
|
</script>
|