PlugOS refactor and other tweaks (#631)

* Prep for in-process plug loading (e.g. for CF workers, Deno Deploy)
* Prototype of fixed in-process loading plugs
* Fix: buttons not to scroll with content
* Better positioning of modal especially on mobile
* Move query caching outside query
* Fix annoying mouse behavior when filter box appears
* Page navigator search tweaks

web/components/basic_modals.tsx

@@ -19,43 +19,41 @@ export function Prompt({
 }) {
   const [text, setText] = useState(defaultValue || "");
   const returnEl = (
-    <div className="sb-modal-wrapper">
-      <div className="sb-modal-box">
-        <div className="sb-prompt">
-          <label>{message}</label>
-          <MiniEditor
-            text={defaultValue || ""}
-            vimMode={vimMode}
-            vimStartInInsertMode={true}
-            focus={true}
-            darkMode={darkMode}
-            completer={completer}
-            onEnter={(text) => {
-              callback(text);
-              return true;
-            }}
-            onEscape={() => {
-              callback();
-            }}
-            onChange={(text) => {
-              setText(text);
-            }}
-          />
-          <button
-            onClick={() => {
-              callback(text);
-            }}
-          >
-            Ok
-          </button>
-          <button
-            onClick={() => {
-              callback();
-            }}
-          >
-            Cancel
-          </button>
-        </div>
+    <div className="sb-modal-box">
+      <div className="sb-prompt">
+        <label>{message}</label>
+        <MiniEditor
+          text={defaultValue || ""}
+          vimMode={vimMode}
+          vimStartInInsertMode={true}
+          focus={true}
+          darkMode={darkMode}
+          completer={completer}
+          onEnter={(text) => {
+            callback(text);
+            return true;
+          }}
+          onEscape={() => {
+            callback();
+          }}
+          onChange={(text) => {
+            setText(text);
+          }}
+        />
+        <button
+          onClick={() => {
+            callback(text);
+          }}
+        >
+          Ok
+        </button>
+        <button
+          onClick={() => {
+            callback();
+          }}
+        >
+          Cancel
+        </button>
       </div>
     </div>
   );

web/components/filter.tsx

@@ -95,115 +95,115 @@ export function FilterList({
   }, []);
 
   const returnEl = (
-    <div className="sb-modal-wrapper">
-      <div className="sb-modal-box">
-        <div
-          className="sb-header"
-          onClick={(e) => {
-            // Allow tapping/clicking the header without closing it
-            e.stopPropagation();
+    <div className="sb-modal-box">
+      <div
+        className="sb-header"
+        onClick={(e) => {
+          // Allow tapping/clicking the header without closing it
+          e.stopPropagation();
+        }}
+      >
+        <label>{label}</label>
+        <MiniEditor
+          text={text}
+          vimMode={vimMode}
+          vimStartInInsertMode={true}
+          focus={true}
+          darkMode={darkMode}
+          completer={completer}
+          placeholderText={placeholder}
+          onEnter={(_newText, shiftDown) => {
+            onSelect(
+              shiftDown ? { name: text } : matchingOptions[selectedOption],
+            );
+            return true;
           }}
-        >
-          <label>{label}</label>
-          <MiniEditor
-            text={text}
-            vimMode={vimMode}
-            vimStartInInsertMode={true}
-            focus={true}
-            darkMode={darkMode}
-            completer={completer}
-            placeholderText={placeholder}
-            onEnter={(_newText, shiftDown) => {
-              onSelect(
-                shiftDown ? { name: text } : matchingOptions[selectedOption],
-              );
-              return true;
-            }}
-            onEscape={() => {
-              onSelect(undefined);
-            }}
-            onChange={(text) => {
-              setText(text);
-            }}
-            onKeyUp={(view, e) => {
-              // This event is triggered after the key has been processed by CM already
-              if (onKeyPress) {
-                onKeyPress(e.key, view.state.sliceDoc());
-              }
-              return false;
-            }}
-            onKeyDown={(view, e) => {
-              switch (e.key) {
-                case "ArrowUp":
-                  setSelectionOption(Math.max(0, selectedOption - 1));
+          onEscape={() => {
+            onSelect(undefined);
+          }}
+          onChange={(text) => {
+            setText(text);
+          }}
+          onKeyUp={(view, e) => {
+            // This event is triggered after the key has been processed by CM already
+            if (onKeyPress) {
+              onKeyPress(e.key, view.state.sliceDoc());
+            }
+            return false;
+          }}
+          onKeyDown={(view, e) => {
+            switch (e.key) {
+              case "ArrowUp":
+                setSelectionOption(Math.max(0, selectedOption - 1));
+                return true;
+              case "ArrowDown":
+                setSelectionOption(
+                  Math.min(matchingOptions.length - 1, selectedOption + 1),
+                );
+                return true;
+              case "PageUp":
+                setSelectionOption(Math.max(0, selectedOption - 5));
+                return true;
+              case "PageDown":
+                setSelectionOption(Math.max(0, selectedOption + 5));
+                return true;
+              case "Home":
+                setSelectionOption(0);
+                return true;
+              case "End":
+                setSelectionOption(matchingOptions.length - 1);
+                return true;
+              case " ": {
+                const text = view.state.sliceDoc();
+                if (completePrefix && text === "") {
+                  setText(completePrefix);
+                  // updateFilter(completePrefix);
                   return true;
-                case "ArrowDown":
-                  setSelectionOption(
-                    Math.min(matchingOptions.length - 1, selectedOption + 1),
-                  );
-                  return true;
-                case "PageUp":
-                  setSelectionOption(Math.max(0, selectedOption - 5));
-                  return true;
-                case "PageDown":
-                  setSelectionOption(Math.max(0, selectedOption + 5));
-                  return true;
-                case "Home":
-                  setSelectionOption(0);
-                  return true;
-                case "End":
-                  setSelectionOption(matchingOptions.length - 1);
-                  return true;
-                case " ": {
-                  const text = view.state.sliceDoc();
-                  if (completePrefix && text === "") {
-                    setText(completePrefix);
-                    // updateFilter(completePrefix);
-                    return true;
-                  }
-                  break;
                 }
+                break;
               }
-              return false;
-            }}
-          />
-        </div>
-        <div
-          className="sb-help-text"
-          dangerouslySetInnerHTML={{ __html: helpText }}
-        >
-        </div>
-        <div className="sb-result-list">
-          {matchingOptions && matchingOptions.length > 0
-            ? matchingOptions.map((option, idx) => (
-              <div
-                key={"" + idx}
-                ref={selectedOption === idx ? selectedElementRef : undefined}
-                className={selectedOption === idx
-                  ? "sb-selected-option"
-                  : "sb-option"}
-                onMouseOver={(e) => {
+            }
+            return false;
+          }}
+        />
+      </div>
+      <div
+        className="sb-help-text"
+        dangerouslySetInnerHTML={{ __html: helpText }}
+      >
+      </div>
+      <div className="sb-result-list">
+        {matchingOptions && matchingOptions.length > 0
+          ? matchingOptions.map((option, idx) => (
+            <div
+              key={"" + idx}
+              ref={selectedOption === idx ? selectedElementRef : undefined}
+              className={selectedOption === idx
+                ? "sb-selected-option"
+                : "sb-option"}
+              onMouseMove={(e) => {
+                if (selectedOption !== idx) {
                   setSelectionOption(idx);
-                }}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onSelect(option);
-                }}
-              >
-                {Icon && (
-                  <span className="sb-icon">
-                    <Icon width={16} height={16} />
-                  </span>
-                )}
-                <span className="sb-name">
-                  {option.name}
+                }
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelect(option);
+              }}
+            >
+              {Icon && (
+                <span className="sb-icon">
+                  <Icon width={16} height={16} />
                 </span>
-                {option.hint && <span className="sb-hint">{option.hint}</span>}
-                <div className="sb-description">{option.description}</div>
-              </div>
-            ))
-            : null}
-        </div>
+              )}
+              <span className="sb-name">
+                {option.name}
+              </span>
+              {option.hint && <span className="sb-hint">{option.hint}</span>}
+              <div className="sb-description">{option.description}</div>
+            </div>
+          ))
+          : null}
       </div>
     </div>
   );

web/components/fuse_search.ts

@@ -28,17 +28,18 @@ export const fuzzySearchAndSort = (
       weight: 0.3,
     }, {
       name: "baseName",
-      weight: 0.7,
+      weight: 1,
     }, {
       name: "displayName",
-      weight: 0.3,
+      weight: 0.7,
     }, {
       name: "aliases",
-      weight: 0.7,
+      weight: 0.5,
     }],
     includeScore: true,
     shouldSort: true,
     isCaseSensitive: false,
+    ignoreLocation: true,
     threshold: 0.6,
     sortFn: (a, b): number => {
       if (a.score === b.score) {

web/components/top_bar.tsx

@@ -142,8 +142,8 @@ export function TopBar({
                   <button
                     onClick={(e) => {
                       e.preventDefault();
-                      actionButton.callback();
                       e.stopPropagation();
+                      actionButton.callback();
                     }}
                     title={actionButton.description}
                     className={actionButton.class}