brutalism design

new-client/src/widgets/chat/ui/ChatMessageGroup.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="chat-message-group">
+    <ChadAvatar class="chat-message-group__avatar" src="" :fallback="initials" :highlighted="isMyMessage" />
+
+    <div class="chat-message-group__messages">
+      <ChatMessage
+        v-for="message in group.messages"
+        :key="message.id"
+        :message="message"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MessageGroup } from '@widgets/chat/composables/use-chat.ts'
+import ChadAvatar from '@shared/components/ui/Avatar.vue'
+import { useAuth } from '@shared/composables/use-auth.ts'
+import ChatMessage from '@widgets/chat/ui/ChatMessage.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  group: MessageGroup
+}>()
+
+const { me } = useAuth()
+
+const initials = computed(() => props.group.senderUsername.slice(props.group.senderUsername.length - 2))
+
+const isMyMessage = computed(() => {
+  return props.group.senderUsername === me.value?.username
+})
+</script>
+
+<style lang="scss">
+.chat-message-group {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--space-3);
+  padding-block: var(--space-3);
+  padding-inline: var(--space-6);
+
+  &__avatar {
+    align-self: flex-start;
+    position: sticky;
+    top: var(--space-3);
+  }
+}
+</style>