update error screen

src/app/error.tsx

@@ -1,85 +1,138 @@
-import { useEffect, useState } from 'react';
-import { useLocation, useRouteError } from 'react-router-dom';
+import { downloadDir } from '@tauri-apps/api/path';
+import { message, save } from '@tauri-apps/plugin-dialog';
+import { writeTextFile } from '@tauri-apps/plugin-fs';
+import { relaunch } from '@tauri-apps/plugin-process';
+import { useRouteError } from 'react-router-dom';
+
+import { useStorage } from '@libs/storage/provider';
 
 interface RouteError {
   statusText: string;
   message: string;
 }
 
-interface DebugInfo {
-  os: null | string;
-  appDir: null | string;
-}
-
 export function ErrorScreen() {
+  const { db } = useStorage();
   const error = useRouteError() as RouteError;
-  const location = useLocation();
 
-  const [debugInfo, setDebugInfo] = useState<DebugInfo>({
-    os: null,
-    appDir: null,
-  });
+  const restart = async () => {
+    await relaunch();
+  };
 
-  useEffect(() => {
-    async function getInformation() {
-      const { platform, version } = await import('@tauri-apps/plugin-os');
-      const { appConfigDir } = await import('@tauri-apps/api/path');
-
-      const platformName = await platform();
-      const osVersion = await version();
-      const appDir = await appConfigDir();
-
-      setDebugInfo({
-        os: platformName + ' ' + osVersion,
-        appDir: appDir,
+  const download = async () => {
+    try {
+      const downloadPath = await downloadDir();
+      const fileName = `nostr_keys_${new Date().toISOString()}.txt`;
+      const filePath = await save({
+        defaultPath: downloadPath + '/' + fileName,
       });
-    }
+      const nsec = await db.secureLoad(db.account.pubkey);
 
-    getInformation();
-  }, []);
+      if (filePath) {
+        if (nsec) {
+          await writeTextFile(
+            filePath,
+            `Nostr account, generated by Lume (lume.nu)\nPublic key: ${db.account.id}\nPrivate key: ${nsec}`
+          );
+        } else {
+          await writeTextFile(
+            filePath,
+            `Nostr account, generated by Lume (lume.nu)\nPublic key: ${db.account.id}`
+          );
+        }
+      } // else { user cancel action }
+    } catch (e) {
+      await message(e, { title: 'Cannot download account keys', type: 'error' });
+    }
+  };
 
   return (
-    <div className="flex h-full items-center justify-center bg-white dark:bg-black">
-      <div className="flex w-full flex-col gap-4 px-4 md:max-w-lg md:px-0">
+    <div
+      data-tauri-drag-region
+      className="relative flex h-screen w-screen items-center justify-center bg-blue-600"
+    >
+      <div className="flex w-full max-w-2xl flex-col items-start gap-8">
         <div className="flex flex-col">
-          <h1 className="mb-1 text-2xl font-semibold">
+          <h1 className="mb-3 text-4xl font-semibold text-blue-400">
             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="select-text text-sm font-medium text-red-400">
-              {error.statusText || error.message}
-            </p>
-          </div>
-          <div className="mt-4">
-            <p className="font-medium text-neutral-600 dark:text-neutral-400">
-              Current location: {location.pathname}
-            </p>
-            <p className="font-medium text-neutral-600 dark:text-neutral-400">
-              Platform: {debugInfo.os}
-            </p>
-          </div>
+          <h3 className="text-3xl font-semibold leading-snug text-white">
+            Don&apos;t be panic, your account is safe.
+            <br />
+            Here are what things you can do:
+          </h3>
         </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 text-sm font-medium"
-          >
-            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 text-sm font-medium"
-          >
-            Reload app
-          </button>
-          <button
-            type="button"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium"
-          >
-            Reset app
-          </button>
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex items-center justify-between rounded-xl bg-blue-700 px-3 py-4">
+            <div className="text-xl font-semibold text-white">
+              1. Try close and re-open app
+            </div>
+            <button
+              type="button"
+              onClick={() => restart()}
+              className="h-9 w-28 rounded-lg bg-blue-800 px-3 font-medium text-white hover:bg-blue-900"
+            >
+              Restart
+            </button>
+          </div>
+          <div className="flex items-center justify-between rounded-xl bg-blue-700 px-3 py-4">
+            <div className="text-xl font-semibold text-white">
+              2. Backup Nostr account
+            </div>
+            <button
+              type="button"
+              onClick={() => download()}
+              className="h-9 w-28 rounded-lg bg-blue-800 px-3 font-medium text-white hover:bg-blue-900"
+            >
+              Download
+            </button>
+          </div>
+          <div className="rounded-xl bg-blue-700 px-3 py-4">
+            <div className="flex w-full flex-col gap-2">
+              <div className="flex w-full items-center justify-between">
+                <div className="text-xl font-semibold text-white">
+                  3. Report this issue to Lume&apos;s Devs
+                </div>
+                <a
+                  href="https://github.com/luminous-devs/lume/issues/new"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-blue-800 px-3 font-medium text-white hover:bg-blue-900"
+                >
+                  Report
+                </a>
+              </div>
+              <div className="inline-flex h-16 items-center justify-center overflow-y-auto rounded-lg border border-dashed border-red-300 bg-blue-800 px-5">
+                <p className="select-text break-all text-red-400">
+                  {error.statusText || error.message}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="rounded-xl bg-blue-700 px-3 py-4">
+            <div className="flex w-full flex-col gap-1.5">
+              <div className="text-xl font-semibold text-white">
+                4. Use other Nostr client
+              </div>
+              <div className="select-text text-lg font-medium text-blue-300">
+                <p>
+                  While waiting Lume&apos;s Devs release the bug fixes, you always can use
+                  other Nostr client with your account:
+                </p>
+                <div className="mt-2 flex flex-col gap-1 text-white">
+                  <a href="https://snort.social" className="hover:!underline">
+                    snort.social
+                  </a>
+                  <a href="https://primal.net" className="hover:!underline">
+                    primal.net
+                  </a>
+                  <a href="https://nostrudel.ninja" className="hover:!underline">
+                    nostrudel.ninja
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>