Feat: チャンネルの作成 / Chg: チャンネルアイコンのサイズを変更

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

@@ -12,10 +12,51 @@
     <div class="left">
       <div class="community-top-info">
         <span>{{ presentCommunity.name }}</span>
+
+        <div
+          class="change-menu"
+          :title='isMenuOpen
+            ? "メニューを閉じる"
+            : "メニューを開く"'
+        >
+          <Icon
+            @click="changeMenu()"
+            :icon='isMenuOpen
+              ? "material-symbols:keyboard-arrow-up-rounded"
+              : "material-symbols:keyboard-arrow-down-rounded"'
+          />
+        </div>
+
+        <div
+          @click="changeMenu()"
+          class="menu-bg"
+          v-show="isMenuOpen"
+        />
+
+        <div
+          @click.stop
+          class="menu"
+          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 class="channels">
+        <Progress
+          v-if="isChannelsLoading"
+          class="processing-progress"
+          :size="12"
+        />
+
         <RouterLink
+          v-else
           v-for="channel of channels"
           :to="`/community/${$route.params.communityId}/${channel.id}`"
           :class='route.fullPath === `/community/${$route.params.communityId}/${channel.id}`
@@ -40,20 +81,36 @@
 
 <style>
 .community-top-info {
+  position: relative;
   display: flex;
   gap: 0.25rem;
   width: 100%;
+  height: 3.5rem;
   border-bottom: 1px solid var(--border-color);
-  padding: 1rem;
+  padding: 0 1rem;
   font-size: 1.1rem;
   font-weight: bold;
   box-sizing: border-box;
 }
 
 .community-top-info > span {
+  margin: auto 0;
+  height: 1rlh;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.community-top-info > svg,
+.change-menu,
+.change-menu > svg {
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  margin: auto 0;
 }
 </style>
 
@@ -62,6 +119,54 @@
   margin: auto;
 }
 
+.change-menu {
+  margin-left: auto;
+}
+
+.menu-bg {
+  position: fixed;
+  inset: 0;
+  width: 100dvw;
+  height: 100dvh;
+}
+
+.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;
@@ -161,11 +266,13 @@ 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";
 const route = useRoute();
 const router = useRouter();
 const isProcessing = ref<boolean>(false);
 
+const isMenuOpen = ref<boolean>(false);
+const isChannelsLoading = ref<boolean>(false);
 const channels = ref<Extract<ApiMap["channel/list"]["response"], { channels: any }>["channels"]>();
 
 if (!serverInfo.value?.success) {
@@ -186,6 +293,68 @@ if (!account.value?.success) {
   }
 }
 
+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;
+}
+
+const loadChannels = async (communityId: string) => {
+  isChannelsLoading.value = true;
+  const channelsRes = await client.value.request("channel/list", {
+    community: communityId,
+  });
+
+  if (!channelsRes.success) {
+    isChannelsLoading.value = false;
+    createModal({
+      component: GoHomeError,
+      onClose: async () => await router.push("/"),
+      props: {
+        error: "チャンネルが取得できませんでした。",
+      },
+    });
+    return;
+  }
+
+  channels.value = channelsRes.channels;
+  isChannelsLoading.value = false;
+}
+
 (async () => {
   isProcessing.value = true;
 
@@ -227,23 +396,7 @@ if (!account.value?.success) {
   document.title = `${community.community.name} | ${serverInfo.value.name}`;
   title.value = community.community.name;
 
-  const channelsRes = await client.value.request("channel/list", {
-    community: communityId,
-  });
-
-  if (!channelsRes.success) {
-    isProcessing.value = false;
-    createModal({
-      component: GoHomeError,
-      onClose: async () => await router.push("/"),
-      props: {
-        error: "チャンネルが取得できませんでした。",
-      },
-    });
-    return;
-  }
-
-  channels.value = channelsRes.channels;
+  await loadChannels(communityId);
 
   isProcessing.value = false;
 })();