From ccd1c4337f914db7c93b2dac2aac40ef0b0fb194 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Buget?= <jbuget@gmail.com>
Date: Mon, 11 Sep 2023 07:54:39 +0200
Subject: [PATCH] feat: add \'New thread\' button in sidebar

---
 app.vue                          | 29 +++++++++++++++++++++++++++--
 components/ThreadSummaryList.vue | 22 +++++++++++++++-------
 plugins/primevue.js              |  2 ++
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/app.vue b/app.vue
index b13ecf7..c23a854 100644
--- a/app.vue
+++ b/app.vue
@@ -6,13 +6,15 @@ 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>
@@ -20,7 +22,16 @@ async function refreshThreadList() {
     <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 {
diff --git a/components/ThreadSummaryList.vue b/components/ThreadSummaryList.vue
index a5eb7f4..2616fcc 100644
--- a/components/ThreadSummaryList.vue
+++ b/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,10 +21,6 @@ const { data: threads } = await useFetch(
         return threads
     }
 })
-
-const emit = defineEmits<{
-    threadSelected: [id: number]
-}>()
 </script>
 
 <template>
@@ -29,8 +28,9 @@ const emit = defineEmits<{
         <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>
\ No newline at end of file
diff --git a/plugins/primevue.js b/plugins/primevue.js
index 47afd85..9f40e40 100644
--- a/plugins/primevue.js
+++ b/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);