1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import { PanelSectionRow } from "@decky/ui";
import type { SteamBranchStatus } from "../api/lsfgApi";
interface StatusDisplayProps {
isInstalled: boolean;
installationStatus: string;
losslessScalingInstalled: boolean;
losslessScalingStatus: string;
steamBranchStatus: SteamBranchStatus | null;
}
export function StatusDisplay({
isInstalled,
installationStatus,
losslessScalingInstalled,
losslessScalingStatus,
steamBranchStatus
}: StatusDisplayProps) {
const losslessScalingAppInstalled = losslessScalingInstalled || steamBranchStatus?.installed === true;
return (
<>
<PanelSectionRow>
<div style={{ marginBottom: "8px", fontSize: "14px" }}>
<div
style={{
color: losslessScalingAppInstalled ? "#4CAF50" : "#F44336",
fontWeight: "600",
marginBottom: "6px",
display: "flex",
alignItems: "center",
gap: "6px"
}}
>
{losslessScalingAppInstalled ? "Lossless Scaling Installed" : "Lossless Scaling Not Installed"}
</div>
{!losslessScalingAppInstalled && losslessScalingStatus && (
<div style={{ color: "#B8B8B8", fontSize: "12px", margin: "0 0 6px 22px" }}>
{losslessScalingStatus}
</div>
)}
<div
style={{
color: isInstalled ? "#4CAF50" : "#FF9800",
fontWeight: "600",
display: "flex",
alignItems: "center",
gap: "6px"
}}
>
{installationStatus}
</div>
</div>
</PanelSectionRow>
{steamBranchStatus?.installed && (
<PanelSectionRow>
<div style={{ width: "100%" }}>
<div
style={{
color: steamBranchStatus.needs_switch ? "#FF9800" : "#4CAF50",
fontSize: "12px",
margin: "0 0 6px 22px"
}}
>
Steam branch: {steamBranchStatus.current_branch || "public"}
{steamBranchStatus.needs_switch && (
<div style={{ color: "#B8B8B8", marginTop: "3px" }}>
{steamBranchStatus.message}
</div>
)}
</div>
</div>
</PanelSectionRow>
)}
</>
);
}
|
