hobokenchicken/kira
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): move avatar to center hero position; timer+notes+chat to left sidebar

Browse Source
This commit is contained in:
Dustin Newkirk
2026-06-05 12:44:17 -04:00
parent 95f97fa897
commit 15199dfdee
1 changed files with 15 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+15 -17
View File
@@ -116,16 +116,13 @@ export default function App() {
{/* ── Main three-column body ── */} {/* ── Main three-column body ── */}
<div className="flex-1 flex min-h-0 px-4 gap-4"> <div className="flex-1 flex min-h-0 px-4 gap-4">
{/* LEFT: Avatar + Chat */} {/* LEFT: Focus Timer + Chat + Input */}
<div className="w-72 shrink-0 flex flex-col gap-3"> <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"> <div className="shrink-0">
<KiraAvatar <Timer />
isSpeaking={isKiraSpeaking} </div>
isListening={isRecording} <div className="shrink-0">
outfit={currentOutfit} <Notes />
accessory={currentAcc}
onTalkToggle={handleTalkToggle}
/>
</div> </div>
<div className="shrink-0"> <div className="shrink-0">
<ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} livePartial={livePartial} /> <ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} livePartial={livePartial} />
@@ -142,14 +139,15 @@ export default function App() {
</div> </div>
</div> </div>
{/* CENTER: Focus Timer + Notes */} {/* CENTER: Avatar (hero) */}
<div className="flex-1 flex flex-col gap-4 min-w-0"> <div className="flex-1 min-w-0 rounded-2xl bg-white/30 overflow-hidden">
<div className="flex-1 flex items-center justify-center"> <KiraAvatar
<Timer /> isSpeaking={isKiraSpeaking}
</div> isListening={isRecording}
<div className="shrink-0"> outfit={currentOutfit}
<Notes /> accessory={currentAcc}
</div> onTalkToggle={handleTalkToggle}
/>
</div> </div>
{/* RIGHT: Ambient + Companions */} {/* RIGHT: Ambient + Companions */}