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

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

src/components/ActivitySearch.vue

@@ -0,0 +1,40 @@
+<template>
+  <form role="search">
+    <label for="searchFiles" class="mr-4 relative" htmlFor="searchFiles">
+      Search
+      <input
+        type="search"
+        id="searchFiles"
+        placeholder="Search Activity"
+        class="px-5 py-2 w-52 rounded-full text-sm align-middle duration-300 border bg-neutral-100 border-neutral-300 hover:border-neutral-500 focus:outline-none focus:ring focus:border-neutral-500"
+      />
+      <span
+        class="absolute top-2 bottom-0.5 right-0.5 flex justify-center items-center gap-2"
+      >
+        <IconSetting class="w-6 h-6 cursor-pointer"></IconSetting>
+        <span
+          class="w-px h-6 block after:border after:border-neutral-300 after:content-['']"
+        ></span>
+        <button class="pr-2">
+          <IconSearch class="w-6 h-6"></IconSearch>
+        </button>
+      </span>
+    </label>
+  </form>
+</template>
+
+<script setup>
+// The Lucia project.
+// Copyright 2023-2026 DSP, inc.  All rights reserved.
+// Authors:
+//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
+//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
+//   imacat.yang@dsp.im (imacat), 2023/9/23
+/**
+ * @module components/Search Search bar component with activity
+ *   search input, settings icon, and search icon button.
+ */
+
+import IconSearch from "@/components/icons/IconSearch.vue";
+import IconSetting from "@/components/icons/IconSetting.vue";
+</script>