init

frontend/src/layouts/AppLayout.vue

@@ -145,13 +145,23 @@ function onServerContextMenu(event: MouseEvent, server: Server) {
         :to="`/server/${server.id}`"
         @contextmenu="onServerContextMenu($event, server)"
       >
-        <v-avatar
-          :style="{ backgroundColor: getServerColor(server.name) }"
-          class="d-flex align-center justify-center mx-auto mb-9 font-weight-bold text-caption text-white"
-          size="28"
+        <v-badge
+          class="server-badge d-flex mx-auto mb-9"
+          :content="server.unread_count"
+          :model-value="(server.unread_count ?? 0) > 0"
+          color="primary"
+          location="bottom right"
+          offset-x="2"
+          offset-y="2"
         >
-          {{ getServerInitials(server.name) }}
-        </v-avatar>
+          <v-avatar
+            :style="{ backgroundColor: getServerColor(server.name) }"
+            class="d-flex align-center justify-center font-weight-bold text-caption text-white"
+            size="36"
+          >
+            {{ getServerInitials(server.name) }}
+          </v-avatar>
+        </v-badge>
       </router-link>
 
       <v-btn
@@ -233,4 +243,17 @@ function onServerContextMenu(event: MouseEvent, server: Server) {
   flex-direction: column;
   gap: 1rem;
 }
+
+.server-badge {
+  height: 36px;
+  width: 36px;
+}
+
+.server-badge :deep(.v-badge__badge) {
+  min-width: 22px;
+  height: 22px;
+  padding: 0 5px;
+  font-size: 0.7rem;
+  line-height: 22px;
+}
 </style>