From a089704e4afbc5cb37e05a0bd844e5a52e72b5bd Mon Sep 17 00:00:00 2001
From: mikais13 <mikai.somerville@gmail.com>
Date: Sun, 3 Aug 2025 16:44:04 +1200
Subject: [PATCH 1/2] feat(images): use next js images

---
 next.config.ts                                | 17 ++++++++++++-----
 src/components/client/memory-content-card.tsx |  9 +++++++--
 src/components/generic/MemoryCard.tsx         | 17 +++++++++++++----
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 8583ac6..8f13165 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,11 +1,18 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
-  images: {
-    remotePatterns: [new URL('https://upload.wikimedia.org/**')]
-  },
-  output: "standalone",
+	/* config options here */
+	images: {
+		remotePatterns: [
+			new URL("https://upload.wikimedia.org/**"),
+			{
+				protocol: "https",
+				hostname: "archivebackend.feroxfoxxo.com",
+				pathname: "**",
+			},
+		],
+	},
+	output: "standalone",
 };
 
 export default nextConfig;
diff --git a/src/components/client/memory-content-card.tsx b/src/components/client/memory-content-card.tsx
index e02158c..9915dee 100644
--- a/src/components/client/memory-content-card.tsx
+++ b/src/components/client/memory-content-card.tsx
@@ -20,6 +20,7 @@ import {
   DialogClose,
 } from "@/components/ui/dialog"
 import { useState } from "react"
