publish: add startup content

pkg/interface/publish/src/js/components/lib/sidebar.js

@@ -3,6 +3,7 @@ import { Route, Link } from 'react-router-dom';
 import { Dropdown } from './dropdown';
 import { NotebookItem } from './notebook-item';
 import { SidebarInvite } from './sidebar-invite';
+import { Welcome } from './welcome';
 
 export class Sidebar extends Component {
   constructor(props) {
@@ -179,6 +180,7 @@ export class Sidebar extends Component {
         </div>
         <div className="overflow-y-auto pb1"
         style={{height: "calc(100% - 82px)"}}>
+          <Welcome notebooks={props.notebooks}/>
           {sidebarInvites}
           {notebookItems}
         </div>

pkg/interface/publish/src/js/components/lib/welcome.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+
+export class Welcome extends Component {
+  constructor() {
+    super();
+    this.state = {
+      show: true
+    }
+  }
+  render() {
+    let wasWelcomed = localStorage.getItem("urbit-publish:wasWelcomed");
+    if (wasWelcomed === null) {
+      localStorage.setItem("urbit-publish:wasWelcomed", JSON.stringify(false));
+      return wasWelcomed = false;
+    } else {
+      wasWelcomed = JSON.parse(wasWelcomed);
+    }
+
+    let notebooks = !!this.props.notebooks ? this.props.notebooks : {};
+
+    return ((!wasWelcomed && this.state.show) && (notebooks.length !== 0)) ? (
+      <div className="ma4 pa2 ba bg-gray5 b--gray4 bg-gray0-d b--gray2-d white-d">
+        <p className="f9 lh-copy">Notebooks are best used for longer-form writing and text editing. Notes accept Markdown for formatting.</p>
+        <p className="f9 pt2 dib fw6 pointer"
+          onClick={(() => {
+            localStorage.setItem("urbit-publish:wasWelcomed", JSON.stringify(true));
+            this.setState({ show: false })
+          })}>
+          Close this message
+      </p>
+      </div>
+    ) : <div />
+  }
+}
+
+export default Welcome