Moving everything into a single repo and build

webapp/components/command_palette.tsx

@@ -0,0 +1,39 @@
+import { AppCommand } from "../types";
+import { isMacLike } from "../util";
+import { FilterList, Option } from "./filter";
+import { faPersonRunning } from "@fortawesome/free-solid-svg-icons";
+
+export function CommandPalette({
+  commands,
+  onTrigger,
+}: {
+  commands: Map<string, AppCommand>;
+  onTrigger: (command: AppCommand | undefined) => void;
+}) {
+  let options: Option[] = [];
+  const isMac = isMacLike();
+  for (let [name, def] of commands.entries()) {
+    options.push({
+      name: name,
+      hint: isMac && def.command.mac ? def.command.mac : def.command.key,
+    });
+  }
+  console.log("Commands", options);
+  return (
+    <FilterList
+      label="Run"
+      placeholder="Command"
+      options={options}
+      allowNew={false}
+      icon={faPersonRunning}
+      helpText="Start typing the command name to filter results, press <code>Return</code> to run."
+      onSelect={(opt) => {
+        if (opt) {
+          onTrigger(commands.get(opt.name));
+        } else {
+          onTrigger(undefined);
+        }
+      }}
+    />
+  );
+}

webapp/components/filter.tsx

@@ -0,0 +1,167 @@
+import React, { useEffect, useRef, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+
+export interface Option {
+  name: string;
+  orderId?: number;
+  hint?: string;
+}
+
+function magicSorter(a: Option, b: Option): number {
+  if (a.orderId && b.orderId) {
+    return a.orderId < b.orderId ? -1 : 1;
+  }
+  return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+}
+
+export function FilterList({
+  placeholder,
+  options,
+  label,
+  onSelect,
+  onKeyPress,
+  allowNew = false,
+  helpText = "",
+  icon,
+  newHint,
+}: {
+  placeholder: string;
+  options: Option[];
+  label: string;
+  onKeyPress?: (key: string, currentText: string) => void;
+  onSelect: (option: Option | undefined) => void;
+  allowNew?: boolean;
+  helpText: string;
+  newHint?: string;
+  icon?: IconDefinition;
+}) {
+  const searchBoxRef = useRef<HTMLInputElement>(null);
+  const [text, setText] = useState("");
+  const [matchingOptions, setMatchingOptions] = useState(
+    options.sort(magicSorter)
+  );
+  const [selectedOption, setSelectionOption] = useState(0);
+
+  let selectedElementRef = useRef<HTMLDivElement>(null);
+
+  const filter = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const originalPhrase = e.target.value;
+    const searchPhrase = originalPhrase.toLowerCase();
+
+    if (searchPhrase) {
+      let foundExactMatch = false;
+      let results = options.filter((option) => {
+        if (option.name.toLowerCase() === searchPhrase) {
+          foundExactMatch = true;
+        }
+        return option.name.toLowerCase().indexOf(searchPhrase) !== -1;
+      });
+      results = results.sort(magicSorter);
+      if (allowNew && !foundExactMatch) {
+        results.push({
+          name: originalPhrase,
+          hint: newHint,
+        });
+      }
+      setMatchingOptions(results);
+    } else {
+      let results = options.sort(magicSorter);
+      setMatchingOptions(results);
+    }
+
+    setText(originalPhrase);
+    setSelectionOption(0);
+  };
+
+  useEffect(() => {
+    searchBoxRef.current!.focus();
+  }, []);
+
+  useEffect(() => {
+    function closer() {
+      onSelect(undefined);
+    }
+    document.addEventListener("click", closer);
+
+    return () => {
+      document.removeEventListener("click", closer);
+    };
+  }, []);
+
+  const returnEl = (
+    <div className="filter-box">
+      <div className="header">
+        <label>{label}</label>
+        <input
+          type="text"
+          value={text}
+          placeholder={placeholder}
+          ref={searchBoxRef}
+          onChange={filter}
+          onKeyDown={(e: React.KeyboardEvent) => {
+            // console.log("Key up", e.key);
+            if (onKeyPress) {
+              onKeyPress(e.key, text);
+            }
+            switch (e.key) {
+              case "ArrowUp":
+                setSelectionOption(Math.max(0, selectedOption - 1));
+                break;
+              case "ArrowDown":
+                setSelectionOption(
+                  Math.min(matchingOptions.length - 1, selectedOption + 1)
+                );
+                break;
+              case "Enter":
+                onSelect(matchingOptions[selectedOption]);
+                e.preventDefault();
+                break;
+              case "Escape":
+                onSelect(undefined);
+                break;
+            }
+          }}
+        />
+      </div>
+      <div
+        className="help-text"
+        dangerouslySetInnerHTML={{ __html: helpText }}
+      ></div>
+      <div className="result-list">
+        {matchingOptions && matchingOptions.length > 0
+          ? matchingOptions.map((option, idx) => (
+              <div
+                key={"" + idx}
+                ref={selectedOption === idx ? selectedElementRef : undefined}
+                className={
+                  selectedOption === idx ? "selected-option" : "option"
+                }
+                onMouseOver={(e) => {
+                  setSelectionOption(idx);
+                }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onSelect(option);
+                }}
+              >
+                <span className="icon">
+                  {icon && <FontAwesomeIcon icon={icon} />}
+                </span>
+                <span className="name">{option.name}</span>
+                {option.hint && <span className="hint">{option.hint}</span>}
+              </div>
+            ))
+          : null}
+      </div>
+    </div>
+  );
+
+  useEffect(() => {
+    selectedElementRef.current?.scrollIntoView({
+      block: "nearest",
+    });
+  });
+
+  return returnEl;
+}

