feat(ui): complete layout redesign — three-panel desk layout
Replaced the hero + scrollable grid with a fixed-height three-column workspace: - Left (fixed 288px): Kira avatar + compact chat + text input - Center (flex): Large focus timer + notes - Right (fixed 256px): Music, white noise, wardrobe, pets Thin top bar: scene selector dots + clock Thin bottom bar: status + connection indicator No cards, no scrollable grid, no wasted space. Clean, modern, everything visible at once. Avatar fills full sidebar height.
This commit is contained in:
+71
-96
@@ -1,6 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import Clock from './components/Clock';
|
||||
import BackgroundScene from './components/BackgroundScene';
|
||||
import MusicPlayer from './components/MusicPlayer';
|
||||
import Timer from './components/Timer';
|
||||
import Notes from './components/Notes';
|
||||
@@ -9,7 +7,6 @@ import KiraAvatar from './components/KiraAvatar';
|
||||
import ChatBubble from './components/ChatBubble';
|
||||
import PetZone from './components/PetZone';
|
||||
import Wardrobe from './components/Wardrobe';
|
||||
import Toolbar from './components/Toolbar';
|
||||
import Particles from './components/Particles';
|
||||
import WelcomeScreen from './components/WelcomeScreen';
|
||||
import { SCENES, type Scene } from './components/scenes';
|
||||
@@ -37,7 +34,6 @@ export default function App() {
|
||||
const [currentAcc, setCurrentAcc] = useState<string | null>(null);
|
||||
const [textInput, setTextInput] = useState('');
|
||||
|
||||
// Apply saved preferences once they load
|
||||
useEffect(() => {
|
||||
if (preferences.scene) setCurrentSceneId(preferences.scene);
|
||||
if (preferences.outfit) setCurrentOutfit(preferences.outfit);
|
||||
@@ -76,129 +72,108 @@ export default function App() {
|
||||
identify(name);
|
||||
};
|
||||
|
||||
// Show WelcomeScreen for first-time users
|
||||
if (!identified && !loadingPrefs) {
|
||||
const savedId = localStorage.getItem('kira-user-id');
|
||||
if (!savedId) {
|
||||
return <WelcomeScreen onComplete={handleWelcome} />;
|
||||
}
|
||||
// Has saved ID but not identified yet — show welcome with their name
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
|
||||
<div className="h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20">
|
||||
<div className="max-w-sm w-full p-6 text-center space-y-4">
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 mx-auto animate-pulse-glow">
|
||||
<div className="w-full h-full rounded-full bg-white flex items-center justify-center">
|
||||
<span className="text-2xl">🌸</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-kira-plum/60 text-sm">coming back? say your name to pick up where you left off</p>
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 mx-auto" style={{ animation: 'pulse-glow 3s ease-in-out infinite' }}><div className="w-full h-full rounded-full bg-white flex items-center justify-center"><span className="text-2xl">🌸</span></div></div>
|
||||
<p className="text-kira-plum/60 text-sm">coming back? say your name</p>
|
||||
<WelcomeScreen onComplete={handleWelcome} isCompact />
|
||||
</div>
|
||||
<style>{`
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { box-shadow: 0 0 12px rgba(255,182,193,0.3); }
|
||||
50% { box-shadow: 0 0 28px rgba(216,180,254,0.5); }
|
||||
}
|
||||
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
|
||||
`}</style>
|
||||
<style>{'@keyframes pulse-glow{0%,100%{box-shadow:0 0 12px rgba(255,182,193,0.3)}50%{box-shadow:0 0 28px rgba(216,180,254,0.5)}}'}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Main app with user's name in the greeting
|
||||
const userName = preferences.name || 'there';
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen relative transition-all duration-1000"
|
||||
style={{ background: currentScene.gradient }}
|
||||
>
|
||||
<div className="h-screen relative transition-all duration-1000" style={{ background: currentScene.gradient }}>
|
||||
<Particles type={currentScene.particles ?? 'none'} />
|
||||
|
||||
<div className="relative z-20 h-screen flex flex-col">
|
||||
{/* Top toolbar */}
|
||||
<div className="px-4 pt-4">
|
||||
<Toolbar currentScene={currentSceneId} onSceneChange={handleSceneChange} />
|
||||
</div>
|
||||
|
||||
{/* Hero: Avatar centered, ~1/3 of viewport */}
|
||||
<div className="flex-none flex justify-center py-4 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
<KiraAvatar
|
||||
isSpeaking={isKiraSpeaking}
|
||||
isListening={isRecording}
|
||||
outfit={currentOutfit}
|
||||
accessory={currentAcc}
|
||||
onTalkToggle={handleTalkToggle}
|
||||
/>
|
||||
<div className="relative z-20 h-full flex flex-col">
|
||||
{/* ── Top bar: scene selector + clock ── */}
|
||||
<div className="flex items-center justify-between px-5 py-3 shrink-0">
|
||||
<div className="flex items-center gap-1">
|
||||
{SCENES.map((s) => (
|
||||
<button key={s.id} onClick={() => handleSceneChange(s.id)}
|
||||
className={'w-8 h-8 rounded-full flex items-center justify-center text-sm transition-all '
|
||||
+ (s.id === currentSceneId ? 'bg-white/60 shadow-sm scale-110' : 'hover:bg-white/30')}>
|
||||
{s.icon}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-kira-plum/30 text-xs font-medium">
|
||||
{new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} · {new Date().toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' })}
|
||||
</span>
|
||||
<span className="text-xs text-kira-plum/20">🌸 body double</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tools grid below the avatar */}
|
||||
<div className="flex-1 overflow-y-auto px-4 pb-4 scrollbar-thin">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 max-w-7xl mx-auto">
|
||||
|
||||
{/* Column 1: Chat + Text Input */}
|
||||
<div className="space-y-4">
|
||||
{/* ── Main three-column body ── */}
|
||||
<div className="flex-1 flex min-h-0 px-4 gap-4">
|
||||
{/* LEFT: Avatar + Chat */}
|
||||
<div className="w-72 shrink-0 flex flex-col gap-3">
|
||||
<div className="flex-1 min-h-0 rounded-2xl bg-white/30 overflow-hidden">
|
||||
<KiraAvatar
|
||||
isSpeaking={isKiraSpeaking}
|
||||
isListening={isRecording}
|
||||
outfit={currentOutfit}
|
||||
accessory={currentAcc}
|
||||
onTalkToggle={handleTalkToggle}
|
||||
/>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} livePartial={livePartial} />
|
||||
|
||||
{/* Text input fallback */}
|
||||
<div className="p-3">
|
||||
<div className="text-[10px] text-kira-plum/30 mb-2">
|
||||
hey {userName} ✨
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={textInput}
|
||||
onChange={(e) => setTextInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleTextSend()}
|
||||
placeholder={`what's up, ${userName}?`}
|
||||
className="flex-1 bg-white/60 rounded-xl px-3 py-2 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50"
|
||||
/>
|
||||
<button onClick={handleTextSend} className="btn-kira px-3 text-sm">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2 text-[10px] text-kira-plum/30">
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-kira-mint' : 'bg-red-300'}`} />
|
||||
{isConnected ? 'connected' : 'connecting...'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 flex gap-2">
|
||||
<input
|
||||
value={textInput}
|
||||
onChange={(e) => setTextInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleTextSend()}
|
||||
placeholder={`hey ${userName}...`}
|
||||
className="flex-1 bg-white/40 rounded-xl px-3 py-2 text-sm text-kira-plum placeholder-kira-plum/30 border-0 focus:outline-none focus:ring-2 focus:ring-kira-pink/30"
|
||||
/>
|
||||
<button onClick={handleTextSend} className="btn-kira px-4 text-sm shrink-0">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column 2: Timer + Music */}
|
||||
<div className="space-y-4">
|
||||
{/* CENTER: Focus Timer + Notes */}
|
||||
<div className="flex-1 flex flex-col gap-4 min-w-0">
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<Timer />
|
||||
<MusicPlayer />
|
||||
</div>
|
||||
|
||||
{/* Column 3: Notes + White Noise */}
|
||||
<div className="space-y-4">
|
||||
<div className="shrink-0">
|
||||
<Notes />
|
||||
<WhiteNoise />
|
||||
</div>
|
||||
|
||||
{/* Column 4: Cats + Wardrobe + Clock */}
|
||||
<div className="space-y-4">
|
||||
<Clock />
|
||||
<PetZone />
|
||||
<Wardrobe onOutfitChange={handleOutfitChange} onAccessoryChange={handleAccessoryChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT: Ambient + Companions */}
|
||||
<div className="w-64 shrink-0 flex flex-col gap-3 overflow-y-auto">
|
||||
<MusicPlayer />
|
||||
<WhiteNoise />
|
||||
<Wardrobe onOutfitChange={handleOutfitChange} onAccessoryChange={handleAccessoryChange} />
|
||||
<PetZone />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="px-4 pb-4">
|
||||
<div className="px-4 py-2 flex items-center justify-between text-xs text-kira-plum/40">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-400 animate-pulse' : isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'} inline-block`} />
|
||||
<span>{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking' : `kira's here for you, ${userName}`}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="hidden sm:inline">{identified ? `hi ${userName}` : 'body double mode'}</span>
|
||||
<span>🌸</span>
|
||||
</div>
|
||||
{/* ── Bottom status bar ── */}
|
||||
<div className="shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${
|
||||
isRecording ? 'bg-red-400 animate-pulse'
|
||||
: isKiraSpeaking ? 'bg-kira-pink animate-pulse'
|
||||
: 'bg-kira-mint'
|
||||
}`} />
|
||||
{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking...' : `kira's here for you, ${userName}`}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={isConnected ? '' : 'text-red-300'}>{isConnected ? '' : 'reconnecting...'}</span>
|
||||
<span>💖</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,7 @@ export default function ChatBubble({ messages, isKiraSpeaking, livePartial }: Pr
|
||||
}, [messages]);
|
||||
|
||||
return (
|
||||
<div className="p-4 flex flex-col" style={{ minHeight: 200, maxHeight: 320 }}>
|
||||
<div className="p-3 flex flex-col" style={{ maxHeight: 160 }}>
|
||||
<h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
|
||||
<span>💬</span> Conversation
|
||||
<span className={`w-2 h-2 rounded-full ${isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'}`} />
|
||||
|
||||
@@ -197,7 +197,7 @@ export default function KiraAvatar(props: Props) {
|
||||
`;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center w-full overflow-hidden" style={{ minHeight: '33vh' }}>
|
||||
<div className="flex flex-col items-center w-full h-full overflow-hidden">
|
||||
<div className="relative w-full flex-1" style={{ minHeight: 250 }}>
|
||||
<div
|
||||
ref={canvasRef}
|
||||
|
||||
Reference in New Issue
Block a user