update onboarding

src/app/auth/onboarding/step-1.tsx

@@ -68,8 +68,8 @@ export function OnboardStep1Screen() {
   }, []);
 
   return (
-    <div className="mx-auto w-full max-w-md">
-      <div className="mb-4 border-b border-white/10 pb-4">
+    <div className="flex h-full w-full flex-col justify-center">
+      <div className="mx-auto mb-4 w-full max-w-md border-b border-white/10 pb-4">
         <h1 className="mb-2 text-center text-2xl font-semibold text-white">
           {loading ? 'Prefetching data...' : 'Enrich your network'}
         </h1>
@@ -79,32 +79,30 @@ export function OnboardStep1Screen() {
           add them later.
         </p>
       </div>
-      <div className="flex flex-col gap-4">
-        <div className="scrollbar-hide flex h-[450px] w-full flex-col divide-y divide-white/5 overflow-y-auto rounded-xl bg-white/20 backdrop-blur-xl">
-          {status === 'loading' ? (
-            <div className="flex h-full w-full items-center justify-center">
-              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
-            </div>
-          ) : (
-            data?.profiles.map(
-              (item: { pubkey: string; profile: { content: string } }) => (
-                <button
-                  key={item.pubkey}
-                  type="button"
-                  onClick={() => toggleFollow(item.pubkey)}
-                  className="relative px-4 py-2 hover:bg-white/10"
-                >
-                  <User pubkey={item.pubkey} fallback={item.profile?.content} />
-                  {follows.includes(item.pubkey) && (
-                    <div className="absolute right-2 top-2">
-                      <CheckCircleIcon className="h-4 w-4 text-green-400" />
-                    </div>
-                  )}
-                </button>
-              )
-            )
-          )}
-        </div>
+      <div className="scrollbar-hide flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4">
+        {status === 'loading' ? (
+          <div className="flex h-full w-full items-center justify-center">
+            <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+          </div>
+        ) : (
+          data?.profiles.map((item: { pubkey: string; profile: { content: string } }) => (
+            <button
+              key={item.pubkey}
+              type="button"
+              onClick={() => toggleFollow(item.pubkey)}
+              className="relative h-[300px] shrink-0 grow-0 basis-[250px] rounded-lg border-t border-white/10 bg-white/20 px-4 py-4 hover:bg-white/30"
+            >
+              <User pubkey={item.pubkey} fallback={item.profile?.content} />
+              {follows.includes(item.pubkey) && (
+                <div className="absolute right-2 top-2">
+                  <CheckCircleIcon className="h-4 w-4 text-green-400" />
+                </div>
+              )}
+            </button>
+          ))
+        )}
+      </div>
+      <div className="mx-auto mt-4 w-full max-w-md">
         <div className="flex flex-col gap-2">
           <button
             type="button"
@@ -133,7 +131,12 @@ export function OnboardStep1Screen() {
             >
               Skip, you can add later
             </Link>
-          ) : null}
+          ) : (
+            <span className="text-center text-sm text-white/50">
+              By clicking &apos;Continue&apos;, Lume will download all events related to
+              your follows from the last 24 hours. It may take a bit
+            </span>
+          )}
         </div>
       </div>
     </div>

src/app/auth/onboarding/step-2.tsx

@@ -1,6 +1,6 @@
 import { message } from '@tauri-apps/api/dialog';
 import { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -34,8 +34,8 @@ const data = [
 
 export function OnboardStep2Screen() {
   const navigate = useNavigate();
-  const setStep = useOnboarding((state) => state.setStep);
 
+  const [setStep, clearStep] = useOnboarding((state) => [state.setStep, state.clearStep]);
   const [loading, setLoading] = useState(false);
   const [tags, setTags] = useState(new Set<string>());
 
@@ -53,6 +53,16 @@ export function OnboardStep2Screen() {
     }
   };
 
+  const skip = async () => {
+    // update last login
+    await db.updateLastLogin();
+
+    // clear local storage
+    clearStep();
+
+    navigate('/', { replace: true });
+  };
+
   const submit = async () => {
     try {
       setLoading(true);
@@ -61,8 +71,15 @@ export function OnboardStep2Screen() {
         await db.createWidget(WidgetKinds.global.hashtag, tag, tag.replace('#', ''));
       }
 
-      navigate('/auth/onboarding/step-3', { replace: true });
+      // update last login
+      await db.updateLastLogin();
+
+      // clear local storage
+      clearStep();
+
+      navigate('/', { replace: true });
     } catch (e) {
+      setLoading(false);
       await message(e, { title: 'Lume', type: 'error' });
     }
   };
@@ -123,12 +140,13 @@ export function OnboardStep2Screen() {
             )}
           </button>
           {!loading ? (
-            <Link
-              to="/auth/onboarding/step-3"
+            <button
+              type="button"
+              onClick={() => skip()}
               className="inline-flex h-12 w-full items-center justify-center rounded-lg border-t border-white/10 bg-white/20 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/30 focus:outline-none"
             >
               Skip, you can add later
-            </Link>
+            </button>
           ) : null}
         </div>
       </div>