From 0daff531108dc861e8a92b561bb965b8134cf0b0 Mon Sep 17 00:00:00 2001 From: Best Codes <106822363+The-Best-Codes@users.noreply.github.com> Date: Wed, 9 Apr 2025 16:54:12 -0500 Subject: [PATCH] feat: UI tweaks including dark mode fixes, FOUC flash fixes, suspenseful loading states, and 7 more (#2079) --- ui/desktop/src/App.tsx | 7 +- ui/desktop/src/components/GooseLogo.tsx | 2 +- .../settings/api_keys/ActiveKeysContext.tsx | 3 +- .../settings/basic/ConfigureApproveMode.tsx | 96 ++++++++++--------- .../settings/models/AddModelInline.tsx | 6 +- .../src/components/settings/models/Search.tsx | 12 +-- .../settings/providers/BaseProviderGrid.tsx | 2 +- ui/desktop/src/renderer.tsx | 26 ++--- ui/desktop/src/styles/main.css | 8 ++ ui/desktop/src/suspense-loader.tsx | 11 +++ 10 files changed, 101 insertions(+), 72 deletions(-) create mode 100644 ui/desktop/src/suspense-loader.tsx diff --git a/ui/desktop/src/App.tsx b/ui/desktop/src/App.tsx index f23a4a79..0860eecf 100644 --- a/ui/desktop/src/App.tsx +++ b/ui/desktop/src/App.tsx @@ -19,6 +19,7 @@ import { SharedSessionDetails } from './sharedSessions'; import WelcomeView from './components/WelcomeView'; import ChatView from './components/ChatView'; +import SuspenseLoader from './suspense-loader'; import SettingsView, { type SettingsViewOptions } from './components/settings/SettingsView'; import SettingsViewV2 from './components/settings_v2/SettingsView'; import MoreModelsView from './components/settings/models/MoreModelsView'; @@ -44,7 +45,8 @@ export type View = | 'ConfigureProviders' | 'settingsV2' | 'sessions' - | 'sharedSession'; + | 'sharedSession' + | 'loading'; export type ViewConfig = { view: View; @@ -62,7 +64,7 @@ export default function App() { const [pendingLink, setPendingLink] = useState(null); const [modalMessage, setModalMessage] = useState(''); const [{ view, viewOptions }, setInternalView] = useState({ - view: 'welcome', + view: 'loading', viewOptions: {}, }); const { getExtensions, addExtension, read } = useConfig(); @@ -412,6 +414,7 @@ export default function App() {
+ {view === 'loading' && } {view === 'welcome' && (settingsV2Enabled ? ( setView('chat')} isOnboarding={true} /> diff --git a/ui/desktop/src/components/GooseLogo.tsx b/ui/desktop/src/components/GooseLogo.tsx index 5a8d3f8e..1df25c62 100644 --- a/ui/desktop/src/components/GooseLogo.tsx +++ b/ui/desktop/src/components/GooseLogo.tsx @@ -19,7 +19,7 @@ export default function GooseLogo({ className = '', size = 'default', hover = tr className={`${className} ${sizes[size].frame} ${hover ? 'group/with-hover' : ''} relative overflow-hidden`} >
diff --git a/ui/desktop/src/components/settings/api_keys/ActiveKeysContext.tsx b/ui/desktop/src/components/settings/api_keys/ActiveKeysContext.tsx index 0528234b..52f7b6ae 100644 --- a/ui/desktop/src/components/settings/api_keys/ActiveKeysContext.tsx +++ b/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 ( - {!isLoading ? children :
Loading...
} {/* Conditional rendering */} + {!isLoading ? children : } ); }; diff --git a/ui/desktop/src/components/settings/basic/ConfigureApproveMode.tsx b/ui/desktop/src/components/settings/basic/ConfigureApproveMode.tsx index 621ee3f5..f0fbe20d 100644 --- a/ui/desktop/src/components/settings/basic/ConfigureApproveMode.tsx +++ b/ui/desktop/src/components/settings/basic/ConfigureApproveMode.tsx @@ -49,58 +49,60 @@ export function ConfigureApproveMode({ }; return ( -
- +
+
- {/* Header */} -
-

- Configure Approve Mode -

-
+
+ {/* Header */} +
+

+ Configure Approve Mode +

+
-
-

- Approve requests can either be given to all tool requests or determine which actions - may need integration -

-
- {approveModes.map((mode) => ( - { - setApproveMode(newMode); - }} - /> - ))} +
+

+ Approve requests can either be given to all tool requests or determine which actions + may need integration +

+
+ {approveModes.map((mode) => ( + { + setApproveMode(newMode); + }} + /> + ))} +
+
- {/* Actions */} -
- - -
+ {/* Actions */} +
+ +
diff --git a/ui/desktop/src/components/settings/models/AddModelInline.tsx b/ui/desktop/src/components/settings/models/AddModelInline.tsx index 6c26182a..a7e345ea 100644 --- a/ui/desktop/src/components/settings/models/AddModelInline.tsx +++ b/ui/desktop/src/components/settings/models/AddModelInline.tsx @@ -76,7 +76,7 @@ export function AddModelInline() { 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 && ( -
+
{filteredModels.length > 0 ? ( filteredModels.map((model, index) => (
(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' : '' }`} >
@@ -112,7 +112,7 @@ export function SearchBar() {
)) ) : ( -
No models found
+
No models found
)}
)} diff --git a/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx b/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx index eae5b137..bce08f64 100644 --- a/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx +++ b/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx @@ -112,7 +112,7 @@ function BaseProviderCard({ )}
-

+

{description}

diff --git a/ui/desktop/src/renderer.tsx b/ui/desktop/src/renderer.tsx index 085bccbf..d08734f7 100644 --- a/ui/desktop/src/renderer.tsx +++ b/ui/desktop/src/renderer.tsx @@ -1,24 +1,28 @@ -import React from 'react'; +import React, { Suspense, lazy } from 'react'; import ReactDOM from 'react-dom/client'; -import App from './App'; import { ModelProvider } from './components/settings/models/ModelContext'; import { ConfigProvider } from './components/ConfigContext'; import { ErrorBoundary } from './components/ErrorBoundary'; import { ActiveKeysProvider } from './components/settings/api_keys/ActiveKeysContext'; import { patchConsoleLogging } from './utils'; +import SuspenseLoader from './suspense-loader'; patchConsoleLogging(); +const App = lazy(() => import('./App')); + ReactDOM.createRoot(document.getElementById('root')!).render( - - - - - - - - - + + + + + + + + + + + ); diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css index 03011022..6372cbe3 100644 --- a/ui/desktop/src/styles/main.css +++ b/ui/desktop/src/styles/main.css @@ -240,6 +240,10 @@ background: var(--dark-grey-60); } } + + body { + background-color: var(--background-app); + } } @layer components { @@ -296,4 +300,8 @@ .user-message p { margin-bottom: 0 !important; } + + .scrollbar-thin { + scrollbar-width: thin; + } } diff --git a/ui/desktop/src/suspense-loader.tsx b/ui/desktop/src/suspense-loader.tsx new file mode 100644 index 00000000..4530cbc9 --- /dev/null +++ b/ui/desktop/src/suspense-loader.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import GooseLogo from './components/GooseLogo'; + +export default function SuspenseLoader() { + return ( +
+ + Loading... +
+ ); +}