Fix: undefined参照 / Chg: コミュニティメニューをコンポーネント化

packages/frontend/src/components/CommunityMenu.vue

@@ -0,0 +1,115 @@
+<template>
+  <div
+    class="menu"
+    ref="menuElem"
+    v-show="isMenuOpen"
+  >
+    <div
+      v-for="content of menuContents"
+      @click="content.onClick()"
+    >
+      <Icon :icon="`material-symbols:${content.icon}`" />
+      <span>{{ content.name }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.menu {
+  position: absolute;
+  top: 100%;
+  left: 100%;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  height: max-content;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  transform: translateX(-100%);
+  background-color: var(--bg-sub-color);
+  border: 1px solid var(--border-color);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.menu > div {
+  display: flex;
+  cursor: pointer;
+  width: 100%;
+  height: calc(1rlh + calc(0.75rem * 2));
+  box-sizing: border-box;
+  padding: 0.75rem 1rem;
+  gap: 0.25rem;
+}
+
+.menu > div:hover {
+  background-color: var(--bg-color);
+}
+
+.menu > div > svg {
+  width: 1rlh;
+  height: 1rlh;
+  margin: auto 0;
+}
+</style>
+
+<script lang="ts" setup>
+import { createModal } from "@/lib/modal";
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Icon } from "@iconify/vue";
+import GoHomeError from "@/components/Modal/GoHomeError.vue";
+import CreateChannel from "@/components/Modal/CreateChannel.vue";
+
+const props = defineProps<{
+  loadChannels: (communityId: string) => Promise<void>;
+}>();
+
+const isMenuOpen = defineModel<boolean>("isMenuOpen");
+const isProcessing = defineModel<boolean>("isProcessing");
+
+const menuElem = ref<HTMLDivElement | null>(null);
+defineExpose({
+  menuElem,
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const createChannel = () => {
+  isMenuOpen.value = false;
+
+  const communityId = route.params.communityId;
+  if (typeof communityId !== "string") {
+    isProcessing.value = false;
+    createModal({
+      component: GoHomeError,
+      onClose: async () => await router.push("/"),
+      props: {
+        error: "不正なアクセスです。",
+      },
+    });
+    return;
+  }
+
+  createModal({
+    component: CreateChannel,
+    onClose: (result: "success" | "cancel") => {
+      if (result === "success") {
+        props.loadChannels(communityId);
+      }
+    },
+    props: {
+      community: communityId,
+    },
+  });
+}
+
+const menuContents = [
+  {
+    name: "チャンネルを作成",
+    icon: "add-2-rounded",
+    onClick: createChannel,
+  },
+];
+</script>

packages/frontend/src/routes/community/channel.vue

@@ -334,6 +334,7 @@ const send = async (e: Event) => {
 
   await new Promise<void>(resolve => setTimeout(resolve, 0));
   const messagesElem = document.querySelector(".messages")!;
+  if (messagesElem)
     messagesElem.scrollTop = messagesElem.scrollHeight;
 }
 

packages/frontend/src/routes/community/index.vue

@@ -27,19 +27,12 @@
           />
         </div>
 
-        <div
-          class="menu"
+        <CommunityMenu
+          :load-channels="loadChannels"
+          v-model:is-menu-open="isMenuOpen"
+          v-model:is-processing="isProcessing"
           ref="menuElem"
-          v-show="isMenuOpen"
-        >
-          <div
-            v-for="content of menuContents"
-            @click="content.onClick()"
-          >
-            <Icon :icon="`material-symbols:${content.icon}`" />
-            <span>{{ content.name }}</span>
-          </div>
-        </div>
+        />
       </div>
 
       <div
@@ -122,43 +115,6 @@
   margin-left: auto;
 }
 
-.menu {
-  position: absolute;
-  top: 100%;
-  left: 100%;
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  height: max-content;
-  overflow: hidden;
-  border-radius: 0.5rem;
-  transform: translateX(-100%);
-  background-color: var(--bg-sub-color);
-  border: 1px solid var(--border-color);
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.menu > div {
-  display: flex;
-  cursor: pointer;
-  width: 100%;
-  height: calc(1rlh + calc(0.75rem * 2));
-  box-sizing: border-box;
-  padding: 0.75rem 1rem;
-  gap: 0.25rem;
-}
-
-.menu > div:hover {
-  background-color: var(--bg-color);
-}
-
-.menu > div > svg {
-  width: 1rlh;
-  height: 1rlh;
-  margin: auto 0;
-}
-
 .community {
   height: 100%;
   display: flex;
@@ -262,14 +218,14 @@ import Progress from "@/components/Progress.vue";
 import { title } from "@/lib/router";
 import type ApiMap from "lynqchat-js/1.0.0-alpha.0/map";
 import { Icon } from "@iconify/vue";
-import CreateChannel from "@/components/Modal/CreateChannel.vue";
+import CommunityMenu from "@/components/CommunityMenu.vue";
 
 const route = useRoute();
 const router = useRouter();
 const isProcessing = ref<boolean>(false);
 
 const isMenuOpen = ref<boolean>(false);
-const menuElem = ref<HTMLElement | null>(null);
+const menuElem = ref<InstanceType<typeof CommunityMenu> | null>(null);
 
 const isChannelsLoading = ref<boolean>(false);
 const channels = ref<Extract<ApiMap["channel/list"]["response"], { channels: any }>["channels"]>();
@@ -293,7 +249,7 @@ if (!account.value?.success) {
 }
 
 const handleOutsideClick = (event: any) => {
-  if (menuElem.value && !menuElem.value.contains(event.target)) {
+  if (menuElem.value?.menuElem && !menuElem.value.menuElem.contains(event.target)) {
     isMenuOpen.value = false;
   }
 }
@@ -311,42 +267,6 @@ onBeforeUnmount(() => {
   window.removeEventListener("click", handleOutsideClick);
 });
 
-const createChannel = () => {
-  isMenuOpen.value = false;
-
-  const communityId = route.params.communityId;
-  if (typeof communityId !== "string") {
-    isProcessing.value = false;
-    createModal({
-      component: GoHomeError,
-      onClose: async () => await router.push("/"),
-      props: {
-        error: "不正なアクセスです。",
-      },
-    });
-    return;
-  }
-
-  createModal({
-    component: CreateChannel,
-    onClose: (result: "success" | "cancel") => {
-      if (result === "success") {
-        loadChannels(communityId);
-      }
-    },
-    props: {
-      community: communityId,
-    },
-  });
-}
-
-const menuContents = [
-  {
-    name: "チャンネルを作成",
-    icon: "add-2-rounded",
-    onClick: createChannel,
-  },
-];
 const changeMenu = () => {
   isMenuOpen.value = !isMenuOpen.value;
 }