refactor: workspace icon (#8006)

frontend/appflowy_flutter/integration_test/desktop/cloud/workspace/change_name_and_icon_test.dart

@@ -34,7 +34,7 @@ void main() {
     var workspaceIcon = tester.widget<WorkspaceIcon>(
       find.byType(WorkspaceIcon),
     );
-    expect(workspaceIcon.workspace.icon, '');
+    expect(workspaceIcon.workspaceIcon, '');
 
     await tester.openWorkspaceMenu();
     await tester.changeWorkspaceIcon(icon);
@@ -47,7 +47,7 @@ void main() {
     workspaceIcon = tester.widget<WorkspaceIcon>(
       find.byType(WorkspaceIcon),
     );
-    expect(workspaceIcon.workspace.icon, icon);
+    expect(workspaceIcon.workspaceIcon, icon);
     expect(find.findTextInFlowyText(name), findsOneWidget);
   });
 
@@ -69,7 +69,7 @@ void main() {
     final workspaceIcon = tester.widget<WorkspaceIcon>(
       find.byType(WorkspaceIcon),
     );
-    expect(workspaceIcon.workspace.icon, icon);
+    expect(workspaceIcon.workspaceIcon, icon);
-    expect(workspaceIcon.workspace.name, name);
+    expect(workspaceIcon.workspaceName, name);
   });
 }

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page_header.dart

