update dependencies and polish

src/shared/logout.tsx

@@ -32,7 +32,7 @@ export function Logout() {
           <LogoutIcon className="h-4 w-4 text-white" />
         </button>
       </AlertDialog.Trigger>
-      <AlertDialog.Portal className="relative z-10">
+      <AlertDialog.Portal>
         <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl">

src/shared/notes/kinds/article.tsx

@@ -28,12 +28,8 @@ export function ArticleNote(props: { event?: NDKEvent }) {
   }, [props.event.id]);
 
   return (
-    <Link
-      to={`/notes/article/${props.event.id}`}
-      preventScrollReset={true}
-      className="mb-2 mt-3 rounded-lg"
-    >
-      <div className="flex flex-col rounded-lg">
+    <Link to={`/notes/article/${props.event.id}`} preventScrollReset={true}>
+      <div className="mb-2 mt-3 flex flex-col rounded-lg">
         {metadata.image && (
           <Image
             src={metadata.image}

src/shared/user.tsx

@@ -130,11 +130,11 @@ export const User = memo(function User({
           alt={pubkey}
           className="h-12 w-12 shrink-0 rounded-lg object-cover"
         />
-        <div className="flex w-full flex-col gap-1">
+        <div className="flex w-full flex-col items-start gap-1">
           <h3 className="max-w-[15rem] truncate font-medium leading-none text-white">
             {user?.name || user?.display_name || user?.displayName}
           </h3>
-          <p className="text-sm leading-none text-white/70">
+          <p className="max-w-[10rem] truncate text-sm leading-none text-white/70">
             {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
           </p>
         </div>

src/shared/widgets/emptyList.tsx

@@ -1,65 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { useNostr } from '@utils/hooks/useNostr';
-import { useStronghold } from '@stores/stronghold';
-
-export function EmptyList() {
-  const { db } = useStorage();
-  const { getAllEventsSinceLastLogin } = useNostr();
-
-  const setIsFetched = useStronghold((state) => state.setIsFetched);
-  const queryClient = useQueryClient();
-  
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    async function getEvents() {
-      const events = await getAllEventsSinceLastLogin();
-      const promises = await Promise.all(
-        events.data.map(async (event) => await db.createEvent(event))
-      );
-
-      if (promises) {
-        setProgress(100);
-        setIsFetched();
-        // invalidate queries
-        queryClient.invalidateQueries(['local-network-widget']);
-      }
-    }
-
-    // only start download if progress === 0
-    if (progress === 0) getEvents();
-
-    // auto increase progress after 2 secs
-    setInterval(() => setProgress((prev) => (prev += 8)), 2000);
-  }, []);
-
-  return (
-    <div className="px-3">
-      <div className="h-max w-full rounded-lg border-t border-white/10 bg-white/20 p-3">
-        <div className="flex flex-col items-center gap-5">
-          <div>
-            <span className="text-4xl">👋</span>
-            <h3 className="mt-2 font-semibold leading-tight">
-              Hello, this is the first time you&apos;re using Lume
-            </h3>
-            <p className="text-sm text-white/70">
-              Lume is downloading all events since the last 24 hours. It will auto refresh
-              when it done, please be patient
-            </p>
-          </div>
-          <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
-            <div
-              className="flex flex-col justify-center overflow-hidden bg-fuchsia-500 transition-all duration-1000 ease-smooth"
-              role="progressbar"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/shared/widgets/eventLoader.tsx

@@ -7,7 +7,7 @@ import { useStronghold } from '@stores/stronghold';
 
 import { useNostr } from '@utils/hooks/useNostr';
 
-export function LoadLatestEvents() {
+export function EventLoader({ firstTime }: { firstTime: boolean }) {
   const { db } = useStorage();
   const { getAllEventsSinceLastLogin } = useNostr();
 
@@ -35,18 +35,31 @@ export function LoadLatestEvents() {
     if (progress === 0) getEvents();
 
     // auto increase progress after 2 secs
-    setInterval(() => setProgress((prev) => (prev += 8)), 2000);
+    setInterval(() => setProgress((prev) => (prev += 5)), 2000);
   }, []);
 
   return (
     <div className="mb-3 px-3">
       <div className="h-max w-full rounded-lg border-t border-white/10 bg-white/20 p-3">
         <div className="flex flex-col items-center gap-3">
-          <div className="text-center">
-            <h3 className="font-semibold leading-tight">
-              Downloading all events from your last login...
-            </h3>
-          </div>
+          {firstTime ? (
+            <div>
+              <span className="text-4xl">👋</span>
+              <h3 className="mt-2 font-semibold leading-tight">
+                Hello, this is the first time you&apos;re using Lume
+              </h3>
+              <p className="text-sm text-white/70">
+                Lume is downloading all events since the last 24 hours. It will auto
+                refresh when it done, please be patient
+              </p>
+            </div>
+          ) : (
+            <div className="text-center">
+              <h3 className="font-semibold leading-tight">
+                Downloading all events from your last login...
+              </h3>
+            </div>
+          )}
           <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
             <div
               className="flex flex-col justify-center overflow-hidden bg-fuchsia-500 transition-all duration-1000 ease-smooth"

src/shared/widgets/index.ts

@@ -14,5 +14,4 @@ export * from './nostrBand/trendingAccounts';
 export * from './tmp/feeds';
 export * from './tmp/hashtag';
 export * from './other/learnNostr';
-export * from './emptyList';
-export * from './loadLatestEvents';
+export * from './eventLoader';

src/shared/widgets/local/network.tsx

@@ -16,7 +16,7 @@ import {
 } from '@shared/notes';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
-import { EmptyList, LoadLatestEvents, WidgetWrapper } from '@shared/widgets';
+import { EventLoader, WidgetWrapper } from '@shared/widgets';
 
 import { useStronghold } from '@stores/stronghold';
 
@@ -111,10 +111,10 @@ export function LocalNetworkWidget() {
             </div>
           </div>
         ) : dbEvents.length === 0 ? (
-          <EmptyList />
+          <EventLoader firstTime={true} />
         ) : (
           <VList className="scrollbar-hide h-full">
-            {!isFetched ? <LoadLatestEvents /> : null}
+            {!isFetched ? <EventLoader firstTime={false} /> : null}
             {dbEvents.map((item) => renderItem(item))}
             <div className="flex items-center justify-center px-3 py-1.5">
               {dbEvents.length > 0 ? (