[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,6 +22,11 @@ export default function Note({selectedId, isEditing}) {
       : null;
 
   if (note === null) {
+    if (isEditing) {
+      return (
+        <NoteEditor noteId={null} initialTitle="Untitled" initialBody="" />
+      );
+    } else {
       return (
         <div className="note--empty-state">
           <span className="note-text--empty-state">
@@ -30,6 +35,7 @@ export default function Note({selectedId, isEditing}) {
         </div>
       );
     }
+  }
 
   let {id, title, body, updated_at} = note;
   const updatedAt = new Date(updated_at);