improve notification

src/app/notifications/index.tsx

@@ -5,6 +5,8 @@ import { NotiMention } from '@app/notifications/components/mention';
 import { NotiReaction } from '@app/notifications/components/reaction';
 import { NotiRepost } from '@app/notifications/components/repost';
 
+import { useStorage } from '@libs/storage/provider';
+
 import { LoaderIcon } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
 
@@ -13,7 +15,9 @@ import { useActivities } from '@stores/activities';
 import { useNostr } from '@utils/hooks/useNostr';
 
 export function NotificationScreen() {
+  const { db } = useStorage();
   const { fetchActivities } = useNostr();
+
   const [activities, setActivities, clearTotalNewActivities] = useActivities((state) => [
     state.activities,
     state.setActivities,
@@ -39,12 +43,13 @@ export function NotificationScreen() {
   useEffect(() => {
     async function getActivities() {
       const events = await fetchActivities();
-      setActivities(events);
-      // clear total new activities
-      clearTotalNewActivities();
+      setActivities(events, db.account.last_login_at);
     }
 
     getActivities();
+
+    // clear total new activities
+    clearTotalNewActivities();
   }, []);
 
   return (

src/app/nwc/components/alby.tsx

@@ -71,7 +71,7 @@ export function NWCAlby() {
         <Dialog.Trigger asChild>
           <button
             type="button"
-            className="inline-flex h-8 w-min items-center justify-center rounded-md bg-white/10 px-2.5 text-sm font-medium text-white hover:bg-green-500"
+            className="inline-flex h-9 w-min items-center justify-center rounded-md border-t border-white/10 bg-white/20 px-3 text-sm font-medium text-white hover:bg-green-500"
           >
             Connect
           </button>

src/app/nwc/components/other.tsx

@@ -89,7 +89,7 @@ export function NWCOther() {
         <Dialog.Trigger asChild>
           <button
             type="button"
-            className="inline-flex h-8 w-min items-center justify-center rounded-md bg-white/10 px-2.5 text-sm font-medium text-white hover:bg-green-500"
+            className="inline-flex h-9 w-min items-center justify-center rounded-md border-t border-white/10 bg-white/20 px-3 text-sm font-medium text-white hover:bg-green-500"
           >
             Connect
           </button>

src/app/nwc/index.tsx

@@ -71,7 +71,7 @@ export function NWCScreen() {
                 <a
                   href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
                   target="_blank"
-                  className="text-fuchsia-200"
+                  className="text-fuchsia-300"
                   rel="noreferrer"
                 >
                   the specs (NIP47)
@@ -89,6 +89,33 @@ export function NWCScreen() {
               </p>
               <p className="text-sm text-white/70">Lume doesn&apos;t hold your Bitcoin</p>
             </div>
+            <div className="flex flex-col gap-1.5">
+              <h5 className="text-sm font-bold text-white">
+                Recommend wallet that support NWC
+              </h5>
+              <p className="text-sm text-white/70">
+                Mutiny Wallet:{' '}
+                <a
+                  href="https://www.mutinywallet.com/"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-fuchsia-300"
+                >
+                  website
+                </a>
+              </p>
+              <p className="text-sm text-white/70">
+                Self hosted NWC on Umbrel :{' '}
+                <a
+                  href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-fuchsia-300"
+                >
+                  website
+                </a>
+              </p>
+            </div>
           </div>
         </div>
       </div>

src/shared/accounts/active.tsx

@@ -40,7 +40,7 @@ export function ActiveAccount() {
         case NDKKind.Text:
           return await sendNativeNotification('Mention');
         case NDKKind.Contacts:
-          return await sendNativeNotification("You've new follower");
+          return await sendNativeNotification("You've a new follower");
         case NDKKind.Repost:
           return await sendNativeNotification('Repost');
         case NDKKind.Reaction:
@@ -48,7 +48,6 @@ export function ActiveAccount() {
         case NDKKind.Zap:
           return await sendNativeNotification('Zap');
         default:
-          console.log('[notify] new event: ', event);
           break;
       }
     });
@@ -56,8 +55,8 @@ export function ActiveAccount() {
 
   if (status === 'loading') {
     return (
-      <div className="inline-flex h-10 items-center gap-2.5 rounded-md px-2">
-        <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+      <div className="inline-flex h-16 items-center gap-2.5 border-l-2 border-transparent pb-2 pl-4 pr-2">
+        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
       </div>
     );

src/shared/navigation.tsx

@@ -64,18 +64,20 @@ export function Navigation() {
             }
           >
             <div className="flex items-center gap-2.5">
-              <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                <BellIcon className="h-4 w-4 text-white" />
-              </span>
+              {totalNewActivities > 0 ? (
+                <div className="relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-fuchsia-500/20 backdrop-blur-xl">
+                  <p className="text-sm font-bold text-fuchsia-500">
+                    {compactNumber.format(totalNewActivities)}
+                  </p>
+                  <span className="absolute right-0 top-0 block h-1 w-1 -translate-y-1/2 translate-x-1/2 transform rounded-full bg-fuchsia-500 ring-2 ring-black/80" />
+                </div>
+              ) : (
+                <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+                  <BellIcon className="h-4 w-4 text-white" />
+                </span>
+              )}
               Notifications
             </div>
-            {totalNewActivities > 0 ? (
-              <div className="inline-flex h-5 w-8 items-center justify-center rounded bg-fuchsia-500">
-                <span className="text-xs font-medium text-white">
-                  {compactNumber.format(totalNewActivities)}
-                </span>
-              </div>
-            ) : null}
           </NavLink>
         </div>
         <Collapsible.Root open={integrations} onOpenChange={toggleIntegrations}>

src/shared/notes/kinds/repost.tsx

@@ -55,8 +55,8 @@ export function Repost({ event }: { event: NDKEvent }) {
   if (embedEvent) {
     return (
       <div className="h-min w-full px-3 pb-3">
-        <div className="relative flex flex-col gap-3 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-          <User pubkey={event.pubkey} variant="repost" />
+        <div className="relative flex flex-col gap-10 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+          <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
           <div className="relative flex flex-col">
             <User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
             <div className="-mt-6 flex items-start gap-3">
@@ -122,8 +122,8 @@ export function Repost({ event }: { event: NDKEvent }) {
 
   return (
     <div className="h-min w-full px-3 pb-3">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-        <User pubkey={event.pubkey} variant="repost" />
+      <div className="relative flex flex-col gap-10 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+        <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
         <div className="relative flex flex-col">
           <User pubkey={data.pubkey} time={data.created_at} />
           <div className="-mt-2 flex items-start gap-3">

src/shared/notes/preview/video.tsx

@@ -12,6 +12,13 @@ export function VideoPreview({ urls }: { urls: string[] }) {
           className="!h-auto overflow-hidden rounded-lg object-fill"
           controls={true}
           pip={true}
+          light={
+            <img
+              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
+              alt={url}
+              className="h-auto w-full bg-white object-cover"
+            />
+          }
         />
       ))}
     </div>

src/shared/user.tsx

@@ -119,21 +119,24 @@ export const User = memo(function User({
 
   if (variant === 'repost') {
     return (
-      <div className="flex gap-3">
-        <Image
-          src={user?.picture || user?.image}
-          alt={pubkey}
-          className="relative z-20 inline-block h-11 w-11 rounded-lg"
-        />
-        <div className="inline-flex items-baseline gap-1">
-          <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
-            {user?.display_name || user?.name || displayNpub(pubkey, 16)}
-          </h5>
-          <span className="font-semibold text-fuchsia-500">reposted</span>
-          <span className="leading-none text-white/50">·</span>
-          <span className="leading-none text-white/50">{createdAt}</span>
+      <>
+        <div className="flex gap-3">
+          <Image
+            src={user?.picture || user?.image}
+            alt={pubkey}
+            className="relative z-20 inline-block h-11 w-11 rounded-lg"
+          />
+          <div className="inline-flex items-baseline gap-1">
+            <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+              {user?.display_name || user?.name || displayNpub(pubkey, 16)}
+            </h5>
+            <span className="font-semibold text-fuchsia-500">reposted</span>
+            <span className="leading-none text-white/50">·</span>
+            <span className="leading-none text-white/50">{createdAt}</span>
+          </div>
         </div>
-      </div>
+        <div className="absolute left-[28px] top-16 h-6 w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
+      </>
     );
   }
 

src/stores/activities.ts

@@ -22,7 +22,7 @@ export const useActivities = create<ActivitiesState>((set) => ({
   addActivity: (event: NDKEvent) => {
     set((state) => ({
       activities: state.activities ? [event, ...state.activities] : [event],
-      totalNewActivities: state.totalNewActivities++,
+      totalNewActivities: (state.totalNewActivities += 1),
     }));
   },
   clearTotalNewActivities: () => {

src/utils/hooks/useNostr.ts

@@ -37,14 +37,10 @@ export function useNostr() {
     []
   );
 
-  const sub = async (
-    filter: NDKFilter,
-    callback: (event: NDKEvent) => void,
-    closeOnEose?: boolean
-  ) => {
+  const sub = async (filter: NDKFilter, callback: (event: NDKEvent) => void) => {
     if (!ndk) throw new Error('NDK instance not found');
 
-    const subEvent = ndk.subscribe(filter, { closeOnEose: closeOnEose ?? true });
+    const subEvent = ndk.subscribe(filter, { closeOnEose: false });
     subManager.set(JSON.stringify(filter), subEvent);
 
     subEvent.addListener('event', (event: NDKEvent) => {