fix(plugin): merge tabs into single panel, use TextField for controller input

plugins/decky-vault/src/components/session-form.tsx

@@ -3,8 +3,8 @@ import {
   ButtonItem,
   PanelSection,
   PanelSectionRow,
-  Field,
   DropdownItem,
+  TextField,
   staticClasses,
 } from "@decky/ui"
 import {
@@ -138,15 +138,12 @@ export default function SessionForm({
         </PanelSectionRow>
 
         <PanelSectionRow>
-          <Field label="Upscaler Version" bottomSeparator="none">
+          <TextField
-            <input
+            label="Upscaler Version"
-              type="text"
             value={session.upscalerVersion}
             onChange={(e) => onUpdateSession({ upscalerVersion: e.target.value })}
             placeholder="e.g. 2.4"
-              style={{ width: "100%", padding: "4px 8px" }}
           />
-          </Field>
         </PanelSectionRow>
 
         <PanelSectionRow>
@@ -171,39 +168,32 @@ export default function SessionForm({
         </PanelSectionRow>
 
         <PanelSectionRow>
-          <Field label="Load Time - SSD (seconds)" bottomSeparator="none">
+          <TextField
-            <input
+            label="Load Time - SSD (seconds)"
-              type="number"
             value={session.loadTimeSsd}
             onChange={(e) => onUpdateSession({ loadTimeSsd: e.target.value })}
             placeholder="e.g. 12.5"
-              style={{ width: "100%", padding: "4px 8px" }}
+            mustBeNumeric
           />
-          </Field>
         </PanelSectionRow>
 
         <PanelSectionRow>
-          <Field label="Load Time - SD Card (seconds)" bottomSeparator="none">
+          <TextField
-            <input
+            label="Load Time - SD Card (seconds)"
-              type="number"
             value={session.loadTimeSd}
             onChange={(e) => onUpdateSession({ loadTimeSd: e.target.value })}
             placeholder="e.g. 25.0"
-              style={{ width: "100%", padding: "4px 8px" }}
+            mustBeNumeric
           />
-          </Field>
         </PanelSectionRow>
 
         <PanelSectionRow>
-          <Field label="Launch Options" bottomSeparator="none">
+          <TextField
-            <input
+            label="Launch Options"
-              type="text"
             value={session.launchOptions}
             onChange={(e) => onUpdateSession({ launchOptions: e.target.value })}
             placeholder="e.g. mangohud %command%"
-              style={{ width: "100%", padding: "4px 8px" }}
           />
-          </Field>
         </PanelSectionRow>
 
         <PanelSectionRow>

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

@@ -3,8 +3,8 @@ import {
   ButtonItem,
   PanelSection,
   PanelSectionRow,
-  Field,
   DropdownItem,
+  TextField,
   staticClasses,
 } from "@decky/ui"
 import {
@@ -83,15 +83,13 @@ export default function SettingsPanel({
       {/* ── API Key ─────────────────────────────────────────────── */}
       <PanelSection title="DeckyVault Account">
         <PanelSectionRow>
-          <Field label="API Key" bottomSeparator="none">
+          <TextField
-            <input
+            label="API Key"
-              type="password"
             value={settings.apiKey}
             onChange={(e) => onUpdateSetting("apiKey", e.target.value)}
             placeholder="dv_..."
-              style={{ width: "100%", padding: "4px 8px" }}
+            bIsPassword
           />
-          </Field>
         </PanelSectionRow>
 
         <PanelSectionRow>
@@ -127,27 +125,21 @@ export default function SettingsPanel({
       {/* ── Export Path ─────────────────────────────────────────── */}
       <PanelSection title="Export">
         <PanelSectionRow>
-          <Field label="Export Path" bottomSeparator="none">
+          <TextField
-            <input
+            label="Export Path"
-              type="text"
             value={settings.exportPath}
             onChange={(e) => onUpdateSetting("exportPath", e.target.value)}
             placeholder="/home/deck/Downloads"
-              style={{ width: "100%", padding: "4px 8px" }}
           />
-          </Field>
         </PanelSectionRow>
 
         <PanelSectionRow>
-          <Field label="Server URL" bottomSeparator="none">
+          <TextField
-            <input
+            label="Server URL"
-              type="text"
             value={settings.baseUrl}
             onChange={(e) => onUpdateSetting("baseUrl", e.target.value)}
             placeholder="https://deckyvault.xyz"
-              style={{ width: "100%", padding: "4px 8px" }}
           />
-          </Field>
         </PanelSectionRow>
 
         <PanelSectionRow>

plugins/decky-vault/src/index.tsx

@@ -1,8 +1,7 @@
-import { useState, useEffect, useRef } from "react"
+import { useEffect, useRef } from "react"
 import {
   PanelSection,
   PanelSectionRow,
-  ButtonItem,
   staticClasses,
 } from "@decky/ui"
 import {
@@ -37,7 +36,6 @@ function Content() {
     onGameStart,
     onGameStop,
   } = useSession()
-  const [activeTab, setActiveTab] = useState<"main" | "settings">("main")
   const gameStartedUnregRef = useRef<{ unregister: () => void } | null>(null)
   const gameStoppedUnregRef = useRef<{ unregister: () => void } | null>(null)
 
@@ -144,27 +142,6 @@ function Content() {
 
   return (
     <>
-      {/* ── Tab navigation ──────────────────────────────────────── */}
-      <PanelSection title="DeckyVault">
-        <PanelSectionRow>
-          <ButtonItem
-            layout="below"
-            onClick={() => setActiveTab("main")}
-          >
-            {activeTab === "main" ? "▶ Record" : "Record"}
-          </ButtonItem>
-        </PanelSectionRow>
-        <PanelSectionRow>
-          <ButtonItem
-            layout="below"
-            onClick={() => setActiveTab("settings")}
-          >
-            {activeTab === "settings" ? "▶ Settings" : "Settings"}
-          </ButtonItem>
-        </PanelSectionRow>
-      </PanelSection>
-
-      {activeTab === "main" ? (
       <MainPanel
         recordingState={recordingState}
         session={session}
@@ -178,12 +155,10 @@ function Content() {
         onReset={reset}
         setError={setError}
       />
-      ) : (
       <SettingsPanel
         settings={settings}
         onUpdateSetting={updateSetting}
       />
-      )}
     </>
   )
 }