webapp/components/page_navigator.tsx

@@ -0,0 +1,44 @@
+import { PageMeta } from "../types";
+import { FilterList, Option } from "./filter";
+import { faFileLines } from "@fortawesome/free-solid-svg-icons";
+
+export function PageNavigator({
+  allPages,
+  onNavigate,
+  currentPage,
+}: {
+  allPages: Set<PageMeta>;
+  onNavigate: (page: string | undefined) => void;
+  currentPage?: string;
+}) {
+  let options: Option[] = [];
+  for (let pageMeta of allPages) {
+    if (currentPage && currentPage === pageMeta.name) {
+      continue;
+    }
+    // Order by last modified date in descending order
+    let orderId = -pageMeta.lastModified;
+    // Unless it was opened and is still in memory
+    if (pageMeta.lastOpened) {
+      orderId = -pageMeta.lastOpened;
+    }
+    options.push({
+      ...pageMeta,
+      orderId: orderId,
+    });
+  }
+  return (
+    <FilterList
+      placeholder="Page"
+      label="Open"
+      options={options}
+      icon={faFileLines}
+      allowNew={true}
+      helpText="Start typing the page name to filter results, press <code>Return</code> to open."
+      newHint="Create page"
+      onSelect={(opt) => {
+        onNavigate(opt?.name);
+      }}
+    />
+  );
+}

webapp/components/status_bar.tsx

@@ -0,0 +1,17 @@
+import { EditorView } from "@codemirror/view";
+import * as util from "../util";
+
+export function StatusBar({ editorView }: { editorView?: EditorView }) {
+  let wordCount = 0,
+    readingTime = 0;
+  if (editorView) {
+    let text = editorView.state.sliceDoc();
+    wordCount = util.countWords(text);
+    readingTime = util.readingTime(wordCount);
+  }
+  return (
+    <div id="bottom">
+      {wordCount} words | {readingTime} min
+    </div>
+  );
+}

webapp/components/top_bar.tsx

@@ -0,0 +1,39 @@
+import { AppViewState, PageMeta } from "../types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileLines } from "@fortawesome/free-solid-svg-icons";
+import { Notification } from "../types";
+
+function prettyName(s: string | undefined): string {
+  if (!s) {
+    return "";
+  }
+  return s.replaceAll("/", " / ");
+}
+
+export function TopBar({
+  pageName,
+  status,
+  notifications,
+  onClick,
+}: {
+  pageName?: string;
+  status?: string;
+  notifications: Notification[];
+  onClick: () => void;
+}) {
+  return (
+    <div id="top" onClick={onClick}>
+      <div className="inner">
+        <span className="icon">
+          <FontAwesomeIcon icon={faFileLines} />
+        </span>
+        <span className="current-page">{prettyName(pageName)}</span>
+        <div className="status">
+          {notifications.map((notification) => (
+            <div key={notification.id}>{notification.message}</div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}