brutalism design

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

@@ -10,26 +10,33 @@
 
     <ChadSpinner v-if="isFetching" class="chat-messages__spinner" />
 
-    <button v-if="!arrivedState.start" class="chat-messages__scroll-to-bottom" @click="scrollToStart()">
-      <ArrowDown />
-    </button>
+    <div v-if="!arrivedState.start" class="chat-messages__floating-actions">
+      <div v-if="hasUnreadMessages" class="chat-messages__has-unread-messages">
+        New messages
+      </div>
+
+      <ChadToBottom
+        class="chat-messages__scroll-to-bottom"
+        @click="scrollToStart()"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ArrowDown } from '@lucide/vue'
 import ChadSpinner from '@shared/components/ui/Spinner.vue'
+import ChadToBottom from '@shared/components/ui/ToBottom.vue'
 import { useEventBus } from '@shared/composables/use-event-bus.ts'
 import { useChatScroll } from '@widgets/chat/composables/use-chat-scroll.ts'
 import ChatMessageGroup from '@widgets/chat/ui/ChatMessageGroup.vue'
 import { onUnmounted, ref, useTemplateRef, watch } from 'vue'
-import { useChat } from '../composables/use-chat'
+import { useChatHistory } from '../composables/use-chat-history'
 
 const eventBus = useEventBus()
 
 const scrollRef = useTemplateRef('scroll')
 
-const { messageGroups, hasMoreMessages, fetchNextPage, isFetching } = useChat()
+const { messageGroups, hasMoreMessages, loadMoreMessages, isFetching } = useChatHistory()
 
 const hasUnreadMessages = ref(false)
 
@@ -43,7 +50,7 @@ watch(() => arrivedState.end, (arrived) => {
     return
 
   if (hasMoreMessages.value) {
-    fetchNextPage()
+    loadMoreMessages()
   }
 })
 
@@ -81,31 +88,32 @@ function onNewChatMessage() {
     overflow-x: hidden;
     overflow-y: auto;
     overflow-y: overlay;
+    overflow-anchor: none;
 
     position: relative;
     max-height: 100%;
   }
 
-  &__scroll-to-bottom {
+  &__floating-actions {
     position: absolute;
-    cursor: pointer;
-    width: 40px;
-    aspect-ratio: 1;
-    text-align: center;
-    line-height: 40px;
+    display: inline-flex;
+    align-items: flex-end;
+    gap: var(--space-2);
     bottom: var(--space-4);
     right: var(--space-4);
-    outline: var(--border-w) solid var(--ink);
-    outline-offset: calc(var(--border-w) * -1);
-    border: none;
-    background-color: var(--grey-1);
-    padding: 0;
+    pointer-events: none;
+  }
 
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: var(--grey-2);
-    }
+  &__has-unread-messages {
+    @include font-micro;
+
+    background-color: var(--yellow);
+    padding: var(--space-1) var(--space-2);
+    box-shadow: var(--shadow-sm);
+  }
+
+  &__scroll-to-bottom {
+    pointer-events: auto;
   }
 }
 </style>