make the command line a bit more accessible by including a :| icon at the bottom

also add a few extra commands for navigating around the house

static/js/command-line.js

@@ -26,12 +26,10 @@ export class CommandLine extends HTMLElement {
             }
         });
 
-        window.addEventListener("click", () => {
-            this.hide();
-        });
-
-        this.addEventListener("click", (event) => {
-            event.stopPropagation();
+        window.addEventListener("click", (event) => {
+            if (!this.contains(event.target)) {
+                this.hide();
+            }
         });
 
         this.input.addEventListener("keydown", (event) => {
@@ -71,6 +69,7 @@ export class CommandLine extends HTMLElement {
     tab(current, next) {
         current?.classList?.remove("tabbed");
         next.classList.add("tabbed");
+        next.scrollIntoView();
 
         this.input.value = next.name;
         // NOTE: Do NOT update suggestions here.
@@ -94,13 +93,20 @@ export class CommandLine extends HTMLElement {
     updateSuggestions() {
         let search = parseCommand(this.input.value)?.command ?? "";
         let suggestions = Array.from(CommandLine.commands.entries()).filter(
-            ([name, def]) => !def.isAlias && fuzzyMatch(search, name),
+            ([name, def]) =>
+                !def.isAlias &&
+                (def.showInSuggestions?.(this.input.value) ?? true) &&
+                fuzzyMatch(search, name),
         );
         suggestions.sort();
 
         this.suggestions.replaceChildren();
         for (let [name, def] of suggestions) {
             let suggestion = this.suggestions.appendChild(document.createElement("li"));
+            if (def.immediate) {
+                suggestion.classList.add("immediate");
+            }
+
             let commandName = suggestion.appendChild(document.createElement("dfn"));
             commandName.textContent = name;
             let commandDescription = suggestion.appendChild(document.createElement("span"));
@@ -110,10 +116,17 @@ export class CommandLine extends HTMLElement {
             suggestion.name = name;
             suggestion.def = def;
 
-            suggestion.addEventListener("click", () => {
-                this.input.value = name;
-                this.updateSuggestions();
-                this.input.focus();
+            suggestion.addEventListener("click", (event) => {
+                event.stopPropagation();
+
+                if (def.immediate) {
+                    this.hide();
+                    this.runCommand(name);
+                } else {
+                    this.input.value = name + " ";
+                    this.updateSuggestions();
+                    this.input.focus();
+                }
             });
         }
     }
@@ -128,11 +141,13 @@ export class CommandLine extends HTMLElement {
         }
     }
 
-    static registerCommand({ aliases, description, run }) {
+    static registerCommand({ aliases, description, immediate, showInSuggestions, run }) {
         for (let i = 0; i < aliases.length; ++i) {
             CommandLine.commands.set(aliases[i], {
                 isAlias: i != 0,
                 description,
+                immediate,
+                showInSuggestions,
                 run,
             });
         }
@@ -168,7 +183,43 @@ function fuzzyMatch(pattern, string) {
 CommandLine.registerCommand({
     aliases: ["help", "h"],
     description: '"OwO, what is this?"',
+    immediate: true,
+
     run() {
         window.location = `${TREEHOUSE_SITE}/treehouse/cmd`;
     },
 });
+
+CommandLine.registerCommand({
+    aliases: ["new", "n"],
+    description: "go to news feed",
+    immediate: true,
+
+    run() {
+        window.location = `${TREEHOUSE_SITE}/treehouse/new`;
+    },
+});
+
+CommandLine.registerCommand({
+    aliases: ["index", "i", "-w-"],
+    description: "go home",
+    immediate: true,
+
+    run() {
+        window.location = `${TREEHOUSE_SITE}/`;
+    },
+});
+
+CommandLine.registerCommand({
+    aliases: ["quit", "exit", "q", "q!", "wq", "wq!", "wqa", "wqa!", "bc", "bc!", "bca", "bca!"],
+    description: "quit liquidex's treehouse (congration!)",
+    // non-immediate because this is a destructive action
+
+    showInSuggestions(commandLine) {
+        return commandLine.length >= 1;
+    },
+
+    run() {
+        window.location = `${TREEHOUSE_SITE}/treehouse/quit`;
+    },
+});

static/js/dev/picture-upload.js

@@ -155,8 +155,10 @@ function formatSizeSI(bytes) {
 
 if (TREEHOUSE_DEV) {
     CommandLine.registerCommand({
-        aliases: ["addpic"],
+        aliases: ["add-pic"],
         description: "add a picture interactively and copy its ulid",
+        immediate: true,
+
         run() {
             let dialog = document.body.appendChild(document.createElement("dialog"));
             dialog.addEventListener("keydown", (event) => {