feat: add \'New thread\' button in sidebar

app.vue

@@ -6,21 +6,32 @@ const threadSummaryListKey = ref(generateUniqueKey('thread-summary-list'))
 
 async function loadThread(selectedTreadId: number) {
   threadId.value = selectedTreadId
-  console.log('Selected thread with ID ', threadId.value)
 }
 
 async function refreshThreadList() {
   threadSummaryListKey.value = generateUniqueKey('thread-summary-list')
 }
 
+function newThread() {
+  threadId.value = null
+}
 </script>
 
 <template>
   <div class="app">
     <div class="layout-container">
 
       <div class="layout-sidebar">
-        <ThreadSummaryList @threadSelected="loadThread" :key="threadSummaryListKey" />
+        <nav>
+          <div class="app-brand">
+            <span class="app-name">Threadr</span>
+          </div>
+          <div class="new-thread">
+            <Button icon="pi pi-plus" aria-label="Submit" label="New thread" severity="secondary" outlined
+              @click="newThread" @enter="newThread" />
+          </div>
+          <ThreadSummaryList @threadSelected="loadThread" :key="threadSummaryListKey" />
+        </nav>
       </div>
 
       <div class="layout-content-wrapper">
@@ -50,6 +61,20 @@ async function refreshThreadList() {
   max-width: 18rem;
   overflow-y: auto;
   border: 1px solid lightgray;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-brand {}
+
+.app-name {
+  font-weight: 800;
+  font-size: 2rem;
+  margin: 0.5rem;
+}
+
+.new-thread {
+  margin: 0.5rem;
 }
 
 .layout-content-wrapper {

components/ThreadSummaryList.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+const emit = defineEmits<{
+    threadSelected: [id: number]
+}>()
 
 const selectThread = (threadId: number) => {
     console.log(`Clicked item ${threadId}`)
@@ -18,19 +21,16 @@ const { data: threads } = await useFetch(
         return threads
     }
 })
-
-const emit = defineEmits<{
-    threadSelected: [id: number]
-}>()
 </script>
 
 <template>
     <div class="threads" v-if="threads">
         <div class="thread" v-for="(thread) in threads" @click="selectThread(thread.id)">
             <span class="pi pi-comment" />
             <span class="thread-title">Thread #{{ thread.id }}</span>
+            <span> - </span>
             <!--<span class="thread-meta">{{ thread.createdAt }}</span>-->
-            <span class="thread-nb-messages"> [{{ thread.nbMessages }} messages]</span>
+            <span class="thread-nb-messages">{{ thread.nbMessages }} messages</span>
         </div>
     </div>
     <div v-else>
@@ -46,9 +46,12 @@ const emit = defineEmits<{
 .thread {
     cursor: pointer;
     padding: 0.5rem;
-    margin-bottom: 15px;
-    border: 1px solid lightgray;
     overflow: hidden;
+    border-radius: 5px;
+}
+.thread:hover,
+.thread:focus {
+    background-color: rgba(100, 116, 139, 0.04);
 }
 
 .thread-title {
@@ -59,4 +62,9 @@ const emit = defineEmits<{
 .thread-meta {
     display: block;
 }
+
+.thread-nb-messages {
+    font-size: 0.8rem;
+    color: grey;
+}
 </style>

plugins/primevue.js

@@ -1,6 +1,7 @@
 import { defineNuxtPlugin } from "#app";
 import PrimeVue from "primevue/config";
 import Button from "primevue/button";
+import Chip from "primevue/chip";
 import Dialog from 'primevue/dialog';
 import Divider from "primevue/divider";
 import FileUpload from "primevue/fileupload";
@@ -13,6 +14,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(PrimeVue, { ripple: true });
     nuxtApp.vueApp.use(ToastService)
     nuxtApp.vueApp.component("Button", Button);
+    nuxtApp.vueApp.component("Chip", Chip);
     nuxtApp.vueApp.component("Dialog", Dialog);
     nuxtApp.vueApp.component("Divider", Divider);
     nuxtApp.vueApp.component("FileUpload", FileUpload);