Refactor HomeBloc and GarageDoorBloc event handling; update CreateNewRoutinesDialog to use SpaceTreeDropdown; add settings button SVG.

lib/pages/device_managment/garage_door/bloc/garage_door_bloc.dart

@@ -379,7 +379,7 @@ class GarageDoorBloc extends Bloc<GarageDoorEvent, GarageDoorState> {
       }
       emit(GarageDoorLoadedState(status: deviceStatus));
       add(GarageDoorControlEvent(
-          deviceId: event.deviceId,
+          deviceId: deviceId,
           value: deviceStatus.delay.inSeconds,
           code: 'countdown_1'));
     } catch (e) {
@@ -396,7 +396,7 @@ class GarageDoorBloc extends Bloc<GarageDoorEvent, GarageDoorState> {
     _updateLocalValue(event.code, event.value);
     emit(GarageDoorLoadedState(status: deviceStatus));
     final success = await _runDeBouncer(
-      deviceId: event.deviceId,
+      deviceId: deviceId,
       code: event.code,
       value: event.value,
       oldValue: oldValue,

lib/pages/home/bloc/home_bloc.dart

@@ -35,7 +35,6 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
 
       if (user != null && user!.project != null) {
         await ProjectManager.setProjectUUID(user!.project!.uuid);
-        NavigationService.navigatorKey.currentContext!.read<SpaceTreeBloc>().add(InitialEvent());
       }
       add(FetchTermEvent());
       add(FetchPolicyEvent());

lib/pages/home/view/home_page_web.dart

@@ -20,12 +20,6 @@ class _HomeWebPageState extends State<HomeWebPage> {
   // Flag to track whether the dialog is already shown.
   bool _dialogShown = false;
 
-  @override
-  void initState() {
-    super.initState();
-    final homeBloc = BlocProvider.of<HomeBloc>(context);
-    homeBloc.add(const FetchUserInfo());
-  }
 
   @override
   Widget build(BuildContext context) {
@@ -38,8 +32,10 @@ class _HomeWebPageState extends State<HomeWebPage> {
       child: BlocConsumer<HomeBloc, HomeState>(
         listener: (BuildContext context, state) {
           if (state is HomeInitial) {
-            if (homeBloc.user!.hasAcceptedWebAgreement == false && !_dialogShown) {
+            if (homeBloc.user!.hasAcceptedWebAgreement == false &&
-              _dialogShown = true; // Set the flag to true to indicate the dialog is showing.
+                !_dialogShown) {
+              _dialogShown =
+                  true; // Set the flag to true to indicate the dialog is showing.
               Future.delayed(const Duration(seconds: 1), () {
                 showDialog(
                   context: context,
@@ -98,7 +94,8 @@ class _HomeWebPageState extends State<HomeWebPage> {
                           width: size.width * 0.68,
                           child: GridView.builder(
                             itemCount: homeBloc.homeItems.length,
-                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                            gridDelegate:
+                                const SliverGridDelegateWithFixedCrossAxisCount(
                               crossAxisCount: 3, // Adjust as needed.
                               crossAxisSpacing: 20.0,
                               mainAxisSpacing: 20.0,
@@ -111,7 +108,8 @@ class _HomeWebPageState extends State<HomeWebPage> {
                                 active: homeBloc.homeItems[index].active!,
                                 name: homeBloc.homeItems[index].title!,
                                 img: homeBloc.homeItems[index].icon!,
-                                onTap: () => homeBloc.homeItems[index].onPress(context),
+                                onTap: () =>
+                                    homeBloc.homeItems[index].onPress(context),
                               );
                             },
                           ),

lib/pages/routines/create_new_routines/commu_dropdown.dart

@@ -1,156 +1,157 @@
-import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/routines/create_new_routines/dropdown_menu_content.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
-class CommunityDropdown extends StatelessWidget {
+class SpaceTreeDropdown extends StatefulWidget {
-  final String? selectedValue;
+  final String? selectedSpaceId;
-  final List<CommunityModel> communities;
+  final Function(String?)? onChanged;
-  final Function(String?) onChanged;
-  final TextEditingController _searchController = TextEditingController();
 
-  CommunityDropdown({
+  const SpaceTreeDropdown({
-    Key? key,
+    super.key,
-    required this.selectedValue,
+    this.selectedSpaceId,
-    required this.onChanged,
+    this.onChanged,
-    required this.communities,
+  });
-  }) : super(key: key);
+
+  @override
+  State<SpaceTreeDropdown> createState() => _SpaceTreeDropdownState();
+}
+
+class _SpaceTreeDropdownState extends State<SpaceTreeDropdown> {
+  late String? _selectedSpaceId;
+  final LayerLink _layerLink = LayerLink();
+  OverlayEntry? _overlayEntry;
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedSpaceId = widget.selectedSpaceId;
+  }
+
+  @override
+  void dispose() {
+    _removeOverlay();
+    super.dispose();
+  }
+
+  void _removeOverlay() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(
-      padding: const EdgeInsets.all(10.0),
+      builder: (context, state) {
-      child: Column(
+        final communities = state.searchQuery.isNotEmpty
-        crossAxisAlignment: CrossAxisAlignment.start,
+            ? state.filteredCommunity
-        children: [
+            : state.communityList;
-          Text(
+        final selectedCommunity = _findCommunity(communities, _selectedSpaceId);
-            "Community",
+
-            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+        return CompositedTransformTarget(
-                  fontWeight: FontWeight.w400,
+          link: _layerLink,
-                  fontSize: 13,
+          child: GestureDetector(
-                  color: ColorsManager.blackColor,
+            onTap: _toggleDropdown,
-                ),
-          ),
-          const SizedBox(height: 8),
-          SizedBox(
             child: Container(
+              height: 46,
               decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
+                border: Border.all(color: Colors.grey.shade300),
-            ),
+                borderRadius: BorderRadius.circular(12),
-            child: DropdownButton2<String>(
-              underline: const SizedBox(),
-              value: selectedValue,
-              items: communities.map((community) {
-                return DropdownMenuItem<String>(
-                  value: community.uuid,
-                  child: Text(
-                    '  ${community.name}',
-                    overflow: TextOverflow.ellipsis,
-                    maxLines: 1,
-                  ),
-                );
-              }).toList(),
-              onChanged: onChanged,
-              style: const TextStyle(color: Colors.black),
-              hint: Padding(
-                padding: const EdgeInsets.only(left: 10),
-                child: Text(
-                  "  Please Select",
-                  style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                        color: ColorsManager.textGray,
-                      ),
-                ),
-              ),
-              customButton: Container(
-                height: 45,
-                decoration: BoxDecoration(
-                  border: Border.all(color: ColorsManager.textGray, width: 1.0),
-                  borderRadius: BorderRadius.circular(10),
               ),
+              margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
-                    Expanded(
+                  Padding(
-                      flex: 5,
+                    padding: const EdgeInsets.symmetric(horizontal: 12),
                     child: Text(
-                        selectedValue != null
+                      selectedCommunity?.name ?? 'Select a space',
-                            ? "  ${communities.firstWhere((element) => element.uuid == selectedValue).name}"
+                      style: TextStyle(
-                            : '  Please Select',
+                        color: selectedCommunity != null
-                        style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                              color: selectedValue != null
                             ? Colors.black
-                                  : ColorsManager.textGray,
+                            : Colors.grey,
-                            ),
                         overflow: TextOverflow.ellipsis,
+                        fontWeight: FontWeight.w400,
+                        fontSize: 15,
                       ),
                     ),
-                    Expanded(
+                  ),
-                      child: Container(
+                  Container(
                     decoration: BoxDecoration(
-                          color: Colors.grey[100],
+                      color: Colors.grey[200],
                       borderRadius: const BorderRadius.only(
                         topRight: Radius.circular(10),
                         bottomRight: Radius.circular(10),
                       ),
                     ),
                     height: 45,
+                    width: 35,
                     child: const Icon(
                       Icons.keyboard_arrow_down,
                       color: ColorsManager.textGray,
                     ),
                   ),
-                    ),
                 ],
               ),
             ),
-              dropdownStyleData: DropdownStyleData(
-                maxHeight: MediaQuery.of(context).size.height * 0.4,
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(10),
-                ),
-              ),
-              dropdownSearchData: DropdownSearchData(
-                searchController: _searchController,
-                searchInnerWidgetHeight: 50,
-                searchInnerWidget: Container(
-                  height: 50,
-                  padding:
-                      const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-                  child: TextFormField(
-                    style: const TextStyle(color: Colors.black),
-                    controller: _searchController,
-                    decoration: InputDecoration(
-                      isDense: true,
-                      contentPadding: const EdgeInsets.symmetric(
-                        horizontal: 10,
-                        vertical: 12,
-                      ),
-                      hintText: 'Search for community...',
-                      border: OutlineInputBorder(
-                        borderRadius: BorderRadius.circular(8),
-                      ),
-                    ),
-                  ),
-                ),
-                searchMatchFn: (item, searchValue) {
-                  final communityName =
-                      (item.child as Text).data?.toLowerCase() ?? '';
-                  return communityName
-                      .contains(searchValue.toLowerCase().trim());
-                },
-              ),
-              onMenuStateChange: (isOpen) {
-                if (!isOpen) {
-                  _searchController.clear();
-                }
-              },
-              menuItemStyleData: const MenuItemStyleData(
-                height: 40,
-              ),
-            ),
-          ))
-        ],
           ),
         );
+      },
+    );
+  }
+
+  void _toggleDropdown() {
+    if (_overlayEntry != null) {
+      _removeOverlay();
+      return;
+    }
+
+    _overlayEntry = OverlayEntry(
+      builder: (context) => Positioned(
+        width: 300,
+        child: CompositedTransformFollower(
+          link: _layerLink,
+          showWhenUnlinked: false,
+          offset: const Offset(0, 48),
+          child: Material(
+            elevation: 8,
+            borderRadius: BorderRadius.circular(12),
+            child: DropdownMenuContent(
+              selectedSpaceId: _selectedSpaceId,
+              onChanged: (id) {
+                if (id != null && mounted) {
+                  setState(() => _selectedSpaceId = id);
+                  widget.onChanged?.call(id);
+                  _removeOverlay();
+                }
+              },
+              onClose: _removeOverlay,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    Overlay.of(context).insert(_overlayEntry!);
+  }
+
+  CommunityModel? _findCommunity(
+      List<CommunityModel> communities, String? communityId) {
+    if (communityId == null) return null;
+
+    try {
+      return communities.firstWhere((c) => c.uuid == communityId);
+    } catch (e) {
+      return CommunityModel(
+          uuid: '',
+          createdAt: DateTime.now(),
+          updatedAt: DateTime.now(),
+          name: '',
+          description: '',
+          spaces: []);
+    }
   }
 }

lib/pages/routines/create_new_routines/create_new_routines.dart

@@ -18,6 +18,7 @@ class CreateNewRoutinesDialog extends StatefulWidget {
 class _CreateNewRoutinesDialogState extends State<CreateNewRoutinesDialog> {
   String? _selectedCommunity;
   String? _selectedSpace;
+  String? _selectedId;
 
   @override
   Widget build(BuildContext context) {
@@ -40,7 +41,10 @@ class _CreateNewRoutinesDialogState extends State<CreateNewRoutinesDialog> {
                 spaceHint = 'Select Space';
               }
             }
-
+            if (_selectedId != null && _selectedCommunity != _selectedId) {
+              _selectedSpace = null;
+              _selectedCommunity = _selectedId;
+            }
             return AlertDialog(
               backgroundColor: Colors.white,
               insetPadding: EdgeInsets.zero,
@@ -62,24 +66,16 @@ class _CreateNewRoutinesDialogState extends State<CreateNewRoutinesDialog> {
                       const Divider(),
                       Padding(
                           padding: const EdgeInsets.only(left: 15, right: 15),
-                        child: CommunityDropdown(
+                          child: SpaceTreeDropdown(
-                          communities: _bloc.communities..sort(
+                            selectedSpaceId: _selectedId,
-                              (a, b) => a.name.toLowerCase().compareTo(
-                                    b.name.toLowerCase(),
-                                  ),
-                            ),
-                          selectedValue: _selectedCommunity,
                             onChanged: (String? newValue) {
-                            setState(() {
+                              setState(() => _selectedId = newValue!);
-                              _selectedCommunity = newValue;
+                              if (_selectedId != null) {
-                              _selectedSpace = null;
+                                _bloc.add(
-                            });
+                                    SpaceOnlyWithDevicesEvent(_selectedId!));
-                            if (newValue != null) {
-                              _bloc.add(SpaceOnlyWithDevicesEvent(newValue));
                               }
                             },
-                        ),
+                          )),
-                      ),
                       const SizedBox(height: 5),
                       Padding(
                         padding: const EdgeInsets.only(left: 15, right: 15),

lib/pages/routines/create_new_routines/dropdown_menu_content.dart

@@ -0,0 +1,148 @@
+
+
+
+
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
+
+class DropdownMenuContent extends StatefulWidget {
+  final String? selectedSpaceId;
+  final ValueChanged<String?> onChanged;
+  final VoidCallback onClose;
+
+  const DropdownMenuContent({
+    required this.selectedSpaceId,
+    required this.onChanged,
+    required this.onClose,
+  });
+
+  @override
+  State<DropdownMenuContent> createState() => _DropdownMenuContentState();
+}
+
+class _DropdownMenuContentState extends State<DropdownMenuContent> {
+  final ScrollController _scrollController = ScrollController();
+  final TextEditingController _searchController = TextEditingController();
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_onScroll);
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    _searchController.dispose();
+    super.dispose();
+  }
+
+  void _onScroll() {
+    final bloc = context.read<SpaceTreeBloc>();
+    final state = bloc.state;
+    if (_scrollController.position.pixels >=
+        _scrollController.position.maxScrollExtent - 30) {
+      if (state is SpaceTreeState && !state.paginationIsLoading) {
+        bloc.add(PaginationEvent(state.paginationModel, state.communityList));
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxHeight: 300),
+      child: BlocBuilder<SpaceTreeBloc, SpaceTreeState>(
+        builder: (context, state) {
+          final communities = state.searchQuery.isNotEmpty
+              ? state.filteredCommunity
+              : state.communityList;
+
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              // Search bar
+              Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: TextFormField(
+                  controller: _searchController,
+                  onChanged: (query) {
+                    context.read<SpaceTreeBloc>().add(SearchQueryEvent(query));
+                  },
+                  style: const TextStyle(fontSize: 14, color: Colors.black),
+                  decoration: InputDecoration(
+                    hintText: 'Search for space...',
+                    prefixIcon: const Icon(Icons.search, size: 20),
+                    contentPadding:
+                        const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
+                    border: OutlineInputBorder(
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    isDense: true,
+                  ),
+                ),
+              ),
+              // Community list
+              Expanded(
+                child: ListView.builder(
+                  controller: _scrollController,
+                  itemCount:
+                      communities.length + (state.paginationIsLoading ? 1 : 0),
+                  itemBuilder: (context, index) {
+                    if (index >= communities.length) {
+                      return state.paginationIsLoading
+                          ? const Padding(
+                              padding: EdgeInsets.all(8.0),
+                              child: Center(
+                                child: SizedBox(
+                                  width: 20,
+                                  height: 20,
+                                  child:
+                                      CircularProgressIndicator(strokeWidth: 2),
+                                ),
+                              ),
+                            )
+                          : const SizedBox.shrink();
+                    }
+
+                    final community = communities[index];
+                    final isSelected = community.uuid == widget.selectedSpaceId;
+
+                    return ListTile(
+                      title: Text(
+                        community.name,
+                        style: TextStyle(
+                          color: isSelected ? Colors.blue : Colors.black,
+                          fontWeight:
+                              isSelected ? FontWeight.bold : FontWeight.normal,
+                        ),
+                      ),
+                      onTap: () {
+                        setState(() {
+                          _searchController.clear();
+                          _searchController.text.isEmpty
+                              ? context
+                                  .read<SpaceTreeBloc>()
+                                  .add(SearchQueryEvent(''))
+                              : context.read<SpaceTreeBloc>().add(
+                                  SearchQueryEvent(_searchController.text));
+                        });
+                        // Future.delayed(const Duration(seconds: 1), () {
+                        widget.onChanged(community.uuid);
+                        widget.onClose();
+                        // });
+                      },
+                    );
+                  },
+                ),
+              ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}