feat: #499 revert delete session

app/components/button.module.scss

@@ -12,7 +12,7 @@
   user-select: none;
   outline: none;
   border: none;
-  color: rgb(51, 51, 51);
+  color: var(--black);
 
   &[disabled] {
     cursor: not-allowed;

app/components/chat-list.tsx

@@ -59,6 +59,7 @@ export function ChatList() {
       state.removeSession,
       state.moveSession,
     ]);
+  const chatStore = useChatStore();
 
   const onDragEnd: OnDragEndResponder = (result) => {
     const { destination, source } = result;
@@ -95,10 +96,7 @@ export function ChatList() {
                 index={i}
                 selected={i === selectedIndex}
                 onClick={() => selectSession(i)}
-                onDelete={() =>
-                  (!isMobileScreen() || confirm(Locale.Home.DeleteChat)) &&
-                  removeSession(i)
-                }
+                onDelete={chatStore.deleteSession}
               />
             ))}
             {provided.placeholder}

app/components/home.tsx

@@ -93,6 +93,7 @@ function _Home() {
       state.removeSession,
     ],
   );
+  const chatStore = useChatStore();
   const loading = !useHasHydrated();
   const [showSideBar, setShowSideBar] = useState(true);
 
@@ -142,11 +143,7 @@ function _Home() {
             <div className={styles["sidebar-action"] + " " + styles.mobile}>
               <IconButton
                 icon={<CloseIcon />}
-                onClick={() => {
-                  if (confirm(Locale.Home.DeleteChat)) {
-                    removeSession(currentIndex);
-                  }
-                }}
+                onClick={chatStore.deleteSession}
               />
             </div>
             <div className={styles["sidebar-action"]}>

app/components/ui-lib.module.scss

@@ -135,9 +135,25 @@
     box-shadow: var(--card-shadow);
     border: var(--border-in-light);
     color: var(--black);
-    padding: 10px 30px;
+    padding: 10px 20px;
     border-radius: 50px;
     margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+
+    .toast-action {
+      padding-left: 20px;
+      color: var(--primary);
+      opacity: 0.8;
+      border: 0;
+      background: none;
+      cursor: pointer;
+      font-family: inherit;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
 }
 
@@ -160,4 +176,4 @@
       max-height: 50vh;
     }
   }
-}
+}

app/components/ui-lib.tsx

@@ -110,17 +110,37 @@ export function showModal(props: ModalProps) {
   root.render(<Modal {...props} onClose={closeModal}></Modal>);
 }
 
-export type ToastProps = { content: string };
+export type ToastProps = {
+  content: string;
+  action?: {
+    text: string;
+    onClick: () => void;
+  };
+};
 
 export function Toast(props: ToastProps) {
   return (
     <div className={styles["toast-container"]}>
-      <div className={styles["toast-content"]}>{props.content}</div>
+      <div className={styles["toast-content"]}>
+        <span>{props.content}</span>
+        {props.action && (
+          <button
+            onClick={props.action.onClick}
+            className={styles["toast-action"]}
+          >
+            {props.action.text}
+          </button>
+        )}
+      </div>
     </div>
   );
 }
 
-export function showToast(content: string, delay = 3000) {
+export function showToast(
+  content: string,
+  action?: ToastProps["action"],
+  delay = 3000,
+) {
   const div = document.createElement("div");
   div.className = styles.show;
   document.body.appendChild(div);
@@ -139,7 +159,7 @@ export function showToast(content: string, delay = 3000) {
     close();
   }, delay);
 
-  root.render(<Toast content={content} />);
+  root.render(<Toast content={content} action={action} />);
 }
 
 export type InputProps = React.HTMLProps<HTMLTextAreaElement> & {