statusbar message

public/bundle.js

@@ -1,5 +1,5 @@
 ////
-// version: 66c75ff
+// version: 7d7febe
 
 // src/js/dom.ts
 var content2 = $("content");
@@ -1058,6 +1058,25 @@ async function runCommand(input) {
   }
 }
 
+// src/js/statusbar.ts
+var STATUS_MSG_LENGTH = 3000;
+var statusbar = $("statusbar");
+var statusbarMsg = $("statusbar-msg");
+var timer;
+function status(msg) {
+  showStatusMsg();
+  statusbarMsg.textContent = msg;
+  if (timer)
+    clearTimeout(timer);
+  timer = setTimeout(hideStatusMsg, STATUS_MSG_LENGTH);
+}
+function showStatusMsg() {
+  statusbar.classList.add("showing-msg");
+}
+function hideStatusMsg() {
+  statusbar.className = "";
+}
+
 // src/js/hyperlink.ts
 function initHyperlink() {
   window.addEventListener("click", handleClick);
@@ -1076,6 +1095,9 @@ async function handleClick(e) {
     e.preventDefault();
     await runCommand(href.slice(1));
     focusInput();
+  } else {
+    e.preventDefault();
+    status(href);
   }
 }
 
@@ -1133,7 +1155,7 @@ function clearInput() {
 // src/js/vram.ts
 var vramCounter = $("vram-size");
 var startVramCounter = () => {
-  const timer = setInterval(() => {
+  const timer2 = setInterval(() => {
     const count = parseInt(vramCounter.textContent) + 1;
     let val = count + "KB";
     if (count < 10)
@@ -1141,7 +1163,7 @@ var startVramCounter = () => {
     vramCounter.textContent = val;
     if (count >= 64) {
       vramCounter.textContent += " OK";
-      clearInterval(timer);
+      clearInterval(timer2);
     }
   }, 15);
 };

src/css/terminal.css

@@ -162,7 +162,7 @@
     white-space: pre-wrap;
 }
 
-#statusline {
+#statusbar {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -177,7 +177,24 @@
     justify-content: space-between;
 }
 
-#statusline a {
+#statusbar .line-msg {
+    display: none;
+}
+
+#statusbar.showing-msg .line-cwd {
+    display: none;
+}
+
+#statusbar.showing-msg {
+    background: var(--purple);
+}
+
+#statusbar.showing-msg .line-msg {
+    color: var(--cyan);
+    display: inherit;
+}
+
+#statusbar a {
     color: inherit;
     text-decoration: none;
 }

src/html/terminal.tsx

@@ -35,6 +35,9 @@ export const Terminal: FC = async () => (
       <li class="center">VRAM <span id="vram-size">000KB</span></li>
     </ul>
 
-    <div id="statusline"><div><a href="#projects" id="project-name">root</a>: <a href="#ls" id="project-cwd">/</a></div></div>
+    <div id="statusbar">
+      <div class="line-cwd"><a href="#projects" id="project-name">root</a>: <a href="#ls" id="project-cwd">/</a></div>
+      <div class="line-msg"><span id="statusbar-msg"></span></div>
+    </div>
   </>
 )

src/js/hyperlink.ts

@@ -1,5 +1,6 @@
 import { runCommand } from "./shell"
 import { focusInput } from "./focus"
+import { status } from "./statusbar"
 
 export function initHyperlink() {
   window.addEventListener("click", handleClick)
@@ -20,5 +21,8 @@ async function handleClick(e: MouseEvent) {
     e.preventDefault()
     await runCommand(href.slice(1))
     focusInput()
+  } else {
+    e.preventDefault()
+    status(href)
   }
 }

src/js/statusbar.ts

@@ -0,0 +1,27 @@
+////
+// Temporarily display a message to the user in the status bar.
+
+import { $ } from "./dom"
+
+const STATUS_MSG_LENGTH = 3000
+
+const statusbar = $("statusbar") as HTMLDivElement
+const statusbarMsg = $("statusbar-msg") as HTMLSpanElement
+
+let timer: NodeJS.Timeout
+
+export function status(msg: string) {
+  showStatusMsg()
+  statusbarMsg.textContent = msg
+
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(hideStatusMsg, STATUS_MSG_LENGTH)
+}
+
+function showStatusMsg() {
+  statusbar.classList.add("showing-msg")
+}
+
+function hideStatusMsg() {
+  statusbar.className = ""
+}