From 190dfcdb34bd569a1f40e7d4c53296a3eed8887d Mon Sep 17 00:00:00 2001
From: Dave Augustus <devpandey19924u@gmail.com>
Date: Fri, 23 Jan 2026 15:00:00 +0530
Subject: [PATCH 1/9] feat: native video tool, secure pdf reader, and storage
 v2 ui integration

---
 apps/the_monkeys/next.config.mjs              |   5 +
 apps/the_monkeys/package.json                 |   3 +-
 .../src/app/edit/[blogId]/page.tsx            |  94 +++++++------
 apps/the_monkeys/src/app/read/pdf/page.tsx    |  81 +++++++++++
 .../src/components/blog/getBlogContent.tsx    |  58 ++++++--
 .../editor/customBlocks/PdfBlock/index.ts     | 131 ++++++++++++++++++
 .../editor/customBlocks/VideoBlock/index.ts   | 128 +++++++++++++++++
 .../layout/navbar/profileDropdown.tsx         |  10 +-
 .../src/components/profileImage.tsx           |  42 ++++--
 .../user/dialogs/updateProfileDialog.tsx      |  10 +-
 .../src/components/user/userInfo.tsx          |  10 +-
 .../src/config/editor/editorjs.config.ts      | 125 +++++++++++++++--
 .../config/editor/editorjs_readonly.config.ts |  37 +++++
 .../src/hooks/profile/useProfileImage.ts      |  30 ++--
 .../src/services/storage/storageV2.ts         | 108 +++++++++++++++
 pnpm-lock.yaml                                |  25 +++-
 16 files changed, 792 insertions(+), 105 deletions(-)
 create mode 100644 apps/the_monkeys/src/app/read/pdf/page.tsx
 create mode 100644 apps/the_monkeys/src/components/editor/customBlocks/PdfBlock/index.ts
 create mode 100644 apps/the_monkeys/src/components/editor/customBlocks/VideoBlock/index.ts
 create mode 100644 apps/the_monkeys/src/services/storage/storageV2.ts

diff --git a/apps/the_monkeys/next.config.mjs b/apps/the_monkeys/next.config.mjs
index a128a23a..b1a8e356 100644
--- a/apps/the_monkeys/next.config.mjs
+++ b/apps/the_monkeys/next.config.mjs
@@ -24,6 +24,11 @@ const nextConfig = {
         hostname: '127.0.0.1',
         port: '8081',
       },
+      {
+        protocol: 'http',
+        hostname: 'localhost',
+        port: '8081',
+      },
     ],
   },
   experimental: {
diff --git a/apps/the_monkeys/package.json b/apps/the_monkeys/package.json
index f9d4ea38..be1dc69d 100644
--- a/apps/the_monkeys/package.json
+++ b/apps/the_monkeys/package.json
@@ -12,6 +12,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@editorjs/attaches": "^1.3.1",
     "@editorjs/delimiter": "1.4.2",
     "@editorjs/editorjs": "2.29.1",
     "@editorjs/header": "2.8.1",
@@ -88,4 +89,4 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^2.1.8"
   }
-}
+}
\ No newline at end of file
diff --git a/apps/the_monkeys/src/app/edit/[blogId]/page.tsx b/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
index d03d7d44..9d50dc07 100644
--- a/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
+++ b/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
@@ -55,7 +55,6 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [blogPublishLoading, setBlogPublishLoading] = useState(false);
   const [blogTopics, setBlogTopics] = useState<string[]>([]);
-  const [token, setToken] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState(false);
   const [connectionStatus, setConnectionStatus] = useState('Connecting...');
 
@@ -69,34 +68,6 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
     blogTopicsRef.current = blogTopics;
   }, [data, accountId, blogTopics]);
 
-  // Get WebSocket token
-  useEffect(() => {
-    if (!session) return;
-
-    const fetchToken = async () => {
-      try {
-        const response = await axiosInstance.get('/auth/ws-token');
-        setToken(response.data.token);
-      } catch (error) {
-        console.error('Failed to get WebSocket token:', error);
-        toast({
-          variant: 'destructive',
-          title: 'Connection Error',
-          description:
-            'Failed to establish connection. Please refresh the page.',
-        });
-      }
-    };
-
-    fetchToken();
-
-    // Refresh token every 5 minutes
-    const tokenRefreshInterval = setInterval(fetchToken, 5 * 60 * 1000);
-
-    return () => {
-      clearInterval(tokenRefreshInterval);
-    };
-  }, [session]);
 
   // Format data
   const formatData = useCallback(
@@ -127,9 +98,8 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
 
   const [editorConfig, setEditorConfig] = useState<EditorConfig | null>(null);
 
-  // WebSocket management
   useEffect(() => {
-    if (!token || !blogId) return;
+    if (!blogId) return;
 
     let isMounted = true;
     const MAX_RETRIES = 5;
@@ -144,7 +114,7 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
 
       setConnectionStatus('Connecting...');
       const ws = new WebSocket(
-        `${WSS_URL_V2}/blog/draft/${blogId}?token=${token}`
+        `${WSS_URL_V2}/blog/draft/${blogId}`
       );
 
       ws.onopen = () => {
@@ -204,7 +174,7 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
 
     // Handle tab visibility changes
     const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible' && !isConnected && token) {
+      if (document.visibilityState === 'visible' && !isConnected) {
         // Reconnect immediately when tab becomes visible
         if (reconnectTimeoutRef.current) {
           clearTimeout(reconnectTimeoutRef.current);
@@ -225,7 +195,7 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
       }
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
-  }, [token, blogId, formatData]);
+  }, [blogId, formatData]);
 
   // Auto-save when data changes
   useEffect(() => {
@@ -333,10 +303,53 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
 
   // Initialize editor data
   useEffect(() => {
-    if (blog && !data) {
-      setData(blog.blog || { time: Date.now(), blocks: [], version: '' });
-      setBlogTopics(blog.tags || []);
-    }
+    const initializeData = async () => {
+      if (blog && !data) {
+        const blogData = blog.blog || {
+          time: Date.now(),
+          blocks: [],
+          version: '',
+        };
+
+        // Pre-resolve V2 image URLs for EditorJS
+        if (blogData.blocks && blogData.blocks.length > 0) {
+          const resolvedBlocks = await Promise.all(
+            blogData.blocks.map(async (block) => {
+              if (
+                block.type === 'image' &&
+                block.data?.file?.url?.endsWith('/url')
+              ) {
+                try {
+                  const res = await fetch(block.data.file.url);
+                  const urlData = await res.json();
+                  if (urlData && urlData.url) {
+                    return {
+                      ...block,
+                      data: {
+                        ...block.data,
+                        file: {
+                          ...block.data.file,
+                          url: urlData.url,
+                        },
+                      },
+                    };
+                  }
+                } catch (err) {
+                  console.error('Failed to resolve image URL in editor:', err);
+                }
+              }
+              return block;
+            })
+          );
+          blogData.blocks = resolvedBlocks;
+        }
+
+        setData(blogData);
+        setBlogTopics(blog.tags || []);
+      }
+    };
+
+    initializeData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [blog]);
 
@@ -365,9 +378,8 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
               )}
             >
               <div
-                className={`inline-block size-2 rounded-full ${
-                  isConnected ? 'bg-alert-green' : 'bg-alert-red'
-                }`}
+                className={`inline-block size-2 rounded-full ${isConnected ? 'bg-alert-green' : 'bg-alert-red'
+                  }`}
               />
 
               <p className='text-xs'>{isConnected ? 'Online' : 'Offline'}</p>
diff --git a/apps/the_monkeys/src/app/read/pdf/page.tsx b/apps/the_monkeys/src/app/read/pdf/page.tsx
new file mode 100644
index 00000000..a4162248
--- /dev/null
+++ b/apps/the_monkeys/src/app/read/pdf/page.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import Container from '@/components/layout/Container';
+import Icon from '@/components/icon';
+
+const PDFReaderContent = () => {
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const url = searchParams.get('url');
+    const title = searchParams.get('title') || 'PDF Viewer';
+
+    if (!url) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
+                <Icon name="RiErrorWarning" size={48} className="text-alert-red" />
+                <h1 className="text-2xl font-bold">No PDF URL provided</h1>
+                <button
+                    onClick={() => router.back()}
+                    className="px-6 py-2 bg-brand-orange text-white rounded-full font-medium"
+                >
+                    Go Back
+                </button>
+            </div>
+        );
+    }
+
+    // Append toolbar=0 to hide browser download/print buttons
+    const viewerUrl = url.includes('#') ? url : `${url}#toolbar=0`;
+
+    return (
+        <div className="flex flex-col h-[calc(100vh-80px)]">
+            <div className="bg-gray-100 dark:bg-gray-900 border-b border-border-light dark:border-border-dark p-4 flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                    <button
+                        onClick={() => router.back()}
+                        className="p-2 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg transition-colors"
+                    >
+                        <Icon name="RiArrowLeft" size={24} />
+                    </button>
+                    <div>
+                        <h1 className="font-dm_sans font-semibold text-lg line-clamp-1">{title}</h1>
+                        <p className="text-xs opacity-70">Monkeys Secure PDF Reader</p>
+                    </div>
+                </div>
+                <div className="flex items-center gap-2">
+                    <div className="hidden sm:flex items-center gap-2 px-3 py-1 bg-brand-orange/10 text-brand-orange rounded-full text-xs font-medium">
+                        <Icon name="RiVerifiedBadge" type="Fill" size={12} />
+                        Read Only Mode
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex-grow bg-gray-200 dark:bg-gray-800 overflow-hidden relative">
+                <iframe
+                    src={viewerUrl}
+                    className="w-full h-full border-none"
+                    title={title}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default function PDFReaderPage() {
+    return (
+        <Container className="max-w-6xl py-4 sm:py-8">
+            <div className="rounded-2xl overflow-hidden border border-border-light dark:border-border-dark shadow-xl bg-white dark:bg-zinc-950">
+                <Suspense fallback={
+                    <div className="flex flex-col items-center justify-center min-h-[80vh] gap-4">
+                        <div className="w-12 h-12 border-4 border-brand-orange border-t-transparent rounded-full animate-spin"></div>
+                        <p className="font-dm_sans font-medium">Initializing reader...</p>
+                    </div>
+                }>
+                    <PDFReaderContent />
+                </Suspense>
+            </div>
+        </Container>
+    );
+}
diff --git a/apps/the_monkeys/src/components/blog/getBlogContent.tsx b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
index 7cd0bd58..77f4b3ed 100644
--- a/apps/the_monkeys/src/components/blog/getBlogContent.tsx
+++ b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
@@ -1,3 +1,7 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
 import Image from 'next/image';
 
 import { Blog } from '@/services/blog/blogTypes';
@@ -105,16 +109,52 @@ export const BlogImage = ({
   image: string;
   className?: string;
 }) => {
+  const [imgSrc, setImgSrc] = useState<string>(image);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const resolveUrl = async () => {
+      // Check if image is a Storage V2 API URL (ends in /url)
+      if (image && image.includes('/storage/posts/') && image.endsWith('/url')) {
+        try {
+          const res = await fetch(image);
+          const data = await res.json();
+          if (data && data.url) {
+            setImgSrc(data.url);
+          }
+        } catch (error) {
+          console.error('Failed to resolve V2 Image URL:', error);
+        }
+      } else {
+        setImgSrc(image);
+      }
+    };
+
+    resolveUrl();
+  }, [image]);
+
   return (
-    <Image
-      src={image}
-      alt={title}
-      height='500'
-      width='800'
-      className={twMerge(className, 'h-full w-full object-cover object-center')}
-      quality={100}
-      priority
-    />
+    <div className={twMerge(className, 'relative overflow-hidden bg-gray-200 dark:bg-gray-800')}>
+      <Image
+        src={imgSrc}
+        alt={title}
+        height='500'
+        width='800'
+        className={twMerge(
+          'h-full w-full object-cover object-center transition-opacity duration-500',
+          isLoading ? 'opacity-0' : 'opacity-100'
+        )}
+        quality={100}
+        priority={false}
+        onLoad={() => setIsLoading(false)}
+        onError={() => setIsLoading(false)} // Prevent indefinite loading state
+      />
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-brand-orange"></div>
+        </div>
+      )}
+    </div>
   );
 };
 
