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

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

@@ -0,0 +1,191 @@
+<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 props = defineProps<{
+  community: string;
+}>();
+
+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("channel/create", {
+    name: name.value,
+    description: description.value,
+    community: props.community,
+  });
+
+  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", "success");
+}
+
+const cancel = () => {
+  createTopNotice({
+    props: {
+      icon: "material-symbols:error-outline-rounded",
+      iconColor: "var(--error-color)",
+      message: "キャンセルしました。",
+    },
+  });
+  emit("PleaseClose", "cancel");
+}
+</script>

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

@@ -63,9 +63,8 @@
 }
 
 .community-top-info > svg {
-  margin: auto 0;
+  width: 1rlh;
-  width: 1.25rem;
+  height: 1rlh;
-  height: 1.25rem;
 }
 
 .channel {

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", {
+  await loadChannels(communityId);
-    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;
 })();