chat WIP

client/app/components/chat/ChatEditor.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="chat-editor">
+    <PrimeTextarea v-model="msg" />
+    <PrimeButton :disabled="!msg" @click="handleSend()">
+      Send
+    </PrimeButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Emits {
+  (e: 'send', msg: string): void
+}
+
+const emit = defineEmits<Emits>()
+
+const msg = ref<string | undefined>()
+
+function handleSend() {
+  emit('send', msg.value!)
+
+  msg.value = ''
+}
+</script>
+
+<style lang="scss">
+
+</style>

client/app/components/chat/ChatMessage.vue

@@ -0,0 +1,27 @@
+<template>
+  <PrimeCard>
+    <template #header>
+      <span class="font-bold">
+        {{ username }}
+      </span>
+    </template>
+    <template #content>
+      {{ message }}
+    </template>
+    <template #footer>
+      {{ createdAt }}
+    </template>
+  </PrimeCard>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  username: string
+  message: string
+  createdAt: Date
+}
+
+defineProps<Props>()
+</script>
+
+<style lang="scss"></style>

client/app/components/chat/ChatWidget.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="chat-tabs">
+    <div class="chat-tabs__messages">
+      <ChatMessage v-for="msg in messages" :key="msg.id" :created-at="msg.createdAt" :username="msg.username" :message="msg.message" />
+    </div>
+
+    <PrimeTabs :value="channels[0]">
+      <PrimeTabList>
+        <PrimeTab v-for="channel in channels" :key="channel" :value="channel">
+          Channel: {{ channel }}
+        </PrimeTab>
+      </PrimeTabList>
+      <PrimeTabPanels>
+        <PrimeTabPanel :value="channel">
+          <ChatEditor />
+        </PrimeTabPanel>
+      </PrimeTabPanels>
+    </PrimeTabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const {
+  channel,
+
+  messages,
+  channels,
+} = useChat()
+</script>
+
+<style lang="scss" scoped>
+
+</style>