From 0e60d9cca8412b15cd6422c460fc25d82fb083c4 Mon Sep 17 00:00:00 2001
From: Stijnus <72551117+Stijnus@users.noreply.github.com>
Date: Tue, 18 Feb 2025 14:13:13 +0100
Subject: [PATCH] UI bug fixes

---
 .../@settings/core/ControlPanel.tsx           | 27 ++++++-
 .../shared/components/TabManagement.tsx       | 11 ++-
 .../@settings/tabs/debug/DebugTab.tsx         |  9 ++-
 .../@settings/tabs/profile/ProfileTab.tsx     | 21 +++--
 .../providers/local/OllamaModelInstaller.tsx  | 13 +++-
 .../@settings/tabs/settings/SettingsTab.tsx   | 78 +++++--------------
 app/components/chat/BaseChat.tsx              |  3 +-
 app/lib/stores/settings.ts                    | 65 +++++++++-------
 app/utils/debounce.ts                         | 22 +++---
 9 files changed, 133 insertions(+), 116 deletions(-)

diff --git a/app/components/@settings/core/ControlPanel.tsx b/app/components/@settings/core/ControlPanel.tsx
index c0e19035..0d90975c 100644
--- a/app/components/@settings/core/ControlPanel.tsx
+++ b/app/components/@settings/core/ControlPanel.tsx
@@ -263,6 +263,27 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
     },
   };
 