diff --git a/apps/the_monkeys/src/components/editor/customBlocks/PdfBlock/index.ts b/apps/the_monkeys/src/components/editor/customBlocks/PdfBlock/index.ts
new file mode 100644
index 00000000..f5759942
--- /dev/null
+++ b/apps/the_monkeys/src/components/editor/customBlocks/PdfBlock/index.ts
@@ -0,0 +1,131 @@
+export default class PdfTool {
+    data: { url: string; title: string, fileName?: string };
+    api: any;
+    config: any;
+    wrapper: HTMLElement;
+    readOnly: boolean;
+
+    constructor({ data, config, api, readOnly }: { data?: { url: string, title: string, fileName?: string }, config?: any, api: any, readOnly?: boolean }) {
+        this.api = api;
+        this.config = config;
+        this.data = data || { url: '', title: '', fileName: '' };
+        this.readOnly = !!readOnly;
+        this.wrapper = document.createElement('div');
+    }
+
+    static get isReadOnlySupported() {
+        return true;
+    }
+
+    static get toolbox() {
+        return {
+            title: 'PDF Viewer',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="M10 13a2 2 0 0 0-4 0v2a2 2 0 0 0 4 0"/><path d="M13 13v4"/><path d="M13 13h2"/><path d="M13 15h2"/><path d="M18 13h2a2 2 0 0 0-2-2v4a2 2 0 0 0 2-2"/></svg>'
+        };
+    }
+
+    render() {
+        this.wrapper.classList.add('pdf-tool-wrapper');
+        this.wrapper.style.margin = '20px 0';
+
+        if (this.data.url) {
+            this.showViewer();
+        } else if (!this.readOnly) {
+            this.showInput();
+        } else {
+            this.wrapper.innerHTML = `
+                <div style="padding: 40px; text-align: center; color: #888; border: 1px dashed #ddd; border-radius: 12px;">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 12px; opacity: 0.5;"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+                    <p>No PDF provided</p>
+                </div>
+            `;
+        }
+
+        return this.wrapper;
+    }
+
+    showInput() {
+        this.wrapper.innerHTML = '';
+        const container = document.createElement('div');
+        container.style.padding = '20px';
+        container.style.border = '1px dashed #ccc';
+        container.style.textAlign = 'center';
+
+        const button = document.createElement('button');
+        button.innerText = 'Upload PDF or Paste URL';
+        button.classList.add('cdx-button');
+
+        button.onclick = () => {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'application/pdf';
+            input.onchange = async (e: any) => {
+                const file = e.target.files[0];
+                if (file && this.config.uploader) {
+                    button.innerText = 'Uploading...';
+                    try {
+                        const result = await this.config.uploader(file);
+                        if (result.success) {
+                            this.data = {
+                                url: result.file.url,
+                                title: file.name,
+                                fileName: result.file.name
+                            };
+                            this.showViewer();
+                        }
+                    } catch (err) {
+                        button.innerText = 'Upload Failed';
+                    }
+                }
+            };
+            input.click();
+        };
+
+        container.appendChild(button);
+        this.wrapper.appendChild(container);
+    }
+
+    async showViewer() {
+        this.wrapper.innerHTML = '';
+        if (!this.data.url) return;
+
+        let finalUrl = this.data.url;
+
+        // Auto-resolve if it's a Storage V2 proxy URL
+        if (finalUrl.includes('/storage/posts/') && finalUrl.endsWith('/url')) {
+            try {
+                const res = await fetch(finalUrl);
+                const data = await res.json();
+                if (data && data.url) {
+                    finalUrl = data.url;
+                }
+            } catch (err) {
+                console.error('Failed to resolve PDF URL:', err);
+            }
+        }
+
+        const readerUrl = `/read/pdf?url=${encodeURIComponent(finalUrl)}&title=${encodeURIComponent(this.data.title || '')}`;
+
+        const iframe = document.createElement('iframe');
+        iframe.src = readerUrl;
+        iframe.style.width = '100%';
+        iframe.style.height = '600px';
+        iframe.style.border = 'none';
+        iframe.style.borderRadius = '8px';
+        iframe.title = this.data.title || 'PDF Viewer';
+
+        this.wrapper.appendChild(iframe);
+    }
+
+    save() {
+        return this.data;
+    }
+
+    removed() {
+        if (this.data.fileName && this.config.onRemove) {
+            this.config.onRemove(this.data.fileName).catch((err: any) => {
+                console.error('Failed to remove PDF from storage:', err);
+            });
+        }
+    }
+}
diff --git a/apps/the_monkeys/src/components/editor/customBlocks/VideoBlock/index.ts b/apps/the_monkeys/src/components/editor/customBlocks/VideoBlock/index.ts
new file mode 100644
index 00000000..610f778f
--- /dev/null
+++ b/apps/the_monkeys/src/components/editor/customBlocks/VideoBlock/index.ts
@@ -0,0 +1,128 @@
+export default class VideoTool {
+    data: { url: string; title: string, fileName?: string };
+    api: any;
+    config: any;
+    wrapper: HTMLElement;
+    readOnly: boolean;
+
+    constructor({ data, config, api, readOnly }: { data?: { url: string, title: string, fileName?: string }, config?: any, api: any, readOnly?: boolean }) {
+        this.api = api;
+        this.config = config;
+        this.data = data || { url: '', title: '', fileName: '' };
+        this.readOnly = !!readOnly;
+        this.wrapper = document.createElement('div');
+    }
+
+    static get isReadOnlySupported() {
+        return true;
+    }
+
+    static get toolbox() {
+        return {
+            title: 'Video',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="2" y1="10" x2="22" y2="10"/><line x1="2" y1="7" x2="2" y2="7"/><line x1="2" y1="13" x2="2" y2="13"/><line x1="22" y1="7" x2="22" y2="7"/><line x1="22" y1="13" x2="22" y2="13"/><path d="M10 21l2-2 2 2"/></svg>'
+        };
+    }
+
+    render() {
+        this.wrapper.classList.add('video-tool-wrapper');
+
+        if (this.data.url) {
+            this.showPlayer();
+        } else if (!this.readOnly) {
+            this.showInput();
+        } else {
+            this.wrapper.innerHTML = '<div style="padding: 20px; text-align: center; color: #888;">No video provided</div>';
+        }
+
+        return this.wrapper;
+    }
+
+    showInput() {
+        this.wrapper.innerHTML = '';
+        const container = document.createElement('div');
+        container.style.padding = '20px';
+        container.style.border = '1px dashed #ccc';
+        container.style.textAlign = 'center';
+        container.style.backgroundColor = '#f9f9f9';
+        container.style.borderRadius = '8px';
+
+        const button = document.createElement('button');
+        button.innerText = 'Upload Video';
+        button.classList.add('cdx-button');
+
+        button.onclick = (e: any) => {
+            e.preventDefault();
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'video/*';
+            input.onchange = async (e: any) => {
+                const file = e.target.files[0];
+                if (file && this.config.uploader) {
+                    button.innerText = 'Uploading...';
+                    try {
+                        const result = await this.config.uploader(file);
+                        if (result.success) {
+                            this.data = {
+                                url: result.file.url,
+                                title: file.name,
+                                fileName: result.file.name
+                            };
+                            this.showPlayer();
+                        } else {
+                            button.innerText = 'Upload Failed';
+                        }
+                    } catch (err) {
+                        button.innerText = 'Upload Error';
+                    }
+                }
+            };
+            input.click();
+        };
+
+        container.appendChild(button);
+        this.wrapper.appendChild(container);
+    }
+
+    async showPlayer() {
+        this.wrapper.innerHTML = '';
+        if (!this.data.url) return;
+
+        let finalUrl = this.data.url;
+
+        // Auto-resolve if it's a Storage V2 proxy URL
+        if (finalUrl.includes('/storage/posts/') && finalUrl.endsWith('/url')) {
+            try {
+                const res = await fetch(finalUrl);
+                const data = await res.json();
+                if (data && data.url) {
+                    finalUrl = data.url;
+                }
+            } catch (err) {
+                console.error('Failed to resolve Video URL:', err);
+            }
+        }
+
+        const videoElement = document.createElement('video');
+        videoElement.src = finalUrl;
+        videoElement.controls = true;
+        videoElement.style.width = '100%';
+        videoElement.style.maxHeight = '500px';
+        videoElement.style.borderRadius = '8px';
+        videoElement.style.backgroundColor = '#000';
+
+        this.wrapper.appendChild(videoElement);
+    }
+
+    save() {
+        return this.data;
+    }
+
+    removed() {
+        if (this.data.fileName && this.config.onRemove) {
+            this.config.onRemove(this.data.fileName).catch((err: any) => {
+                console.error('Failed to remove video from storage:', err);
+            });
+        }
+    }
+}
diff --git a/apps/the_monkeys/src/components/layout/navbar/profileDropdown.tsx b/apps/the_monkeys/src/components/layout/navbar/profileDropdown.tsx
index a459bd56..6526b9e3 100644
--- a/apps/the_monkeys/src/components/layout/navbar/profileDropdown.tsx
+++ b/apps/the_monkeys/src/components/layout/navbar/profileDropdown.tsx
@@ -34,7 +34,10 @@ const ProfileDropdown = ({ session }: { session?: IUser }) => {
       <DropdownMenuTrigger>
         <div className='hover:opacity-80 cursor-pointer'>
           <ProfileFrame className='size-9 border-1 border-border-light/80 dark:border-border-dark/80'>
-            <ProfileImage username={session?.username} />
+            <ProfileImage
+              username={session?.username}
+              initials={`${session?.first_name?.[0] || ''}${session?.last_name?.[0] || ''}`}
+            />
           </ProfileFrame>
         </div>
       </DropdownMenuTrigger>
@@ -46,7 +49,10 @@ const ProfileDropdown = ({ session }: { session?: IUser }) => {
             className='flex items-center gap-2 overflow-hidden'
           >
             <ProfileFrame className='size-10 sm:size-12 shrink-0'>
-              <ProfileImage username={session?.username} />
+              <ProfileImage
+                username={session?.username}
+                initials={`${session?.first_name?.[0] || ''}${session?.last_name?.[0] || ''}`}
+              />
             </ProfileFrame>
 
             <div className='flex-1 flex flex-col overflow-hidden'>
diff --git a/apps/the_monkeys/src/components/profileImage.tsx b/apps/the_monkeys/src/components/profileImage.tsx
index f7b3eb92..4fb8556d 100644
--- a/apps/the_monkeys/src/components/profileImage.tsx
+++ b/apps/the_monkeys/src/components/profileImage.tsx
@@ -37,20 +37,39 @@ export const ProfileFrame = ({
   );
 };
 
-export const ProfileImage = ({ username }: { username?: string }) => {
+export const ProfileImage = ({
+  username,
+  initials,
+}: {
+  username?: string;
+  initials?: string;
+}) => {
   const { imageUrl, isLoading, isError } = useProfileImage(username);
+  const [imgLoadError, setImgLoadError] = React.useState(false);
+
+  // Reset error when url changes
+  React.useEffect(() => {
+    setImgLoadError(false);
+  }, [imageUrl]);
+
+  // Helper to generate initials if not provided
+  const getInitials = () => {
+    if (initials) return initials.toUpperCase().slice(0, 2);
+    if (username) return username.slice(0, 2).toUpperCase();
+    return '??';
+  };
+
+  if (isLoading) {
+    return (
+      <div className='w-full h-full bg-gray-200 dark:bg-gray-800 animate-pulse' />
+    );
+  }
 
-  if (isLoading || isError || imageUrl === '')
+  if (isError || !imageUrl || imgLoadError)
     return (
-      <Image
-        src='/default-profile.svg'
-        alt={`Author: ${username}`}
-        title={`Author: ${username}`}
-        width={32}
-        height={32}
-        className='w-full h-full object-cover'
-        unoptimized
-      />
+      <div className='w-full h-full flex items-center justify-center bg-brand-orange text-white font-medium text-xs sm:text-sm select-none'>
+        {getInitials()}
+      </div>
     );
 
   return (
@@ -63,6 +82,7 @@ export const ProfileImage = ({ username }: { username?: string }) => {
       className='w-full h-full object-cover'
       loading='lazy'
       quality={100}
+      onError={() => setImgLoadError(true)}
     />
   );
 };
diff --git a/apps/the_monkeys/src/components/user/dialogs/updateProfileDialog.tsx b/apps/the_monkeys/src/components/user/dialogs/updateProfileDialog.tsx
index ada63a90..23bc22d8 100644
--- a/apps/the_monkeys/src/components/user/dialogs/updateProfileDialog.tsx
+++ b/apps/the_monkeys/src/components/user/dialogs/updateProfileDialog.tsx
@@ -8,7 +8,7 @@ import Icon from '@/components/icon';
 import { Loader } from '@/components/loader';
 import useAuth from '@/hooks/auth/useAuth';
 import { PROFILE_IMAGE_QUERY_KEY } from '@/hooks/profile/useProfileImage';
-import axiosFileInstance from '@/services/api/axiosFileInstance';
+import { storageV2 } from '@/services/storage/storageV2';
 import { useQueryClient } from '@tanstack/react-query';
 import { Button } from '@the-monkeys/ui/atoms/button';
 import {
@@ -69,12 +69,12 @@ export const UpdateProfileDialog = () => {
     setLoading(true);
 
     try {
-      const response = await axiosFileInstance.post(
-        `/files/profile/${data?.username}/profile`,
-        formData
+      const response = await storageV2.uploadProfileImage(
+        data?.username || '',
+        selectedImage
       );
 
-      if (response.status === 202) {
+      if (response && response.object) {
         toast({
           variant: 'success',
           title: 'Success',
diff --git a/apps/the_monkeys/src/components/user/userInfo.tsx b/apps/the_monkeys/src/components/user/userInfo.tsx
index 3415e456..3b27b089 100644
--- a/apps/the_monkeys/src/components/user/userInfo.tsx
+++ b/apps/the_monkeys/src/components/user/userInfo.tsx
@@ -26,7 +26,10 @@ export const RecommendedUserCard = ({ id }: { id?: string }) => {
     <div className='w-full flex gap-3'>
       <Link href={`/${userData?.username}`} className='hover:opacity-90'>
         <ProfileFrame className='mt-1 size-10 sm:size-12 ring-1 ring-border-light/40 dark:ring-border-dark/40'>
-          <ProfileImage username={userData?.username} />
+          <ProfileImage
+            username={userData?.username}
+            initials={`${userData?.first_name?.[0] || ''}${userData?.last_name?.[0] || ''}`}
+          />
         </ProfileFrame>
       </Link>
 
@@ -123,7 +126,10 @@ export const UserInfoCardBlogPage = ({ id }: { id?: string }) => {
 
       <div className='shrink-0'>
         <ProfileFrame className='size-7 shadow-sm'>
-          <ProfileImage username={userData?.username} />
+          <ProfileImage
+            username={userData?.username}
+            initials={`${userData?.first_name?.[0] || ''}${userData?.last_name?.[0] || ''}`}
+          />
         </ProfileFrame>
       </div>
 
diff --git a/apps/the_monkeys/src/config/editor/editorjs.config.ts b/apps/the_monkeys/src/config/editor/editorjs.config.ts
index 6ea6a793..8024fd0b 100644
--- a/apps/the_monkeys/src/config/editor/editorjs.config.ts
+++ b/apps/the_monkeys/src/config/editor/editorjs.config.ts
@@ -1,8 +1,8 @@
 import CustomCodeTool from '@/components/editor/customBlocks/CodeBlock';
 import CustomList from '@/components/editor/customBlocks/CustomListBlock';
 import CustomEmbed from '@/components/editor/customBlocks/EmbedBlock';
-import { API_URL } from '@/constants/api';
-import axiosInstance from '@/services/api/axiosInstance';
+import { API_URL, API_URL_V2 } from '@/constants/api';
+import { storageV2 } from '@/services/storage/storageV2';
 import Delimiter from '@editorjs/delimiter';
 import { EditorConfig } from '@editorjs/editorjs';
 import Header from '@editorjs/header';
@@ -11,6 +11,10 @@ import List from '@editorjs/list';
 import Paragraph from '@editorjs/paragraph';
 import Quote from '@editorjs/quote';
 import Table from '@editorjs/table';
+// @ts-ignore
+import AttachesTool from '@editorjs/attaches';
+import VideoTool from '@/components/editor/customBlocks/VideoBlock';
+import PdfTool from '@/components/editor/customBlocks/PdfBlock';
 
 export const getEditorConfig = (blogId: string): EditorConfig => ({
   holder: 'editorjs_editor-container',
@@ -57,20 +61,26 @@ export const getEditorConfig = (blogId: string): EditorConfig => ({
         captionPlaceholder: '',
         uploader: {
           async uploadByFile(file: File) {
-            const formData = new FormData();
-            formData.append('file', file);
+            try {
+              const response = await storageV2.uploadBlogImage(blogId, file);
+              const urlData = await storageV2.getBlogImageUrl(blogId, response.fileName);
 
-            const response = await axiosInstance.post(
-              `/files/post/${blogId}`,
-              formData
-            );
-
-            return {
-              success: 1,
-              file: {
-                url: `${API_URL}/files/post/${blogId}/${response.data.new_file_name}`,
-              },
-            };
+              return {
+                success: 1,
+                file: {
+                  url: urlData.url,
+                  name: response.fileName, // Store for potential deletion
+                },
+              };
+            } catch (error) {
+              console.error('Image upload failed:', error);
+              return {
+                success: 0,
+                file: {
+                  url: '',
+                },
+              };
+            }
           },
         },
       },
@@ -83,6 +93,91 @@ export const getEditorConfig = (blogId: string): EditorConfig => ({
         cols: 2,
       },
     },
+    attaches: {
+      class: AttachesTool,
+      config: {
+        uploader: {
+          async uploadByFile(file: File) {
+            try {
+              const response = await storageV2.uploadBlogFile(blogId, file);
+              const urlData = await storageV2.getBlogFileUrl(blogId, response.fileName);
+
+              return {
+                success: 1,
+                file: {
+                  url: urlData.url,
+                  name: response.fileName,
+                  size: response.size,
+                  title: file.name,
+                  extension: file.name.split('.').pop(),
+                },
+              };
+            } catch (error) {
+              console.error('File upload failed:', error);
+              return {
+                success: 0,
+              };
+            }
+          },
+        },
+      },
+    },
+    video: {
+      class: VideoTool,
+      config: {
+        onRemove: async (fileName: string) => {
+          try {
+            await storageV2.deleteBlogFile(blogId, fileName);
+          } catch (error) {
+            console.error('Failed to delete video from storage:', error);
+          }
+        },
+        uploader: async (file: File) => {
+          try {
+            const response = await storageV2.uploadBlogFile(blogId, file);
+            const urlData = await storageV2.getBlogFileUrl(blogId, response.fileName);
+            return {
+              success: 1,
+              file: {
+                url: urlData.url,
+                name: response.fileName,
+              },
+            };
+          } catch (error) {
+            console.error('Video upload failed:', error);
+            return { success: 0 };
+          }
+        },
+      },
+    },
+    pdf: {
+      class: PdfTool,
+      config: {
+        onRemove: async (fileName: string) => {
+          try {
+            await storageV2.deleteBlogFile(blogId, fileName);
+          } catch (error) {
+            console.error('Failed to delete PDF from storage:', error);
+          }
+        },
+        uploader: async (file: File) => {
+          try {
+            const response = await storageV2.uploadBlogFile(blogId, file);
+            const urlData = await storageV2.getBlogFileUrl(blogId, response.fileName);
+            return {
+              success: 1,
+              file: {
+                url: urlData.url,
+                name: response.fileName,
+              },
+            };
+          } catch (error) {
+            console.error('PDF upload failed:', error);
+            return { success: 0 };
+          }
+        },
+      },
+    },
   },
   defaultBlock: 'paragraph',
 });
diff --git a/apps/the_monkeys/src/config/editor/editorjs_readonly.config.ts b/apps/the_monkeys/src/config/editor/editorjs_readonly.config.ts
index d2d5cfdb..513b06fc 100644
--- a/apps/the_monkeys/src/config/editor/editorjs_readonly.config.ts
+++ b/apps/the_monkeys/src/config/editor/editorjs_readonly.config.ts
@@ -10,6 +10,10 @@ import List from '@editorjs/list';
 import Paragraph from '@editorjs/paragraph';
 import Quote from '@editorjs/quote';
 import Table from '@editorjs/table';
+// @ts-ignore
+import AttachesTool from '@editorjs/attaches';
+import VideoTool from '@/components/editor/customBlocks/VideoBlock';
+import PdfTool from '@/components/editor/customBlocks/PdfBlock';
 
 export const editorConfig: EditorConfig = {
   holder: 'editorjs_editor-container',
@@ -56,5 +60,38 @@ export const editorConfig: EditorConfig = {
         captionPlaceholder: '',
       },
     },
+    attaches: {
+      class: class extends AttachesTool {
+        render() {
+          const wrapper = super.render();
+          const data = (this as any).data;
+
+          if (data && data.file && data.file.url && data.file.url.toLowerCase().endsWith('.pdf')) {
+            // 1. Make the entire card clickable
+            wrapper.style.cursor = 'pointer';
+            wrapper.onclick = (e: MouseEvent) => {
+              e.preventDefault();
+              e.stopPropagation();
+              const readerUrl = `/read/pdf?url=${encodeURIComponent(data.file.url)}&title=${encodeURIComponent(data.file.title || data.file.name || 'PDF Document')}`;
+              // 2. Open in same tab
+              window.location.href = readerUrl;
+            };
+
+            // 3. Optional: Fix dark mode visibility by ensuring the icon/text color is consistent
+            // The user mentioned the down arrow is not visible in dark mode. 
+            // Since we are making it all clickable, we can just let the default UI be, 
+            // but let's make sure the background on hover feels interactive.
+            wrapper.classList.add('hover:bg-gray-50', 'dark:hover:bg-zinc-900', 'transition-colors');
+          }
+          return wrapper;
+        }
+      },
+    },
+    video: {
+      class: VideoTool,
+    },
+    pdf: {
+      class: PdfTool,
+    },
   },
 };
diff --git a/apps/the_monkeys/src/hooks/profile/useProfileImage.ts b/apps/the_monkeys/src/hooks/profile/useProfileImage.ts
index baff8655..58f524f4 100644
--- a/apps/the_monkeys/src/hooks/profile/useProfileImage.ts
+++ b/apps/the_monkeys/src/hooks/profile/useProfileImage.ts
@@ -2,32 +2,30 @@
 
 import { useEffect, useState } from 'react';
 
-import fetcher from '@/services/fileFetcher';
+import { storageV2 } from '@/services/storage/storageV2';
 import { useQuery } from '@tanstack/react-query';
 
 export const PROFILE_IMAGE_QUERY_KEY = 'profile-image';
 
 const useProfileImage = (username: string | undefined) => {
-  const [imageUrl, setImageUrl] = useState<string>('');
-
-  const { data, error, isLoading, isError } = useQuery<Blob, Error>({
+  const { data, error, isLoading, isError } = useQuery({
     queryKey: [PROFILE_IMAGE_QUERY_KEY, username],
-    queryFn: () => fetcher(`/files/profile/${username}/profile`),
+    queryFn: async () => {
+      if (!username) return null;
+      try {
+        const res = await storageV2.getProfileImageUrl(username);
+        return res.url;
+      } catch (error) {
+        // Fallback or handle 404
+        throw error;
+      }
+    },
     enabled: !!username,
-    staleTime: 5 * 60 * 1000,
+    staleTime: 15 * 60 * 1000, // 15 minutes
   });
 
-  useEffect(() => {
-    if (!data) return;
-
-    const objectUrl = URL.createObjectURL(data);
-    setImageUrl(objectUrl);
-
-    return () => URL.revokeObjectURL(objectUrl); // Cleanup on unmount
-  }, [data]);
-
   return {
-    imageUrl,
+    imageUrl: data || '',
     isLoading,
     isError: isError || !!error,
   };
diff --git a/apps/the_monkeys/src/services/storage/storageV2.ts b/apps/the_monkeys/src/services/storage/storageV2.ts
new file mode 100644
index 00000000..acc2da46
--- /dev/null
+++ b/apps/the_monkeys/src/services/storage/storageV2.ts
@@ -0,0 +1,108 @@
+import axiosInstanceV2 from '../api/axiosInstanceV2';
+
+export interface StorageV2FileMeta {
+    object: string;
+    etag: string;
+    size: number;
+    contentType: string;
+    lastModified: string;
+    cacheControl: string;
+    blurhash?: string;
+    width?: number;
+    height?: number;
+    url: string;
+}
+
+export interface StorageV2UploadResponse {
+    bucket: string;
+    object: string;
+    fileName: string;
+    etag: string;
+    size: number;
+    contentType: string;
+}
+
+export interface StorageV2UrlResponse {
+    url: string;
+    expiresIn: number;
+}
+
+export const storageV2 = {
+    // Profile Image
+    uploadProfileImage: async (userId: string, file: File) => {
+        const formData = new FormData();
+        formData.append('profile_pic', file);
+
+        const response = await axiosInstanceV2.post<StorageV2UploadResponse>(
+            `/storage/profiles/${userId}/profile`,
+            formData,
+            {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            }
+        );
+        return response.data;
+    },
+
+    getProfileImageMeta: async (userId: string) => {
+        const response = await axiosInstanceV2.get<StorageV2FileMeta>(
+            `/storage/profiles/${userId}/profile/meta`
+        );
+        return response.data;
+    },
+
+    getProfileImageUrl: async (userId: string) => {
+        const response = await axiosInstanceV2.get<StorageV2UrlResponse>(
+            `/storage/profiles/${userId}/profile/url`
+        );
+        return response.data;
+    },
+
+    // Blog Images
+    uploadBlogImage: async (blogId: string, file: File) => {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const response = await axiosInstanceV2.post<StorageV2UploadResponse>(
+            `/storage/posts/${blogId}`,
+            formData,
+            {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            }
+        );
+        return response.data;
+    },
+
+    getBlogImageMeta: async (blogId: string, fileName: string) => {
+        const response = await axiosInstanceV2.get<StorageV2FileMeta>(
+            `/storage/posts/${blogId}/${fileName}/meta`
+        );
+        return response.data;
+    },
+
+    getBlogImageUrl: async (blogId: string, fileName: string) => {
+        const response = await axiosInstanceV2.get<StorageV2UrlResponse>(
+            `/storage/posts/${blogId}/${fileName}/url`
+        );
+        return response.data;
+    },
+
+    // Generic File Support (Aliases for clarity)
+    uploadBlogFile: async (blogId: string, file: File) => {
+        return storageV2.uploadBlogImage(blogId, file);
+    },
+
+    getBlogFileUrl: async (blogId: string, fileName: string) => {
+        return storageV2.getBlogImageUrl(blogId, fileName);
+    },
+
+    deleteBlogFile: async (blogId: string, fileName: string) => {
+        const response = await axiosInstanceV2.delete(
+            `/storage/posts/${blogId}/${fileName}`
+        );
+        return response.data;
+    },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0218e6e9..146a6679 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,9 @@ importers:
 
   apps/the_monkeys:
     dependencies:
+      '@editorjs/attaches':
+        specifier: ^1.3.1
+        version: 1.3.2
       '@editorjs/delimiter':
         specifier: 1.4.2
         version: 1.4.2
@@ -515,6 +518,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@codexteam/ajax@4.2.0':
+    resolution: {integrity: sha512-54r/HZirqBPEV8rM9gZh570RCwG6M/iDAXT9Q9eGuMo9KZU49tw1dEDHjYsResGckfCsaymDqg4GnhfrBtX9JQ==}
+
   '@codexteam/icons@0.0.4':
     resolution: {integrity: sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q==}
 
@@ -555,6 +561,10 @@ packages:
     resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==}
     engines: {node: '>=18'}
 
+  '@editorjs/attaches@1.3.2':
+    resolution: {integrity: sha512-hzwcOo/Lk1hTEzXXV0MSnwPsGIILaeM1R7SCMu4uUALftlQVugf+Vm4a9Rd66IT7TU3tfyiOwJPb/Ydp9zn36A==}
+    engines: {node: '>=20.0.0'}
+
   '@editorjs/delimiter@1.4.2':
     resolution: {integrity: sha512-S8q2LpeYdYkVShLp7K8c4HLthDHBevLw+sT+iO0+SH0oMvFmld9SUon3DFzMQ2gG07EOdZGRZ958+sVxyvFjZw==}
 
@@ -3722,6 +3732,7 @@ packages:
   next@14.2.26:
     resolution: {integrity: sha512-b81XSLihMwCfwiUVRRja3LphLo4uBBMZEzBBWMaISbKTwOmq3wPknIETy/8000tr7Gq4WmbuFYPS7jOYIf+ZJw==}
     engines: {node: '>=18.17.0'}
+    deprecated: This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
@@ -4799,6 +4810,7 @@ packages:
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
   whatwg-mimetype@4.0.0:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
@@ -5133,6 +5145,8 @@ snapshots:
   '@biomejs/cli-win32-x64@1.9.4':
     optional: true
 
+  '@codexteam/ajax@4.2.0': {}
+
   '@codexteam/icons@0.0.4': {}
 
   '@codexteam/icons@0.0.5': {}
@@ -5161,6 +5175,11 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.3': {}
 
+  '@editorjs/attaches@1.3.2':
+    dependencies:
+      '@codexteam/ajax': 4.2.0
+      '@codexteam/icons': 0.3.3
+
   '@editorjs/delimiter@1.4.2':
     dependencies:
       '@codexteam/icons': 0.3.3
@@ -7426,7 +7445,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.4(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -7460,7 +7479,7 @@ snapshots:
       tinyglobby: 0.2.12
       unrs-resolver: 1.3.2
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -7475,7 +7494,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8

From ef1d15243344ba38553d3a5dca7ba4e376fc18eb Mon Sep 17 00:00:00 2001
From: Dave Augustus <devpandey19924u@gmail.com>
Date: Fri, 23 Jan 2026 12:00:00 +0530
Subject: [PATCH 2/9] feat: improve profile image placeholder UX and
 consistency

---
 .../src/components/profileImage.tsx           | 10 ++--------
 .../user/dialogs/deleteProfileDialog.tsx      | 20 ++++++++-----------
 .../src/services/storage/storageV2.ts         |  7 +++++++
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/apps/the_monkeys/src/components/profileImage.tsx b/apps/the_monkeys/src/components/profileImage.tsx
index 4fb8556d..9920957d 100644
--- a/apps/the_monkeys/src/components/profileImage.tsx
+++ b/apps/the_monkeys/src/components/profileImage.tsx
@@ -59,15 +59,9 @@ export const ProfileImage = ({
     return '??';
   };
 
-  if (isLoading) {
+  if (isLoading || isError || !imageUrl || imgLoadError)
     return (
-      <div className='w-full h-full bg-gray-200 dark:bg-gray-800 animate-pulse' />
-    );
-  }
-
-  if (isError || !imageUrl || imgLoadError)
-    return (
-      <div className='w-full h-full flex items-center justify-center bg-brand-orange text-white font-medium text-xs sm:text-sm select-none'>
+      <div className='w-full h-full flex items-center justify-center bg-brand-orange text-white font-bold text-xs sm:text-sm select-none border border-black/5 dark:border-white/5'>
         {getInitials()}
       </div>
     );
diff --git a/apps/the_monkeys/src/components/user/dialogs/deleteProfileDialog.tsx b/apps/the_monkeys/src/components/user/dialogs/deleteProfileDialog.tsx
index f0b2c9c1..a754e877 100644
--- a/apps/the_monkeys/src/components/user/dialogs/deleteProfileDialog.tsx
+++ b/apps/the_monkeys/src/components/user/dialogs/deleteProfileDialog.tsx
@@ -6,7 +6,7 @@ import Icon from '@/components/icon';
 import { Loader } from '@/components/loader';
 import useAuth from '@/hooks/auth/useAuth';
 import { PROFILE_IMAGE_QUERY_KEY } from '@/hooks/profile/useProfileImage';
-import axiosInstance from '@/services/api/axiosInstance';
+import { storageV2 } from '@/services/storage/storageV2';
 import { useQueryClient } from '@tanstack/react-query';
 import { Button } from '@the-monkeys/ui/atoms/button';
 import {
@@ -29,19 +29,15 @@ export const DeleteProfileDialog = () => {
     setLoading(true);
 
     try {
-      const response = await axiosInstance.delete(
-        `/files/profile/${data?.username}/profile`
-      );
+      await storageV2.deleteProfileImage(data?.username || '');
 
-      if (response.status === 202) {
-        toast({
-          variant: 'success',
-          title: 'Success',
-          description: 'Your profile photo has been deleted successfully',
-        });
+      toast({
+        variant: 'success',
+        title: 'Success',
+        description: 'Your profile photo has been deleted successfully',
+      });
 
-        setOpen(false);
-      }
+      setOpen(false);
 
       queryClient.invalidateQueries({
         queryKey: [PROFILE_IMAGE_QUERY_KEY, data?.username],
diff --git a/apps/the_monkeys/src/services/storage/storageV2.ts b/apps/the_monkeys/src/services/storage/storageV2.ts
index acc2da46..d9dc661d 100644
--- a/apps/the_monkeys/src/services/storage/storageV2.ts
+++ b/apps/the_monkeys/src/services/storage/storageV2.ts
@@ -59,6 +59,13 @@ export const storageV2 = {
         return response.data;
     },
 
+    deleteProfileImage: async (userId: string) => {
+        const response = await axiosInstanceV2.delete(
+            `/storage/profiles/${userId}/profile`
+        );
+        return response.data;
+    },
+
     // Blog Images
     uploadBlogImage: async (blogId: string, file: File) => {
         const formData = new FormData();

From a515ee96647103d7934d151b223fc3b1f05d0afd Mon Sep 17 00:00:00 2001
From: Dave Augustus <devpandey19924u@gmail.com>
Date: Mon, 26 Jan 2026 08:22:37 +0500
Subject: [PATCH 3/9] fix: correct Prettier formatting issues across multiple
 files

---
 .../src/app/edit/[blogId]/page.tsx            |  10 +-
 apps/the_monkeys/src/app/read/pdf/page.tsx    | 138 +++++-----
 .../src/components/blog/getBlogContent.tsx    |  17 +-
 .../editor/customBlocks/PdfBlock/index.ts     | 236 +++++++++--------
 .../editor/customBlocks/VideoBlock/index.ts   | 247 +++++++++---------
 .../src/config/editor/editorjs.config.ts      |  28 +-
 .../config/editor/editorjs_readonly.config.ts |  25 +-
 .../src/services/storage/storageV2.ts         | 182 ++++++-------
 8 files changed, 469 insertions(+), 414 deletions(-)

diff --git a/apps/the_monkeys/src/app/edit/[blogId]/page.tsx b/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
index 9d50dc07..5178a2f9 100644
--- a/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
+++ b/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
@@ -68,7 +68,6 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
     blogTopicsRef.current = blogTopics;
   }, [data, accountId, blogTopics]);
 
-
   // Format data
   const formatData = useCallback(
     (data: OutputData, accountId: string | undefined, blogTopics: string[]) => {
@@ -113,9 +112,7 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
       }
 
       setConnectionStatus('Connecting...');
-      const ws = new WebSocket(
-        `${WSS_URL_V2}/blog/draft/${blogId}`
-      );
+      const ws = new WebSocket(`${WSS_URL_V2}/blog/draft/${blogId}`);
 
       ws.onopen = () => {
         if (!isMounted) return;
@@ -378,8 +375,9 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
               )}
             >
               <div
-                className={`inline-block size-2 rounded-full ${isConnected ? 'bg-alert-green' : 'bg-alert-red'
-                  }`}
+                className={`inline-block size-2 rounded-full ${
+                  isConnected ? 'bg-alert-green' : 'bg-alert-red'
+                }`}
               />
 
               <p className='text-xs'>{isConnected ? 'Online' : 'Offline'}</p>
diff --git a/apps/the_monkeys/src/app/read/pdf/page.tsx b/apps/the_monkeys/src/app/read/pdf/page.tsx
index a4162248..c915f521 100644
--- a/apps/the_monkeys/src/app/read/pdf/page.tsx
+++ b/apps/the_monkeys/src/app/read/pdf/page.tsx
@@ -1,81 +1,87 @@
 'use client';
 
 import { Suspense } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
-import Container from '@/components/layout/Container';
-import Icon from '@/components/icon';
 
-const PDFReaderContent = () => {
-    const searchParams = useSearchParams();
-    const router = useRouter();
-    const url = searchParams.get('url');
-    const title = searchParams.get('title') || 'PDF Viewer';
+import { useRouter, useSearchParams } from 'next/navigation';
 
-    if (!url) {
-        return (
-            <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
-                <Icon name="RiErrorWarning" size={48} className="text-alert-red" />
-                <h1 className="text-2xl font-bold">No PDF URL provided</h1>
-                <button
-                    onClick={() => router.back()}
-                    className="px-6 py-2 bg-brand-orange text-white rounded-full font-medium"
-                >
-                    Go Back
-                </button>
-            </div>
-        );
-    }
+import Icon from '@/components/icon';
+import Container from '@/components/layout/Container';
 
-    // Append toolbar=0 to hide browser download/print buttons
-    const viewerUrl = url.includes('#') ? url : `${url}#toolbar=0`;
+const PDFReaderContent = () => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const url = searchParams.get('url');
+  const title = searchParams.get('title') || 'PDF Viewer';
 
+  if (!url) {
     return (
-        <div className="flex flex-col h-[calc(100vh-80px)]">
-            <div className="bg-gray-100 dark:bg-gray-900 border-b border-border-light dark:border-border-dark p-4 flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                    <button
-                        onClick={() => router.back()}
-                        className="p-2 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg transition-colors"
-                    >
-                        <Icon name="RiArrowLeft" size={24} />
-                    </button>
-                    <div>
-                        <h1 className="font-dm_sans font-semibold text-lg line-clamp-1">{title}</h1>
-                        <p className="text-xs opacity-70">Monkeys Secure PDF Reader</p>
-                    </div>
-                </div>
-                <div className="flex items-center gap-2">
-                    <div className="hidden sm:flex items-center gap-2 px-3 py-1 bg-brand-orange/10 text-brand-orange rounded-full text-xs font-medium">
-                        <Icon name="RiVerifiedBadge" type="Fill" size={12} />
-                        Read Only Mode
-                    </div>
-                </div>
-            </div>
+      <div className='flex flex-col items-center justify-center min-h-[60vh] gap-4'>
+        <Icon name='RiErrorWarning' size={48} className='text-alert-red' />
+        <h1 className='text-2xl font-bold'>No PDF URL provided</h1>
+        <button
+          onClick={() => router.back()}
+          className='px-6 py-2 bg-brand-orange text-white rounded-full font-medium'
+        >
+          Go Back
+        </button>
+      </div>
+    );
+  }
 
-            <div className="flex-grow bg-gray-200 dark:bg-gray-800 overflow-hidden relative">
-                <iframe
-                    src={viewerUrl}
-                    className="w-full h-full border-none"
-                    title={title}
-                />
-            </div>
+  // Append toolbar=0 to hide browser download/print buttons
+  const viewerUrl = url.includes('#') ? url : `${url}#toolbar=0`;
+
+  return (
+    <div className='flex flex-col h-[calc(100vh-80px)]'>
+      <div className='bg-gray-100 dark:bg-gray-900 border-b border-border-light dark:border-border-dark p-4 flex items-center justify-between'>
+        <div className='flex items-center gap-3'>
+          <button
+            onClick={() => router.back()}
+            className='p-2 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg transition-colors'
+          >
+            <Icon name='RiArrowLeft' size={24} />
+          </button>
+          <div>
+            <h1 className='font-dm_sans font-semibold text-lg line-clamp-1'>
+              {title}
+            </h1>
+            <p className='text-xs opacity-70'>Monkeys Secure PDF Reader</p>
+          </div>
         </div>
-    );
+        <div className='flex items-center gap-2'>
+          <div className='hidden sm:flex items-center gap-2 px-3 py-1 bg-brand-orange/10 text-brand-orange rounded-full text-xs font-medium'>
+            <Icon name='RiVerifiedBadge' type='Fill' size={12} />
+            Read Only Mode
+          </div>
+        </div>
+      </div>
+
+      <div className='flex-grow bg-gray-200 dark:bg-gray-800 overflow-hidden relative'>
+        <iframe
+          src={viewerUrl}
+          className='w-full h-full border-none'
+          title={title}
+        />
+      </div>
+    </div>
+  );
 };
 
 export default function PDFReaderPage() {
-    return (
-        <Container className="max-w-6xl py-4 sm:py-8">
-            <div className="rounded-2xl overflow-hidden border border-border-light dark:border-border-dark shadow-xl bg-white dark:bg-zinc-950">
-                <Suspense fallback={
-                    <div className="flex flex-col items-center justify-center min-h-[80vh] gap-4">
-                        <div className="w-12 h-12 border-4 border-brand-orange border-t-transparent rounded-full animate-spin"></div>
-                        <p className="font-dm_sans font-medium">Initializing reader...</p>
-                    </div>
-                }>
-                    <PDFReaderContent />
-                </Suspense>
+  return (
+    <Container className='max-w-6xl py-4 sm:py-8'>
+      <div className='rounded-2xl overflow-hidden border border-border-light dark:border-border-dark shadow-xl bg-white dark:bg-zinc-950'>
+        <Suspense
+          fallback={
+            <div className='flex flex-col items-center justify-center min-h-[80vh] gap-4'>
+              <div className='w-12 h-12 border-4 border-brand-orange border-t-transparent rounded-full animate-spin'></div>
+              <p className='font-dm_sans font-medium'>Initializing reader...</p>
             </div>
-        </Container>
-    );
+          }
+        >
+          <PDFReaderContent />
+        </Suspense>
+      </div>
+    </Container>
+  );
 }
diff --git a/apps/the_monkeys/src/components/blog/getBlogContent.tsx b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
index 77f4b3ed..11d1e2e3 100644
--- a/apps/the_monkeys/src/components/blog/getBlogContent.tsx
+++ b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
@@ -115,7 +115,11 @@ export const BlogImage = ({
   useEffect(() => {
     const resolveUrl = async () => {
       // Check if image is a Storage V2 API URL (ends in /url)
-      if (image && image.includes('/storage/posts/') && image.endsWith('/url')) {
+      if (
+        image &&
+        image.includes('/storage/posts/') &&
+        image.endsWith('/url')
+      ) {
         try {
           const res = await fetch(image);
           const data = await res.json();
@@ -134,7 +138,12 @@ export const BlogImage = ({
   }, [image]);
 
   return (
-    <div className={twMerge(className, 'relative overflow-hidden bg-gray-200 dark:bg-gray-800')}>
+    <div
+      className={twMerge(
+        className,
+        'relative overflow-hidden bg-gray-200 dark:bg-gray-800'
+      )}
+    >
       <Image
         src={imgSrc}
         alt={title}
@@ -150,8 +159,8 @@ export const BlogImage = ({
         onError={() => setIsLoading(false)} // Prevent indefinite loading state
       />
       {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-brand-orange"></div>
+        <div className='absolute inset-0 flex items-center justify-center'>
+          <div className='h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-brand-orange'></div>
         </div>
       )}
     </div>
diff --git a/apps/the_monkeys/src/components/editor/customBlocks/PdfBlock/index.ts b/apps/the_monkeys/src/components/editor/customBlocks/PdfBlock/index.ts
index f5759942..7edc1815 100644
--- a/apps/the_monkeys/src/components/editor/customBlocks/PdfBlock/index.ts
+++ b/apps/the_monkeys/src/components/editor/customBlocks/PdfBlock/index.ts
@@ -1,131 +1,141 @@
 export default class PdfTool {
-    data: { url: string; title: string, fileName?: string };
+  data: { url: string; title: string; fileName?: string };
+  api: any;
+  config: any;
+  wrapper: HTMLElement;
+  readOnly: boolean;
+
+  constructor({
+    data,
+    config,
+    api,
+    readOnly,
+  }: {
+    data?: { url: string; title: string; fileName?: string };
+    config?: any;
     api: any;
-    config: any;
-    wrapper: HTMLElement;
-    readOnly: boolean;
-
-    constructor({ data, config, api, readOnly }: { data?: { url: string, title: string, fileName?: string }, config?: any, api: any, readOnly?: boolean }) {
-        this.api = api;
-        this.config = config;
-        this.data = data || { url: '', title: '', fileName: '' };
-        this.readOnly = !!readOnly;
-        this.wrapper = document.createElement('div');
-    }
-
-    static get isReadOnlySupported() {
-        return true;
-    }
-
-    static get toolbox() {
-        return {
-            title: 'PDF Viewer',
-            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="M10 13a2 2 0 0 0-4 0v2a2 2 0 0 0 4 0"/><path d="M13 13v4"/><path d="M13 13h2"/><path d="M13 15h2"/><path d="M18 13h2a2 2 0 0 0-2-2v4a2 2 0 0 0 2-2"/></svg>'
-        };
-    }
-
-    render() {
-        this.wrapper.classList.add('pdf-tool-wrapper');
-        this.wrapper.style.margin = '20px 0';
-
-        if (this.data.url) {
-            this.showViewer();
-        } else if (!this.readOnly) {
-            this.showInput();
-        } else {
-            this.wrapper.innerHTML = `
+    readOnly?: boolean;
+  }) {
+    this.api = api;
+    this.config = config;
+    this.data = data || { url: '', title: '', fileName: '' };
+    this.readOnly = !!readOnly;
+    this.wrapper = document.createElement('div');
+  }
+
+  static get isReadOnlySupported() {
+    return true;
+  }
+
+  static get toolbox() {
+    return {
+      title: 'PDF Viewer',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="M10 13a2 2 0 0 0-4 0v2a2 2 0 0 0 4 0"/><path d="M13 13v4"/><path d="M13 13h2"/><path d="M13 15h2"/><path d="M18 13h2a2 2 0 0 0-2-2v4a2 2 0 0 0 2-2"/></svg>',
+    };
+  }
+
+  render() {
+    this.wrapper.classList.add('pdf-tool-wrapper');
+    this.wrapper.style.margin = '20px 0';
+
+    if (this.data.url) {
+      this.showViewer();
+    } else if (!this.readOnly) {
+      this.showInput();
+    } else {
+      this.wrapper.innerHTML = `
                 <div style="padding: 40px; text-align: center; color: #888; border: 1px dashed #ddd; border-radius: 12px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 12px; opacity: 0.5;"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
                     <p>No PDF provided</p>
                 </div>
             `;
-        }
-
-        return this.wrapper;
-    }
-
-    showInput() {
-        this.wrapper.innerHTML = '';
-        const container = document.createElement('div');
-        container.style.padding = '20px';
-        container.style.border = '1px dashed #ccc';
-        container.style.textAlign = 'center';
-
-        const button = document.createElement('button');
-        button.innerText = 'Upload PDF or Paste URL';
-        button.classList.add('cdx-button');
-
-        button.onclick = () => {
-            const input = document.createElement('input');
-            input.type = 'file';
-            input.accept = 'application/pdf';
-            input.onchange = async (e: any) => {
-                const file = e.target.files[0];
-                if (file && this.config.uploader) {
-                    button.innerText = 'Uploading...';
-                    try {
-                        const result = await this.config.uploader(file);
-                        if (result.success) {
-                            this.data = {
-                                url: result.file.url,
-                                title: file.name,
-                                fileName: result.file.name
-                            };
-                            this.showViewer();
-                        }
-                    } catch (err) {
-                        button.innerText = 'Upload Failed';
-                    }
-                }
-            };
-            input.click();
-        };
-
-        container.appendChild(button);
-        this.wrapper.appendChild(container);
     }
 
-    async showViewer() {
-        this.wrapper.innerHTML = '';
-        if (!this.data.url) return;
-
-        let finalUrl = this.data.url;
-
-        // Auto-resolve if it's a Storage V2 proxy URL
-        if (finalUrl.includes('/storage/posts/') && finalUrl.endsWith('/url')) {
-            try {
-                const res = await fetch(finalUrl);
-                const data = await res.json();
-                if (data && data.url) {
-                    finalUrl = data.url;
-                }
-            } catch (err) {
-                console.error('Failed to resolve PDF URL:', err);
+    return this.wrapper;
+  }
+
+  showInput() {
+    this.wrapper.innerHTML = '';
+    const container = document.createElement('div');
+    container.style.padding = '20px';
+    container.style.border = '1px dashed #ccc';
+    container.style.textAlign = 'center';
+
+    const button = document.createElement('button');
+    button.innerText = 'Upload PDF or Paste URL';
+    button.classList.add('cdx-button');
+
+    button.onclick = () => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'application/pdf';
+      input.onchange = async (e: any) => {
+        const file = e.target.files[0];
+        if (file && this.config.uploader) {
+          button.innerText = 'Uploading...';
+          try {
+            const result = await this.config.uploader(file);
+            if (result.success) {
+              this.data = {
+                url: result.file.url,
+                title: file.name,
+                fileName: result.file.name,
+              };
+              this.showViewer();
             }
+          } catch (err) {
+            button.innerText = 'Upload Failed';
+          }
+        }
+      };
+      input.click();
+    };
+
+    container.appendChild(button);
+    this.wrapper.appendChild(container);
+  }
+
+  async showViewer() {
+    this.wrapper.innerHTML = '';
+    if (!this.data.url) return;
+
+    let finalUrl = this.data.url;
+
+    // Auto-resolve if it's a Storage V2 proxy URL
+    if (finalUrl.includes('/storage/posts/') && finalUrl.endsWith('/url')) {
+      try {
+        const res = await fetch(finalUrl);
+        const data = await res.json();
+        if (data && data.url) {
+          finalUrl = data.url;
         }
+      } catch (err) {
+        console.error('Failed to resolve PDF URL:', err);
+      }
+    }
 
-        const readerUrl = `/read/pdf?url=${encodeURIComponent(finalUrl)}&title=${encodeURIComponent(this.data.title || '')}`;
+    const readerUrl = `/read/pdf?url=${encodeURIComponent(finalUrl)}&title=${encodeURIComponent(this.data.title || '')}`;
 
-        const iframe = document.createElement('iframe');
-        iframe.src = readerUrl;
-        iframe.style.width = '100%';
-        iframe.style.height = '600px';
-        iframe.style.border = 'none';
-        iframe.style.borderRadius = '8px';
-        iframe.title = this.data.title || 'PDF Viewer';
+    const iframe = document.createElement('iframe');
+    iframe.src = readerUrl;
+    iframe.style.width = '100%';
+    iframe.style.height = '600px';
+    iframe.style.border = 'none';
+    iframe.style.borderRadius = '8px';
+    iframe.title = this.data.title || 'PDF Viewer';
 
-        this.wrapper.appendChild(iframe);
-    }
+    this.wrapper.appendChild(iframe);
+  }
 
-    save() {
-        return this.data;
-    }
+  save() {
+    return this.data;
+  }
 
-    removed() {
-        if (this.data.fileName && this.config.onRemove) {
-            this.config.onRemove(this.data.fileName).catch((err: any) => {
-                console.error('Failed to remove PDF from storage:', err);
-            });
-        }
+  removed() {
+    if (this.data.fileName && this.config.onRemove) {
+      this.config.onRemove(this.data.fileName).catch((err: any) => {
+        console.error('Failed to remove PDF from storage:', err);
+      });
     }
+  }
 }
diff --git a/apps/the_monkeys/src/components/editor/customBlocks/VideoBlock/index.ts b/apps/the_monkeys/src/components/editor/customBlocks/VideoBlock/index.ts
index 610f778f..c5719bb1 100644
--- a/apps/the_monkeys/src/components/editor/customBlocks/VideoBlock/index.ts
+++ b/apps/the_monkeys/src/components/editor/customBlocks/VideoBlock/index.ts
@@ -1,128 +1,139 @@
 export default class VideoTool {
-    data: { url: string; title: string, fileName?: string };
+  data: { url: string; title: string; fileName?: string };
+  api: any;
+  config: any;
+  wrapper: HTMLElement;
+  readOnly: boolean;
+
+  constructor({
+    data,
+    config,
+    api,
+    readOnly,
+  }: {
+    data?: { url: string; title: string; fileName?: string };
+    config?: any;
     api: any;
-    config: any;
-    wrapper: HTMLElement;
-    readOnly: boolean;
-
-    constructor({ data, config, api, readOnly }: { data?: { url: string, title: string, fileName?: string }, config?: any, api: any, readOnly?: boolean }) {
-        this.api = api;
-        this.config = config;
-        this.data = data || { url: '', title: '', fileName: '' };
-        this.readOnly = !!readOnly;
-        this.wrapper = document.createElement('div');
+    readOnly?: boolean;
+  }) {
+    this.api = api;
+    this.config = config;
+    this.data = data || { url: '', title: '', fileName: '' };
+    this.readOnly = !!readOnly;
+    this.wrapper = document.createElement('div');
+  }
+
+  static get isReadOnlySupported() {
+    return true;
+  }
+
+  static get toolbox() {
+    return {
+      title: 'Video',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="2" y1="10" x2="22" y2="10"/><line x1="2" y1="7" x2="2" y2="7"/><line x1="2" y1="13" x2="2" y2="13"/><line x1="22" y1="7" x2="22" y2="7"/><line x1="22" y1="13" x2="22" y2="13"/><path d="M10 21l2-2 2 2"/></svg>',
+    };
+  }
+
+  render() {
+    this.wrapper.classList.add('video-tool-wrapper');
+
+    if (this.data.url) {
+      this.showPlayer();
+    } else if (!this.readOnly) {
+      this.showInput();
+    } else {
+      this.wrapper.innerHTML =
+        '<div style="padding: 20px; text-align: center; color: #888;">No video provided</div>';
     }
 
-    static get isReadOnlySupported() {
-        return true;
-    }
-
-    static get toolbox() {
-        return {
-            title: 'Video',
-            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="2" y1="10" x2="22" y2="10"/><line x1="2" y1="7" x2="2" y2="7"/><line x1="2" y1="13" x2="2" y2="13"/><line x1="22" y1="7" x2="22" y2="7"/><line x1="22" y1="13" x2="22" y2="13"/><path d="M10 21l2-2 2 2"/></svg>'
-        };
-    }
-
-    render() {
-        this.wrapper.classList.add('video-tool-wrapper');
-
-        if (this.data.url) {
-            this.showPlayer();
-        } else if (!this.readOnly) {
-            this.showInput();
-        } else {
-            this.wrapper.innerHTML = '<div style="padding: 20px; text-align: center; color: #888;">No video provided</div>';
-        }
-
-        return this.wrapper;
-    }
-
-    showInput() {
-        this.wrapper.innerHTML = '';
-        const container = document.createElement('div');
-        container.style.padding = '20px';
-        container.style.border = '1px dashed #ccc';
-        container.style.textAlign = 'center';
-        container.style.backgroundColor = '#f9f9f9';
-        container.style.borderRadius = '8px';
-
-        const button = document.createElement('button');
-        button.innerText = 'Upload Video';
-        button.classList.add('cdx-button');
-
-        button.onclick = (e: any) => {
-            e.preventDefault();
-            const input = document.createElement('input');
-            input.type = 'file';
-            input.accept = 'video/*';
-            input.onchange = async (e: any) => {
-                const file = e.target.files[0];
-                if (file && this.config.uploader) {
-                    button.innerText = 'Uploading...';
-                    try {
-                        const result = await this.config.uploader(file);
-                        if (result.success) {
-                            this.data = {
-                                url: result.file.url,
-                                title: file.name,
-                                fileName: result.file.name
-                            };
-                            this.showPlayer();
-                        } else {
-                            button.innerText = 'Upload Failed';
-                        }
-                    } catch (err) {
-                        button.innerText = 'Upload Error';
-                    }
-                }
-            };
-            input.click();
-        };
-
-        container.appendChild(button);
-        this.wrapper.appendChild(container);
-    }
-
-    async showPlayer() {
-        this.wrapper.innerHTML = '';
-        if (!this.data.url) return;
-
-        let finalUrl = this.data.url;
-
-        // Auto-resolve if it's a Storage V2 proxy URL
-        if (finalUrl.includes('/storage/posts/') && finalUrl.endsWith('/url')) {
-            try {
-                const res = await fetch(finalUrl);
-                const data = await res.json();
-                if (data && data.url) {
-                    finalUrl = data.url;
-                }
-            } catch (err) {
-                console.error('Failed to resolve Video URL:', err);
+    return this.wrapper;
+  }
+
+  showInput() {
+    this.wrapper.innerHTML = '';
+    const container = document.createElement('div');
+    container.style.padding = '20px';
+    container.style.border = '1px dashed #ccc';
+    container.style.textAlign = 'center';
+    container.style.backgroundColor = '#f9f9f9';
+    container.style.borderRadius = '8px';
+
+    const button = document.createElement('button');
+    button.innerText = 'Upload Video';
+    button.classList.add('cdx-button');
+
+    button.onclick = (e: any) => {
+      e.preventDefault();
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'video/*';
+      input.onchange = async (e: any) => {
+        const file = e.target.files[0];
+        if (file && this.config.uploader) {
+          button.innerText = 'Uploading...';
+          try {
+            const result = await this.config.uploader(file);
+            if (result.success) {
+              this.data = {
+                url: result.file.url,
+                title: file.name,
+                fileName: result.file.name,
+              };
+              this.showPlayer();
+            } else {
+              button.innerText = 'Upload Failed';
             }
+          } catch (err) {
+            button.innerText = 'Upload Error';
+          }
         }
-
-        const videoElement = document.createElement('video');
-        videoElement.src = finalUrl;
-        videoElement.controls = true;
-        videoElement.style.width = '100%';
-        videoElement.style.maxHeight = '500px';
-        videoElement.style.borderRadius = '8px';
-        videoElement.style.backgroundColor = '#000';
-
-        this.wrapper.appendChild(videoElement);
-    }
-
-    save() {
-        return this.data;
+      };
+      input.click();
+    };
+
+    container.appendChild(button);
+    this.wrapper.appendChild(container);
+  }
+
+  async showPlayer() {
+    this.wrapper.innerHTML = '';
+    if (!this.data.url) return;
+
+    let finalUrl = this.data.url;
+
+    // Auto-resolve if it's a Storage V2 proxy URL
+    if (finalUrl.includes('/storage/posts/') && finalUrl.endsWith('/url')) {
+      try {
+        const res = await fetch(finalUrl);
+        const data = await res.json();
+        if (data && data.url) {
+          finalUrl = data.url;
+        }
+      } catch (err) {
+        console.error('Failed to resolve Video URL:', err);
+      }
     }
 
-    removed() {
-        if (this.data.fileName && this.config.onRemove) {
-            this.config.onRemove(this.data.fileName).catch((err: any) => {
-                console.error('Failed to remove video from storage:', err);
-            });
-        }
+    const videoElement = document.createElement('video');
+    videoElement.src = finalUrl;
+    videoElement.controls = true;
+    videoElement.style.width = '100%';
+    videoElement.style.maxHeight = '500px';
+    videoElement.style.borderRadius = '8px';
+    videoElement.style.backgroundColor = '#000';
+
+    this.wrapper.appendChild(videoElement);
+  }
+
+  save() {
+    return this.data;
+  }
+
+  removed() {
+    if (this.data.fileName && this.config.onRemove) {
+      this.config.onRemove(this.data.fileName).catch((err: any) => {
+        console.error('Failed to remove video from storage:', err);
+      });
     }
+  }
 }
diff --git a/apps/the_monkeys/src/config/editor/editorjs.config.ts b/apps/the_monkeys/src/config/editor/editorjs.config.ts
index 8024fd0b..089f1a42 100644
--- a/apps/the_monkeys/src/config/editor/editorjs.config.ts
+++ b/apps/the_monkeys/src/config/editor/editorjs.config.ts
@@ -1,8 +1,12 @@
 import CustomCodeTool from '@/components/editor/customBlocks/CodeBlock';
 import CustomList from '@/components/editor/customBlocks/CustomListBlock';
 import CustomEmbed from '@/components/editor/customBlocks/EmbedBlock';
+import PdfTool from '@/components/editor/customBlocks/PdfBlock';
+import VideoTool from '@/components/editor/customBlocks/VideoBlock';
 import { API_URL, API_URL_V2 } from '@/constants/api';
 import { storageV2 } from '@/services/storage/storageV2';
+// @ts-ignore
+import AttachesTool from '@editorjs/attaches';
 import Delimiter from '@editorjs/delimiter';
 import { EditorConfig } from '@editorjs/editorjs';
 import Header from '@editorjs/header';
@@ -11,10 +15,6 @@ import List from '@editorjs/list';
 import Paragraph from '@editorjs/paragraph';
 import Quote from '@editorjs/quote';
 import Table from '@editorjs/table';
-// @ts-ignore
-import AttachesTool from '@editorjs/attaches';
-import VideoTool from '@/components/editor/customBlocks/VideoBlock';
-import PdfTool from '@/components/editor/customBlocks/PdfBlock';
 
 export const getEditorConfig = (blogId: string): EditorConfig => ({
   holder: 'editorjs_editor-container',
@@ -63,7 +63,10 @@ export const getEditorConfig = (blogId: string): EditorConfig => ({
           async uploadByFile(file: File) {
             try {
               const response = await storageV2.uploadBlogImage(blogId, file);
-              const urlData = await storageV2.getBlogImageUrl(blogId, response.fileName);
+              const urlData = await storageV2.getBlogImageUrl(
+                blogId,
+                response.fileName
+              );
 
               return {
                 success: 1,
@@ -100,7 +103,10 @@ export const getEditorConfig = (blogId: string): EditorConfig => ({
           async uploadByFile(file: File) {
             try {
               const response = await storageV2.uploadBlogFile(blogId, file);
-              const urlData = await storageV2.getBlogFileUrl(blogId, response.fileName);
+              const urlData = await storageV2.getBlogFileUrl(
+                blogId,
+                response.fileName
+              );
 
               return {
                 success: 1,
@@ -135,7 +141,10 @@ export const getEditorConfig = (blogId: string): EditorConfig => ({
         uploader: async (file: File) => {
           try {
             const response = await storageV2.uploadBlogFile(blogId, file);
-            const urlData = await storageV2.getBlogFileUrl(blogId, response.fileName);
+            const urlData = await storageV2.getBlogFileUrl(
+              blogId,
+              response.fileName
+            );
             return {
               success: 1,
               file: {
@@ -163,7 +172,10 @@ export const getEditorConfig = (blogId: string): EditorConfig => ({
         uploader: async (file: File) => {
           try {
             const response = await storageV2.uploadBlogFile(blogId, file);
-            const urlData = await storageV2.getBlogFileUrl(blogId, response.fileName);
+            const urlData = await storageV2.getBlogFileUrl(
+              blogId,
+              response.fileName
+            );
             return {
               success: 1,
               file: {
diff --git a/apps/the_monkeys/src/config/editor/editorjs_readonly.config.ts b/apps/the_monkeys/src/config/editor/editorjs_readonly.config.ts
index 513b06fc..3d7a31f1 100644
--- a/apps/the_monkeys/src/config/editor/editorjs_readonly.config.ts
+++ b/apps/the_monkeys/src/config/editor/editorjs_readonly.config.ts
@@ -1,7 +1,11 @@
 import CustomCodeTool from '@/components/editor/customBlocks/CodeBlock';
 import CustomList from '@/components/editor/customBlocks/CustomListBlock';
 import CustomEmbed from '@/components/editor/customBlocks/EmbedBlock';
+import PdfTool from '@/components/editor/customBlocks/PdfBlock';
 import TitleBlockTool from '@/components/editor/customBlocks/TitleBlock';
+import VideoTool from '@/components/editor/customBlocks/VideoBlock';
+// @ts-ignore
+import AttachesTool from '@editorjs/attaches';
 import Delimiter from '@editorjs/delimiter';
 import { EditorConfig } from '@editorjs/editorjs';
 import Header from '@editorjs/header';
@@ -10,10 +14,6 @@ import List from '@editorjs/list';
 import Paragraph from '@editorjs/paragraph';
 import Quote from '@editorjs/quote';
 import Table from '@editorjs/table';
-// @ts-ignore
-import AttachesTool from '@editorjs/attaches';
-import VideoTool from '@/components/editor/customBlocks/VideoBlock';
-import PdfTool from '@/components/editor/customBlocks/PdfBlock';
 
 export const editorConfig: EditorConfig = {
   holder: 'editorjs_editor-container',
@@ -66,7 +66,12 @@ export const editorConfig: EditorConfig = {
           const wrapper = super.render();
           const data = (this as any).data;
 
-          if (data && data.file && data.file.url && data.file.url.toLowerCase().endsWith('.pdf')) {
+          if (
+            data &&
+            data.file &&
+            data.file.url &&
+            data.file.url.toLowerCase().endsWith('.pdf')
+          ) {
             // 1. Make the entire card clickable
             wrapper.style.cursor = 'pointer';
             wrapper.onclick = (e: MouseEvent) => {
@@ -78,10 +83,14 @@ export const editorConfig: EditorConfig = {
             };
 
             // 3. Optional: Fix dark mode visibility by ensuring the icon/text color is consistent
-            // The user mentioned the down arrow is not visible in dark mode. 
-            // Since we are making it all clickable, we can just let the default UI be, 
+            // The user mentioned the down arrow is not visible in dark mode.
+            // Since we are making it all clickable, we can just let the default UI be,
             // but let's make sure the background on hover feels interactive.
-            wrapper.classList.add('hover:bg-gray-50', 'dark:hover:bg-zinc-900', 'transition-colors');
+            wrapper.classList.add(
+              'hover:bg-gray-50',
+              'dark:hover:bg-zinc-900',
+              'transition-colors'
+            );
           }
           return wrapper;
         }
diff --git a/apps/the_monkeys/src/services/storage/storageV2.ts b/apps/the_monkeys/src/services/storage/storageV2.ts
index d9dc661d..273b4aeb 100644
--- a/apps/the_monkeys/src/services/storage/storageV2.ts
+++ b/apps/the_monkeys/src/services/storage/storageV2.ts
@@ -1,115 +1,115 @@
 import axiosInstanceV2 from '../api/axiosInstanceV2';
 
 export interface StorageV2FileMeta {
-    object: string;
-    etag: string;
-    size: number;
-    contentType: string;
-    lastModified: string;
-    cacheControl: string;
-    blurhash?: string;
-    width?: number;
-    height?: number;
-    url: string;
+  object: string;
+  etag: string;
+  size: number;
+  contentType: string;
+  lastModified: string;
+  cacheControl: string;
+  blurhash?: string;
+  width?: number;
+  height?: number;
+  url: string;
 }
 
 export interface StorageV2UploadResponse {
-    bucket: string;
-    object: string;
-    fileName: string;
-    etag: string;
-    size: number;
-    contentType: string;
+  bucket: string;
+  object: string;
+  fileName: string;
+  etag: string;
+  size: number;
+  contentType: string;
 }
 
 export interface StorageV2UrlResponse {
-    url: string;
-    expiresIn: number;
+  url: string;
+  expiresIn: number;
 }
 
 export const storageV2 = {
-    // Profile Image
-    uploadProfileImage: async (userId: string, file: File) => {
-        const formData = new FormData();
-        formData.append('profile_pic', file);
+  // Profile Image
+  uploadProfileImage: async (userId: string, file: File) => {
+    const formData = new FormData();
+    formData.append('profile_pic', file);
 
-        const response = await axiosInstanceV2.post<StorageV2UploadResponse>(
-            `/storage/profiles/${userId}/profile`,
-            formData,
-            {
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            }
-        );
-        return response.data;
-    },
+    const response = await axiosInstanceV2.post<StorageV2UploadResponse>(
+      `/storage/profiles/${userId}/profile`,
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      }
+    );
+    return response.data;
+  },
 
-    getProfileImageMeta: async (userId: string) => {
-        const response = await axiosInstanceV2.get<StorageV2FileMeta>(
-            `/storage/profiles/${userId}/profile/meta`
-        );
-        return response.data;
-    },
+  getProfileImageMeta: async (userId: string) => {
+    const response = await axiosInstanceV2.get<StorageV2FileMeta>(
+      `/storage/profiles/${userId}/profile/meta`
+    );
+    return response.data;
+  },
 
-    getProfileImageUrl: async (userId: string) => {
-        const response = await axiosInstanceV2.get<StorageV2UrlResponse>(
-            `/storage/profiles/${userId}/profile/url`
-        );
-        return response.data;
-    },
+  getProfileImageUrl: async (userId: string) => {
+    const response = await axiosInstanceV2.get<StorageV2UrlResponse>(
+      `/storage/profiles/${userId}/profile/url`
+    );
+    return response.data;
+  },
 
-    deleteProfileImage: async (userId: string) => {
-        const response = await axiosInstanceV2.delete(
-            `/storage/profiles/${userId}/profile`
-        );
-        return response.data;
-    },
+  deleteProfileImage: async (userId: string) => {
+    const response = await axiosInstanceV2.delete(
+      `/storage/profiles/${userId}/profile`
+    );
+    return response.data;
+  },
 
-    // Blog Images
-    uploadBlogImage: async (blogId: string, file: File) => {
-        const formData = new FormData();
-        formData.append('file', file);
+  // Blog Images
+  uploadBlogImage: async (blogId: string, file: File) => {
+    const formData = new FormData();
+    formData.append('file', file);
 
-        const response = await axiosInstanceV2.post<StorageV2UploadResponse>(
-            `/storage/posts/${blogId}`,
-            formData,
-            {
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            }
-        );
-        return response.data;
-    },
+    const response = await axiosInstanceV2.post<StorageV2UploadResponse>(
+      `/storage/posts/${blogId}`,
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      }
+    );
+    return response.data;
+  },
 
-    getBlogImageMeta: async (blogId: string, fileName: string) => {
-        const response = await axiosInstanceV2.get<StorageV2FileMeta>(
-            `/storage/posts/${blogId}/${fileName}/meta`
-        );
-        return response.data;
-    },
+  getBlogImageMeta: async (blogId: string, fileName: string) => {
+    const response = await axiosInstanceV2.get<StorageV2FileMeta>(
+      `/storage/posts/${blogId}/${fileName}/meta`
+    );
+    return response.data;
+  },
 
-    getBlogImageUrl: async (blogId: string, fileName: string) => {
-        const response = await axiosInstanceV2.get<StorageV2UrlResponse>(
-            `/storage/posts/${blogId}/${fileName}/url`
-        );
-        return response.data;
-    },
+  getBlogImageUrl: async (blogId: string, fileName: string) => {
+    const response = await axiosInstanceV2.get<StorageV2UrlResponse>(
+      `/storage/posts/${blogId}/${fileName}/url`
+    );
+    return response.data;
+  },
 
-    // Generic File Support (Aliases for clarity)
-    uploadBlogFile: async (blogId: string, file: File) => {
-        return storageV2.uploadBlogImage(blogId, file);
-    },
+  // Generic File Support (Aliases for clarity)
+  uploadBlogFile: async (blogId: string, file: File) => {
+    return storageV2.uploadBlogImage(blogId, file);
+  },
 
-    getBlogFileUrl: async (blogId: string, fileName: string) => {
-        return storageV2.getBlogImageUrl(blogId, fileName);
-    },
+  getBlogFileUrl: async (blogId: string, fileName: string) => {
+    return storageV2.getBlogImageUrl(blogId, fileName);
+  },
 
-    deleteBlogFile: async (blogId: string, fileName: string) => {
-        const response = await axiosInstanceV2.delete(
-            `/storage/posts/${blogId}/${fileName}`
-        );
-        return response.data;
-    },
+  deleteBlogFile: async (blogId: string, fileName: string) => {
+    const response = await axiosInstanceV2.delete(
+      `/storage/posts/${blogId}/${fileName}`
+    );
+    return response.data;
+  },
 };

From c5db294c3935f0b5c48e044e55f20c0abb1c06f7 Mon Sep 17 00:00:00 2001
From: Dave Augustus <devpandey19924u@gmail.com>
Date: Thu, 29 Jan 2026 23:24:58 +0530
Subject: [PATCH 4/9] fix(app): implement ETag cache busting, increase
 timeouts, and add BlurHash support

---
 apps/the_monkeys/package.json                 |  1 +
 .../src/app/api/[[...path]]/route.ts          |  3 +-
 .../src/components/blog/getBlogContent.tsx    | 26 ++++++++++------
 .../cards/author/AuthorInfoCard.tsx           |  6 +++-
 .../cards/author/AuthorProfileCard.tsx        |  6 +++-
 .../layout/navbar/profileDropdown.tsx         |  6 ++--
 .../src/components/profileImage.tsx           | 25 +++++++++++++--
 .../src/components/user/userInfo.tsx          |  6 ++--
 .../src/hooks/profile/useProfileImage.ts      | 16 +++++++---
 .../src/services/api/axiosInstanceV2.ts       |  2 +-
 apps/the_monkeys/src/utils/blurhash.ts        | 31 +++++++++++++++++++
 pnpm-lock.yaml                                |  8 +++++
 12 files changed, 111 insertions(+), 25 deletions(-)
 create mode 100644 apps/the_monkeys/src/utils/blurhash.ts

diff --git a/apps/the_monkeys/package.json b/apps/the_monkeys/package.json
index be1dc69d..6f2f042a 100644
--- a/apps/the_monkeys/package.json
+++ b/apps/the_monkeys/package.json
@@ -30,6 +30,7 @@
     "@tanstack/react-query": "^5.66.3",
     "@the-monkeys/ui": "workspace:*",
     "axios": "^1.6.8",
+    "blurhash": "^2.0.5",
     "bowser": "^2.11.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
diff --git a/apps/the_monkeys/src/app/api/[[...path]]/route.ts b/apps/the_monkeys/src/app/api/[[...path]]/route.ts
index 2555e205..7ddd6560 100644
--- a/apps/the_monkeys/src/app/api/[[...path]]/route.ts
+++ b/apps/the_monkeys/src/app/api/[[...path]]/route.ts
@@ -28,7 +28,8 @@ async function proxyRequest(req: Request, params?: { path: string[] }) {
       cache: 'no-store',
       // @ts-ignore: Required for Node.js bi-directional streaming
       duplex: 'half',
-    });
+      signal: AbortSignal.timeout(60 * 60 * 1000), // 1 hour timeout for large uploads
+    } as any);
 
     const responseHeaders = new Headers(response.headers);
 
diff --git a/apps/the_monkeys/src/components/blog/getBlogContent.tsx b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
index 11d1e2e3..68332cf0 100644
--- a/apps/the_monkeys/src/components/blog/getBlogContent.tsx
+++ b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
@@ -100,6 +100,8 @@ export const BlogDescription = ({
   );
 };
 
+import { decodeBlurHashToDataURL } from '@/utils/blurhash';
+
 export const BlogImage = ({
   title,
   image,
@@ -110,24 +112,24 @@ export const BlogImage = ({
   className?: string;
 }) => {
   const [imgSrc, setImgSrc] = useState<string>(image);
+  const [blurHash, setBlurHash] = useState<string | undefined>(undefined);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const resolveUrl = async () => {
       // Check if image is a Storage V2 API URL (ends in /url)
-      if (
-        image &&
-        image.includes('/storage/posts/') &&
-        image.endsWith('/url')
-      ) {
+      if (image && image.includes('/storage/posts/') && image.endsWith('/url')) {
         try {
-          const res = await fetch(image);
+          // Fetch meta instead of just url to get blurhash
+          const metaUrl = image.replace('/url', '/meta');
+          const res = await fetch(metaUrl);
           const data = await res.json();
-          if (data && data.url) {
-            setImgSrc(data.url);
+          if (data) {
+            if (data.url) setImgSrc(data.url);
+            if (data.blurhash) setBlurHash(data.blurhash);
           }
         } catch (error) {
-          console.error('Failed to resolve V2 Image URL:', error);
+          console.error('Failed to resolve V2 Image Metadata:', error);
         }
       } else {
         setImgSrc(image);
@@ -137,6 +139,8 @@ export const BlogImage = ({
     resolveUrl();
   }, [image]);
 
+  const blurDataURL = decodeBlurHashToDataURL(blurHash);
+
   return (
     <div
       className={twMerge(
@@ -155,10 +159,12 @@ export const BlogImage = ({
         )}
         quality={100}
         priority={false}
+        placeholder={blurDataURL ? 'blur' : 'empty'}
+        blurDataURL={blurDataURL}
         onLoad={() => setIsLoading(false)}
         onError={() => setIsLoading(false)} // Prevent indefinite loading state
       />
-      {isLoading && (
+      {isLoading && !blurDataURL && (
         <div className='absolute inset-0 flex items-center justify-center'>
           <div className='h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-brand-orange'></div>
         </div>
diff --git a/apps/the_monkeys/src/components/cards/author/AuthorInfoCard.tsx b/apps/the_monkeys/src/components/cards/author/AuthorInfoCard.tsx
index cbf2f081..aa20a510 100644
--- a/apps/the_monkeys/src/components/cards/author/AuthorInfoCard.tsx
+++ b/apps/the_monkeys/src/components/cards/author/AuthorInfoCard.tsx
@@ -52,7 +52,11 @@ export const AuthorInfoCard = ({
 
         <div className='flex items-end gap-3'>
           <ProfileFrame className='-mb-[20px] size-[80px] ring-2 ring-foreground-light/50 dark:ring-foreground-dark/50'>
-            <ProfileImage username={userData?.username} />
+            <ProfileImage
+              username={userData?.username}
+              firstName={userData?.first_name}
+              lastName={userData?.last_name}
+            />
           </ProfileFrame>
 
           <div className='flex-1 overflow-hidden'>
diff --git a/apps/the_monkeys/src/components/cards/author/AuthorProfileCard.tsx b/apps/the_monkeys/src/components/cards/author/AuthorProfileCard.tsx
index d3bee3fc..7cfc97ba 100644
--- a/apps/the_monkeys/src/components/cards/author/AuthorProfileCard.tsx
+++ b/apps/the_monkeys/src/components/cards/author/AuthorProfileCard.tsx
@@ -51,7 +51,11 @@ export const AuthorProfileCard = ({
     <div className='flex flex-col gap-[10px]'>
       <div className='flex items-end gap-3 flex-wrap'>
         <ProfileFrame className='group relative size-[80px] ring-2 ring-border-light/40 dark:ring-border-dark/40'>
-          <ProfileImage username={user?.username} />
+          <ProfileImage
+            username={user?.username}
+            firstName={user?.first_name}
+            lastName={user?.last_name}
+          />
           <div className='hidden absolute inset-0 w-full h-full group-hover:flex justify-center items-center bg-black/20 backdrop-blur-sm'>
             <ShowcaseProfileDialog username={user?.username} />
           </div>
diff --git a/apps/the_monkeys/src/components/layout/navbar/profileDropdown.tsx b/apps/the_monkeys/src/components/layout/navbar/profileDropdown.tsx
index 6526b9e3..5cf93fac 100644
--- a/apps/the_monkeys/src/components/layout/navbar/profileDropdown.tsx
+++ b/apps/the_monkeys/src/components/layout/navbar/profileDropdown.tsx
@@ -36,7 +36,8 @@ const ProfileDropdown = ({ session }: { session?: IUser }) => {
           <ProfileFrame className='size-9 border-1 border-border-light/80 dark:border-border-dark/80'>
             <ProfileImage
               username={session?.username}
-              initials={`${session?.first_name?.[0] || ''}${session?.last_name?.[0] || ''}`}
+              firstName={session?.first_name}
+              lastName={session?.last_name}
             />
           </ProfileFrame>
         </div>
@@ -51,7 +52,8 @@ const ProfileDropdown = ({ session }: { session?: IUser }) => {
             <ProfileFrame className='size-10 sm:size-12 shrink-0'>
               <ProfileImage
                 username={session?.username}
-                initials={`${session?.first_name?.[0] || ''}${session?.last_name?.[0] || ''}`}
+                firstName={session?.first_name}
+                lastName={session?.last_name}
               />
             </ProfileFrame>
 
diff --git a/apps/the_monkeys/src/components/profileImage.tsx b/apps/the_monkeys/src/components/profileImage.tsx
index 9920957d..bf5bad02 100644
--- a/apps/the_monkeys/src/components/profileImage.tsx
+++ b/apps/the_monkeys/src/components/profileImage.tsx
@@ -37,28 +37,43 @@ export const ProfileFrame = ({
   );
 };
 
+import { decodeBlurHashToDataURL } from '@/utils/blurhash';
+
 export const ProfileImage = ({
   username,
   initials,
+  firstName,
+  lastName,
 }: {
   username?: string;
   initials?: string;
+  firstName?: string;
+  lastName?: string;
 }) => {
-  const { imageUrl, isLoading, isError } = useProfileImage(username);
+  const { imageUrl, blurHash, isLoading, isError } = useProfileImage(username);
   const [imgLoadError, setImgLoadError] = React.useState(false);
+  const [isImgLoading, setIsImgLoading] = React.useState(true);
 
   // Reset error when url changes
   React.useEffect(() => {
     setImgLoadError(false);
+    setIsImgLoading(true);
   }, [imageUrl]);
 
   // Helper to generate initials if not provided
   const getInitials = () => {
     if (initials) return initials.toUpperCase().slice(0, 2);
+    if (firstName || lastName) {
+      const first = firstName?.[0] || '';
+      const last = lastName?.[0] || '';
+      return (first + last).toUpperCase();
+    }
     if (username) return username.slice(0, 2).toUpperCase();
     return '??';
   };
 
+  const blurDataURL = decodeBlurHashToDataURL(blurHash);
+
   if (isLoading || isError || !imageUrl || imgLoadError)
     return (
       <div className='w-full h-full flex items-center justify-center bg-brand-orange text-white font-bold text-xs sm:text-sm select-none border border-black/5 dark:border-white/5'>
@@ -73,9 +88,15 @@ export const ProfileImage = ({
       title={`Author: ${username}`}
       width={50}
       height={50}
-      className='w-full h-full object-cover'
+      className={twMerge(
+        'w-full h-full object-cover transition-opacity duration-500',
+        isImgLoading && blurDataURL ? 'opacity-0' : 'opacity-100'
+      )}
       loading='lazy'
       quality={100}
+      placeholder={blurDataURL ? 'blur' : 'empty'}
+      blurDataURL={blurDataURL}
+      onLoad={() => setIsImgLoading(false)}
       onError={() => setImgLoadError(true)}
     />
   );
diff --git a/apps/the_monkeys/src/components/user/userInfo.tsx b/apps/the_monkeys/src/components/user/userInfo.tsx
index 3b27b089..9527ab86 100644
--- a/apps/the_monkeys/src/components/user/userInfo.tsx
+++ b/apps/the_monkeys/src/components/user/userInfo.tsx
@@ -28,7 +28,8 @@ export const RecommendedUserCard = ({ id }: { id?: string }) => {
         <ProfileFrame className='mt-1 size-10 sm:size-12 ring-1 ring-border-light/40 dark:ring-border-dark/40'>
           <ProfileImage
             username={userData?.username}
-            initials={`${userData?.first_name?.[0] || ''}${userData?.last_name?.[0] || ''}`}
+            firstName={userData?.first_name}
+            lastName={userData?.last_name}
           />
         </ProfileFrame>
       </Link>
@@ -128,7 +129,8 @@ export const UserInfoCardBlogPage = ({ id }: { id?: string }) => {
         <ProfileFrame className='size-7 shadow-sm'>
           <ProfileImage
             username={userData?.username}
-            initials={`${userData?.first_name?.[0] || ''}${userData?.last_name?.[0] || ''}`}
+            firstName={userData?.first_name}
+            lastName={userData?.last_name}
           />
         </ProfileFrame>
       </div>
diff --git a/apps/the_monkeys/src/hooks/profile/useProfileImage.ts b/apps/the_monkeys/src/hooks/profile/useProfileImage.ts
index 58f524f4..c7154810 100644
--- a/apps/the_monkeys/src/hooks/profile/useProfileImage.ts
+++ b/apps/the_monkeys/src/hooks/profile/useProfileImage.ts
@@ -13,10 +13,15 @@ const useProfileImage = (username: string | undefined) => {
     queryFn: async () => {
       if (!username) return null;
       try {
-        const res = await storageV2.getProfileImageUrl(username);
-        return res.url;
-      } catch (error) {
-        // Fallback or handle 404
+        const res = await storageV2.getProfileImageMeta(username);
+        return {
+          url: res.etag ? `${res.url}?v=${res.etag}` : res.url,
+          blurhash: res.blurhash,
+        };
+      } catch (error: any) {
+        if (error?.response?.status === 404) {
+          return null;
+        }
         throw error;
       }
     },
@@ -25,7 +30,8 @@ const useProfileImage = (username: string | undefined) => {
   });
 
   return {
-    imageUrl: data || '',
+    imageUrl: data?.url || '',
+    blurHash: data?.blurhash || '',
     isLoading,
     isError: isError || !!error,
   };
diff --git a/apps/the_monkeys/src/services/api/axiosInstanceV2.ts b/apps/the_monkeys/src/services/api/axiosInstanceV2.ts
index 26d9253c..a180d6ae 100644
--- a/apps/the_monkeys/src/services/api/axiosInstanceV2.ts
+++ b/apps/the_monkeys/src/services/api/axiosInstanceV2.ts
@@ -5,7 +5,7 @@ import { setupRefreshInterceptor } from './interceptors';
 
 const axiosInstanceV2 = axios.create({
   baseURL: '/api/v2',
-  timeout: 30000,
+  timeout: 3600000,
 });
 
 axiosInstanceV2.interceptors.request.use(
diff --git a/apps/the_monkeys/src/utils/blurhash.ts b/apps/the_monkeys/src/utils/blurhash.ts
new file mode 100644
index 00000000..12334e02
--- /dev/null
+++ b/apps/the_monkeys/src/utils/blurhash.ts
@@ -0,0 +1,31 @@
+import { decode } from 'blurhash';
+
+/**
+ * Decodes a BlurHash string to a base64 DataURL.
+ * This can be used as a placeholder for Next.js Image component.
+ */
+export const decodeBlurHashToDataURL = (
+    blurhash: string | undefined,
+    width: number = 32,
+    height: number = 32
+): string | undefined => {
+    if (!blurhash) return undefined;
+
+    try {
+        const pixels = decode(blurhash, width, height);
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return undefined;
+
+        const imageData = ctx.createImageData(width, height);
+        imageData.data.set(pixels);
+        ctx.putImageData(imageData, 0, 0);
+
+        return canvas.toDataURL();
+    } catch (error) {
+        console.error('Failed to decode blurhash:', error);
+        return undefined;
+    }
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 146a6679..c7a05641 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,9 @@ importers:
       axios:
         specifier: ^1.6.8
         version: 1.8.4
+      blurhash:
+        specifier: ^2.0.5
+        version: 2.0.5
       bowser:
         specifier: ^2.11.0
         version: 2.11.0
@@ -2228,6 +2231,9 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
+  blurhash@2.0.5:
+    resolution: {integrity: sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==}
+
   bowser@2.11.0:
     resolution: {integrity: sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==}
 
@@ -6790,6 +6796,8 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
+  blurhash@2.0.5: {}
+
   bowser@2.11.0: {}
 
   brace-expansion@1.1.11:

From 2d6805df6125832cc30920f1400cc1c2881496e6 Mon Sep 17 00:00:00 2001
From: Dave Augustus <devpandey19924u@gmail.com>
Date: Fri, 30 Jan 2026 10:51:37 +0530
Subject: [PATCH 5/9] feat(ui): premium legal 2.0 design, mobile drawer nav,
 and content refinement (formatted)

---
 apps/the_monkeys/package.json                 |   3 +-
 .../(marketing)/cookies/CookiesContent.tsx    |   4 +-
 .../(marketing)/privacy/PrivacyContent.tsx    |   2 +-
 .../app/(marketing)/terms/TermsContent.tsx    |   6 +-
 apps/the_monkeys/src/app/globals.css          |   8 +-
 apps/the_monkeys/src/components/LegalPage.tsx | 192 +++++++++++++++++-
 .../src/components/blog/getBlogContent.tsx    |   9 +-
 .../src/components/profileImage.tsx           |   3 +-
 apps/the_monkeys/src/markdown/cookies.mdx     |  36 ++--
 apps/the_monkeys/src/markdown/privacy.mdx     |  63 +++---
 apps/the_monkeys/src/markdown/terms.mdx       |  71 ++-----
 apps/the_monkeys/src/utils/blurhash.ts        |  38 ++--
 apps/the_monkeys/src/utils/clientInfo.ts      |   7 +-
 13 files changed, 283 insertions(+), 159 deletions(-)

diff --git a/apps/the_monkeys/package.json b/apps/the_monkeys/package.json
index 6f2f042a..02744bf7 100644
--- a/apps/the_monkeys/package.json
+++ b/apps/the_monkeys/package.json
@@ -44,7 +44,6 @@
     "next": "^14.2.13",
     "next-themes": "^0.2.1",
     "prismjs": "^1.30.0",
-    "public-ip": "^7.0.1",
     "react": "^18",
     "react-dom": "^18",
     "react-dropzone": "^14.2.3",
@@ -90,4 +89,4 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^2.1.8"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/the_monkeys/src/app/(marketing)/cookies/CookiesContent.tsx b/apps/the_monkeys/src/app/(marketing)/cookies/CookiesContent.tsx
index e5568dad..ca508ac0 100644
--- a/apps/the_monkeys/src/app/(marketing)/cookies/CookiesContent.tsx
+++ b/apps/the_monkeys/src/app/(marketing)/cookies/CookiesContent.tsx
@@ -8,8 +8,8 @@ export const CookiesContent = () => {
   return (
     <MDXProvider>
       <LegalPage
-        title='Cookies Policy'
-        date='01-12-2024'
+        title='Cookie Policy'
+        date='30-01-2026'
         content={<Content />}
       />
     </MDXProvider>
diff --git a/apps/the_monkeys/src/app/(marketing)/privacy/PrivacyContent.tsx b/apps/the_monkeys/src/app/(marketing)/privacy/PrivacyContent.tsx
index 315435c4..b099caed 100644
--- a/apps/the_monkeys/src/app/(marketing)/privacy/PrivacyContent.tsx
+++ b/apps/the_monkeys/src/app/(marketing)/privacy/PrivacyContent.tsx
@@ -9,7 +9,7 @@ export const PrivacyContent = () => {
     <MDXProvider>
       <LegalPage
         title='Privacy Policy'
-        date='01-12-2024'
+        date='30-01-2026'
         content={<Content />}
       />
     </MDXProvider>
diff --git a/apps/the_monkeys/src/app/(marketing)/terms/TermsContent.tsx b/apps/the_monkeys/src/app/(marketing)/terms/TermsContent.tsx
index e2b6cac8..814605a2 100644
--- a/apps/the_monkeys/src/app/(marketing)/terms/TermsContent.tsx
+++ b/apps/the_monkeys/src/app/(marketing)/terms/TermsContent.tsx
@@ -7,7 +7,11 @@ import { MDXProvider } from '@mdx-js/react';
 export const TermsContent = () => {
   return (
     <MDXProvider>
-      <LegalPage title='Terms of Use' date='01-12-2024' content={<Content />} />
+      <LegalPage
+        title='Terms of Service'
+        date='30-01-2026'
+        content={<Content />}
+      />
     </MDXProvider>
   );
 };
diff --git a/apps/the_monkeys/src/app/globals.css b/apps/the_monkeys/src/app/globals.css
index 9f97bc65..38a86f01 100644
--- a/apps/the_monkeys/src/app/globals.css
+++ b/apps/the_monkeys/src/app/globals.css
@@ -783,13 +783,13 @@ li.cdx-list__item {
 }
 
 /* Ensure the plus/settings buttons are visible */
-.ce-toolbar__plus, 
+.ce-toolbar__plus,
 .ce-toolbar__settings-btn {
-    display: inline-flex !important;
-    opacity: 1 !important;
+  display: inline-flex !important;
+  opacity: 1 !important;
 }
 
 /* Ensure hover state is visible */
 .ce-block:hover .ce-toolbar__actions {
-    opacity: 1 !important;
+  opacity: 1 !important;
 }
diff --git a/apps/the_monkeys/src/components/LegalPage.tsx b/apps/the_monkeys/src/components/LegalPage.tsx
index 8a9b633f..f7e7c8d2 100644
--- a/apps/the_monkeys/src/components/LegalPage.tsx
+++ b/apps/the_monkeys/src/components/LegalPage.tsx
@@ -1,5 +1,18 @@
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { cn } from '@/lib/utils';
+import { RiCloseLine, RiMenu4Line } from '@remixicon/react';
+
 import Container from './layout/Container';
-import { PageHeader, PageHeading, PageSubheading } from './layout/pageHeading';
+
+const navLinks = [
+  { name: 'Terms of Service', href: '/terms' },
+  { name: 'Privacy Policy', href: '/privacy' },
+  { name: 'Cookie Policy', href: '/cookies' },
+];
 
 const LegalPage = ({
   title,
@@ -10,18 +23,177 @@ const LegalPage = ({
   date: string;
   content: React.ReactNode;
 }) => {
+  const pathname = usePathname();
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const totalScroll =
+        document.documentElement.scrollHeight - window.innerHeight;
+      const currentScroll = window.scrollY;
+      setScrollProgress(currentScroll / totalScroll);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Prevent scroll when drawer is open
+  useEffect(() => {
+    if (isDrawerOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+  }, [isDrawerOpen]);
+
   return (
-    <Container className='px-4 max-w-4xl min-h-[800px] sm:w-4/5 w-full space-y-6'>
-      <PageHeader>
-        <PageHeading heading={title} />
-        <PageSubheading
-          subheading={date}
-          className='font-medium !text-base text-brand-orange !opacity-100'
+    <div className='relative min-h-screen bg-background-light dark:bg-background-dark'>
+      {/* Scroll Progress Bar */}
+      <div
+        className='fixed top-0 left-0 z-[60] h-1.5 w-full bg-brand-orange origin-left transition-transform duration-75 ease-out'
+        style={{ transform: `scaleX(${scrollProgress})` }}
+      />
+
+      {/* Mobile Floating Menu Button */}
+      <button
+        onClick={() => setIsDrawerOpen(true)}
+        className='lg:hidden fixed bottom-8 right-8 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange text-white shadow-2xl shadow-brand-orange/40 transition-transform active:scale-90 animate-appear-up'
+        aria-label='Legal Menu'
+      >
+        <RiMenu4Line className='h-6 w-6' />
+      </button>
+
+      {/* Mobile Navigation Drawer */}
+      <div
+        className={cn(
+          'fixed inset-0 z-[100] transition-opacity duration-300 lg:hidden',
+          isDrawerOpen ? 'opacity-100' : 'pointer-events-none opacity-0'
+        )}
+      >
+        <div
+          className='absolute inset-0 bg-background-dark/60 backdrop-blur-sm'
+          onClick={() => setIsDrawerOpen(false)}
         />
-      </PageHeader>
+        <aside
+          className={cn(
+            'absolute right-0 top-0 h-full w-[80%] max-w-sm bg-white dark:bg-foreground-dark p-8 shadow-2xl transition-transform duration-500 ease-out',
+            isDrawerOpen ? 'translate-x-0' : 'translate-x-full'
+          )}
+        >
+          <div className='flex items-center justify-between mb-12'>
+            <h3 className='text-xs font-bold uppercase tracking-widest text-muted-foreground'>
+              Legal Navigation
+            </h3>
+            <button
+              onClick={() => setIsDrawerOpen(false)}
+              className='p-2 rounded-xl bg-background-light dark:bg-background-dark/50'
+            >
+              <RiCloseLine className='h-5 w-5' />
+            </button>
+          </div>
+
+          <nav className='flex flex-col space-y-3'>
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setIsDrawerOpen(false)}
+                className={cn(
+                  'px-6 py-4 rounded-2xl text-lg font-bold transition-all duration-300 border-1',
+                  pathname === link.href
+                    ? 'bg-brand-orange text-white border-brand-orange shadow-xl shadow-brand-orange/20'
+                    : 'text-text-light/60 dark:text-text-dark/60 border-transparent bg-background-light/50 dark:bg-background-dark/30'
+                )}
+              >
+                {link.name}
+              </Link>
+            ))}
+          </nav>
+        </aside>
+      </div>
+
+      <Container className='py-20 px-6 sm:px-10 lg:px-16'>
+        <div className='flex flex-col lg:flex-row gap-12 lg:items-start'>
+          {/* Desktop Sidebar Navigation */}
+          <aside className='hidden lg:block lg:w-72 lg:sticky lg:top-28 space-y-8 animate-appear-up'>
+            <h3 className='text-xs font-bold uppercase tracking-widest text-muted-foreground mb-6'>
+              Legal Documents
+            </h3>
+            <nav className='flex flex-col space-y-1 text-sm font-medium'>
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={cn(
+                    'px-4 py-3 rounded-xl transition-all duration-300 border-1',
+                    pathname === link.href
+                      ? 'bg-brand-orange text-white border-brand-orange shadow-lg shadow-brand-orange/20'
+                      : 'text-text-light/60 dark:text-text-dark/60 hover:text-brand-orange border-transparent hover:bg-white dark:hover:bg-foreground-dark/30 hover:shadow-sm'
+                  )}
+                >
+                  {link.name}
+                </Link>
+              ))}
+            </nav>
+          </aside>
+
+          {/* Main Content Area */}
+          <main className='flex-grow max-w-4xl animate-appear-up delay-100'>
+            <div className='relative overflow-hidden group'>
+              {/* Glassmorphism Card */}
+              <div className='absolute inset-0 bg-white/40 dark:bg-foreground-dark/40 backdrop-blur-xl rounded-[2rem] border border-white/20 dark:border-white/5 shadow-2xl transition-all duration-500 group-hover:shadow-brand-orange/5' />
+
+              <div className='relative p-6 sm:p-12 lg:p-16 space-y-10 sm:space-y-12'>
+                {/* Header Section */}
+                <header className='space-y-6'>
+                  <h1 className='text-3xl sm:text-6xl font-black tracking-tight bg-clip-text text-transparent bg-gradient-to-br from-text-light to-text-light/60 dark:from-text-dark dark:to-text-dark/40'>
+                    {title}
+                  </h1>
+                  <div className='flex flex-wrap items-center gap-3 sm:gap-4 text-[10px] sm:text-xs font-bold uppercase tracking-widest'>
+                    <div className='flex items-center gap-2 bg-brand-orange/10 text-brand-orange px-3 py-1.5 rounded-full border border-brand-orange/20'>
+                      <span className='w-2 h-2 rounded-full bg-brand-orange animate-pulse' />
+                      Effective Version
+                    </div>
+                    <span className='text-muted-foreground'>
+                      Last Updated: {date}
+                    </span>
+                  </div>
+                </header>
+
+                {/* Content with Enhanced Typography */}
+                <div
+                  className='prose prose-base sm:prose-lg dark:prose-invert max-w-none 
+                  prose-headings:font-black prose-headings:tracking-tight
+                  prose-p:text-text-light/80 dark:prose-p:text-text-dark/80 prose-p:leading-relaxed
+                  prose-strong:text-brand-orange
+                  prose-li:text-text-light/70 dark:prose-li:text-text-dark/70
+                  prose-hr:border-border-light/50 dark:prose-hr:border-border-dark/50
+                '
+                >
+                  {content}
+                </div>
 
-      <div className='text-sm sm:text-base text-justify'>{content}</div>
-    </Container>
+                <footer className='pt-12 border-t border-border-light/20 dark:border-border-dark/20 text-center'>
+                  <p className='text-sm text-muted-foreground'>
+                    Questions about our legal terms?{' '}
+                    <br className='sm:hidden' />
+                    Reach out at{' '}
+                    <Link
+                      href='mailto:monkeys.admin@monkeys.com.co'
+                      className='text-brand-orange font-bold hover:underline'
+                    >
+                      monkeys.admin@monkeys.com.co
+                    </Link>
+                  </p>
+                </footer>
+              </div>
+            </div>
+          </main>
+        </div>
+      </Container>
+    </div>
   );
 };
 
diff --git a/apps/the_monkeys/src/components/blog/getBlogContent.tsx b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
index 68332cf0..7fb38437 100644
--- a/apps/the_monkeys/src/components/blog/getBlogContent.tsx
+++ b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 
 import { Blog } from '@/services/blog/blogTypes';
+import { decodeBlurHashToDataURL } from '@/utils/blurhash';
 import { purifyHTMLString } from '@/utils/purifyHTML';
 import { twMerge } from 'tailwind-merge';
 
@@ -100,8 +101,6 @@ export const BlogDescription = ({
   );
 };
 
-import { decodeBlurHashToDataURL } from '@/utils/blurhash';
-
 export const BlogImage = ({
   title,
   image,
@@ -118,7 +117,11 @@ export const BlogImage = ({
   useEffect(() => {
     const resolveUrl = async () => {
       // Check if image is a Storage V2 API URL (ends in /url)
-      if (image && image.includes('/storage/posts/') && image.endsWith('/url')) {
+      if (
+        image &&
+        image.includes('/storage/posts/') &&
+        image.endsWith('/url')
+      ) {
         try {
           // Fetch meta instead of just url to get blurhash
           const metaUrl = image.replace('/url', '/meta');
diff --git a/apps/the_monkeys/src/components/profileImage.tsx b/apps/the_monkeys/src/components/profileImage.tsx
index bf5bad02..a891b627 100644
--- a/apps/the_monkeys/src/components/profileImage.tsx
+++ b/apps/the_monkeys/src/components/profileImage.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import Image from 'next/image';
 
 import useProfileImage from '@/hooks/profile/useProfileImage';
+import { decodeBlurHashToDataURL } from '@/utils/blurhash';
 import { twMerge } from 'tailwind-merge';
 
 export const DefaultProfile = () => {
@@ -37,8 +38,6 @@ export const ProfileFrame = ({
   );
 };
 
-import { decodeBlurHashToDataURL } from '@/utils/blurhash';
-
 export const ProfileImage = ({
   username,
   initials,
diff --git a/apps/the_monkeys/src/markdown/cookies.mdx b/apps/the_monkeys/src/markdown/cookies.mdx
index fb4232af..6411993e 100644
--- a/apps/the_monkeys/src/markdown/cookies.mdx
+++ b/apps/the_monkeys/src/markdown/cookies.mdx
@@ -1,45 +1,37 @@
-Welcome to Monkeys! We are dedicated to fostering a secure and transparent environment for our users.
-
-Our Cookie Policy explains how Monkeys ("we", "us", or "our") uses cookies and similar tracking technologies when you visit our website.
+Cookies might sound like something you'd find in a bakery, but on the internet, they're just small files that help us remember who you are and how you like to use our site.
 
 <br />
 
 ## 1. What are cookies?
 
-Cookies are small text files that are stored on your device when you visit a website. They are widely used to make websites work more efficiently, as well as to provide information to the owners of the site.
+When you visit Monkeys, we put a tiny text file on your device. This helps the site load faster next time and remembers things like whether you prefer dark mode or light mode.
 
 <br />
 
-## 2. How do we use cookies?
-
-**Essential Cookies**: These cookies are necessary for the website to function properly. They enable basic functions like page navigation and access to secure areas of the website. Our website cannot function properly without these cookies.
+## 2. How we use them
 
-**Analytics Cookies**: These cookies allow us to analyze how visitors use our website, so we can measure and improve the performance of our site.
+We use a few different types of cookies:
 
-**Advertising Cookies**: These cookies are used to personalize the advertising content that you see on our website. We may use third-party advertising companies to serve ads when you visit our website. These companies may use cookies to collect information about your visits to this and other websites in order to provide relevant advertisements about goods and services that may interest you.
+- **Essential Cookies**: These are the "must-haves". Without them, you wouldn't be able to log in or use the basic features of the site.
+- **Analytics Cookies**: These help us see which parts of the site are popular and which parts are confusing, so we can keep improving.
+- **Preferences**: To remember your settings so you don't have to keep choosing them every time you visit.
 
 <br />
 
-## 3. Your Choices Regarding Cookies
+## 3. Your control
 
-You can control and/or delete cookies as you wish. You can delete all cookies that are already on your computer, and you can set most browsers to prevent them from being placed. If you do this, however, you may have to manually adjust some preferences every time you visit a site, and some services and functionalities may not work.
+You're the boss of your browser. Most browsers let you block or delete cookies in the settings. Just keep in mind that if you turn them off completely, Monkeys might not work as smoothly as you'd like.
 
 <br />
 
-## 4. Changes to This Cookie Policy
-
-In our commitment to transparency, any revisions to our Privacy Policy will be promptly communicated.
+## 4. Updates
 
-We pledge to update this document as necessary, ensuring that users remain informed about our data practices and privacy protocols.
-
-Any alterations will be duly reflected on this page, providing clarity and accountability to our valued community.
+Digital tech moves fast, so we might update this policy occasionally. We'll always keep this page updated so you know exactly what's happening.
 
 <br />
 
-## 5. Contact Us
-
-We welcome your questions and feedback.
+## 5. Get in touch
 
-If you have any questions about these policies, please contact us.
+If you have any questions about our use of cookies or anything else, we're here to help.
 
-Contact: **mail.themonkeys.life@gmail.com**
+Contact us at: **monkeys.admin@monkeys.com.co**
diff --git a/apps/the_monkeys/src/markdown/privacy.mdx b/apps/the_monkeys/src/markdown/privacy.mdx
index 880d15da..88a9d4b7 100644
--- a/apps/the_monkeys/src/markdown/privacy.mdx
+++ b/apps/the_monkeys/src/markdown/privacy.mdx
@@ -1,67 +1,54 @@
-Welcome to Monkeys! We are dedicated to fostering a secure and transparent environment for our users.
-
-This Privacy Policy serves to elucidate the nature of information we collect, how it is utilized, and the comprehensive measures we undertake to safeguard your privacy.
-
-Our Terms and Conditions ("Terms") govern all use of our Service and together with the Privacy Policy constitutes your agreement with us ("Agreement").
+At Monkeys, we believe in being open and honest about how we handle your data. We're committed to keeping your information safe and respecting your privacy.
 
 <br />
 
-## 1. Information Collection and Use
-
-In our pursuit of providing optimal services, we gather various types of data to enhance user experience.
+## 1. What We Collect
 
-This encompasses information furnished directly by you, such as personal identifiers (e.g., name, email) when registering an account or engaging in interactions like leaving comments.
+To make Monkeys work for you, we collect a few pieces of information:
 
-Additionally, we collate data derived from your utilization of our services, including device details and browsing preferences, to refine our offerings.
+- **Things you tell us**: Like your name and email when you sign up.
+- **How you use the site**: We look at things like which articles you read and how you navigate the site so we can make it better.
+- **Tech details**: Basic stuff like your IP address (to help with security) and what kind of device you're using.
 
 <br />
 
-## 2. How We Use Your Information
+## 2. How We Use It
 
-The information we gather serves multifaceted purposes aimed at bolstering our service provisions.
+We use your info to:
 
-Beyond facilitating the core functionalities of our platform, we leverage this data to continually refine and innovate our offerings. Moreover, we employ it to tailor your experience, ensuring personalized content delivery such as customized search results and relevant articles.
+- **Run the site**: So you can log in, post articles, and comment.
+- **Personalize your experience**: To show you content we think you'll actually like.
+- **Make things better**: Your feedback and usage patterns help us build new features.
+- **Security**: To keep out the bad actors and protect our community.
 
 <br />
 
-## 3. Information Sharing
+## 3. Sharing your Data
 
-At Monkeys, preserving your privacy is paramount.
+We don't share your data with anyone, period. We definitely don't sell it for profit. The only way your data moves is if:
 
-Consequently, we adhere to stringent protocols regarding the sharing of personal information. Such data is never disclosed to external entities except under explicit user consent or in compliance with legal obligations.
+- **You Choose to Integrate**: If you connect third-party apps, you are in total control. You decide which apps can access your data, and we ensure they only see what's necessary, never your entire profile.
+- **Legal Requirements**: We only disclose information if we are legally compelled by a formal court order.
 
 <br />
 
-## 4. Security
+## 4. Private Infrastructure
 
-Safeguarding the integrity and confidentiality of user data is central to our operational ethos. We maintain robust security frameworks to thwart unauthorized access, alteration, or dissemination of information.
+Unlike most platforms, we don't rely on the public cloud.
 
-Our unwavering commitment extends to fortifying both Monkeys infrastructure and the privacy rights of our esteemed users.
+- **Monkeys-Hosted Datacenter**: All your data is stored and processed in our own private, self-hosted datacenter.
+- **Our Hardware, Your Privacy**: By owning and managing our own hardware (instead of renting space from a cloud provider), we ensure your data stays secret and is never subjected to third-party oversight.
 
 <br />
 
-## 5. Retention of Data
+## 5. Your Choices
 
-We will retain your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
-
-We will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period, except when this data is used to strengthen the security or to improve the functionality of our Service, or we are legally obligated to retain this data for longer time periods.
+You're in control. You can update your profile info anytime. If you want to delete your data or your account, just let us know.
 
 <br />
 
-## 6. Changes to This Privacy Policy
-
-In our commitment to transparency, any revisions to our Privacy Policy will be promptly communicated.
-
-We pledge to update this document as necessary, ensuring that users remain informed about our data practices and privacy protocols.
-
-Any alterations will be duly reflected on this page, providing clarity and accountability to our valued community.
-
-<br />
-
-## 7. Contact Us
-
-We welcome your questions and feedback.
+## 6. Questions?
 
-If you have any questions about these policies, please contact us.
+If you're ever worried about your privacy or just want to chat about how we handle data, reach out!
 
-Contact: **mail.themonkeys.life@gmail.com**
+Contact us at: **monkeys.admin@monkeys.com.co**
diff --git a/apps/the_monkeys/src/markdown/terms.mdx b/apps/the_monkeys/src/markdown/terms.mdx
index 3ffe6c26..f864cd5d 100644
--- a/apps/the_monkeys/src/markdown/terms.mdx
+++ b/apps/the_monkeys/src/markdown/terms.mdx
@@ -1,79 +1,44 @@
-Welcome to Monkeys (“Company”, “we”, “our”, “us”)! As you have just clicked our Terms of Use, please pause, grab a cup of coffee and carefully read the following points. It will take you approximately 15 minutes.
-
-Our Privacy Policy also governs your use of our Service and explains how we collect, safeguard and disclose information that results from your use of our web pages.
-
-Your agreement with us includes these Terms and our Privacy Policy (“Agreements”). You acknowledge that you have read and understood Agreements, and agree to be bound of them.
+Welcome to Monkeys! We're glad you're here. This page is basically our "house rules" to make sure everyone has a great experience. By using Monkeys, you're agreeing to these rules, so please take a quick look.
 
 <br />
 
-## 1. Acceptance of Terms
+## 1. Our Agreement
 
-By using our website, you agree to the Terms of Use. If you do not agree to these terms, you should not use this site. Your continued use of the site after any modifications to these terms constitutes acceptance of those changes.
+When you use our website, you're agreeing to these terms. If you don't agree with them, that's okay, but you shouldn't use the site. We might update these rules from time to time, and continuing to use Monkeys means you're okay with the changes.
 
 <br />
 
-## 2. License to Use Site
-
-Monkeys grants you a limited, revocable, non-exclusive license to access and make personal use of this site.
+## 2. Your Content
 
-This license does not include any resale or commercial use of the site or its contents; any derivative use of this site or its contents; any downloading or copying of account information for the benefit of another merchant; or any use of data mining, robots, or similar data gathering and extraction tools.
-
-You may not frame or utilize framing techniques to enclose any trademark, logo, or other proprietary information (including images, text, page layout, or form) of Monkeys without express written consent. Any unauthorized use terminates the permission or license granted by Monkeys.
+You own what you post on Monkeys. However, by sharing it here, you're giving us permission to show it to the world. You're also responsible for making sure you actually have the rights to what you're posting and that it doesn't hurt anyone or break any laws.
 
 <br />
 
-## 3. User Responsibilities
+## 3. Community Rules
 
-Users are solely responsible for any content they post on Monkeys. By posting content, you warrant and represent that you own or otherwise control all of the rights to your content and that the content is accurate, does not violate these Terms of Use, and will not cause injury to any person or entity.
+We want Monkeys to be a positive place. This means:
 
-We reserve the right to remove any content that we believe violates these Terms of Use or is otherwise objectionable, without prior notice and at our sole discretion.
+- **No illegal stuff**: Don't use our site for anything against the law.
+- **Respect others**: Don't be a bully, and don't share things that are harmful or fraudulent.
+- **Protect children**: Don't share anything that exploits or harms minors.
+- **Don't break the tech**: Don't try to hack us or use automated tools to scrape our data without permission.
 
 <br />
 
-## 4. Intellectual Property
-
-All content on this site, including text, graphics, logos, images, audio clips, video clips, digital downloads, data compilations, and software, is the property of Monkeys or its content suppliers and is protected by international copyright laws.
+## 4. Our Property
 
-The compilation of all content on this site is the exclusive property of Monkeys and is protected by international copyright laws. All software used on this site is the property of Monkeys or its software suppliers and is protected by international copyright laws.
+The Monkeys logo, our code, and the overall design belong to us. The articles and content belong to the people who wrote them. Please don't copy our stuff or use it for commercial purposes without asking first.
 
 <br />
 
-## 5. Prohibited Uses
-
-You may use Service only for lawful purposes and in accordance with Terms. You agree not to use Service:
+## 5. Ending our Relationship
 
-In any way that violates any applicable national or international law or regulation.
-
-For the purpose of exploiting, harming, or attempting to exploit or harm minors in any way by exposing them to inappropriate content or otherwise.
-
-In any way that infringes upon the rights of others, or in any way is illegal, threatening, fraudulent, or harmful, or in connection with any unlawful, illegal, fraudulent, or harmful purpose or activity.
-
-To engage in any other conduct that restricts or inhibits anyone’s use or enjoyment of Service, or which, as determined by us, may harm or offend Company or users of Service or expose them to liability.
+We hope you stay forever, but we can't always guarantee that. If someone breaks these rules, we might have to suspend or close their account. If you want to leave, you can stop using the service at any time.
 
 <br />
 
-## 6. Termination
-
-We may terminate or suspend your account and bar access to Service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of Terms.
-
-If you wish to terminate your account, you may simply discontinue using Service.
-
-All provisions of Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.
-
-<br />
-
-## 7. Changes to Terms of Use
-
-We reserve the right to update or modify these Terms of Use at any time without prior notice. It is your responsibility to review these Terms of Use periodically for changes.
-
-Your continued use of the site following the posting of any changes to these Terms of Use constitutes acceptance of those changes.
-
-<br />
-
-## 8. Contact Us
-
-We welcome your questions and feedback.
+## 6. Keeping it Simple
 
-If you have any questions about these policies, please contact us.
+We tried to keep this easy to read. If you have any questions or if something isn't clear, we'd love to hear from you.
 
-Contact: **mail.themonkeys.life@gmail.com**
+Contact us at: **monkeys.admin@monkeys.com.co**
diff --git a/apps/the_monkeys/src/utils/blurhash.ts b/apps/the_monkeys/src/utils/blurhash.ts
index 12334e02..d76e99c3 100644
--- a/apps/the_monkeys/src/utils/blurhash.ts
+++ b/apps/the_monkeys/src/utils/blurhash.ts
@@ -5,27 +5,27 @@ import { decode } from 'blurhash';
  * This can be used as a placeholder for Next.js Image component.
  */
 export const decodeBlurHashToDataURL = (
-    blurhash: string | undefined,
-    width: number = 32,
-    height: number = 32
+  blurhash: string | undefined,
+  width: number = 32,
+  height: number = 32
 ): string | undefined => {
-    if (!blurhash) return undefined;
+  if (!blurhash) return undefined;
 
-    try {
-        const pixels = decode(blurhash, width, height);
-        const canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return undefined;
+  try {
+    const pixels = decode(blurhash, width, height);
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return undefined;
 
-        const imageData = ctx.createImageData(width, height);
-        imageData.data.set(pixels);
-        ctx.putImageData(imageData, 0, 0);
+    const imageData = ctx.createImageData(width, height);
+    imageData.data.set(pixels);
+    ctx.putImageData(imageData, 0, 0);
 
-        return canvas.toDataURL();
-    } catch (error) {
-        console.error('Failed to decode blurhash:', error);
-        return undefined;
-    }
+    return canvas.toDataURL();
+  } catch (error) {
+    console.error('Failed to decode blurhash:', error);
+    return undefined;
+  }
 };
diff --git a/apps/the_monkeys/src/utils/clientInfo.ts b/apps/the_monkeys/src/utils/clientInfo.ts
index 8e11be7f..63df8696 100644
--- a/apps/the_monkeys/src/utils/clientInfo.ts
+++ b/apps/the_monkeys/src/utils/clientInfo.ts
@@ -1,5 +1,4 @@
 import Bowser from 'bowser';
-import { publicIpv4 } from 'public-ip';
 
 export interface ClientInfoData {
   ip: string;
@@ -45,7 +44,11 @@ class ClientInfo {
       try {
         // Get public IP address with timeout
         this.ip = await Promise.race([
-          publicIpv4(),
+          (async () => {
+            const res = await fetch('https://api.ipify.org?format=json');
+            const data = await res.json();
+            return data.ip || 'unknown';
+          })(),
           new Promise<string>((resolve) =>
             setTimeout(() => resolve('unknown'), 5000)
           ),

From b879beb21c942275c216eca271d0174bfd0dc28f Mon Sep 17 00:00:00 2001
From: Dave Augustus <devpandey19924u@gmail.com>
Date: Fri, 30 Jan 2026 11:05:43 +0530
Subject: [PATCH 6/9] chore: update pnpm-lock.yaml to match package.json

---
 pnpm-lock.yaml | 245 +------------------------------------------------
 1 file changed, 3 insertions(+), 242 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c7a05641..b85d3b7c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -126,9 +126,6 @@ importers:
       prismjs:
         specifier: ^1.30.0
         version: 1.30.0
-      public-ip:
-        specifier: ^7.0.1
-        version: 7.0.1
       react:
         specifier: ^18
         version: 18.3.1
@@ -1010,9 +1007,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
-  '@leichtgewicht/ip-codec@2.0.5':
-    resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
-
   '@mdx-js/loader@3.1.0':
     resolution: {integrity: sha512-xU/lwKdOyfXtQGqn3VnJjlDrmKXEvMi1mgYxVmukEUtVycIz1nh7oQ40bKTd4cA7rLStqu0740pnhGYxGoqsCg==}
     peerDependencies:
@@ -1669,10 +1663,6 @@ packages:
   '@rushstack/eslint-patch@1.11.0':
     resolution: {integrity: sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ==}
 
-  '@sindresorhus/is@5.6.0':
-    resolution: {integrity: sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==}
-    engines: {node: '>=14.16'}
-
   '@socket.io/component-emitter@3.1.2':
     resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
 
@@ -1682,10 +1672,6 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
-  '@szmarczak/http-timer@5.0.1':
-    resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
-    engines: {node: '>=14.16'}
-
   '@tanstack/query-core@5.69.0':
     resolution: {integrity: sha512-Kn410jq6vs1P8Nm+ZsRj9H+U3C0kjuEkYLxbiCyn3MDEiYor1j2DGVULqAz62SLZtUZ/e9Xt6xMXiJ3NJ65WyQ==}
 
@@ -1875,9 +1861,6 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
-  '@types/http-cache-semantics@4.0.4':
-    resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
-
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
@@ -2260,14 +2243,6 @@ packages:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  cacheable-lookup@7.0.0:
-    resolution: {integrity: sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==}
-    engines: {node: '>=14.16'}
-
-  cacheable-request@10.2.14:
-    resolution: {integrity: sha512-zkDT5WAF4hSSoUgyfg5tFIxz8XQK+25W/TLVojJTMKBaxevLBBtLxgqguAuVQB8PVW79FVjHcU+GJ9tVbDZ9mQ==}
-    engines: {node: '>=14.16'}
-
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -2331,10 +2306,6 @@ packages:
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
-  clone-regexp@3.0.0:
-    resolution: {integrity: sha512-ujdnoq2Kxb8s3ItNBtnYeXdm07FcU0u8ARAT1lQ2YdMwQC+cdiXX8KoqMVuglztILivceTtp4ivqGSmEmhBUJw==}
-    engines: {node: '>=12'}
-
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -2373,10 +2344,6 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  convert-hrtime@5.0.0:
-    resolution: {integrity: sha512-lOETlkIeYSJWcbbcvjRKGxVMXJR+8+OQb/mTPbA4ObPMytYIsUbuOE0Jzy60hjARYszq1id0j8KgVhC+WGZVTg==}
-    engines: {node: '>=12'}
-
   convert-source-map@1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
 
@@ -2598,10 +2565,6 @@ packages:
   decode-named-character-reference@1.1.0:
     resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==}
 
-  decompress-response@6.0.0:
-    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
-    engines: {node: '>=10'}
-
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
@@ -2609,10 +2572,6 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  defer-to-connect@2.0.1:
-    resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
-    engines: {node: '>=10'}
-
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
@@ -2652,14 +2611,6 @@ packages:
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  dns-packet@5.6.1:
-    resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
-    engines: {node: '>=6'}
-
-  dns-socket@4.2.2:
-    resolution: {integrity: sha512-BDeBd8najI4/lS00HSKpdFia+OvUMytaVjfzR9n5Lq8MlZRSvtbI+uLtx1+XmQFls5wFU9dssccTmQQ6nfpjdg==}
-    engines: {node: '>=6'}
-
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -3012,10 +2963,6 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
-  form-data-encoder@2.1.4:
-    resolution: {integrity: sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==}
-    engines: {node: '>= 14.17'}
-
   form-data@4.0.2:
     resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
     engines: {node: '>= 6'}
@@ -3034,10 +2981,6 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  function-timeout@0.1.1:
-    resolution: {integrity: sha512-0NVVC0TaP7dSTvn1yMiy6d6Q8gifzbvQafO46RtLG/kHJUBNd+pVRGOBoK44wNBvtSPUJRfdVvkFdD3p0xvyZg==}
-    engines: {node: '>=14.16'}
-
   function.prototype.name@1.1.8:
     resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
     engines: {node: '>= 0.4'}
@@ -3061,10 +3004,6 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
-  get-stream@6.0.1:
-    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
-    engines: {node: '>=10'}
-
   get-symbol-description@1.1.0:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
@@ -3116,10 +3055,6 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
-  got@13.0.0:
-    resolution: {integrity: sha512-XfBk1CxOOScDcMr9O1yKkNaQyy865NbYs+F7dr4H0LZMVgCj2Le59k6PqbNHoL5ToeaEQUYh6c6yMfVcc6SJxA==}
-    engines: {node: '>=16'}
-
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -3172,9 +3107,6 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
-  http-cache-semantics@4.1.1:
-    resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
-
   http-parser-js@0.5.9:
     resolution: {integrity: sha512-n1XsPy3rXVxlqxVioEWdC+0+M+SQw0DpJynwtOPo1X+ZlvdzTLtDBIJJlDQTnwZIFJrZSzSGmIOUdP8tu+SgLw==}
 
@@ -3182,10 +3114,6 @@ packages:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
 
-  http2-wrapper@2.2.1:
-    resolution: {integrity: sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==}
-    engines: {node: '>=10.19.0'}
-
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
@@ -3229,10 +3157,6 @@ packages:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
-  ip-regex@5.0.0:
-    resolution: {integrity: sha512-fOCG6lhoKKakwv+C6KdsOnGvgXnmgfmp0myi3bcNwj3qfwPAxRKWEuFhvEFF7ceYIz6+1jRZ+yguLFAmUNPEfw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
 
@@ -3307,10 +3231,6 @@ packages:
   is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
-  is-ip@5.0.1:
-    resolution: {integrity: sha512-FCsGHdlrOnZQcp0+XT5a+pYowf33itBalCl+7ovNXC/7o5BhIpG14M3OrpPPdBSIQJCm+0M5+9mO7S9VVTTCFw==}
-    engines: {node: '>=14.16'}
-
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -3338,10 +3258,6 @@ packages:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
 
-  is-regexp@3.1.0:
-    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
-    engines: {node: '>=12'}
-
   is-set@2.0.3:
     resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
     engines: {node: '>= 0.4'}
@@ -3520,10 +3436,6 @@ packages:
   loupe@3.1.3:
     resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
-  lowercase-keys@3.0.0:
-    resolution: {integrity: sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -3682,14 +3594,6 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
-  mimic-response@3.1.0:
-    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
-    engines: {node: '>=10'}
-
-  mimic-response@4.0.0:
-    resolution: {integrity: sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -3765,10 +3669,6 @@ packages:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
 
-  normalize-url@8.0.1:
-    resolution: {integrity: sha512-IO9QvjUMWxPQQhs60oOu10CRkWCiZzSUkzbXGGV9pviYl1fXYcvkzQ5jV9z8Y6un8ARoVRl4EtC6v6jNqbaJ/w==}
-    engines: {node: '>=14.16'}
-
   nwsapi@2.2.19:
     resolution: {integrity: sha512-94bcyI3RsqiZufXjkr3ltkI86iEl+I7uiHVDtcq9wJUTwYQJ5odHDeSzkkrRzi80jJ8MaeZgqKjH1bAWAFw9bA==}
 
@@ -3819,10 +3719,6 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  p-cancelable@3.0.0:
-    resolution: {integrity: sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==}
-    engines: {node: '>=12.20'}
-
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -4033,10 +3929,6 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
-  public-ip@7.0.1:
-    resolution: {integrity: sha512-DdNcqcIbI0wEeCBcqX+bmZpUCvrDMJHXE553zgyG1MZ8S1a/iCCxmK9iTjjql+SpHSv4cZkmRv5/zGYW93AlCw==}
-    engines: {node: '>=18'}
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -4047,10 +3939,6 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  quick-lru@5.1.1:
-    resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
-    engines: {node: '>=10'}
-
   react-day-picker@8.10.1:
     resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
     peerDependencies:
@@ -4191,9 +4079,6 @@ packages:
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
-  resolve-alpn@1.2.1:
-    resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -4210,10 +4095,6 @@ packages:
     resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
     hasBin: true
 
-  responselike@3.0.0:
-    resolution: {integrity: sha512-40yHxbNcl2+rzXvZuVkrYohathsSJlMTXKryG5y8uciHv1+xDLHQpgjG64JUO9nrEq2jGLH6IZ8BcZyw3wrweg==}
-    engines: {node: '>=14.16'}
-
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -4447,10 +4328,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  super-regex@0.2.0:
-    resolution: {integrity: sha512-WZzIx3rC1CvbMDloLsVw0lkZVKJWbrkJ0k1ghKFmcnPrW1+jWbgTkTEWVtD9lMdmI4jZEz40+naBxl1dCUhXXw==}
-    engines: {node: '>=14.16'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -4493,10 +4370,6 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  time-span@5.1.0:
-    resolution: {integrity: sha512-75voc/9G4rDIJleOo4jPvN4/YC4GRZrY8yy1uU4lwrB3XEQbWve8zXoO5No4eFrGcTAMYyoY67p8jRQdtA1HbA==}
-    engines: {node: '>=12'}
-
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -5562,8 +5435,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@leichtgewicht/ip-codec@2.0.5': {}
-
   '@mdx-js/loader@3.1.0(acorn@8.14.1)':
     dependencies:
       '@mdx-js/mdx': 3.1.0(acorn@8.14.1)
@@ -6193,8 +6064,6 @@ snapshots:
 
   '@rushstack/eslint-patch@1.11.0': {}
 
-  '@sindresorhus/is@5.6.0': {}
-
   '@socket.io/component-emitter@3.1.2': {}
 
   '@swc/counter@0.1.3': {}
@@ -6204,10 +6073,6 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.8.1
 
-  '@szmarczak/http-timer@5.0.1':
-    dependencies:
-      defer-to-connect: 2.0.1
-
   '@tanstack/query-core@5.69.0': {}
 
   '@tanstack/query-devtools@5.67.2': {}
@@ -6431,8 +6296,6 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  '@types/http-cache-semantics@4.0.4': {}
-
   '@types/json5@0.0.29': {}
 
   '@types/mdast@4.0.4':
@@ -6826,18 +6689,6 @@ snapshots:
 
   cac@6.7.14: {}
 
-  cacheable-lookup@7.0.0: {}
-
-  cacheable-request@10.2.14:
-    dependencies:
-      '@types/http-cache-semantics': 4.0.4
-      get-stream: 6.0.1
-      http-cache-semantics: 4.1.1
-      keyv: 4.5.4
-      mimic-response: 4.0.0
-      normalize-url: 8.0.1
-      responselike: 3.0.0
-
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -6906,10 +6757,6 @@ snapshots:
 
   client-only@0.0.1: {}
 
-  clone-regexp@3.0.0:
-    dependencies:
-      is-regexp: 3.1.0
-
   clsx@2.1.1: {}
 
   cmdk@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -6944,8 +6791,6 @@ snapshots:
 
   concat-map@0.0.1: {}
 
-  convert-hrtime@5.0.0: {}
-
   convert-source-map@1.9.0: {}
 
   convert-source-map@2.0.0: {}
@@ -7180,16 +7025,10 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
-  decompress-response@6.0.0:
-    dependencies:
-      mimic-response: 3.1.0
-
   deep-eql@5.0.2: {}
 
   deep-is@0.1.4: {}
 
-  defer-to-connect@2.0.1: {}
-
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.1
@@ -7226,14 +7065,6 @@ snapshots:
 
   dlv@1.1.3: {}
 
-  dns-packet@5.6.1:
-    dependencies:
-      '@leichtgewicht/ip-codec': 2.0.5
-
-  dns-socket@4.2.2:
-    dependencies:
-      dns-packet: 5.6.1
-
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -7453,7 +7284,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.4(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -7487,7 +7318,7 @@ snapshots:
       tinyglobby: 0.2.12
       unrs-resolver: 1.3.2
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -7502,7 +7333,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -7758,8 +7589,6 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  form-data-encoder@2.1.4: {}
-
   form-data@4.0.2:
     dependencies:
       asynckit: 0.4.0
@@ -7776,8 +7605,6 @@ snapshots:
 
   function-bind@1.1.2: {}
 
-  function-timeout@0.1.1: {}
-
   function.prototype.name@1.1.8:
     dependencies:
       call-bind: 1.0.8
@@ -7811,8 +7638,6 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
-  get-stream@6.0.1: {}
-
   get-symbol-description@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -7881,20 +7706,6 @@ snapshots:
 
   gopd@1.2.0: {}
 
-  got@13.0.0:
-    dependencies:
-      '@sindresorhus/is': 5.6.0
-      '@szmarczak/http-timer': 5.0.1
-      cacheable-lookup: 7.0.0
-      cacheable-request: 10.2.14
-      decompress-response: 6.0.0
-      form-data-encoder: 2.1.4
-      get-stream: 6.0.1
-      http2-wrapper: 2.2.1
-      lowercase-keys: 3.0.0
-      p-cancelable: 3.0.0
-      responselike: 3.0.0
-
   graceful-fs@4.2.11: {}
 
   graphemer@1.4.0: {}
@@ -7976,8 +7787,6 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
-  http-cache-semantics@4.1.1: {}
-
   http-parser-js@0.5.9: {}
 
   http-proxy-agent@7.0.2:
@@ -7987,11 +7796,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  http2-wrapper@2.2.1:
-    dependencies:
-      quick-lru: 5.1.1
-      resolve-alpn: 1.2.1
-
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.3
@@ -8031,8 +7835,6 @@ snapshots:
 
   internmap@2.0.3: {}
 
-  ip-regex@5.0.0: {}
-
   is-alphabetical@2.0.1: {}
 
   is-alphanumerical@2.0.1:
@@ -8113,11 +7915,6 @@ snapshots:
 
   is-hexadecimal@2.0.1: {}
 
-  is-ip@5.0.1:
-    dependencies:
-      ip-regex: 5.0.0
-      super-regex: 0.2.0
-
   is-map@2.0.3: {}
 
   is-number-object@1.1.1:
@@ -8140,8 +7937,6 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  is-regexp@3.1.0: {}
-
   is-set@2.0.3: {}
 
   is-shared-array-buffer@1.0.4:
@@ -8346,8 +8141,6 @@ snapshots:
 
   loupe@3.1.3: {}
 
-  lowercase-keys@3.0.0: {}
-
   lru-cache@10.4.3: {}
 
   lru-cache@5.1.1:
@@ -8694,10 +8487,6 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  mimic-response@3.1.0: {}
-
-  mimic-response@4.0.0: {}
-
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -8767,8 +8556,6 @@ snapshots:
 
   normalize-range@0.1.2: {}
 
-  normalize-url@8.0.1: {}
-
   nwsapi@2.2.19: {}
 
   object-assign@4.1.1: {}
@@ -8834,8 +8621,6 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  p-cancelable@3.0.0: {}
-
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -8979,20 +8764,12 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
-  public-ip@7.0.1:
-    dependencies:
-      dns-socket: 4.2.2
-      got: 13.0.0
-      is-ip: 5.0.1
-
   punycode@2.3.1: {}
 
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
 
-  quick-lru@5.1.1: {}
-
   react-day-picker@8.10.1(date-fns@3.6.0)(react@18.3.1):
     dependencies:
       date-fns: 3.6.0
@@ -9189,8 +8966,6 @@ snapshots:
 
   requires-port@1.0.0: {}
 
-  resolve-alpn@1.2.1: {}
-
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -9207,10 +8982,6 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  responselike@3.0.0:
-    dependencies:
-      lowercase-keys: 3.0.0
-
   reusify@1.1.0: {}
 
   rimraf@3.0.2:
@@ -9533,12 +9304,6 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
-  super-regex@0.2.0:
-    dependencies:
-      clone-regexp: 3.0.0
-      function-timeout: 0.1.1
-      time-span: 5.1.0
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -9601,10 +9366,6 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  time-span@5.1.0:
-    dependencies:
-      convert-hrtime: 5.0.0
-
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}

From 2ffbb5c07f60ff0c664366ee36cf9f74f852cc3e Mon Sep 17 00:00:00 2001
From: Dave Augustus <devpandey19924u@gmail.com>
Date: Fri, 30 Jan 2026 21:08:42 +0530
Subject: [PATCH 7/9] feat: implement premium SmartImage 2.0 with
 blurred-to-high-res transitions

---
 .../blog/components/BlogRecommendations.tsx   |  2 +-
 .../src/components/blog/getBlogContent.tsx    | 93 +++++++------------
 .../components/branding/membersGrid/index.tsx |  8 +-
 .../src/components/common/SmartImage.tsx      | 86 +++++++++++++++++
 .../the_monkeys/src/components/logo/index.tsx |  6 +-
 .../src/components/profileImage.tsx           | 13 +--
 .../src/components/social/SocialSnapshot.tsx  |  6 +-
 .../social/SocialSnapshotDialog.tsx           |  5 +-
 .../user/dialogs/updateProfileDialog.tsx      |  6 +-
 9 files changed, 145 insertions(+), 80 deletions(-)
 create mode 100644 apps/the_monkeys/src/components/common/SmartImage.tsx

diff --git a/apps/the_monkeys/src/app/blog/components/BlogRecommendations.tsx b/apps/the_monkeys/src/app/blog/components/BlogRecommendations.tsx
index 01465383..ecfeabb5 100644
--- a/apps/the_monkeys/src/app/blog/components/BlogRecommendations.tsx
+++ b/apps/the_monkeys/src/app/blog/components/BlogRecommendations.tsx
@@ -36,7 +36,7 @@ export const BlogRecommendations = ({
     };
 
     fetchBlogs();
-  }, []);
+  }, [topics]);
 
   if (blogsLoading) {
     return <BlogPageRecommendationSkeleton />;
diff --git a/apps/the_monkeys/src/components/blog/getBlogContent.tsx b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
index 7fb38437..3af27401 100644
--- a/apps/the_monkeys/src/components/blog/getBlogContent.tsx
+++ b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
 import Image from 'next/image';
 
+import { SmartImage } from '@/components/common/SmartImage';
 import { Blog } from '@/services/blog/blogTypes';
 import { decodeBlurHashToDataURL } from '@/utils/blurhash';
 import { purifyHTMLString } from '@/utils/purifyHTML';
@@ -112,67 +113,41 @@ export const BlogImage = ({
 }) => {
   const [imgSrc, setImgSrc] = useState<string>(image);
   const [blurHash, setBlurHash] = useState<string | undefined>(undefined);
-  const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    const resolveUrl = async () => {
-      // Check if image is a Storage V2 API URL (ends in /url)
-      if (
-        image &&
-        image.includes('/storage/posts/') &&
-        image.endsWith('/url')
-      ) {
-        try {
-          // Fetch meta instead of just url to get blurhash
-          const metaUrl = image.replace('/url', '/meta');
-          const res = await fetch(metaUrl);
-          const data = await res.json();
-          if (data) {
-            if (data.url) setImgSrc(data.url);
-            if (data.blurhash) setBlurHash(data.blurhash);
-          }
-        } catch (error) {
-          console.error('Failed to resolve V2 Image Metadata:', error);
+  const resolveUrl = useCallback(async () => {
+    // Check if image is a Storage V2 API URL (ends in /url)
+    if (image && image.includes('/storage/posts/') && image.endsWith('/url')) {
+      try {
+        const metaUrl = image.replace('/url', '/meta');
+        const res = await fetch(metaUrl);
+        const data = await res.json();
+        if (data) {
+          if (data.url) setImgSrc(data.url);
+          if (data.blurhash) setBlurHash(data.blurhash);
         }
-      } else {
-        setImgSrc(image);
+      } catch (error) {
+        console.error('Failed to resolve V2 Image Metadata:', error);
       }
-    };
-
-    resolveUrl();
+    } else {
+      setImgSrc(image);
+    }
   }, [image]);
 
-  const blurDataURL = decodeBlurHashToDataURL(blurHash);
+  useEffect(() => {
+    resolveUrl();
+  }, [resolveUrl]);
 
   return (
-    <div
-      className={twMerge(
-        className,
-        'relative overflow-hidden bg-gray-200 dark:bg-gray-800'
-      )}
-    >
-      <Image
-        src={imgSrc}
-        alt={title}
-        height='500'
-        width='800'
-        className={twMerge(
-          'h-full w-full object-cover object-center transition-opacity duration-500',
-          isLoading ? 'opacity-0' : 'opacity-100'
-        )}
-        quality={100}
-        priority={false}
-        placeholder={blurDataURL ? 'blur' : 'empty'}
-        blurDataURL={blurDataURL}
-        onLoad={() => setIsLoading(false)}
-        onError={() => setIsLoading(false)} // Prevent indefinite loading state
-      />
-      {isLoading && !blurDataURL && (
-        <div className='absolute inset-0 flex items-center justify-center'>
-          <div className='h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-brand-orange'></div>
-        </div>
-      )}
-    </div>
+    <SmartImage
+      src={imgSrc}
+      alt={title}
+      blurHash={blurHash}
+      width={800}
+      height={500}
+      containerClassName={className}
+      quality={100}
+      priority={false}
+    />
   );
 };
 
@@ -184,12 +159,12 @@ export const BlogPlaceholderImage = ({
   className?: string;
 }) => {
   return (
-    <Image
+    <SmartImage
       src={placeholderImage.src}
       alt={title}
-      height='500'
-      width='800'
-      className={twMerge(className, 'h-full w-full object-cover object-center')}
+      height={500}
+      width={800}
+      containerClassName={className}
       quality={100}
     />
   );
diff --git a/apps/the_monkeys/src/components/branding/membersGrid/index.tsx b/apps/the_monkeys/src/components/branding/membersGrid/index.tsx
index c5cfbf9f..f407b68c 100644
--- a/apps/the_monkeys/src/components/branding/membersGrid/index.tsx
+++ b/apps/the_monkeys/src/components/branding/membersGrid/index.tsx
@@ -1,3 +1,4 @@
+import { SmartImage } from '@/components/common/SmartImage';
 import { teamInfo } from '@/constants/team';
 
 const getYearColor = (year: string) => {
@@ -19,10 +20,13 @@ const MembersGrid = () => {
           >
             <div className='h-full flex flex-col items-center text-center space-y-4'>
               <div className='size-20 ring-[6px] border-2 border-background-light dark:border-background-dark rounded-full overflow-hidden ring-brand-orange/40 group-hover:ring-[4px] group-hover:scale-105 transition-transform'>
-                <img
+                <SmartImage
                   src={info.avatar_url || './default-profile.svg'}
                   alt={info.name}
-                  className='h-full w-full rounded-full group-hover:scale-105 transition-transform'
+                  width={80}
+                  height={80}
+                  containerClassName='h-full w-full rounded-full'
+                  className='group-hover:scale-105 transition-transform'
                 />
               </div>
 
diff --git a/apps/the_monkeys/src/components/common/SmartImage.tsx b/apps/the_monkeys/src/components/common/SmartImage.tsx
new file mode 100644
index 00000000..261dedeb
--- /dev/null
+++ b/apps/the_monkeys/src/components/common/SmartImage.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import Image, { ImageProps } from 'next/image';
+
+import { decodeBlurHashToDataURL } from '@/utils/blurhash';
+import { twMerge } from 'tailwind-merge';
+
+interface SmartImageProps
+  extends Omit<ImageProps, 'placeholder' | 'blurDataURL' | 'onLoad'> {
+  blurHash?: string;
+  containerClassName?: string;
+}
+
+/**
+ * SmartImage Component
+ * A premium image component that handles:
+ * 1. Immediate BlurHash placeholder display
+ * 2. Smooth cross-fade transition to full-res image (Google-style)
+ * 3. Zero layout shift
+ */
+export const SmartImage = ({
+  src,
+  alt,
+  blurHash,
+  containerClassName,
+  className,
+  ...props
+}: SmartImageProps) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [blurDataURL, setBlurDataURL] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (blurHash) {
+      const url = decodeBlurHashToDataURL(blurHash);
+      setBlurDataURL(url);
+    }
+  }, [blurHash]);
+
+  return (
+    <div
+      className={twMerge(
+        'relative overflow-hidden bg-gray-100 dark:bg-gray-900',
+        containerClassName
+      )}
+    >
+      {/* Layer 1: BlurHash Placeholder (Visible until main image fades in) */}
+      {blurDataURL && (
+        <div
+          className={twMerge(
+            'absolute inset-0 z-0 transition-opacity duration-700 ease-in-out',
+            isLoaded ? 'opacity-0' : 'opacity-100'
+          )}
+          style={{
+            backgroundImage: `url(${blurDataURL})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            filter: 'blur(10px)',
+            transform: 'scale(1.1)',
+          }}
+        />
+      )}
+
+      {/* Layer 2: Main Image */}
+      <Image
+        src={src}
+        alt={alt}
+        className={twMerge(
+          'relative z-10 w-full h-full object-cover transition-opacity duration-700 ease-out',
+          isLoaded ? 'opacity-100' : 'opacity-0',
+          className
+        )}
+        onLoad={() => setIsLoaded(true)}
+        onError={(e) => {
+          setIsLoaded(true);
+          if (props.onError) props.onError(e);
+        }}
+        {...(blurDataURL ? { placeholder: 'blur', blurDataURL } : {})}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default SmartImage;
diff --git a/apps/the_monkeys/src/components/logo/index.tsx b/apps/the_monkeys/src/components/logo/index.tsx
index 36039b21..eb1f905b 100644
--- a/apps/the_monkeys/src/components/logo/index.tsx
+++ b/apps/the_monkeys/src/components/logo/index.tsx
@@ -1,14 +1,14 @@
-import Image from 'next/image';
+import { SmartImage } from '@/components/common/SmartImage';
 
 const Logo = () => {
   return (
-    <Image
+    <SmartImage
       src={'/logo-brand.svg'}
       alt='Monkeys Logo'
       title='Monkeys Logo'
       height={24}
       width={88}
-      className='h-full w-full'
+      containerClassName='h-full w-full bg-transparent dark:bg-transparent'
       unoptimized
     />
   );
diff --git a/apps/the_monkeys/src/components/profileImage.tsx b/apps/the_monkeys/src/components/profileImage.tsx
index a891b627..7aab5f44 100644
--- a/apps/the_monkeys/src/components/profileImage.tsx
+++ b/apps/the_monkeys/src/components/profileImage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import Image from 'next/image';
 
+import { SmartImage } from '@/components/common/SmartImage';
 import useProfileImage from '@/hooks/profile/useProfileImage';
 import { decodeBlurHashToDataURL } from '@/utils/blurhash';
 import { twMerge } from 'tailwind-merge';
@@ -81,21 +82,15 @@ export const ProfileImage = ({
     );
 
   return (
-    <Image
+    <SmartImage
       src={imageUrl}
       alt={`Author: ${username}`}
       title={`Author: ${username}`}
       width={50}
       height={50}
-      className={twMerge(
-        'w-full h-full object-cover transition-opacity duration-500',
-        isImgLoading && blurDataURL ? 'opacity-0' : 'opacity-100'
-      )}
-      loading='lazy'
+      blurHash={blurHash}
+      containerClassName='w-full h-full'
       quality={100}
-      placeholder={blurDataURL ? 'blur' : 'empty'}
-      blurDataURL={blurDataURL}
-      onLoad={() => setIsImgLoading(false)}
       onError={() => setImgLoadError(true)}
     />
   );
diff --git a/apps/the_monkeys/src/components/social/SocialSnapshot.tsx b/apps/the_monkeys/src/components/social/SocialSnapshot.tsx
index 77ff9925..1865c879 100644
--- a/apps/the_monkeys/src/components/social/SocialSnapshot.tsx
+++ b/apps/the_monkeys/src/components/social/SocialSnapshot.tsx
@@ -1,5 +1,6 @@
 import Image from 'next/image';
 
+import { SmartImage } from '@/components/common/SmartImage';
 import { Blog } from '@/services/blog/blogTypes';
 
 import { SocialSnapshotDialog } from './SocialSnapshotDialog';
@@ -28,12 +29,13 @@ export const SocialSnapshotCard = ({ blog }: { blog: Blog }) => {
       </div>
 
       <div className='absolute top-0 right-[10px] sm:right-[32px] h-full w-fit -z-20'>
-        <Image
+        <SmartImage
           src={'/social-snapshot-background.svg'}
           alt='Social Snapshot'
           width={100}
           height={100}
-          className='w-full h-full opacity-20 object-cover scale-110 sm:scale-150'
+          containerClassName='w-full h-full bg-transparent dark:bg-transparent'
+          className='opacity-20 object-cover scale-110 sm:scale-150'
           unoptimized
         />
       </div>
diff --git a/apps/the_monkeys/src/components/social/SocialSnapshotDialog.tsx b/apps/the_monkeys/src/components/social/SocialSnapshotDialog.tsx
index b9ae62cd..84710ea1 100644
--- a/apps/the_monkeys/src/components/social/SocialSnapshotDialog.tsx
+++ b/apps/the_monkeys/src/components/social/SocialSnapshotDialog.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import Image from 'next/image';
 
+import { SmartImage } from '@/components/common/SmartImage';
 import { Blog } from '@/services/blog/blogTypes';
 import { Button } from '@the-monkeys/ui/atoms/button';
 import {
@@ -74,12 +75,12 @@ export const SocialSnapshotDialog = ({
                     key={index}
                     onClick={() => setSelectedImage(image)}
                   >
-                    <Image
+                    <SmartImage
                       src={image}
                       alt={`Social snapshot option ${index + 1}`}
                       width={200}
                       height={200}
-                      className='w-full h-full object-cover'
+                      containerClassName='w-full h-full'
                     />
                   </div>
                 );
diff --git a/apps/the_monkeys/src/components/user/dialogs/updateProfileDialog.tsx b/apps/the_monkeys/src/components/user/dialogs/updateProfileDialog.tsx
index 23bc22d8..f0e21f33 100644
--- a/apps/the_monkeys/src/components/user/dialogs/updateProfileDialog.tsx
+++ b/apps/the_monkeys/src/components/user/dialogs/updateProfileDialog.tsx
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
 
 import Image from 'next/image';
 
+import { SmartImage } from '@/components/common/SmartImage';
 import Icon from '@/components/icon';
 import { Loader } from '@/components/loader';
 import useAuth from '@/hooks/auth/useAuth';
@@ -167,12 +168,13 @@ export const UpdateProfileDialog = () => {
         {selectedImage && (
           <div className='overflow-hidden'>
             <div className='mx-auto w-fit h-44 sm:h-52 overflow-hidden'>
-              <Image
+              <SmartImage
                 src={URL.createObjectURL(selectedImage)}
                 alt='Selected Image'
                 width={150}
                 height={150}
-                className='h-full w-full object-contain'
+                containerClassName='h-full w-full'
+                className='object-contain'
               />
             </div>
 

From 8310c69254729156ab279c677879d91a004e29d3 Mon Sep 17 00:00:00 2001
From: Dave Augustus <devpandey19924u@gmail.com>
Date: Fri, 30 Jan 2026 21:08:42 +0530
Subject: [PATCH 8/9] feat: implement premium SmartImage 2.0 and fix
 build-blocking lint errors

---
 apps/the_monkeys/src/app/edit/[blogId]/page.tsx            | 7 +++----
 .../src/app/topics/[topic]/components/BlogsByTopic.tsx     | 2 +-
 apps/the_monkeys/src/components/blog/getBlogContent.tsx    | 2 +-
 apps/the_monkeys/src/components/editor/index.tsx           | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/the_monkeys/src/app/edit/[blogId]/page.tsx b/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
index 5178a2f9..ed729293 100644
--- a/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
+++ b/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
@@ -92,7 +92,7 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
         slug: blogSlug,
       };
     },
-    []
+    [blogId]
   );
 
   const [editorConfig, setEditorConfig] = useState<EditorConfig | null>(null);
@@ -375,9 +375,8 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
               )}
             >
               <div
-                className={`inline-block size-2 rounded-full ${
-                  isConnected ? 'bg-alert-green' : 'bg-alert-red'
-                }`}
+                className={`inline-block size-2 rounded-full ${isConnected ? 'bg-alert-green' : 'bg-alert-red'
+                  }`}
               />
 
               <p className='text-xs'>{isConnected ? 'Online' : 'Offline'}</p>
diff --git a/apps/the_monkeys/src/app/topics/[topic]/components/BlogsByTopic.tsx b/apps/the_monkeys/src/app/topics/[topic]/components/BlogsByTopic.tsx
index c17a7c08..aaebd684 100644
--- a/apps/the_monkeys/src/app/topics/[topic]/components/BlogsByTopic.tsx
+++ b/apps/the_monkeys/src/app/topics/[topic]/components/BlogsByTopic.tsx
@@ -32,7 +32,7 @@ export const BlogsByTopic = ({ topic }: { topic: string }) => {
     };
 
     fetchBlogs();
-  }, []);
+  }, [topic]);
 
   if (blogsLoading) {
     return <FeedBlogCardListSkeleton />;
diff --git a/apps/the_monkeys/src/components/blog/getBlogContent.tsx b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
index 3af27401..a6796c40 100644
--- a/apps/the_monkeys/src/components/blog/getBlogContent.tsx
+++ b/apps/the_monkeys/src/components/blog/getBlogContent.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import Image from 'next/image';
 
diff --git a/apps/the_monkeys/src/components/editor/index.tsx b/apps/the_monkeys/src/components/editor/index.tsx
index 03e5c917..b98337fa 100644
--- a/apps/the_monkeys/src/components/editor/index.tsx
+++ b/apps/the_monkeys/src/components/editor/index.tsx
@@ -39,7 +39,7 @@ const Editor: FC<EditorProps> = React.memo(function Editor({
         editorInstance.current = null;
       }
     };
-  }, []);
+  }, [config, data, onChange]);
 
   return (
     <div className='w-full px-4 space-y-6' id='editorjs_editor-container'></div>

From b78d73ad629caba7af612c5018c4fcc6d2561961 Mon Sep 17 00:00:00 2001
From: Dave Augustus <devpandey19924u@gmail.com>
Date: Fri, 30 Jan 2026 21:08:42 +0530
Subject: [PATCH 9/9] feat: implement premium SmartImage 2.0 and fix more
 build-blocking lint errors

---
 apps/the_monkeys/src/app/edit/[blogId]/page.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/the_monkeys/src/app/edit/[blogId]/page.tsx b/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
index ed729293..29baedc5 100644
--- a/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
+++ b/apps/the_monkeys/src/app/edit/[blogId]/page.tsx
@@ -192,7 +192,7 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
       }
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
-  }, [blogId, formatData]);
+  }, [blogId, formatData, isConnected]);
 
   // Auto-save when data changes
   useEffect(() => {
@@ -375,8 +375,9 @@ const EditPage = ({ params }: { params: { blogId: string } }) => {
               )}
             >
               <div
-                className={`inline-block size-2 rounded-full ${isConnected ? 'bg-alert-green' : 'bg-alert-red'
-                  }`}
+                className={`inline-block size-2 rounded-full ${
+                  isConnected ? 'bg-alert-green' : 'bg-alert-red'
+                }`}
               />
 
               <p className='text-xs'>{isConnected ? 'Online' : 'Offline'}</p>