feat: zap (#107)

src/components/Sidebar/AccountButton.tsx

@@ -4,13 +4,14 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { toProfile } from '@/lib/link'
+import { toProfile, toWallet } from '@/lib/link'
 import { formatPubkey, generateImageByPubkey } from '@/lib/pubkey'
 import { useSecondaryPage } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
-import { LogIn } from 'lucide-react'
+import { ArrowDownUp, LogIn, LogOut, UserRound, Wallet } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import LoginDialog from '../LoginDialog'
@@ -57,15 +58,26 @@ function ProfileButton() {
           </div>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem onClick={() => push(toProfile(pubkey))}>{t('Profile')}</DropdownMenuItem>
+      <DropdownMenuContent className="w-56" side="top">
+        <DropdownMenuItem onClick={() => push(toProfile(pubkey))}>
+          <UserRound />
+          {t('Profile')}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => push(toWallet())}>
+          <Wallet />
+          {t('Wallet')}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
         <DropdownMenuItem onClick={() => setLoginDialogOpen(true)}>
+          <ArrowDownUp />
           {t('Switch account')}
         </DropdownMenuItem>
         <DropdownMenuItem
           className="text-destructive focus:text-destructive"
           onClick={() => setLogoutDialogOpen(true)}
         >
+          <LogOut />
           {t('Logout')}
         </DropdownMenuItem>
       </DropdownMenuContent>

src/components/Sidebar/NotificationButton.tsx

@@ -1,9 +1,11 @@
 import { usePrimaryPage } from '@/PageManager'
+import { useNotification } from '@/providers/NotificationProvider'
 import { Bell } from 'lucide-react'
 import SidebarItem from './SidebarItem'
 
 export default function NotificationsButton() {
   const { navigate, current } = usePrimaryPage()
+  const { hasNewNotification } = useNotification()
 
   return (
     <SidebarItem
@@ -11,7 +13,12 @@ export default function NotificationsButton() {
       onClick={() => navigate('notifications')}
       active={current === 'notifications'}
     >
-      <Bell strokeWidth={3} />
+      <div className="relative">
+        <Bell strokeWidth={3} />
+        {hasNewNotification && (
+          <div className="absolute -top-1 -right-1 w-2 h-2 bg-primary rounded-full" />
+        )}
+      </div>
     </SidebarItem>
   )
 }

src/components/Sidebar/index.tsx

@@ -12,7 +12,7 @@ export default function PrimaryPageSidebar() {
   return (
     <div className="w-16 xl:w-52 hidden sm:flex flex-col pb-2 pt-4 px-2 justify-between h-full shrink-0">
       <div className="space-y-2">
-        <div className="px-2 mb-8 w-full">
+        <div className="px-3 xl:px-4 mb-6 w-full">
           <Icon className="xl:hidden" />
           <Logo className="max-xl:hidden" />
         </div>