text fix + image fade in

app/(ui)/artifact/live.tsx

@@ -1,8 +1,8 @@
 import { TooltipContent, TooltipTrigger } from "@radix-ui/react-tooltip";
 import { TvMinimalPlay } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
 import type { YoutubeLiveInfo } from "@/app/api/live/route";
+import Image from "@/components/image";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 

app/(ui)/artifact/page.tsx

@@ -2,12 +2,12 @@ import { TooltipTrigger } from "@radix-ui/react-tooltip";
 import { eq } from "drizzle-orm";
 import { BookAlert, CircleDollarSign, SendHorizonal } from "lucide-react";
 import { cookies } from "next/headers";
-import Image from "next/image";
 import Link from "next/link";
 import { Suspense } from "react";
 import banner from "#/logos/artifact.webp";
 import { Blocker } from "@/components/blocker";
 import { ComboBox } from "@/components/combobox";
+import Image from "@/components/image";
 import { SimpleTooltip } from "@/components/tooltip";
 import { Button } from "@/components/ui/button";
 import {

app/(ui)/endgame/page.tsx

@@ -1,11 +1,12 @@
 import { eq } from "drizzle-orm";
 import { BookAlert, CircleDollarSign, SendHorizonal } from "lucide-react";
 import { cookies } from "next/headers";
-import Image from "next/image";
 import Link from "next/link";
 import { Suspense } from "react";
+import banner from "#/logos/artifact.webp";
 import { PageTransition } from "@/app/transition";
 import { Blocker } from "@/components/blocker";
+import Image from "@/components/image";
 import { SimpleTooltip } from "@/components/tooltip";
 import { Button } from "@/components/ui/button";
 import {
@@ -30,7 +31,6 @@ import { ArtifactFormWrapper } from "../artifact/form";
 import { LiveButton } from "../artifact/live";
 import { RulesDialog } from "../artifact/rules";
 import { getEndgameConfig } from "./api";
-import banner from "#/logos/artifact.webp";
 
 export default async function EndgamePage() {
   const cookie = await cookies();

app/(ui)/layout.tsx

@@ -1,7 +1,7 @@
 import { AnimatePresence } from "framer-motion";
-import Image from "next/image";
 import { Toaster } from "sonner";
 import Background from "#/bg.jpg";
+import Image from "@/components/image";
 import Providers, { VersionCheck } from "../client";
 
 export default function UiLayout({ children }: { children: React.ReactNode }) {

app/(ui)/page.tsx

@@ -1,9 +1,9 @@
 import { ChevronRightIcon } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
 import Banner from "#/banner.webp";
 import ArtifactLogo from "#/logos/artifact.webp";
 import TierlistLogo from "#/logos/tierlist.webp";
+import Image from "@/components/image";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import {
   Item,
@@ -46,11 +46,11 @@ export default function Home() {
                       <ItemTitle>
                         <span className="hidden md:block">เสือกไอดีชาวบ้าน</span>
                         <span className="block md:hidden">
-                          ตรวจแฟกต์เกนชินรายแพทช์
+                          ตรวจแฟกต์เกนชินในไลฟ์
                         </span>
                       </ItemTitle>
                       <ItemDescription className="line-clamp-none hidden md:block">
-                        ใครอยากให้ดูอาร์ติแฟกต์ให้ในไลฟ์ ไปกรอกแบบฟอร์มได้เลย
+                        ระบบลงคิวดูอาร์ติแฟกต์เกนชินในไลฟ์สตรีม
                       </ItemDescription>
                     </ItemContent>
                     <ItemActions>
@@ -64,16 +64,16 @@ export default function Home() {
                     <ItemMedia className="justify-center">
                       <Image
                         src={ArtifactLogo}
-                        alt="รับลงเอนเกคอนเทนต์"
+                        alt="รับกรรมแทนคนดู"
                         className="w-[calc(100svw-112px)] md:w-22"
                         width={500}
                         height={500}
                       />
                     </ItemMedia>
                     <ItemContent>
-                      <ItemTitle>รับลงเอนเกคอนเทนต์</ItemTitle>
+                      <ItemTitle>รับกรรมแทนคนดู</ItemTitle>
                       <ItemDescription className="line-clamp-none hidden md:block">
-                        ใครอยากให้ดูอาร์ติแฟกต์ให้ในไลฟ์ ไปกรอกแบบฟอร์มได้เลย
+                        ระบบลงคิวดูอาร์ติแฟกต์เกนชินในไลฟ์สตรีม
                       </ItemDescription>
                     </ItemContent>
                     <ItemActions>
@@ -96,9 +96,7 @@ export default function Home() {
                     <ItemContent>
                       <ItemTitle>จัดเทียร์ลิสต์</ItemTitle>
                       <ItemDescription className="line-clamp-none hidden md:block">
-                        เทียร์ลิสต์เมต้าตัวละครของอบิสแพทช์นั้นๆเท่านั้น
-                        ซึ่งจะเปลี่ยนไปในแต่ละแพทช์ตามความสามารถของตัวละครในการรับมือกับอบิสแพทช์นั้นๆ
-                        ไม่ใช่เทียร์ลิสต์ภาพรวมของตัวละคร
+                        ระบบจัดเทียร์ลิสต์ตัวละครของคอนเท้น Abyss และ Stygain
                       </ItemDescription>
                     </ItemContent>
                     <ItemActions>

app/(ui)/tl/[type]/[ver]/character.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 import { useContext, useEffect, useState } from "react";
 import AmberIcon from "#/amber.png";
+import Image from "@/components/image";
 import { SimpleTooltip } from "@/components/tooltip";
 import { Button } from "@/components/ui/button";
 import {

app/(ui)/tl/[type]/[ver]/tierlist.tsx

@@ -8,7 +8,6 @@ import {
 } from "@dnd-kit/core";
 import { rectSortingStrategy, SortableContext } from "@dnd-kit/sortable";
 import { Calculator, ChevronDown, ChevronUp, X } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
 import {
   Fragment,
@@ -26,6 +25,7 @@ import Qiqi from "#/assets/qiqi.webp";
 import BadgeSP from "#/assets/sp.webp";
 import BadgeSSS from "#/assets/sss.webp";
 import { Blocker } from "@/components/blocker";
+import Image from "@/components/image";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,

app/(ui)/tl/page.tsx

@@ -1,6 +1,6 @@
 import { desc } from "drizzle-orm";
-import Image from "next/image";
 import Link from "next/link";
+import Image from "@/components/image";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { db } from "@/lib/db";
 import { tierlistTypes, tierlistVersions } from "@/lib/db/schema";

app/error.tsx

@@ -1,11 +1,11 @@
 "use client"; // Error boundaries must be Client Components
 
 import { Activity, Home, RefreshCw } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import Qiqi from "#/assets/qiqi.webp";
 import Background from "#/bg.jpg";
+import Image from "@/components/image";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
@@ -26,21 +26,22 @@ export default function ErrorPage({
     console.error(error);
 
     const messages = [
-      "แพ้ 50/50 อีกแล้ว...",
-      "จมน้ำตายหน้าชายฝั่ง...",
-      "โดนฮิลิเชอร์ลตบดับ...",
-      "ไพม่อนกินคำสั่งไปแล้ว...",
-      "หมดเพชร หมดใจ...",
-      "คริไม่ติดเลยสักที...",
-      "ชิ้นส่วนนี้กลายเป็น DEF แบน...",
-      "หลุดสัญญาณเหมือนหลุดอาร์ติแฟกต์ดีๆ...",
-      "แช่แข็งโดยเมจน้ำแข็ง...",
-      "กดสกิลพลาด คูลดาวน์กินเวลาอีกแล้ว...",
-      "La Baguette... แห่งความพัง",
-      "แพ้ชั้น 12 อีกแล้วเหรอ...",
-      "เซเลสเทียไม่อนุญาตให้ผ่าน...",
-      "เอเธอร์สะดุดสายแลน...",
-      "กด E แทน Q ไปอีกแล้ว...",
+      "หลุดเรทอีกแล้ว...",
+      "stamina หมด จมน้ำตาย...",
+      "โดน Hilichurl(s) ดับ...",
+      "Paimon กินหน้านี้ไปแล้ว...",
+      "ไม่เหลือเพชรให้สุ่มแล้ว...",
+      "ไม่ติดคริอีกแล้ว...",
+      "ลงแต่ Def อีกแล้ว...",
+      "เกลือแฟลกอีกแล้ว...",
+      "น้ำแช่แข็งหน้านี้ไปแล้ว...",
+      "กดผิด เผลอลบหน้านี้ทิ้ง...",
+      "Zhongli ไม่อนุญาตให้ผ่าน...",
+      "ได้ไม่ครบ 36 ดาวอีกแล้ว...",
+      "Venti ไม่อนุญาตให้ผ่าน...",
+      "Aether เดินสะดุดสายเซิพ...",
+      "กด E แทน Q อีกแล้ว...",
+      "บุสทำลายหน้านี้ไปแล้ว...",
     ];
     setMessage(messages[Math.floor(Math.random() * messages.length)]);
   }, [error]);

app/not-found.tsx

@@ -1,11 +1,11 @@
 "use client"; // Error boundaries must be Client Components
 
 import { Activity, Home } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import Lost from "#/assets/lost_traveler.webp";
 import Background from "#/bg.jpg";
+import Image from "@/components/image";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
@@ -16,21 +16,22 @@ export default function ErrorPage() {
 
   useEffect(() => {
     const messages = [
-      "ไม่เจอเส้นทาง... เหมือนหลงในเทวสถานอีกแล้ว",
-      "ไพม่อนบอกว่า หน้านี้ไม่มีอยู่จริง...",
-      "อาร์ติแฟกต์ชิ้นนี้... หายไปในอากาศ",
-      "โดนลบโดยอาร์คอนข้อมูล...",
-      "พอร์ทัลนี้ปิดปรับปรุงชั่วคราว (หรือถาวรก็ไม่รู้)",
-      "เหมือนจะเจอ แต่กลายเป็น DEF อีกแล้ว...",
-      "เอเธอร์เดินผิดมิติ...",
-      "หลุดเควสกลางทาง หน้านี้หายไปแล้ว",
-      "ระบบแจ้งว่า '404 Element Not Found'",
-      "แช่แข็งโดยหน้าเพจว่างเปล่า...",
-      "ค้นหามาหลายชั้น ยังไม่เจอชิ้นนี้เลย",
-      "โดนรีเซ็ตอินสแตนซ์ หน้านี้กลับเป็นศูนย์",
-      "เพจนี้เหมือนคริไม่ติด... ว่างเปล่า",
-      "หลงเข้าชั้น Abyss ที่ไม่มีทางออก",
-      "ไพม่อนกิน URL ไปหมดแล้ว...",
+      "หลุดเรทอีกแล้ว...",
+      "stamina หมด จมน้ำตาย...",
+      "โดน Hilichurl(s) ดับ...",
+      "Paimon กินหน้านี้ไปแล้ว...",
+      "ไม่เหลือเพชรให้สุ่มแล้ว...",
+      "ไม่ติดคริอีกแล้ว...",
+      "ลงแต่ Def อีกแล้ว...",
+      "เกลือแฟลกอีกแล้ว...",
+      "น้ำแช่แข็งหน้านี้ไปแล้ว...",
+      "กดผิด เผลอลบหน้านี้ทิ้ง...",
+      "Zhongli ไม่อนุญาตให้ผ่าน...",
+      "ได้ไม่ครบ 36 ดาวอีกแล้ว...",
+      "Venti ไม่อนุญาตให้ผ่าน...",
+      "Aether เดินสะดุดสายเซิพ...",
+      "กด E แทน Q อีกแล้ว...",
+      "บุสทำลายหน้านี้ไปแล้ว...",
     ];
 
     setMessage(messages[Math.floor(Math.random() * messages.length)]);

components/avatar.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { AutoTextSize } from "auto-text-size";
-import Image from "next/image";
+import Image from "@/components/image";
 import type { characters } from "@/lib/db/schema";
 
 // TODO: Change amber type

components/image.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import NextImage from "next/image";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+export default function Image({
+  src,
+  alt,
+  className = "",
+  ...props
+}: React.ComponentProps<typeof NextImage>) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  return (
+    <NextImage
+      src={src}
+      alt={alt}
+      className={cn(
+        "transition-opacity duration-700 opacity-0",
+        isLoaded && "opacity-100",
+        className,
+      )}
+      onLoad={() => setIsLoaded(true)}
+      {...props}
+    />
+  );
+}

lib/og.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-/** biome-ignore-all lint/performance/noImgElement: og no next/image */
+/** biome-ignore-all lint/performance/noImgElement: og no @/components/image */
 
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";