Live Preview (#119)

Live preview mode is here

web/components/filter.tsx

@@ -135,7 +135,7 @@ export function FilterList({
                 searchBoxRef.current!.focus();
               }
             }}
-            onKeyDown={(e) => {
+            onKeyUp={(e) => {
               // console.log("Key up", / e);
               if (onKeyPress) {
                 onKeyPress(e.key, text);
@@ -178,12 +178,13 @@ export function FilterList({
                   }
                   break;
                 default:
-                  setTimeout(() => {
-                    updateFilter((e.target as any).value);
-                  });
+                  updateFilter((e.target as any).value);
               }
               e.stopPropagation();
             }}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+            }}
             onClick={(e) => e.stopPropagation()}
           />
         </div>

web/components/top_bar.tsx

@@ -1,14 +1,13 @@
 // import { Fragment, h } from "../deps.ts";
 
-import {
-  faHome,
-  faMoon,
-  faRunning,
-  faSun,
-} from "https://esm.sh/@fortawesome/free-solid-svg-icons@6.2.0";
-import { FontAwesomeIcon } from "../deps.ts";
+import { FontAwesomeIcon, useRef } from "../deps.ts";
 
-import { ComponentChildren, useState } from "../deps.ts";
+import {
+  ComponentChildren,
+  IconDefinition,
+  useEffect,
+  useState,
+} from "../deps.ts";
 import { Notification } from "../types.ts";
 import { isMacLike } from "../../common/util.ts";
 
@@ -19,15 +18,19 @@ function prettyName(s: string | undefined): string {
   return s.replaceAll("/", " / ");
 }
 
+export type ActionButton = {
+  icon: IconDefinition;
+  description: string;
+  callback: () => void;
+};
+
 export function TopBar({
   pageName,
   unsavedChanges,
   isLoading,
   notifications,
-  onClick,
-  onThemeClick,
-  onHomeClick,
-  onActionClick,
+  onRename,
+  actionButtons,
   lhs,
   rhs,
 }: {
@@ -35,19 +38,17 @@ export function TopBar({
   unsavedChanges: boolean;
   isLoading: boolean;
   notifications: Notification[];
-  onClick: () => void;
-  onThemeClick: () => void;
-  onHomeClick: () => void;
-  onActionClick: () => void;
+  onRename: (newName: string) => void;
+  actionButtons: ActionButton[];
   lhs?: ComponentChildren;
   rhs?: ComponentChildren;
 }) {
   const [theme, setTheme] = useState<string>(localStorage.theme ?? "light");
-
+  const inputRef = useRef<HTMLInputElement>(null);
   const isMac = isMacLike();
 
   return (
-    <div id="sb-top" onClick={onClick}>
+    <div id="sb-top">
       {lhs}
       <div className="main">
         <div className="inner">
@@ -60,7 +61,21 @@ export function TopBar({
                 : "sb-saved"
             }`}
           >
-            {prettyName(pageName)}
+            <input
+              type="text"
+              ref={inputRef}
+              value={pageName}
+              className="sb-edit-page-name"
+              onKeyDown={(e) => {
+                console.log("Key press", e);
+                e.stopPropagation();
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  const newName = (e.target as any).value;
+                  onRename(newName);
+                }
+              }}
+            />
           </span>
           {notifications.length > 0 && (
             <div className="sb-notifications">
@@ -75,35 +90,17 @@ export function TopBar({
             </div>
           )}
           <div className="sb-actions">
-            <button
-              onClick={(e) => {
-                onHomeClick();
-                e.stopPropagation();
-              }}
-              title="Navigate to the 'index' page"
-            >
-              <FontAwesomeIcon icon={faHome} />
-            </button>
-            <button
-              onClick={(e) => {
-                onActionClick();
-                e.stopPropagation();
-              }}
-              title={"Open the command palette (" + (isMac ? "Cmd" : "Ctrl") +
-                "+/)"}
-            >
-              <FontAwesomeIcon icon={faRunning} />
-            </button>
-            <button
-              onClick={(e) => {
-                onThemeClick();
-                setTheme(localStorage.theme ?? "light");
-                e.stopPropagation();
-              }}
-              title="Toggle theme"
-            >
-              <FontAwesomeIcon icon={theme === "dark" ? faSun : faMoon} />
-            </button>
+            {actionButtons.map((actionButton) => (
+              <button
+                onClick={(e) => {
+                  actionButton.callback();
+                  e.stopPropagation();
+                }}
+                title={actionButton.description}
+              >
+                <FontAwesomeIcon icon={actionButton.icon} />
+              </button>
+            ))}
           </div>
         </div>
       </div>