From 6efc52f3bd62d2c9537fdd5d11077541ff7c644e Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 19 Dec 2023 13:32:12 +0700
Subject: [PATCH] fix: added dialog confirmation when delete thread

---
 uikit/src/button/styles.scss          |  4 +-
 web/screens/Chat/ThreadList/index.tsx | 54 ++++++++++++++++++++++-----
 2 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/uikit/src/button/styles.scss b/uikit/src/button/styles.scss
index 481508841..2b1e239a5 100644
--- a/uikit/src/button/styles.scss
+++ b/uikit/src/button/styles.scss
@@ -1,6 +1,6 @@
 .btn {
   @apply inline-flex items-center justify-center whitespace-nowrap rounded-lg font-semibold transition-colors;
-  @apply focus-visible:ring-ring cursor-pointer focus-visible:outline-none focus-visible:ring-1;
+  @apply cursor-pointer focus:outline-none focus-visible:outline-none focus-visible:ring-0;
   @apply disabled:pointer-events-none disabled:opacity-50;
 
   &-primary {
@@ -28,7 +28,7 @@
   }
 
   &-ghost {
-    @apply hover:bg-primary hover:text-primary-foreground;
+    @apply hover:bg-secondary hover:text-secondary-foreground;
   }
 
   &-sm {
diff --git a/web/screens/Chat/ThreadList/index.tsx b/web/screens/Chat/ThreadList/index.tsx
index 5b5a8d91d..96af66cec 100644
--- a/web/screens/Chat/ThreadList/index.tsx
+++ b/web/screens/Chat/ThreadList/index.tsx
@@ -1,5 +1,16 @@
 import { useEffect } from 'react'
 
+import {
+  Modal,
+  ModalTrigger,
+  ModalClose,
+  ModalFooter,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  Button,
+} from '@janhq/uikit'
+
 import { motion as m } from 'framer-motion'
 import { useAtomValue } from 'jotai'
 import {
@@ -107,15 +118,40 @@ export default function ThreadList() {
                       Clean thread
                     </span>
                   </div>
-                  <div
-                    className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
-                    onClick={() => deleteThread(thread.id)}
-                  >
-                    <Trash2Icon size={16} className="text-muted-foreground" />
-                    <span className="text-bold text-black dark:text-muted-foreground">
-                      Delete thread
-                    </span>
-                  </div>
+                  <Modal>
+                    <ModalTrigger asChild>
+                      <div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
+                        <Trash2Icon
+                          size={16}
+                          className="text-muted-foreground"
+                        />
+                        <span className="text-bold text-black dark:text-muted-foreground">
+                          Delete thread
+                        </span>
+                      </div>
+                    </ModalTrigger>
+                    <ModalContent>
+                      <ModalHeader>
+                        <ModalTitle>Delete Thread</ModalTitle>
+                      </ModalHeader>
+                      <p>Are you sure you want to delete Thread?</p>
+                      <ModalFooter>
+                        <div className="flex gap-x-2">
+                          <ModalClose asChild>
+                            <Button themes="ghost">No</Button>
+                          </ModalClose>
+                          <ModalClose asChild>
+                            <Button
+                              themes="danger"
+                              onClick={() => deleteThread(thread.id)}
+                            >
+                              Yes
+                            </Button>
+                          </ModalClose>
+                        </div>
+                      </ModalFooter>
+                    </ModalContent>
+                  </Modal>
                 </div>
               </div>
               {/* {messages.length > 0 && (