put statusbar stuff into... statusbar

public/bundle.js

@@ -1,5 +1,5 @@
 ////
-// version: 8075fac
+// version: 7f31112
 
 // src/js/dom.ts
 var content2 = $("content");
@@ -160,6 +160,22 @@ function handleOutput(msg) {
   addOutput(id, result.output);
 }
 
+// src/js/session.ts
+var sessionId = randomId();
+var sessionStore = new Map;
+function initSession() {}
+function handleSessionStart(msg) {
+  for (const key of Object.keys(msg.data))
+    sessionStore.set(key, msg.data[key] || "");
+  window.dispatchEvent(new CustomEvent("session:update", { detail: msg.data }));
+  mode(msg.data.mode);
+}
+function handleSessionUpdate(msg) {
+  for (const key of Object.keys(msg.data))
+    sessionStore.set(key, msg.data[key] || "");
+  window.dispatchEvent(new CustomEvent("session:update", { detail: msg.data }));
+}
+
 // src/js/webapp.ts
 var apps = [];
 function cacheApps(a) {
@@ -169,56 +185,6 @@ function cacheApps(a) {
   window.dispatchEvent(new CustomEvent("apps:change"));
 }
 
-// src/js/session.ts
-var sessionId = randomId();
-var projectName = $("project-name");
-var projectCwd = $("project-cwd");
-var projectWww = $("project-www");
-var sessionStore = new Map;
-function initSession() {
-  window.addEventListener("apps:change", (e) => updateWww(sessionStore.get("project") || "root"));
-}
-function handleSessionStart(msg) {
-  sessionStore.set("NOSE_DIR", msg.data.NOSE_DIR);
-  sessionStore.set("hostname", msg.data.hostname);
-  updateProjectName(msg.data.project);
-  updateCwd(msg.data.cwd);
-  mode(msg.data.mode);
-}
-function handleSessionUpdate(msg) {
-  const data = msg.data;
-  if (data.project)
-    updateProjectName(data.project);
-  if (data.cwd)
-    updateCwd(data.cwd);
-}
-function updateProjectName(project) {
-  sessionStore.set("project", project);
-  projectName.textContent = project;
-  updateWww(project);
-  updateCwd("/");
-}
-function updateCwd(cwd) {
-  cwd = displayProjectPath(cwd);
-  sessionStore.set("cwd", cwd);
-  projectCwd.textContent = cwd;
-}
-function updateWww(project) {
-  if (!apps.includes(project)) {
-    projectWww.style.display = "none";
-    return;
-  }
-  projectWww.style.display = "";
-  const hostname = sessionStore.get("hostname") || "localhost";
-  const s = hostname.startsWith("localhost") ? "" : "s";
-  projectWww.href = `http${s}://${project}.${hostname}`;
-}
-function displayProjectPath(path) {
-  let prefix = sessionStore.get("NOSE_DIR") || "";
-  prefix += "/" + sessionStore.get("project");
-  return path.replace(prefix, "") || "/";
-}
-
 // src/js/stream.ts
 function handleStreamStart(msg) {
   const id = msg.id;
@@ -1317,6 +1283,51 @@ function resizeCinema() {
   content3.style.transform = `scale(${scale})`;
 }
 
+// src/js/statusbar.ts
+var projectName = $("project-name");
+var projectCwd = $("project-cwd");
+var projectWww = $("project-www");
+var statusbar = $("statusbar");
+var statusbarMsg = $("statusbar-msg");
+function initStatusbar() {
+  registerEvents();
+}
+function registerEvents() {
+  window.addEventListener("apps:change", (e) => updateWww(sessionStore.get("project") || "root"));
+  window.addEventListener("session:update", (e) => {
+    const ev = e;
+    const data = ev.detail;
+    if (data.project)
+      updateProjectName(data.project);
+    if (data.cwd)
+      updateCwd(data.cwd);
+  });
+}
+function updateProjectName(project) {
+  projectName.textContent = project;
+  updateWww(project);
+  updateCwd("/");
+}
+function updateCwd(cwd) {
+  cwd = displayProjectPath(cwd);
+  projectCwd.textContent = cwd;
+}
+function updateWww(project) {
+  if (!apps.includes(project) || project === "root") {
+    projectWww.style.display = "none";
+    return;
+  }
+  projectWww.style.display = "";
+  const hostname = sessionStore.get("hostname") || "localhost";
+  const s = hostname.startsWith("localhost") ? "" : "s";
+  projectWww.href = `http${s}://${project}.${hostname}`;
+}
+function displayProjectPath(path) {
+  let prefix = sessionStore.get("NOSE_DIR") || "";
+  prefix += "/" + sessionStore.get("project");
+  return path.replace(prefix, "") || "/";
+}
+
 // src/js/vram.ts
 var vramCounter = $("vram-size");
 var startVramCounter = () => {
@@ -1347,5 +1358,6 @@ initInput();
 initResize();
 initScrollback();
 initSession();
+initStatusbar();
 startConnection();
 startVramCounter();

src/js/main.ts

@@ -11,6 +11,7 @@ import { initInput } from "./input"
 import { initResize } from "./resize"
 import { initScrollback } from "./scrollback"
 import { initSession } from "./session"
+import { initStatusbar } from "./statusbar"
 import { startVramCounter } from "./vram"
 import { startConnection } from "./websocket"
 
@@ -27,6 +28,7 @@ initInput()
 initResize()
 initScrollback()
 initSession()
+initStatusbar()
 
 startConnection()
 startVramCounter()

src/js/session.ts

@@ -4,68 +4,25 @@
 
 import type { SessionStartMessage, SessionUpdateMessage } from "@/shared/types"
 import { randomId } from "../shared/utils"
-import { apps } from "./webapp"
-import { $ } from "./dom"
 import { mode } from "./commands"
 
 export const sessionId = randomId()
-export const projectName = $("project-name") as HTMLAnchorElement
-export const projectCwd = $("project-cwd") as HTMLAnchorElement
-export const projectWww = $("project-www") as HTMLAnchorElement
 export const sessionStore = new Map<string, string>()
 
-export function initSession() {
+export function initSession() { }
-    window.addEventListener("apps:change", e =>
-        updateWww(sessionStore.get("project") || "root")
-    )
-}
 
 export function handleSessionStart(msg: SessionStartMessage) {
-    sessionStore.set("NOSE_DIR", msg.data.NOSE_DIR)
+    for (const key of Object.keys(msg.data))
-    sessionStore.set("hostname", msg.data.hostname)
+        sessionStore.set(key, (msg.data as any)[key] || "")
-    updateProjectName(msg.data.project)
+
-    updateCwd(msg.data.cwd)
+    window.dispatchEvent(new CustomEvent("session:update", { detail: msg.data }))
+
     mode(msg.data.mode)
 }
 
 export function handleSessionUpdate(msg: SessionUpdateMessage) {
-    const data = msg.data as Record<string, string>
+    for (const key of Object.keys(msg.data))
+        sessionStore.set(key, msg.data[key] || "")
 
-    if (data.project)
+    window.dispatchEvent(new CustomEvent("session:update", { detail: msg.data }))
-        updateProjectName(data.project)
-
-    if (data.cwd)
-        updateCwd(data.cwd)
-}
-
-function updateProjectName(project: string) {
-    sessionStore.set("project", project)
-    projectName.textContent = project
-    updateWww(project)
-    updateCwd("/")
-}
-
-function updateCwd(cwd: string) {
-    cwd = displayProjectPath(cwd)
-    sessionStore.set("cwd", cwd)
-    projectCwd.textContent = cwd
-}
-
-function updateWww(project: string) {
-    if (!apps.includes(project)) {
-        projectWww.style.display = "none"
-        return
-    }
-
-    projectWww.style.display = ""
-    const hostname = sessionStore.get("hostname") || "localhost"
-    const s = hostname.startsWith("localhost") ? "" : "s"
-    projectWww.href = `http${s}://${project}.${hostname}`
-}
-
-function displayProjectPath(path: string): string {
-    let prefix = sessionStore.get("NOSE_DIR") || ""
-    prefix += "/" + sessionStore.get("project")
-
-    return path.replace(prefix, "") || "/"
 }

src/js/statusbar.ts

@@ -2,14 +2,41 @@
 // Temporarily display a message to the user in the status bar.
 
 import { $ } from "./dom"
+import { sessionStore } from "./session"
+import { apps } from "./webapp"
 
-const STATUS_MSG_LENGTH = 3000
+export const projectName = $("project-name") as HTMLAnchorElement
+export const projectCwd = $("project-cwd") as HTMLAnchorElement
+export const projectWww = $("project-www") as HTMLAnchorElement
 
 const statusbar = $("statusbar") as HTMLDivElement
 const statusbarMsg = $("statusbar-msg") as HTMLSpanElement
 
+const STATUS_MSG_LENGTH = 3000
+
 let timer: NodeJS.Timeout
 
+export function initStatusbar() {
+  registerEvents()
+}
+
+function registerEvents() {
+  window.addEventListener("apps:change", e =>
+    updateWww(sessionStore.get("project") || "root")
+  )
+
+  window.addEventListener("session:update", (e) => {
+    const ev = e as CustomEvent
+    const data = ev.detail
+
+    if (data.project)
+      updateProjectName(data.project)
+
+    if (data.cwd)
+      updateCwd(data.cwd)
+  })
+}
+
 export function status(msg: string) {
   showStatusMsg()
   statusbarMsg.textContent = msg
@@ -25,3 +52,33 @@ function showStatusMsg() {
 function hideStatusMsg() {
   statusbar.className = ""
 }
+
+function updateProjectName(project: string) {
+  projectName.textContent = project
+  updateWww(project)
+  updateCwd("/")
+}
+
+function updateCwd(cwd: string) {
+  cwd = displayProjectPath(cwd)
+  projectCwd.textContent = cwd
+}
+
+function updateWww(project: string) {
+  if (!apps.includes(project) || project === "root") {
+    projectWww.style.display = "none"
+    return
+  }
+
+  projectWww.style.display = ""
+  const hostname = sessionStore.get("hostname") || "localhost"
+  const s = hostname.startsWith("localhost") ? "" : "s"
+  projectWww.href = `http${s}://${project}.${hostname}`
+}
+
+function displayProjectPath(path: string): string {
+  let prefix = sessionStore.get("NOSE_DIR") || ""
+  prefix += "/" + sessionStore.get("project")
+
+  return path.replace(prefix, "") || "/"
+}