adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(plugin): single row — stats + View Details inline, space-between

Browse Source
This commit is contained in:
adrianbonpin
2026-07-13 06:41:15 +08:00
parent eedcf9efa6
commit a66c13daa0
1 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/decky-vault/src/components/LibraryAppPanel.tsx
+28 -21
View File
@@ -1,5 +1,5 @@
import { useEffect, useState, useRef } from "react" import { useEffect, useState, useRef } from "react"
import { PanelSectionRow, ButtonItem, staticClasses } from "@decky/ui" import { PanelSectionRow, staticClasses } from "@decky/ui"
import { Router } from "@decky/ui" import { Router } from "@decky/ui"
import { import {
fetchPluginGame, fetchPluginGame,
@@ -109,12 +109,12 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
} }
return ( return (
<> <PanelSectionRow>
{/* Stats row */} <div className={staticClasses.Text} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px", padding: "4px 16px", fontSize: "13px" }}>
<PanelSectionRow> {/* Stats */}
<div className={staticClasses.Text} style={{ padding: "4px 16px", fontSize: "13px", textAlign: "center" }}> <span style={{ flex: 1 }}>
{data.estFps ? ( {data.estFps ? (
<span style={{ display: "inline-flex", flexWrap: "wrap", gap: "4px 8px", justifyContent: "center" }}> <span style={{ display: "inline-flex", flexWrap: "wrap", gap: "4px 8px" }}>
<span><strong>{data.estFps.avg}</strong> <span style={{ opacity: 0.4 }}>avg</span></span> <span><strong>{data.estFps.avg}</strong> <span style={{ opacity: 0.4 }}>avg</span></span>
{data.estFps.onePct != null && <span><strong>{data.estFps.onePct}</strong> <span style={{ opacity: 0.4 }}>1% low</span></span>} {data.estFps.onePct != null && <span><strong>{data.estFps.onePct}</strong> <span style={{ opacity: 0.4 }}>1% low</span></span>}
{data.estFps.low != null && <span><strong>{data.estFps.low}</strong> <span style={{ opacity: 0.4 }}>min</span></span>} {data.estFps.low != null && <span><strong>{data.estFps.low}</strong> <span style={{ opacity: 0.4 }}>min</span></span>}
@@ -126,20 +126,27 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
<span style={{ opacity: 0.4, fontSize: "12px" }}>No data yet</span> <span style={{ opacity: 0.4, fontSize: "12px" }}>No data yet</span>
)} )}
{/* Device scope badge */} {/* Device scope badge */}
<div style={{ fontSize: "10px", opacity: 0.4, marginTop: "2px" }}> <span style={{ fontSize: "10px", opacity: 0.4, marginLeft: "4px" }}>
{detectedSlug ? detectedSlug : <span style={{ color: "#e0a030" }}>⚠ global (device not detected)</span>} {detectedSlug ? detectedSlug : <span style={{ color: "#e0a030" }}>⚠ global</span>}
</div> </span>
</div> </span>
</PanelSectionRow> {/* View Details — compact inline button */}
<button
{/* Compact View Details button */} onClick={() => openExternalUrl(gameUrl)}
<PanelSectionRow> style={{
<div style={{ display: "flex", justifyContent: "center", padding: "0 16px" }}> flexShrink: 0,
<ButtonItem layout="below" onClick={() => openExternalUrl(gameUrl)} style={{ width: "auto", minWidth: "120px" }}> background: "rgba(255,255,255,0.08)",
View Details border: "1px solid rgba(255,255,255,0.12)",
</ButtonItem> borderRadius: "6px",
</div> color: "inherit",
</PanelSectionRow> fontSize: "12px",
</> padding: "4px 10px",
cursor: "pointer",
}}
>
View Details
</button>
</div>
</PanelSectionRow>
) )
} }