refactor desktop main menu and add WIP notifications view

lib/pages_desktop_specific/home/desktop_home_view.dart

@@ -4,6 +4,7 @@ import 'package:stackwallet/pages_desktop_specific/home/address_book_view/deskto
 import 'package:stackwallet/pages_desktop_specific/home/desktop_menu.dart';
 import 'package:stackwallet/pages_desktop_specific/home/desktop_settings_view.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart';
+import 'package:stackwallet/pages_desktop_specific/home/notifications/desktop_notifications_view.dart';
 import 'package:stackwallet/pages_desktop_specific/home/support_and_about_view/desktop_about_view.dart';
 import 'package:stackwallet/pages_desktop_specific/home/support_and_about_view/desktop_support_view.dart';
 import 'package:stackwallet/route_generator.dart';
@@ -19,9 +20,9 @@ class DesktopHomeView extends ConsumerStatefulWidget {
 }
 
 class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
-  int currentViewIndex = 0;
-  final List<Widget> contentViews = [
-    const Navigator(
+  DesktopMenuItemId currentViewKey = DesktopMenuItemId.myStack;
+  final Map<DesktopMenuItemId, Widget> contentViews = {
+    DesktopMenuItemId.myStack: const Navigator(
       key: Key("desktopStackHomeKey"),
       onGenerateRoute: RouteGenerator.generateRoute,
       initialRoute: MyStackView.routeName,
@@ -30,34 +31,36 @@ class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
     //   // todo: exchange
     //   color: Colors.green,
     // ),
-    Container(
-      color: Colors.red,
+    DesktopMenuItemId.notifications: const Navigator(
+      key: Key("desktopNotificationsHomeKey"),
+      onGenerateRoute: RouteGenerator.generateRoute,
+      initialRoute: DesktopNotificationsView.routeName,
     ),
-    const Navigator(
+    DesktopMenuItemId.addressBook: const Navigator(
       key: Key("desktopAddressBookHomeKey"),
       onGenerateRoute: RouteGenerator.generateRoute,
       initialRoute: DesktopAddressBook.routeName,
     ),
-    const Navigator(
+    DesktopMenuItemId.settings: const Navigator(
       key: Key("desktopSettingHomeKey"),
       onGenerateRoute: RouteGenerator.generateRoute,
       initialRoute: DesktopSettingsView.routeName,
     ),
-    const Navigator(
+    DesktopMenuItemId.support: const Navigator(
       key: Key("desktopSupportHomeKey"),
       onGenerateRoute: RouteGenerator.generateRoute,
       initialRoute: DesktopSupportView.routeName,
     ),
-    const Navigator(
+    DesktopMenuItemId.about: const Navigator(
       key: Key("desktopAboutHomeKey"),
       onGenerateRoute: RouteGenerator.generateRoute,
       initialRoute: DesktopAboutView.routeName,
     ),
-  ];
+  };
 
-  void onMenuSelectionChanged(int newIndex) {
+  void onMenuSelectionChanged(DesktopMenuItemId newKey) {
     setState(() {
-      currentViewIndex = newIndex;
+      currentViewKey = newKey;
     });
   }
 
@@ -75,7 +78,7 @@ class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
             color: Theme.of(context).extension<StackColors>()!.background,
           ),
           Expanded(
-            child: contentViews[currentViewIndex],
+            child: contentViews[currentViewKey]!,
           ),
         ],
       ),

lib/pages_desktop_specific/home/desktop_menu.dart

@@ -8,13 +8,23 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
+enum DesktopMenuItemId {
+  myStack,
+  exchange,
+  notifications,
+  addressBook,
+  settings,
+  support,
+  about,
+}
+
 class DesktopMenu extends ConsumerStatefulWidget {
   const DesktopMenu({
     Key? key,
     required this.onSelectionChanged,
   }) : super(key: key);
 
-  final void Function(int)? onSelectionChanged;
+  final void Function(DesktopMenuItemId)? onSelectionChanged;
 
   @override
   ConsumerState<DesktopMenu> createState() => _DesktopMenuState();
@@ -25,13 +35,13 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
   static const minimizedWidth = 72.0;
 
   double _width = expandedWidth;
-  int selectedMenuItem = 0;
+  DesktopMenuItemId selectedMenuItem = DesktopMenuItemId.myStack;
 
-  void updateSelectedMenuItem(int index) {
+  void updateSelectedMenuItem(DesktopMenuItemId idKey) {
     setState(() {
-      selectedMenuItem = index;
+      selectedMenuItem = idKey;
     });
-    widget.onSelectionChanged?.call(index);
+    widget.onSelectionChanged?.call(idKey);
   }
 
   void toggleMinimize() {
@@ -85,7 +95,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                         Assets.svg.walletDesktop,
                         width: 20,
                         height: 20,
-                        color: 0 == selectedMenuItem
+                        color: DesktopMenuItemId.myStack == selectedMenuItem
                             ? Theme.of(context)
                                 .extension<StackColors>()!
                                 .textDark
@@ -95,7 +105,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                                 .withOpacity(0.8),
                       ),
                       label: "My Stack",
-                      value: 0,
+                      value: DesktopMenuItemId.myStack,
                       group: selectedMenuItem,
                       onChanged: updateSelectedMenuItem,
                       iconOnly: _width == minimizedWidth,
@@ -108,7 +118,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                     //     Assets.svg.exchangeDesktop,
                     //     width: 20,
                     //     height: 20,
-                    //     color: 1 == selectedMenuItem
+                    //     color: DesktopMenuItemId.exchange == selectedMenuItem
                     //         ? Theme.of(context)
                     //             .extension<StackColors>()!
                     //             .textDark
@@ -118,7 +128,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                     //             .withOpacity(0.8),
                     //   ),
                     //   label: "Exchange",
-                    //   value: 1,
+                    //   value: DesktopMenuItemId.exchange,
                     //   group: selectedMenuItem,
                     //   onChanged: updateSelectedMenuItem,
                     //   iconOnly: _width == minimizedWidth,
@@ -131,17 +141,18 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                         Assets.svg.bell,
                         width: 20,
                         height: 20,
-                        color: 2 == selectedMenuItem
-                            ? Theme.of(context)
-                                .extension<StackColors>()!
-                                .textDark
-                            : Theme.of(context)
-                                .extension<StackColors>()!
-                                .textDark
-                                .withOpacity(0.8),
+                        color:
+                            DesktopMenuItemId.notifications == selectedMenuItem
+                                ? Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textDark
+                                : Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textDark
+                                    .withOpacity(0.8),
                       ),
                       label: "Notifications",
-                      value: 2,
+                      value: DesktopMenuItemId.notifications,
                       group: selectedMenuItem,
                       onChanged: updateSelectedMenuItem,
                       iconOnly: _width == minimizedWidth,
@@ -154,7 +165,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                         Assets.svg.addressBookDesktop,
                         width: 20,
                         height: 20,
-                        color: 3 == selectedMenuItem
+                        color: DesktopMenuItemId.addressBook == selectedMenuItem
                             ? Theme.of(context)
                                 .extension<StackColors>()!
                                 .textDark
@@ -164,7 +175,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                                 .withOpacity(0.8),
                       ),
                       label: "Address Book",
-                      value: 3,
+                      value: DesktopMenuItemId.addressBook,
                       group: selectedMenuItem,
                       onChanged: updateSelectedMenuItem,
                       iconOnly: _width == minimizedWidth,
@@ -177,7 +188,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                         Assets.svg.gear,
                         width: 20,
                         height: 20,
-                        color: 4 == selectedMenuItem
+                        color: DesktopMenuItemId.settings == selectedMenuItem
                             ? Theme.of(context)
                                 .extension<StackColors>()!
                                 .textDark
@@ -187,7 +198,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                                 .withOpacity(0.8),
                       ),
                       label: "Settings",
-                      value: 4,
+                      value: DesktopMenuItemId.settings,
                       group: selectedMenuItem,
                       onChanged: updateSelectedMenuItem,
                       iconOnly: _width == minimizedWidth,
@@ -200,7 +211,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                         Assets.svg.messageQuestion,
                         width: 20,
                         height: 20,
-                        color: 5 == selectedMenuItem
+                        color: DesktopMenuItemId.support == selectedMenuItem
                             ? Theme.of(context)
                                 .extension<StackColors>()!
                                 .textDark
@@ -210,7 +221,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                                 .withOpacity(0.8),
                       ),
                       label: "Support",
-                      value: 5,
+                      value: DesktopMenuItemId.support,
                       group: selectedMenuItem,
                       onChanged: updateSelectedMenuItem,
                       iconOnly: _width == minimizedWidth,
@@ -223,7 +234,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                         Assets.svg.aboutDesktop,
                         width: 20,
                         height: 20,
-                        color: 6 == selectedMenuItem
+                        color: DesktopMenuItemId.about == selectedMenuItem
                             ? Theme.of(context)
                                 .extension<StackColors>()!
                                 .textDark
@@ -233,7 +244,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                                 .withOpacity(0.8),
                       ),
                       label: "About",
-                      value: 6,
+                      value: DesktopMenuItemId.about,
                       group: selectedMenuItem,
                       onChanged: updateSelectedMenuItem,
                       iconOnly: _width == minimizedWidth,

lib/pages_desktop_specific/home/notifications/desktop_notifications_view.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:stackwallet/notifications/notification_card.dart';
+import 'package:stackwallet/providers/providers.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
+import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
+import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart';
+import 'package:stackwallet/widgets/rounded_white_container.dart';
+
+class DesktopNotificationsView extends ConsumerStatefulWidget {
+  const DesktopNotificationsView({Key? key}) : super(key: key);
+
+  static const String routeName = "/desktopNotifications";
+
+  @override
+  ConsumerState<DesktopNotificationsView> createState() =>
+      _DesktopNotificationsViewState();
+}
+
+class _DesktopNotificationsViewState
+    extends ConsumerState<DesktopNotificationsView> {
+  @override
+  Widget build(BuildContext context) {
+    final notifications =
+        ref.watch(notificationsProvider.select((value) => value.notifications));
+
+    return DesktopScaffold(
+      background: Theme.of(context).extension<StackColors>()!.background,
+      appBar: DesktopAppBar(
+        isCompactHeight: true,
+        leading: Padding(
+          padding: const EdgeInsets.only(left: 24),
+          child: Text(
+            "Notifications",
+            style: STextStyles.desktopH3(context),
+          ),
+        ),
+      ),
+      body: notifications.isEmpty
+          ? RoundedWhiteContainer(
+              child: Center(
+                child: Text(
+                  "Notifications will appear here",
+                  style: STextStyles.desktopTextExtraExtraSmall(context),
+                ),
+              ),
+            )
+          : ListView.builder(
+              itemCount: notifications.length,
+              itemBuilder: (context, index) {
+                return NotificationCard(
+                  notification: notifications[index],
+                );
+              },
+            ),
+    );
+  }
+}

lib/route_generator.dart

@@ -93,6 +93,7 @@ import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_v
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/sub_widgets/qr_code_desktop_popup_content.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/sub_widgets/wallet_keys_desktop_popup.dart';
+import 'package:stackwallet/pages_desktop_specific/home/notifications/desktop_notifications_view.dart';
 import 'package:stackwallet/pages_desktop_specific/home/settings_menu/advanced_settings/advanced_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/home/settings_menu/appearance_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/home/settings_menu/backup_and_restore/backup_and_restore_settings.dart';
@@ -1012,6 +1013,12 @@ class RouteGenerator {
             builder: (_) => const DesktopHomeView(),
             settings: RouteSettings(name: settings.name));
 
+      case DesktopNotificationsView.routeName:
+        return getRoute(
+            shouldUseMaterialRoute: useMaterialPageRoute,
+            builder: (_) => const DesktopNotificationsView(),
+            settings: RouteSettings(name: settings.name));
+
       case DesktopSettingsView.routeName:
         return getRoute(
             shouldUseMaterialRoute: useMaterialPageRoute,