fix(plugin): move Recording to top, clean up setup guide layout

plugins/decky-vault/src/components/main-panel.tsx

@@ -212,77 +212,6 @@ export default function MainPanel({
 
   return (
     <>
-      {/* ── Status ──────────────────────────────────────────────── */}
-      <PanelSection title="Status">
-        <PanelSectionRow>
-          <ButtonItem layout="below" onClick={handleCheckMangohud}>
-            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-              <FaCog />
-              Check MangoHud Status
-            </div>
-          </ButtonItem>
-        </PanelSectionRow>
-        {mangohudStatus.checked && (
-          <PanelSectionRow>
-            <div className={staticClasses.Text} style={{ fontSize: "13px", padding: "4px 0" }}>
-              {mangohudStatus.installed ? (
-                <><FaCheck style={{ color: "#2ecc71" }} /> MangoHud {mangohudStatus.version}</>
-              ) : (
-                <><FaTimes style={{ color: "#e74c3c" }} /> MangoHud not found</>
-              )}
-            </div>
-          </PanelSectionRow>
-        )}
-        <PanelSectionRow>
-          <ButtonItem layout="below" onClick={handleTestKey} disabled={keyTestStatus === "testing"}>
-            {keyTestStatus === "testing" ? "Testing..." : "Test API Key"}
-            {keyTestStatus === "valid" && <FaCheck style={{ color: "#2ecc71", marginLeft: "8px" }} />}
-            {keyTestStatus === "invalid" && <FaTimes style={{ color: "#e74c3c", marginLeft: "8px" }} />}
-          </ButtonItem>
-        </PanelSectionRow>
-        {keyTestMessage && (
-          <PanelSectionRow>
-            <div className={staticClasses.Text} style={{ fontSize: "12px", color: keyTestStatus === "valid" ? "#2ecc71" : "#e74c3c", padding: "4px 0" }}>
-              {keyTestMessage}
-            </div>
-          </PanelSectionRow>
-        )}
-      </PanelSection>
-
-      {/* ── Usage Instructions ──────────────────────────────────── */}
-      <PanelSection title="Usage Instructions">
-        <PanelSectionRow>
-          <div className={staticClasses.Text} style={{ fontSize: "12px", padding: "4px 0", lineHeight: "1.5" }}>
-            Add this to your game's Steam launch options, then press Start Recording before launching.
-          </div>
-        </PanelSectionRow>
-        <PanelSectionRow>
-          <div style={{
-            background: "rgba(255,255,255,0.1)",
-            borderRadius: "8px",
-            padding: "10px 14px",
-            fontFamily: "monospace",
-            fontSize: "14px",
-            textAlign: "center",
-          }}>
-            mangohud %command%
-          </div>
-        </PanelSectionRow>
-        <PanelSectionRow>
-          <ButtonItem layout="below" onClick={handleCopyLaunchOption}>
-            <div style={{ display: "flex", alignItems: "center", gap: "8px", justifyContent: "center" }}>
-              <FaCopy />
-              {copiedLaunchOpt ? "Copied to clipboard" : "Copy Launch Option"}
-            </div>
-          </ButtonItem>
-        </PanelSectionRow>
-        <PanelSectionRow>
-          <div className={staticClasses.Text} style={{ fontSize: "11px", opacity: 0.6, padding: "4px 0" }}>
-            The MangoHud config is stored in ~/.config/MangoHud/MangoHud.conf
-          </div>
-        </PanelSectionRow>
-      </PanelSection>
-
       {/* ── Recording ──────────────────────────────────────────── */}
       <PanelSection title="Recording">
         {error && (
@@ -353,6 +282,77 @@ export default function MainPanel({
         )}
       </PanelSection>
 
+      {/* ── Status ──────────────────────────────────────────────── */}
+      <PanelSection title="Status">
+        <PanelSectionRow>
+          <ButtonItem layout="below" onClick={handleCheckMangohud}>
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <FaCog />
+              Check MangoHud Status
+            </div>
+          </ButtonItem>
+        </PanelSectionRow>
+        {mangohudStatus.checked && (
+          <PanelSectionRow>
+            <div className={staticClasses.Text} style={{ fontSize: "13px", padding: "4px 0" }}>
+              {mangohudStatus.installed ? (
+                <><FaCheck style={{ color: "#2ecc71" }} /> MangoHud {mangohudStatus.version}</>
+              ) : (
+                <><FaTimes style={{ color: "#e74c3c" }} /> MangoHud not found</>
+              )}
+            </div>
+          </PanelSectionRow>
+        )}
+        <PanelSectionRow>
+          <ButtonItem layout="below" onClick={handleTestKey} disabled={keyTestStatus === "testing"}>
+            {keyTestStatus === "testing" ? "Testing..." : "Test API Key"}
+            {keyTestStatus === "valid" && <FaCheck style={{ color: "#2ecc71", marginLeft: "8px" }} />}
+            {keyTestStatus === "invalid" && <FaTimes style={{ color: "#e74c3c", marginLeft: "8px" }} />}
+          </ButtonItem>
+        </PanelSectionRow>
+        {keyTestMessage && (
+          <PanelSectionRow>
+            <div className={staticClasses.Text} style={{ fontSize: "12px", color: keyTestStatus === "valid" ? "#2ecc71" : "#e74c3c", padding: "4px 0" }}>
+              {keyTestMessage}
+            </div>
+          </PanelSectionRow>
+        )}
+      </PanelSection>
+
+      {/* ── Usage Instructions ──────────────────────────────────── */}
+      <PanelSection title="Usage Instructions">
+        <PanelSectionRow>
+          <div className={staticClasses.Text} style={{ fontSize: "12px", padding: "4px 0", lineHeight: "1.5" }}>
+            Add this to your game's Steam launch options, then press Start Recording before launching.
+          </div>
+        </PanelSectionRow>
+        <PanelSectionRow>
+          <div style={{
+            background: "rgba(255,255,255,0.1)",
+            borderRadius: "8px",
+            padding: "10px 14px",
+            fontFamily: "monospace",
+            fontSize: "14px",
+            textAlign: "center",
+          }}>
+            mangohud %command%
+          </div>
+        </PanelSectionRow>
+        <PanelSectionRow>
+          <ButtonItem layout="below" onClick={handleCopyLaunchOption}>
+            <div style={{ display: "flex", alignItems: "center", gap: "8px", justifyContent: "center" }}>
+              <FaCopy />
+              {copiedLaunchOpt ? "Copied to clipboard" : "Copy Launch Option"}
+            </div>
+          </ButtonItem>
+        </PanelSectionRow>
+        <PanelSectionRow>
+          <div className={staticClasses.Text} style={{ fontSize: "11px", opacity: 0.6, padding: "4px 0" }}>
+            Config stored in ~/.config/MangoHud/MangoHud.conf
+          </div>
+        </PanelSectionRow>
+      </PanelSection>
+
       {/* ── MangoHud Config ────────────────────────────────────── */}
       <PanelSection title="MangoHud Config">
         <PanelSectionRow>
@@ -451,28 +451,18 @@ export default function MainPanel({
       <PanelSection title="MangoHud Setup Guide">
         <PanelSectionRow>
           <div className={staticClasses.Text} style={{ fontSize: "12px", padding: "8px", lineHeight: "1.6" }}>
-            <strong>Steam Deck (SteamOS):</strong><br />
+            <strong>Steam Deck (SteamOS):</strong> MangoHud is pre-installed. Add <code>mangohud %command%</code> to your game's Steam launch options (right-click → Properties → Launch Options).
-            MangoHud is pre-installed. Enable it per-game by adding<br />
+          </div>
-            <code style={{ display: "block", margin: "4px 0", padding: "4px", background: "rgba(255,255,255,0.1)" }}>
+        </PanelSectionRow>
-              mangohud %command%
+        <PanelSectionRow>
-            </code>
+          <div className={staticClasses.Text} style={{ fontSize: "12px", padding: "8px", lineHeight: "1.6" }}>
-            to the game's Steam launch options (right-click game → Properties → Launch Options).
+            <strong>Other Linux:</strong> Install via <code>sudo apt install mangohud</code> or <code>flatpak install ...VulkanLayer.MangoHud</code>. See{" "}
-
+            <a href="https://github.com/flightlessmango/MangoHud" style={{ color: "#66c0f4" }}>github.com/flightlessmango/MangoHud</a>.
-            <br /><br />
+          </div>
-            <strong>Other Linux handhelds</strong> (ROG Ally, Legion Go):<br />
+        </PanelSectionRow>
-            Install via package manager:
+        <PanelSectionRow>
-            <code style={{ display: "block", margin: "4px 0", padding: "4px", background: "rgba(255,255,255,0.1)" }}>
+          <div className={staticClasses.Text} style={{ fontSize: "12px", padding: "8px", lineHeight: "1.6" }}>
-              sudo apt install mangohud
+            <strong>Troubleshooting:</strong> Log empty? Check MangoHud is enabled. Not attaching? Add <code>mangohud %command%</code> to launch options explicitly.
-            </code>
-            or Flatpak:
-            <code style={{ display: "block", margin: "4px 0", padding: "4px", background: "rgba(255,255,255,0.1)" }}>
-              flatpak install flathub org.freedesktop.Platform.VulkanLayer.MangoHud
-            </code>
-
-            <br /><br />
-            <strong>Troubleshooting:</strong><br />
-            • Log file empty? Check MangoHud is enabled for the game and the config was written.<br />
-            • Not attaching? Try adding <code>mangohud %command%</code> to Steam launch options explicitly.
           </div>
         </PanelSectionRow>
       </PanelSection>