From 10a545f014cf856a0979f2dce3aeb084f2df35a5 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Wed, 4 Mar 2026 15:40:19 +0100
Subject: [PATCH] fix: replace img tags with next/image, fix useEffect deps,
 suppress test mock warnings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- projects/page.tsx & projects/[slug]/page.tsx: <img> → <Image fill unoptimized>
- ActivityFeed.tsx: add allQuotes.length to useEffect deps
- Test mocks: eslint-disable for intentional <img> in next/image mocks

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 app/__tests__/components/CurrentlyReading.test.tsx | 1 +
 app/__tests__/components/Hero.test.tsx             | 1 +
 app/components/ActivityFeed.tsx                    | 2 +-
 app/projects/[slug]/page.tsx                       | 5 ++++-
 app/projects/page.tsx                              | 5 ++++-
 5 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/__tests__/components/CurrentlyReading.test.tsx b/app/__tests__/components/CurrentlyReading.test.tsx
index 8a1eb1e..aac06bb 100644
--- a/app/__tests__/components/CurrentlyReading.test.tsx
+++ b/app/__tests__/components/CurrentlyReading.test.tsx
@@ -11,6 +11,7 @@ jest.mock("next-intl", () => ({
 // Mock next/image
 jest.mock("next/image", () => ({
   __esModule: true,
+  // eslint-disable-next-line @next/next/no-img-element
   default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} alt={props.alt || ""} />,
 }));
 
diff --git a/app/__tests__/components/Hero.test.tsx b/app/__tests__/components/Hero.test.tsx
index fd73215..756585a 100644
--- a/app/__tests__/components/Hero.test.tsx
+++ b/app/__tests__/components/Hero.test.tsx
@@ -30,6 +30,7 @@ interface ImageProps {
 jest.mock('next/image', () => ({
   __esModule: true,
   default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
+    // eslint-disable-next-line @next/next/no-img-element
     <img 
       src={src} 
       alt={alt} 
diff --git a/app/components/ActivityFeed.tsx b/app/components/ActivityFeed.tsx
index b120581..bb0fb27 100644
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
@@ -110,7 +110,7 @@ export default function ActivityFeed({
       clearInterval(statusInterval);
       clearInterval(quoteInterval);
     };
-  }, [onActivityChange]);
+  }, [onActivityChange, allQuotes.length]);
 
   if (loading) {
     return <div className="animate-pulse space-y-4">
diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
index d9e6862..307fc18 100644
--- a/app/projects/[slug]/page.tsx
+++ b/app/projects/[slug]/page.tsx
@@ -2,6 +2,7 @@
 
 import { motion } from 'framer-motion';
 import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from 'lucide-react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useState, useEffect } from 'react';
@@ -132,9 +133,11 @@ const ProjectDetail = () => {
             className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
         >
              {project.imageUrl ? (
-                <img 
+                <Image 
                     src={project.imageUrl} 
                     alt={project.title} 
+                    fill
+                    unoptimized
                     className="w-full h-full object-cover"
                 />
              ) : (
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 395f176..c65a427 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import { motion } from 'framer-motion';
 import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useLocale, useTranslations } from "next-intl";
 
@@ -159,9 +160,11 @@ const ProjectsPage = () => {
               <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
                 {project.imageUrl ? (
                   <>
-                    <img 
+                    <Image 
                       src={project.imageUrl}
                       alt={project.title}
+                      fill
+                      unoptimized
                       className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
                     />
                     <div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />