Merge pull request #308 from UnofficialCrusaderPatch/troubleshooter-d…

…ialog

Troubleshooter dialog

resources/lang/sources/en.yaml

@@ -236,6 +236,8 @@ titlebar.alt.close: "Close"
 titlebar.alt.icon: "Icon"
 titlebar.alt.maximize: "Maximize"
 titlebar.alt.minimize: "Minimize"
+troubleshooting.button: "Troubleshooting"
+troubleshooting.title: "Troubleshooting"
 ucp.download.cancelled: "User cancelled the download."
 ucp.download.download: "Downloading new framework version."
 ucp.download.downloaded: "Downloaded new framework version: {{version}}. Saving to game folder."

src-tauri/tauri.conf.json

@@ -52,7 +52,7 @@
         ]
       },
       "shell": {
-        "open": "^[A-Z]:[/\\\\]+.*"
+        "open": "^((mailto:\\w+)|(tel:\\w+)|(https?://\\w+)|([A-Z]:)).+"
       },
       "protocol": {
         "asset": true,

src/components/top-bar/top-bar.tsx

@@ -6,6 +6,7 @@ import CreditsButton from './credits/credits-button';
 import { ReloadButton } from './restart/reload-button';
 import LanguageSelect from './language-select/language-select';
 import { NewsButton } from './news/news-button';
+import { TroubleShootingButton } from './troubleshooting/troubleshooting-button';
 
 // eslint-disable-next-line import/prefer-default-export
 export function TopBar() {
@@ -19,7 +20,11 @@ export function TopBar() {
       <span className="mx-1" />
       <CreditsButton />
       <span className="mx-1" />
+      <TroubleShootingButton />
+      <span className="mx-1" />
+
       <ReloadButton />
+
       <LanguageSelect />
     </div>
   );

src/components/top-bar/troubleshooting/troubleshooting-button.tsx

@@ -0,0 +1,18 @@
+import Message from '../../general/message';
+import { setOverlayContent } from '../../overlay/overlay';
+import { Troubleshooting } from '../../troubleshooting/troubleshooting-window';
+
+// eslint-disable-next-line import/prefer-default-export
+export function TroubleShootingButton() {
+  return (
+    <button
+      type="button"
+      className="reload-button"
+      onClick={async () => {
+        setOverlayContent(Troubleshooting, true, true);
+      }}
+    >
+      <Message message="troubleshooting.button" />
+    </button>
+  );
+}

src/components/troubleshooting/troubleshooting-window.tsx

@@ -0,0 +1,47 @@
+import { atom, useAtomValue } from 'jotai';
+import { TROUBLESHOOTING_MD_CONTENT_ATOM } from '../../function/troubleshooting/state';
+import Message from '../general/message';
+import { SaferMarkdown } from '../markdown/safer-markdown';
+import { OverlayContentProps } from '../overlay/overlay';
+
+export const TROUBLESHOOTING_MD_ATOM = atom((get) => {
+  const { isSuccess, data } = get(TROUBLESHOOTING_MD_CONTENT_ATOM);
+
+  if (!isSuccess) {
+    return (
+      <SaferMarkdown>
+        Cannot display Troubleshooting document at this time
+      </SaferMarkdown>
+    );
+  }
+
+  return <SaferMarkdown>{data}</SaferMarkdown>;
+});
+
+export function Troubleshooting(props: OverlayContentProps) {
+  const { closeFunc } = props;
+  const md = useAtomValue(TROUBLESHOOTING_MD_ATOM);
+  return (
+    <div className="credits-container">
+      <h1 className="credits-title">
+        <Message message="troubleshooting.title" />
+      </h1>
+      <div
+        className="parchment-box credits-text-box"
+        style={{
+          backgroundColor: '#0d1117',
+          backgroundImage: 'none',
+        }}
+      >
+        <div className="credits-text text-light">{md}</div>
+      </div>
+      <button
+        type="button"
+        className="ucp-button credits-close"
+        onClick={closeFunc}
+      >
+        <Message message="close" />
+      </button>
+    </div>
+  );
+}

src/function/troubleshooting/state.ts

@@ -0,0 +1,25 @@
+import { atomWithQuery } from 'jotai-tanstack-query';
+import { ResponseType } from '@tauri-apps/api/http';
+import { fetch } from '../../tauri/tauri-http';
+
+// https://raw.githubusercontent.com/UnofficialCrusaderPatch/UnofficialCrusaderPatch/refs/heads/main/TROUBLESHOOTING.md
+// eslint-disable-next-line import/prefer-default-export
+export const TROUBLESHOOTING_MD_CONTENT_ATOM = atomWithQuery(() => ({
+  queryKey: ['troubleshooting'],
+  queryFn: async () => {
+    const request = await fetch<string>(
+      'https://raw.githubusercontent.com/UnofficialCrusaderPatch/UnofficialCrusaderPatch/refs/heads/main/TROUBLESHOOTING.md',
+      {
+        responseType: ResponseType.Text,
+        method: 'GET',
+      },
+    );
+
+    if (!request.ok) {
+      return 'Failed to fetch Troubleshooting document';
+    }
+
+    return request.data;
+  },
+  staleTime: Infinity,
+}));