hashtag list view

src/js/Main.js

@@ -12,6 +12,7 @@ import Settings from './views/settings/Settings.js';
 import LogoutConfirmation from './views/LogoutConfirmation.js';
 import Chat from './views/Chat.js';
 import Notifications from './views/Notifications.js';
+import Hashtags from './views/Hashtags.js';
 import Store from './views/Store.js';
 import Checkout from './views/Checkout.js';
 import Product from './views/Product.js';
@@ -116,7 +117,8 @@ class Main extends Component {
             <${Router} onChange=${e => this.handleRoute(e)}>
               <${Feed} path="/"/>
               <${Feed} path="/feed"/>
-              <${Feed} path="/hashtag/:hashtag?"/>
+              <${Hashtags} path="/hashtag"/>
+              <${Feed} path="/hashtag/:hashtag+"/>
               <${Feed} path="/search/:term?/:type?"/>
               <${Feed} path="/media" index="media" thumbnails=${true}/>
               <${Login} path="/login"/>

src/js/views/Hashtags.js

@@ -0,0 +1,36 @@
+import { html } from 'htm/preact';
+import State from '../State.js';
+import Filters from '../components/Filters.js';
+import {translate as t} from '../Translation.js';
+import View from './View.js';
+
+export default class Hashtags extends View {
+  hashtags = {};
+
+  componentDidMount() {
+    State.local.get('filters').get('group').on(this.inject());
+    State.group().map('hashtags', (msgs, tag) => {
+      this.hashtags[tag] = true;
+      this.setState({});
+    });
+  }
+
+  renderView() {
+    return html`
+      <div class="centered-container">
+        <h3>${t('hashtags')}</h3>
+        <${Filters} />
+        ${Object.keys(this.hashtags).length === 0 ? html`'
+            <p>No hashtags yet</p>
+        `:''}
+        ${Object.keys(this.hashtags).sort().map(hashtag => {
+          return html`
+            <p>
+                <a href="/hashtag/${hashtag}">#${hashtag}</a>
+            </p>
+          `;
+        })}
+      </div>
+    `;
+  }
+}