chat wip

new-client/src/shared/components/ui/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chad-avatar" v-bind="api.getRootProps()">
+  <div class="chad-avatar" :class="{ highlighted }" v-bind="api.getRootProps()">
     <span class="chad-avatar__fallback" v-bind="api.getFallbackProps()">{{ fallback }}</span>
     <img class="chad-avatar__image" :alt="fallback" :src="src" v-bind="api.getImageProps()">
   </div>
@@ -18,6 +18,7 @@ defineProps<{
   src: string
   fallback: string
   size?: 'sm'
+  highlighted?: boolean
 }>()
 
 const service = useMachine(avatar.machine, { id: useId() })
@@ -27,24 +28,31 @@ const api = computed(() => avatar.connect(service, normalizeProps))
 
 <style lang="scss">
 .chad-avatar {
+  $self: &;
+
   outline: var(--border-w) solid var(--ink);
   outline-offset: calc(var(--border-w) * -1);
-  width: 40px;
+  width: 32px;
   aspect-ratio: 1;
 
   &__fallback {
     @include font-label;
 
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: block;
+    text-align: center;
+    line-height: 32px;
+    background-color: var(--grey-2);
+
+    #{$self}.highlighted & {
+      background-color: var(--yellow);
+    }
   }
 
   &__image {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    object-position: center;
   }
 }
 </style>

new-client/src/shared/components/ui/Button.vue

@@ -7,11 +7,14 @@
     :type="type"
     :data-full="full || undefined"
   >
-    <slot />
+    <ChadSpinner v-if="loading" class="chad-button__spinner" />
+    <slot v-else />
   </button>
 </template>
 
 <script setup lang="ts">
+import ChadSpinner from '@shared/components/ui/Spinner.vue'
+
 defineOptions({
   name: 'ChadButton',
 })
@@ -61,7 +64,6 @@ interface Props {
   }
 
   &[data-disabled],
-  &[data-loading],
   &:disabled {
     cursor: not-allowed;
     background-color: var(--grey-1);
@@ -69,6 +71,7 @@ interface Props {
   }
 
   &[data-loading] {
+    background-color: var(--grey-1);
     cursor: wait;
   }
 }

new-client/src/shared/components/ui/Spinner.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="chad-spinner" />
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'ChadSpinner',
+})
+</script>
+
+<style lang="scss">
+.chad-spinner {
+  --color1: var(--yellow);
+  --color2: var(--ink);
+
+  display: inline-block;
+  position: relative;
+  width: 36px;
+  height: 12px;
+
+  background-image: linear-gradient(
+    to right,
+    var(--color1) 0%,
+    var(--color1) 33.333%,
+    transparent 33.333%,
+    transparent 66.666%,
+    var(--color2) 66.666%,
+    var(--color2) 100%
+  );
+  background-repeat: no-repeat;
+  animation: chad-spinner 400ms infinite;
+}
+@keyframes chad-spinner {
+  from {
+    --color1: var(--yellow);
+    --color2: var(--ink);
+  }
+  50% {
+    --color1: var(--ink);
+    --color2: var(--yellow);
+  }
+}
+</style>