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/backend/src/mikro-orm.config.ts

@@ -20,7 +20,19 @@ export default defineConfig({
   metadataProvider: TsMorphMetadataProvider,
   debug: process.env.NODE_ENV !== "production",
   logger: (message) => {
+    const smartMsg = message.replace("[MikroORM] ", "");
+
+    switch (true) {
+      case smartMsg.startsWith("[info]"):
+        logger.info(message.replace("[info] ", ""));
+        break;
+      case smartMsg.startsWith("[discovery]"):
+        logger.info(message);
+        break;
+      default:
         logger.log(message);
+        break;
+    }
   },
 
   dbName: config.database.database,

packages/frontend/src/Layout.vue

@@ -14,6 +14,7 @@
         :class='$route.path === "/"
           ? "isActive"
           : ""'
+        title="ホーム"
       >
         <img :src='"icon" in serverInfo
           ? serverInfo.icon
@@ -24,9 +25,10 @@
       <RouterLink
         v-for="community of communitys"
         :to="`/community/${community.id}`"
-        :class='$route.path === `/community/${community.id}`
+        :class='$route.path.startsWith(`/community/${community.id}`)
           ? "isActive"
           : ""'
+        :title="community.name"
       >
         <img
           v-if="community.icon"
@@ -50,10 +52,13 @@
         }}
       </div>
 
-      <div class="route-main">
+      <div
-        <RouterView
+        class="route-main"
-          :key="$route.fullPath"
+        :class='isFullRoute
-        />
+          ? "full-route"
+          : ""'
+      >
+        <RouterView />
       </div>
     </div>
   </main>
@@ -151,10 +156,16 @@ main.layout {
 
 .route-main {
   display: flex;
+  flex-direction: column;
   padding: 1.25rem;
   padding-bottom: 0;
   overflow: scroll;
-  min-height: 100%;
+  height: 100%;
+}
+
+.content-main .route-main.full-route {
+  padding: 0;
+  overflow: hidden;
 }
 
 .router-progress {
@@ -190,14 +201,24 @@ import routerStatus, { title } from "@/lib/router";
 import { Icon } from "@iconify/vue";
 import Progress from "@/components/Progress.vue";
 import { communitys, serverInfo } from "@/lib/account";
-import { onBeforeUnmount, onMounted, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, watch } from "vue";
 import { createModal } from "@/lib/modal";
 import ErrorModal from "@/components/Modal/Error.vue";
 
 const router = useRouter();
 const route = useRoute();
 
-watch(route, () => {
+const isFullRoute = computed(() => route.meta.isFullRoute === true);
+
+watch(route, (to, from) => {
+  if (
+    to.matched[0]?.path === from.matched[0]?.path &&
+    from.meta.canReloadTitle === false
+  ) {
+    routerStatus.isLoad = false;
+    return false;
+  }
+  
   if (typeof route.meta.title === "string")
     title.value = route.meta.title;
 });

packages/frontend/src/lib/account.ts

@@ -6,6 +6,7 @@ await initClient();
 
 export let serverInfo = ref<ApiMap["server-info"]["response"]>(await client.value.request("server-info"));
 export let account = ref<ApiMap["me"]["response"]>(await client.value.request("me"));
+export let presentCommunity = ref<Extract<ApiMap["community/list"]["response"], { communitys: any }>["communitys"][number]>();
 
 let communitys = ref<Extract<ApiMap["community/list"]["response"], { communitys: any }>["communitys"]>([]);
 let lastLoadedCommunity = ref<string>();

packages/frontend/src/main.ts

@@ -47,11 +47,23 @@ const router = createRouter({
       component: () => import("@/routes/signin.vue"),
     },
     {
-      path: "/community/:id",
+      path: "/community/:communityId",
       meta: {
         title: "コミュニティ",
+        isFullRoute: true,
+        canReloadTitle: false,
       },
       component: () => import("@/routes/community/index.vue"),
+      children: [
+        {
+          path: "",
+          component: () => import("@/routes/community/index.inner.vue"),
+        },
+        {
+          path: ":channelId",
+          component: () => import("@/routes/community/channel.vue"),
+        },
+      ],
     },
     {
       path: "/:NotFound(.*)*",
@@ -75,6 +87,14 @@ router.afterEach((to, from) => {
     return false;
   }
 
+  if (
+    to.matched[0]?.path === from.matched[0]?.path &&
+    from.meta.canReloadTitle === false
+  ) {
+    routerStatus.isLoad = false;
+    return false;
+  }
+
   const title = to.meta.title;
 
   let serverName = "LynqChat";

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

@@ -0,0 +1,113 @@
+<template>
+  <Progress
+    v-if="isProcessing"
+    :size="20"
+    class="processing-progress"
+  />
+
+  <div
+    v-if="!isProcessing && channel"
+    class="channel"
+  >
+  </div>
+</template>
+
+<style scoped>
+.channel {
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
+}
+</style>
+
+<script lang="ts" setup>
+import { 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";
+
+const route = useRoute();
+const router = useRouter();
+const isProcessing = ref<boolean>(false);
+
+const channel = ref<Extract<ApiMap["channel/list"]["response"], { channels: any }>["channels"][number]>();
+
+if (!serverInfo.value.success) {
+  throw new Error("サーバー情報の取得に失敗しました。");
+}
+
+if (!serverInfo.value.isInitialized) {
+  router.replace("/setup/initialization");
+}
+
+if (!account.value.success) {
+  switch (account.value.error.bad) {
+    case "client":
+      router.replace("/signin");
+      break;
+    default:
+      throw new Error("アカウント情報の取得に失敗しました。");
+  }
+}
+
+(async () => {
+  isProcessing.value = true;
+
+  if (!serverInfo.value.success) {
+    throw new Error("サーバー情報の取得に失敗しました。");
+  }
+
+  const channelId = route.params.channelId;
+  if (typeof channelId !== "string") {
+    isProcessing.value = false;
+    createModal({
+      component: GoHomeError,
+      onClose: async () => await router.push("/"),
+      props: {
+        error: "不正なアクセスです。",
+      },
+    });
+    return;
+  }
+
+  if (presentCommunity.value === undefined) {
+    isProcessing.value = false;
+    createModal({
+      component: GoHomeError,
+      onClose: async () => await router.push("/"),
+      props: {
+        error: "不正なアクセスです。",
+      },
+    });
+    return;
+  }
+
+  const channelRes = await client.value.request("channel/get", {
+    id: channelId,
+  });
+
+  if (!channelRes.success) {
+    isProcessing.value = false;
+    createModal({
+      component: GoHomeError,
+      onClose: async () => await router.push("/"),
+      props: {
+        error: "チャンネルが取得できませんでした。",
+      },
+    });
+    return;
+  }
+
+  channel.value = channelRes.channel;
+
+  document.title = `${channelRes.channel.name} - ${presentCommunity.value.name} | ${serverInfo.value.name}`;
+  title.value = `${channelRes.channel.name} - ${presentCommunity.value.name}`;
+
+  isProcessing.value = false;
+})();
+</script>

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

@@ -0,0 +1,2 @@
+<template>
+</template>

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 { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
-import { account, serverInfo } from "@/lib/account";
+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>