From ba9988978214cbcd2a529470685d7b624d1448f9 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 12 Jan 2026 16:47:14 +0000
Subject: [PATCH] Refactor activity feed disabled UI; use plain img for hero
 image fix

Co-authored-by: dennis <dennis@konkol.net>
---
 app/components/ActivityFeed.tsx | 62 +++++++++++++++++++++------------
 app/components/Hero.tsx         | 14 +++-----
 2 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/app/components/ActivityFeed.tsx b/app/components/ActivityFeed.tsx
index 8405857..4c722b6 100644
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
@@ -1459,20 +1459,29 @@ export default function ActivityFeed() {
   // Don't render if tracking is disabled and no data
   if (!isTrackingEnabled && !data) {
     return (
-      <div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto">
+      <div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
         <motion.div
-          initial={{ scale: 0, opacity: 0 }}
+          initial={{ scale: 0.96, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}
-          className="bg-white/80 backdrop-blur-xl border border-white/60 rounded-2xl px-4 py-3 shadow-xl"
+          className="pointer-events-auto bg-white/90 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
         >
-          <button
-            onClick={toggleTracking}
-            className="flex items-center gap-2 text-stone-600 hover:text-stone-900 transition-colors"
-            title="Activity tracking is disabled. Click to enable."
-          >
-            <Activity size={16} />
-            <span className="text-xs font-semibold">Tracking disabled</span>
-          </button>
+          <div className="px-4 py-3 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Activity size={18} className="text-stone-900" />
+              <div className="text-left">
+                <h3 className="text-sm font-bold text-stone-900">Live Activity</h3>
+                <p className="text-[10px] text-stone-500">Tracking disabled</p>
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={toggleTracking}
+              className="text-xs font-semibold px-3 py-1.5 rounded-full bg-stone-900 text-white hover:bg-stone-800 transition-colors"
+              title="Enable activity tracking"
+            >
+              Enable
+            </button>
+          </div>
         </motion.div>
       </div>
     );
@@ -1481,20 +1490,29 @@ export default function ActivityFeed() {
   // If tracking disabled but we have data, show a disabled state
   if (!isTrackingEnabled && data) {
     return (
-      <div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto">
+      <div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
         <motion.div
-          initial={{ scale: 0, opacity: 0 }}
+          initial={{ scale: 0.96, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}
-          className="bg-white/80 backdrop-blur-xl border border-white/60 rounded-2xl px-4 py-3 shadow-xl"
+          className="pointer-events-auto bg-white/90 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
         >
-          <button
-            onClick={toggleTracking}
-            className="flex items-center gap-2 text-stone-600 hover:text-stone-900 transition-colors"
-            title="Activity tracking is disabled. Click to enable."
-          >
-            <Activity size={16} />
-            <span className="text-xs font-semibold">Tracking disabled</span>
-          </button>
+          <div className="px-4 py-3 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Activity size={18} className="text-stone-900" />
+              <div className="text-left">
+                <h3 className="text-sm font-bold text-stone-900">Live Activity</h3>
+                <p className="text-[10px] text-stone-500">Tracking disabled</p>
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={toggleTracking}
+              className="text-xs font-semibold px-3 py-1.5 rounded-full bg-stone-900 text-white hover:bg-stone-800 transition-colors"
+              title="Enable activity tracking"
+            >
+              Enable
+            </button>
+          </div>
         </motion.div>
       </div>
     );
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 9aea5b4..45d0368 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -2,7 +2,6 @@
 
 import { motion } from "framer-motion";
 import { ArrowDown, Code, Zap, Rocket } from "lucide-react";
-import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
@@ -111,16 +110,13 @@ const Hero = () => {
                 repeatType: "reverse",
               }}
             >
-              <Image
+              {/* Use a plain <img> to fully bypass Next.js image optimizer (dev 400 issue). */}
+              <img
                 src="/images/me.jpg"
                 alt="Dennis Konkol"
-                fill
-                className="object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out"
-                priority
-                // Next/Image optimizer is returning 400 for this file in some dev setups
-                // (seen as: "isn't a valid image ... received null"). Bypass optimization.
-                unoptimized
-                sizes="(max-width: 768px) 256px, 320px"
+                className="absolute inset-0 w-full h-full object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out"
+                loading="eager"
+                decoding="async"
               />
 
               {/* Glossy Overlay for Liquid Feel */}