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

@@ -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
       ? [
           {

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;
     }
 

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]);