refactor(web): normalize global config theme surface

This commit is contained in:
Saravana Achu Mac 2026-05-05 22:18:42 -07:00
parent b8864ea276
commit df00e977d4
2 changed files with 27 additions and 21 deletions

View File

@ -98,7 +98,7 @@ Current public bundle:
- [x] Normalize `web/src/components/TradeProfileManager.tsx`
- [x] Normalize `web/src/components/StrategyWizard.tsx`
- [x] Normalize `web/src/tabs/ReconciliationAuditPanel.tsx`
- [ ] Normalize `web/src/components/GlobalConfigManager.tsx`
- [x] Normalize `web/src/components/GlobalConfigManager.tsx`
- [ ] Normalize `web/src/components/EntryForm.tsx`
- [ ] Normalize remaining old admin/config surfaces
- [ ] Remove remaining dark-only bespoke surface systems

View File

@ -1,6 +1,9 @@
import React from 'react';
import { Save, AlertCircle, CheckCircle } from 'lucide-react';
import { Save, AlertCircle, CheckCircle, Globe2 } from 'lucide-react';
import { fetchDynamicConfigItems, upsertDynamicConfigItems } from '../lib/dynamicConfigApi';
import { Button } from './ui/button';
import { Card } from './ui/card';
import { Input } from './ui/input';
interface ConfigItem {
key: string;
@ -46,16 +49,17 @@ export const GlobalConfigManager = () => {
setSaving(false);
};
if (loading) return <div className="p-4 text-gray-500">Loading system configuration...</div>;
if (loading) return <div className="p-4 text-[var(--muted-foreground)]">Loading system configuration...</div>;
return (
<div className="bg-black/20 border border-white/5 rounded-xl p-6">
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
🌍 Global Bot Configuration
<Card className="rounded-xl p-6">
<h3 className="mb-4 flex items-center gap-2 text-lg font-semibold text-[var(--foreground)]">
<Globe2 size={18} className="text-[var(--accent)]" />
Global Bot Configuration
</h3>
{message && (
<div className={`mb-4 p-3 rounded-lg flex items-center gap-2 text-sm ${message.type === 'success' ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20'
<div className={`mb-4 flex items-center gap-2 rounded-lg border p-3 text-sm ${message.type === 'success' ? 'border-green-500/20 bg-green-500/10 text-green-600 dark:text-green-400' : 'border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-400'
}`}>
{message.type === 'success' ? <CheckCircle size={16} /> : <AlertCircle size={16} />}
{message.text}
@ -64,40 +68,42 @@ export const GlobalConfigManager = () => {
<div className="space-y-4">
{configs.map((config) => (
<div key={config.key} className="flex flex-col gap-1 pb-4 border-b border-white/5 last:border-0 last:pb-0">
<div key={config.key} className="flex flex-col gap-1 border-b border-[var(--border)] pb-4 last:border-0 last:pb-0">
<div className="flex items-center justify-between">
<label className="text-xs font-bold text-orange-400 uppercase tracking-wider">{config.key}</label>
<button
<label className="text-xs font-bold uppercase tracking-wider text-[var(--accent)]">{config.key}</label>
<Button
onClick={() => handleSave(config)}
disabled={saving}
className="text-xs bg-orange-500/20 hover:bg-orange-500/40 text-orange-300 px-2 py-1 rounded border border-orange-500/30 transition-colors flex items-center gap-1"
variant="outline"
size="sm"
className="h-7 rounded px-2 text-xs"
>
<Save size={12} /> Save
</button>
</Button>
</div>
<input
<Input
type="text"
value={config.value}
onChange={(e) => handleChange(config.key, e.target.value)}
className="bg-black/40 border border-white/10 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-orange-500/50"
className="h-10 rounded px-3 py-2 text-sm"
/>
<p className="text-[10px] text-gray-500 italic">{config.description || 'System setting used by the trading core.'}</p>
<p className="text-[10px] italic text-[var(--muted-foreground)]">{config.description || 'System setting used by the trading core.'}</p>
</div>
))}
{configs.length === 0 && (
<div className="text-center py-8 border border-dashed border-white/10 rounded-lg">
<p className="text-sm text-gray-500 mb-2">No dynamic configuration entries found.</p>
<p className="text-xs text-gray-600">The bot is currently using .env defaults.</p>
<div className="rounded-lg border border-dashed border-[var(--border)] py-8 text-center">
<p className="mb-2 text-sm text-[var(--muted-foreground)]">No dynamic configuration entries found.</p>
<p className="text-xs text-[var(--muted-foreground)]">The bot is currently using .env defaults.</p>
</div>
)}
</div>
<div className="mt-6 pt-4 border-t border-white/10">
<p className="text-[10px] text-gray-400 leading-relaxed">
<div className="mt-6 border-t border-[var(--border)] pt-4">
<p className="text-[10px] leading-relaxed text-[var(--muted-foreground)]">
<strong>Note:</strong> Changes to global variables usually require a bot restart to take full effect (e.g. changing intervals or providers). Symbols may update dynamically depending on strategy implementation.
</p>
</div>
</div>
</Card>
);
};