feat: add EmotionLogger component with quick-add buttons and stats
This commit is contained in:
Investor Flow Build
@@ -0,0 +1,261 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useMemo } from "react";
|
||||||
|
import { useClosureStore } from "@/stores/closure-store";
|
||||||
|
|
||||||
|
// --- Quick-add emotion definitions (ADR-0007: no imperative trade verbs) ---
|
||||||
|
|
||||||
|
interface EmotionOption {
|
||||||
|
label: string;
|
||||||
|
emoji: string;
|
||||||
|
color: string;
|
||||||
|
bgColor: string;
|
||||||
|
borderColor: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const EMOTION_OPTIONS: EmotionOption[] = [
|
||||||
|
{ label: "Frustrated", emoji: "🔴", color: "text-red-400", bgColor: "bg-red-500/10", borderColor: "border-red-500/30" },
|
||||||
|
{ label: "FOMO", emoji: "🟠", color: "text-orange-400", bgColor: "bg-orange-500/10", borderColor: "border-orange-500/30" },
|
||||||
|
{ label: "Revenge", emoji: "🟣", color: "text-purple-400", bgColor: "bg-purple-500/10", borderColor: "border-purple-500/30" },
|
||||||
|
{ label: "Patient", emoji: "🔵", color: "text-blue-400", bgColor: "bg-blue-500/10", borderColor: "border-blue-500/30" },
|
||||||
|
{ label: "Confused", emoji: "⚪", color: "text-gray-400", bgColor: "bg-gray-500/10", borderColor: "border-gray-500/30" },
|
||||||
|
{ label: "Confident", emoji: "🟢", color: "text-green-400", bgColor: "bg-green-500/10", borderColor: "border-green-500/30" },
|
||||||
|
{ label: "Anxious", emoji: "🟡", color: "text-yellow-400", bgColor: "bg-yellow-500/10", borderColor: "border-yellow-500/30" },
|
||||||
|
{ label: "Greedy", emoji: "🟤", color: "text-amber-600", bgColor: "bg-amber-700/10", borderColor: "border-amber-600/30" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// --- Stats helpers ---
|
||||||
|
|
||||||
|
interface Stats {
|
||||||
|
totalToday: number;
|
||||||
|
mostCommon: { label: string; count: number } | null;
|
||||||
|
avgDeltaFromEntry: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeStats(
|
||||||
|
logs: { timestamp: number; priceAtEvent: number }[],
|
||||||
|
entryPrice: number | null,
|
||||||
|
): Stats {
|
||||||
|
const now = Date.now();
|
||||||
|
const todayStart = new Date(now).setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const todayLogs = logs.filter((l) => l.timestamp >= todayStart);
|
||||||
|
const totalToday = todayLogs.length;
|
||||||
|
|
||||||
|
// Most common emotion (from all logs)
|
||||||
|
const emotionCounts = new Map<string, number>();
|
||||||
|
for (const log of logs) {
|
||||||
|
emotionCounts.set(log.emotion, (emotionCounts.get(log.emotion) ?? 0) + 1);
|
||||||
|
}
|
||||||
|
let mostCommon: { label: string; count: number } | null = null;
|
||||||
|
let maxCount = 0;
|
||||||
|
for (const [label, count] of emotionCounts.entries()) {
|
||||||
|
if (count > maxCount) {
|
||||||
|
mostCommon = { label, count };
|
||||||
|
maxCount = count;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Average price delta from entry
|
||||||
|
let avgDelta: number | null = null;
|
||||||
|
if (entryPrice != null && logs.length > 0) {
|
||||||
|
const deltas = logs.map((l) => l.priceAtEvent - entryPrice);
|
||||||
|
avgDelta = deltas.reduce((a, b) => a + b, 0) / deltas.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { totalToday, mostCommon, avgDelta };
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Format helpers ---
|
||||||
|
|
||||||
|
function formatTime(ts: number): string {
|
||||||
|
const d = new Date(ts);
|
||||||
|
return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatPrice(p: number): string {
|
||||||
|
return p.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Component ---
|
||||||
|
|
||||||
|
export function EmotionLogger() {
|
||||||
|
const emotionLogs = useClosureStore((s) => s.emotionLogs);
|
||||||
|
const addEmotionLog = useClosureStore((s) => s.addEmotionLog);
|
||||||
|
const removeEmotionLog = useClosureStore((s) => s.removeEmotionLog);
|
||||||
|
const activeExecutionId = useClosureStore((s) => s.activeExecutionId);
|
||||||
|
|
||||||
|
// Local form state
|
||||||
|
const [selectedEmotion, setSelectedEmotion] = useState("");
|
||||||
|
const [priceInput, setPriceInput] = useState("");
|
||||||
|
const [noteInput, setNoteInput] = useState("");
|
||||||
|
|
||||||
|
// Read entry price from store if available (we'll look for it in the closure store)
|
||||||
|
const entryPrice = useClosureStore((s) => (s as any).entryPrice ?? null);
|
||||||
|
|
||||||
|
const stats = useMemo(() => computeStats(emotionLogs, entryPrice), [emotionLogs, entryPrice]);
|
||||||
|
|
||||||
|
// Quick-add handler
|
||||||
|
const handleQuickAdd = (emotion: string) => {
|
||||||
|
if (!priceInput.trim()) return;
|
||||||
|
const price = parseFloat(priceInput);
|
||||||
|
if (isNaN(price)) return;
|
||||||
|
addEmotionLog({ priceAtEvent: price, emotion, note: noteInput });
|
||||||
|
// Clear form after adding
|
||||||
|
setNoteInput("");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Custom form submit
|
||||||
|
const handleFormSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!selectedEmotion || !priceInput.trim()) return;
|
||||||
|
const price = parseFloat(priceInput);
|
||||||
|
if (isNaN(price)) return;
|
||||||
|
addEmotionLog({ priceAtEvent: price, emotion: selectedEmotion, note: noteInput });
|
||||||
|
setPriceInput("");
|
||||||
|
setNoteInput("");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Determine if there's an active trade (entry price available)
|
||||||
|
const hasActiveTrade = !!activeExecutionId;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="rounded-xl border border-[#2a2b3a] bg-[#121318]">
|
||||||
|
{/* Header — always visible, compact */}
|
||||||
|
<div className="flex items-center justify-between px-5 py-3 rounded-t-xl">
|
||||||
|
<h2 className="text-sm font-semibold text-[#e6e7ec]">Emotion Logger</h2>
|
||||||
|
<span className="text-[10px] text-[#5a5b6a]">
|
||||||
|
{emotionLogs.length} log{emotionLogs.length !== 1 ? "s" : ""}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Collapsible content */}
|
||||||
|
<div className="px-5 pb-5 space-y-4">
|
||||||
|
{/* Quick-add button bar */}
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{EMOTION_OPTIONS.map((opt) => (
|
||||||
|
<button
|
||||||
|
key={opt.label}
|
||||||
|
onClick={() => handleQuickAdd(opt.label)}
|
||||||
|
title={`Log ${opt.label}`}
|
||||||
|
className={`flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium border transition-colors ${opt.bgColor} ${opt.color} ${opt.borderColor} hover:opacity-80`}
|
||||||
|
>
|
||||||
|
<span>{opt.emoji}</span>
|
||||||
|
<span>{opt.label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inline form */}
|
||||||
|
<form onSubmit={handleFormSubmit} className="space-y-2">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{/* Emotion selector */}
|
||||||
|
<select
|
||||||
|
value={selectedEmotion}
|
||||||
|
onChange={(e) => setSelectedEmotion(e.target.value)}
|
||||||
|
className="flex-1 rounded-lg border border-[#2a2b3a] bg-[#1a1b24] text-[#e6e7ec] text-xs px-3 py-2 focus:outline-none focus:border-[#3a3b4a]"
|
||||||
|
>
|
||||||
|
<option value="">Select emotion…</option>
|
||||||
|
{EMOTION_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.label} value={opt.label}>
|
||||||
|
{opt.emoji} {opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
{/* Price input */}
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
placeholder="Price"
|
||||||
|
value={priceInput}
|
||||||
|
onChange={(e) => setPriceInput(e.target.value)}
|
||||||
|
className="w-28 rounded-lg border border-[#2a2b3a] bg-[#1a1b24] text-[#e6e7ec] text-xs px-3 py-2 focus:outline-none focus:border-[#3a3b4a]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Submit button */}
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={!selectedEmotion || !priceInput.trim()}
|
||||||
|
className="rounded-lg bg-[#2a2b3a] text-[#e6e7ec] text-xs px-4 py-2 disabled:opacity-30 hover:bg-[#3a3b4a] transition-colors"
|
||||||
|
>
|
||||||
|
Log
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Note textarea */}
|
||||||
|
<textarea
|
||||||
|
value={noteInput}
|
||||||
|
onChange={(e) => setNoteInput(e.target.value)}
|
||||||
|
placeholder="Add a note (optional)"
|
||||||
|
rows={2}
|
||||||
|
className="w-full rounded-lg border border-[#2a2b3a] bg-[#1a1b24] text-[#e6e7ec] text-xs px-3 py-2 resize-none focus:outline-none focus:border-[#3a3b4a]"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Log entries */}
|
||||||
|
{emotionLogs.length > 0 ? (
|
||||||
|
<div className="space-y-1.5 max-h-48 overflow-y-auto scrollbar-thin">
|
||||||
|
{[...emotionLogs].reverse().map((log, idx) => {
|
||||||
|
// Find the emotion option for styling
|
||||||
|
const opt = EMOTION_OPTIONS.find((o) => o.label === log.emotion);
|
||||||
|
// Original index for removal (reverse array maps back)
|
||||||
|
const originalIdx = emotionLogs.length - 1 - idx;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={log.id}
|
||||||
|
className={`flex items-start justify-between gap-2 px-3 py-2 rounded-lg border ${opt?.borderColor ?? "border-[#2a2b3a]"} ${opt?.bgColor ?? "bg-transparent"}`}
|
||||||
|
>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className={`text-xs font-medium ${opt?.color ?? "text-[#5a5b6a]"}`}>
|
||||||
|
{opt?.emoji} {log.emotion}
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-[#5a5b6a]">{formatTime(log.timestamp)}</span>
|
||||||
|
<span className="text-[10px] text-[#5a5b6a]">@ {formatPrice(log.priceAtEvent)}</span>
|
||||||
|
</div>
|
||||||
|
{log.note && (
|
||||||
|
<p className="text-xs text-[#5a5b6a] mt-0.5 truncate">{log.note}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => removeEmotionLog(originalIdx)}
|
||||||
|
className="text-[10px] text-[#5a5b6a] hover:text-red-400 transition-colors shrink-0"
|
||||||
|
title="Remove entry"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-[#5a5b6a] italic">No emotion logs yet. Use the buttons above to start tracking.</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stats bar */}
|
||||||
|
<div className="flex items-center gap-4 px-1 py-2 border-t border-[#2a2b3a]">
|
||||||
|
<span className="text-[10px] text-[#5a5b6a]">
|
||||||
|
Today: <span className="text-[#e6e7ec] font-medium">{stats.totalToday}</span>
|
||||||
|
</span>
|
||||||
|
{stats.mostCommon && (
|
||||||
|
<span className="text-[10px] text-[#5a5b6a]">
|
||||||
|
Most common: <span className="text-[#e6e7ec] font-medium">{stats.mostCommon.label}</span>
|
||||||
|
<span className="text-[#5a5b6a]"> ({stats.mostCommon.count})</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{stats.avgDeltaFromEntry != null && (
|
||||||
|
<span className="text-[10px] text-[#5a5b6a]">
|
||||||
|
Avg delta:{" "}
|
||||||
|
<span className={`font-medium ${stats.avgDeltaFromEntry >= 0 ? "text-green-400" : "text-red-400"}`}>
|
||||||
|
{stats.avgDeltaFromEntry >= 0 ? "+" : ""}
|
||||||
|
{formatPrice(stats.avgDeltaFromEntry)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user