V1 : Release of the new Settings Dashboard

# 🚀 Release v1.0.0 ## What's Changed 🌟 ### 🎨 UI/UX Improvements - **Dark Mode Support** - Implemented comprehensive dark theme across all components - Enhanced contrast and readability in dark mode - Added smooth theme transitions - Optimized dialog overlays and backdrops ### 🛠️ Settings Panel - **Data Management** - Added chat history export/import functionality - Implemented settings backup and restore - Added secure data deletion with confirmations - Added profile customization options - **Provider Management** - Added comprehensive provider configuration - Implemented URL-configurable providers - Added local model support (Ollama, LMStudio) - Added provider health checks - Added provider status indicators - **Ollama Integration** - Added Ollama Model Manager with real-time updates - Implemented model version tracking - Added bulk update capability - Added progress tracking for model updates - Displays model details (parameter size, quantization) - **GitHub Integration** - Added GitHub connection management - Implemented secure token storage - Added connection state persistence - Real-time connection status updates - Proper error handling and user feedback ### 📊 Event Logging - **System Monitoring** - Added real-time event logging system - Implemented log filtering by type (info, warning, error, debug) - Added log export functionality - Added auto-scroll and search capabilities - Enhanced log visualization with color coding ### 💫 Animations & Interactions - Added smooth page transitions - Implemented loading states with spinners - Added micro-interactions for better feedback - Enhanced button hover and active states - Added motion effects for UI elements ### 🔐 Security Features - Secure token storage - Added confirmation dialogs for destructive actions - Implemented data validation - Added file size and type validation - Secure connection management ### ♿️ Accessibility - Improved keyboard navigation - Enhanced screen reader support - Added ARIA labels and descriptions - Implemented focus management - Added proper dialog accessibility ### 🎯 Developer Experience - Added comprehensive debug information - Implemented system status monitoring - Added version control integration - Enhanced error handling and reporting - Added detailed logging system --- ## 🔧 Technical Details - **Frontend Stack** - React 18 with TypeScript - Framer Motion for animations - TailwindCSS for styling - Radix UI for accessible components - **State Management** - Local storage for persistence - React hooks for state - Custom stores for global state - **API Integration** - GitHub API integration - Ollama API integration - Provider API management - Error boundary implementation ## 📝 Notes - Initial release focusing on core functionality and user experience - Enhanced dark mode support across all components - Improved accessibility and keyboard navigation - Added comprehensive logging and debugging tools - Implemented robust error handling and user feedback
2025-01-17 19:33:20 +01:00
parent 41bb909f8d
commit f33ba635e8
20 changed files with 3134 additions and 1044 deletions
--- a/app/components/settings/connections/ConnectionsTab.tsx
+++ b/app/components/settings/connections/ConnectionsTab.tsx
@@ -1,150 +1,207 @@
 import React, { useState, useEffect } from 'react';
-import { toast } from 'react-toastify';
-import Cookies from 'js-cookie';
 import { logStore } from '~/lib/stores/logs';
