[Glitch] Add trends to public pages sidebar

Port c6b4b923e6f88b7cc4a1af251cb532a5a15035e2 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

2 files changed, 18 insertions, 5 deletions

diff --git a/app/javascript/flavours/glitch/containers/media_container.js b/app/javascript/flavours/glitch/containers/media_container.js
index c1738db4d..41547412e 100644
--- a/app/javascript/flavours/glitch/containers/media_container.js
+++ b/app/javascript/flavours/glitch/containers/media_container.js
@@ -7,6 +7,7 @@ import MediaGallery from 'flavours/glitch/components/media_gallery';
 import Video from 'flavours/glitch/features/video';
 import Card from 'flavours/glitch/features/status/components/card';
 import Poll from 'flavours/glitch/components/poll';
+import Hashtag from 'flavours/glitch/components/hashtag';
 import Audio from 'flavours/glitch/features/audio';
 import ModalRoot from 'flavours/glitch/components/modal_root';
 import MediaModal from 'flavours/glitch/features/ui/components/media_modal';
@@ -15,7 +16,7 @@ import { List as ImmutableList, fromJS } from 'immutable';
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);
 
-const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Audio };
+const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio };
 
 export default class MediaContainer extends PureComponent {
 
@@ -56,12 +57,13 @@ export default class MediaContainer extends PureComponent {
           {[].map.call(components, (component, i) => {
             const componentName = component.getAttribute('data-component');
             const Component = MEDIA_COMPONENTS[componentName];
-            const { media, card, poll, ...props } = JSON.parse(component.getAttribute('data-props'));
+            const { media, card, poll, hashtag, ...props } = JSON.parse(component.getAttribute('data-props'));
 
             Object.assign(props, {
-              ...(media ? { media: fromJS(media) } : {}),
-              ...(card  ? { card:  fromJS(card)  } : {}),
-              ...(poll  ? { poll:  fromJS(poll)  } : {}),
+              ...(media   ? { media:   fromJS(media)   } : {}),
+              ...(card    ? { card:    fromJS(card)    } : {}),
+              ...(poll    ? { poll:    fromJS(poll)    } : {}),
+              ...(hashtag ? { hashtag: fromJS(hashtag) } : {}),
 
               ...(componentName === 'Video' ? {
                 onOpenVideo: this.handleOpenVideo,
@@ -75,6 +77,7 @@ export default class MediaContainer extends PureComponent {
               component,
             );
           })}
+
           <ModalRoot onClose={this.handleCloseMedia}>
             {this.state.media && (
               <MediaModal
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index e207113be..9e9c6eb58 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -100,6 +100,16 @@
       background-size: 44px 44px;
     }
   }
+
+  .trends__item {
+    padding: 10px;
+  }
+}
+
+.trends-widget {
+  h4 {
+    color: $darker-text-color;
+  }
 }
 
 .box-widget {