From d48479ee5bd3743bd224469daedc0b6a356a903b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 21:45:26 +0100
Subject: [PATCH] fix: add open/close animation to NotificationCenter dropdown

Match AppLauncher & UserMenu Framer Motion treatment:
opacity + scale + y-offset with 0.15s transition
---
 .../notifications/NotificationCenter.tsx      | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index c63a734..749979c 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -6,6 +6,7 @@
 
 import { useEffect, useState, useRef, useCallback } from 'react'
 import { createPortal } from 'react-dom'
+import { motion, AnimatePresence } from 'framer-motion'
 import Link from 'next/link'
 import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
@@ -198,12 +199,18 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
       </button>
 
       {(() => {
-        const panel = open ? (
-          <div
+        const panel = (
+          <AnimatePresence>
+            {open && (
+          <motion.div
             ref={panelRef}
             id="notification-dropdown"
             role="dialog"
             aria-label="Notifications"
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
             className={`bg-white dark:bg-neutral-900/65 border border-neutral-200 dark:border-white/[0.08] rounded-xl shadow-xl dark:shadow-black/20 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:dark:bg-neutral-900/60 overflow-hidden z-[100] ${
               anchor === 'right'
                 ? `fixed w-96 ${fixedPos?.bottom !== undefined ? 'origin-bottom-left' : 'origin-top-left'}`
@@ -321,10 +328,12 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
                 Manage settings
               </Link>
             </div>
-          </div>
-        ) : null
+          </motion.div>
+            )}
+          </AnimatePresence>
+        )
 
-        return anchor === 'right' && panel && typeof document !== 'undefined'
+        return anchor === 'right' && typeof document !== 'undefined'
           ? createPortal(panel, document.body)
           : panel
       })()}