add search pagination (just for statuses)

src/components/post_status_form/post_status_form.js

@@ -390,6 +390,19 @@ const PostStatusForm = {
         return
       }
 
+      switch (newStatus.status) {
+        case "ENABLESILLYFEATURES=1":
+          this.$store.dispatch('setOption', { name: 'sillyFeatures', value: true })
+          console.log("Silly features ENABLED...")
+          this.clearStatus()
+          return
+        case "ENABLESILLYFEATURES=0":
+          this.$store.dispatch('setOption', { name: 'sillyFeatures', value: false })
+          console.log("Silly features DISABLED...")
+          this.clearStatus()
+          return
+      }
+
       const poll = this.pollFormVisible ? this.newStatus.poll : {}
       if (this.pollContentError) {
         this.error = this.pollContentError

src/components/search/search.js

@@ -3,6 +3,7 @@ import Conversation from '../conversation/conversation.vue'
 import Status from '../status/status.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import map from 'lodash/map'
+import { throttle } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCircleNotch,
@@ -73,14 +74,58 @@ const Search = {
       this.hashtags = []
       this.$refs.searchInput.blur()
 
-      this.$store.dispatch('search', { q: query, resolve: true })
+      this.$store.dispatch('search', { q: query, resolve: true, limit: this.$store.getters.mergedConfig.searchPaginationLimit })
         .then(data => {
           this.loading = false
           this.userIds = map(data.accounts, 'id')
+          if (data.statuses.length < 20)
+            this.bottomedOut = true
+          else
+            this.bottomedOut = false
           this.statuses = data.statuses
           this.hashtags = data.hashtags
           this.currenResultTab = this.getActiveTab()
           this.loaded = true
+
+          if (this.$store.getters.mergedConfig.recurseSearch) {
+            this.fetchMorePosts(this.visibleStatuses.length)
+          }
+        })
+    },
+    searchWithOffset (query, offset) {
+      if (!query) {
+        this.loading = false
+        return
+      }
+
+      this.loading = true
+      this.userIds = []
+      this.hashtags = []
+      this.$refs.searchInput.blur()
+
+      this.$store.dispatch('search', { 
+        q: query, 
+        resolve: true, 
+        offset: offset, 
+        max_id: this.statuses[this.statuses.length - 1]["id"],
+        limit: this.$store.getters.mergedConfig.searchPaginationLimit
+      }).then(data => {
+          console.log(this.$store)
+          this.loading = false
+          this.userIds = map(data.accounts, 'id')
+          if (data.statuses.length < this.$store.getters.mergedConfig.searchPaginationLimit)
+            this.bottomedOut = true
+          else
+            this.bottomedOut = false
+          data.statuses.forEach(element => {
+            this.statuses.push(element)
+          })
+          this.hashtags = data.hashtags
+          this.currenResultTab = this.getActiveTab()
+          this.loaded = true
+          if (this.$store.getters.mergedConfig.recurseSearch && !this.bottomedOut && (this.visibleStatuses.length < this.$store.getters.mergedConfig.recurseSearchLimit)) {
+              this.fetchMorePosts(this.visibleStatuses.length)
+          }
         })
     },
     resultCount (tabName) {
@@ -103,6 +148,9 @@ const Search = {
     },
     lastHistoryRecord (hashtag) {
       return hashtag.history && hashtag.history[0]
+    },
+    fetchMorePosts(offset) {
+      this.searchWithOffset(this.query, offset)
     }
   }
 }

src/components/search/search.vue

@@ -21,17 +21,7 @@
         <FAIcon icon="search" />
       </button>
     </div>
-    <div
+    <div v-if="loaded">
-      v-if="loading"
-      class="text-center loading-icon"
-    >
-      <FAIcon
-        icon="circle-notch"
-        spin
-        size="lg"
-      />
-    </div>
-    <div v-else-if="loaded">
       <div class="search-nav-heading">
         <tab-switcher
           ref="tabSwitcher"
@@ -71,6 +61,34 @@
           :statusoid="status"
           :no-heading="false"
         />
+        <!-- this is just ripped from notifications.vue because im lazy -->
+        <div class="panel-footer">
+          <div
+            v-if="bottomedOut && !loading"
+            class="new-status-notification text-center faint"
+          >
+            {{ $t('search.no_more_posts') }}
+          </div>
+          <button
+            v-else-if="!loading"
+            class="button-unstyled -link -fullwidth"
+            @click.prevent="fetchMorePosts(visibleStatuses.length)"
+          >
+            <div class="new-status-notification text-center">
+              {{ $t('search.load_older') }}
+            </div>
+          </button>
+          <div
+            v-else
+            class="new-status-notification text-center"
+          >
+            <FAIcon
+              icon="circle-notch"
+              spin
+              size="lg"
+            />
+          </div>
+        </div>
       </div>
       <div v-else-if="currenResultTab === 'people'">
         <div

src/components/settings_modal/tabs/general_tab.vue