@@ -123,15 +123,14 @@ class _MobileWorkspace extends StatelessWidget {
           child: Row(
             children: [
               WorkspaceIcon(
-                workspace: currentWorkspace,
+                workspaceIcon: currentWorkspace.icon,
+                workspaceName: currentWorkspace.name,
                 iconSize: 36,
                 fontSize: 18.0,
-                enableEdit: true,
+                isEditable: true,
-                alignment: Alignment.centerLeft,
                 figmaLineHeight: 26.0,
                 emojiSize: 24.0,
                 borderRadius: 12.0,
-                showBorder: false,
                 onSelected: (result) => context.read<UserWorkspaceBloc>().add(
                       UserWorkspaceEvent.updateWorkspaceIcon(
                         currentWorkspace.workspaceId,

frontend/appflowy_flutter/lib/mobile/presentation/home/workspaces/workspace_menu_bottom_sheet.dart

@@ -275,13 +275,14 @@ class _WorkspaceMenuItemIcon extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 4.0),
       child: WorkspaceIcon(
-        enableEdit: false,
+        workspaceName: workspace.name,
+        workspaceIcon: workspace.icon,
+        isEditable: false,
         iconSize: 36,
         emojiSize: 24.0,
         fontSize: 18.0,
         figmaLineHeight: 26.0,
         borderRadius: 12.0,
-        workspace: workspace,
         onSelected: (result) => context.read<UserWorkspaceBloc>().add(
               UserWorkspaceEvent.updateWorkspaceIcon(
                 workspace.workspaceId,

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart

@@ -1,39 +1,37 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_picker_screen.dart';
 import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/tab.dart';
 import 'package:appflowy/util/color_generator/color_generator.dart';
-import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:universal_platform/universal_platform.dart';
 
-import '../../../../../../shared/icon_emoji_picker/tab.dart';
-
 class WorkspaceIcon extends StatefulWidget {
   const WorkspaceIcon({
     super.key,
-    required this.workspace,
+    required this.workspaceIcon,
-    required this.enableEdit,
+    required this.workspaceName,
     required this.iconSize,
+    required this.isEditable,
     required this.fontSize,
     required this.onSelected,
-    this.borderRadius = 4,
+    required this.borderRadius,
-    this.emojiSize,
+    required this.emojiSize,
-    this.alignment,
     required this.figmaLineHeight,
     this.showBorder = true,
   });
 
-  final UserWorkspacePB workspace;
+  final String workspaceIcon;
+  final String workspaceName;
   final double iconSize;
-  final bool enableEdit;
+  final bool isEditable;
   final double fontSize;
   final double? emojiSize;
   final void Function(EmojiIconData) onSelected;
   final double borderRadius;
-  final Alignment? alignment;
   final double figmaLineHeight;
   final bool showBorder;
 
@@ -46,20 +44,22 @@ class _WorkspaceIconState extends State<WorkspaceIcon> {
 
   @override
   Widget build(BuildContext context) {
-    final color = ColorGenerator(widget.workspace.name).randomColor();
+    final (textColor, backgroundColor) =
-    Widget child = widget.workspace.icon.isNotEmpty
+        ColorGenerator(widget.workspaceName).randomColor();
+
+    Widget child = widget.workspaceIcon.isNotEmpty
         ? FlowyText.emoji(
-            widget.workspace.icon,
+            widget.workspaceIcon,
             fontSize: widget.emojiSize,
             figmaLineHeight: widget.figmaLineHeight,
             optimizeEmojiAlign: true,
           )
         : FlowyText.semibold(
-            widget.workspace.name.isEmpty
+            widget.workspaceName.isEmpty
                 ? ''
-                : widget.workspace.name.substring(0, 1),
+                : widget.workspaceName.substring(0, 1),
             fontSize: widget.fontSize,
-            color: color.$1,
+            color: textColor,
           );
 
     child = Container(
@@ -67,18 +67,16 @@ class _WorkspaceIconState extends State<WorkspaceIcon> {
       width: widget.iconSize,
       height: widget.iconSize,
       decoration: BoxDecoration(
-        color: widget.workspace.icon.isNotEmpty ? null : color.$2,
+        color: widget.workspaceIcon.isEmpty ? backgroundColor : null,
         borderRadius: BorderRadius.circular(widget.borderRadius),
         border: widget.showBorder
-            ? Border.all(
+            ? Border.all(color: const Color(0x1A717171))
-                color: const Color(0x1A717171),
-              )
             : null,
       ),
       child: child,
     );
 
-    if (widget.enableEdit) {
+    if (widget.isEditable) {
       child = _buildEditableIcon(child);
     }
 
@@ -98,7 +96,9 @@ class _WorkspaceIconState extends State<WorkspaceIcon> {
           tabs: const [PickerTabType.emoji],
           onSelectedEmoji: (r) {
             widget.onSelected(r.data);
-            if (!r.keepOpen) controller.close();
+            if (!r.keepOpen) {
+              controller.close();
+            }
           },
         ),
         child: MouseRegion(

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_menu.dart

@@ -198,13 +198,14 @@ class _WorkspaceMenuItemState extends State<WorkspaceMenuItem> {
     return FlowyTooltip(
       message: LocaleKeys.document_plugins_cover_changeIcon.tr(),
       child: WorkspaceIcon(
-        workspace: widget.workspace,
+        workspaceName: widget.workspace.name,
+        workspaceIcon: widget.workspace.icon,
         iconSize: 36,
         emojiSize: 24.0,
         fontSize: 18.0,
         figmaLineHeight: 26.0,
         borderRadius: 12.0,
-        enableEdit: true,
+        isEditable: true,
         onSelected: (result) => context.read<UserWorkspaceBloc>().add(
               UserWorkspaceEvent.updateWorkspaceIcon(
                 widget.workspace.workspaceId,

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart

@@ -368,14 +368,15 @@ class _SideBarSwitchWorkspaceButtonChild extends StatelessWidget {
             children: [
               const HSpace(4.0),
               WorkspaceIcon(
-                workspace: currentWorkspace,
+                workspaceIcon: currentWorkspace.icon,
+                workspaceName: currentWorkspace.name,
                 iconSize: 26,
                 fontSize: 16,
                 emojiSize: 20,
-                enableEdit: false,
+                isEditable: false,
+                showBorder: false,
                 borderRadius: 8.0,
                 figmaLineHeight: 18.0,
-                showBorder: false,
                 onSelected: (result) => context.read<UserWorkspaceBloc>().add(
                       UserWorkspaceEvent.updateWorkspaceIcon(
                         currentWorkspace.workspaceId,

frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_workspace_view.dart

@@ -362,24 +362,18 @@ class _WorkspaceIconSetting extends StatelessWidget {
       );
     }
 
-    return SizedBox(
+    return WorkspaceIcon(
-      height: 64,
+      workspaceIcon: workspace!.icon,
-      width: 64,
+      workspaceName: workspace!.name,
-      child: Padding(
+      iconSize: 64.0,
-        padding: const EdgeInsets.all(1),
-        child: WorkspaceIcon(
-          workspace: workspace!,
-          iconSize: 36,
       emojiSize: 24.0,
       fontSize: 24.0,
       figmaLineHeight: 26.0,
       borderRadius: 18.0,
-          enableEdit: true,
+      isEditable: true,
       onSelected: (r) => context
           .read<WorkspaceSettingsBloc>()
           .add(WorkspaceSettingsEvent.updateWorkspaceIcon(r.emoji)),
-        ),
-      ),
     );
   }
 }