[Demo] Add New button and Search placeholder

src/App.server.js

@@ -8,6 +8,7 @@
 
 import Note from './Note.server';
 import NoteList from './NoteList.server';
+import EditButton from './EditButton.client';
 
 export default function App({selectedId, isEditing}) {
   return (
@@ -24,7 +25,16 @@ export default function App({selectedId, isEditing}) {
           />
           <strong>React Notes</strong>
         </section>
-        <nav>
+        <section className="sidebar-menu" role="menubar">
+          <form className="search" role="search">
+            <label className="offscreen" htmlFor="sidebar-search-input">
+              Search for a note by title
+            </label>
+            <input id="sidebar-search-input" placeholder="Search" />
+          </form>
+          <EditButton noteId={null}>New</EditButton>
+        </section>
+        <nav role="navigation">
           <NoteList />
         </nav>
       </section>

src/Note.server.js

@@ -22,13 +22,19 @@ export default function Note({selectedId, isEditing}) {
       : null;
 
   if (note === null) {
-    return (
-      <div className="note--empty-state">
-        <span className="note-text--empty-state">
-          Click a note on the left to view something! 🥺
-        </span>
-      </div>
-    );
+    if (isEditing) {
+      return (
+        <NoteEditor noteId={null} initialTitle="Untitled" initialBody="" />
+      );
+    } else {
+      return (
+        <div className="note--empty-state">
+          <span className="note-text--empty-state">
+            Click a note on the left to view something! 🥺
+          </span>
+        </div>
+      );
+    }
   }
 
   let {id, title, body, updated_at} = note;