Fix loading state handling and refactor scene/automation rendering in FetchRoutineScenesAutomation

Sp 1330 fe side tree text breaks incorrectly causing layout issues

lib/common/widgets/empty_search_result_widget.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class EmptySearchResultWidget extends StatelessWidget {
+  const EmptySearchResultWidget({
+    this.message = 'No results found',
+    super.key,
+  });
+
+  final String message;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text(
+        message,
+        textAlign: TextAlign.center,
+        style: context.textTheme.bodySmall?.copyWith(
+          color: ColorsManager.lightGreyColor,
+          fontWeight: FontWeight.w400,
+        ),
+      ),
+    );
+  }
+}

lib/common/widgets/sidebar_communities_list.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SidebarCommunitiesList extends StatelessWidget {
+  const SidebarCommunitiesList({
+    required this.communities,
+    required this.itemBuilder,
+    required this.scrollController,
+    required this.onScrollToEnd,
+    super.key,
+  });
+
+  final List<CommunityModel> communities;
+  final Widget Function(BuildContext context, int index) itemBuilder;
+  final ScrollController scrollController;
+  final void Function() onScrollToEnd;
+
+  bool _onNotification(ScrollEndNotification notification) {
+    final hasReachedEnd = notification.metrics.extentAfter == 0;
+    if (hasReachedEnd) {
+      onScrollToEnd.call();
+      return true;
+    }
+
+    return false;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: SizedBox(
+        width: context.screenWidth * 0.5,
+        child: Scrollbar(
+          scrollbarOrientation: ScrollbarOrientation.left,
+          thumbVisibility: true,
+          controller: scrollController,
+          child: NotificationListener<ScrollEndNotification>(
+            onNotification: _onNotification,
+            child: ListView.builder(
+              shrinkWrap: true,
+              padding: const EdgeInsetsDirectional.only(start: 16),
+              itemCount: communities.length,
+              controller: scrollController,
+              itemBuilder: itemBuilder,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/routines/view/routines_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_event.dart';
 import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_event.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/create_new_routines/create_new_routines.dart';
 import 'package:syncrow_web/pages/routines/view/create_new_routine_view.dart';
@@ -9,6 +9,7 @@ import 'package:syncrow_web/pages/routines/widgets/main_routine_view/fetch_routi
 import 'package:syncrow_web/pages/routines/widgets/main_routine_view/routine_view_card.dart';
 import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class RoutinesView extends StatefulWidget {
   const RoutinesView({super.key});
@@ -27,9 +28,10 @@ class _RoutinesViewState extends State<RoutinesView> {
     if (result == null) return;
     final communityId = result['community'];
     final spaceId = result['space'];
-    final _bloc = BlocProvider.of<CreateRoutineBloc>(context);
+    final bloc = BlocProvider.of<CreateRoutineBloc>(context);
     final routineBloc = context.read<RoutineBloc>();
-    _bloc.add(SaveCommunityIdAndSpaceIdEvent(communityID: communityId, spaceID: spaceId));
+    bloc.add(
+        SaveCommunityIdAndSpaceIdEvent(communityID: communityId, spaceID: spaceId));
     await Future.delayed(const Duration(seconds: 1));
     routineBloc.add(const CreateNewRoutineViewEvent(createRoutineView: true));
   }
@@ -54,13 +56,15 @@ class _RoutinesViewState extends State<RoutinesView> {
             ),
             Expanded(
               flex: 4,
-              child: ListView(
+              child: SizedBox(
-                children: [
+                height: context.screenHeight,
-                  Container(
+                width: context.screenWidth,
-                    padding: const EdgeInsets.all(16),
+                child: SingleChildScrollView(
-                    height: MediaQuery.sizeOf(context).height,
+                  padding: const EdgeInsetsDirectional.all(16),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    spacing: 16,
                     children: [
                       Text(
                         "Create New Routines",
@@ -69,7 +73,6 @@ class _RoutinesViewState extends State<RoutinesView> {
                               fontWeight: FontWeight.bold,
                             ),
                       ),
-                        const SizedBox(height: 10),
                       RoutineViewCard(
                         isLoading: false,
                         onChanged: (v) {},
@@ -84,13 +87,10 @@ class _RoutinesViewState extends State<RoutinesView> {
                         icon: Icons.add,
                         textString: '',
                       ),
-                        const SizedBox(height: 15),
+                      const FetchRoutineScenesAutomation(),
-                        const Expanded(child: FetchRoutineScenesAutomation()),
                     ],
                   ),
                 ),
-                  const SizedBox(height: 50),
-                ],
               ),
             )
           ],

lib/pages/routines/widgets/main_routine_view/fetch_routine_scenes_automation.dart

@@ -8,67 +8,121 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
-class FetchRoutineScenesAutomation extends StatefulWidget {
+class FetchRoutineScenesAutomation extends StatelessWidget
-  const FetchRoutineScenesAutomation({super.key});
-
-  @override
-  State<FetchRoutineScenesAutomation> createState() =>
-      _FetchRoutineScenesState();
-}
-
-class _FetchRoutineScenesState extends State<FetchRoutineScenesAutomation>
     with HelperResponsiveLayout {
-  @override
+  const FetchRoutineScenesAutomation({super.key});
-  void initState() {
-    super.initState();
-  }
 
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<RoutineBloc, RoutineState>(
       builder: (context, state) {
-        return state.isLoading
+        if (state.isLoading) return const Center(child: CircularProgressIndicator());
-            ? const Center(
+
-                child: CircularProgressIndicator(),
+        return SingleChildScrollView(
-              )
-            : SingleChildScrollView(
           child: Padding(
             padding: const EdgeInsets.symmetric(vertical: 16.0),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisSize: MainAxisSize.min,
               children: [
-                      Text(
+                _buildListTitle(context, "Scenes (Tab to Run)"),
-                        "Scenes (Tab to Run)",
+                const SizedBox(height: 10),
-                        style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                Visibility(
-                              color: ColorsManager.grayColor,
+                  visible: state.scenes.isNotEmpty,
-                              fontWeight: FontWeight.bold,
+                  replacement: _buildEmptyState(context, "No scenes found"),
+                  child: SizedBox(
+                    height: 200,
+                    child: _buildScenes(state),
                   ),
                 ),
                 const SizedBox(height: 10),
-                      if (state.scenes.isEmpty)
+                _buildListTitle(context, "Automations"),
-                        Text(
+                const SizedBox(height: 3),
-                          "No scenes found",
+                Visibility(
-                          style: context.textTheme.bodyMedium?.copyWith(
+                  visible: state.automations.isNotEmpty,
-                            color: ColorsManager.grayColor,
+                  replacement: _buildEmptyState(context, "No automations found"),
-                          ),
+                  child: SizedBox(
-                        ),
-                      if (state.scenes.isNotEmpty)
-                        SizedBox(
                     height: 200,
-                          child: ListView.builder(
+                    child: _buildAutomations(state),
-                              shrinkWrap: true,
+                  ),
+                )
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildAutomations(RoutineState state) {
+    return ListView.builder(
+      scrollDirection: Axis.horizontal,
+      itemCount: state.automations.length,
+      itemBuilder: (context, index) {
+        final isLoading = state.automations.contains(state.automations[index].id);
+
+        return Column(
+          children: [
+            Padding(
+              padding: EdgeInsets.only(
+                right: isSmallScreenSize(context) ? 4.0 : 8.0,
+              ),
+              child: RoutineViewCard(
+                isLoading: isLoading,
+                onChanged: (v) {
+                  context.read<RoutineBloc>().add(
+                        UpdateAutomationStatus(
+                          automationId: state.automations[index].id,
+                          automationStatusUpdate: AutomationStatusUpdate(
+                            spaceUuid: state.automations[index].spaceId,
+                            isEnable: v,
+                          ),
+                          communityId: state.automations[index].communityId,
+                        ),
+                      );
+                },
+                status: state.automations[index].status,
+                communityId: '',
+                spaceId: state.automations[index].spaceId,
+                sceneId: '',
+                automationId: state.automations[index].id,
+                cardType: 'automations',
+                spaceName: state.automations[index].spaceName,
+                onTap: () {
+                  BlocProvider.of<RoutineBloc>(context).add(
+                    const CreateNewRoutineViewEvent(
+                      createRoutineView: true,
+                    ),
+                  );
+                  context.read<RoutineBloc>().add(
+                        GetAutomationDetails(
+                          automationId: state.automations[index].id,
+                          isAutomation: true,
+                          isUpdate: true,
+                        ),
+                      );
+                },
+                textString: state.automations[index].name,
+                icon: state.automations[index].icon ?? Assets.automation,
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildScenes(RoutineState state) {
+    return ListView.builder(
         scrollDirection: Axis.horizontal,
         itemCount: state.scenes.length,
         itemBuilder: (context, index) {
           final scene = state.scenes[index];
-                                final isLoading =
+          final isLoading = state.loadingSceneId == scene.id;
-                                    state.loadingSceneId == scene.id;
 
           return Padding(
             padding: EdgeInsets.only(
-                                    right:
+              right: isSmallScreenSize(context) ? 4.0 : 8.0,
-                                        isSmallScreenSize(context) ? 4.0 : 8.0,
             ),
             child: Column(
               children: [
@@ -78,141 +132,58 @@ class _FetchRoutineScenesState extends State<FetchRoutineScenesAutomation>
                     context.read<RoutineBloc>().add(
                           SceneTrigger(
                             sceneId: scene.id,
-                                                  name: scene.name));
+                            name: scene.name,
+                          ),
+                        );
                   },
                   status: state.scenes[index].status,
-                                        communityId:
+                  communityId: state.scenes[index].communityId,
-                                            state.scenes[index].communityId ??
-                                                '',
                   spaceId: state.scenes[index].spaceId,
-                                        sceneId:
+                  sceneId: state.scenes[index].sceneTuyaId!,
-                                            state.scenes[index].sceneTuyaId!,
                   automationId: state.scenes[index].id,
                   cardType: 'scenes',
-                                        spaceName:
+                  spaceName: state.scenes[index].spaceName,
-                                            state.scenes[index].spaceName,
                   onTap: () {
-                                          BlocProvider.of<RoutineBloc>(context)
+                    BlocProvider.of<RoutineBloc>(context).add(
-                                              .add(
                       const CreateNewRoutineViewEvent(
-                                                createRoutineView: true),
+                        createRoutineView: true,
+                      ),
                     );
                     context.read<RoutineBloc>().add(
                           GetSceneDetails(
-                                                  sceneId:
+                            sceneId: state.scenes[index].id,
-                                                      state.scenes[index].id,
                             isTabToRun: true,
                             isUpdate: true,
                           ),
                         );
                   },
                   textString: state.scenes[index].name,
-                                        icon: state.scenes[index].icon ??
+                  icon: state.scenes[index].icon ?? Assets.logoHorizontal,
-                                            Assets.logoHorizontal,
                   isFromScenes: true,
-                                        iconInBytes:
+                  iconInBytes: state.scenes[index].iconInBytes,
-                                            state.scenes[index].iconInBytes,
                 ),
               ],
             ),
           );
-                              }),
+        });
-                        ),
+  }
-                      const SizedBox(height: 10),
+
-                      Text(
+  Widget _buildListTitle(BuildContext context, String title) {
-                        "Automations",
+    return Text(
+      title,
       style: Theme.of(context).textTheme.titleLarge?.copyWith(
             color: ColorsManager.grayColor,
             fontWeight: FontWeight.bold,
           ),
-                      ),
+    );
-                      const SizedBox(height: 3),
+  }
-                      if (state.automations.isEmpty)
+
-                        Text(
+  Widget _buildEmptyState(BuildContext context, String title) {
-                          "No automations found",
+    return Text(
+      title,
       style: context.textTheme.bodyMedium?.copyWith(
         color: ColorsManager.grayColor,
       ),
-                        ),
-                      if (state.automations.isNotEmpty)
-                        SizedBox(
-                          height: 200, 
-
-                          child: ListView.builder(
-                              shrinkWrap: true,
-                              scrollDirection: Axis.horizontal,
-                              itemCount: state.automations.length,
-                              itemBuilder: (context, index) {
-                                final isLoading = state.automations!
-                                    .contains(state.automations[index].id);
-
-                                return Column(
-                                  children: [
-                                    Padding(
-                                      padding: EdgeInsets.only(
-                                        right: isSmallScreenSize(context)
-                                            ? 4.0
-                                            : 8.0,
-                                      ),
-                                      child: RoutineViewCard(
-                                        isLoading: isLoading,
-                                        onChanged: (v) {
-                                          context.read<RoutineBloc>().add(
-                                                UpdateAutomationStatus(
-                                                  automationId: state
-                                                      .automations[index].id,
-                                                  automationStatusUpdate:
-                                                      AutomationStatusUpdate(
-                                                          spaceUuid: state
-                                                              .automations[
-                                                                  index]
-                                                              .spaceId,
-                                                          isEnable: v),
-                                                  communityId: state
-                                                      .automations[index]
-                                                      .communityId,
-                                                ),
-                                              );
-                                        },
-                                        status: state.automations[index].status,
-                                        communityId: '',
-                                        spaceId:
-                                            state.automations[index].spaceId,
-                                        sceneId: '',
-                                        automationId:
-                                            state.automations[index].id,
-                                        cardType: 'automations',
-                                        spaceName:
-                                            state.automations[index].spaceName,
-                                        onTap: () {
-                                          BlocProvider.of<RoutineBloc>(context)
-                                              .add(
-                                            const CreateNewRoutineViewEvent(
-                                                createRoutineView: true),
-                                          );
-                                          context.read<RoutineBloc>().add(
-                                                GetAutomationDetails(
-                                                    automationId: state
-                                                        .automations[index].id,
-                                                    isAutomation: true,
-                                                    isUpdate: true),
-                                              );
-                                        },
-                                        textString:
-                                            state.automations[index].name,
-                                        icon: state.automations[index].icon ??
-                                            Assets.automation,
-                                      ),
-                                    ),
-                                  ],
-                                );
-                              }),
-                        ),
-                    ],
-                  ),
-                ),
-              );
-      },
     );
   }
 }

lib/pages/routines/widgets/main_routine_view/routine_view_card.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -66,7 +67,6 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
 
   @override
   Widget build(BuildContext context) {
-    // Use widget.<mixinMethod> instead of just <mixinMethod>
     final double cardWidth = widget.isSmallScreenSize(context)
         ? 120
         : widget.isMediumScreenSize(context)
@@ -127,22 +127,23 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                             )
                           else
                             CupertinoSwitch(
-                              activeColor: ColorsManager.primaryColor,
+                              activeTrackColor: ColorsManager.primaryColor,
                               value: widget.status == 'enable',
                               onChanged: widget.onChanged,
                             )
                         ],
                       )
                     : const SizedBox(),
-                InkWell(
+                Column(
-                  onTap: widget.onTap,
-                  child: Column(
                   children: [
                     Center(
+                      child: InkWell(
+                        customBorder: const CircleBorder(),
+                        onTap: widget.onTap,
                         child: Container(
                           decoration: BoxDecoration(
                             color: ColorsManager.graysColor,
-                            borderRadius: BorderRadius.circular(120),
+                            shape: BoxShape.circle,
                             border: Border.all(
                               color: ColorsManager.greyColor,
                               width: 2.0,
@@ -158,7 +159,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                       height: iconSize,
                                       width: iconSize,
                                       fit: BoxFit.contain,
-                                      errorBuilder: (context, error, stackTrace) => Image.asset(
+                                      errorBuilder: (context, error, stackTrace) =>
+                                          Image.asset(
                                         Assets.logo,
                                         height: iconSize,
                                         width: iconSize,
@@ -171,7 +173,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                       width: iconSize,
                                       fit: BoxFit.contain,
                                     )
-                              : (widget.icon is String && widget.icon.endsWith('.svg'))
+                              : (widget.icon is String &&
+                                      widget.icon.endsWith('.svg'))
                                   ? SvgPicture.asset(
                                       height: iconSize,
                                       width: iconSize,
@@ -181,7 +184,10 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                   : Icon(
                                       widget.icon,
                                       color: ColorsManager.dialogBlueTitle,
-                                      size: widget.isSmallScreenSize(context) ? 30 : 40,
+                                      size: widget.isSmallScreenSize(context)
+                                          ? 30
+                                          : 40,
+                                    ),
                         ),
                       ),
                     ),
@@ -216,7 +222,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                   maxLines: 1,
                                   style: context.textTheme.bodySmall?.copyWith(
                                     color: ColorsManager.blackColor,
-                                      fontSize: widget.isSmallScreenSize(context) ? 10 : 12,
+                                    fontSize:
+                                        widget.isSmallScreenSize(context) ? 10 : 12,
                                   ),
                                 ),
                               ],
@@ -226,7 +233,6 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                     ),
                   ],
                 ),
-                ),
               ],
             ),
           ),

lib/pages/space_tree/view/custom_expansion.dart

@@ -8,19 +8,20 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
   final bool isSelected;
   final bool isSoldCheck;
   final bool isExpanded;
-  final Function? onExpansionChanged;
+  final void Function()? onExpansionChanged;
-  final Function? onItemSelected;
+  final void Function()? onItemSelected;
 
-  const CustomExpansionTileSpaceTree(
+  const CustomExpansionTileSpaceTree({
-      {super.key,
+    required this.isSelected,
-      this.spaceId,
     required this.title,
+    this.spaceId,
     this.children,
-      this.isExpanded = false,
     this.onExpansionChanged,
     this.onItemSelected,
-      required this.isSelected,
+    this.isExpanded = false,
-      this.isSoldCheck = false});
+    this.isSoldCheck = false,
+    super.key,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -30,50 +31,30 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
           children: [
             Checkbox(
               value: isSoldCheck ? null : isSelected,
-              onChanged: (bool? value) {
+              onChanged: (value) => onItemSelected?.call(),
-                if (onItemSelected != null) {
-                  onItemSelected!();
-                }
-              },
               tristate: true,
-              side: WidgetStateBorderSide.resolveWith((states) {
+              side: WidgetStateBorderSide.resolveWith(
-                return const BorderSide(color: ColorsManager.grayBorder);
+                (states) => const BorderSide(color: ColorsManager.grayBorder),
-              }),
+              ),
               fillColor: WidgetStateProperty.resolveWith((states) {
                 if (states.contains(WidgetState.selected)) {
                   return ColorsManager.blue1;
-                } else {
-                  return ColorsManager.checkBoxFillColor;
                 }
+
+                return ColorsManager.checkBoxFillColor;
               }),
               checkColor: ColorsManager.whiteColors,
             ),
-            if (children != null && children!.isNotEmpty)
+            _buildExpansionIcon(),
-              InkWell(
-                onTap: () {
-                  if (onExpansionChanged != null) {
-                    onExpansionChanged!();
-                  }
-                },
-                child: Icon(
-                  isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
-                  color: ColorsManager.lightGrayColor,
-                  size: 16.0,
-                ),
-              ),
             Expanded(
               child: GestureDetector(
-                onTap: () {
+                onTap: onItemSelected,
-                  if (onItemSelected != null) {
-                    onItemSelected!();
-                  }
-                },
                 child: Text(
                   _capitalizeFirstLetter(title),
                   style: Theme.of(context).textTheme.bodySmall!.copyWith(
                         color: isSelected
-                            ? ColorsManager.blackColor // Change color to black when selected
+                            ? ColorsManager.blackColor
-                            : ColorsManager.lightGrayColor, // Gray when not selected
+                            : ColorsManager.lightGrayColor,
                         fontWeight: FontWeight.w400,
                       ),
                 ),
@@ -92,6 +73,20 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
     );
   }
 
+  Widget _buildExpansionIcon() {
+    return Visibility(
+      visible: children != null && children!.isNotEmpty,
+      child: InkWell(
+        onTap: onExpansionChanged,
+        child: Icon(
+          isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
+          color: ColorsManager.lightGrayColor,
+          size: 16.0,
+        ),
+      ),
+    );
+  }
+
   String _capitalizeFirstLetter(String text) {
     if (text.isEmpty) return text;
     return text[0].toUpperCase() + text.substring(1);

lib/pages/space_tree/view/space_tree_view.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/common/widgets/search_bar.dart';
+import 'package:syncrow_web/common/widgets/sidebar_communities_list.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';
@@ -23,7 +24,13 @@ class SpaceTreeView extends StatefulWidget {
 }
 
 class _SpaceTreeViewState extends State<SpaceTreeView> {
-  final ScrollController _scrollController = ScrollController();
+  late final ScrollController _scrollController;
+
+  @override
+  void initState() {
+    _scrollController = ScrollController();
+    super.initState();
+  }
 
   @override
   void dispose() {
@@ -34,23 +41,27 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) {
-      List<CommunityModel> list =
+      final communities = state.searchQuery.isNotEmpty
-          state.searchQuery.isNotEmpty ? state.filteredCommunity : state.communityList;
+          ? state.filteredCommunity
+          : state.communityList;
       return Container(
         height: MediaQuery.sizeOf(context).height,
         decoration: widget.isSide == true
-            ? subSectionContainerDecoration.copyWith(color: ColorsManager.whiteColors)
+            ? subSectionContainerDecoration.copyWith(
+                color: ColorsManager.whiteColors)
             : const BoxDecoration(color: ColorsManager.whiteColors),
         child: state is SpaceTreeLoadingState
             ? const Center(child: CircularProgressIndicator())
             : Column(
                 children: [
-                  widget.isSide == true
+                  if (widget.isSide == true)
-                      ? Container(
+                    Container(
                       decoration: const BoxDecoration(
                         color: ColorsManager.circleRolesBackground,
                         borderRadius: BorderRadius.only(
-                                topRight: Radius.circular(20), topLeft: Radius.circular(20)),
+                          topRight: Radius.circular(20),
+                          topLeft: Radius.circular(20),
+                        ),
                       ),
                       child: Padding(
                         padding: const EdgeInsets.all(8.0),
@@ -59,15 +70,23 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
                             Expanded(
                               child: Container(
                                 decoration: BoxDecoration(
-                                        borderRadius: const BorderRadius.all(Radius.circular(20)),
+                                  borderRadius: const BorderRadius.all(
-                                        border: Border.all(color: ColorsManager.grayBorder)),
+                                    Radius.circular(20),
+                                  ),
+                                  border: Border.all(
+                                    color: ColorsManager.grayBorder,
+                                  ),
+                                ),
                                 child: TextFormField(
-                                      style: context.textTheme.bodyMedium
+                                  style: context.textTheme.bodyMedium?.copyWith(
-                                          ?.copyWith(color: ColorsManager.blackColor),
+                                    color: ColorsManager.blackColor,
-                                      onChanged: (value) {
+                                  ),
-                                        context.read<SpaceTreeBloc>().add(SearchQueryEvent(value));
+                                  onChanged: (value) =>
-                                      },
+                                      context.read<SpaceTreeBloc>().add(
-                                      decoration: textBoxDecoration(radios: 20)!.copyWith(
+                                            SearchQueryEvent(value),
+                                          ),
+                                  decoration:
+                                      textBoxDecoration(radios: 20)?.copyWith(
                                     fillColor: Colors.white,
                                     suffixIcon: Padding(
                                       padding: const EdgeInsets.only(right: 16),
@@ -77,10 +96,12 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
                                         height: 24,
                                       ),
                                     ),
-                                        hintStyle: context.textTheme.bodyMedium?.copyWith(
+                                    hintStyle:
+                                        context.textTheme.bodyMedium?.copyWith(
                                       fontWeight: FontWeight.w400,
                                       fontSize: 12,
-                                            color: ColorsManager.textGray),
+                                      color: ColorsManager.textGray,
+                                    ),
                                   ),
                                 ),
                               ),
@@ -89,170 +110,92 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
                         ),
                       ),
                     )
-                      : CustomSearchBar(
+                  else
-                          onSearchChanged: (query) {
+                    CustomSearchBar(
-                            context.read<SpaceTreeBloc>().add(SearchQueryEvent(query));
+                      onSearchChanged: (query) => context.read<SpaceTreeBloc>().add(
-                          },
+                            SearchQueryEvent(query),
+                          ),
                     ),
                   const SizedBox(height: 16),
                   Expanded(
                     child: state.isSearching
                         ? const Center(child: CircularProgressIndicator())
-                        : ListView(
+                        : SidebarCommunitiesList(
-                            shrinkWrap: true,
+                            onScrollToEnd: () => context.read<SpaceTreeBloc>().add(
-                            scrollDirection: Axis.horizontal,
+                                  PaginationEvent(
-                            children: [
+                                    state.paginationModel,
-                              Container(
+                                    state.communityList,
-                                width: MediaQuery.sizeOf(context).width * 0.5,
-                                padding: const EdgeInsets.all(8.0),
-                                child: list.isEmpty
-                                    ? Center(
-                                        child: Text(
-                                          'No results found',
-                                          style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                                color: ColorsManager.lightGrayColor,
-                                                fontWeight: FontWeight.w400,
                                   ),
                                 ),
-                                      )
+                            scrollController: _scrollController,
-                                    : Scrollbar(
+                            communities: communities,
-                                        scrollbarOrientation: ScrollbarOrientation.left,
-                                        thumbVisibility: true,
-                                        controller: _scrollController,
-                                        child: NotificationListener(
-                                          onNotification: (notification) {
-                                            if (notification is ScrollEndNotification &&
-                                                notification.metrics.extentAfter == 0) {
-                                              // If the user has reached the end of the list Load more data
-                                              context.read<SpaceTreeBloc>().add(PaginationEvent(
-                                                  state.paginationModel, state.communityList));
-                                            }
-                                            return false;
-                                          },
-                                          child: Padding(
-                                            padding: const EdgeInsets.only(left: 16),
-                                            child: ListView.builder(
-                                                shrinkWrap: true,
-                                                itemCount: list.length,
-                                                controller: _scrollController,
                             itemBuilder: (context, index) {
                               return CustomExpansionTileSpaceTree(
-                                                    title: list[index].name,
+                                title: communities[index].name,
                                 isSelected: state.selectedCommunities
-                                                        .contains(list[index].uuid),
+                                    .contains(communities[index].uuid),
                                 isSoldCheck: state.selectedCommunities
-                                                        .contains(list[index].uuid),
+                                    .contains(communities[index].uuid),
-                                                    onExpansionChanged: () {
+                                onExpansionChanged: () =>
                                     context.read<SpaceTreeBloc>().add(
-                                                          OnCommunityExpanded(list[index].uuid));
+                                          OnCommunityExpanded(
-                                                    },
+                                            communities[index].uuid,
-                                                    isExpanded: state.expandedCommunities
+                                          ),
-                                                        .contains(list[index].uuid),
+                                        ),
+                                isExpanded: state.expandedCommunities.contains(
+                                  communities[index].uuid,
+                                ),
                                 onItemSelected: () {
                                   context.read<SpaceTreeBloc>().add(
-                                                          OnCommunitySelected(list[index].uuid,
+                                        OnCommunitySelected(
-                                                              list[index].spaces));
+                                          communities[index].uuid,
+                                          communities[index].spaces,
+                                        ),
+                                      );
                                   widget.onSelect();
                                 },
-                                                    children: list[index].spaces.map((space) {
+                                children: communities[index].spaces.map(
+                                  (space) {
                                     return CustomExpansionTileSpaceTree(
                                       title: space.name,
-                                                        isExpanded: state.expandedSpaces
+                                      isExpanded:
-                                                            .contains(space.uuid),
+                                          state.expandedSpaces.contains(space.uuid),
                                       onItemSelected: () {
                                         context.read<SpaceTreeBloc>().add(
                                               OnSpaceSelected(
-                                                                  list[index],
+                                                communities[index],
                                                 space.uuid ?? '',
-                                                                  space.children));
+                                                space.children,
+                                              ),
+                                            );
                                         widget.onSelect();
                                       },
-                                                        onExpansionChanged: () {
+                                      onExpansionChanged: () =>
                                           context.read<SpaceTreeBloc>().add(
-                                                              OnSpaceExpanded(list[index].uuid,
+                                                OnSpaceExpanded(
-                                                                  space.uuid ?? ''));
+                                                  communities[index].uuid,
-                                                        },
+                                                  space.uuid ?? '',
+                                                ),
+                                              ),
                                       isSelected: state.selectedSpaces
                                               .contains(space.uuid) ||
                                           state.soldCheck.contains(space.uuid),
                                       isSoldCheck:
                                           state.soldCheck.contains(space.uuid),
                                       children: _buildNestedSpaces(
-                                                            context, state, space, list[index]),
+                                        context,
+                                        state,
+                                        space,
+                                        communities[index],
+                                      ),
                                     );
-                                                    }).toList(),
+                                  },
+                                ).toList(),
                               );
-                                                }),
+                            },
-                                          ),
-                                        ),
-                                      ),
-                              ),
-                            ],
                           ),
                   ),
                   if (state.paginationIsLoading) const CircularProgressIndicator(),
-                  // Expanded(
-                  //   child: Padding(
-                  //     padding: const EdgeInsets.all(8.0),
-                  //     child: list.isEmpty
-                  //         ? Center(
-                  //             child: Text(
-                  //               'No results found',
-                  //               style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                  //                     color: ColorsManager.lightGrayColor, // Gray when not selected
-                  //                     fontWeight: FontWeight.w400,
-                  //                   ),
-                  //             ),
-                  //           )
-                  //         : ListView(
-                  //             shrinkWrap: true,
-                  //             children: list
-                  //                 .map(
-                  //                   (community) => CustomExpansionTileSpaceTree(
-                  //                     title: community.name,
-                  //                     isSelected:
-                  //                         state.selectedCommunities.contains(community.uuid),
-                  //                     isSoldCheck:
-                  //                         state.selectedCommunities.contains(community.uuid),
-                  //                     onExpansionChanged: () {
-                  //                       context
-                  //                           .read<SpaceTreeBloc>()
-                  //                           .add(OnCommunityExpanded(community.uuid));
-                  //                     },
-                  //                     isExpanded:
-                  //                         state.expandedCommunities.contains(community.uuid),
-                  //                     onItemSelected: () {
-                  //                       context.read<SpaceTreeBloc>().add(
-                  //                           OnCommunitySelected(community.uuid, community.spaces));
-
-                  //                       onSelect();
-                  //                     },
-                  //                     children: community.spaces.map((space) {
-                  //                       return CustomExpansionTileSpaceTree(
-                  //                         title: space.name,
-                  //                         isExpanded: state.expandedSpaces.contains(space.uuid),
-                  //                         onItemSelected: () {
-                  //                           context.read<SpaceTreeBloc>().add(OnSpaceSelected(
-                  //                               community.uuid, space.uuid ?? '', space.children));
-                  //                           onSelect();
-                  //                         },
-                  //                         onExpansionChanged: () {
-                  //                           context.read<SpaceTreeBloc>().add(
-                  //                               OnSpaceExpanded(community.uuid, space.uuid ?? ''));
-                  //                         },
-                  //                         isSelected: state.selectedSpaces.contains(space.uuid) ||
-                  //                             state.soldCheck.contains(space.uuid),
-                  //                         isSoldCheck: state.soldCheck.contains(space.uuid),
-                  //                         children: _buildNestedSpaces(
-                  //                             context, state, space, community.uuid),
-                  //                       );
-                  //                     }).toList(),
-                  //                   ),
-                  //                 )
-                  //                 .toList(),
-                  //           ),
-                  //   ),
-                  // ),
                 ],
               ),
       );
@@ -260,22 +203,28 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
   }
 
   List<Widget> _buildNestedSpaces(
-      BuildContext context, SpaceTreeState state, SpaceModel space, CommunityModel community) {
+    BuildContext context,
+    SpaceTreeState state,
+    SpaceModel space,
+    CommunityModel community,
+  ) {
     return space.children.map((child) {
       return CustomExpansionTileSpaceTree(
-        isSelected:
+        isSelected: state.selectedSpaces.contains(child.uuid) ||
-            state.selectedSpaces.contains(child.uuid) || state.soldCheck.contains(child.uuid),
+            state.soldCheck.contains(child.uuid),
         isSoldCheck: state.soldCheck.contains(child.uuid),
         title: child.name,
         isExpanded: state.expandedSpaces.contains(child.uuid),
         onItemSelected: () {
-          context
+          context.read<SpaceTreeBloc>().add(
-              .read<SpaceTreeBloc>()
+                OnSpaceSelected(community, child.uuid ?? '', child.children),
-              .add(OnSpaceSelected(community, child.uuid ?? '', child.children));
+              );
           widget.onSelect();
         },
         onExpansionChanged: () {
-          context.read<SpaceTreeBloc>().add(OnSpaceExpanded(community.uuid, child.uuid ?? ''));
+          context.read<SpaceTreeBloc>().add(
+                OnSpaceExpanded(community.uuid, child.uuid ?? ''),
+              );
         },
         children: _buildNestedSpaces(context, state, child, community),
       );

lib/pages/spaces_management/all_spaces/widgets/dialogs/create_space_dialog.dart

@@ -592,6 +592,8 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
         return CreateSubSpaceDialog(
             spaceName: name,
             dialogTitle: isEdit ? 'Edit Sub-space' : 'Create Sub-space',
+            spaceTags: spaceTags,
+            isEdit: isEdit,
             products: products,
             existingSubSpaces: existingSubSpaces,
             onSave: (slectedSubspaces) {

lib/pages/spaces_management/all_spaces/widgets/sidebar_widget.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/common/widgets/empty_search_result_widget.dart';
 import 'package:syncrow_web/common/widgets/search_bar.dart';
+import 'package:syncrow_web/common/widgets/sidebar_communities_list.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_event.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
@@ -30,6 +32,8 @@ class SidebarWidget extends StatefulWidget {
 }
 
 class _SidebarWidgetState extends State<SidebarWidget> {
+  late final ScrollController _scrollController;
+
   String _searchQuery = '';
   String? _selectedSpaceUuid;
   String? _selectedId;
@@ -37,9 +41,16 @@ class _SidebarWidgetState extends State<SidebarWidget> {
   @override
   void initState() {
     _selectedId = widget.selectedSpaceUuid;
+    _scrollController = ScrollController();
     super.initState();
   }
 
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
   @override
   void didUpdateWidget(covariant SidebarWidget oldWidget) {
     if (widget.selectedSpaceUuid != oldWidget.selectedSpaceUuid) {
@@ -86,12 +97,14 @@ class _SidebarWidgetState extends State<SidebarWidget> {
     return isSpaceSelected || anySubSpaceIsSelected;
   }
 
+  static const _width = 300.0;
+
   @override
   Widget build(BuildContext context) {
     final filteredCommunities = _filteredCommunities();
 
     return Container(
-      width: 300,
+      width: _width,
       decoration: subSectionContainerDecoration,
       child: Column(
         mainAxisSize: MainAxisSize.min,
@@ -103,10 +116,18 @@ class _SidebarWidgetState extends State<SidebarWidget> {
           ),
           const SizedBox(height: 16),
           Expanded(
-            child: ListView(
+            child: Visibility(
-              children: filteredCommunities
+              visible: filteredCommunities.isNotEmpty,
-                  .map((community) => _buildCommunityTile(context, community))
+              replacement: const EmptySearchResultWidget(),
-                  .toList(),
+              child: SidebarCommunitiesList(
+                scrollController: _scrollController,
+                onScrollToEnd: () {},
+                communities: filteredCommunities,
+                itemBuilder: (context, index) => _buildCommunityTile(
+                  context,
+                  filteredCommunities[index],
+                ),
+              ),
             ),
           ),
         ],
@@ -134,11 +155,12 @@ class _SidebarWidgetState extends State<SidebarWidget> {
       },
       onExpansionChanged: (title, expanded) {},
       children: community.spaces
-          .where((space) {
+          .where(
-            final isDeleted = space.status != SpaceStatus.deleted;
+            (space) => {
-            final isParentDeleted = space.status != SpaceStatus.parentDeleted;
+              SpaceStatus.deleted,
-            return (isDeleted || isParentDeleted);
+              SpaceStatus.parentDeleted,
-          })
+            }.contains(space.status),
+          )
           .map((space) => _buildSpaceTile(space: space, community: community))
           .toList(),
     );

lib/pages/spaces_management/create_subspace/views/create_subspace_model_dialog.dart

@@ -4,155 +4,169 @@ import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
 import 'package:syncrow_web/pages/common/buttons/default_button.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/subspace_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_event.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_state.dart';
-import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart';
-import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
-class CreateSubSpaceDialog extends StatefulWidget {
+class CreateSubSpaceDialog extends StatelessWidget {
+  final bool isEdit;
   final String dialogTitle;
   final List<SubspaceModel>? existingSubSpaces;
   final String? spaceName;
+  final List<Tag>? spaceTags;
   final List<ProductModel>? products;
-  final void Function(List<SubspaceModel>?)? onSave;
+  final Function(List<SubspaceModel>?)? onSave;
 
-  const CreateSubSpaceDialog({
+  const CreateSubSpaceDialog(
+      {Key? key,
+      required this.isEdit,
       required this.dialogTitle,
-    required this.spaceName,
-    required this.products,
-    required this.onSave,
       this.existingSubSpaces,
-    super.key,
+      required this.spaceName,
-  });
+      required this.spaceTags,
-
+      required this.products,
-  @override
+      required this.onSave})
-  State<CreateSubSpaceDialog> createState() => _CreateSubSpaceDialogState();
+      : super(key: key);
-}
-
-class _CreateSubSpaceDialogState extends State<CreateSubSpaceDialog> {
-  late final TextEditingController _subspaceNameController;
-
-  @override
-  void initState() {
-    _subspaceNameController = TextEditingController();
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    _subspaceNameController.dispose();
-    super.dispose();
-  }
 
   @override
   Widget build(BuildContext context) {
-    return BlocProvider(
+    final screenWidth = MediaQuery.of(context).size.width;
+    final textController = TextEditingController();
+
+    return Dialog(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(20),
+      ),
+      child: BlocProvider(
         create: (_) {
           final bloc = SubSpaceBloc();
-        if (widget.existingSubSpaces != null) {
+          if (existingSubSpaces != null) {
-          for (final subSpace in widget.existingSubSpaces ?? []) {
+            for (var subSpace in existingSubSpaces!) {
               bloc.add(AddSubSpace(subSpace));
             }
           }
           return bloc;
         },
-      child: Dialog(
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(20),
-        ),
         child: BlocBuilder<SubSpaceBloc, SubSpaceState>(
           builder: (context, state) {
             return Container(
-              width: context.screenWidth * 0.35,
                 color: ColorsManager.whiteColors,
-              padding: const EdgeInsets.all(16),
+                child: SizedBox(
+                  width: screenWidth * 0.35,
+                  child: Padding(
+                    padding: const EdgeInsets.all(16.0),
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       mainAxisSize: MainAxisSize.min,
                       children: [
                         Text(
-                    widget.dialogTitle,
+                          dialogTitle,
-                    style: context.textTheme.headlineLarge?.copyWith(
+                          style: Theme.of(context)
-                      color: ColorsManager.blackColor,
+                              .textTheme
-                    ),
+                              .headlineLarge
+                              ?.copyWith(color: ColorsManager.blackColor),
                         ),
                         const SizedBox(height: 16),
                         Container(
-                    width: context.screenWidth * 0.35,
+                          width: screenWidth * 0.35,
                           padding: const EdgeInsets.symmetric(
-                      vertical: 10,
+                              vertical: 10.0, horizontal: 16.0),
-                      horizontal: 16,
-                    ),
                           decoration: BoxDecoration(
                             color: ColorsManager.boxColor,
                             borderRadius: BorderRadius.circular(10),
                           ),
                           child: Wrap(
-                      spacing: 8,
+                            spacing: 8.0,
-                      runSpacing: 8,
+                            runSpacing: 8.0,
-                      alignment: WrapAlignment.start,
-                      crossAxisAlignment: WrapCrossAlignment.center,
                             children: [
                               ...state.subSpaces.asMap().entries.map(
                                 (entry) {
                                   final index = entry.key;
                                   final subSpace = entry.value;
 
-                            final lowerName = subSpace.subspaceName.toLowerCase();
+                                  final lowerName =
+                                      subSpace.subspaceName.toLowerCase();
 
                                   final duplicateIndices = state.subSpaces
                                       .asMap()
                                       .entries
                                       .where((e) =>
-                                    e.value.subspaceName.toLowerCase() == lowerName)
+                                          e.value.subspaceName.toLowerCase() ==
+                                          lowerName)
                                       .map((e) => e.key)
                                       .toList();
-                            final isDuplicate = duplicateIndices.length > 1 &&
+                                  final isDuplicate =
+                                      duplicateIndices.length > 1 &&
                                           duplicateIndices.indexOf(index) != 0;
-                            return SubspaceChip(
+
-                              subSpace: SubspaceTemplateModel(
+                                  return Chip(
-                                subspaceName: entry.value.subspaceName,
+                                    label: Text(subSpace.subspaceName,
-                                disabled: entry.value.disabled,
+                                        style: Theme.of(context)
+                                            .textTheme
+                                            .bodyMedium
+                                            ?.copyWith(
+                                                color:
+                                                    ColorsManager.spaceColor)),
+                                    backgroundColor: ColorsManager.whiteColors,
+                                    shape: RoundedRectangleBorder(
+                                      borderRadius: BorderRadius.circular(10),
+                                      side: BorderSide(
+                                        color: isDuplicate
+                                            ? ColorsManager.red
+                                            : ColorsManager.transparentColor,
+                                        width: 0,
                                       ),
-                              isDuplicate: isDuplicate,
-                              onDeleted: () => context.read<SubSpaceBloc>().add(
-                                    RemoveSubSpace(subSpace),
                                     ),
+                                    deleteIcon: Container(
+                                      width: 24,
+                                      height: 24,
+                                      decoration: BoxDecoration(
+                                        shape: BoxShape.circle,
+                                        border: Border.all(
+                                          color: ColorsManager.lightGrayColor,
+                                          width: 1.5,
+                                        ),
+                                      ),
+                                      child: const Icon(
+                                        Icons.close,
+                                        size: 16,
+                                        color: ColorsManager.lightGrayColor,
+                                      ),
+                                    ),
+                                    onDeleted: () => context
+                                        .read<SubSpaceBloc>()
+                                        .add(RemoveSubSpace(subSpace)),
                                   );
                                 },
                               ),
                               SizedBox(
                                 width: 200,
                                 child: TextField(
-                            controller: _subspaceNameController,
+                                    controller: textController,
                                     decoration: InputDecoration(
                                         border: InputBorder.none,
                                         hintText: state.subSpaces.isEmpty
                                             ? 'Please enter the name'
                                             : null,
-                              hintStyle: context.textTheme.bodySmall?.copyWith(
+                                        hintStyle: Theme.of(context)
-                                color: ColorsManager.lightGrayColor,
+                                            .textTheme
-                              ),
+                                            .bodySmall
-                            ),
+                                            ?.copyWith(
+                                                color: ColorsManager
+                                                    .lightGrayColor)),
                                     onSubmitted: (value) {
-                              final trimmedValue = value.trim();
+                                      if (value.trim().isNotEmpty) {
-                              if (trimmedValue.isNotEmpty) {
                                         context.read<SubSpaceBloc>().add(
-                                      AddSubSpace(
+                                            AddSubSpace(SubspaceModel(
-                                        SubspaceModel(
+                                                subspaceName: value.trim(),
-                                          subspaceName: trimmedValue,
+                                                disabled: false)));
-                                          disabled: false,
+                                        textController.clear();
-                                        ),
-                                      ),
-                                    );
-                                _subspaceNameController.clear();
                                       }
                                     },
-                            style: context.textTheme.bodyMedium,
+                                    style:
-                          ),
+                                        Theme.of(context).textTheme.bodyMedium),
                               ),
                             ],
                           ),
@@ -160,12 +174,13 @@ class _CreateSubSpaceDialogState extends State<CreateSubSpaceDialog> {
                         if (state.errorMessage.isNotEmpty)
                           Padding(
                             padding: const EdgeInsets.only(top: 8.0),
-                      child: Text(
+                            child: Text(state.errorMessage,
-                        state.errorMessage,
+                                style: Theme.of(context)
-                        style: context.textTheme.bodySmall?.copyWith(
+                                    .textTheme
+                                    .bodySmall
+                                    ?.copyWith(
                                       color: ColorsManager.warningRed,
-                        ),
+                                    )),
-                      ),
                           ),
                         const SizedBox(height: 16),
                         Row(
@@ -181,14 +196,16 @@ class _CreateSubSpaceDialogState extends State<CreateSubSpaceDialog> {
                             const SizedBox(width: 10),
                             Expanded(
                               child: DefaultButton(
-                          onPressed: state.errorMessage.isEmpty
+                                onPressed: (state.errorMessage.isNotEmpty)
-                              ? () {
+                                    ? null
-                                  final subSpacesBloc = context.read<SubSpaceBloc>();
+                                    : () async {
-                                  final subSpaces = subSpacesBloc.state.subSpaces;
+                                        final subSpaces = context
-                                  widget.onSave?.call(subSpaces);
+                                            .read<SubSpaceBloc>()
+                                            .state
+                                            .subSpaces;
+                                        onSave!(subSpaces);
                                         Navigator.of(context).pop();
-                                }
+                                      },
-                              : null,
                                 backgroundColor: ColorsManager.secondaryColor,
                                 borderRadius: 10,
                                 foregroundColor: state.errorMessage.isNotEmpty
@@ -201,7 +218,8 @@ class _CreateSubSpaceDialogState extends State<CreateSubSpaceDialog> {
                         ),
                       ],
                     ),
-            );
+                  ),
+                ));
           },
         ),
       ),

lib/pages/spaces_management/create_subspace_model/widgets/create_subspace_model_chips_box.dart

@@ -1,7 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
-import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspaces_textfield.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
@@ -54,9 +51,6 @@ class CreateSubspaceModelChipsBox extends StatelessWidget {
               return SubspaceChip(
                 subSpace: subSpace,
                 isDuplicate: isDuplicate,
-                onDeleted: () => context.read<SubSpaceModelBloc>().add(
-                      RemoveSubSpaceModel(subSpace),
-                    ),
               );
             },
           ),

lib/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart

@@ -1,4 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
@@ -8,12 +11,10 @@ class SubspaceChip extends StatelessWidget {
     required this.subSpace,
     required this.isDuplicate,
     super.key,
-    required this.onDeleted,
   });
 
   final SubspaceTemplateModel subSpace;
   final bool isDuplicate;
-  final void Function() onDeleted;
 
   @override
   Widget build(BuildContext context) {
@@ -49,7 +50,9 @@ class SubspaceChip extends StatelessWidget {
           ),
         ),
       ),
-      onDeleted: onDeleted,
+      onDeleted: () => context.read<SubSpaceModelBloc>().add(
+            RemoveSubSpaceModel(subSpace),
+          ),
     );
   }
 }

lib/pages/spaces_management/space_model/widgets/dialog/create_space_model_dialog.dart

@@ -145,13 +145,11 @@ class CreateSpaceModelDialog extends StatelessWidget {
                     ),
                     const SizedBox(height: 10),
                     TagChipDisplay(
-                      context,
-                      screenWidth: screenWidth,
                       spaceModel: updatedSpaceModel,
                       products: products,
                       subspaces: subspaces,
                       allTags: allTags,
-                      spaceNameController: spaceNameController,
+                      spaceName: spaceNameController.text,
                       pageContext: pageContext,
                       otherSpaceModels: otherSpaceModels,
                       allSpaceModels: allSpaceModels,

lib/pages/spaces_management/space_model/widgets/tag_chips_display_widget.dart

@@ -10,90 +10,77 @@ import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_
 import 'package:syncrow_web/pages/spaces_management/space_model/widgets/button_content_widget.dart';
 import 'package:syncrow_web/pages/spaces_management/tag_model/views/add_device_type_model_widget.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class TagChipDisplay extends StatelessWidget {
-  final double screenWidth;
+  const TagChipDisplay({
+    required this.spaceModel,
+    required this.products,
+    required this.subspaces,
+    required this.allTags,
+    required this.spaceName,
+    required this.projectTags,
+    this.pageContext,
+    this.otherSpaceModels,
+    this.allSpaceModels,
+    super.key,
+  });
+
   final SpaceTemplateModel? spaceModel;
   final List<ProductModel>? products;
   final List<SubspaceTemplateModel>? subspaces;
   final List<String>? allTags;
-  final TextEditingController spaceNameController;
+  final String spaceName;
   final BuildContext? pageContext;
   final List<String>? otherSpaceModels;
   final List<SpaceTemplateModel>? allSpaceModels;
   final List<Tag> projectTags;
 
-  const TagChipDisplay(BuildContext context,
+  Map<ProductModel, int> get _groupedTags {
-      {Key? key,
+    final spaceTags = spaceModel?.tags ?? <Tag>[];
-      required this.screenWidth,
+
-      required this.spaceModel,
+    final subspaces = spaceModel?.subspaceModels ?? [];
-      required this.products,
+    final subspaceTags = subspaces.expand((e) => e.tags ?? <Tag>[]).toList();
-      required this.subspaces,
+
-      required this.allTags,
+    return TagHelper.groupTags([...spaceTags, ...subspaceTags]);
-      required this.spaceNameController,
+  }
-      this.pageContext,
-      this.otherSpaceModels,
-      this.allSpaceModels,
-      required this.projectTags})
-      : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return (spaceModel?.tags?.isNotEmpty == true ||
+    final hasTags = spaceModel?.tags?.isNotEmpty ?? false;
-            spaceModel?.subspaceModels?.any((subspace) => subspace.tags?.isNotEmpty == true) ==
+    final hasSubspaceTags =
-                true)
+        spaceModel?.subspaceModels?.any((e) => e.tags?.isNotEmpty ?? false) ?? false;
-        ? SizedBox(
+
-            width: screenWidth * 0.25,
+    if (hasTags || hasSubspaceTags) {
-            child: Container(
+      return Container(
-              padding: const EdgeInsets.all(8.0),
+        width: context.screenWidth * 0.25,
+        padding: const EdgeInsets.all(8),
         decoration: BoxDecoration(
           color: ColorsManager.textFieldGreyColor,
           borderRadius: BorderRadius.circular(15),
           border: Border.all(
             color: ColorsManager.textFieldGreyColor,
-                  width: 3.0, // Border width
+            width: 3,
           ),
         ),
         child: Wrap(
-                spacing: 8.0,
+          spacing: 8,
-                runSpacing: 8.0,
+          runSpacing: 8,
           children: [
-                  // Combine tags from spaceModel and subspaces
+            ..._groupedTags.entries.map((entry) => _buildChip(context, entry)),
-                  ...TagHelper.groupTags([
+            _buildEditChip(context),
-                    ...?spaceModel?.tags,
+          ],
-                    ...?spaceModel?.subspaceModels?.expand((subspace) => subspace.tags ?? [])
-                  ]).entries.map(
-                        (entry) => Chip(
-                          avatar: SizedBox(
-                            width: 24,
-                            height: 24,
-                            child: SvgPicture.asset(
-                              entry.key.icon ?? 'assets/icons/gateway.svg',
-                              fit: BoxFit.contain,
         ),
-                          ),
+      );
-                          label: Text(
+    }
-                            'x${entry.value}', // Show count
-                            style: Theme.of(context)
-                                .textTheme
-                                .bodySmall!
-                                .copyWith(color: ColorsManager.spaceColor),
-                          ),
-                          backgroundColor: ColorsManager.whiteColors,
-                          shape: RoundedRectangleBorder(
-                            borderRadius: BorderRadius.circular(16),
-                            side: const BorderSide(
-                              color: ColorsManager.spaceColor,
-                            ),
-                          ),
-                        ),
-                      ),
-                  EditChip(onTap: () async {
-                    // Use the Navigator's context for showDialog
-                    Navigator.of(context).pop();
 
-                    await showDialog<bool>(
+    return _buildAddDevicesButton(context);
-                        barrierDismissible: false,
+  }
+
+  Widget _buildEditChip(BuildContext context) {
+    return EditChip(
+      onTap: () => showDialog<void>(
         context: context,
         builder: (context) => AssignTagModelsDialog(
           products: products,
@@ -104,38 +91,64 @@ class TagChipDisplay extends StatelessWidget {
           spaceModel: spaceModel,
           otherSpaceModels: otherSpaceModels,
           initialTags: TagHelper.generateInitialTags(
-                                  subspaces: subspaces, spaceTagModels: spaceModel?.tags ?? []),
+            subspaces: subspaces,
+            spaceTagModels: spaceModel?.tags ?? [],
+          ),
           title: 'Edit Device',
           addedProducts: TagHelper.createInitialSelectedProducts(
-                                  spaceModel?.tags ?? [], subspaces),
+            spaceModel?.tags ?? [],
+            subspaces,
+          ),
           spaceName: spaceModel?.modelName ?? '',
           projectTags: projectTags,
-                            ));
-                  })
-                ],
         ),
       ),
-          )
+    );
-        : TextButton(
+  }
-            onPressed: () async {
-              Navigator.of(context).pop();
 
-              await showDialog<bool>(
+  Widget _buildChip(
-                barrierDismissible: false,
+    BuildContext context,
+    MapEntry<ProductModel, int> entry,
+  ) {
+    return Chip(
+      backgroundColor: ColorsManager.whiteColors,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(16),
+        side: const BorderSide(
+          color: ColorsManager.spaceColor,
+        ),
+      ),
+      avatar: SvgPicture.asset(
+        entry.key.icon ?? Assets.gateway,
+        fit: BoxFit.contain,
+        height: 24,
+        width: 24,
+      ),
+      label: Text(
+        '${entry.value}',
+        style: context.textTheme.bodySmall!.copyWith(
+          color: ColorsManager.spaceColor,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAddDevicesButton(BuildContext context) {
+    return TextButton(
+      onPressed: () => showDialog<void>(
         context: context,
         builder: (context) => AddDeviceTypeModelWidget(
           products: products,
           subspaces: subspaces,
           allTags: allTags,
-                  spaceName: spaceNameController.text,
+          spaceName: spaceName,
           pageContext: pageContext,
           isCreate: true,
           spaceModel: spaceModel,
           otherSpaceModels: otherSpaceModels,
           projectTags: projectTags,
         ),
-              );
+      ),
-            },
       style: TextButton.styleFrom(
         padding: EdgeInsets.zero,
       ),