feat(ui): New status page UI (#1198)

* feat(ui): New status page UI

* docs: Rename labels to extra-labels

* Fix domain expiration test

* feat(ui): Add ui.default-sort-by and ui.default-filter-by

* Change ui.header default value to Gatus

* Re-use EndpointCard in Details.vue as well to avoid duplicate code

* Fix flaky metrics test

* Add subtle green color to "Gatus"

* Remove duplicate title (tooltip is sufficient, no need for title on top of that)

* Fix collapsed group user preferences

* Update status page screenshots

web/app/src/components/Pagination.vue

@@ -1,42 +1,73 @@
 <template>
-  <div class="mt-3 flex">
-    <div class="flex-1">
-      <button v-if="currentPage < maxPages" @click="nextPage" class="bg-gray-100 hover:bg-gray-200 text-gray-500 border border-gray-200 px-2 rounded font-mono dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">&lt;</button>
-    </div>
-    <div class="flex-1 text-right">
-      <button v-if="currentPage > 1" @click="previousPage" class="bg-gray-100 hover:bg-gray-200 text-gray-500 border border-gray-200 px-2 rounded font-mono dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">&gt;</button>
-    </div>
+  <div class="flex items-center justify-between">
+    <Button
+      variant="outline"
+      size="sm"
+      :disabled="currentPage >= maxPages"
+      @click="previousPage"
+      class="flex items-center gap-1"
+    >
+      <ChevronLeft class="h-4 w-4" />
+      Previous
+    </Button>
+    
+    <span class="text-sm text-muted-foreground">
+      Page {{ currentPage }} of {{ maxPages }}
+    </span>
+    
+    <Button
+      variant="outline"
+      size="sm"
+      :disabled="currentPage <= 1"
+      @click="nextPage"
+      class="flex items-center gap-1"
+    >
+      Next
+      <ChevronRight class="h-4 w-4" />
+    </Button>
   </div>
 </template>
 
+<script setup>
+/* eslint-disable no-undef */
+import { ref, computed } from 'vue'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
 
-<script>
-export default {
-  name: 'Pagination',
-  props: {
-    numberOfResultsPerPage: Number,
-  },
-  components: {},
-  emits: ['page'],
-  methods: {
-    nextPage() {
-      this.currentPage++;
-      this.$emit('page', this.currentPage);
-    },
-    previousPage() {
-      this.currentPage--;
-      this.$emit('page', this.currentPage);
-    }
-  },
-  computed: {
-    maxPages() {
-      return Math.ceil(parseInt(window.config.maximumNumberOfResults) / this.numberOfResultsPerPage)
-    }
-  },
-  data() {
-    return {
-      currentPage: 1,
+const props = defineProps({
+  numberOfResultsPerPage: Number,
+  currentPageProp: {
+    type: Number,
+    default: 1
+  }
+})
+
+const emit = defineEmits(['page'])
+
+const currentPage = ref(props.currentPageProp)
+
+const maxPages = computed(() => {
+  // Use maximumNumberOfResults from config if available, otherwise default to 100
+  let maxResults = 100 // Default value
+  // Check if window.config exists and has maximumNumberOfResults
+  if (typeof window !== 'undefined' && window.config && window.config.maximumNumberOfResults) {
+    const parsed = parseInt(window.config.maximumNumberOfResults)
+    if (!isNaN(parsed)) {
+      maxResults = parsed
     }
   }
+  return Math.ceil(maxResults / props.numberOfResultsPerPage)
+})
+
+const nextPage = () => {
+  // "Next" should show newer data (lower page numbers)
+  currentPage.value--
+  emit('page', currentPage.value)
+}
+
+const previousPage = () => {
+  // "Previous" should show older data (higher page numbers)
+  currentPage.value++
+  emit('page', currentPage.value)
 }
 </script>