✨ Add a first Conversations component

src/ui/components/conversations.scss

@@ -0,0 +1,305 @@
+@import "../base.scss";
+@import "./_panel.scss";
+@import "./button.scss";
+
+@mixin button-class {
+    button {
+        @include button(secondary, 90);
+        width: 100%;
+        max-height: 128px;
+    }
+}
+
+.account {
+    $colum-spacing: 5%;
+    $col-width: 8.75%;
+    $button-width: 20%;
+    $button-height: calc(100% / 3);
+    $buttons-row-margin-top: 10%;
+
+    height: 100%;
+    width: 100%;
+
+    display: grid;
+    grid-template-columns: auto $colum-spacing repeat(2, calc($button-width/2)) $colum-spacing $button-width $colum-spacing $button-width;
+    grid-template-rows: 30% auto $button-height;
+    row-gap: 5%;
+    grid-template-areas:
+        "avatar . state name name name name name"
+        "avatar . status status status status status status"
+        "avatar . spaces spaces . chat . room"
+    ;
+
+    &__avatar {
+        grid-area: avatar;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        border: $border-normal;
+        border-radius: $border-radius;
+
+        background-size: cover;
+        background-position: center;
+    }
+
+    &__presence-state {
+        grid-area: state;
+
+        svg {
+            height: 100%;
+            width: 100%;
+
+            stroke: get-color(greyscale, 90);
+        }
+
+        &.online {
+            svg {
+                fill: get-color(primary, 100);
+            }
+        }
+        &.offline {
+            svg {
+                fill: get-color(ternary, 100);
+            }
+        }
+        &.unavailable {
+            svg {
+                fill: get-color(greyscale, 80);
+            }
+        }
+    }
+
+    &__display-name {
+        grid-area: name;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        p {
+            font-size: 2.5vh;
+            margin: 0;
+            text-align: center;
+        }
+    }
+
+    &__status {
+        grid-area: status;
+    }
+
+    @mixin extra-marged-button() {
+        @include button-class();
+    }
+
+    &__spaces {
+        grid-area: spaces;
+
+        @include extra-marged-button();
+    }
+
+    &__chat {
+        grid-area: chat;
+
+        @include extra-marged-button();
+    }
+
+    &__room {
+        grid-area: room;
+
+        @include extra-marged-button();
+    }
+}
+
+.spaces {
+    $gap: 1%;
+    $spaces-to-display: 5;
+
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    gap: $gap;
+
+    overflow-y: scroll;
+    // TODO: Manage android, Safari, ...
+    scrollbar-width: none;
+
+    $space-height: calc((100% - (($spaces-to-display - 1) * (1%))) / $spaces-to-display);
+
+    --space-height: #{$space-height};
+}
+
+.space {
+    $gap: 5%;
+    $vertical-padding: 1%;
+    $horizontal-padding: 1%;
+
+    height: var(--space-height);
+    width: 100%;
+
+    flex-shrink: 0;
+
+    border: $border-normal;
+    border-color: get-color(primary, 100);
+    border-radius: $border-radius;
+
+    padding: $vertical-padding $horizontal-padding;
+
+    $name-height: 15%;
+    $conversation-name-height: 15%;
+
+    display: grid;
+
+    grid-template-columns: 100%;
+    grid-template-rows: $name-height $gap auto 0% 0%;
+    grid-template-areas:
+        "name"
+        "."
+        "conversations-carousel"
+        "."
+        "conversation-name"
+    ;
+
+    transition: $transition-duration;
+
+    &.display-conversation-name {
+        grid-template-rows: $name-height $gap auto $gap $conversation-name-height;
+    }
+
+    cursor: default;
+
+    p {
+        margin: 0;
+    }
+
+    &__name {
+        grid-area: name;
+
+        display: flex;
+        align-items: center;
+        justify-content: left;
+
+        font-size: 2vh;
+    }
+
+    &__conversations-carousel {
+        grid-area: conversations-carousel;
+
+        display: flex;
+        flex-flow: row;
+        gap: 1%;
+
+        overflow-x: scroll;
+
+        // TODO: Manage android, Safari, ...
+        scrollbar-width: none;
+    }
+
+    &__conversation-name {
+        grid-area: conversation-name;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        font-size: 2vh;
+    }
+}
+
+.conversation-avatar {
+    height: 100%;
+    aspect-ratio: 1;
+
+    flex-shrink: 0;
+
+    border: $border-thin;
+    border-radius: $border-radius;
+
+    overflow: hidden;
+
+    filter: brightness(90%);
+
+    &.selected {
+        filter: brightness(120%);
+    }
+
+    &__image {
+        height: 100%;
+        width: 100%;
+
+        background-size: cover;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        font-size: 6vh;
+        color: get-color(primary, 80);
+    }
+
+    &__invited-badge {
+        $height: 20%;
+
+        height: $height;
+        width: 100%;
+
+        position: relative;
+        top: calc($height * -1);
+
+        color: get-color(greyscale, 0);
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        font-size: 1.5vh;
+
+        background-color: get-color(ternary, 100);
+    }
+}
+
+.search {
+    height: 100%;
+    width: 100%;
+
+    display: flex;
+    gap: 5%;
+
+    &__button {
+        @include button-class();
+
+        width: 20%;
+
+        flex-shrink: 0;
+    }
+}
+
+.conversations {
+    @include panel();
+
+    $gap: 1%;
+    $account-height: 15%;
+    $search-height: 5%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: $gap;
+
+    &__account {
+        height: $account-height;
+        max-height: 384px;
+    }
+
+    &__spaces {
+        min-height: calc(100% - $account-height - $search-height - (2 * $gap));
+    }
+
+    &__search {
+        height: $search-height;
+        max-height: 128px;
+    }
+}