From 77f8197fc1411e355cd6fbae221a3e0c57dbfb8c Mon Sep 17 00:00:00 2001 From: ectasy663 Date: Mon, 29 Sep 2025 21:04:21 +0530 Subject: [PATCH] UI: refine panels, sidebar, chat dock, add BuyCredits page and style tweaks --- src/App.tsx | 36 ++++-- src/components/AgentPanel.tsx | 57 +++------ src/components/ChatDock.tsx | 2 +- src/components/CreditsModal.tsx | 211 +++++++++++++++++--------------- src/components/DisplayPanel.tsx | 33 +++-- src/components/SidebarNav.tsx | 42 +++---- src/components/TopBar.tsx | 17 +-- src/index.css | 11 ++ src/pages/BuyCreditsPage.tsx | 57 +++++++++ src/pages/LandingPage.tsx | 85 +++++++++++-- src/pages/LoginPage.tsx | 40 ++++-- 11 files changed, 365 insertions(+), 226 deletions(-) create mode 100644 src/pages/BuyCreditsPage.tsx diff --git a/src/App.tsx b/src/App.tsx index 7ea91a8..ac1c292 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,11 @@ import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; -import LandingPage from './pages/LandingPage'; -import LoginPage from './pages/LoginPage'; -import ForgotPasswordPage from './pages/ForgotPasswordPage'; +import { Suspense, lazy } from 'react'; + +// Route-level code splitting (improves first paint for initial /login route) +const LandingPage = lazy(() => import('./pages/LandingPage')); +const LoginPage = lazy(() => import('./pages/LoginPage')); +const ForgotPasswordPage = lazy(() => import('./pages/ForgotPasswordPage')); +const BuyCreditsPage = lazy(() => import('./pages/BuyCreditsPage')); function App() { return ( @@ -39,13 +43,25 @@ function App() { /> {/* Main Content - Highest z-index for interactivity */} -
- - } /> - } /> - } /> - } /> - +
+ +
+
+ Loading… +
+
+ } + > + + } /> + } /> + } /> + } /> + } /> + +
diff --git a/src/components/AgentPanel.tsx b/src/components/AgentPanel.tsx index 86135d4..d013800 100644 --- a/src/components/AgentPanel.tsx +++ b/src/components/AgentPanel.tsx @@ -29,23 +29,18 @@ const AgentPanel: React.FC = ({ agents, activeAgentId, onChange ], []); return ( -
-
-

Personal Assistant

-
- {active.name} -
-
+
+ {/* Removed heading & static active name per user request */} -
-
+
+
{/* Creative Orbital Agent Display */}
{/* Central Hub */}
{/* Outer orbital ring */} -
+
{/* Orbital path indicator */}
@@ -63,7 +58,7 @@ const AgentPanel: React.FC = ({ agents, activeAgentId, onChange
{/* Tooltip positioned outside rotating container */} -
-
+
{agent.name}
@@ -115,36 +110,18 @@ const AgentPanel: React.FC = ({ agents, activeAgentId, onChange
{/* Central Control Hub */} -
-
+
+
-
🤖
-
HUB
+
🤖
+
HUB
- - {/* Pulsing energy rings */} -
-
+ {/* Removed pulsing rings for a calmer static display */}
- - {/* Floating particles for ambiance */} -
- {[...Array(6)].map((_, i) => ( -
- ))} -
+ {/* Removed floating particle animations */}
); diff --git a/src/components/ChatDock.tsx b/src/components/ChatDock.tsx index c10c2e3..7a657a8 100644 --- a/src/components/ChatDock.tsx +++ b/src/components/ChatDock.tsx @@ -30,7 +30,7 @@ const ChatDock: React.FC = ({ messages, onSend, placeholder = 'As }; return ( -
+
{messages.map((m) => ( diff --git a/src/components/CreditsModal.tsx b/src/components/CreditsModal.tsx index 4e11454..3872728 100644 --- a/src/components/CreditsModal.tsx +++ b/src/components/CreditsModal.tsx @@ -3,9 +3,10 @@ import React, { useState } from 'react'; interface CreditsScreenProps { isOpen: boolean; onClose: () => void; + sidebarOpen?: boolean; // controls left offset dynamically } -const CreditsScreen: React.FC = ({ isOpen, onClose }) => { +const CreditsScreen: React.FC = ({ isOpen, onClose, sidebarOpen }) => { const [selectedYear, setSelectedYear] = useState('2025'); const [selectedMonth, setSelectedMonth] = useState('09'); @@ -24,131 +25,139 @@ const CreditsScreen: React.FC = ({ isOpen, onClose }) => { const monthlyUsage = 16; const monthlyPurchases = 100; + // Determine offsets: if sidebarOpen true use sidebar widths, else flush left. + const leftMobile = sidebarOpen ? 'left-16' : 'left-0'; + const leftDesktop = sidebarOpen ? 'md:left-56' : 'md:left-0'; return ( -
- {/* Header */} -
-
+
+ {/* Header (compact, subtitle removed) */} +
+ +

Credits & Usage History

+
-
-

Credits & Usage History

-

Manage your account balance and track usage patterns

-
-
-
-
- {currentBalance} Credits -
{/* Main Content */} -
- {/* Stats Cards */} -
-
-
-
- - - -
-
-

Current Balance

-

Available credits

+
+ {/* Stats Cards condensed with inline numbers */} +
+
+
+
+
+ +
+
+

Current Balance

+

Available

+
+
{currentBalance}
-

{currentBalance}

- -
-
-
- - - -
-
-

Monthly Usage

-

Credits spent this month

+
+
+
+
+ +
+
+

Monthly Usage

+

Spent

+
+
{monthlyUsage}
-

{monthlyUsage}

- -
-
-
- - - -
-
-

Monthly Purchases

-

Credits purchased this month

+
+
+
+
+ +
+
+

Monthly Purchases

+

Bought

+
+
{monthlyPurchases}
-

{monthlyPurchases}

- {/* Filters */} -
-
+ {/* History Table with inline filters */} +
+
- - +

Transaction History

-
- - -
-
-
-
- - {/* History Table */} -
-
-

Transaction History

-

Detailed record of all credit transactions

-
diff --git a/src/components/DisplayPanel.tsx b/src/components/DisplayPanel.tsx index 3aa45f7..1ab4c3f 100644 --- a/src/components/DisplayPanel.tsx +++ b/src/components/DisplayPanel.tsx @@ -8,10 +8,10 @@ const DisplayPanel: React.FC = ({ children }) => { const [activeTab, setActiveTab] = useState<'instructions' | 'playground'>('instructions'); return ( -
- {/* Tab header */} -
-
+
+ {/* Tab header condensed */} +
+
{[ { id: 'instructions', label: 'Instructions' }, { id: 'playground', label: 'Playground' }, @@ -23,10 +23,10 @@ const DisplayPanel: React.FC = ({ children }) => { role="tab" aria-selected={active} onClick={() => setActiveTab(t.id as 'instructions' | 'playground')} - className={`px-4 py-1.5 md:px-5 md:py-2 rounded-lg text-sm font-montserrat transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-luxury-gold/40 ${ + className={`px-3 py-1 md:px-4 md:py-1.5 rounded-md text-xs md:text-sm font-montserrat transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-luxury-gold/30 ${ active - ? 'bg-gradient-to-r from-luxury-gold/25 to-brass/25 text-cream border border-luxury-gold/40 shadow-[0_2px_14px_rgba(197,157,89,0.25)]' - : 'text-cream/80 hover:text-cream hover:bg-luxury-gold/10 border border-transparent' + ? 'bg-gradient-to-r from-luxury-gold/25 to-brass/25 text-cream border border-luxury-gold/30' + : 'text-cream/75 hover:text-cream hover:bg-luxury-gold/10 border border-transparent' }`} > {t.label} @@ -36,12 +36,9 @@ const DisplayPanel: React.FC = ({ children }) => {
- {/* Panel body */} -
- {/* soft decorative gradient */} -
- -
+ {/* Panel body condensed */} +
+
{activeTab === 'instructions' ? (

Welcome. This panel guides you on how to drive agents and view results.

@@ -51,12 +48,12 @@ const DisplayPanel: React.FC = ({ children }) => {
  • Watch this panel for summaries, charts, or generated assets.
  • Refine with follow-ups. Use concise prompts for best results.
    • -
    -
    +
    +
    Tip
    Start prompts with a verb: “Summarize…”, “Compare…”, “Draft…”.
    -
    +
    Format
    Ask for tables, bullet points, or JSON if you need structured output.
    @@ -67,8 +64,8 @@ const DisplayPanel: React.FC = ({ children }) => { {children || (
    This is your playground canvas. Render previews, charts, or content here.
    -
    -
    Empty Canvas
    +
    +
    Empty Canvas
    Hook this area to your agent outputs to visualize results.
    diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx index 14fbec4..6846795 100644 --- a/src/components/SidebarNav.tsx +++ b/src/components/SidebarNav.tsx @@ -14,7 +14,7 @@ interface SidebarNavProps { const SidebarNav: React.FC = ({ items, activeId, onSelect }) => { return ( -