Chg: コミュニティ・チャンネルのUI

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

@@ -9,44 +9,51 @@
     v-if="!isProcessing && channel"
     class="channel"
   >
-    <div class="messages" @scroll.passive="messagesScroll">
-      <div class="none-message" v-if="messages.length === 0">
-        <span>何ということでしょう！！</span>
-        <span>メッセージがありませんね！！</span>
-      </div>
-
-      <Progress
-        v-if="isLoading"
-        :size="10"
-        class="loading-progress"
-      />
-
-      <Message
-        v-for="message of messages"
-        @deleteMessage="deleteMessage"
-        :key="message.id"
-        :message="message"
-      />
+    <div class="community-top-info">
+      <Icon icon="material-symbols:chat-rounded" />
+      {{ channel.name }}
     </div>
 
-    <form>
-      <textarea
-        @input="resize"
-        @keydown.ctrl.enter="send"
-        class="message-input"
-        rows="1"
-        v-model="message"
-        :disabled="isSending"
-        :placeholder="`${channel.name}に送信`"
-      />
+    <div class="main">
+      <div class="messages" @scroll.passive="messagesScroll">
+        <div class="none-message" v-if="messages.length === 0">
+          <span>何ということでしょう！！</span>
+          <span>メッセージがありませんね！！</span>
+        </div>
 
-      <Icon
-        @click="send"
-        :icon='isSending
-          ? "line-md:loading-twotone-loop"
-          : "material-symbols:send-rounded"'
-      />
-    </form>
+        <Progress
+          v-if="isLoading"
+          :size="10"
+          class="loading-progress"
+        />
+
+        <Message
+          v-for="message of messages"
+          @deleteMessage="deleteMessage"
+          :key="message.id"
+          :message="message"
+        />
+      </div>
+
+      <form>
+        <textarea
+          @input="resize"
+          @keydown.ctrl.enter="send"
+          class="message-input"
+          rows="1"
+          v-model="message"
+          :disabled="isSending"
+          :placeholder="`${channel.name}に送信`"
+        />
+
+        <Icon
+          @click="send"
+          :icon='isSending
+            ? "line-md:loading-twotone-loop"
+            : "material-symbols:send-rounded"'
+        />
+      </form>
+    </div>
   </div>
 </template>
 
@@ -55,6 +62,12 @@
   margin: auto;
 }
 
+.community-top-info svg {
+  margin: auto 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .channel {
   display: flex;
   flex-direction: column;
@@ -62,6 +75,13 @@
   height: 100%;
 }
 
+.main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 1rem;
+}
+
 .messages {
   display: flex;
   flex-direction: column;
@@ -91,7 +111,6 @@
   display: flex;
   gap: 0.5rem;
   padding: 1rem;
-  margin-bottom: 1rem;
   border-radius: 1rem;
   background-color: var(--bg-sub-color);
 }