update error screen

src/app/error.tsx

@@ -1,85 +1,138 @@
-import { useEffect, useState } from 'react';
+import { downloadDir } from '@tauri-apps/api/path';
-import { useLocation, useRouteError } from 'react-router-dom';
+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>({
+  const restart = async () => {
-    os: null,
+    await relaunch();
-    appDir: null,
+  };
+
+  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);
 
-  useEffect(() => {
+      if (filePath) {
-    async function getInformation() {
+        if (nsec) {
-      const { platform, version } = await import('@tauri-apps/plugin-os');
+          await writeTextFile(
-      const { appConfigDir } = await import('@tauri-apps/api/path');
+            filePath,
-
+            `Nostr account, generated by Lume (lume.nu)\nPublic key: ${db.account.id}\nPrivate key: ${nsec}`
-      const platformName = await platform();
+          );
-      const osVersion = await version();
+        } else {
-      const appDir = await appConfigDir();
+          await writeTextFile(
-
+            filePath,
-      setDebugInfo({
+            `Nostr account, generated by Lume (lume.nu)\nPublic key: ${db.account.id}`
-        os: platformName + ' ' + osVersion,
+          );
-        appDir: appDir,
-      });
         }
-
+      } // else { user cancel action }
-    getInformation();
+    } 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
-      <div className="flex w-full flex-col gap-4 px-4 md:max-w-lg md:px-0">
+      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">
+          <h3 className="text-3xl font-semibold leading-snug text-white">
-            <p className="select-text text-sm font-medium text-red-400">
+            Don&apos;t be panic, your account is safe.
-              {error.statusText || error.message}
+            <br />
-            </p>
+            Here are what things you can do:
+          </h3>
         </div>
-          <div className="mt-4">
+        <div className="flex w-full flex-col gap-3">
-            <p className="font-medium text-neutral-600 dark:text-neutral-400">
+          <div className="flex items-center justify-between rounded-xl bg-blue-700 px-3 py-4">
-              Current location: {location.pathname}
+            <div className="text-xl font-semibold text-white">
-            </p>
+              1. Try close and re-open app
-            <p className="font-medium text-neutral-600 dark:text-neutral-400">
-              Platform: {debugInfo.os}
-            </p>
             </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>
-        <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"
+                  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"
                 >
-            Click here to report the issue on GitHub
+                  Report
                 </a>
-          <button
+              </div>
-            type="button"
+              <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">
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium"
+                <p className="select-text break-all text-red-400">
-          >
+                  {error.statusText || error.message}
-            Reload app
+                </p>
-          </button>
+              </div>
-          <button
+            </div>
-            type="button"
+          </div>
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium"
+          <div className="rounded-xl bg-blue-700 px-3 py-4">
-          >
+            <div className="flex w-full flex-col gap-1.5">
-            Reset app
+              <div className="text-xl font-semibold text-white">
-          </button>
+                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>