Clean up filter boxes

packages/web/components/filter.tsx

@@ -89,7 +89,7 @@ export function FilterList({
   function updateFilter(originalPhrase: string) {
     let foundExactMatch = false;
     let results = fuzzySorter(originalPhrase, options);
-    if (allowNew && !foundExactMatch) {
+    if (allowNew && !foundExactMatch && originalPhrase) {
       results.push({
         name: originalPhrase,
         hint: newHint,
@@ -121,6 +121,8 @@ export function FilterList({
     };
   }, []);
 
+  let exiting = false;
+
   const returnEl = (
     <div className="filter-wrapper">
       <div className="filter-box">
@@ -133,7 +135,9 @@ export function FilterList({
             ref={searchBoxRef}
             onChange={filterUpdate}
             onBlur={(e) => {
+              if (!exiting) {
                 searchBoxRef.current!.focus();
+              }
             }}
             onKeyDown={(e: React.KeyboardEvent) => {
               // console.log("Key up", e);
@@ -150,10 +154,24 @@ export function FilterList({
                   );
                   break;
                 case "Enter":
+                  exiting = true;
                   onSelect(matchingOptions[selectedOption]);
                   e.preventDefault();
                   break;
+                case "PageUp":
+                  setSelectionOption(Math.max(0, selectedOption - 5));
+                  break;
+                case "PageDown":
+                  setSelectionOption(Math.max(0, selectedOption + 5));
+                  break;
+                case "Home":
+                  setSelectionOption(0);
+                  break;
+                case "End":
+                  setSelectionOption(matchingOptions.length - 1);
+                  break;
                 case "Escape":
+                  exiting = true;
                   onSelect(undefined);
                   break;
                 case " ":

packages/web/styles/filter_box.scss

@@ -10,7 +10,7 @@
   top: 0;
   bottom: 0;
   max-height: 290px;
-  overflow: hide;
+  // overflow: hide;
   z-index: 100;
 }
 
@@ -19,7 +19,8 @@
   background-color: #fff;
   border: rgb(103, 103, 103) 1px solid;
   border-radius: 8px;
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 20px;
+  overflow: hidden;
   margin: 10px;
 
   .header {
@@ -55,7 +56,7 @@
   }
 
   .result-list {
-    max-height: 200px;
+    max-height: 216px;
     overflow-y: scroll;
 
     .icon {
@@ -70,11 +71,14 @@
   .selected-option {
     padding: 8px;
     cursor: pointer;
+    height: 20px;
+    line-height: 20px;
   }
 
   .selected-option {
     background-color: var(--highlight-color);
     color: #eee;
+    // border-radius: 5px;
   }
 
   .option .hint,

website/CHANGELOG.md

@@ -5,4 +5,10 @@ An attempt at documenting of the changes/new features introduced in each (pre) r
   * Plugs can implement their own unfurlers by responding to the `unfurl:options` event (see the [Twitter plug](https://github.com/silverbulletmd/silverbullet-twitter) for an example).
   * Core implements only one unfurl option: “Extract title” which pulls the `<title>` tag from the linked URL and replaces it with a `[bla](URL)` style link.
 * Removed status bar: to further simplify the SB UI. You can still pull up the same stat on demand with the `Stats: Show` command.
+* The page switcher is now maintaining its ordering based on, in order:
+  1. Last opened pages (in current session)
+  2. Last modified date (on disk)
+  3. Everything else
+  4. The currently open page (at the bottom)
+* Filter boxes (used for the page switching and command palette among other things) now also support PgUp, PgDown, Home and End and have some visual glitches fixed as well.
 * Reverted exposing an empty `window` object to sandboxes running in workers and node.js (introduced in 0.0.28)