feat: resize the left-hand sidebar

frontend/app_flowy/lib/workspace/application/home/home_bloc.dart

@@ -16,42 +16,48 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
   HomeBloc(UserProfilePB user, CurrentWorkspaceSettingPB workspaceSetting)
       : _listener = UserWorkspaceListener(userProfile: user),
         super(HomeState.initial(workspaceSetting)) {
-    on<HomeEvent>((event, emit) async {
-      await event.map(
-        initial: (_Initial value) {
-          _listener.start(
-            onAuthChanged: (result) => _authDidChanged(result),
-            onSettingUpdated: (result) {
-              result.fold(
-                (setting) => add(HomeEvent.didReceiveWorkspaceSetting(setting)),
-                (r) => Log.error(r),
-              );
-            },
-          );
-        },
-        showLoading: (e) async {
-          emit(state.copyWith(isLoading: e.isLoading));
-        },
-        setEditPannel: (e) async {
-          emit(state.copyWith(pannelContext: some(e.editContext)));
-        },
-        dismissEditPannel: (value) async {
-          emit(state.copyWith(pannelContext: none()));
-        },
-        forceCollapse: (e) async {
-          emit(state.copyWith(forceCollapse: e.forceCollapse));
-        },
-        didReceiveWorkspaceSetting: (_DidReceiveWorkspaceSetting value) {
-          emit(state.copyWith(workspaceSetting: value.setting));
-        },
-        unauthorized: (_Unauthorized value) {
-          emit(state.copyWith(unauthorized: true));
-        },
-        collapseMenu: (e) {
-          emit(state.copyWith(isMenuCollapsed: !state.isMenuCollapsed));
-        },
-      );
-    });
+    on<HomeEvent>(
+      (event, emit) async {
+        await event.map(
+          initial: (_Initial value) {
+            _listener.start(
+              onAuthChanged: (result) => _authDidChanged(result),
+              onSettingUpdated: (result) {
+                result.fold(
+                  (setting) => add(HomeEvent.didReceiveWorkspaceSetting(setting)),
+                  (r) => Log.error(r),
+                );
+              },
+            );
+          },
+          showLoading: (e) async {
+            emit(state.copyWith(isLoading: e.isLoading));
+          },
+          setEditPannel: (e) async {
+            emit(state.copyWith(pannelContext: some(e.editContext)));
+          },
+          dismissEditPannel: (value) async {
+            emit(state.copyWith(pannelContext: none()));
+          },
+          forceCollapse: (e) async {
+            emit(state.copyWith(forceCollapse: e.forceCollapse));
+          },
+          didReceiveWorkspaceSetting: (_DidReceiveWorkspaceSetting value) {
+            emit(state.copyWith(workspaceSetting: value.setting));
+          },
+          unauthorized: (_Unauthorized value) {
+            emit(state.copyWith(unauthorized: true));
+          },
+          collapseMenu: (e) {
+            emit(state.copyWith(isMenuCollapsed: !state.isMenuCollapsed));
+          },
+          editPannelResized: (e) {
+            final newOffset = (state.resizeOffset + e.offset).clamp(-50, 200).toDouble();
+            emit(state.copyWith(resizeOffset: newOffset));
+          },
+        );
+      },
+    );
   }
 
   @override
@@ -79,6 +85,7 @@ class HomeEvent with _$HomeEvent {
   const factory HomeEvent.didReceiveWorkspaceSetting(CurrentWorkspaceSettingPB setting) = _DidReceiveWorkspaceSetting;
   const factory HomeEvent.unauthorized(String msg) = _Unauthorized;
   const factory HomeEvent.collapseMenu() = _CollapseMenu;
+  const factory HomeEvent.editPannelResized(double offset) = _EditPannelResized;
 }
 
 @freezed
@@ -90,6 +97,7 @@ class HomeState with _$HomeState {
     required CurrentWorkspaceSettingPB workspaceSetting,
     required bool unauthorized,
     required bool isMenuCollapsed,
+    required double resizeOffset,
   }) = _HomeState;
 
   factory HomeState.initial(CurrentWorkspaceSettingPB workspaceSetting) => HomeState(
@@ -99,5 +107,6 @@ class HomeState with _$HomeState {
         workspaceSetting: workspaceSetting,
         unauthorized: false,
         isMenuCollapsed: false,
+        resizeOffset: 0,
       );
 }

frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart

@@ -27,6 +27,8 @@ class HomeLayout {
       menuWidth = Sizes.sideBarLg;
     }
 
+    menuWidth += homeBlocState.resizeOffset;
+
     if (forceCollapse) {
       showMenu = false;
     } else {

frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart

@@ -7,6 +7,7 @@ import 'package:flowy_sdk/log.dart';
 import 'package:flowy_infra_ui/style_widget/container.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart' show UserProfilePB;
 import 'package:flowy_sdk/protobuf/flowy-folder/protobuf.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:styled_widget/styled_widget.dart';
@@ -87,6 +88,7 @@ class _HomeScreenState extends State<HomeScreen> {
           context: context,
           state: state,
         );
+        final homeMenuResizer = _buildHomeMenuResizer(context: context);
         final editPannel = _buildEditPannel(
           homeState: state,
           layout: layout,
@@ -99,6 +101,7 @@ class _HomeScreenState extends State<HomeScreen> {
           homeMenu: menu,
           editPannel: editPannel,
           bubble: bubble,
+          homeMenuResizer: homeMenuResizer,
         );
       },
     );
@@ -147,12 +150,31 @@ class _HomeScreenState extends State<HomeScreen> {
     );
   }
 
+  Widget _buildHomeMenuResizer({
+    required BuildContext context,
+  }) {
+    return MouseRegion(
+      cursor: SystemMouseCursors.resizeLeftRight,
+      child: GestureDetector(
+          dragStartBehavior: DragStartBehavior.down,
+          onPanUpdate: ((details) {
+            context.read<HomeBloc>().add(HomeEvent.editPannelResized(details.delta.dx));
+          }),
+          behavior: HitTestBehavior.translucent,
+          child: SizedBox(
+            width: 10,
+            height: MediaQuery.of(context).size.height,
+          )),
+    );
+  }
+
   Widget _layoutWidgets({
     required HomeLayout layout,
     required Widget homeMenu,
     required Widget homeStack,
     required Widget editPannel,
     required Widget bubble,
+    required Widget homeMenuResizer,
   }) {
     return Stack(
       children: [
@@ -167,6 +189,7 @@ class _HomeScreenState extends State<HomeScreen> {
             .constrained(minWidth: 500)
             .positioned(left: layout.homePageLOffset, right: layout.homePageROffset, bottom: 0, top: 0, animate: true)
             .animate(layout.animDuration, Curves.easeOut),
+        homeMenuResizer.positioned(left: layout.homePageLOffset - 5),
         bubble
             .positioned(
               right: 20,