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

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

src/components/ActionButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <button
+    class="button-component w-[80px] h-[32px] rounded-full flex text-[#666666] border-[1px] border-[#666666] justify-center items-center bg-[#FFFFFF] hover:text-[#0099FF] hover:border-[#0099FF] focus:text-[#0099FF] focus:border-[#0099FF] cursor-pointer"
+    :class="{
+      ring: isPressed,
+      'ring-[#0099FF]': isPressed,
+      'ring-opacity-30': isPressed,
+    }"
+    @mousedown="onMousedown"
+    @mouseup="onMouseup"
+  >
+    {{ buttonText }}
+  </button>
+</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/Button Outlined button component with
+ *   press-state ring effect.
+ */
+
+import { ref } from "vue";
+
+defineProps({
+  buttonText: {
+    type: String,
+    required: false,
+  },
+});
+
+const isPressed = ref(false);
+
+const onMousedown = () => {
+  isPressed.value = true;
+};
+
+const onMouseup = () => {
+  isPressed.value = false;
+};
+</script>