chore: update

Author: zyyv

app/components/SiteFooter.vue

@@ -15,6 +15,7 @@ const commitUrl = computed(() =>
 const { stats } = useSiteStats()
 const totalViews = computed(() => stats.value.totalViews?.toLocaleString('en-US') ?? '—')
 const onlineVisitors = computed(() => stats.value.onlineVisitors?.toLocaleString('en-US') ?? '—')
+const isPresenceConnected = computed(() => stats.value.onlineVisitors !== null)
 
 const socialLinks = [
   { label: 'GitHub', href: 'https://github.com/zyyv', external: true },
@@ -44,7 +45,10 @@ function backToTop() {
             <dd>{{ totalViews }}</dd>
           </div>
           <div>
-            <dt><span class="site-footer__live-dot" aria-hidden="true" /> Online</dt>
+            <dt class="site-footer__online-label">
+              <StatusDot :active="isPresenceConnected" pulse />
+              Online
+            </dt>
             <dd>{{ onlineVisitors }}</dd>
           </div>
         </dl>
@@ -171,15 +175,10 @@ function backToTop() {
   color: color-mix(in srgb, currentColor 48%, transparent);
 }
 
-.site-footer__live-dot {
-  display: inline-block;
-  width: 0.38rem;
-  height: 0.38rem;
-  margin-right: 0.18rem;
-  border-radius: 50%;
-  background: #4f9a68;
-  box-shadow: 0 0 0 0.18rem color-mix(in srgb, #4f9a68 18%, transparent);
-  vertical-align: 0.04rem;
+.site-footer__online-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
 }
 
 .site-footer__links a {

app/components/StatusDot.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+interface Props {
+  active?: boolean
+  color?: string
+  pulse?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  active: true,
+  color: '#4f9a68',
+  pulse: false,
+})
+
+const dotStyle = computed(() => ({ '--status-dot-color': props.color }))
+</script>
+
+<template>
+  <span
+    class="status-dot"
+    :class="{
+      'status-dot--active': active,
+      'status-dot--pulse': active && pulse,
+    }"
+    :style="dotStyle"
+    aria-hidden="true"
+  />
+</template>
+
+<style scoped>
+.status-dot {
+  position: relative;
+  display: inline-block;
+  width: 0.4rem;
+  height: 0.4rem;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: color-mix(in srgb, currentColor 28%, transparent);
+}
+
+.status-dot--active {
+  background: var(--status-dot-color);
+  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--status-dot-color) 16%, transparent);
+}
+
+.status-dot--pulse::after {
+  position: absolute;
+  inset: -0.16rem;
+  border: 1px solid color-mix(in srgb, var(--status-dot-color) 58%, transparent);
+  border-radius: inherit;
+  content: '';
+  opacity: 0;
+  transform: scale(0.72);
+  animation: status-dot-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+  pointer-events: none;
+}
+
+@keyframes status-dot-pulse {
+  0% {
+    opacity: 0;
+    transform: scale(0.72);
+  }
+
+  14% {
+    opacity: 0.62;
+  }
+
+  72%,
+  100% {
+    opacity: 0;
+    transform: scale(1.55);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .status-dot--pulse::after {
+    opacity: 0.38;
+    transform: scale(1);
+    animation: none;
+  }
+}
+</style>