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

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

@@ -6,20 +6,26 @@
   />
 
   <div
-    v-if="!isProcessing && channels"
+    v-if="!isProcessing && presentCommunity && 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 class="left">
+      <div class="community-top-info">
+        {{ presentCommunity.name }}
+      </div>
+
+      <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>
     </div>
 
     <span class="border" />
@@ -32,6 +38,22 @@
   </div>
 </template>
 
+<style>
+.community-top-info {
+  display: flex;
+  gap: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--border-color);
+  padding: 1rem;
+  font-size: 1.1rem;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+</style>
+
 <style scoped>
 .processing-progress {
   margin: auto;
@@ -40,16 +62,13 @@
 .community {
   height: 100%;
   display: flex;
-  padding-left: 1rem;
-  padding-right: 1rem;
 }
 
-.channels {
+.left {
   display: flex;
   flex-direction: column;
-  padding-top: 1rem;
   box-sizing: border-box;
-  width: 16rem;
+  width: 18rem;
   height: 100%;
   border-top-right-radius: 2rem;
   border-bottom-right-radius: 2rem;
@@ -60,10 +79,22 @@
   flex-shrink: 0;
 }
 
+.channels {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex-grow: 1;
+  gap: 1rem;
+  overflow: scroll;
+  padding: 1rem 1rem 0 1rem;
+  box-sizing: border-box;
+}
+
 .channels a {
   display: flex;
   color: var(--text-color);
   text-decoration: none;
+  padding-left: 1rem;
   gap: 0.25rem;
   height: 2rem;
   border: 1px solid transparent;
@@ -101,13 +132,10 @@
 .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%;
   box-sizing: border-box;