Supported public vs internal application comments, and moved some type dependencies to the shared lib

ui/src/components/application/ApplicationChat.vue

@@ -11,13 +11,18 @@ import {
 import Textarea from '@/components/ui/textarea/Textarea.vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
+import { useAuth } from '@/composables/useAuth'
+import { CommentRow } from '@shared/types/application'
+import { Dot } from 'lucide-vue-next'
+import { ref } from 'vue'
 
 const props = defineProps<{
-  messages: Array<Record<string, any>>
+  messages: CommentRow[]
 }>()
 
 const emit = defineEmits<{
   (e: 'post', text: string): void
+  (e: 'postInternal', text: string): void
 }>()
 
 const commentSchema = toTypedSchema(
@@ -26,9 +31,14 @@ const commentSchema = toTypedSchema(
   })
 )
 
+const submitMode = ref("public");
+
 // vee-validate passes (values, actions) to @submit
 function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => void }) {
-  emit('post', values.text.trim())
+  if (submitMode.value === "internal")
+    emit('postInternal', values.text.trim())
+  else
+    emit('post', values.text.trim())
   resetForm()
 }
 </script>
@@ -48,25 +58,31 @@ function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => vo
       </FormField>
 
       <!-- Button below, right-aligned -->
-      <div class="mt-2 flex justify-end">
-        <Button type="submit">Post</Button>
+      <div class="mt-2 flex justify-end gap-2">
+        <Button type="submit" @click="submitMode = 'internal'" variant="outline">Post (Internal)</Button>
+        <Button type="submit" @click="submitMode = 'public'">Post</Button>
       </div>
     </Form>
 
     <!-- Existing posts -->
     <div class="space-y-3">
-      <div v-for="(message, i) in props.messages" :key="message.id ?? i"
-        class="rounded-md border border-neutral-800 p-3 space-y-5">
+      <div v-for="(message, i) in props.messages" :key="message.comment_id ?? i" class="rounded-md border p-3 space-y-5"
+        :class="message.admin_only ? 'border-amber-300/70' : 'border-neutral-800'">
         <!-- Comment header -->
         <div class="flex justify-between">
-          <p>{{ message.poster_name }}</p>
+          <div class="flex">
+            <p>{{ message.poster_name }}</p>
+            <p v-if="message.admin_only" class="flex">
+              <Dot /><span class="text-amber-300">Internal</span>
+            </p>
+          </div>
           <p class="text-muted-foreground">{{ new Date(message.post_time).toLocaleString("EN-us", {
             year: "numeric",
             month: "long",
             day: "numeric",
             hour: "2-digit",
             minute: "2-digit"
-            }) }}</p>
+          }) }}</p>
         </div>
         <p>{{ message.post_content }}</p>
       </div>