add notification

packages/ui/src/components/dark-mode.tsx

@@ -24,8 +24,8 @@ export function ModeToggle() {
           size="icon"
           className="cursor-pointer text-muted-foreground"
         >
-          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <Sun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
           <span className="sr-only">Alternar tema</span>
         </Button>
       </DropdownMenuTrigger>

packages/ui/src/components/nav-user.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  ChevronDown,
   CirclePlayIcon,
   DollarSignIcon,
   GraduationCapIcon,
@@ -71,9 +72,12 @@ export function NavUser({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger className="cursor-pointer" asChild>
-        <Avatar className="size-10">
-          <AvatarFallback>{initials(user.name)}</AvatarFallback>
-        </Avatar>
+        <div className="relative">
+          <Avatar className="size-10">
+            <AvatarFallback>{initials(user.name)}</AvatarFallback>
+          </Avatar>
+          <ChevronDown className="size-3.5 absolute -bottom-px -right-px bg-neutral-700 border border-background rounded-full px-px" />
+        </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent
         className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"