+import { classNames } from '~/utils/classNames';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';

 interface GitHubUserResponse {
  login: string;
-  id: number;
-  [key: string]: any; // for other properties we don't explicitly need
+  avatar_url: string;
+  html_url: string;
+}
+
+interface GitHubConnection {
+  user: GitHubUserResponse | null;
+  token: string;
 }

 export default function ConnectionsTab() {
-  const [githubUsername, setGithubUsername] = useState(Cookies.get('githubUsername') || '');
-  const [githubToken, setGithubToken] = useState(Cookies.get('githubToken') || '');
-  const [isConnected, setIsConnected] = useState(false);
-  const [isVerifying, setIsVerifying] = useState(false);
+  const [connection, setConnection] = useState<GitHubConnection>({
+    user: null,
+    token: '',
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [isConnecting, setIsConnecting] = useState(false);

+  // Load saved connection on mount
  useEffect(() => {
-    // Check if credentials exist and verify them
-    if (githubUsername && githubToken) {
-      verifyGitHubCredentials();
+    const savedConnection = localStorage.getItem('github_connection');
+
+    if (savedConnection) {
+      setConnection(JSON.parse(savedConnection));
    }
+
+    setIsLoading(false);
  }, []);

-  const verifyGitHubCredentials = async () => {
-    setIsVerifying(true);
-
+  const fetchGithubUser = async (token: string) => {
    try {
+      setIsConnecting(true);
+
      const response = await fetch('https://api.github.com/user', {
        headers: {
-          Authorization: `Bearer ${githubToken}`,
+          Authorization: `Bearer ${token}`,
        },
      });

-      if (response.ok) {
-        const data = (await response.json()) as GitHubUserResponse;
-
-        if (data.login === githubUsername) {
-          setIsConnected(true);
-          return true;
-        }
+      if (!response.ok) {
+        throw new Error('Invalid token or unauthorized');
      }

-      setIsConnected(false);
+      const data = (await response.json()) as GitHubUserResponse;
+      const newConnection = { user: data, token };

-      return false;
+      // Save connection
+      localStorage.setItem('github_connection', JSON.stringify(newConnection));
+      setConnection(newConnection);
+      toast.success('Successfully connected to GitHub');
    } catch (error) {
-      console.error('Error verifying GitHub credentials:', error);
-      setIsConnected(false);
-
-      return false;
+      logStore.logError('Failed to authenticate with GitHub', { error });
+      toast.error('Failed to connect to GitHub');
+      setConnection({ user: null, token: '' });
    } finally {
-      setIsVerifying(false);
+      setIsConnecting(false);
    }
  };

-  const handleSaveConnection = async () => {
-    if (!githubUsername || !githubToken) {
-      toast.error('Please provide both GitHub username and token');
-      return;
-    }
-
-    setIsVerifying(true);
-
-    const isValid = await verifyGitHubCredentials();
-
-    if (isValid) {
-      Cookies.set('githubUsername', githubUsername);
-      Cookies.set('githubToken', githubToken);
-      logStore.logSystem('GitHub connection settings updated', {
-        username: githubUsername,
-        hasToken: !!githubToken,
-      });
-      toast.success('GitHub credentials verified and saved successfully!');
-      Cookies.set('git:github.com', JSON.stringify({ username: githubToken, password: 'x-oauth-basic' }));
-      setIsConnected(true);
-    } else {
-      toast.error('Invalid GitHub credentials. Please check your username and token.');
-    }
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+    await fetchGithubUser(connection.token);
  };

  const handleDisconnect = () => {
-    Cookies.remove('githubUsername');
-    Cookies.remove('githubToken');
-    Cookies.remove('git:github.com');
-    setGithubUsername('');
-    setGithubToken('');
-    setIsConnected(false);
-    logStore.logSystem('GitHub connection removed');
-    toast.success('GitHub connection removed successfully!');
+    localStorage.removeItem('github_connection');
+    setConnection({ user: null, token: '' });
+    toast.success('Disconnected from GitHub');
  };

-  return (
-    <div className="p-4 mb-4 border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-3">
-      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">GitHub Connection</h3>
-      <div className="flex mb-4">
-        <div className="flex-1 mr-2">
-          <label className="block text-sm text-bolt-elements-textSecondary mb-1">GitHub Username:</label>
-          <input
-            type="text"
-            value={githubUsername}
-            onChange={(e) => setGithubUsername(e.target.value)}
-            disabled={isVerifying}
-            className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor disabled:opacity-50"
-          />
-        </div>
-        <div className="flex-1">
-          <label className="block text-sm text-bolt-elements-textSecondary mb-1">Personal Access Token:</label>
-          <input
-            type="password"
-            value={githubToken}
-            onChange={(e) => setGithubToken(e.target.value)}
-            disabled={isVerifying}
-            className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor disabled:opacity-50"
-          />
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-4">
+        <div className="flex items-center gap-2">
+          <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+          <span className="text-bolt-elements-textSecondary">Loading...</span>
        </div>
      </div>
-      <div className="flex mb-4 items-center">
-        {!isConnected ? (
-          <button
-            onClick={handleSaveConnection}
-            disabled={isVerifying || !githubUsername || !githubToken}
-            className="bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-button-primary-text disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
-          >
-            {isVerifying ? (
-              <>
-                <div className="i-ph:spinner animate-spin mr-2" />
-                Verifying...
-              </>
-            ) : (
-              'Connect'
-            )}
-          </button>
-        ) : (
-          <button
-            onClick={handleDisconnect}
-            className="bg-bolt-elements-button-danger-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-danger-backgroundHover text-bolt-elements-button-danger-text"
-          >
-            Disconnect
-          </button>
-        )}
-        {isConnected && (
-          <span className="text-sm text-green-600 flex items-center">
-            <div className="i-ph:check-circle mr-1" />
-            Connected to GitHub
-          </span>
-        )}
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <motion.div
+        className="flex items-center gap-2 mb-2"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="i-ph:plugs-connected w-5 h-5 text-purple-500" />
+        <h2 className="text-lg font-medium text-bolt-elements-textPrimary">Connection Settings</h2>
+      </motion.div>
+      <p className="text-sm text-bolt-elements-textSecondary mb-6">
+        Manage your external service connections and integrations
+      </p>
+
+      <div className="grid grid-cols-1 gap-4">
+        {/* GitHub Connection */}
+        <motion.div
+          className="bg-[#FFFFFF] dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+        >
+          <div className="p-6 space-y-6">
+            <div className="flex items-center gap-2">
+              <div className="i-ph:github-logo w-5 h-5 text-bolt-elements-textPrimary" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">GitHub Connection</h3>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm text-bolt-elements-textSecondary mb-2">GitHub Username</label>
+                <input
+                  type="text"
+                  value={connection.user?.login || ''}
+                  disabled={true}
+                  placeholder="Not connected"
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg text-sm',
+                    'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                    'border border-[#E5E5E5] dark:border-[#333333]',
+                    'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-1 focus:ring-purple-500',
+                    'disabled:opacity-50',
+                  )}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
+                <input
+                  type="password"
+                  value={connection.token}
+                  onChange={(e) => setConnection((prev) => ({ ...prev, token: e.target.value }))}
+                  disabled={isConnecting || !!connection.user}
+                  placeholder="Enter your GitHub token"
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg text-sm',
+                    'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                    'border border-[#E5E5E5] dark:border-[#333333]',
+                    'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-1 focus:ring-purple-500',
+                    'disabled:opacity-50',
+                  )}
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              {!connection.user ? (
+                <button
+                  onClick={handleConnect}
+                  disabled={isConnecting || !connection.token}
+                  className={classNames(
+                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                    'bg-purple-500 text-white',
+                    'hover:bg-purple-600',
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
+                  )}
+                >
+                  {isConnecting ? (
+                    <>
+                      <div className="i-ph:spinner-gap animate-spin" />
+                      Connecting...
+                    </>
+                  ) : (
+                    <>
+                      <div className="i-ph:plug-charging w-4 h-4" />
+                      Connect
+                    </>
+                  )}
+                </button>
+              ) : (
+                <button
+                  onClick={handleDisconnect}
+                  className={classNames(
+                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                    'bg-red-500 text-white',
+                    'hover:bg-red-600',
+                  )}
+                >
+                  <div className="i-ph:plug-x w-4 h-4" />
+                  Disconnect
+                </button>
+              )}
+
+              {connection.user && (
+                <span className="text-sm text-green-500 flex items-center gap-1">
+                  <div className="i-ph:check-circle w-4 h-4" />
+                  Connected to GitHub
+                </span>
+              )}
+            </div>
+          </div>
+        </motion.div>
      </div>
    </div>
  );