+  // Reset to default view when modal opens/closes
+  useEffect(() => {
+    if (!open) {
+      // Reset when closing
+      setActiveTab(null);
+      setLoadingTab(null);
+      setShowTabManagement(false);
+    } else {
+      // When opening, set to null to show the main view
+      setActiveTab(null);
+    }
+  }, [open]);
+
+  // Handle closing
+  const handleClose = () => {
+    setActiveTab(null);
+    setLoadingTab(null);
+    setShowTabManagement(false);
+    onClose();
+  };
+
   // Handlers
   const handleBack = () => {
     if (showTabManagement) {
@@ -405,8 +426,8 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
 
           <RadixDialog.Content
             aria-describedby={undefined}
-            onEscapeKeyDown={onClose}
-            onPointerDownOutside={onClose}
+            onEscapeKeyDown={handleClose}
+            onPointerDownOutside={handleClose}
             className="relative z-[101]"
           >
             <motion.div
@@ -461,7 +482,7 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
 
                     {/* Close Button */}
                     <button
-                      onClick={onClose}
+                      onClick={handleClose}
                       className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
                     >
                       <div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
diff --git a/app/components/@settings/shared/components/TabManagement.tsx b/app/components/@settings/shared/components/TabManagement.tsx
index 67311c43..9ae16017 100644
--- a/app/components/@settings/shared/components/TabManagement.tsx
+++ b/app/components/@settings/shared/components/TabManagement.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { useStore } from '@nanostores/react';
 import { Switch } from '~/components/ui/Switch';
@@ -8,6 +8,7 @@ import { TAB_LABELS } from '~/components/@settings/core/constants';
 import type { TabType } from '~/components/@settings/core/types';
 import { toast } from 'react-toastify';
 import { TbLayoutGrid } from 'react-icons/tb';
+import { useSettingsStore } from '~/lib/stores/settings';
 
 // Define tab icons mapping
 const TAB_ICONS: Record<TabType, string> = {
@@ -55,6 +56,7 @@ const BetaLabel = () => (
 export const TabManagement = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const tabConfiguration = useStore(tabConfigurationStore);
+  const { setSelectedTab } = useSettingsStore();
 
   const handleTabVisibilityChange = (tabId: TabType, checked: boolean) => {
     // Get current tab configuration
@@ -126,6 +128,13 @@ export const TabManagement = () => {
   // Filter tabs based on search query
   const filteredTabs = allTabs.filter((tab) => TAB_LABELS[tab.id].toLowerCase().includes(searchQuery.toLowerCase()));
 
+  useEffect(() => {
+    // Reset to first tab when component unmounts
+    return () => {
+      setSelectedTab('user'); // Reset to user tab when unmounting
+    };
+  }, [setSelectedTab]);
+
   return (
     <div className="space-y-6">
       <motion.div
diff --git a/app/components/@settings/tabs/debug/DebugTab.tsx b/app/components/@settings/tabs/debug/DebugTab.tsx
index cfaeb966..75be68c5 100644
--- a/app/components/@settings/tabs/debug/DebugTab.tsx
+++ b/app/components/@settings/tabs/debug/DebugTab.tsx
@@ -1103,15 +1103,18 @@ export default function DebugTab() {
   // Add Ollama health check function
   const checkOllamaStatus = useCallback(async () => {
     try {
+      const ollamaProvider = providers?.Ollama;
+      const baseUrl = ollamaProvider?.settings?.baseUrl || 'http://127.0.0.1:11434';
+
       // First check if service is running
-      const versionResponse = await fetch('http://127.0.0.1:11434/api/version');
+      const versionResponse = await fetch(`${baseUrl}/api/version`);
 
       if (!versionResponse.ok) {
         throw new Error('Service not running');
       }
 
       // Then fetch installed models
-      const modelsResponse = await fetch('http://127.0.0.1:11434/api/tags');
+      const modelsResponse = await fetch(`${baseUrl}/api/tags`);
 
       const modelsData = (await modelsResponse.json()) as {
         models: Array<{ name: string; size: string; quantization: string }>;
@@ -1130,7 +1133,7 @@ export default function DebugTab() {
         models: undefined,
       });
     }
-  }, []);
+  }, [providers]);
 
   // Monitor isLocalModel changes and check status periodically
   useEffect(() => {
diff --git a/app/components/@settings/tabs/profile/ProfileTab.tsx b/app/components/@settings/tabs/profile/ProfileTab.tsx
index 6ea19fe4..6783a907 100644
--- a/app/components/@settings/tabs/profile/ProfileTab.tsx
+++ b/app/components/@settings/tabs/profile/ProfileTab.tsx
@@ -1,13 +1,23 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { useStore } from '@nanostores/react';
 import { classNames } from '~/utils/classNames';
 import { profileStore, updateProfile } from '~/lib/stores/profile';
 import { toast } from 'react-toastify';
+import { debounce } from '~/utils/debounce';
 
 export default function ProfileTab() {
   const profile = useStore(profileStore);
   const [isUploading, setIsUploading] = useState(false);
 
+  // Create debounced update functions
+  const debouncedUpdate = useCallback(
+    debounce((field: 'username' | 'bio', value: string) => {
+      updateProfile({ [field]: value });
+      toast.success(`${field.charAt(0).toUpperCase() + field.slice(1)} updated`);
+    }, 1000),
+    [],
+  );
+
   const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
 
@@ -42,14 +52,11 @@ export default function ProfileTab() {
   };
 
   const handleProfileUpdate = (field: 'username' | 'bio', value: string) => {
+    // Update the store immediately for UI responsiveness
     updateProfile({ [field]: value });
 
-    // Only show toast for completed typing (after 1 second of no typing)
-    const debounceToast = setTimeout(() => {
-      toast.success(`${field.charAt(0).toUpperCase() + field.slice(1)} updated`);
-    }, 1000);
-
-    return () => clearTimeout(debounceToast);
+    // Debounce the toast notification
+    debouncedUpdate(field, value);
   };
 
   return (
diff --git a/app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx b/app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx
index 18b8655d..9568076f 100644
--- a/app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx
+++ b/app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx
@@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
 import { classNames } from '~/utils/classNames';
 import { Progress } from '~/components/ui/Progress';
 import { useToast } from '~/components/ui/use-toast';
+import { useSettings } from '~/lib/hooks/useSettings';
 
 interface OllamaModelInstallerProps {
   onModelInstalled: () => void;
@@ -141,11 +142,15 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [models, setModels] = useState<ModelInfo[]>(POPULAR_MODELS);
   const { toast } = useToast();
+  const { providers } = useSettings();
+
+  // Get base URL from provider settings
+  const baseUrl = providers?.Ollama?.settings?.baseUrl || 'http://127.0.0.1:11434';
 
   // Function to check installed models and their versions
   const checkInstalledModels = async () => {
     try {
-      const response = await fetch('http://127.0.0.1:11434/api/tags', {
+      const response = await fetch(`${baseUrl}/api/tags`, {
         method: 'GET',
       });
 
@@ -181,7 +186,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
   // Check installed models on mount and after installation
   useEffect(() => {
     checkInstalledModels();
-  }, []);
+  }, [baseUrl]);
 
   const handleCheckUpdates = async () => {
     setIsChecking(true);
@@ -224,7 +229,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
       setModelString('');
       setSearchQuery('');
 
-      const response = await fetch('http://127.0.0.1:11434/api/pull', {
+      const response = await fetch(`${baseUrl}/api/pull`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -302,7 +307,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
     try {
       setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'updating' } : m)));
 
-      const response = await fetch('http://127.0.0.1:11434/api/pull', {
+      const response = await fetch(`${baseUrl}/api/pull`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
diff --git a/app/components/@settings/tabs/settings/SettingsTab.tsx b/app/components/@settings/tabs/settings/SettingsTab.tsx
index a14937a4..2079840a 100644
--- a/app/components/@settings/tabs/settings/SettingsTab.tsx
+++ b/app/components/@settings/tabs/settings/SettingsTab.tsx
@@ -4,19 +4,8 @@ import { toast } from 'react-toastify';
 import { classNames } from '~/utils/classNames';
 import { Switch } from '~/components/ui/Switch';
 import type { UserProfile } from '~/components/@settings/core/types';
-import { useStore } from '@nanostores/react';
-import { shortcutsStore } from '~/lib/stores/settings';
 import { isMac } from '~/utils/os';
 
-// Helper to format shortcut key display
-const formatShortcutKey = (key: string) => {
-  if (key === '`') {
-    return '`';
-  }
-
-  return key.toUpperCase();
-};
-
 // Helper to get modifier key symbols/text
 const getModifierSymbol = (modifier: string): string => {
   switch (modifier) {
@@ -24,8 +13,6 @@ const getModifierSymbol = (modifier: string): string => {
       return isMac ? '⌘' : 'Win';
     case 'alt':
       return isMac ? '⌥' : 'Alt';
-    case 'ctrl':
-      return isMac ? '⌃' : 'Ctrl';
     case 'shift':
       return '⇧';
     default:
@@ -188,7 +175,7 @@ export default function SettingsTab() {
         </div>
       </motion.div>
 
-      {/* Keyboard Shortcuts */}
+      {/* Simplified Keyboard Shortcuts */}
       <motion.div
         className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4"
         initial={{ opacity: 0, y: 20 }}
@@ -201,51 +188,26 @@ export default function SettingsTab() {
         </div>
 
         <div className="space-y-2">
-          {Object.entries(useStore(shortcutsStore)).map(([name, shortcut]) => (
-            <div
-              key={name}
-              className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A] hover:bg-purple-50 dark:hover:bg-purple-500/10 transition-colors"
-            >
-              <div className="flex flex-col">
-                <span className="text-sm text-bolt-elements-textPrimary capitalize">
-                  {name.replace(/([A-Z])/g, ' $1').toLowerCase()}
-                </span>
-                {shortcut.description && (
-                  <span className="text-xs text-bolt-elements-textSecondary">{shortcut.description}</span>
-                )}
-              </div>
-              <div className="flex items-center gap-1">
-                {shortcut.ctrlOrMetaKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol(isMac ? 'meta' : 'ctrl')}
-                  </kbd>
-                )}
-                {shortcut.ctrlKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol('ctrl')}
-                  </kbd>
-                )}
-                {shortcut.metaKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol('meta')}
-                  </kbd>
-                )}
-                {shortcut.altKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol('alt')}
-                  </kbd>
-                )}
-                {shortcut.shiftKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol('shift')}
-                  </kbd>
-                )}
-                <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                  {formatShortcutKey(shortcut.key)}
-                </kbd>
-              </div>
+          <div className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A]">
+            <div className="flex flex-col">
+              <span className="text-sm text-bolt-elements-textPrimary">Toggle Theme</span>
+              <span className="text-xs text-bolt-elements-textSecondary">Switch between light and dark mode</span>
             </div>
-          ))}
+            <div className="flex items-center gap-1">
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                {getModifierSymbol('meta')}
+              </kbd>
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                {getModifierSymbol('alt')}
+              </kbd>
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                {getModifierSymbol('shift')}
+              </kbd>
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                D
+              </kbd>
+            </div>
+          </div>
         </div>
       </motion.div>
     </div>
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 025fa197..ff1f4184 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -34,6 +34,7 @@ import ChatAlert from './ChatAlert';
 import type { ModelInfo } from '~/lib/modules/llm/types';
 import ProgressCompilation from './ProgressCompilation';
 import type { ProgressAnnotation } from '~/types/context';
+import { LOCAL_PROVIDERS } from '~/lib/stores/settings';
 
 const TEXTAREA_MIN_HEIGHT = 76;
 
@@ -404,7 +405,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                             apiKeys={apiKeys}
                             modelLoading={isModelLoading}
                           />
-                          {(providerList || []).length > 0 && provider && (
+                          {(providerList || []).length > 0 && provider && !LOCAL_PROVIDERS.includes(provider.name) && (
                             <APIKeyManager
                               provider={provider}
                               apiKey={apiKeys[provider.name] || ''}
diff --git a/app/lib/stores/settings.ts b/app/lib/stores/settings.ts
index 112efdca..8d8557df 100644
--- a/app/lib/stores/settings.ts
+++ b/app/lib/stores/settings.ts
@@ -1,5 +1,4 @@
 import { atom, map } from 'nanostores';
-import { workbenchStore } from './workbench';
 import { PROVIDER_LIST } from '~/utils/constants';
 import type { IProviderConfig } from '~/types/model';
 import type {
@@ -11,7 +10,7 @@ import type {
 import { DEFAULT_TAB_CONFIG } from '~/components/@settings/core/constants';
 import Cookies from 'js-cookie';
 import { toggleTheme } from './theme';
-import { chatStore } from './chat';
+import { create } from 'zustand';
 
 export interface Shortcut {
   key: string;
@@ -26,10 +25,8 @@ export interface Shortcut {
 }
 
 export interface Shortcuts {
-  toggleTerminal: Shortcut;
   toggleTheme: Shortcut;
-  toggleChat: Shortcut;
-  toggleSettings: Shortcut;
+  toggleTerminal: Shortcut;
 }
 
 export const URL_CONFIGURABLE_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
@@ -37,15 +34,8 @@ export const LOCAL_PROVIDERS = ['OpenAILike', 'LMStudio', 'Ollama'];
 
 export type ProviderSetting = Record<string, IProviderConfig>;
 
-// Define safer shortcuts that don't conflict with browser defaults
+// Simplified shortcuts store with only theme toggle
 export const shortcutsStore = map<Shortcuts>({
-  toggleTerminal: {
-    key: '`',
-    ctrlOrMetaKey: true,
-    action: () => workbenchStore.toggleTerminal(),
-    description: 'Toggle terminal',
-    isPreventDefault: true,
-  },
   toggleTheme: {
     key: 'd',
     metaKey: true,
@@ -55,22 +45,13 @@ export const shortcutsStore = map<Shortcuts>({
     description: 'Toggle theme',
     isPreventDefault: true,
   },
-  toggleChat: {
-    key: 'j', // Changed from 'k' to 'j' to avoid conflicts
+  toggleTerminal: {
+    key: '`',
     ctrlOrMetaKey: true,
-    altKey: true, // Added alt key to make it more unique
-    action: () => chatStore.setKey('showChat', !chatStore.get().showChat),
-    description: 'Toggle chat',
-    isPreventDefault: true,
-  },
-  toggleSettings: {
-    key: 's',
-    ctrlOrMetaKey: true,
-    altKey: true,
     action: () => {
-      document.dispatchEvent(new CustomEvent('toggle-settings'));
+      // This will be handled by the terminal component
     },
-    description: 'Toggle settings',
+    description: 'Toggle terminal',
     isPreventDefault: true,
   },
 });
@@ -319,3 +300,35 @@ export const setDeveloperMode = (value: boolean) => {
     localStorage.setItem(SETTINGS_KEYS.DEVELOPER_MODE, JSON.stringify(value));
   }
 };
+
+// First, let's define the SettingsStore interface
+interface SettingsStore {
+  isOpen: boolean;
+  selectedTab: string;
+  openSettings: () => void;
+  closeSettings: () => void;
+  setSelectedTab: (tab: string) => void;
+}
+
+export const useSettingsStore = create<SettingsStore>((set) => ({
+  isOpen: false,
+  selectedTab: 'user', // Default tab
+
+  openSettings: () => {
+    set({
+      isOpen: true,
+      selectedTab: 'user', // Always open to user tab
+    });
+  },
+
+  closeSettings: () => {
+    set({
+      isOpen: false,
+      selectedTab: 'user', // Reset to user tab when closing
+    });
+  },
+
+  setSelectedTab: (tab: string) => {
+    set({ selectedTab: tab });
+  },
+}));
diff --git a/app/utils/debounce.ts b/app/utils/debounce.ts
index 3b91d7a4..56813aa9 100644
--- a/app/utils/debounce.ts
+++ b/app/utils/debounce.ts
@@ -1,17 +1,13 @@
-export function debounce<Args extends any[]>(fn: (...args: Args) => void, delay = 100) {
-  if (delay === 0) {
-    return fn;
-  }
+export function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
 
-  let timer: number | undefined;
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
 
-  return function <U>(this: U, ...args: Args) {
-    const context = this;
-
-    clearTimeout(timer);
-
-    timer = window.setTimeout(() => {
-      fn.apply(context, args);
-    }, delay);
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
   };
 }