Neues Design/Blubber: Seitenleiste noch nicht optimal

Closes #4673

Merge request studip/studip!3522

resources/assets/stylesheets/scss/blubber.scss

@@ -345,15 +345,18 @@
                 height: 50px;
                 max-height: 50px;
                 overflow: hidden;
-                padding: 10px;
+                padding: 10px 5px 10px 10px;
                 cursor: pointer;
                 color: var(--base-color);
-                font-weight: bold;
+                font-weight: 400;
                 border-left: solid 4px transparent;
 
                 &.unseen {
-                    border-color: var(--active-color);
-                    padding-left: 7px;
+                    font-weight: 700;
+
+                   .info time {
+                        font-weight: 700;
+                   }
                 }
 
                 &[v-if],
@@ -389,10 +392,30 @@
                         flex-direction: column;
                         height: 60px;
                         max-height: 60px;
+                        width: 100%;
                         overflow: hidden;
-                        .name {
+
+                        .title {
                             max-height: 40px;
                             overflow: hidden;
+                            display: flex;
+                            flex-direction: row;
+                            justify-content: space-between;
+
+                            .thread-name {
+                                flex-grow: 1;
+                            }
+                            .unseen-comments-counter {
+                                width: 20px;
+                                height: 20px;
+                                line-height: 20px;
+                                text-align: center;
+                                background-color: var(--color--red-1);
+                                font-size: 12px;
+                                font-weight: normal;
+                                border-radius: 10px;
+                                color: var(--color--font-inverted);
+                            }
                         }
                         time {
                             font-size: 0.8em;

resources/vue/components/blubber/ThreadsWidget.vue

@@ -14,8 +14,9 @@
                         <a :href="link(thread.id)">
                             <div class="avatar" :style="{ backgroundImage: 'url(' + thread.avatar + ')' }"></div>
                             <div class="info">
-                                <div class="name">
-                                    {{ thread.name }}
+                                <div class="title">
+                                    <span class="thread-name">{{ thread.name }}</span>
+                                    <span v-if="thread.unseenComments > 0" class="unseen-comments-counter">{{ thread.unseenComments }}</span>
                                 </div>
                                 <studip-date-time
                                     :timestamp="threadLatestActivity(thread)"
@@ -33,7 +34,7 @@
 
         <template #actions>
             <a :href="urlCompose" data-dialog="width=600;height=300">
-                <studip-icon shape="add" class="text-bottom" />
+                <studip-icon shape="add" />
             </a>
         </template>
     </SidebarWidget>