feat(artifact-export) : add vertical stats layout and note toggle

components/public/artifact-image-export.tsx

@@ -29,30 +29,40 @@ type ArtifactExportSection = (typeof sectionOptions)[number][0];
 export function ArtifactImageExport({
   children,
   fileName,
+  hasNote,
   targetConditionLabels,
 }: {
   children: ReactNode;
   fileName: string;
+  hasNote: boolean;
   targetConditionLabels: readonly string[];
 }) {
   const [sections, setSections] = useState<Set<ArtifactExportSection>>(
     () => new Set(sectionOptions.map(([value]) => value)),
   );
+  const [includeNote, setIncludeNote] = useState(true);
   const [targetCondition, setTargetCondition] = useState("0");
+  const showNote = hasNote && includeNote;
   const entireSection = sections.size === sectionOptions.length;
   const hiddenSections = sectionOptions
     .filter(([value]) => !sections.has(value))
     .map(([value]) => `[data-artifact-export-section="${value}"]{display:none!important}`)
     .join("");
   const targetRule = `[data-target-condition]:not([data-target-condition="${targetCondition}"]){display:none!important}`;
+  const noteRule = showNote
+    ? ""
+    : '[data-artifact-export-section="note"]{display:none!important}';
   const onlySection = sections.size === 1 ? [...sections][0] : null;
-  const exportWidth = onlySection === "target-stats" || onlySection === "talents"
+  const exportWidth = onlySection === "best-stats" || onlySection === "target-stats" || onlySection === "talents"
     ? 800
     : 1200;
+  const hideEmptyRightColumn = !showNote && !sections.has("target-stats") && !sections.has("talents")
+    ? ".artifact-export-right{display:none!important}"
+    : "";
   const layoutRules = onlySection === "tierlist"
     ? ".artifact-export-grid{grid-template-columns:1fr!important}.artifact-export-tierlist{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}"
     : onlySection === "best-stats"
-      ? ".artifact-export-grid{grid-template-columns:1fr!important}.artifact-export-left{display:grid!important;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start;gap:1.25rem}.artifact-export-main-stats,.artifact-export-substats{order:initial!important}"
+      ? ".artifact-export-grid{grid-template-columns:1fr!important}.artifact-export-left{display:flex!important;flex-direction:column!important}.artifact-export-main-stats{order:1!important}.artifact-export-substats{order:2!important}.artifact-export-right{width:100%!important}"
       : onlySection === "target-stats" || onlySection === "talents"
         ? ".artifact-export-grid{display:block!important}.artifact-export-right{width:560px!important;max-width:100%;margin-left:auto!important;margin-right:auto!important;justify-self:center!important}"
         : "";
@@ -98,6 +108,16 @@ export function ArtifactImageExport({
               <FieldLabel htmlFor={`artifact-export-${value}`}>{label}</FieldLabel>
             </Field>
           ))}
+          {hasNote ? (
+            <Field orientation="horizontal">
+              <Checkbox
+                id="artifact-export-note"
+                checked={includeNote}
+                onCheckedChange={(checked) => setIncludeNote(checked === true)}
+              />
+              <FieldLabel htmlFor="artifact-export-note">Add Note</FieldLabel>
+            </Field>
+          ) : null}
         </FieldGroup>
         {sections.has("target-stats") && targetConditionLabels.length > 1 ? (
           <div className="flex flex-col gap-2">
@@ -127,7 +147,7 @@ export function ArtifactImageExport({
           disabled={sections.size === 0}
           captureClassName="p-0"
         >
-          <style>{hiddenSections + targetRule + layoutRules}</style>
+          <style>{hiddenSections + targetRule + noteRule + hideEmptyRightColumn + layoutRules}</style>
           {children}
         </GuideImageExport>
       </DialogContent>

components/public/structured-guide.tsx

@@ -614,6 +614,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
       action={
         <ArtifactImageExport
           fileName={`${guide.name}-Artifact.png`}
+          hasNote={Boolean(guide.artifactProfile?.note)}
           targetConditionLabels={targetConditions.map((group, index) => group.name || `Condition ${index + 1}`)}
         >
           <ArtifactSectionContent guide={guide} exporting />
@@ -944,7 +945,7 @@ function ArtifactSectionContent({
                   </div>
                 ) : null}
                 {profile.note ? (
-                  <div className="pt-3">
+                  <div data-artifact-export-section="note" className="pt-3">
                     <p className="mb-2 text-sm font-medium">โน็ต</p>
                     <p className="text-sm leading-6 text-muted-foreground">
                       {profile.note}