wip: refactor

src/app/error.tsx

@@ -1,21 +1,79 @@
-import { useRouteError } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useLocation, useRouteError } from 'react-router-dom';
 
 interface IRouteError {
   statusText: string;
   message: string;
 }
 
+interface IDebugInfo {
+  os: null | string;
+  version: null | string;
+}
+
 export function ErrorScreen() {
   const error = useRouteError() as IRouteError;
+  const location = useLocation();
+
+  const [debugInfo, setDebugInfo] = useState<IDebugInfo>({ os: null, version: null });
+
+  useEffect(() => {
+    async function getInformation() {
+      const { platform, version } = await import('@tauri-apps/plugin-os');
+      const { getVersion } = await import('@tauri-apps/plugin-app');
+
+      const platformName = await platform();
+      const osVersion = await version();
+      const appVersion = await getVersion();
+
+      setDebugInfo({ os: platformName + ' ' + osVersion, version: appVersion });
+    }
+
+    getInformation();
+  }, []);
 
   return (
-    <div className="flex h-full w-full items-center justify-center">
-      <div>
-        <h1>Oops!</h1>
-        <p>Sorry, an unexpected error has occurred.</p>
-        <p>
-          <i>{error.statusText || error.message}</i>
-        </p>
+    <div className="flex h-full w-full items-center justify-center bg-black/90">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col">
+          <h1 className="mb-1 text-2xl font-semibold text-white">
+            Sorry, an unexpected error has occurred.
+          </h1>
+          <div className="mt-4 inline-flex h-16 items-center justify-center rounded-xl border border-dashed border-red-400 bg-red-200/10 px-5">
+            <p className="text-sm font-medium text-red-400">
+              {error.statusText || error.message}
+            </p>
+          </div>
+          <div className="mt-4">
+            <p className="font-medium text-white/50">
+              Current location: {location.pathname}
+            </p>
+            <p className="font-medium text-white/50">App version: {debugInfo.version}</p>
+            <p className="font-medium text-white/50">Platform: {debugInfo.os}</p>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <a
+            href="https://github.com/luminous-devs/lume/issues/new"
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
+          >
+            Click here to report the issue on GitHub
+          </a>
+          <button
+            type="button"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
+          >
+            Reload app
+          </button>
+          <button
+            type="button"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
+          >
+            Reset app
+          </button>
+        </div>
       </div>
     </div>
   );