Merge pull request #10 from GedasFX/feature/7

Add extendable help option for later use.

README.md

@@ -4,6 +4,12 @@ A plugin based on [rclone](https://rclone.org/), which allows users to back-up g
 
 Support: **[SteamDeckHomebrew Discord](https://discord.gg/ZU74G2NJzk)**.
 
+## Known Issues
+
+* The file picker does not work after a fresh installation. [Issue tracker](https://github.com/GedasFX/decky-cloud-save/issues/7).
+
+> Workaround: restart Steam and or Steam Deck.
+
 ## Features
 
 * Ability to sync game saves or arbitrary files to the cloud.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-cloud-save",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Manage cloud saves for games that do not support it in [current year].",
   "scripts": {
     "build": "shx rm -rf dist && rollup -c",

plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "Decky Cloud Save",
   "author": "GedasFX",
-  "flags": [],
+  "flags": ["debug"],
   "publish": {
     "tags": ["backup", "cloud", "rclone"],
     "description": "Manage cloud saves for games that do not support it in [current year].",

src/components/Container.tsx

@@ -1,9 +1,12 @@
 import { PropsWithChildren } from "react";
 
-export default function Container({ title, children }: PropsWithChildren<{ title: string }>) {
+export default function Container({ title, children, help }: PropsWithChildren<{ title: string; help?: JSX.Element }>) {
   return (
-    <div style={{ margin: "1em", overflow: "scroll", maxHeight: "calc(100% - 1em)" }}>
-      <h2 style={{ paddingTop: "0.5em" }}>{title}</h2>
+    <div style={{ margin: "1em", marginTop: "40px", overflow: "scroll", maxHeight: "calc(100% - 1em)" }}>
+      <h2 style={{ width: "100%", display: "flex", alignContent: "space-between" }}>
+        <span>{title}</span>
+        <span style={{ marginLeft: "auto" }}>{help}</span>
+      </h2>
       <div>{children}</div>
     </div>
   );

src/components/HelpAssistant.tsx

@@ -0,0 +1,32 @@
+import { ConfirmModal, Menu, MenuItem, Navigation, showContextMenu, showModal } from "decky-frontend-lib";
+
+export function HelpAssistant({ entries }: { entries: { label: string; description: string; issueId?: string }[] }) {
+  const openModal = (title: string, description: string, issueId?: string) => {
+    showModal(
+      <ConfirmModal
+        strTitle={title}
+        strDescription={<span style={{ whiteSpace: "pre-wrap" }}>{description}</span>}
+        bOKDisabled={!issueId}
+        strOKButtonText="Go to Issue"
+        strCancelButtonText="Close"
+        onOK={() => Navigation.NavigateToExternalWeb(`https://github.com/GedasFX/decky-cloud-save/issues/${issueId}`)}
+      />
+    );
+  };
+
+  const onClick = () => {
+    showContextMenu(
+      <Menu label="Help">
+        {entries.map((e) => (
+          <MenuItem onSelected={() => openModal(e.label, e.description, e.issueId)}>{e.label}</MenuItem>
+        ))}
+      </Menu>
+    );
+  };
+
+  return (
+    <span style={{ textDecoration: "underline", fontSize: "small", marginTop: "auto" }} onClick={onClick}>
+      Help?
+    </span>
+  );
+}

src/pages/ConfigurePathsPage.tsx

@@ -5,6 +5,7 @@ import AddNewPathButton from "../components/AddNewPathButton";
 import { toastError } from "../utils";
 import { RenderExistingPathButton } from "../components/RenderExistingPathButton";
 import Container from "../components/Container";
+import { HelpAssistant } from "../components/HelpAssistant";
 
 export default function ConfigurePathsPage({ serverApi }: PageProps<{}>) {
   const [paths, setPaths] = useState<string[] | undefined>(undefined);
@@ -32,7 +33,20 @@ export default function ConfigurePathsPage({ serverApi }: PageProps<{}>) {
   useEffect(() => onPathsUpdated(), []);
 
   return (
-    <Container title="Sync Paths">
+    <Container
+      title="Sync Paths"
+      help={
+        <HelpAssistant
+          entries={[
+            {
+              label: "File Picker loads indefinitely",
+              description: "After a fresh install, the file picker sometimes fails to load. Restarting Steam fixes this.",
+              issueId: "7",
+            },
+          ]}
+        />
+      }
+    >
       <PanelSection>
         <PanelSectionRow>
           <AddNewPathButton serverApi={serverApi} onPathAdded={onPathsUpdated} />