move quick filter into quick view on mobile to save space

src/components/conversation/conversation.js

@@ -350,6 +350,7 @@ const conversation = {
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile',
       mastoUserSocketStatus: state => state.api.mastoUserSocketStatus
     })
   },

src/components/conversation/conversation.vue

@@ -20,7 +20,7 @@
         {{ $t('timeline.collapse') }}
       </button>
       <QuickFilterSettings
-        v-if="!collapsable"
+        v-if="!collapsable && mobileLayout"
         :conversation="true"
         class="rightside-button"
       />

src/components/quick_filter_settings/quick_filter_settings.js

@@ -1,5 +1,5 @@
 import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
 
@@ -11,7 +11,8 @@ library.add(
 
 const QuickFilterSettings = {
   props: {
-    conversation: Boolean
+    conversation: Boolean,
+    nested: Boolean
   },
   components: {
     Popover
@@ -27,6 +28,25 @@ const QuickFilterSettings = {
   },
   computed: {
     ...mapGetters(['mergedConfig']),
+    ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile'
+    }),
+    triggerAttrs () {
+      if (this.mobileLayout) {
+        return {}
+      } else {
+        return {
+          title: this.$t('timeline.quick_filter_settings')
+        }
+      }
+    },
+    mainClass () {
+      if (this.mobileLayout) {
+        return 'main-button'
+      } else {
+        return 'dropdown-item'
+      }
+    },
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },

src/components/quick_filter_settings/quick_filter_settings.vue

@@ -1,9 +1,10 @@
 <template>
   <Popover
-    trigger="click"
+    :trigger="nested ? 'hover' : 'click'"
     class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
-    :trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
+    :position="nested ? 'right' : 'top'"
+    :trigger-attrs="triggerAttrs"
   >
     <template #content>
       <div
@@ -137,7 +138,19 @@
       </div>
     </template>
     <template #trigger>
-      <FAIcon icon="filter" />
+      <div :class="mobileLayout ? 'main-button' : ''">
+        <FAIcon icon="filter" :fixed-width="nested"/>
+        <template v-if="nested">
+          {{$t('timeline.filter_settings')}}
+        </template>
+        <FAIcon
+          v-if="nested"
+          class="chevron-icon"
+          size="lg"
+          icon="chevron-right"
+          fixed-width
+        />
+      </div>
     </template>
   </Popover>
 </template>

src/components/quick_view_settings/quick_view_settings.js

@@ -1,5 +1,6 @@
-import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
+import Popover from 'src/components/popover/popover.vue'
+import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
+import { mapGetters, mapState } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
 
@@ -15,7 +16,8 @@ const QuickViewSettings = {
     conversation: Boolean
   },
   components: {
-    Popover
+    Popover,
+    QuickFilterSettings
   },
   methods: {
     setConversationDisplay (visibility) {
@@ -27,6 +29,9 @@ const QuickViewSettings = {
   },
   computed: {
     ...mapGetters(['mergedConfig']),
+    ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile'
+    }),
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },

src/components/quick_view_settings/quick_view_settings.vue

@@ -3,13 +3,24 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
-    :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
+    :trigger-attrs="triggerAttrs"
   >
     <template #content>
       <div
         class="dropdown-menu"
         role="menu"
       >
+        <div
+          v-if="mobileLayout"
+          class="menu-item dropdown-item -icon"
+        >
+          <QuickFilterSettings :nested="true" />
+        </div>
+        <div
+          v-if="mobileLayout"
+          role="separator"
+          class="dropdown-divider"
+        />
         <div role="group">
           <div class="menu-item dropdown-item -icon-double">
             <button

src/components/timeline/timeline.vue

@@ -77,6 +77,7 @@
       </template>
       <QuickFilterSettings
         class="rightside-button"
+        v-if="!mobileLayout"
       />
       <QuickViewSettings
         class="rightside-button"

src/i18n/en.json

@@ -1214,7 +1214,8 @@
     "socket_reconnected": "Realtime connection established",
     "socket_broke": "Realtime connection lost: CloseEvent code {0}",
     "quick_view_settings": "Quick view settings",
-    "quick_filter_settings": "Quick filter settings"
+    "quick_filter_settings": "Quick filter settings",
+    "filter_settings": "Filter"
   },
   "status": {
     "favorites": "Favorites",