update nip-05 and user profile component styles

src/shared/accounts/active.tsx

@@ -25,7 +25,7 @@ export function ActiveAccount() {
 
   return (
     <div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-      <Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
+      <Link to="/personal" className="relative inline-block">
         <Avatar.Root>
           <Avatar.Image
             src={user?.picture || user?.image}
@@ -38,14 +38,14 @@ export function ActiveAccount() {
           <Avatar.Fallback delayMs={150}>
             <img
               src={svgURI}
-              alt={db.account.pubkeypubkey}
+              alt={db.account.pubkey}
               className="aspect-square h-auto w-full rounded-md bg-black dark:bg-white"
             />
           </Avatar.Fallback>
         </Avatar.Root>
         <NetworkStatusIndicator />
       </Link>
-      <AccountMoreActions pubkey={db.account.pubkey} />
+      <AccountMoreActions />
     </div>
   );
 }

src/shared/accounts/more.tsx

@@ -1,15 +1,14 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import { useStorage } from '@libs/storage/provider';
+
 import { HorizontalDotsIcon } from '@shared/icons';
 import { Logout } from '@shared/logout';
 
-export function AccountMoreActions({ pubkey }: { pubkey: string }) {
-  const [open, setOpen] = useState(false);
-
+export function AccountMoreActions() {
   return (
-    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+    <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button
           type="button"
@@ -20,14 +19,6 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content className="ml-2 flex w-[200px] flex-col overflow-hidden rounded-xl bg-blue-500 p-2 focus:outline-none">
-          <DropdownMenu.Item asChild>
-            <Link
-              to={`/users/${pubkey}`}
-              className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
-            >
-              Profile
-            </Link>
-          </DropdownMenu.Item>
           <DropdownMenu.Item asChild>
             <Link
               to={`/settings/backup`}

src/shared/nip05.tsx

@@ -22,7 +22,7 @@ export const NIP05 = memo(function NIP05({
 }) {
   const { status, data } = useQuery({
     queryKey: ['nip05', nip05],
-    queryFn: async () => {
+    queryFn: async ({ signal }: { signal: AbortSignal }) => {
       try {
         const localPath = nip05.split('@')[0];
         const service = nip05.split('@')[1];
@@ -33,11 +33,13 @@ export const NIP05 = memo(function NIP05({
           headers: {
             'Content-Type': 'application/json; charset=utf-8',
           },
+          signal,
         });
 
         if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
 
         const data: NIP05 = await res.json();
+
         if (data.names) {
           if (data.names[localPath] !== pubkey) return false;
           return true;
@@ -58,15 +60,19 @@ export const NIP05 = memo(function NIP05({
   }
 
   return (
-    <div className={twMerge('inline-flex items-center gap-1', className)}>
-      <p className="text-sm">{nip05}</p>
-      <div className="shrink-0">
-        {data === true ? (
-          <VerifiedIcon className="h-3 w-3 text-green-500" />
-        ) : (
-          <UnverifiedIcon className="h-3 w-3 text-red-500" />
-        )}
-      </div>
+    <div className="inline-flex items-center gap-1">
+      <p className={twMerge('text-sm font-medium', className)}>{nip05}</p>
+      {data === true ? (
+        <div className="inline-flex h-5 w-max shrink-0 items-center justify-center gap-1 rounded-full bg-teal-500 pl-0.5 pr-1.5 text-xs font-medium text-white">
+          <VerifiedIcon className="h-4 w-4" />
+          Verified
+        </div>
+      ) : (
+        <div className="inline-flex h-5 w-max shrink-0 items-center justify-center gap-1.5 rounded-full bg-red-500 pl-0.5 pr-1.5 text-xs font-medium text-white">
+          <UnverifiedIcon className="h-4 w-4" />
+          Unverified
+        </div>
+      )}
     </div>
   );
 });

src/shared/widgets/newsfeed.tsx

@@ -1,4 +1,4 @@
-import { NDKEvent, NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
+import { NDKEvent, NDKFilter, NDKKind, NDKSubscription } from '@nostr-dev-kit/ndk';
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo } from 'react';
 import { VList } from 'virtua';
@@ -25,7 +25,6 @@ export function NewsfeedWidget() {
   const queryClient = useQueryClient();
 
   const { db } = useStorage();
-  const { sub } = useNostr();
   const { relayUrls, ndk, fetcher } = useNDK();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
@@ -112,6 +111,8 @@ export function NewsfeedWidget() {
   }, []);
 
   useEffect(() => {
+    let sub: NDKSubscription = undefined;
+
     if (status === 'success' && db.account && db.account.circles.length > 0) {
       queryClient.fetchQuery({ queryKey: ['notification'] });
 
@@ -121,21 +122,21 @@ export function NewsfeedWidget() {
         since: Math.floor(Date.now() / 1000),
       };
 
-      sub(
-        filter,
-        async (event) => {
-          queryClient.setQueryData(
-            ['newsfeed'],
-            (prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
-              ...prev,
-              pages: [[event], ...prev.pages],
-            })
-          );
-        },
-        false,
-        'newsfeed'
-      );
+      sub = ndk.subscribe(filter, { closeOnEose: false, groupable: false });
+      sub.addListener('event', async (event: NDKEvent) => {
+        await queryClient.setQueryData(
+          ['newsfeed'],
+          (prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
+            ...prev,
+            pages: [[event], ...prev.pages],
+          })
+        );
+      });
     }
+
+    return () => {
+      if (sub) sub.stop();
+    };
   }, [status]);
 
   return (

src/shared/widgets/notification.tsx

@@ -54,6 +54,10 @@ export function NotificationWidget() {
         return lastEvent.created_at - 1;
       },
       enabled: false,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      staleTime: Infinity,
     });
 
   const allEvents = useMemo(