Rename single-word Vue files to multi-word names and update references

Co-Authored-By: Codex <codex@openai.com>

src/components/StatusBadge.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    class="status-badge rounded-full max-w-[95px] w-fit px-3 inline-flex items-center text-[#ffffff] text-[14px] mr-2"
+    :class="{
+      'badge-activated': isActivated,
+      'badge-deactivated': !isActivated,
+      'bg-[#0099FF]': isActivated,
+      'bg-[#C9CDD4]': !isActivated,
+    }"
+  >
+    {{ displayText }}
+  </div>
+</template>
+
+<script setup>
+// The Lucia project.
+// Copyright 2024-2026 DSP, inc.  All rights reserved.
+// Authors:
+//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
+//   imacat.yang@dsp.im (imacat), 2023/9/23
+/**
+ * @module components/Badge Status badge component that displays
+ *   an activated/deactivated state with colored background.
+ */
+
+defineProps({
+  isActivated: {
+    type: Boolean,
+    required: true,
+    default: true,
+  },
+  displayText: {
+    type: String,
+    required: true,
+    default: "Status",
+  },
+});
+</script>