add hashtag list to feed

src/css/style.css

@@ -913,6 +913,26 @@ a.msg {
   color: var(--text-color);
 }
 
+.hashtag-list {
+  margin: 15px 0 15px 15px;
+}
+
+.hashtag-list a {
+  color: var(--text-color);
+}
+
+.hashtag-list a.active {
+  font-weight: bold;
+}
+
+.hashtag-list a:active,.hashtag-list a:focus,.hashtag-list a:visited {
+  text-decoration: none;
+}
+
+.hashtag-list a:hover:not(.active) {
+  text-decoration: underline;
+}
+
 .public-messages-view .img-container img {
   max-height: 80vh;
   border-radius: 0;

src/js/components/HashtagList.js

@@ -0,0 +1,74 @@
+import Component from '../BaseComponent';
+import { html } from 'htm/preact';
+import {createRef} from 'preact';
+import State from '../State.js';
+import {Link} from "preact-router/match";
+
+export default class HashtagList extends Component {
+  constructor() {
+    super();
+    this.addHashtagInputRef = createRef();
+    this.state = {hashtags: {}};
+  }
+
+  componentDidMount() {
+    const hashtags = {};
+    State.public.user().get('hashtagSubscriptions').map().on(this.sub(
+      (isSubscribed, hashtag) => {
+        if (isSubscribed) {
+          hashtags[hashtag] = true;
+        } else {
+          delete hashtags[hashtag];
+        }
+        this.setState({hashtags});
+      }
+    ));
+  }
+
+  addHashtagClicked(e) {
+    e.preventDefault();
+    this.setState({showAddHashtagForm: !this.state.showAddHashtagForm});
+  }
+
+  onAddHashtag(e) {
+    e.preventDefault();
+    const hashtag = e.target.firstChild.value.replace('#', '');
+    console.log(hashtag);
+    if (hashtag) {
+      State.public.user().get('hashtagSubscriptions').get(hashtag).put(true);
+      this.setState({showAddHashtagForm: false});
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.showAddHashtagForm && this.state.showAddHashtagForm) {
+      this.addHashtagInputRef.current && this.addHashtagInputRef.current.focus();
+    }
+  }
+
+  shouldComponentUpdate() {
+    return true;
+  }
+
+  render() {
+    return html`
+      <div class="msg hashtag-list">
+        <div class="msg-content">
+          ${this.state.showAddHashtagForm ? html`
+            <form onSubmit=${e => this.onAddHashtag(e)}>
+                <input placeholder="#hashtag" ref=${this.addHashtagInputRef} style="margin-bottom: 7px" />
+                <button type="submit">Add</button>
+                <button onClick=${() => this.setState({showAddHashtagForm:false})}>Cancel</button>
+            </form><br/>  
+          ` : html`
+            <a href="" onClick=${e => this.addHashtagClicked(e)}>+ Add hashtag</a><br/>          
+          `}
+          <${Link} activeClassName="active" href="/">All<//>
+          ${Object.keys(this.state.hashtags).sort().map(hashtag =>
+            html`<${Link} activeClassName="active" class="channel-listing" href="/hashtag/${hashtag}">#${hashtag}<//>`
+            )}
+        </div>
+      </div>
+    `;
+  }
+}

src/js/views/Feed.js

@@ -6,6 +6,7 @@ import Filters from '../components/Filters.js';
 import View from './View.js';
 import SubscribeHashtagButton from "../components/SubscribeHashtagButton";
 import Helmet from 'react-helmet';
+import HashtagList from '../components/HashtagList';
 
 class Feed extends View {
   constructor() {
@@ -53,29 +54,37 @@ class Feed extends View {
     }
     return html`
       <div class="centered-container">
-        ${hashtag ? html`
-            <${Helmet}>
-                <title>${hashtagText}</title>
-                <meta property="og:title" content="${hashtagText} | Iris" />
-            <//>
-            <h3>${hashtagText} <span style="float:right"><${SubscribeHashtagButton} id=${hashtag} /></span></h3>
-            
-        ` : ''}
-        ${s.searchTerm ? '' : html`
-          <${PublicMessageForm} index=${path} class="hidden-xs" autofocus=${false}/>
-        `}
-        ${s.searchTerm ? html`<h2>Search results for "${s.searchTerm}"</h2>` : html`
-          ${this.getNotification()}
-        `}
-        ${!s.noFollows ? html`<${Filters}/>` : ''}
-        <${MessageFeed}
-                scrollElement=${this.scrollElement.current}
-                hashtag=${hashtag}
-                filter=${s.searchTerm && (m => this.filter(m))}
-                thumbnails=${this.props.thumbnails}
-                key=${hashtag || this.props.index || 'feed'}
-                group=${this.state.group}
-                path=${path} />
+          <div style="display:flex;flex-direction:row">
+            <div style="flex:3">
+              ${hashtag ? html`
+                <${Helmet}>
+                    <title>${hashtagText}</title>
+                    <meta property="og:title" content="${hashtagText} | Iris" />
+                <//>
+                <h3>${hashtagText} <span style="float:right"><${SubscribeHashtagButton} key=${hashtag} id=${hashtag} /></span></h3>
+              ` : ''}
+              ${s.searchTerm ? '' : html`
+                <${PublicMessageForm} index=${path} class="hidden-xs" autofocus=${false}/>
+              `}
+              ${s.searchTerm ? html`<h2>Search results for "${s.searchTerm}"</h2>` : html`
+                ${this.getNotification()}
+              `}
+              ${!s.noFollows ? html`<${Filters}/>` : ''}
+              <${MessageFeed}
+                      scrollElement=${this.scrollElement.current}
+                      hashtag=${hashtag}
+                      filter=${s.searchTerm && (m => this.filter(m))}
+                      thumbnails=${this.props.thumbnails}
+                      key=${hashtag || this.props.index || 'feed'}
+                      group=${this.state.group}
+                      path=${path} />
+            </div>
+            ${this.props.index === 'media' ? '':html`
+              <div style="flex:1" class="hidden-xs">
+                <${HashtagList} />
+              </div>
+            `}
+          </div>
       </div>
     `;
   }