✨ Add TabsBar to the LayoutBig (Conversations layout)

src/ui/layouts/conversations.scss

@@ -125,9 +125,6 @@ $inner-panel-height-ratio: 0.95;
                 width: 100%;
 
                 flex-grow: 0;
-
-                // overflow: scroll;
-                // scrollbar-width: none;
             }
 
             &__panels {
@@ -155,3 +152,64 @@ $inner-panel-height-ratio: 0.95;
         }
     }
 }
+
+.tabs-bar {
+    $gap: min(1vw, 8px);
+
+    height: 100%;
+    width: 100%;
+
+    display: flex;
+    gap: $gap;
+    overflow: scroll;
+
+    scrollbar-width: none;
+
+    white-space: nowrap;
+}
+
+.tab {
+    $gap: min(1vw, 8px);
+
+    height: 100%;
+    min-width: 0px;
+    max-width: 100%;
+
+    flex-shrink: 0;
+
+    display: inline-flex;
+    align-items: center;
+    gap: $gap;
+
+    border: $border-normal;
+    border-color: get-color(primary, 90);
+    border-radius: $border-radius;
+
+    padding: calc($gap / 2) $gap;
+
+    font-size: 2vh;
+
+    background-color: get-color(greyscale, 0);
+
+    &__avatar-image {
+        height: 100%;
+        aspect-ratio: 1;
+
+        border: $border-thin;
+        border-color: get-color(greyscale, 90);
+        border-radius: $border-radius;
+
+        background-size: cover;
+    }
+
+    &__name {
+        display: inline-block;
+        margin: 0px;
+
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        cursor: default3;
+    }
+}