Use a command palette in the example

example/index.css

@@ -17,3 +17,89 @@ body {
   bottom: 10px;
   padding: 8px;
 }
+
+
+.p-CommandPalette {
+  background: #F5F5F5;
+  border: 1px solid #CCCCCC;
+}
+
+
+.p-CommandPalette-search {
+  padding: 8px;
+}
+
+
+.p-CommandPalette-inputWrapper {
+  padding: 4px 6px;
+  background: white;
+  border: 1px solid #E0E0E0;
+}
+
+
+.p-CommandPalette-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  font-size: 16px;
+}
+
+
+.p-CommandPalette-header {
+  padding: 4px;
+  color: #757575;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: capitalize;
+  background: #E1E1E1;
+  cursor: pointer;
+}
+
+
+.p-CommandPalette-header.p-mod-active {
+  background: #7FDBFF;
+}
+
+
+.p-CommandPalette-header:hover::before {
+  content: '\2026'; /* ellipsis */
+  float: right;
+  margin-right: 4px;
+}
+
+
+.p-CommandPalette-header > mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
+
+.p-CommandPalette-command {
+  padding: 4px 8px;
+  color: #757575;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+
+.p-CommandPalette-command.p-mod-active {
+  background: #7FDBFF;
+}
+
+
+.p-CommandPalette-command:hover:not(.p-mod-active) {
+  background: #EBEBEB;
+}
+
+
+.p-CommandPalette-commandText > mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
+
+.p-CommandPalette-commandCaption {
+  color: #9E9E9E;
+  font-size: 11px;
+  font-weight: 400;
+}

example/package.json

@@ -4,8 +4,9 @@
   "dependencies": {
     "jupyter-js-notebook": "file:..",
     "jupyter-js-utils": "^0.3.1",
-    "phosphor-boxpanel": "^1.0.0-rc.0",
-    "phosphor-keymap": "^0.7.0"
+    "phosphor-commandpalette": "^0.2.0",
+    "phosphor-keymap": "^0.7.0",
+    "phosphor-splitpanel": "^1.0.0-rc.1"
   },
   "scripts": {
     "build": "tsconfig -u src/tsconfig.json && tsc --project src && webpack --config webpack.conf.js",

example/src/index.ts

@@ -22,13 +22,17 @@ import {
   getBaseUrl
 } from 'jupyter-js-utils';
 
+import {
+  CommandPalette, StandardPaletteModel
+} from 'phosphor-commandpalette';
+
 import {
   IKeyBinding, KeymapManager, keystrokeForKeydownEvent
 } from 'phosphor-keymap';
 
 import {
-  BoxPanel
-} from 'phosphor-boxpanel';
+  SplitPanel
+} from 'phosphor-splitpanel';
 
 import 'jupyter-js-notebook/lib/index.css';
 import 'jupyter-js-notebook/lib/theme.css';
@@ -56,57 +60,74 @@ function main(): void {
   let nbWidget = new NotebookWidget(nbModel);
   nbWidget.title.text = NOTEBOOK;
 
-  let box = new BoxPanel();
-  box.id = 'main';
-  box.attach(document.body);
-  box.addChild(nbWidget);
-
-  window.onresize = () => { box.update(); };
+  let pModel = new StandardPaletteModel();
+  let palette = new CommandPalette(); 
+  palette.model = pModel;
+
+  let panel = new SplitPanel();
+  panel.id = 'main';
+  panel.orientation = SplitPanel.Horizontal;
+  SplitPanel.setStretch(palette, 1);
+  SplitPanel.setStretch(nbWidget, 2);
+  panel.attach(document.body);
+  panel.addChild(palette);
+  panel.addChild(nbWidget);
+  window.onresize = () => { panel.update(); };
+
+  let items = [
+  {
+    category: 'Notebook',
+    text: 'Run Cell',
+    handler: () => { nbModel.runActiveCell(); }
+  }
+  ]
+  pModel.addItems(items);
+
+  let bindings = [
+  {
+    selector: '.jp-Notebook-cell',
+    sequence: ['Shift Enter'],
+    handler: () => {
+      nbModel.runActiveCell();
+      return true;
+    }
+  },
+  {
+    selector: '.jp-Notebook-cell',
+    sequence: ['Accel S'],
+    handler: () => {
+      nbModel.save();
+      return true;
+    }
+  }, 
+  {
+    selector: '.jp-Cell.jp-mod-commandMode',
+    sequence: ['D', 'D'],
+    handler: () => {
+      nbWidget.cut();
+      return true;
+    }
+  },
+  {
+    selector: '.jp-Cell.jp-mod-commandMode',
+    sequence: ['A'],
+    handler: () => {
+      nbWidget.insertAbove();
+      return true;
+    }
+  },
+  {
+    selector: '.jp-Cell.jp-mod-commandMode',
+    sequence: ['B'],
+    handler: () => {
+      nbWidget.insertBelow();
+      return true;
+    }
+  }];
+  keymap.add(bindings);
 
   contents.get(NOTEBOOK, {}).then(data => {
     deserialize(data.content, nbModel);
-    let bindings = [
-    {
-      selector: '.jp-Notebook-cell',
-      sequence: ['Shift Enter'],
-      handler: () => {
-        nbModel.runActiveCell();
-        return true;
-      }
-    },
-    {
-      selector: '.jp-Notebook-cell',
-      sequence: ['Accel S'],
-      handler: () => {
-        nbModel.save();
-        return true;
-      }
-    }, 
-    {
-      selector: '.jp-Cell.jp-mod-commandMode',
-      sequence: ['D', 'D'],
-      handler: () => {
-        nbWidget.cut();
-        return true;
-      }
-    },
-    {
-      selector: '.jp-Cell.jp-mod-commandMode',
-      sequence: ['A'],
-      handler: () => {
-        nbWidget.insertAbove();
-        return true;
-      }
-    },
-    {
-      selector: '.jp-Cell.jp-mod-commandMode',
-      sequence: ['B'],
-      handler: () => {
-        nbWidget.insertBelow();
-        return true;
-      }
-    }];
-    keymap.add(bindings);
 
     // start session
     startNewSession({