feat : buzz feedback

app/api/guides/[guideId]/artifacts/image/route.tsx

@@ -5,10 +5,11 @@ import { ImageResponse } from "next/og";
 import sharp from "sharp";
 
 import { rarityGradient } from "@/lib/catalog/rarity";
+import { artifactTierCount } from "@/lib/guides/artifacts";
+import { getCachedPublicArtifactExport } from "@/lib/cache/public";
 import { imageContentDisposition } from "@/lib/guides/export-image";
-import { getPublicArtifactExport } from "@/lib/guides/queries";
 import { normalizeTargetStat, statPriorityColor, targetStatIconName, targetStatOptions } from "@/lib/guides/stats";
-import { normalizeTalentPriorities } from "@/lib/guides/talents";
+import { normalizeTalentPriorities, talentTypeLabel } from "@/lib/guides/talents";
 
 const anuphanFonts = Promise.all(
   [
@@ -58,7 +59,7 @@ async function pngDataUrl(url: string): Promise<string | null> {
 
 async function localPngDataUrl(fileName: string, size: number | null = 96, white = false): Promise<string> {
   let image = sharp(join(process.cwd(), "public", "icon", fileName));
-  if (white) image = image.negate();
+  if (white) image = image.negate({ alpha: false });
   const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
     .png()
     .toBuffer();
@@ -70,11 +71,11 @@ export async function GET(
   context: RouteContext<"/api/guides/[guideId]/artifacts/image">,
 ) {
   const { guideId } = await context.params;
-  const guide = await getPublicArtifactExport(guideId);
+  const guide = await getCachedPublicArtifactExport(guideId);
   if (!guide) return new Response("Guide not found", { status: 404 });
   const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
 
-  const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets, watermark] = await Promise.all([
+  const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] = await Promise.all([
     anuphanFonts,
     Promise.all(
       guide.groups.map((group) =>
@@ -96,7 +97,6 @@ export async function GET(
       return catalogTalent?.iconUrl ? pngDataUrl(catalogTalent.iconUrl) : null;
     })),
     Promise.all(targetStatOptions.map((stat) => localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`, 96, true))),
-    localPngDataUrl("Watermark.png", null),
   ]);
 
   const profile = guide.profile;
@@ -125,7 +125,6 @@ export async function GET(
         position: "relative",
       }}
     >
-      <img src={watermark} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.2 }} />
       <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 20 }}>
       <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
         <div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>
@@ -155,7 +154,7 @@ export async function GET(
               </div>
               <div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
                 {group.rows.map((row, rowIndex) => (
-                    <div key={row.id} style={{ display: "flex", minHeight: groupRowHeights[groupIndex][rowIndex], alignItems: "center", gap: 14 }}>
+                  <div key={row.id} style={{ display: "flex", minHeight: groupRowHeights[groupIndex][rowIndex], alignItems: "center", gap: 14, borderRadius: 6, background: rowIndex % 2 === 0 ? "#34343d" : "#272730", padding: "5px 8px" }}>
                     <div style={{ display: "flex", width: row.second ? 94 : 58 }}>
                       {groupAssets[groupIndex][rowIndex].first ? (
                         <div style={{ display: "flex", width: 58, height: 58, overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: 10, background: rarityGradient(row.first.rarity) }}>
@@ -170,11 +169,12 @@ export async function GET(
                     </div>
                     <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 5 }}>
                       <div style={{ display: "flex", fontSize: 18, fontWeight: 700 }}>
-                        {rowIndex + 1}. {row.first.name}{row.second ? ` + ${row.second.name}` : ""}
+                        {artifactTierCount(row.second?.name ?? null)}{" "}
+                        {row.first.name}{row.second ? ` + ${row.second.name}` : ""}
                       </div>
                       {row.note ? <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
                     </div>
-                    <div style={{ display: "flex", fontSize: 26, fontWeight: 700 }}>
+                    <div style={{ display: "flex", color: "#f0b72f", fontSize: 26, fontWeight: 700 }}>
                       {metric(row.percent)}
                     </div>
                   </div>
@@ -240,7 +240,10 @@ export async function GET(
                       {talents.map((talent, index) => (
                         <div key={talent.type} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                           {talentAssets[index] ? <img src={talentAssets[index]!} alt="" width={42} height={42} style={{ objectFit: "contain" }} /> : null}
-                          <span>{talent.type}{talent.level ? ` Lv.${talent.level}+` : ""}</span>
+                          <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                            <span>{talent.type}{talent.level ? ` Lv.${talent.level}+` : ""}</span>
+                            <span style={{ color: "#b9b9c2", fontSize: 13, fontWeight: 400 }}>{talentTypeLabel(talent.type)}</span>
+                          </span>
                           {index < talents.length - 1 ? <span>{talent.relationToNext === "gte" ? ">=" : ">"}</span> : null}
                         </div>
                       ))}