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

2026-06-28 17:29:22 +08:00
parent 5a6211ebea
commit 2168d31052
3 changed files with 65 additions and 108 deletions
@@ -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">
-            <input
-              type="text"
-              value={session.upscalerVersion}
-              onChange={(e) => onUpdateSession({ upscalerVersion: e.target.value })}
-              placeholder="e.g. 2.4"
-              style={{ width: "100%", padding: "4px 8px" }}
-            />
-          </Field>
+          <TextField
+            label="Upscaler Version"
+            value={session.upscalerVersion}
+            onChange={(e) => onUpdateSession({ upscalerVersion: e.target.value })}
+            placeholder="e.g. 2.4"
+          />
        </PanelSectionRow>

        <PanelSectionRow>
@@ -171,39 +168,32 @@ export default function SessionForm({
        </PanelSectionRow>

        <PanelSectionRow>
-          <Field label="Load Time - SSD (seconds)" bottomSeparator="none">
-            <input
-              type="number"
-              value={session.loadTimeSsd}
-              onChange={(e) => onUpdateSession({ loadTimeSsd: e.target.value })}
-              placeholder="e.g. 12.5"
-              style={{ width: "100%", padding: "4px 8px" }}
-            />
-          </Field>
+          <TextField
+            label="Load Time - SSD (seconds)"
+            value={session.loadTimeSsd}
+            onChange={(e) => onUpdateSession({ loadTimeSsd: e.target.value })}
+            placeholder="e.g. 12.5"
+            mustBeNumeric
+          />
        </PanelSectionRow>

        <PanelSectionRow>
-          <Field label="Load Time - SD Card (seconds)" bottomSeparator="none">
-            <input
-              type="number"
-              value={session.loadTimeSd}
-              onChange={(e) => onUpdateSession({ loadTimeSd: e.target.value })}
-              placeholder="e.g. 25.0"
-              style={{ width: "100%", padding: "4px 8px" }}
-            />
-          </Field>
+          <TextField
+            label="Load Time - SD Card (seconds)"
+            value={session.loadTimeSd}
+            onChange={(e) => onUpdateSession({ loadTimeSd: e.target.value })}
+            placeholder="e.g. 25.0"
+            mustBeNumeric
+          />
        </PanelSectionRow>

        <PanelSectionRow>
-          <Field label="Launch Options" bottomSeparator="none">
-            <input
-              type="text"
-              value={session.launchOptions}
-              onChange={(e) => onUpdateSession({ launchOptions: e.target.value })}
-              placeholder="e.g. mangohud %command%"
-              style={{ width: "100%", padding: "4px 8px" }}
-            />
-          </Field>
+          <TextField
+            label="Launch Options"
+            value={session.launchOptions}
+            onChange={(e) => onUpdateSession({ launchOptions: e.target.value })}
+            placeholder="e.g. mangohud %command%"
+          />
        </PanelSectionRow>

        <PanelSectionRow>
@@ -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">
-            <input
-              type="password"
-              value={settings.apiKey}
-              onChange={(e) => onUpdateSetting("apiKey", e.target.value)}
-              placeholder="dv_..."
-              style={{ width: "100%", padding: "4px 8px" }}
-            />
-          </Field>
+          <TextField
+            label="API Key"
+            value={settings.apiKey}
+            onChange={(e) => onUpdateSetting("apiKey", e.target.value)}
+            placeholder="dv_..."
+            bIsPassword
+          />
        </PanelSectionRow>

        <PanelSectionRow>
@@ -127,27 +125,21 @@ export default function SettingsPanel({
      {/* ── Export Path ─────────────────────────────────────────── */}
      <PanelSection title="Export">
        <PanelSectionRow>
-          <Field label="Export Path" bottomSeparator="none">
-            <input
-              type="text"
-              value={settings.exportPath}
-              onChange={(e) => onUpdateSetting("exportPath", e.target.value)}
-              placeholder="/home/deck/Downloads"
-              style={{ width: "100%", padding: "4px 8px" }}
-            />
-          </Field>
+          <TextField
+            label="Export Path"
+            value={settings.exportPath}
+            onChange={(e) => onUpdateSetting("exportPath", e.target.value)}
+            placeholder="/home/deck/Downloads"
+          />
        </PanelSectionRow>

        <PanelSectionRow>
-          <Field label="Server URL" bottomSeparator="none">
-            <input
-              type="text"
-              value={settings.baseUrl}
-              onChange={(e) => onUpdateSetting("baseUrl", e.target.value)}
-              placeholder="https://deckyvault.xyz"
-              style={{ width: "100%", padding: "4px 8px" }}
-            />
-          </Field>
+          <TextField
+            label="Server URL"
+            value={settings.baseUrl}
+            onChange={(e) => onUpdateSetting("baseUrl", e.target.value)}
+            placeholder="https://deckyvault.xyz"
+          />
        </PanelSectionRow>

        <PanelSectionRow>
@@ -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,46 +142,23 @@ 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}
-          recentSessions={recentSessions}
-          error={error}
-          settings={settings}
-          onStart={handleStart}
-          onStop={handleStop}
-          onUpdateSession={updateSession}
-          onAddToRecent={addToRecent}
-          onReset={reset}
-          setError={setError}
-        />
-      ) : (
-        <SettingsPanel
-          settings={settings}
-          onUpdateSetting={updateSetting}
-        />
-      )}
+      <MainPanel
+        recordingState={recordingState}
+        session={session}
+        recentSessions={recentSessions}
+        error={error}
+        settings={settings}
+        onStart={handleStart}
+        onStop={handleStop}
+        onUpdateSession={updateSession}
+        onAddToRecent={addToRecent}
+        onReset={reset}
+        setError={setError}
+      />
+      <SettingsPanel
+        settings={settings}
+        onUpdateSetting={updateSetting}
+      />
    </>
  )
 }