Update static/js/04-main.js

static/js/04-main.js

@@ -6,8 +6,13 @@ Glow.openCallPanel = async () => {
   Glow.calls.ensureState();
   Glow.state.calls.panelOpen = true;
 
-  Glow.els.callOverlay?.classList.remove("hidden");
+  const overlay = document.getElementById("callOverlay");
-  Glow.els.callParticipants?.classList.remove("hidden");
+  const participants = document.getElementById("callParticipants");
+
+  overlay?.classList.remove("hidden");
+  participants?.classList.remove("hidden");
+
+  Glow.restoreCallPanelPosition?.();
 
   if (Glow.state.calls.activeCall?.groupSession?.id) {
     await Glow.calls.refreshBackendParticipants();
@@ -63,11 +68,104 @@ Glow.loadRooms = async () => {
   Glow.updateChatControls();
 };
 
+Glow.restoreCallPanelPosition = () => {
+  const overlay = Glow.els.callOverlay;
+  if (!overlay) return;
+
+  const savedX = localStorage.getItem("glow_call_panel_x");
+  const savedY = localStorage.getItem("glow_call_panel_y");
+
+  if (savedX == null || savedY == null) return;
+
+  const x = Number(savedX);
+  const y = Number(savedY);
+
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+
+  Glow.state.calls.drag.x = x;
+  Glow.state.calls.drag.y = y;
+  overlay.style.left = `${x}px`;
+  overlay.style.top = `${y}px`;
+  overlay.style.right = "auto";
+  overlay.style.bottom = "auto";
+  overlay.style.alignItems = "flex-start";
+  overlay.style.justifyContent = "flex-start";
+};
+
+Glow.persistCallPanelPosition = () => {
+  const drag = Glow.state.calls?.drag;
+  if (!drag) return;
+  if (!Number.isFinite(drag.x) || !Number.isFinite(drag.y)) return;
+  localStorage.setItem("glow_call_panel_x", String(drag.x));
+  localStorage.setItem("glow_call_panel_y", String(drag.y));
+};
+
+Glow.confirmDirtySettingsBeforeNavigate = async action => {
+  if (Glow.state.activeView !== "settings" || !Glow.isSettingsDirty()) {
+    await action();
+    return true;
+  }
+
+  Glow.syncSettingsSavePanel?.();
+
+  const values = await Glow.openDialog({
+    title: "Unsaved settings changes",
+    body: "You have unsaved changes. Would you like to save before leaving this page?",
+    confirmText: "Save and leave",
+    cancelText: "Stay"
+  });
+
+  if (values === null) {
+    const discard = await Glow.openDialog({
+      title: "Discard changes?",
+      body: "If you leave now, your unsaved settings changes will be lost.",
+      confirmText: "Discard changes",
+      cancelText: "Stay",
+      danger: true
+    });
+
+    if (!discard) {
+      return false;
+    }
+
+    Glow.discardSettingsDraft?.();
+    await action();
+    return true;
+  }
+
+  try {
+    await Glow.saveSettingsDraft?.();
+    await action();
+    return true;
+  } catch (error) {
+    Glow.showToast(error.message || "Could not save settings.", "error");
+    return false;
+  }
+};
+
+Glow.navigateToView = async (view, options = {}) => {
+  return Glow.confirmDirtySettingsBeforeNavigate(async () => {
+    if (typeof options.before === "function") {
+      await options.before();
+    }
+
+    Glow.state.activeView = view;
+    Glow.updateViewUI();
+
+    if (typeof options.after === "function") {
+      await options.after();
+    }
+
+    if (options.schedulePoll !== false) {
+      Glow.schedulePoll?.();
+    }
+  });
+};
+
 Glow.updateViewUI = () => {
   const view = Glow.state.activeView || "feed";
   const room = Glow.state.activeRoom;
   const dm = Glow.state.activeDm;
-
   const feedActive = view === "feed";
   const dmListActive = view === "dms";
   const chatActive = view === "room" || view === "channel" || view === "dm";
@@ -220,7 +318,7 @@ Glow.updateAuthUI = () => {
   Glow.els.logoutButton.classList.toggle("hidden", !authenticated);
 
   Glow.els.headerAccount.textContent =
-    user ? `${user.username} · ${user.role}` : "not signed in";
+    user ? `${user.username} · ${user.role}` : "not signed in";
 
   document.body.classList.toggle("is-moderator", Glow.canModerate());
   document.body.classList.toggle("is-admin", Glow.isAdmin());
@@ -289,7 +387,6 @@ Glow.checkAuth = async () => {
 
     await Glow.checkInvite();
     await Glow.loadRooms();
-    await Glow.loadTeamsForAdapter?.();
     await Glow.loadDms?.().catch(() => {});
 
     Glow.state.activeView = "feed";
@@ -335,7 +432,6 @@ Glow.authenticate = async endpoint => {
 
     await Glow.checkInvite();
     await Glow.loadRooms();
-    await Glow.loadTeamsForAdapter?.();
     await Glow.loadDms?.().catch(() => {});
 
     Glow.state.activeView = "feed";
@@ -445,6 +541,7 @@ Glow.toggleNotifications = async () => {
     "glow_notifications_enabled",
     String(Glow.state.notificationsEnabled)
   );
+  Glow.updateAdminPreferenceButtons?.();
   Glow.showToast(
     Glow.state.notificationsEnabled
       ? "Browser notifications enabled."
@@ -465,6 +562,7 @@ Glow.toggleTypingIndicators = () => {
     Glow.renderTyping();
   }
 
+  Glow.updateAdminPreferenceButtons?.();
   Glow.showToast(
     Glow.state.typingIndicatorsEnabled
       ? "Typing indicators enabled."
@@ -559,7 +657,6 @@ Glow.els.threadForm?.addEventListener("submit", event => Glow.sendThreadReply?.(
 Glow.els.messageInput.addEventListener("input", () => {
   Glow.autoResizeComposer();
   Glow.updateMessageCount();
-  Glow.handleEmojiAutocompleteInput?.("main");
   clearTimeout(Glow.state.typingTimer);
 
   if (Glow.els.messageInput.value.trim()) {
@@ -575,13 +672,25 @@ Glow.els.messageInput.addEventListener("input", () => {
 Glow.els.threadInput?.addEventListener("input", () => {
   Glow.autoResizeThreadComposer?.();
   Glow.updateThreadMessageCount?.();
-  Glow.handleEmojiAutocompleteInput?.("thread");
 });
 
 Glow.els.messageInput.addEventListener("keydown", event => {
-  if (Glow.handleEmojiAutocompleteKeydown?.(event, "main")) {
+  if (Glow.state.emojiAutocomplete?.open) {
+    if (event.key === "Enter" || event.key === "Tab") {
+      if (typeof Glow.applyEmojiSuggestion === "function") {
+        event.preventDefault();
+        Glow.applyEmojiSuggestion();
         return;
       }
+    }
+    if (event.key === "Escape") {
+      if (typeof Glow.closeEmojiAutocomplete === "function") {
+        event.preventDefault();
+        Glow.closeEmojiAutocomplete();
+        return;
+      }
+    }
+  }
 
   if (event.key === "Enter" && !event.shiftKey) {
     event.preventDefault();
@@ -590,9 +699,22 @@ Glow.els.messageInput.addEventListener("keydown", event => {
 });
 
 Glow.els.threadInput?.addEventListener("keydown", event => {
-  if (Glow.handleEmojiAutocompleteKeydown?.(event, "thread")) {
+  if (Glow.state.emojiAutocomplete?.open && Glow.state.emojiAutocomplete.owner === "thread") {
+    if (event.key === "Enter" || event.key === "Tab") {
+      if (typeof Glow.applyEmojiSuggestion === "function") {
+        event.preventDefault();
+        Glow.applyEmojiSuggestion();
         return;
       }
+    }
+    if (event.key === "Escape") {
+      if (typeof Glow.closeEmojiAutocomplete === "function") {
+        event.preventDefault();
+        Glow.closeEmojiAutocomplete();
+        return;
+      }
+    }
+  }
 
   if (event.key === "Enter" && !event.shiftKey) {
     event.preventDefault();
@@ -638,20 +760,33 @@ Glow.els.threadAttachmentInput?.addEventListener("change", () => {
   Glow.setSelectedThreadAttachment?.(files);
 });
 
-Glow.els.feedButton.addEventListener("click", Glow.openFeed);
+Glow.els.feedButton.addEventListener("click", async () => {
-
+  await Glow.navigateToView("feed", {
-Glow.els.dmsButton?.addEventListener("click", async () => {
+    before: async () => {
-  Glow.state.activeView = "dms";
+      Glow.state.activeDm = null;
-  Glow.updateViewUI();
+    },
-  await Glow.loadDms?.();
+    after: async () => {
-  Glow.schedulePoll();
+      await Glow.loadFeed();
+    }
+  });
 });
 
-Glow.els.pagesButton?.addEventListener("click", () => {
+Glow.els.dmsButton?.addEventListener("click", async () => {
+  await Glow.navigateToView("dms", {
+    after: async () => {
+      await Glow.loadDms?.();
+    }
+  });
+});
+
+Glow.els.pagesButton?.addEventListener("click", async () => {
+  await Glow.confirmDirtySettingsBeforeNavigate(async () => {
     Glow.openPages?.();
   });
+});
 
 Glow.els.backButton?.addEventListener("click", async () => {
+  await Glow.confirmDirtySettingsBeforeNavigate(async () => {
     if (Glow.state.activeView === "thread") {
       await Glow.returnToChannel?.();
     } else if (Glow.state.activeView === "page") {
@@ -664,6 +799,7 @@ Glow.els.backButton?.addEventListener("click", async () => {
       await Glow.loadDms?.();
     }
   });
+});
 
 Glow.els.loginButton.addEventListener("click", () => {
   Glow.authenticate("/api/login");
@@ -683,73 +819,41 @@ Glow.els.passwordInput.addEventListener("keydown", event => {
 Glow.els.logoutButton.addEventListener("click", Glow.logout);
 
 Glow.els.roomSelect.addEventListener("change", async () => {
-  const selectedRoom =
+  const selected = Glow.state.rooms.find(
-    Glow.state.rooms.find(room => room.slug === Glow.els.roomSelect.value) || null;
+    room => room.slug === Glow.els.roomSelect.value
-  const selectedChannel =
+  );
-    Glow.state.channels?.find(channel => channel.slug === Glow.els.roomSelect.value) || null;
+  if (!selected) return;
 
-  if (selectedChannel && Glow.state.activeTeam) {
+  await Glow.confirmDirtySettingsBeforeNavigate(async () => {
     Glow.state.activeDm = null;
-    Glow.state.activeChannel = selectedChannel;
+    Glow.state.activeRoom = selected;
-    Glow.state.activeRoom = selectedChannel;
-    Glow.state.activeView = "channel";
-  } else if (selectedRoom) {
-    Glow.state.activeDm = null;
-    Glow.state.activeChannel = null;
-    Glow.state.activeRoom = selectedRoom;
     Glow.state.activeView = "room";
-  } else {
-    return;
-  }
-
     Glow.state.typingUsers = [];
     Glow.state.dmTypingUsers = [];
     Glow.renderTyping();
     Glow.updateViewUI();
 
-  if (Glow.state.activeView === "channel") {
-    await Glow.loadChannelMessages?.();
-  } else {
     await Glow.loadMessages();
-  }
-
     Glow.pollTyping();
     Glow.pingPresence?.();
     Glow.refreshPresence?.();
     Glow.schedulePoll();
   });
+});
 
-Glow.els.teamSelect?.addEventListener("change", async () => {
+Glow.els.teamSelect?.addEventListener("change", () => {
   const teams = Glow.state.teams || [];
-  const selected =
+  Glow.state.activeTeam =
     teams.find(team => team.slug === Glow.els.teamSelect.value) || null;
-
-  Glow.state.activeTeam = selected;
-
-  if (selected && typeof Glow.loadChannelsForTeam === "function") {
-    try {
-      await Glow.loadChannelsForTeam(selected.slug);
-      if (Glow.state.activeChannel) {
-        Glow.state.activeDm = null;
-        Glow.state.activeRoom = Glow.state.activeChannel;
-        Glow.state.activeView = "channel";
-        Glow.updateViewUI();
-        await Glow.loadChannelMessages?.();
-        Glow.pollTyping?.();
-        Glow.pingPresence?.();
-        Glow.refreshPresence?.();
-        Glow.schedulePoll();
-      }
-    } catch (error) {
-      Glow.showToast(error.message || "Could not load channels for this team.", "error");
-    }
-  }
 });
 
 Glow.els.adminFab.addEventListener("click", Glow.openAdminPanel);
 Glow.els.closeAdminButton.addEventListener("click", Glow.closeAdminPanel);
 Glow.els.createRoomButton.addEventListener("click", Glow.createRoom);
 Glow.els.clearMessagesButton.addEventListener("click", Glow.clearActiveRoom);
+Glow.els.typingToggleButton?.addEventListener("click", Glow.toggleTypingIndicators);
+Glow.els.notificationsToggleButton?.addEventListener("click", Glow.toggleNotifications);
+Glow.els.themeButton?.addEventListener("click", Glow.openAccentColorPicker);
 
 Glow.els.settingsButton?.addEventListener("click", () => {
   Glow.toggleHeaderMenu?.();
@@ -812,9 +916,10 @@ document.getElementById("closeCallPanelButton")?.addEventListener("click", () =>
   Glow.calls.ensureState();
   Glow.state.calls.panelOpen = false;
   document.getElementById("callOverlay")?.classList.add("hidden");
+  Glow.persistCallPanelPosition?.();
 });
 
-document.addEventListener("keydown", event => {
+document.addEventListener("keydown", async event => {
   if (event.key !== "Escape") return;
 
   if (!Glow.els.dialogOverlay.classList.contains("hidden")) {
@@ -822,6 +927,11 @@ document.addEventListener("keydown", event => {
     return;
   }
 
+  if (!Glow.els.imageCropOverlay?.classList.contains("hidden")) {
+    Glow.profileResetCropState?.();
+    return;
+  }
+
   if (!Glow.els.mediaOverlay?.classList.contains("hidden")) {
     Glow.closeMediaModal?.();
     return;
@@ -841,23 +951,30 @@ document.addEventListener("keydown", event => {
     Glow.calls.ensureState();
     Glow.state.calls.panelOpen = false;
     Glow.els.callOverlay.classList.add("hidden");
+    Glow.persistCallPanelPosition?.();
     return;
   }
 
   if (Glow.state.activeView === "thread") {
+    await Glow.confirmDirtySettingsBeforeNavigate(async () => {
       Glow.returnToChannel?.();
+    });
     return;
   }
 
   if (Glow.state.activeView === "page") {
+    await Glow.confirmDirtySettingsBeforeNavigate(async () => {
       Glow.openPages?.();
+    });
     return;
   }
 
   if (Glow.state.activeView === "dm") {
+    await Glow.confirmDirtySettingsBeforeNavigate(async () => {
       Glow.state.activeView = "dms";
       Glow.updateViewUI();
       Glow.loadDms?.();
+    });
     return;
   }
 
@@ -941,7 +1058,13 @@ setInterval(() => {
   }
 }, 10000);
 
-window.addEventListener("beforeunload", () => {
+window.addEventListener("beforeunload", event => {
+  if (Glow.state.activeView === "settings" && Glow.isSettingsDirty()) {
+    event.preventDefault();
+    event.returnValue = "";
+    return "";
+  }
+
   const sessionId = Glow.state.calls.activeCall?.groupSession?.id;
   if (!sessionId || !navigator.sendBeacon) return;
 
@@ -973,4 +1096,5 @@ Glow.autoResizeComposer();
 Glow.updateMessageCount();
 Glow.autoResizeThreadComposer?.();
 Glow.updateThreadMessageCount?.();
+Glow.state.dmLayoutMode = Glow.loadDmLayoutPreference();
 Glow.checkAuth();