clean up

src/shared/accounts/active.tsx

@@ -1,18 +1,21 @@
 import * as Avatar from '@radix-ui/react-avatar';
 import { minidenticon } from 'minidenticons';
 import { Link } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
 
 import { useArk } from '@libs/ark';
 
 import { AccountMoreActions } from '@shared/accounts/more';
-import { NetworkStatusIndicator } from '@shared/networkStatusIndicator';
 
+import { useNetworkStatus } from '@utils/hooks/useNetworkStatus';
 import { useProfile } from '@utils/hooks/useProfile';
 
 export function ActiveAccount() {
   const { ark } = useArk();
   const { user } = useProfile(ark.account.pubkey);
 
+  const isOnline = useNetworkStatus();
+
   const svgURI =
     'data:image/svg+xml;utf8,' +
     encodeURIComponent(minidenticon(ark.account.pubkey, 90, 50));
@@ -37,7 +40,12 @@ export function ActiveAccount() {
             />
           </Avatar.Fallback>
         </Avatar.Root>
-        <NetworkStatusIndicator />
+        <span
+          className={twMerge(
+            'absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-neutral-100 dark:ring-neutral-900',
+            isOnline ? 'bg-teal-500' : 'bg-red-500'
+          )}
+        />
       </Link>
       <AccountMoreActions />
     </div>

src/shared/avatarUploader.tsx

@@ -1,45 +0,0 @@
-import { message } from '@tauri-apps/plugin-dialog';
-import { Dispatch, SetStateAction, useState } from 'react';
-
-import { useArk } from '@libs/ark';
-
-import { LoaderIcon } from '@shared/icons';
-
-export function AvatarUploader({
-  setPicture,
-}: {
-  setPicture: Dispatch<SetStateAction<string>>;
-}) {
-  const { ark } = useArk();
-  const [loading, setLoading] = useState(false);
-
-  const uploadAvatar = async () => {
-    try {
-      // start loading
-      setLoading(true);
-
-      const image = await ark.upload({});
-
-      if (image) {
-        setPicture(image);
-        setLoading(false);
-      }
-
-      return;
-    } catch (e) {
-      // stop loading
-      setLoading(false);
-      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={() => uploadAvatar()}
-      className="inline-flex items-center justify-center rounded-lg border border-blue-200 bg-blue-100 px-2 py-1.5 text-sm font-medium text-blue-500 hover:border-blue-300 hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-500 dark:hover:border-blue-800 dark:hover:bg-blue-800"
-    >
-      {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Change avatar'}
-    </button>
-  );
-}

src/shared/bannerUploader.tsx

@@ -1,52 +0,0 @@
-import { message } from '@tauri-apps/plugin-dialog';
-import { Dispatch, SetStateAction, useState } from 'react';
-
-import { useArk } from '@libs/ark';
-
-import { LoaderIcon, PlusIcon } from '@shared/icons';
-
-export function BannerUploader({
-  setBanner,
-}: {
-  setBanner: Dispatch<SetStateAction<string>>;
-}) {
-  const { ark } = useArk();
-  const [loading, setLoading] = useState(false);
-
-  const uploadBanner = async () => {
-    try {
-      // start loading
-      setLoading(true);
-
-      const image = await ark.upload({});
-
-      if (image) {
-        setBanner(image);
-        setLoading(false);
-      }
-
-      return;
-    } catch (e) {
-      // stop loading
-      setLoading(false);
-      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={() => uploadBanner()}
-      className="inline-flex h-full w-full flex-col items-center justify-center"
-    >
-      {loading ? (
-        <LoaderIcon className="h-6 w-6 animate-spin text-neutral-900 dark:text-neutral-100" />
-      ) : (
-        <PlusIcon className="h-6 w-6 text-neutral-900 dark:text-neutral-100" />
-      )}
-      <p className="text-sm font-semibold text-neutral-800 dark:text-neutral-200">
-        Add cover
-      </p>
-    </button>
-  );
-}

src/shared/navigation.tsx

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import { ActiveAccount } from '@shared/accounts/active';
 import { ChatsIcon, ComposeIcon, HomeIcon, NwcIcon, RelayIcon } from '@shared/icons';
 
-import { compactNumber } from '@utils/number';
+import { compactNumber } from '@utils/formater';
 
 export function Navigation() {
   const newMessages = 0;

src/shared/networkStatusIndicator.tsx

@@ -1,16 +0,0 @@
-import { twMerge } from 'tailwind-merge';
-
-import { useNetworkStatus } from '@utils/hooks/useNetworkStatus';
-
-export function NetworkStatusIndicator() {
-  const isOnline = useNetworkStatus();
-
-  return (
-    <span
-      className={twMerge(
-        'absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-neutral-100 dark:ring-neutral-900',
-        isOnline ? 'bg-teal-500' : 'bg-red-500'
-      )}
-    />
-  );
-}

src/shared/nip05.tsx

@@ -56,7 +56,7 @@ export const NIP05 = memo(function NIP05({
   });
 
   if (status === 'pending') {
-    <div className="h-3 w-20 animate-pulse rounded bg-white/10" />;
+    <div className="h-4 w-4 animate-pulse rounded-full bg-neutral-100 dark:bg-neutral-900" />;
   }
 
   return (

src/shared/notes/actions/zap.tsx

@@ -13,10 +13,9 @@ import { useArk } from '@libs/ark';
 
 import { CancelIcon, ZapIcon } from '@shared/icons';
 
+import { compactNumber, displayNpub } from '@utils/formater';
 import { useProfile } from '@utils/hooks/useProfile';
 import { sendNativeNotification } from '@utils/notification';
-import { compactNumber } from '@utils/number';
-import { displayNpub } from '@utils/shortenKey';
 
 export function NoteZap({ event }: { event: NDKEvent }) {
   const { ark } = useArk();

src/shared/notes/notify.tsx

@@ -8,7 +8,7 @@ import { ChildNote, TextKind } from '@shared/notes';
 import { User } from '@shared/user';
 
 import { WIDGET_KIND } from '@utils/constants';
-import { formatCreatedAt } from '@utils/createdAt';
+import { formatCreatedAt } from '@utils/formater';
 import { useWidget } from '@utils/hooks/useWidget';
 
 export function NotifyNote({ event }: { event: NDKEvent }) {

src/shared/user.tsx

@@ -8,9 +8,8 @@ import { RepostIcon } from '@shared/icons';
 import { NIP05 } from '@shared/nip05';
 import { MoreActions } from '@shared/notes';
 
-import { formatCreatedAt } from '@utils/createdAt';
+import { displayNpub, formatCreatedAt } from '@utils/formater';
 import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
 
 export const User = memo(function User({
   pubkey,

src/shared/widgets/index.ts

@@ -15,3 +15,4 @@ export * from './other/toggleWidgetList';
 export * from './other/widgetList';
 export * from './other/addGroupFeeds';
 export * from './other/addHashtagFeeds';
+export * from './other/userProfile';

src/shared/widgets/other/nostrBandUserProfile.tsx

@@ -6,7 +6,7 @@ import { useArk } from '@libs/ark';
 
 import { FollowIcon } from '@shared/icons';
 
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub } from '@utils/formater';
 
 export interface Profile {
   pubkey: string;
@@ -66,7 +66,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
                 {profile.display_name || profile.name}
               </h3>
               <p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/50">
-                {profile.nip05 || shortenKey(data.pubkey)}
+                {profile.nip05 || displayNpub(data.pubkey, 16)}
               </p>
             </div>
           </div>

src/shared/widgets/other/userProfile.tsx

@@ -6,8 +6,8 @@ import { useArk } from '@libs/ark';
 
 import { NIP05 } from '@shared/nip05';
 
+import { displayNpub } from '@utils/formater';
 import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
 
 export function UserProfile({ pubkey }: { pubkey: string }) {
   const { ark } = useArk();

src/shared/widgets/user.tsx

@@ -13,8 +13,7 @@ import {
   UnknownNote,
 } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
-import { UserProfile } from '@shared/userProfile';
-import { WidgetWrapper } from '@shared/widgets';
+import { UserProfile, WidgetWrapper } from '@shared/widgets';
 
 import { FETCH_LIMIT } from '@utils/constants';
 import { Widget } from '@utils/types';