chore: add animation status toggle

src/components/service/base/Index.vue

@@ -14,7 +14,7 @@
           {{ title }}
         </slot>
         <slot v-if="status && status.enabled" name="status" :data="data">
-          <ServiceBaseStatus :ping="data?.ping" />
+          <ServiceBaseStatus :ping="{ ...data?.ping, animation: status?.animation }" />
         </slot>
       </h3>
 

src/components/service/base/Status.vue

@@ -1,23 +1,29 @@
 <template>
-  <span class="relative inline-flex z-1 h-2.5 w-2.5 rounded-full bg-green-400" :class="color">
-    <span class="absolute -z-1 inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" :class="color" />
+  <span class="relative inline-flex z-1 h-2.5 w-2.5 rounded-full bg-green-400" :class="colorClasses">
+    <span v-if="!ping || ping.animation !== false" class="absolute -z-1 inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" :class="colorClasses" />
   </span>
 </template>
 
 <script setup lang="ts">
 export interface Props {
   ping?: {
-    status: boolean
+    status?: boolean
+    animation?: boolean
     time: number
   }
 }
 
-const props = defineProps<Props>()
-const color = computed(() => {
-  if (!props.ping) {
-    return 'bg-neutral-400'
-  }
-
-  return props.ping.status ? 'bg-green-400' : 'bg-red-400'
+const props = withDefaults(defineProps<Props>(), {
+  ping: () => ({
+    status: undefined,
+    animation: true,
+    time: 0,
+  }),
 })
+
+const colorClasses = computed(() => [
+  { 'bg-green-400': props.ping.status },
+  { 'bg-red-400': props.ping.status === false },
+  { 'bg-neutral-400': props.ping.status === undefined },
+])
 </script>

src/server/validations/service.ts

@@ -3,6 +3,7 @@ import { z } from 'zod'
 export const statusSchema = z.object({
   enabled: z.boolean().optional(),
   interval: z.number().optional(),
+  animation: z.boolean().optional(),
 })
 
 export const iconSchema = z.object({

src/types/services.d.ts

@@ -3,6 +3,7 @@ import type { Tag } from '~/types/config'
 export interface ServiceStatus {
   enabled?: boolean
   interval?: number
+  animation?: boolean
 }
 
 export interface ServiceIcon {