Chg: MikroORMのinfoログをLoggerでもINFOとして扱うように / Chg: MikroORMのdiscoveryログをLoggerでINFOとして扱うように / New: 左側メニューにtitle属性を追加 / Del: 最上位RouterViewのkey / Fix: .route-mainのflex-directionがcolumn出ない問題 / Fix: .route-mainの高さ指定がmin-heightである問題 / Feat: コミュニティのページでチャンネルが表示できるように / Feat: チャンネルページ

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

@@ -1,32 +1,128 @@
 <template>
   <Progress
     v-if="isProcessing"
-    :size="24"
+    :size="20"
     class="processing-progress"
   />
+
+  <div
+    v-if="!isProcessing && channels"
+    class="community"
+  >
+    <div class="channels">
+      <RouterLink
+        v-for="channel of channels"
+        :to="`/community/${$route.params.communityId}/${channel.id}`"
+        :class='route.fullPath === `/community/${$route.params.communityId}/${channel.id}`
+          ? "isActive"
+          : ""'
+      >
+        <Icon icon="material-symbols:chat-rounded" />
+        <span>{{ channel.name }}</span>
+      </RouterLink>
+    </div>
+
+    <span class="border" />
+
+    <div class="community-inner">
+      <RouterView
+        :key="route.fullPath"
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .processing-progress {
   margin: auto;
 }
+
+.community {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.channels {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  width: 16rem;
+  height: 100%;
+  border-top-right-radius: 2rem;
+  border-bottom-right-radius: 2rem;
+}
+
+.channels a {
+  display: flex;
+  color: var(--text-color);
+  text-decoration: none;
+  gap: 0.25rem;
+  width: 100%;
+  height: 2rem;
+  border: 1px solid transparent;
+  border-radius: 1rem;
+  padding: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.channels a:hover,
+.channels a.isActive {
+  background-color: oklch(from var(--route-bg-color) calc(l - 0.02) c h);
+}
+
+.channels a.isActive {
+  border: 1px solid var(--border-color);
+}
+
+.channels a * {
+  margin: auto 0;
+}
+
+.channels a svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.channels a span {
+  font-size: 1.25rem;
+}
+
+.community .border {
+  width: 1px;
+  height: 100%;
+  margin-right: 1rem;
+  margin-left: 1rem;
+  background-color: var(--border-color);
+}
+
+.community .community-inner {
+  padding-top: 1rem;
+  flex-grow: 1;
+  height: 100%;
+}
 </style>
 
 <script lang="ts" setup>
-import { useRoute, useRouter } from "vue-router";
-import { account, serverInfo } from "@/lib/account";
+import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
+import { account, presentCommunity, serverInfo } from "@/lib/account";
 import client from "@/lib/client";
 import { createModal } from "@/lib/modal";
 import GoHomeError from "@/components/Modal/GoHomeError.vue";
 import { ref } from "vue";
 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";
 
 const route = useRoute();
 const router = useRouter();
-
 const isProcessing = ref<boolean>(false);
 
+const channels = ref<Extract<ApiMap["channel/list"]["response"], { channels: any }>["channels"]>();
+
 if (!serverInfo.value.success) {
   throw new Error("サーバー情報の取得に失敗しました。");
 }
@@ -52,7 +148,7 @@ if (!account.value.success) {
     throw new Error("サーバー情報の取得に失敗しました。");
   }
 
-  const communityId = route.params.id;
+  const communityId = route.params.communityId;
   if (typeof communityId !== "string") {
     isProcessing.value = false;
     createModal({
@@ -81,9 +177,29 @@ if (!account.value.success) {
     return;
   }
 
+  presentCommunity.value = community.community;
+
   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;
+
   isProcessing.value = false;
 })();
 </script>