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

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

src/components/AppHeader.vue

@@ -0,0 +1,117 @@
+<template>
+  <div id="header.vue" class="mx-auto px-4 h-14 z-50">
+    <div class="flex justify-between items-center h-full">
+      <figure>
+        <DspLogo />
+      </figure>
+      <div
+        class="flex justify-between items-center relative"
+        v-show="showMember"
+      >
+        <img
+          id="acct_mgmt_button"
+          v-if="!isHeadHovered"
+          src="@/assets/icon-head-black.svg"
+          @mouseenter="isHeadHovered = true"
+          width="32"
+          height="32"
+          @click="toggleIsAcctMenuOpen"
+          class="cursor-pointer z-50"
+          alt="user-head"
+        />
+        <img
+          id="acct_mgmt_button"
+          v-else
+          src="@/assets/icon-head-blue.svg"
+          @mouseleave="isHeadHovered = false"
+          width="32"
+          height="32"
+          @click="toggleIsAcctMenuOpen"
+          class="cursor-pointer z-50"
+          alt="user-head"
+        />
+      </div>
+    </div>
+  </div>
+</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/Header Application header with DSP logo and
+ *   user account menu toggle button.
+ */
+
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
+import emitter from "@/utils/emitter";
+import { useLoginStore } from "@/stores/login";
+import { useAcctMgmtStore } from "@/stores/acctMgmt";
+import DspLogo from "@/components/icons/DspLogo.vue";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { useConformanceStore } from "@/stores/conformance";
+import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
+
+const route = useRoute();
+
+const store = useLoginStore();
+const { logOut } = store;
+const allMapDataStore = useAllMapDataStore();
+const conformanceStore = useConformanceStore();
+const acctMgmtStore = useAcctMgmtStore();
+const { tempFilterId, temporaryData, postRuleData, ruleData } =
+  storeToRefs(allMapDataStore);
+const {
+  conformanceLogTempCheckId,
+  conformanceFilterTempCheckId,
+  conformanceFileName,
+} = storeToRefs(conformanceStore);
+
+const isHeadHovered = ref(false);
+const showMember = ref(false);
+
+const toggleIsAcctMenuOpen = () => {
+  acctMgmtStore.toggleIsAcctMenuOpen();
+};
+
+/**
+ * Handles logout with unsaved-changes confirmation for Map
+ * and Conformance pages.
+ */
+function logOutButton() {
+  if (
+    (route.name === "Map" || route.name === "CheckMap") &&
+    tempFilterId.value
+  ) {
+    // Notify Map to close the Sidebar.
+    emitter.emit("leaveFilter", false);
+    leaveFilter(false, allMapDataStore.addFilterId, false, logOut);
+  } else if (
+    (route.name === "Conformance" || route.name === "CheckConformance") &&
+    (conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)
+  ) {
+    leaveConformance(
+      false,
+      conformanceStore.addConformanceCreateCheckId,
+      false,
+      logOut,
+    );
+  } else {
+    logOut();
+  }
+}
+
+onMounted(() => {
+  if (route.name === "Login" || route.name === "NotFound404") {
+    showMember.value = false;
+  } else {
+    showMember.value = true;
+  }
+});
+</script>