UI updates
This commit is contained in:
KingKDot
@@ -7,6 +7,8 @@ import {
|
||||
markAllNotificationsRead,
|
||||
getClientEventNotificationEnabled,
|
||||
setClientEventNotificationEnabled,
|
||||
requestDesktopNotificationPermission,
|
||||
setDesktopNotificationsEnabled,
|
||||
} from "./notify-client.js";
|
||||
|
||||
// ── DOM refs ──────────────────────────────────────────────────────────────────
|
||||
@@ -50,6 +52,13 @@ const eventNotifOfflineInput = document.getElementById("event-notif-offline");
|
||||
const eventNotifPurgatoryInput = document.getElementById("event-notif-purgatory");
|
||||
const saveEventNotifsBtn = document.getElementById("save-event-notifs");
|
||||
|
||||
// Browser permission status bar
|
||||
const desktopNotifStatusBar = document.getElementById("desktop-notif-status-bar");
|
||||
const desktopNotifStatusIcon = document.getElementById("desktop-notif-status-icon");
|
||||
const desktopNotifStatusText = document.getElementById("desktop-notif-status-text");
|
||||
const desktopNotifEnableBtn = document.getElementById("desktop-notif-enable-btn");
|
||||
const desktopNotifDeniedHint = document.getElementById("desktop-notif-denied-hint");
|
||||
|
||||
// Preview modal
|
||||
const panel = document.getElementById("notification-panel");
|
||||
const previewModal = document.getElementById("notification-preview-modal");
|
||||
@@ -601,6 +610,55 @@ document.addEventListener("visibilitychange", clearIfActive);
|
||||
window.addEventListener("focus", clearIfActive);
|
||||
clearIfActive();
|
||||
|
||||
function updateDesktopPermissionUi() {
|
||||
if (!desktopNotifStatusBar) return;
|
||||
const perm = (typeof Notification !== "undefined") ? Notification.permission : "denied";
|
||||
|
||||
desktopNotifEnableBtn?.classList.add("hidden");
|
||||
desktopNotifDeniedHint?.classList.add("hidden");
|
||||
|
||||
if (perm === "granted") {
|
||||
desktopNotifStatusBar.className = desktopNotifStatusBar.className
|
||||
.replace(/border-\S+/g, "").replace(/bg-\S+/g, "").trimEnd();
|
||||
desktopNotifStatusBar.classList.add("border-emerald-700/50", "bg-emerald-900/10");
|
||||
if (desktopNotifStatusIcon) {
|
||||
desktopNotifStatusIcon.className = "fa-solid fa-circle-dot text-base text-emerald-400";
|
||||
}
|
||||
if (desktopNotifStatusText) desktopNotifStatusText.textContent = "Browser notifications are enabled";
|
||||
} else if (perm === "denied") {
|
||||
desktopNotifStatusBar.className = desktopNotifStatusBar.className
|
||||
.replace(/border-\S+/g, "").replace(/bg-\S+/g, "").trimEnd();
|
||||
desktopNotifStatusBar.classList.add("border-red-700/50", "bg-red-900/10");
|
||||
if (desktopNotifStatusIcon) {
|
||||
desktopNotifStatusIcon.className = "fa-solid fa-circle-dot text-base text-red-400";
|
||||
}
|
||||
if (desktopNotifStatusText) desktopNotifStatusText.textContent = "Browser notifications are blocked";
|
||||
desktopNotifDeniedHint?.classList.remove("hidden");
|
||||
} else {
|
||||
desktopNotifStatusBar.className = desktopNotifStatusBar.className
|
||||
.replace(/border-\S+/g, "").replace(/bg-\S+/g, "").trimEnd();
|
||||
desktopNotifStatusBar.classList.add("border-slate-700", "bg-slate-900/40");
|
||||
if (desktopNotifStatusIcon) {
|
||||
desktopNotifStatusIcon.className = "fa-solid fa-circle-dot text-base text-slate-400";
|
||||
}
|
||||
if (desktopNotifStatusText) desktopNotifStatusText.textContent = "Browser notifications not yet enabled";
|
||||
desktopNotifEnableBtn?.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function wireDesktopPermissionBtn() {
|
||||
if (!desktopNotifEnableBtn) return;
|
||||
desktopNotifEnableBtn.addEventListener("click", async () => {
|
||||
desktopNotifEnableBtn.disabled = true;
|
||||
const result = await requestDesktopNotificationPermission();
|
||||
if (result === "granted") {
|
||||
setDesktopNotificationsEnabled(true);
|
||||
}
|
||||
desktopNotifEnableBtn.disabled = false;
|
||||
updateDesktopPermissionUi();
|
||||
});
|
||||
}
|
||||
|
||||
// ── Event notification toggles ───────────────────────────────────────────────
|
||||
function loadEventNotifPrefs() {
|
||||
if (eventNotifOnlineInput) eventNotifOnlineInput.checked = getClientEventNotificationEnabled("client_online");
|
||||
@@ -626,5 +684,7 @@ wireTelegramSave();
|
||||
loadMySettings();
|
||||
loadEventNotifPrefs();
|
||||
wireEventNotifSave();
|
||||
updateDesktopPermissionUi();
|
||||
wireDesktopPermissionBtn();
|
||||
initRoleUi();
|
||||
connect();
|
||||
|
||||
@@ -257,7 +257,7 @@
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Desktop Event Notifications</h2>
|
||||
<p class="text-sm text-slate-400">
|
||||
Choose which client events trigger a desktop (OS) notification. Desktop notifications must be enabled in <a href="/settings" class="text-sky-400 hover:underline">Settings</a> first.
|
||||
Choose which client events trigger a desktop (OS) notification.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@@ -268,6 +268,25 @@
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Browser permission status -->
|
||||
<div id="desktop-notif-status-bar" class="flex flex-wrap items-center gap-3 mb-4 rounded-lg border px-4 py-3 text-sm">
|
||||
<i id="desktop-notif-status-icon" class="fa-solid fa-circle-dot text-base"></i>
|
||||
<span id="desktop-notif-status-text" class="flex-1">Checking permission…</span>
|
||||
<button
|
||||
id="desktop-notif-enable-btn"
|
||||
class="hidden inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-sky-600 hover:bg-sky-500 transition-colors text-white font-medium"
|
||||
type="button"
|
||||
>
|
||||
<i class="fa-solid fa-bell"></i>
|
||||
Enable Notifications
|
||||
</button>
|
||||
<p id="desktop-notif-denied-hint" class="hidden w-full text-xs text-amber-400 mt-1">
|
||||
<i class="fa-solid fa-triangle-exclamation mr-1"></i>
|
||||
Notifications are blocked. Reset notification permissions for this site in your browser settings, then reload.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
|
||||
<label class="flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<input id="event-notif-online" type="checkbox" class="h-4 w-4 accent-emerald-500 shrink-0" />
|
||||
|
||||
@@ -25,6 +25,35 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-sky-500/10 border border-sky-500/30">
|
||||
<i class="fa-brands fa-telegram text-sky-400"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">News & Updates</h2>
|
||||
<p class="text-sm text-slate-400">Stay up to date with the newest features, releases, and announcements.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-lg border border-slate-700 bg-slate-900 px-4 py-4 flex flex-col sm:flex-row sm:items-center gap-4">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm text-slate-300">
|
||||
Follow the official Overlord Telegram channel for the latest updates, changelogs, and feature announcements.
|
||||
</p>
|
||||
<p class="text-xs text-slate-500 mt-1">Channel: <span class="text-slate-400 font-mono">@kunta</span></p>
|
||||
</div>
|
||||
<a
|
||||
href="https://t.me/kunta"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 transition-colors text-white text-sm font-medium whitespace-nowrap"
|
||||
>
|
||||
<i class="fa-brands fa-telegram"></i>
|
||||
Open on Telegram
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||
<div>
|
||||
@@ -349,6 +378,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<script type="module" src="/assets/nav.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user