feat: major UI/UX overhaul, snippets system, and performance fixes

app/__tests__/components/ActivityFeed.test.tsx

@@ -64,7 +64,8 @@ describe('ActivityFeed NaN Handling', () => {
 
       // In the actual code, we use String(data.gaming.name || '')
       // If data.gaming.name is NaN, (NaN || '') evaluates to '' because NaN is falsy
-      const nanName = String(NaN || '');
+      const nanValue = NaN;
+      const nanName = String(nanValue || '');
       expect(nanName).toBe(''); // NaN is falsy, so it falls back to ''
       expect(typeof nanName).toBe('string');
     });

app/__tests__/components/CurrentlyReading.test.tsx

@@ -11,7 +11,7 @@ jest.mock("next-intl", () => ({
 // Mock next/image
 jest.mock("next/image", () => ({
   __esModule: true,
-  default: (props: any) => <img {...props} />,
+  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} alt={props.alt || ""} />,
 }));
 
 describe("CurrentlyReading Component", () => {
@@ -28,19 +28,17 @@ describe("CurrentlyReading Component", () => {
   it("renders a book when data is fetched", async () => {
     const mockBooks = [
       {
-        id: "1",
-        book_title: "Test Book",
-        book_author: "Test Author",
-        book_image: "/test.jpg",
-        status: "reading",
-        rating: 5,
-        progress: 50
+        title: "Test Book",
+        authors: ["Test Author"],
+        image: "/test.jpg",
+        progress: 50,
+        startedAt: "2024-01-01"
       },
     ];
 
     (global.fetch as jest.Mock).mockResolvedValue({
       ok: true,
-      json: async () => ({ hardcover: mockBooks }),
+      json: async () => ({ currentlyReading: mockBooks }),
     });
 
     render(<CurrentlyReadingComp />);

app/__tests__/components/Hero.test.tsx

@@ -14,9 +14,17 @@ jest.mock('next-intl', () => ({
 }));
 
 // Mock next/image
+interface ImageProps {
+  src: string;
+  alt: string;
+  fill?: boolean;
+  priority?: boolean;
+  [key: string]: unknown;
+}
+
 jest.mock('next/image', () => ({
   __esModule: true,
-  default: ({ src, alt, fill, priority, ...props }: any) => (
+  default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
     <img 
       src={src} 
       alt={alt}