Progress

app/javascript/gabsocial/layouts/deck_layout.js

@@ -5,13 +5,48 @@ import {
   BREAKPOINT_EXTRA_SMALL,
 } from '../constants'
 import { me } from '../initial_state'
+import Button from '../components/button'
+import Text from '../components/text'
 import DeckSidebar from '../components/sidebar/deck_sidebar'
 import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import { getWindowDimension } from '../utils/is_mobile'
+
+const initialState = getWindowDimension()
 
 class DeckLayout extends React.PureComponent {
 
+  state = {
+    width: initialState.width,
+  }
+
+  componentDidMount() {
+    this.handleResize()
+    window.addEventListener('resize', this.handleResize, false)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize, false)
+  }
+
+  handleResize = () => {
+    const { width } = getWindowDimension()
+    this.setState({ width })
+  }
+
   render() {
     const { children, title } = this.props
+    const { width } = this.state
+
+    const isXS = width <= BREAKPOINT_EXTRA_SMALL
+
+    if (isXS) {
+      return (
+        <div className={[_s.d, _s.aiCenter, _s.jcCenter, _s.w100PC, _s.h100VH, _s.bgTertiary].join(' ')}>
+          <Text className={_s.mb10}>Gab Deck is not available on mobile or tablet devices. Please only access using a desktop computer.</Text>
+          <Button to='/home'>Return home</Button>
+        </div>
+      )
+    }
 
     const mainBlockClasses = CX({
       d: 1,

app/javascript/gabsocial/layouts/search_layout.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { defineMessages, injectIntl } from 'react-intl'
-import { me } from '../initial_state'
+import { me, trendingHashtags } from '../initial_state'
 import {
   BREAKPOINT_EXTRA_SMALL,
   CX,
@@ -42,26 +42,20 @@ class SearchLayout extends React.PureComponent {
         title: 'Explore',
         onClick: () => this.setState({ currentExploreTabIndex: 0 }),
         component: ExploreTimeline,
-      },
-      {
-        title: '#Election2020',
-        onClick: () => this.setState({ currentExploreTabIndex: 1 }),
-        component: HashtagTimeline,
-        componentParams: { params: { id: 'election2020' } },
-      },
-      {
-        title: '#RiggedElection',
-        onClick: () => this.setState({ currentExploreTabIndex: 2 }),
-        component: HashtagTimeline,
-        componentParams: { params: { id: 'riggedelection' } },
-      },
-      {
-        title: '#StopTheSteal',
-        onClick: () => this.setState({ currentExploreTabIndex: 3 }),
-        component: HashtagTimeline,
-        componentParams: { params: { id: 'stopthesteal' } },
-      },
+      }
     ]
+
+    if (Array.isArray(trendingHashtags)) {
+      trendingHashtags.forEach((tag, i) => {
+        let j = i + 1
+        this.exploreTabs.push({
+          title: `#${tag}`,
+          onClick: () => this.setState({ currentExploreTabIndex: j }),
+          component: HashtagTimeline,
+          componentParams: { params: { id: `${tag}`.toLowerCase() } },
+        })
+      })
+    }
     
     this.searchTabs = [
       {