add finish step to tutorial

src/app.tsx

@@ -236,6 +236,13 @@ export default function App() {
             return { Component: TutorialPostingScreen };
           },
         },
+        {
+          path: 'tutorials/finish',
+          async lazy() {
+            const { TutorialFinishScreen } = await import('@app/auth/tutorials/finish');
+            return { Component: TutorialFinishScreen };
+          },
+        },
       ],
     },
     {

src/app/auth/finish.tsx

@@ -23,7 +23,7 @@ export function FinishScreen() {
           >
             Skip
           </Link>
-          <p className="mt-2 text-center text-sm font-medium text-neutral-500 dark:text-neutral-600">
+          <p className="text-center text-sm font-medium text-neutral-500 dark:text-neutral-600">
             You need to restart app to make changes in previous step take effect or you
             can continue with Lume default settings
           </p>

src/app/auth/follow.tsx

@@ -81,7 +81,7 @@ export function FollowScreen() {
           if (item.startsWith('npub')) return nip19.decode(item).data as string;
           return item;
         });
-        navigate('/');
+        navigate('/auth/finish');
       }
     } catch (e) {
       setLoading(false);

src/app/auth/onboarding.tsx

@@ -18,7 +18,7 @@ export function OnboardingScreen() {
   });
 
   const next = () => {
-    if (!db.account.contacts) return navigate('/auth/follow');
+    if (!db.account.contacts.length) return navigate('/auth/follow');
     return navigate('/auth/finish');
   };
 

src/app/auth/tutorials/finish.tsx

@@ -0,0 +1,41 @@
+import { Link } from 'react-router-dom';
+
+export function TutorialFinishScreen() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-10">
+        <div className="text-center">
+          <img src="/icon.png" alt="Lume's logo" className="mx-auto mb-1 h-auto w-16" />
+          <h1 className="text-2xl font-light">
+            Yo, you&apos;ve understood basic features 🎉
+          </h1>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Link
+            to="/"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+          >
+            Start using
+          </Link>
+          <Link
+            to="https://nostr.how/"
+            target="_blank"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-neutral-100 font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+          >
+            Learn more about Nostr
+          </Link>
+          <p className="text-center text-sm font-medium text-neutral-500 dark:text-neutral-600">
+            If you&apos;ve trouble when user Lume, you can report the issue{' '}
+            <a
+              href="github.com/luminous-devs/lume"
+              target="_blank"
+              className="text-blue-500 !underline"
+            >
+              here
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/auth/tutorials/widget.tsx

@@ -51,7 +51,7 @@ export function TutorialWidgetScreen() {
               Back
             </Link>
             <Link
-              to="/auth/tutorials/posting"
+              to="/auth/tutorials/finish"
               className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
             >
               Continue