Feat: #9 コミュニティの作成 / Chg: 選択可能な要素 / Enhance: RouterViewのkey / Del: canReloadTitle / Enhance: CSSの>を使用しない子要素セレクタを廃止 / Feat: 自動更新するメッセージの相対時刻

packages/frontend/src/Layout.vue

@@ -41,6 +41,15 @@
           icon="material-symbols:groups-rounded"
         />
       </RouterLink>
+
+      <div
+        @click="createCommunity()"
+        title="コミュニティを作成"
+      >
+        <Icon
+          icon="material-symbols:add-2-rounded"
+        />
+      </div>
     </div>
 
     <div class="content-main">
@@ -60,7 +69,7 @@
           ? "full-route"
           : ""'
       >
-        <RouterView />
+        <RouterView :key='$route.fullPath.split("/")[2] ?? $route.fullPath' />
       </div>
     </div>
   </main>
@@ -105,9 +114,11 @@ main.layout {
   -webkit-user-select: none;
 }
 
-.left-menu a {
+.left-menu > a,
+.left-menu > div {
   display: block;
   position: relative;
+  cursor: pointer;
   z-index: 0;
   border-radius: 0.5rem;
   border: 1px solid transparent;
@@ -117,7 +128,12 @@ main.layout {
   transition: background-color 200ms ease-out;
 }
 
-.left-menu a * {
+.left-menu > div {
+  margin-top: auto;
+}
+
+.left-menu > a > *,
+.left-menu > div > * {
   font-size: 3rem;
   padding: 0.25rem;
   border-radius: 0.5rem;
@@ -130,7 +146,7 @@ main.layout {
   box-sizing: border-box;
 }
 
-.left-menu a::before {
+.left-menu > a::before {
   content: "";
   display: block;
   position: absolute;
@@ -144,16 +160,17 @@ main.layout {
   transition: all 200ms ease-out;
 }
 
-.left-menu a.isActive::before {
+.left-menu > a.isActive::before {
   background-color: var(--text-color);
 }
 
-.left-menu a:hover,
-.left-menu a.isActive {
+.left-menu > a:hover,
+.left-menu > a.isActive,
+.left-menu > div:hover {
   background-color: var(--bg-sub-color);
 }
 
-.left-menu a.isActive {
+.left-menu > a.isActive {
   border: 1px solid var(--border-color);
 }
 
@@ -191,7 +208,7 @@ main.layout {
   box-sizing: border-box;
 }
 
-.content-main .route-main.full-route {
+.content-main > .route-main.full-route {
   padding: 0;
   overflow: hidden;
 }
@@ -232,21 +249,14 @@ import { communitys, serverInfo } from "@/lib/account";
 import { computed, onBeforeUnmount, onMounted, watch } from "vue";
 import { createModal } from "@/lib/modal";
 import ErrorModal from "@/components/Modal/Error.vue";
+import CreateCommunity from "@/components/Modal/CreateCommunity.vue";
 
 const router = useRouter();
 const route = useRoute();
 
 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;
-  }
-  
+watch(route, () => {
   if (typeof route.meta.title === "string")
     title.value = route.meta.title;
 });
@@ -290,4 +300,11 @@ onBeforeUnmount(() => {
   window.removeEventListener("error", handleError);
   window.removeEventListener("unhandledrejection", handleError);
 });
+
+const createCommunity = () => {
+  createModal({
+    component: CreateCommunity,
+  });
+  return;
+}
 </script>

packages/frontend/src/components/Message.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="message">
+  <div class="message" ref="messageElem">
     <img
       v-if="message.createdBy.icon"
       :src="message.createdBy.icon"
@@ -18,7 +18,7 @@
         <span
           class="time"
           :title="new Date(message.createdAt).toLocaleString()"
-        >{{ DateParse(message.createdAt) }}</span>
+        >{{ parsedDate }}</span>
       </div>
 
       <span class="main-text" v-html='message.message.replaceAll("\n", "<br>")' />
@@ -70,6 +70,8 @@
 .content > div {
   display: flex;
   gap: 0.25rem;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .username {
@@ -120,6 +122,7 @@ import { Icon } from "@iconify/vue";
 import type ApiMap from "lynqchat-js/1.0.0-alpha.0/map";
 import ErrorModal from "@/components/Modal/Error.vue";
 import Confirm from "@/components/Modal/Confirm.vue";
+import { inject, onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue";
 
 const props = defineProps<{
   message: Extract<ApiMap["message/list"]["response"], { messages: any }>["messages"][number];
@@ -184,4 +187,42 @@ const deleteMessage = async () => {
     },
   });
 }
+
+const now = inject<Ref<Date>>("now")!;
+const parsedDate = ref<string>();
+const messageElem = ref<HTMLElement | null>(null);
+const isVisible = ref(false);
+let observer: IntersectionObserver;
+onMounted(() => {
+  if (!messageElem.value)
+    return;
+
+  observer = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting)
+        continue;
+
+      isVisible.value = true;
+
+      observer.unobserve(entry.target);
+    }
+  }, {
+    rootMargin: "100px 0px",
+  });
+
+  observer.observe(messageElem.value);
+});
+
+const stopWatch = watch([isVisible, now], ([visible, currentNow]) => {
+  if (visible) {
+    parsedDate.value = DateParse(props.message.createdAt, currentNow);
+  }
+}, {
+  immediate: true,
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  stopWatch();
+});
 </script>

packages/frontend/src/components/Modal/CreateCommunity.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="modal">
+    <span class="title">コミュニティを作成</span>
+
+    <form novalidate @submit="submit">
+      <Input
+        label="コミュニティ名"
+        autocomplete="userid"
+        v-model="name"
+      >
+        <span
+          class="input-issue"
+          v-if="nameIssue"
+        >
+          <Icon icon="material-symbols:error-outline-rounded" />
+          {{ nameIssue.message }}
+        </span>
+      </Input>
+
+      <Textarea
+        label="説明文"
+        v-model="description"
+      >
+        <span
+          class="input-issue"
+          v-if="descriptionIssue"
+        >
+          <Icon icon="material-symbols:error-outline-rounded" />
+          {{ descriptionIssue.message }}
+        </span>
+      </Textarea>
+
+      <div>
+        <Button
+          name="作成"
+          type="submit"
+          color="accent"
+          :disabled="!result.success || isProcessing"
+        />
+
+        <Button
+          name="キャンセル"
+          @click="cancel()"
+          color="default"
+          :disabled="isProcessing"
+        />
+      </div>
+    </form>
+
+    <span
+      v-if="error"
+      class="error"
+    >
+      コミュニティの作成に失敗しました。
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.modal {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.25rem;
+  padding: 4rem;
+  gap: 0.75rem;
+}
+
+.title {
+  font-size: 1.4rem;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.input,
+.textarea {
+  width: 100%;
+}
+
+.input-issue {
+  display: flex;
+  gap: 0.25rem;
+  font-size: 0.85rem;
+  color: var(--error-color);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.input-issue svg {
+  font-size: 1rem;
+  margin: auto 0;
+}
+
+form > div {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.error {
+  margin: 0 auto;
+  font-size: 1rem;
+  color: var(--error-color);
+}
+
+.error.isHidden {
+  visibility: hidden;
+}
+</style>
+
+<script setup lang="ts">
+import Input from "@/components/Input.vue";
+import Textarea from "@/components/Textarea.vue";
+import Button from "@/components/Button.vue";
+import { getIssueFromPath } from "@/lib/validation";
+import { Icon } from "@iconify/vue";
+import { computed, ref } from "vue";
+import z from "zod/v3";
+import client from "@/lib/client";
+import { createTopNotice } from "@/lib/modal";
+import { reloadCommunitys } from "@/lib/account";
+
+const name = ref<string>("");
+const description = ref<string>("");
+const nameIssue = computed(() => getIssueFromPath("name", result.value));
+const descriptionIssue = computed(() => getIssueFromPath("description", result.value));
+
+const schema = z.object({
+  name: z.string({ message: "文字列で入力してください。" })
+    .trim().min(1, "この項目は必須です。")
+    .max(20, "20文字以内で入力してください。"),
+  description: z.string({ message: "文字列で入力してください。" })
+    .trim().min(1, "この項目は必須です。")
+    .max(4096, "4096文字以内で入力してください。"),
+});
+
+const result = computed(() => schema.safeParse({
+  name: name.value,
+  description: description.value,
+}));
+
+const isProcessing = ref<boolean>(false);
+const error = ref<boolean>(false);
+const emit = defineEmits();
+const submit = async (e: Event) => {
+  e.preventDefault();
+  isProcessing.value = true;
+  const res = await client.value.request("community/create", {
+    name: name.value,
+    description: description.value,
+  });
+
+  if (!res.success) {
+    error.value = true;
+    await new Promise<void>(resolve => setTimeout(resolve, 1000));
+    error.value = false;
+    isProcessing.value = false;
+    return;
+  }
+
+  await reloadCommunitys();
+  createTopNotice({
+    props: {
+      icon: "material-symbols:check-circle-rounded",
+      iconColor: "var(--success-color)",
+      message: "コミュニティを作成しました。",
+    },
+  });
+  emit("PleaseClose");
+}
+
+const cancel = () => {
+  createTopNotice({
+    props: {
+      icon: "material-symbols:error-outline-rounded",
+      iconColor: "var(--error-color)",
+      message: "キャンセルしました。",
+    },
+  });
+  emit("PleaseClose");
+}
+</script>

packages/frontend/src/global.css

@@ -69,4 +69,6 @@ label {
   height: fit-content;
   max-width: 70dvw;
   max-height: 90dvh;
+  user-select: none;
+  -webkit-user-select: none;
 }

packages/frontend/src/main.ts

@@ -51,7 +51,6 @@ const router = createRouter({
       meta: {
         title: "コミュニティ",
         isFullRoute: true,
-        canReloadTitle: false,
       },
       component: () => import("@/routes/community/index.vue"),
       children: [
@@ -87,14 +86,6 @@ 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

@@ -126,7 +126,7 @@ import { account, presentCommunity, serverInfo } from "@/lib/account";
 import client from "@/lib/client";
 import { createModal, createTopNotice } from "@/lib/modal";
 import GoHomeError from "@/components/Modal/GoHomeError.vue";
-import { ref } from "vue";
+import { onMounted, provide, 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";
@@ -325,6 +325,14 @@ const deleteMessage = (data: { id: string }) => {
     messages.value = messages.value.toSpliced(index, 1);
 }
 
+const now = ref(new Date());
+onMounted(() => {
+  setInterval(() =>
+    now.value = new Date()
+  , 1000);
+});
+provide("now", now);
+
 (async () => {
   isProcessing.value = true;
 

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

@@ -26,7 +26,7 @@
 
     <div class="community-inner">
       <RouterView
-        :key="route.fullPath"
+        :key="route.matched[1]?.path"
       />
     </div>
   </div>
@@ -72,6 +72,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .channels a:hover,