add finish step to tutorial

package.json

@@ -33,8 +33,8 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tanstack/react-query": "^5.10.0",
+    "@tanstack/react-query": "^5.12.1",
-    "@tanstack/react-query-devtools": "^5.10.0",
+    "@tanstack/react-query-devtools": "^5.12.1",
     "@tauri-apps/api": "2.0.0-alpha.11",
     "@tauri-apps/cli": "2.0.0-alpha.17",
     "@tauri-apps/plugin-autostart": "2.0.0-alpha.3",
@@ -61,7 +61,7 @@
     "@tiptap/starter-kit": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
     "dayjs": "^1.11.10",
-    "framer-motion": "^10.16.9",
+    "framer-motion": "^10.16.12",
     "html-to-text": "^9.0.5",
     "idb-keyval": "^6.2.1",
     "light-bolt11-decoder": "^3.0.0",
@@ -79,7 +79,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-hotkeys-hook": "^4.4.1",
-    "react-router-dom": "^6.20.0",
+    "react-router-dom": "^6.20.1",
     "react-string-replace": "^1.1.1",
     "reactflow": "^11.10.1",
     "sonner": "^1.2.4",
@@ -94,8 +94,8 @@
     "@tailwindcss/typography": "^0.5.10",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/html-to-text": "^9.0.4",
-    "@types/node": "^20.10.1",
+    "@types/node": "^20.10.2",
-    "@types/react": "^18.2.39",
+    "@types/react": "^18.2.40",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
@@ -104,7 +104,7 @@
     "clsx": "^2.0.0",
     "cross-env": "^7.0.3",
     "encoding": "^0.1.13",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",

src-tauri/Cargo.lock

@@ -4003,9 +4003,9 @@ dependencies = [
 
 [[package]]
 name = "rsa"
-version = "0.9.5"
+version = "0.9.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "af6c4b23d99685a1408194da11270ef8e9809aff951cc70ec9b17350b087e474"
+checksum = "5d0e5124fcb30e76a7e79bfee683a2746db83784b86289f6251b54b7950a0dfc"
 dependencies = [
  "const-oid",
  "digest",
@@ -6655,18 +6655,18 @@ dependencies = [
 
 [[package]]
 name = "zerocopy"
-version = "0.7.27"
+version = "0.7.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f43de342578a3a14a9314a2dab1942cbfcbe5686e1f91acdc513058063eafe18"
+checksum = "7d6f15f7ade05d2a4935e34a457b936c23dc70a05cc1d97133dc99e7a3fe0f0e"
 dependencies = [
  "zerocopy-derive",
 ]
 
 [[package]]
 name = "zerocopy-derive"
-version = "0.7.27"
+version = "0.7.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e1012d89e3acb79fad7a799ce96866cfb8098b74638465ea1b1533d35900ca90"
+checksum = "dbbad221e3f78500350ecbd7dfa4e63ef945c05f4c61cb7f4d3f84cd0bba649b"
 dependencies = [
  "proc-macro2",
  "quote",

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