summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/ConfigFileTab.tsx42
-rw-r--r--src/components/FlatpaksTab.tsx37
-rw-r--r--src/components/InstallationButton.tsx43
-rw-r--r--src/components/SetupTab.tsx1
-rw-r--r--src/components/StatusDisplay.tsx61
5 files changed, 57 insertions, 127 deletions
diff --git a/src/components/ConfigFileTab.tsx b/src/components/ConfigFileTab.tsx
index 60c5c7e..e3cc09d 100644
--- a/src/components/ConfigFileTab.tsx
+++ b/src/components/ConfigFileTab.tsx
@@ -1,19 +1,11 @@
import { useEffect, useState } from "react";
-import { Field, Focusable, PanelSection, PanelSectionRow, Spinner } from "@decky/ui";
+import { Field, PanelSection, PanelSectionRow, Spinner } from "@decky/ui";
import { getConfigFileContent, FileContentResult } from "../api/lsfgApi";
import t from "../i18n/i18n";
export function ConfigFileTab() {
const [result, setResult] = useState<FileContentResult | null>(null);
- const copy = async (content: string) => {
- try {
- await navigator.clipboard.writeText(content);
- } catch {
- // Clipboard access is unavailable in some Deck UI contexts.
- }
- };
-
useEffect(() => {
getConfigFileContent().then(setResult).catch((error) => {
setResult({ success: false, error: String(error) });
@@ -23,24 +15,32 @@ export function ConfigFileTab() {
if (!result) {
return (
<PanelSection title={t("NERD_CONFIG_FILE", "Configuration File")}>
- <PanelSectionRow><Spinner /></PanelSectionRow>
+ <PanelSectionRow>
+ <Spinner />
+ </PanelSectionRow>
</PanelSection>
);
}
return (
<PanelSection title={t("NERD_CONFIG_FILE", "Configuration File")}>
- <PanelSectionRow>
- <Field label={result.path || t("NERD_CONFIG_FILE", "Configuration File")} description={result.error || "Tap the file to copy it."}>
- {result.success && result.content && (
- <Focusable onActivate={() => void copy(result.content || "")}>
- <pre style={{ maxHeight: "420px", overflow: "auto", whiteSpace: "pre-wrap", fontSize: "12px" }}>
- {result.content}
- </pre>
- </Focusable>
- )}
- </Field>
- </PanelSectionRow>
+ {result.error && (
+ <PanelSectionRow>
+ <Field label="Error" description={result.error} />
+ </PanelSectionRow>
+ )}
+ {result.success && result.content && (
+ <>
+ <PanelSectionRow>
+ <Field label="Config file" description={result.path} />
+ </PanelSectionRow>
+ <PanelSectionRow>
+ <pre style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>
+ {result.content}
+ </pre>
+ </PanelSectionRow>
+ </>
+ )}
</PanelSection>
);
}
diff --git a/src/components/FlatpaksTab.tsx b/src/components/FlatpaksTab.tsx
index dc73858..b4d5e4d 100644
--- a/src/components/FlatpaksTab.tsx
+++ b/src/components/FlatpaksTab.tsx
@@ -1,15 +1,12 @@
import { useEffect, useState } from "react";
import {
- ButtonItem,
ConfirmModal,
Field,
PanelSection,
PanelSectionRow,
- Spinner,
- Toggle,
+ ToggleField,
showModal,
} from "@decky/ui";
-import { FaCheck, FaCog, FaDownload, FaTimes, FaTrash } from "react-icons/fa";
import {
checkFlatpakExtensionStatus,
FlatpakApp,
@@ -40,15 +37,13 @@ interface RuntimeRowProps {
function RuntimeRow({ version, installed, busy, onAction }: RuntimeRowProps) {
return (
<PanelSectionRow>
- <Field
+ <ToggleField
label={`Runtime ${version}`}
- description={installed ? t("FLATPAK_INSTALLED", "Installed") : t("FLATPAK_NOT_INSTALLED", "Not installed")}
- icon={installed ? <FaCheck style={{ color: "green" }} /> : <FaTimes style={{ color: "red" }} />}
- >
- <ButtonItem layout="below" onClick={onAction} disabled={busy}>
- {busy ? <Spinner /> : installed ? <><FaTrash /> {t("FLATPAK_UNINSTALL_BTN", "Uninstall")}</> : <><FaDownload /> {t("FLATPAK_INSTALL_BTN", "Install")}</>}
- </ButtonItem>
- </Field>
+ description={busy ? "Updating..." : installed ? t("FLATPAK_INSTALLED", "Installed") : t("FLATPAK_NOT_INSTALLED", "Not installed")}
+ checked={installed}
+ onChange={() => onAction()}
+ disabled={busy}
+ />
</PanelSectionRow>
);
}
@@ -70,13 +65,13 @@ function AppRow({ app, busy, onToggle }: AppRowProps) {
return (
<PanelSectionRow>
- <Field
+ <ToggleField
label={app.app_name || app.app_id}
description={`${app.app_id} - ${status}`}
- icon={<FaCog style={{ color: configured ? "green" : partial ? "orange" : "red" }} />}
- >
- <Toggle value={configured} onChange={onToggle} disabled={busy} />
- </Field>
+ checked={configured}
+ onChange={onToggle}
+ disabled={busy}
+ />
</PanelSectionRow>
);
}
@@ -162,13 +157,13 @@ export function FlatpaksTab() {
};
if (loading) {
- return <PanelSection title={t("FLATPAK_MODAL_TITLE", "Flatpak Extensions")}><PanelSectionRow><Spinner /></PanelSectionRow></PanelSection>;
+ return <PanelSection title="Runtimes" spinner />;
}
return (
<>
- <PanelSection title={t("FLATPAK_RUNTIME_INSTALLER", "Runtime Extension Installer")}>
- {error && <PanelSectionRow><Field label={t("FLATPAK_OPERATION_ERROR", "Operation failed")} description={error} icon={<FaTimes style={{ color: "red" }} />} /></PanelSectionRow>}
+ <PanelSection title="Runtimes">
+ {error && <PanelSectionRow><Field label={t("FLATPAK_OPERATION_ERROR", "Operation failed")} description={error} /></PanelSectionRow>}
{extensionStatus?.success ? runtimeVersions.map(({ version, key }) => (
<RuntimeRow
key={version}
@@ -180,7 +175,7 @@ export function FlatpaksTab() {
)) : <PanelSectionRow><Field label={t("FLATPAK_ERROR", "Error")} description={extensionStatus?.error || error || t("FLATPAK_ERROR_STATUS", "Failed to check extension status")} /></PanelSectionRow>}
</PanelSection>
- <PanelSection title={t("FLATPAK_APPS_TITLE", "Flatpak Applications")}>
+ <PanelSection title="Applications">
{apps?.success ? apps.apps.length ? apps.apps.map((app) => (
<AppRow
key={app.app_id}
diff --git a/src/components/InstallationButton.tsx b/src/components/InstallationButton.tsx
index 7f0ac96..1bf10ac 100644
--- a/src/components/InstallationButton.tsx
+++ b/src/components/InstallationButton.tsx
@@ -1,5 +1,4 @@
import { ButtonItem, PanelSectionRow } from "@decky/ui";
-import { FaDownload, FaTrash } from "react-icons/fa";
import t from '../i18n/i18n';
interface InstallationButtonProps {
@@ -17,39 +16,13 @@ export function InstallationButton({
onInstall,
onUninstall
}: InstallationButtonProps) {
- const renderButtonContent = () => {
- if (isInstalling) {
- return (
- <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
- <div>{t('INSTALL_INSTALLING', 'Installing...')}</div>
- </div>
- );
- }
-
- if (isUninstalling) {
- return (
- <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
- <div>{t('INSTALL_UNINSTALLING', 'Uninstalling...')}</div>
- </div>
- );
- }
-
- if (isInstalled) {
- return (
- <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
- <FaTrash />
- <div>{t('INSTALL_UNINSTALL_BTN', 'Uninstall LSFG-VK')}</div>
- </div>
- );
- }
-
- return (
- <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
- <FaDownload />
- <div>{t('INSTALL_INSTALL_BTN', 'Install LSFG-VK')}</div>
- </div>
- );
- };
+ const label = isInstalling
+ ? t('INSTALL_INSTALLING', 'Installing...')
+ : isUninstalling
+ ? t('INSTALL_UNINSTALLING', 'Uninstalling...')
+ : isInstalled
+ ? t('INSTALL_UNINSTALL_BTN', 'Uninstall LSFG-VK')
+ : t('INSTALL_INSTALL_BTN', 'Install LSFG-VK');
return (
<PanelSectionRow>
@@ -58,7 +31,7 @@ export function InstallationButton({
onClick={isInstalled ? onUninstall : onInstall}
disabled={isInstalling || isUninstalling}
>
- {renderButtonContent()}
+ {label}
</ButtonItem>
</PanelSectionRow>
);
diff --git a/src/components/SetupTab.tsx b/src/components/SetupTab.tsx
index 34106ed..98d6e78 100644
--- a/src/components/SetupTab.tsx
+++ b/src/components/SetupTab.tsx
@@ -29,7 +29,6 @@ export function SetupTab({
return (
<PanelSection title="Setup">
<StatusDisplay
- isInstalled={isInstalled}
installationStatus={installationStatus}
losslessScalingInstalled={losslessScalingInstalled}
losslessScalingStatus={losslessScalingStatus}
diff --git a/src/components/StatusDisplay.tsx b/src/components/StatusDisplay.tsx
index 767e5fc..b1a98e5 100644
--- a/src/components/StatusDisplay.tsx
+++ b/src/components/StatusDisplay.tsx
@@ -1,8 +1,7 @@
-import { PanelSectionRow } from "@decky/ui";
+import { Field, PanelSectionRow } from "@decky/ui";
import type { SteamBranchStatus } from "../api/lsfgApi";
interface StatusDisplayProps {
- isInstalled: boolean;
installationStatus: string;
losslessScalingInstalled: boolean;
losslessScalingStatus: string;
@@ -10,7 +9,6 @@ interface StatusDisplayProps {
}
export function StatusDisplay({
- isInstalled,
installationStatus,
losslessScalingInstalled,
losslessScalingStatus,
@@ -21,56 +19,21 @@ export function StatusDisplay({
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>
+ <Field
+ label="Lossless Scaling"
+ description={losslessScalingAppInstalled ? "Installed" : losslessScalingStatus || "Not installed"}
+ />
+ </PanelSectionRow>
+ <PanelSectionRow>
+ <Field label="LSFG-VK" description={installationStatus} />
</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>
+ <Field
+ label="Steam branch"
+ description={`${steamBranchStatus.current_branch || "public"}${steamBranchStatus.needs_switch ? ` - ${steamBranchStatus.message}` : ""}`}
+ />
</PanelSectionRow>
)}
</>
generated by cgit v1.2.3 (git 2.25.1) at 2026-09-07 20:58:42 +0000