feat: UI tweaks including dark mode fixes, FOUC flash fixes, suspenseful loading states, and 7 more (#2079)

ui/desktop/src/components/settings/api_keys/ActiveKeysContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, ReactNode, useEffect } from 'react';
 import { getActiveProviders } from './utils';
+import SuspenseLoader from '../../../suspense-loader';
 
 // Create a context for active keys
 const ActiveKeysContext = createContext<
@@ -33,7 +34,7 @@ export const ActiveKeysProvider = ({ children }: { children: ReactNode }) => {
   // Provide active keys and ability to update them
   return (
     <ActiveKeysContext.Provider value={{ activeKeys, setActiveKeys }}>
-      {!isLoading ? children : <div>Loading...</div>} {/* Conditional rendering */}
+      {!isLoading ? children : <SuspenseLoader />}
     </ActiveKeysContext.Provider>
   );
 };

ui/desktop/src/components/settings/basic/ConfigureApproveMode.tsx

@@ -49,58 +49,60 @@ export function ConfigureApproveMode({
   };
 
   return (
-    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm">
-      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[440px] bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden p-[16px] pt-[24px] pb-0">
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-10">
+      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[440px] bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden p-0">
         <div className="px-4 pb-0 space-y-6">
-          {/* Header */}
-          <div className="flex">
-            <h2 className="text-2xl font-regular dark:text-white text-gray-900">
-              Configure Approve Mode
-            </h2>
-          </div>
+          <div className="p-[16px] pt-[24px] pb-0">
+            {/* Header */}
+            <div className="flex">
+              <h2 className="text-2xl font-regular dark:text-white text-gray-900">
+                Configure Approve Mode
+              </h2>
+            </div>
 
-          <div className="mt-[24px]">
-            <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
-              Approve requests can either be given to all tool requests or determine which actions
-              may need integration
-            </p>
-            <div className="space-y-4">
-              {approveModes.map((mode) => (
-                <ModeSelectionItem
-                  key={mode.key}
-                  mode={mode}
-                  showDescription={true}
-                  currentMode={approveMode}
-                  isApproveModeConfigure={true}
-                  handleModeChange={(newMode) => {
-                    setApproveMode(newMode);
-                  }}
-                />
-              ))}
+            <div className="mt-[24px]">
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+                Approve requests can either be given to all tool requests or determine which actions
+                may need integration
+              </p>
+              <div className="space-y-4">
+                {approveModes.map((mode) => (
+                  <ModeSelectionItem
+                    key={mode.key}
+                    mode={mode}
+                    showDescription={true}
+                    currentMode={approveMode}
+                    isApproveModeConfigure={true}
+                    handleModeChange={(newMode) => {
+                      setApproveMode(newMode);
+                    }}
+                  />
+                ))}
+              </div>
             </div>
           </div>
+        </div>
 
-          {/* Actions */}
-          <div className="mt-[8px] ml-[-24px] mr-[-24px] pt-[16px]">
-            <Button
-              type="submit"
-              variant="ghost"
-              disabled={isSubmitting}
-              onClick={handleModeSubmit}
-              className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-lg hover:bg-gray-50 hover:dark:text-black dark:text-white dark:border-gray-600 font-regular"
-            >
-              {isSubmitting ? 'Saving...' : 'Save Mode'}
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              disabled={isSubmitting}
-              onClick={onClose}
-              className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-gray-400 hover:bg-gray-50 dark:border-gray-600 text-lg font-regular"
-            >
-              Cancel
-            </Button>
-          </div>
+        {/* Actions */}
+        <div className="mt-[8px] ml-[-24px] mr-[-24px] pt-[16px]">
+          <Button
+            type="submit"
+            variant="ghost"
+            disabled={isSubmitting}
+            onClick={handleModeSubmit}
+            className="w-full h-[60px] rounded-none border-t text-lg hover:bg-gray-50 dark:hover:text-black dark:text-white dark:border-gray-600 font-regular"
+          >
+            {isSubmitting ? 'Saving...' : 'Save Mode'}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            disabled={isSubmitting}
+            onClick={onClose}
+            className="w-full h-[60px] rounded-none border-t text-gray-400 dark:hover:text-black hover:bg-gray-50 dark:border-gray-600 text-lg font-regular"
+          >
+            Cancel
+          </Button>
         </div>
       </Card>
     </div>

ui/desktop/src/components/settings/models/AddModelInline.tsx

@@ -76,7 +76,7 @@ export function AddModelInline() {
         <Select
           options={providerOptions}
           value={providerOptions.find((option) => option.value === selectedProvider) || null}
-          onChange={(option) => {
+          onChange={(option: { value: string | null }) => {
             setSelectedProvider(option?.value || null);
             setModelName(''); // Clear model name when provider changes
             setFilteredModels([]);
@@ -110,10 +110,10 @@ export function AddModelInline() {
         </div>
         <Button
           type="button"
-          className="bg-black text-white hover:bg-black/90"
+          className="bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90"
           onClick={handleSubmit}
         >
-          <Plus className="mr-2 h-4 w-4" /> Add Model
+          <Plus className="h-4 w-4" /> Add Model
         </Button>
       </form>
     </div>

ui/desktop/src/components/settings/models/Search.tsx

@@ -74,7 +74,7 @@ export function SearchBar() {
 
   return (
     <div className="relative" ref={searchBarRef}>
-      <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+      <Search className="absolute left-3 top-[0.8rem] h-4 w-4 text-textSubtle" />
       <input
         type="text"
         placeholder="Search models..."
@@ -85,17 +85,17 @@ export function SearchBar() {
         }}
         onKeyDown={handleKeyDown}
         onFocus={() => setShowResults(true)}
-        className="w-full pl-12 py-2 bg-background border border-muted-foreground/20 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="w-full pl-9 py-2 text-black dark:text-white bg-bgApp border border-borderSubtle rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
       {showResults && search && (
-        <div className="absolute z-10 w-full mt-2 bg-white dark:bg-gray-800 border border-muted-foreground/20 rounded-md shadow-lg">
+        <div className="absolute z-10 w-full mt-2 bg-white dark:bg-gray-800 border border-borderSubtle rounded-md shadow-lg">
           {filteredModels.length > 0 ? (
             filteredModels.map((model, index) => (
               <div
                 key={model.id}
                 ref={(el) => (resultsRef.current[index] = el)}
-                className={`p-2 flex justify-between items-center hover:bg-muted/50 dark:hover:bg-gray-700 cursor-pointer ${
-                  model.id === currentModel?.id ? 'bg-muted/50 dark:bg-gray-700' : ''
+                className={`p-2 flex justify-between items-center hover:bg-bgSubtle/50 dark:hover:bg-gray-700 cursor-pointer ${
+                  model.id === currentModel?.id ? 'bg-bgSubtle/50 dark:bg-gray-700' : ''
                 }`}
               >
                 <div>
@@ -112,7 +112,7 @@ export function SearchBar() {
               </div>
             ))
           ) : (
-            <div className="p-2 text-muted-foreground dark:text-gray-400">No models found</div>
+            <div className="p-2 text-textSubtle dark:text-gray-400">No models found</div>
           )}
         </div>
       )}

ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx

@@ -112,7 +112,7 @@ function BaseProviderCard({
               </TooltipProvider>
             )}
           </div>
-          <p className="text-xs text-textSubtle mt-1.5 mb-3 leading-normal overflow-y-auto max-h-[54px] ">
+          <p className="text-xs text-textSubtle mt-1.5 mb-3 leading-normal scrollbar-thin overflow-y-auto max-h-[54px] ">
             {description}
           </p>
         </div>