feat: add hover shadows, smooth transitions for collapsible sections, and active border accent

2026-07-03 22:50:10 -04:00
parent aa79812158
commit 681a1810fe
8 changed files with 1499 additions and 34 deletions
@@ -0,0 +1,87 @@
+"use client";
+import { useEffect, useState } from "react";
+import { api, type PortfolioHolding } from "@/lib/trpc";
+import { UI_STRINGS } from "@/lib/strings";
+
+export function PortfolioPanel() {
+  const [holdings, setHoldings] = useState<PortfolioHolding[]>([]);
+  const [draftSymbol, setDraftSymbol] = useState("");
+  const [draftShares, setDraftShares] = useState("");
+  const [draftCost, setDraftCost] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  const load = async () => {
+    try {
+      setHoldings(await api.portfolio.holdings());
+    } catch { /* ignore */ }
+    setLoading(false);
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const add = async () => {
+    if (!draftSymbol.trim() || !draftShares || !draftCost) return;
+    await api.portfolio.addHolding(
+      draftSymbol.trim().toUpperCase(),
+      parseFloat(draftShares),
+      parseFloat(draftCost),
+    );
+    setDraftSymbol(""); setDraftShares(""); setDraftCost("");
+    load();
+  };
+
+  const remove = async (symbol: string) => {
+    await api.portfolio.removeHolding(symbol);
+    load();
+  };
+
+  const totalValue = holdings.reduce((sum, h) => sum + h.shares * h.avg_cost, 0);
+
+  return (
+    <section className="rounded-xl border border-[#2a2b3a] bg-[#121318] p-5 space-y-4 hover:shadow-[0_2px_8px_rgba(79,140,255,0.1)] transition-shadow duration-300">
+      <h2 className="text-base font-semibold text-[#e6e7ec]">{UI_STRINGS.portfolioTitle || "Portfolio"}</h2>
+
+      <div className="grid grid-cols-3 gap-2">
+        <input value={draftSymbol} onChange={(e) => setDraftSymbol(e.target.value)}
+          placeholder="Symbol" className="bg-[#0a0b0f] border border-[#2a2b3a] rounded-lg px-2 py-1.5 text-sm text-[#e6e7ec] placeholder:text-[#5a5b6a]" />
+        <input value={draftShares} onChange={(e) => setDraftShares(e.target.value)}
+          placeholder="Shares" type="number" className="bg-[#0a0b0f] border border-[#2a2b3a] rounded-lg px-2 py-1.5 text-sm text-[#e6e7ec] placeholder:text-[#5a5b6a]" />
+        <input value={draftCost} onChange={(e) => setDraftCost(e.target.value)}
+          placeholder="Avg cost" type="number" step="0.01" className="bg-[#0a0b0f] border border-[#2a2b3a] rounded-lg px-2 py-1.5 text-sm text-[#e6e7ec] placeholder:text-[#5a5b6a]" />
+      </div>
+      <button onClick={add}
+        className="w-full px-3 py-1.5 rounded-lg text-sm bg-[#4f8cff] text-white">Add Holding</button>
+
+      {loading ? (
+        <p className="text-sm text-[#5a5b6a]">Loading...</p>
+      ) : holdings.length === 0 ? (
+        <p className="text-sm text-[#5a5b6a]">{UI_STRINGS.emptyPortfolio || "No holdings yet."}</p>
+      ) : (
+        <div className="space-y-2 max-h-60 overflow-y-auto">
+          <div className="flex justify-between text-xs text-[#5a5b6a] pb-1 border-b border-[#2a2b3a]">
+            <span>Symbol</span>
+            <span>Shares</span>
+            <span>Avg Cost</span>
+            <span>Value</span>
+            <span></span>
+          </div>
+          {holdings.map((h) => (
+            <div key={h.symbol} className="flex items-center justify-between py-1 text-sm rounded hover:bg-[#1a1b24] transition-colors">
+              <span className="font-mono w-16 text-[#e6e7ec]">{h.symbol}</span>
+              <span className="w-16 text-right text-[#8a8b9a]">{h.shares}</span>
+              <span className="w-20 text-right text-[#8a8b9a]">${h.avg_cost.toFixed(2)}</span>
+              <span className="w-20 text-right text-[#e6e7ec]">${(h.shares * h.avg_cost).toFixed(0)}</span>
+              <button onClick={() => remove(h.symbol)}
+                className="text-xs text-[#5a5b6a] hover:text-[#ef4444]">Remove</button>
+            </div>
+          ))}
+          <div className="flex justify-between pt-2 border-t border-[#2a2b3a] text-sm font-semibold text-[#e6e7ec]">
+            <span>Total</span>
+            <span>${totalValue.toFixed(0)}</span>
+          </div>
+        </div>
+      )}
+      <p className="text-[10px] text-[#5a5b6a] italic">{UI_STRINGS.primaryRuleFooter}</p>
+    </section>
+  );
+}