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/ui/badge/Badge.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :class="combineClasses(badgeVariants({ variant }), $attrs.class ?? '')">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+/* eslint-disable no-undef */
+import { cva } from 'class-variance-authority'
+import { combineClasses } from '@/lib/utils'
+
+defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+})
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+        success: 'border-transparent bg-green-500 text-white',
+        warning: 'border-transparent bg-yellow-500 text-white',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+</script>