Enhanced material design 3 implementation

lib/widgets/app_shell.dart

@@ -84,6 +84,7 @@ class AppScaffold extends ConsumerWidget {
                       fullName: displayName,
                       avatarUrl: avatarUrl,
                       radius: 16,
+                      heroTag: 'profile-avatar',
                     ),
                     const SizedBox(width: 8),
                     Text(displayName),
@@ -104,6 +105,7 @@ class AppScaffold extends ConsumerWidget {
                     fullName: displayName,
                     avatarUrl: avatarUrl,
                     radius: 16,
+                    heroTag: 'profile-avatar',
                   ),
                 ),
                 IconButton(
@@ -273,19 +275,42 @@ class _NotificationBell extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final unreadCount = ref.watch(unreadNotificationsCountProvider);
+    final cs = Theme.of(context).colorScheme;
     return IconButton(
       tooltip: 'Notifications',
       onPressed: () => context.go('/notifications'),
       icon: Stack(
         clipBehavior: Clip.none,
         children: [
-          const Icon(Icons.notifications),
-          if (unreadCount > 0)
-            const Positioned(
-              right: -2,
-              top: -2,
-              child: Icon(Icons.circle, size: 10, color: Colors.red),
+          const Icon(Icons.notifications_outlined),
+          AnimatedSwitcher(
+            duration: const Duration(milliseconds: 200),
+            switchInCurve: Curves.easeOutBack,
+            switchOutCurve: Curves.easeInCubic,
+            transitionBuilder: (child, animation) => ScaleTransition(
+              scale: animation,
+              child: child,
             ),
+            child: unreadCount > 0
+                ? Positioned(
+                    key: const ValueKey('badge'),
+                    right: -3,
+                    top: -3,
+                    child: Container(
+                      width: 10,
+                      height: 10,
+                      decoration: BoxDecoration(
+                        color: cs.error,
+                        shape: BoxShape.circle,
+                        border: Border.all(
+                          color: cs.surface,
+                          width: 1.5,
+                        ),
+                      ),
+                    ),
+                  )
+                : const SizedBox.shrink(key: ValueKey('no-badge')),
+          ),
         ],
       ),
     );
@@ -422,24 +447,12 @@ List<NavSection> _buildSections(String role) {
             icon: Icons.apartment_outlined,
             selectedIcon: Icons.apartment,
           ),
-          NavItem(
-            label: 'Geofence test',
-            route: '/settings/geofence-test',
-            icon: Icons.map_outlined,
-            selectedIcon: Icons.map,
-          ),
           NavItem(
             label: 'IT Staff Teams',
             route: '/settings/teams',
             icon: Icons.groups_2_outlined,
             selectedIcon: Icons.groups_2,
           ),
-          NavItem(
-            label: 'Permissions',
-            route: '/settings/permissions',
-            icon: Icons.lock_open,
-            selectedIcon: Icons.lock,
-          ),
           if (kIsWeb) ...[
             NavItem(
               label: 'App Update',
@@ -459,19 +472,16 @@ List<NavSection> _buildSections(String role) {
     ];
   }
 
-  // non-admin users still get a simple Settings section containing only
-  // permissions.  this keeps the screen accessible without exposing the
-  // administrative management screens.
   return [
     NavSection(label: 'Operations', items: mainItems),
     NavSection(
       label: 'Settings',
       items: [
         NavItem(
-          label: 'Permissions',
-          route: '/settings/permissions',
-          icon: Icons.lock_open,
-          selectedIcon: Icons.lock,
+          label: 'Logout',
+          route: '',
+          icon: Icons.logout,
+          isLogout: true,
         ),
       ],
     ),