From f163a242792cd325c9414587d52f3d8584f28df1 Mon Sep 17 00:00:00 2001
From: Elizabeth Hunt <elizabeth.hunt@simponic.xyz>
Date: Fri, 3 Jan 2025 01:47:07 -0800
Subject: initial commit

---
 static/js/components/chat.js          | 27 +++++++++++++++++++++++++++
 static/js/components/infoBanners.js   |  6 ++++++
 static/js/components/themeSwitcher.js | 27 +++++++++++++++++++++++++++
 3 files changed, 60 insertions(+)
 create mode 100644 static/js/components/chat.js
 create mode 100644 static/js/components/infoBanners.js
 create mode 100644 static/js/components/themeSwitcher.js

(limited to 'static/js/components')

diff --git a/static/js/components/chat.js b/static/js/components/chat.js
new file mode 100644
index 0000000..8286a37
--- /dev/null
+++ b/static/js/components/chat.js
@@ -0,0 +1,27 @@
+const runChat = async () => {
+  const frenId =
+    new URLSearchParams(document.location.search).get("fren_id") ??
+    document.getElementById("fren_id").value;
+  const html = await fetch(`/chat/messages?fren_id=${frenId}`).then((r) =>
+    r.text(),
+  );
+
+  const { scrollTop, scrollHeight } = document.getElementById(
+    "chat-container",
+  ) ?? { scrollTop: 0 };
+  const isAtEdge = scrollTop === scrollHeight || scrollTop === 0;
+  document.getElementById("messages").innerHTML = html;
+  if (isAtEdge) {
+    document.getElementById("chat-container").scrollTop =
+      document.getElementById("chat-container").scrollHeight;
+  } else {
+    // save the position.
+    document.getElementById("chat-container").scrollTop = scrollTop;
+  }
+};
+
+setTimeout(() => {
+  if (document.location.pathname === "/chat") {
+    runChat().then(() => setInterval(runChat, 5_000));
+  }
+}, 200);
diff --git a/static/js/components/infoBanners.js b/static/js/components/infoBanners.js
new file mode 100644
index 0000000..6a19864
--- /dev/null
+++ b/static/js/components/infoBanners.js
@@ -0,0 +1,6 @@
+const infoBanners = document.querySelectorAll(".info");
+Array.from(infoBanners).forEach((infoBanner) => {
+  infoBanner.addEventListener("click", () => {
+    infoBanner.remove();
+  });
+});
diff --git a/static/js/components/themeSwitcher.js b/static/js/components/themeSwitcher.js
new file mode 100644
index 0000000..e5497f0
--- /dev/null
+++ b/static/js/components/themeSwitcher.js
@@ -0,0 +1,27 @@
+const THEMES = {
+  DARK: "DARK",
+  LIGHT: "LIGHT",
+};
+
+const flipFlopTheme = (theme) =>
+  THEMES[theme] === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;
+
+const themePickerText = {
+  DARK: "light mode.",
+  LIGHT: "dark mode.",
+};
+
+const themeSwitcher = document.getElementById("theme-switcher");
+
+const setTheme = (theme) => {
+  themeSwitcher.textContent = `${themePickerText[theme]}`;
+
+  document.documentElement.setAttribute("data-theme", theme);
+  localStorage.setItem("theme", theme);
+};
+
+themeSwitcher.addEventListener("click", () =>
+  setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))),
+);
+
+setTheme(localStorage.getItem("theme") || THEMES.LIGHT);
-- 
cgit v1.2.3-70-g09d2