@@ -275,6 +275,16 @@
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
+        <li>
+          <IntegerSetting
+            path="searchPaginationLimit"
+            :min="20"
+            :max="40"
+            :expert="1"
+          >
+            {{ $t('settings.search_pagination_limit') }}
+          </IntegerSetting>
+        </li>
         <li>
           <h3>{{ $t('settings.columns') }}</h3>
         </li>
@@ -697,6 +707,35 @@
         </li>
       </ul>
     </div>
+    <div
+      v-if="this.$store.getters.mergedConfig.sillyFeatures"
+    >
+      <div class="setting-item">
+        <h2>{{ $t('settings.silly_features') }}</h2>
+        <ul class="setting-list">
+          <li>
+            <BooleanSetting
+              path="recurseSearch"
+            >
+              {{ $t('settings.recurse_search') }}
+            </BooleanSetting>
+            <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !recurseSearch}]"
+            >
+              <li>
+                <IntegerSetting
+                  path="recurseSearchLimit"
+                  :min="100"
+                >
+                  {{ $t('settings.recurse_search_limit') }}
+                </IntegerSetting>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </template>
 

src/i18n/en.json

@@ -452,7 +452,9 @@
     },
     "search": {
         "hashtags": "Hashtags",
+        "no_more_posts": "No more posts",
         "no_results": "No results",
+        "load_older": "Load older posts",
         "people": "People",
         "people_talking": "{count} people talking",
         "person_talking": "{count} person talking"
@@ -717,6 +719,8 @@
         },
         "profile_tab": "Profile",
         "radii_help": "Set up interface edge rounding (in pixels)",
+        "recurse_search": "When searching, run searches until no results are found anymore",
+        "recurse_search_limit": "Number of posts to stop recurse searching at (>300 will cause massive performance issues)",
         "refresh_token": "Refresh token",
         "remove_alias": "Remove this alias",
         "remove_backup": "Remove",
@@ -740,6 +744,7 @@
         "saving_err": "Error saving settings",
         "saving_ok": "Settings saved",
         "scope_copy": "Copy scope when replying (DMs are always copied)",
+        "search_pagination_limit": "Results to show per search page",
         "search_user_to_block": "Search whom you want to block",
         "search_user_to_mute": "Search whom you want to mute",
         "security": "Security",
@@ -774,6 +779,7 @@
         "show_page_backgrounds": "Show page-specific backgrounds, e.g. for user profiles",
         "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
         "show_yous": "Show (You)s",
+        "silly_features": "Silly features",
         "sound_on_notification": "Play a sound when you get a notification",
         "sound_on_notification_custom": "Custom sounds",
         "sound_on_notification_custom_exp": "Put URLs to custom sounds in this box, one line for each. If you want one sound to have a different volume, put a semicolon after the link and the volume as a number between 0 and 1. If you want a sound to affect a certain user, use a second semicolon and then their ID.",

src/modules/config.js

@@ -122,6 +122,10 @@ export const defaultState = {
   soundOnNotifVolume: 0.2,
   soundOnNotifCustom: '',
   boostsFollowDefVis: false,
+  searchPaginationLimit: 40,
+  sillyFeatures: false,
+  recurseSearch: false,
+  recurseSearchLimit: 100,
   renderMisskeyMarkdown: undefined,
   renderMfmOnHover: undefined, // instance default
   conversationDisplay: undefined, // instance default

src/modules/instance.js

@@ -78,6 +78,10 @@ const defaultState = {
   soundOnNotifCustom: '',
   boostsFollowDefVis: false,
   deletePostsStreaming: true,
+  searchPaginationLimit: 40,
+  sillyFeatures: false,
+  recurseSearch: false,
+  recurseSearchLimit: 100,
   renderMisskeyMarkdown: true,
   renderMfmOnHover: false,
   conversationDisplay: 'linear',

src/modules/statuses.js

@@ -772,8 +772,8 @@ const statuses = {
       rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
         .then(rebloggedByUsers => commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }))
     },
-    search (store, { q, resolve, limit, offset, following, type }) {
+    search (store, { q, resolve, limit, offset, following, type, max_id }) {
-      return store.rootState.api.backendInteractor.search2({ q, resolve, limit, offset, following, type })
+      return store.rootState.api.backendInteractor.search2({ q, resolve, limit, offset, following, type, max_id })
         .then((data) => {
           store.commit('addNewUsers', data.accounts)
           store.commit('addNewStatuses', { statuses: data.statuses })

src/services/api/api.service.js

@@ -1402,7 +1402,7 @@ const searchUsers = ({ credentials, query }) => {
     .then((data) => data.map(parseUser))
 }
 
-const search2 = ({ credentials, q, resolve, limit, offset, following, type }) => {
+const search2 = ({ credentials, q, resolve, limit, offset, following, type, max_id }) => {
   let url = MASTODON_SEARCH_2
   let params = []
 
@@ -1430,6 +1430,10 @@ const search2 = ({ credentials, q, resolve, limit, offset, following, type }) =>
     params.push(['type', type])
   }
 
+  if (max_id) {
+    params.push(['max_id', max_id])
+  }
+
   params.push(['with_relationships', true])
 
   let queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')