feat: frontend redesign

src/components/BarChart.tsx

@@ -8,7 +8,7 @@ interface Props {
   height?: number;
 }
 
-export function BarChart({ data, height = 92 }: Props) {
+export function BarChart({ data, height = 84 }: Props) {
   const [hover, setHover] = useState<number | null>(null);
   const max = Math.max(1, ...data.map((d) => d.count));
 
@@ -16,7 +16,6 @@ export function BarChart({ data, height = 92 }: Props) {
     <div className="flex items-end gap-1.5" style={{ height }}>
       {data.map((d, i) => {
         const ratio = d.count / max;
-        const isPeak = d.count === max && max > 0;
         const active = hover === i;
         return (
           <div
@@ -25,16 +24,11 @@ export function BarChart({ data, height = 92 }: Props) {
             onMouseEnter={() => setHover(i)}
             onMouseLeave={() => setHover(null)}
           >
-            {/* tooltip */}
             <motion.div
               initial={false}
-              animate={{
-                opacity: active ? 1 : 0,
-                y: active ? 0 : 6,
-                scale: active ? 1 : 0.8,
-              }}
-              transition={{ type: "spring", stiffness: 520, damping: 22 }}
-              className="pointer-events-none absolute -top-1 z-10 -translate-y-full whitespace-nowrap rounded-lg bg-[var(--ink)] px-2 py-1 text-[11px] font-semibold text-[var(--bg)]"
+              animate={{ opacity: active ? 1 : 0, y: active ? 0 : 4 }}
+              transition={{ duration: 0.15 }}
+              className="pointer-events-none absolute -top-1 z-10 -translate-y-full whitespace-nowrap rounded-md bg-[var(--ink)] px-2 py-1 text-[11px] font-medium text-[var(--bg)]"
             >
               {d.count} clicks
             </motion.div>
@@ -43,23 +37,14 @@ export function BarChart({ data, height = 92 }: Props) {
               <motion.div
                 initial={{ height: 0 }}
                 animate={{ height: `${Math.max(ratio * 100, 4)}%` }}
-                transition={{
-                  type: "spring",
-                  stiffness: 260,
-                  damping: 18,
-                  delay: i * 0.05,
-                }}
-                className={`w-full rounded-md ${
-                  isPeak || active
-                    ? "bg-accent"
-                    : "bg-[var(--ring)] group-hover:bg-[var(--muted)]"
+                transition={{ duration: 0.4, ease: "easeOut", delay: i * 0.04 }}
+                className={`w-full rounded-sm transition-colors ${
+                  active ? "bg-[var(--ink)]" : "bg-[var(--ring)]"
                 }`}
-                style={{ minHeight: 4 }}
+                style={{ minHeight: 3 }}
               />
             </div>
-            <span className="text-[10px] font-medium text-muted">
-              {weekdayLabel(d.date)}
-            </span>
+            <span className="text-[10px] text-muted">{weekdayLabel(d.date)}</span>
           </div>
         );
       })}