naman_panwar_gnpl/Pennyzo-webapp-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: refine panels, sidebar, chat dock, add BuyCredits page and style tweaks

Browse Source
This commit is contained in:
ectasy663
2025-09-29 21:04:21 +05:30
parent c7a3220016
commit 77f8197fc1
11 changed files with 365 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/AgentPanel.tsx
View File

@@ -29,23 +29,18 @@ const AgentPanel: React.FC<AgentPanelProps> = ({ agents, activeAgentId, onChange
], []);
return (
<div className="h-full w-full border border-luxury-gold/25 rounded-2xl p-4 md:p-6 bg-deep-forest/50 backdrop-blur-xl overflow-hidden flex flex-col shadow-luxury-inner">
<div className="flex items-center justify-between mb-4">
<h3 className="font-playfair text-xl text-cream">Personal Assistant</h3>
<div className="text-cream/80 text-sm font-montserrat">
{active.name}
</div>
</div>
<div className="h-full w-full rounded-xl bg-deep-forest/60 backdrop-blur-xl overflow-hidden flex flex-col shadow-inner">
{/* Removed heading & static active name per user request */}
<div className="relative rounded-xl bg-gradient-to-br from-deep-forest/60 to-rich-brown/40 border border-luxury-gold/25 overflow-hidden flex-1">
<div className={`absolute inset-0 opacity-40 bg-gradient-to-br ${active.color}`} />
<div className="relative flex-1">
<div className={`absolute inset-0 opacity-35 bg-gradient-to-br ${active.color}`} />
{/* Creative Orbital Agent Display */}
<div className="absolute inset-0 grid place-items-center">
{/* Central Hub */}
<div className="relative">
{/* Outer orbital ring */}
<div className="w-72 h-72 rounded-full border border-luxury-gold/20 animate-spin-ultra-slow relative">
<div className="w-72 h-72 rounded-full border border-luxury-gold/15 relative">
{/* Orbital path indicator */}
<div className="absolute inset-4 rounded-full border border-luxury-gold/10"></div>
<div className="absolute inset-8 rounded-full border border-luxury-gold/5"></div>
@@ -63,7 +58,7 @@ const AgentPanel: React.FC<AgentPanelProps> = ({ agents, activeAgentId, onChange
<div key={agent.id} className="contents">
<button
onClick={() => onChangeAgent(agent.id)}
className={`absolute w-14 h-14 rounded-2xl transition-all duration-500 hover:scale-125 focus:outline-none group ${
className={`absolute w-12 h-12 rounded-xl transition-all duration-300 hover:scale-125 focus:outline-none group ${
isActive
? 'bg-gradient-to-br from-luxury-gold/60 to-brass/60 border-2 border-luxury-gold shadow-[0_0_25px_rgba(197,157,89,0.8)] scale-110 z-10'
: 'bg-deep-forest/70 border border-luxury-gold/30 hover:border-luxury-gold/60 hover:bg-deep-forest/80'
@@ -71,7 +66,7 @@ const AgentPanel: React.FC<AgentPanelProps> = ({ agents, activeAgentId, onChange
style={{
left: '50%',
top: '50%',
transform: `translate(${x - 28}px, ${y - 28}px)`,
transform: `translate(${x - 24}px, ${y - 24}px)`,
}}
title={agent.name}
>
@@ -97,15 +92,15 @@ const AgentPanel: React.FC<AgentPanelProps> = ({ agents, activeAgentId, onChange
</button>
{/* Tooltip positioned outside rotating container */}
<div
className="absolute opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-50"
<div
className="absolute z-50 pointer-events-none"
style={{
left: '50%',
top: '50%',
transform: `translate(${x - 28}px, ${y + 40}px)`,
transform: `translate(${x - 24}px, ${y + 40}px)`,
}}
>
<div className="bg-deep-forest/95 text-cream text-sm px-3 py-2 rounded-xl border border-luxury-gold/40 whitespace-nowrap font-montserrat font-medium shadow-[0_4px_12px_rgba(0,0,0,0.4)] -translate-x-1/2">
<div className="opacity-0 group-hover:opacity-100 transition-opacity duration-150 bg-deep-forest/95 text-cream/90 text-[11px] px-2 py-1 rounded-md border border-luxury-gold/30 whitespace-nowrap font-montserrat font-medium shadow-[0_2px_4px_rgba(0,0,0,0.4)] -translate-x-1/2">
{agent.name}
</div>
</div>
@@ -115,36 +110,18 @@ const AgentPanel: React.FC<AgentPanelProps> = ({ agents, activeAgentId, onChange
</div>
{/* Central Control Hub */}
<div className="absolute top-1/2 left-1/2 w-20 h-20 -translate-x-1/2 -translate-y-1/2 z-20">
<div className="w-full h-full rounded-full bg-gradient-to-br from-deep-forest/80 to-rich-brown/60 border-2 border-luxury-gold/40 shadow-[0_0_20px_rgba(197,157,89,0.3)] flex items-center justify-center group cursor-pointer">
<div className="absolute top-1/2 left-1/2 w-16 h-16 -translate-x-1/2 -translate-y-1/2 z-20">
<div className="w-full h-full rounded-full bg-gradient-to-br from-deep-forest/80 to-rich-brown/60 border border-luxury-gold/30 flex items-center justify-center group cursor-pointer">
<div className="text-center">
<div className="text-2xl mb-1">🤖</div>
<div className="text-xs text-cream/80 font-montserrat font-medium">HUB</div>
<div className="text-xl mb-0.5">🤖</div>
<div className="text-[10px] text-cream/80 font-montserrat font-medium">HUB</div>
</div>
</div>
{/* Pulsing energy rings */}
<div className="absolute inset-0 rounded-full border border-luxury-gold/20 animate-ping"></div>
<div className="absolute inset-2 rounded-full border border-luxury-gold/10 animate-ping animation-delay-1000"></div>
{/* Removed pulsing rings for a calmer static display */}
</div>
</div>
</div>
{/* Floating particles for ambiance */}
<div className="absolute inset-0 pointer-events-none">
{[...Array(6)].map((_, i) => (
<div
key={i}
className="absolute w-1 h-1 bg-luxury-gold rounded-full animate-ping"
style={{
left: `${20 + Math.random() * 60}%`,
top: `${20 + Math.random() * 60}%`,
animationDelay: `${Math.random() * 2}s`,
animationDuration: `${1.5 + Math.random() * 1}s`
}}
></div>
))}
</div>
{/* Removed floating particle animations */}
</div>
</div>
);