Remove shortcuts again, just trigger command pallete

packages/plugs/core/core.plug.yaml

@@ -123,8 +123,6 @@ functions:
     command:
       name: "Template: Quick Note"
       key: "Alt-Shift-n"
-      shortcut:
-        label: "Quick note"
   quickTaskCommand:
     path: ./template.ts:quickTaskCommand
     command:

packages/plugs/query/query.plug.yaml

@@ -10,8 +10,6 @@ functions:
     command:
       name: "Materialized Queries: Update"
       key: "Alt-q"
-      shortcut:
-        label: "Update queries"
     events:
       - editor:pageLoaded
   indexData:

packages/web/components/top_bar.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState } from "react";
+import { faRunning } from "@fortawesome/free-solid-svg-icons";
-import { ShortcutItem, Notification } from "../types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Notification } from "../types";
 
 function prettyName(s: string | undefined): string {
   if (!s) {
@@ -12,33 +13,19 @@ export function TopBar({
   pageName,
   unsavedChanges,
   notifications,
-  shortcutItems,
   onClick,
+  onActionClick,
   lhs,
   rhs,
 }: {
   pageName?: string;
   unsavedChanges: boolean;
   notifications: Notification[];
-  shortcutItems: ShortcutItem[];
   onClick: () => void;
+  onActionClick: () => void;
   lhs?: React.ReactNode;
   rhs?: React.ReactNode;
 }) {
-  const [menuExpanded, setMenuExpanded] = useState(false);
-
-  useEffect(() => {
-    function closer() {
-      setMenuExpanded(false);
-    }
-
-    document.addEventListener("click", closer);
-
-    return () => {
-      document.removeEventListener("click", closer);
-    };
-  }, []);
-
   return (
     <div id="top" onClick={onClick}>
       {lhs}
@@ -59,31 +46,13 @@ export function TopBar({
           <div className="actions">
             <button
               onClick={(e) => {
-                setMenuExpanded(!menuExpanded);
+                // setMenuExpanded(!menuExpanded);
+                onActionClick();
                 e.stopPropagation();
               }}
             >
-              ...
+              <FontAwesomeIcon icon={faRunning} />
             </button>
-            {menuExpanded && (
-              <ul>
-                {shortcutItems.map((actionButton, idx) => (
-                  <li key={idx}>
-                    <a
-                      href="#"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setMenuExpanded(false);
-                        actionButton.run();
-                      }}
-                    >
-                      {actionButton.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            )}
           </div>
         </div>
       </div>

packages/web/editor.tsx

@@ -127,11 +127,10 @@ export class Editor {
     // Command hook
     this.commandHook = new CommandHook();
     this.commandHook.on({
-      commandsUpdated: (commandMap, shortcutItems) => {
+      commandsUpdated: (commandMap) => {
         this.viewDispatch({
           type: "update-commands",
           commands: commandMap,
-          shortcutItems: shortcutItems,
         });
       },
     });
@@ -660,7 +659,6 @@ export class Editor {
             placeholder={viewState.filterBoxPlaceHolder}
             options={viewState.filterBoxOptions}
             allowNew={false}
-            // icon={faPersonRunning}
             helpText={viewState.filterBoxHelpText}
             onSelect={viewState.filterBoxOnSelect}
           />
@@ -669,19 +667,12 @@ export class Editor {
           pageName={viewState.currentPage}
           notifications={viewState.notifications}
           unsavedChanges={viewState.unsavedChanges}
-          shortcutItems={[
-            {
-              label: "Run command",
-              orderId: 0,
-              run: () => {
-                this.viewDispatch({ type: "show-palette" });
-              },
-            },
-            ...viewState.shortcutItems,
-          ]}
           onClick={() => {
             dispatch({ type: "start-navigate" });
           }}
+          onActionClick={() => {
+            dispatch({ type: "show-palette" });
+          }}
           rhs={
             !!viewState.showRHS && (
               <div className="panel" style={{ flex: viewState.showRHS }} />

packages/web/hooks/command.ts

@@ -1,7 +1,6 @@
 import { Hook, Manifest } from "@plugos/plugos/types";
 import { System } from "@plugos/plugos/system";
 import { EventEmitter } from "@plugos/plugos/event";
-import { ShortcutItem } from "../types";
 
 export type CommandDef = {
   name: string;
@@ -11,13 +10,6 @@ export type CommandDef = {
   // Bind to keyboard shortcut
   key?: string;
   mac?: string;
-
-  // Shortcuts in UI
-  shortcut?: ShortcutDef;
-};
-
-export type ShortcutDef = {
-  label: string;
 };
 
 export type AppCommand = {
@@ -30,10 +22,7 @@ export type CommandHookT = {
 };
 
 export type CommandHookEvents = {
-  commandsUpdated(
+  commandsUpdated(commandMap: Map<string, AppCommand>): void;
-    commandMap: Map<string, AppCommand>,
-    appButtons: ShortcutItem[]
-  ): void;
 };
 
 export class CommandHook
@@ -41,11 +30,9 @@ export class CommandHook
   implements Hook<CommandHookT>
 {
   editorCommands = new Map<string, AppCommand>();
-  shortcutItems: ShortcutItem[] = [];
 
   buildAllCommands(system: System<CommandHookT>) {
     this.editorCommands.clear();
-    this.shortcutItems = [];
     for (let plug of system.loadedPlugs.values()) {
       for (const [name, functionDef] of Object.entries(
         plug.manifest!.functions
@@ -60,17 +47,9 @@ export class CommandHook
             return plug.invoke(name, []);
           },
         });
-        if (cmd.shortcut) {
-          this.shortcutItems.push({
-            label: cmd.shortcut.label,
-            run: () => {
-              return plug.invoke(name, []);
-            },
-          });
       }
     }
-    }
+    this.emit("commandsUpdated", this.editorCommands);
-    this.emit("commandsUpdated", this.editorCommands, this.shortcutItems);
   }
 
   apply(system: System<CommandHookT>): void {

packages/web/reducer.ts

@@ -76,7 +76,6 @@ export default function reducer(
       return {
         ...state,
         commands: action.commands,
-        shortcutItems: action.shortcutItems,
       };
     case "show-notification":
       return {

packages/web/styles/main.scss

@@ -76,19 +76,19 @@ body {
       display: flex;
       flex-direction: row;
 
-      // .status {
+      .status {
-      //   position: absolute;
+        position: absolute;
-      //   font-family: "iA-Mono";
+        font-family: "iA-Mono";
-      //   bottom: 45px;
+        bottom: 45px;
-      //   left: 5px;
+        left: 5px;
-      //   right: 5px;
+        right: 5px;
-      //   background-color: rgb(187, 221, 247);
+        background-color: rgb(187, 221, 247);
-      //   border: rgb(41, 41, 41) 1px solid;
+        border: rgb(41, 41, 41) 1px solid;
-      //   border-radius: 5px;
+        border-radius: 5px;
-      //   padding: 3px;
+        padding: 3px;
-      //   font-size: 15px;
+        font-size: 15px;
-      //   z-index: 100;
+        z-index: 100;
-      // }
+      }
 
       .current-page {
         font-family: var(--ui-font);
@@ -97,15 +97,11 @@ body {
 
         overflow: hidden;
         white-space: nowrap;
-        // margin-right: 40px;
+        text-align: left;
         display: block;
+        text-overflow: ellipsis;
       }
 
-      // .icon {
-      //   padding-left: 5px;
-      //   padding-right: 10px;
-      // }
-
       .saved {
         color: #111;
       }
@@ -115,10 +111,8 @@ body {
       }
     }
     .actions {
-      // float: right;
       text-align: right;
       width: 40px;
-      // margin-top: -35px;
 
       ul {
         list-style: none;

packages/web/types.ts

@@ -9,12 +9,6 @@ export type Notification = {
   date: Date;
 };
 
-export type ShortcutItem = {
-  label: string;
-  orderId?: number;
-  run: () => void;
-};
-
 export type AppViewState = {
   currentPage?: string;
   perm: "ro" | "rw";
@@ -34,7 +28,6 @@ export type AppViewState = {
   allPages: Set<PageMeta>;
   commands: Map<string, AppCommand>;
   notifications: Notification[];
-  shortcutItems: ShortcutItem[];
   recentCommands: Map<string, Date>;
 
   showFilterBox: boolean;
@@ -60,7 +53,6 @@ export const initialViewState: AppViewState = {
   commands: new Map(),
   recentCommands: new Map(),
   notifications: [],
-  shortcutItems: [],
   showFilterBox: false,
   filterBoxHelpText: "",
   filterBoxLabel: "",
@@ -79,7 +71,6 @@ export type Action =
   | {
       type: "update-commands";
       commands: Map<string, AppCommand>;
-      shortcutItems: ShortcutItem[];
     }
   | { type: "show-palette"; context?: string }
   | { type: "hide-palette" }