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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
import { ButtonItem, PanelSectionRow } from "@decky/ui";
import type { SteamBranchStatus } from "../api/lsfgApi";
interface StatusDisplayProps {
isInstalled: boolean;
installationStatus: string;
losslessScalingInstalled: boolean;
losslessScalingStatus: string;
steamBranchStatus: SteamBranchStatus | null;
isSwitchingSteamBranch: boolean;
onSelectLosslessScalingBranch: () => void;
}
export function StatusDisplay({
isInstalled,
installationStatus,
losslessScalingInstalled,
losslessScalingStatus,
steamBranchStatus,
isSwitchingSteamBranch,
onSelectLosslessScalingBranch
}: StatusDisplayProps) {
return (
<>
<PanelSectionRow>
<div style={{ marginBottom: "8px", fontSize: "14px" }}>
<div
style={{
color: losslessScalingInstalled ? "#4CAF50" : "#F44336",
fontWeight: "600",
marginBottom: "6px",
display: "flex",
alignItems: "center",
gap: "6px"
}}
>
<span style={{ fontSize: "16px" }}>
{losslessScalingInstalled ? "✅" : "❌"}
</span>
{losslessScalingInstalled ? "Lossless Scaling Installed" : "Lossless Scaling Not Installed"}
</div>
{!losslessScalingInstalled && 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"
}}
>
<span style={{ fontSize: "16px" }}>
{isInstalled ? "✅" : "❌"}
</span>
{installationStatus}
</div>
</div>
</PanelSectionRow>
{losslessScalingInstalled && 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>
{steamBranchStatus.needs_switch && (
<ButtonItem
layout="below"
onClick={onSelectLosslessScalingBranch}
disabled={isSwitchingSteamBranch}
>
{isSwitchingSteamBranch ? "Selecting lsfg-vk..." : "Use lsfg-vk Steam branch"}
</ButtonItem>
)}
</div>
</PanelSectionRow>
)}
</>
);
}
|
