feat: standardize pagination for mobile view for mentions page

Author: Anthony Kinsey

src/views/Mentions.vue

@@ -77,16 +77,19 @@
         </svg>
         Mark all read
       </a>
+      <div class="pagination-slide" v-if="mentionData?.prev || mentionData?.next">
+        <div class="pagination-controls">
+          <button @click="pageResults(-1)" :disabled="!mentionData?.prev">&#10094; Prev</button>
+          <div class="page">{{currentPage}}</div>
+          <button @click="pageResults(1)" :disabled="!mentionData?.next">Next &#10095;</button>
+        </div>
+      </div>
     </div>
   </div>
-  <div class="pagination-simple" v-if="mentionData?.prev || mentiondata?.next">
-    <button @click="pageResults(-1)" :disabled="!mentionData?.prev">&#10094; Prev</button>
-    <button @click="pageResults(1)" :disabled="!mentionData?.next">Next &#10095;</button>
-  </div>
 </template>
 
 <script>
-import { reactive, toRefs } from 'vue'
+import { reactive, toRefs, computed } from 'vue'
 import { mentionsApi } from '@/api'
 import { localStoragePrefs } from '@/composables/stores/prefs'
 import humanDate from '@/composables/filters/humanDate'
@@ -139,7 +142,7 @@ export default {
     const $router = useRouter()
 
     const v = reactive({
-      currentPage: Number($route.query.page) || 1,
+      currentPage: computed(() => Number($route.query.page) || 1),
       mentionData: null,
       defaultAvatar: window.default_avatar,
       defaultAvatarShape: window.default_avatar_shape,