feat: improve sharemii tutorial to show different steps if mii does not have a download

frontend/src/components/tutorial/index.tsx

@@ -161,9 +161,10 @@ export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
 													{slide.text}
 												</a>
 											) : (
-												<p className="text-sm text-zinc-500 mb-2 text-center">{slide.text}</p>
+												<p className={`mb-2 text-center ${slide.imageSrc ? "text-sm" : "text-lg font-medium mt-auto mb-auto"}`}>{slide.text}</p>
 											)}
 
+											{slide.imageSrc && (
 												<img
 													src={slide.imageSrc ?? "/missing.svg"}
 													alt="step image"
@@ -172,6 +173,7 @@ export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
 													loading="eager"
 													className="rounded-lg w-full h-full object-contain bg-black flex-1"
 												/>
+											)}
 										</>
 									)}
 								</div>

frontend/src/components/tutorial/switch-add-mii.tsx

@@ -3,7 +3,11 @@ import { createPortal } from "react-dom";
 import { Icon } from "@iconify/react";
 import Tutorial from ".";
 
-export default function SwitchAddMiiTutorialButton() {
+interface Props {
+	hasShareMiiFile: boolean;
+}
+
+export default function SwitchAddMiiTutorialButton({ hasShareMiiFile }: Props) {
 	const [isOpen, setIsOpen] = useState(false);
 
 	return (
@@ -22,6 +26,8 @@ export default function SwitchAddMiiTutorialButton() {
 								thumbnail: "/tutorial/switch/adding-mii/modded/thumbnail.png",
 								steps: [
 									{ type: "start" },
+									...(hasShareMiiFile
+										? [
 												{
 													text: "1. Download ShareMii - click here for link",
 													link: "https://gamebanana.com/tools/22305",
@@ -36,6 +42,21 @@ export default function SwitchAddMiiTutorialButton() {
 													link: "https://docs.google.com/document/d/e/2PACX-1vRSaPbTe0pijDSETzdeGhvQ7zYHlx9Qnxn7WdUqG9cveZYyk405A0LSbYnl8ygTNI_ZZqMrIZLeHenr/pub",
 													imageSrc: "/tutorial/switch/adding-mii/modded/step3.jpg",
 												},
+											]
+										: [
+												{ text: "This Mii does not have a ShareMii file. You can filter the search to only show Miis that do: (go to next step)" },
+												{
+													text: "1. Go back to the search page, open the filters and press 'Has ShareMii File'",
+													imageSrc: "/tutorial/switch/adding-mii/modded/filter.png",
+												},
+												{
+													text: "2. The search will automatically update to show only Miis with ShareMii files",
+												},
+												{
+													text: "3. Open the tutorial again on those Miis to find out how to use the ShareMii file. (You should see this as the first step)",
+													imageSrc: "/tutorial/switch/adding-mii/modded/success.png",
+												},
+											]),
 									{ type: "finish" },
 								],
 							},

frontend/src/pages/mii.tsx

@@ -388,7 +388,7 @@ export default function MiiPage() {
 								<Icon icon="material-symbols:flag-rounded" />
 								<span>Report</span>
 							</Link>
-							{mii.platform === "THREE_DS" ? <ThreeDsScanTutorialButton /> : <SwitchAddMiiTutorialButton />}
+							{mii.platform === "THREE_DS" ? <ThreeDsScanTutorialButton /> : <SwitchAddMiiTutorialButton hasShareMiiFile={mii.isFromSaveFile} />}
 						</div>
 
 						{/* Instructions */}