diff --git a/pkg/interface/src/App.js b/pkg/interface/src/App.js
index f0c08ebb3..34c8d2919 100644
--- a/pkg/interface/src/App.js
+++ b/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}
/>
-
(
+
+ (
- )} />
+ {...p}
+ />
+ )}
+ />
(
- )} />
+ {...p}
+ />
+ )}
+ />
(
- )} />
+ {...p}
+ />
+ )}
+ />
(
- )} />
+ {...p}
+ />
+ )}
+ />
(
- )} />
+ {...p}
+ />
+ )}
+ />
(
- )} />
+ {...p}
+ />
+ )}
+ />
+
+
diff --git a/pkg/interface/src/components/404.js b/pkg/interface/src/components/404.js
new file mode 100644
index 000000000..fbe74bce8
--- /dev/null
+++ b/pkg/interface/src/components/404.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const NotFound = () =>
+
404
+
Not found.
+ If this is unexpected, email support@tlon.io
or submit an issue.
+
;
+
+export default NotFound;
diff --git a/pkg/interface/src/components/StatusBar.js b/pkg/interface/src/components/StatusBar.js
index 1a74ec0b9..71a00505b 100644
--- a/pkg/interface/src/components/StatusBar.js
+++ b/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 (