spa: add 404 page

pkg/interface/src/App.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BrowserRouter as Router, Route, Link, withRouter } from 'react-router-dom';
+import { BrowserRouter as Router, Route, withRouter, Switch } from 'react-router-dom';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import './css/indigo-static.css';
 import './css/fonts.css';
@@ -8,11 +8,13 @@ import { light } from '@tlon/indigo-react';
 import LaunchApp from './apps/launch/app';
 import ChatApp from './apps/chat/app';
 import DojoApp from './apps/dojo/app';
-import StatusBar from './components/StatusBar';
 import GroupsApp from './apps/groups/app';
 import LinksApp from './apps/links/app';
 import PublishApp from './apps/publish/app';
 
+import StatusBar from './components/StatusBar';
+import NotFound from './components/404';
+
 import GlobalStore from './store/global';
 import GlobalSubscription from './subscription/global';
 import GlobalApi from './api/global';
@@ -71,48 +73,64 @@ export default class App extends React.Component {
             api={this.api}
             />
             <div>
-              <Route exact path="/" render={ p => (
+            <Switch>
+              <Route exact path="/"
+              render={ p => (
                 <LaunchApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~chat" render={ p => (
                 <ChatApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~dojo" render={ p => (
                 <DojoApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~groups" render={ p => (
                 <GroupsApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~link" render={ p => (
                 <LinksApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~publish" render={ p => (
                 <PublishApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
+              <Route component={NotFound} />
+              </Switch>
             </div>
           </Router>
         </Root>

pkg/interface/src/components/404.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const NotFound = () => <div
+  className="fixed inter tc"
+  style={{
+    top: '50vh',
+    left: '50%',
+    transform: 'translate(-50%, -25vh)',
+    fontFeatureSettings: '\'zero\' 1' }}>
+  <h1 className="fw2 f2">404</h1>
+  <p className="tc">Not found.<br /><br />
+  If this is unexpected, email <code>support@tlon.io</code> or <a className="bb" href="https://github.com/urbit/urbit/issues/new/choose">submit an issue</a>.</p>
+</div>;
+
+export default NotFound;

pkg/interface/src/components/StatusBar.js

@@ -7,14 +7,16 @@ import { Sigil } from '../lib/sigil';
 const getLocationName = (basePath) => {
   if (basePath === '~chat')
     return 'Chat';
-  if (basePath === '~dojo')
+  else if (basePath === '~dojo')
     return 'Dojo';
-  if (basePath === '~groups')
+  else if (basePath === '~groups')
     return 'Groups';
-  if (basePath === '~link')
+  else if (basePath === '~link')
     return 'Links';
-  if (basePath === '~publish')
+  else if (basePath === '~publish')
     return 'Publish';
+  else
+    return 'Unknown';
 };
 
 const StatusBar = (props) => {
@@ -24,8 +26,9 @@ const StatusBar = (props) => {
     ? 'Home'
     : getLocationName(basePath);
 
-  const popout = window.location.href.includes('popout/')
-    ? 'dn' : 'db';
+  const display = (!window.location.href.includes('popout/') &&
+    (locationName !== 'Unknown'))
+      ? 'db' : 'dn';
 
   const invites = (props.invites && props.invites['/contacts'])
     ? props.invites['/contacts']
@@ -34,7 +37,7 @@ const StatusBar = (props) => {
   return (
     <div
       className={
-        'bg-white bg-gray0-d w-100 justify-between relative tc pt3 ' + popout
+        'bg-white bg-gray0-d w-100 justify-between relative tc pt3 ' + display
       }
       style={{ height: 45 }}
     >