added support for discussions on applications

api/index.js

@@ -12,21 +12,32 @@ app.get('/', (req, res) => {
 })
 
 var application;
+var applicationMessages = [];
 
 app.post('/application', (req, res) => {
   data = req.body
   application = data;
   console.log(data);
   res.send('Application received')
-})
+});
 
 app.get('/me/application', (req, res) => {
   if (application) {
-    res.send(application);
+    let data = {
+      "app": application, 
+      "messages": applicationMessages
+    }
+    res.send(data);
   }
   else {
     res.status(204).send();
   }
+});
+
+app.post('/application/message', (req, res) => {
+  data = req.body
+  applicationMessages.push(data);
+  res.status(200);
 })
 
 

ui/src/components/application/ApplicationChat.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { Form } from 'vee-validate'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import Textarea from '@/components/ui/textarea/Textarea.vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+const props = defineProps<{
+  messages: Array<Record<string, any>>
+}>()
+
+const emit = defineEmits<{
+  (e: 'post', text: string): void
+}>()
+
+const commentSchema = toTypedSchema(
+  z.object({
+    text: z.string().trim().min(1, 'Required').max(2000, 'Max 2000 characters'),
+  })
+)
+
+// vee-validate passes (values, actions) to @submit
+function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => void }) {
+  emit('post', values.text.trim())
+  resetForm()
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <Form :validation-schema="commentSchema" @submit="onSubmit">
+      <FormField name="text" v-slot="{ componentField }">
+        <FormItem>
+          <FormLabel class="sr-only">Comment</FormLabel>
+          <FormControl>
+            <Textarea
+              v-bind="componentField"
+              rows="3"
+              placeholder="Write a comment…"
+              class="bg-neutral-800 resize-none w-full"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+
+      <!-- Button below, right-aligned -->
+      <div class="mt-2 flex justify-end">
+        <Button type="submit">Post</Button>
+      </div>
+    </Form>
+
+    <!-- Existing posts -->
+    <div class="space-y-3">
+      <div
+        v-for="(m, i) in props.messages"
+        :key="m.id ?? i"
+        class="rounded-md border border-neutral-800 p-3"
+      >
+        <p class="text-sm whitespace-pre-wrap">{{ m.text ?? m.message ?? '' }}</p>
+      </div>
+    </div>
+  </div>
+</template>