feat: collapse space and switch space by shortcuts (#5554)

* chore: improve delete popup style

* feat: support collapsing space and switching space by shortcuts

frontend/appflowy_flutter/lib/workspace/application/sidebar/space/space_bloc.dart

@@ -84,8 +84,10 @@ class SpaceBloc extends Bloc<SpaceEvent, SpaceState> {
             );
 
             if (shouldShowUpgradeDialog) {
+              if (!integrationMode().isTest) {
                 add(const SpaceEvent.migrate());
               }
+            }
 
             if (openFirstPage) {
               if (currentSpace != null) {

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/shared_widget.dart

@@ -214,20 +214,32 @@ class DeleteSpacePopup extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final space = context.read<SpaceBloc>().state.currentSpace;
+    final name = space != null ? space.name : '';
     return Padding(
       padding: const EdgeInsets.symmetric(
-        vertical: 12.0,
+        vertical: 20.0,
         horizontal: 20.0,
       ),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
             children: [
               FlowyText(
-            LocaleKeys.space_deleteConfirmation.tr(),
+                LocaleKeys.space_deleteConfirmation.tr() + name,
                 fontSize: 14.0,
               ),
-          const VSpace(16.0),
+              const Spacer(),
+              FlowyButton(
+                useIntrinsicWidth: true,
+                text: const FlowySvg(FlowySvgs.upgrade_close_s),
+                onTap: () => Navigator.of(context).pop(),
+              ),
+            ],
+          ),
+          const VSpace(8.0),
           FlowyText.regular(
             LocaleKeys.space_deleteConfirmationDescription.tr(),
             fontSize: 12.0,
@@ -245,7 +257,6 @@ class DeleteSpacePopup extends StatelessWidget {
             confirmButtonName: LocaleKeys.space_delete.tr(),
             confirmButtonColor: Theme.of(context).colorScheme.error,
           ),
-          const VSpace(8.0),
         ],
       ),
     );

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space.dart

@@ -111,6 +111,7 @@ class _SpaceState extends State<_Space> {
               onCreateNewSpace: () => _showCreateSpaceDialog(context),
               onCollapseAllPages: () => isExpandedNotifier.value = true,
             ),
+            if (state.isExpanded)
               MouseRegion(
                 onEnter: (_) => isHovered.value = true,
                 onExit: (_) => isHovered.value = false,

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart

@@ -16,6 +16,7 @@ import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -53,15 +54,8 @@ class _SidebarSpaceHeaderState extends State<SidebarSpaceHeader> {
 
   @override
   Widget build(BuildContext context) {
-    return AppFlowyPopover(
+    return ValueListenableBuilder(
-      constraints: const BoxConstraints(maxWidth: 252),
+      valueListenable: isHovered,
-      direction: PopoverDirection.bottomWithLeftAligned,
-      clickHandler: PopoverClickHandler.gestureDetector,
-      offset: const Offset(0, 4),
-      popupBuilder: (_) => BlocProvider.value(
-        value: context.read<SpaceBloc>(),
-        child: const SidebarSpaceMenu(),
-      ),
       child: SizedBox(
         height: HomeSizes.workspaceSectionHeight,
         child: MouseRegion(
@@ -70,13 +64,28 @@ class _SidebarSpaceHeaderState extends State<SidebarSpaceHeader> {
           child: Stack(
             alignment: Alignment.center,
             children: [
-              SizedBox(
+              Positioned(
+                left: 3,
+                top: 3,
+                bottom: 3,
+                child: SizedBox(
                   height: HomeSizes.workspaceSectionHeight,
+                  child: AppFlowyPopover(
+                    constraints: const BoxConstraints(maxWidth: 252),
+                    direction: PopoverDirection.bottomWithLeftAligned,
+                    clickHandler: PopoverClickHandler.gestureDetector,
+                    offset: const Offset(0, 4),
+                    popupBuilder: (_) => BlocProvider.value(
+                      value: context.read<SpaceBloc>(),
+                      child: const SidebarSpaceMenu(),
+                    ),
                     child: FlowyButton(
-                  margin: const EdgeInsets.only(left: 6.0, right: 4.0),
+                      useIntrinsicWidth: true,
+                      margin: const EdgeInsets.only(left: 3.0, right: 4.0),
                       iconPadding: 10.0,
                       text: _buildChild(),
-                  rightIcon: const HSpace(60.0),
+                    ),
+                  ),
                 ),
               ),
               Positioned(
@@ -87,6 +96,22 @@ class _SidebarSpaceHeaderState extends State<SidebarSpaceHeader> {
           ),
         ),
       ),
+      builder: (context, isHovered, child) {
+        final style = HoverStyle(
+          hoverColor: isHovered
+              ? Theme.of(context).colorScheme.secondary
+              : Colors.transparent,
+        );
+        return GestureDetector(
+          onTap: () => context
+              .read<SpaceBloc>()
+              .add(SpaceEvent.expand(widget.space, !widget.isExpanded)),
+          child: FlowyHoverContainer(
+            style: style,
+            child: child!,
+          ),
+        );
+      },
     );
   }
 

frontend/resources/translations/en.json

@@ -1892,7 +1892,7 @@
   },
   "space": {
     "delete": "Delete",
-    "deleteConfirmation": "Delete: {Space Name}",
+    "deleteConfirmation": "Delete: ",
     "deleteConfirmationDescription": "All pages within this Space will be deleted and moved to Trash.",
     "rename": "Rename Space",
     "changeIcon": "Change icon",