From 1e73e8863a904e95ba21f9ed5b2307a78b6d0ebd Mon Sep 17 00:00:00 2001
From: Dustin Loring <dustinwloring1988@gmail.com>
Date: Sat, 14 Dec 2024 19:30:36 -0500
Subject: [PATCH] ui-ux: Setting Modal Changes

Enhancement - move the connection tab below chat history in left side of settings
Enhancement - on chat tab Delete all chats, should prompt to make sure you want to
Enhancement - Debug tab change copy debug info from a popup to a toast notification
---
 app/components/settings/SettingsWindow.tsx              | 2 +-
 app/components/settings/chat-history/ChatHistoryTab.tsx | 8 +++++---
 app/components/settings/debug/DebugTab.tsx              | 4 +++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/components/settings/SettingsWindow.tsx b/app/components/settings/SettingsWindow.tsx
index aae0a8604..541323f50 100644
--- a/app/components/settings/SettingsWindow.tsx
+++ b/app/components/settings/SettingsWindow.tsx
@@ -27,8 +27,8 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
   const tabs: { id: TabType; label: string; icon: string; component?: ReactElement }[] = [
     { id: 'chat-history', label: 'Chat History', icon: 'i-ph:book', component: <ChatHistoryTab /> },
     { id: 'providers', label: 'Providers', icon: 'i-ph:key', component: <ProvidersTab /> },
-    { id: 'features', label: 'Features', icon: 'i-ph:star', component: <FeaturesTab /> },
     { id: 'connection', label: 'Connection', icon: 'i-ph:link', component: <ConnectionsTab /> },
+    { id: 'features', label: 'Features', icon: 'i-ph:star', component: <FeaturesTab /> },
     ...(debug
       ? [
           {
diff --git a/app/components/settings/chat-history/ChatHistoryTab.tsx b/app/components/settings/chat-history/ChatHistoryTab.tsx
index 76a0f21ce..bd98f3d56 100644
--- a/app/components/settings/chat-history/ChatHistoryTab.tsx
+++ b/app/components/settings/chat-history/ChatHistoryTab.tsx
@@ -22,17 +22,20 @@ export default function ChatHistoryTab() {
   };
 
   const handleDeleteAllChats = async () => {
+    const confirmDelete = window.confirm("Are you sure you want to delete all chats? This action cannot be undone.");
+    if (!confirmDelete) {
+      return; // Exit if the user cancels
+    }
+
     if (!db) {
       const error = new Error('Database is not available');
       logStore.logError('Failed to delete chats - DB unavailable', error);
       toast.error('Database is not available');
-
       return;
     }
 
     try {
       setIsDeleting(true);
-
       const allChats = await getAll(db);
       await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
       logStore.logSystem('All chats deleted successfully', { count: allChats.length });
@@ -52,7 +55,6 @@ export default function ChatHistoryTab() {
       const error = new Error('Database is not available');
       logStore.logError('Failed to export chats - DB unavailable', error);
       toast.error('Database is not available');
-
       return;
     }
 
diff --git a/app/components/settings/debug/DebugTab.tsx b/app/components/settings/debug/DebugTab.tsx
index e18607d6f..c5b166161 100644
--- a/app/components/settings/debug/DebugTab.tsx
+++ b/app/components/settings/debug/DebugTab.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSettings } from '~/lib/hooks/useSettings';
 import commit from '~/commit.json';
+import { toast } from 'react-toastify';
 
 interface ProviderStatus {
   name: string;
@@ -308,8 +309,9 @@ export default function DebugTab() {
       Version: versionHash,
       Timestamp: new Date().toISOString(),
     };
+
     navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
-      alert('Debug information copied to clipboard!');
+      toast.success('Debug information copied to clipboard!');
     });
   }, [activeProviders, systemInfo]);