+import Image from "next/image"
 
 type MemoryContentCardProps = {
   postId: string
@@ -41,18 +42,22 @@ export const MemoryContentCard = ({ postId }: MemoryContentCardProps) => {
                 className="focus:ring-primary h-full w-full rounded object-cover transition-transform hover:scale-105 focus:ring-2 focus:outline-none"
                 onClick={() => setSelectedImage(fileUrl)}
               >
-                <img
+                <Image
                   src={fileUrl}
                   alt={`Image ${index + 1}`}
                   className="h-full w-full rounded object-cover"
+                  width={400}
+                  height={250}
                 />
               </button>
             </DialogTrigger>
             <DialogContent className="max-h-[90vh] max-w-[90vw] overflow-clip p-0">
-              <img
+              <Image
                 src={fileUrl}
                 alt={`Image ${index + 1}`}
                 className="h-full w-full object-contain"
+                width={800}
+                height={600}
               />
             </DialogContent>
           </Dialog>
diff --git a/src/components/generic/MemoryCard.tsx b/src/components/generic/MemoryCard.tsx
index 49cd522..77d513a 100644
--- a/src/components/generic/MemoryCard.tsx
+++ b/src/components/generic/MemoryCard.tsx
@@ -24,6 +24,7 @@ import { useFavouritePost, useUnfavouritePost } from "@/lib/mutations/posts"
 import { cn } from "@/lib/utils"
 import { StarIcon } from "lucide-react"
 import { Button } from "../ui/button"
+import Image from "next/image"
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -124,21 +125,25 @@ export const MemoryCard: FC<MemoryCardProps> = memo(
                   // NAH YOU SUCK ~ brandon
                   <Dialog key={index}>
                     <DialogTrigger className="max-h-full w-fit flex-shrink-0 odd:hidden">
-                      <img
+                      <Image
                         className="h-40 max-h-full w-fit flex-shrink-0 cursor-pointer rounded"
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
+                        width={200}
+                        height={125}
                       />
                     </DialogTrigger>
                     <DialogContent className="flex w-fit min-w-5xl flex-col items-center">
                       <DialogHeader>
                         <DialogTitle>Image</DialogTitle>
                       </DialogHeader>
-                      <img
+                      <Image
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
                         key={index}
                         className="h-80 max-w-5xl rounded object-cover"
+                        width={800}
+                        height={600}
                       />
                     </DialogContent>
                   </Dialog>
@@ -150,21 +155,25 @@ export const MemoryCard: FC<MemoryCardProps> = memo(
                 .map((image, index) => (
                   <Dialog key={index}>
                     <DialogTrigger className="max-h-full w-fit flex-shrink-0 even:hidden">
-                      <img
+                      <Image
                         className="h-40 max-h-full w-fit flex-shrink-0 cursor-pointer rounded"
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
+                        width={200}
+                        height={125}
                       />
                     </DialogTrigger>
                     <DialogContent className="flex w-fit min-w-5xl flex-col items-center">
                       <DialogHeader>
                         <DialogTitle>Image</DialogTitle>
                       </DialogHeader>
-                      <img
+                      <Image
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
                         key={index}
                         className="h-80 max-w-5xl rounded object-cover"
+                        width={800}
+                        height={600}
                       />
                     </DialogContent>
                   </Dialog>

From d7e5718549beb14d08ea649333931dc42bb71eac Mon Sep 17 00:00:00 2001
From: mikais13 <mikai.somerville@gmail.com>
Date: Sun, 3 Aug 2025 16:54:36 +1200
Subject: [PATCH 2/2] feat(next-image): implement next image

---
 src/components/client/memory-content-card.tsx | 4 ++++
 src/components/generic/MemoryCard.tsx         | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/client/memory-content-card.tsx b/src/components/client/memory-content-card.tsx
index 9915dee..6e2c02c 100644
--- a/src/components/client/memory-content-card.tsx
+++ b/src/components/client/memory-content-card.tsx
@@ -15,6 +15,7 @@ import {
 } from "lucide-react"
 import {
   Dialog,
+  DialogTitle,
   DialogContent,
   DialogTrigger,
   DialogClose,
@@ -52,6 +53,9 @@ export const MemoryContentCard = ({ postId }: MemoryContentCardProps) => {
               </button>
             </DialogTrigger>
             <DialogContent className="max-h-[90vh] max-w-[90vw] overflow-clip p-0">
+              <DialogTitle className="block w-full p-2 text-center">
+                Media
+              </DialogTitle>
               <Image
                 src={fileUrl}
                 alt={`Image ${index + 1}`}
diff --git a/src/components/generic/MemoryCard.tsx b/src/components/generic/MemoryCard.tsx
index 77d513a..a547855 100644
--- a/src/components/generic/MemoryCard.tsx
+++ b/src/components/generic/MemoryCard.tsx
@@ -133,7 +133,7 @@ export const MemoryCard: FC<MemoryCardProps> = memo(
                         height={125}
                       />
                     </DialogTrigger>
-                    <DialogContent className="flex w-fit min-w-5xl flex-col items-center">
+                    <DialogContent className="flex max-h-[80vh] w-fit min-w-5xl flex-col items-center">
                       <DialogHeader>
                         <DialogTitle>Image</DialogTitle>
                       </DialogHeader>
@@ -156,14 +156,14 @@ export const MemoryCard: FC<MemoryCardProps> = memo(
                   <Dialog key={index}>
                     <DialogTrigger className="max-h-full w-fit flex-shrink-0 even:hidden">
                       <Image
-                        className="h-40 max-h-full w-fit flex-shrink-0 cursor-pointer rounded"
+                        className="max-h-full w-fit flex-shrink-0 cursor-pointer rounded"
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
                         width={200}
                         height={125}
                       />
                     </DialogTrigger>
-                    <DialogContent className="flex w-fit min-w-5xl flex-col items-center">
+                    <DialogContent className="flex max-h-[80vh] w-fit min-w-5xl flex-col items-center overflow-scroll">
                       <DialogHeader>
                         <DialogTitle>Image</DialogTitle>
                       </DialogHeader>
@@ -171,7 +171,7 @@ export const MemoryCard: FC<MemoryCardProps> = memo(
                         src={`${process.env.NEXT_PUBLIC_API_URL}/api/file/${image.fileName}`}
                         alt={`Image ${index + 1}`}
                         key={index}
-                        className="h-80 max-w-5xl rounded object-cover"
+                        className="max-w-5xl rounded object-cover"
                         width={800}
                         height={600}
                       />