iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

added backdrop and loading screen

Browse Source
This commit is contained in:
Anirban Kar
2024-12-08 22:53:20 +05:30
parent 9f002279b6
commit b304749b21
4 changed files with 81 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/ui/LoadingOverlay.tsx Normal file
View File

@@ -0,0 +1,14 @@
export const LoadingOverlay = ({ message = 'Loading...' }) => {
return (
<div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50 backdrop-blur-sm">
{/* Loading content */}
<div className="relative flex flex-col items-center gap-4 p-8 rounded-lg bg-bolt-elements-background-depth-2 shadow-lg">
<div
className={'i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress'}
style={{ fontSize: '2rem' }}
></div>
<p className="text-lg text-bolt-elements-textTertiary">{message}</p>
</div>
</div>
);
};

75
app/components/ui/Settings.tsx
View File

@@ -10,7 +10,6 @@ import { toast } from 'react-toastify';
import { useNavigate } from '@remix-run/react';
import commit from '~/commit.json';
import Cookies from 'js-cookie';
import { SettingsSlider } from './SettingsSlider';
import '~/styles/components/SettingsSlider.scss';
import '~/styles/components/Settings.scss';
@@ -219,9 +218,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={classNames(
activeTab === tab.id ? 'active' : ''
)}
className={classNames(activeTab === tab.id ? 'active' : '')}
>
<div className={tab.icon} />
{tab.label}
@@ -250,7 +247,9 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
</div>
<div className="flex-1 flex flex-col p-8 bg-gray-50 dark:bg-gray-800">
<DialogTitle className="flex-shrink-0 text-lg font-semibold text-bolt-elements-textPrimary">Settings</DialogTitle>
<DialogTitle className="flex-shrink-0 text-lg font-semibold text-bolt-elements-textPrimary">
Settings
</DialogTitle>
<div className="flex-1 overflow-y-auto">
{activeTab === 'chat-history' && (
<div className="p-4">
@@ -304,14 +303,20 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
checked={provider.isEnabled}
onChange={() => handleToggleProvider(provider.name)}
/>
<div className={classNames(
'settings-toggle__track',
provider.isEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled'
)}></div>
<div className={classNames(
'settings-toggle__thumb',
provider.isEnabled ? 'settings-toggle__thumb--enabled' : ''
)}></div>
<div
className={classNames(
'settings-toggle__track',
provider.isEnabled
? 'settings-toggle__track--enabled'
: 'settings-toggle__track--disabled',
)}
></div>
<div
className={classNames(
'settings-toggle__thumb',
provider.isEnabled ? 'settings-toggle__thumb--enabled' : '',
)}
></div>
</label>
</div>
{/* Base URL input for configurable providers */}
@@ -343,14 +348,18 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
checked={isDebugEnabled}
onChange={() => setIsDebugEnabled(!isDebugEnabled)}
/>
<div className={classNames(
'settings-toggle__track',
isDebugEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled'
)}></div>
<div className={classNames(
'settings-toggle__thumb',
isDebugEnabled ? 'settings-toggle__thumb--enabled' : ''
)}></div>
<div
className={classNames(
'settings-toggle__track',
isDebugEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled',
)}
></div>
<div
className={classNames(
'settings-toggle__thumb',
isDebugEnabled ? 'settings-toggle__thumb--enabled' : '',
)}
></div>
</label>
</div>
</div>
@@ -367,14 +376,18 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
checked={isJustSayEnabled}
onChange={() => setIsJustSayEnabled(!isJustSayEnabled)}
/>
<div className={classNames(
'settings-toggle__track',
isJustSayEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled'
)}></div>
<div className={classNames(
'settings-toggle__thumb',
isJustSayEnabled ? 'settings-toggle__thumb--enabled' : ''
)}></div>
<div
className={classNames(
'settings-toggle__track',
isJustSayEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled',
)}
></div>
<div
className={classNames(
'settings-toggle__thumb',
isJustSayEnabled ? 'settings-toggle__thumb--enabled' : '',
)}
></div>
</label>
</div>
</div>
@@ -408,7 +421,9 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
<ul>
<li className="text-bolt-elements-textSecondary">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
<li className="text-bolt-elements-textSecondary">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li>
<li className="text-bolt-elements-textSecondary">LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}</li>
<li className="text-bolt-elements-textSecondary">
LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}
</li>
</ul>
<h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Version Information</h4>

6
app/components/ui/SettingsSlider.tsx
View File

@@ -27,7 +27,7 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
<motion.div
className={classNames(
'settings-slider__thumb',
isLeftSelected ? 'settings-slider__thumb--left' : 'settings-slider__thumb--right'
isLeftSelected ? 'settings-slider__thumb--left' : 'settings-slider__thumb--right',
)}
initial={false}
animate={{
@@ -44,7 +44,7 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
onClick={() => setSelected?.(options.left.value)}
className={classNames(
'settings-slider__button',
isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected'
isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected',
)}
>
{options.left.text}
@@ -53,7 +53,7 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
onClick={() => setSelected?.(options.right.value)}
className={classNames(
'settings-slider__button',
!isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected'
!isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected',
)}
>
{options.right.text}