src/components/ConfigFileTab.tsx


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

import { useEffect, useState } from "react";
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);

  useEffect(() => {
    getConfigFileContent().then(setResult).catch((error) => {
      setResult({ success: false, error: String(error) });
    });
  }, []);

  if (!result) {
    return (
      <PanelSection title={t("NERD_CONFIG_FILE", "Configuration File")}>
        <PanelSectionRow>
          <Spinner />
        </PanelSectionRow>
      </PanelSection>
    );
  }

  return (
    <PanelSection title={t("NERD_CONFIG_FILE", "Configuration File")}>
      {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>
  );
}