fix: complete the missing icons in the database (#7464)

* fix: complete the missing icons in the database

* fix: the toggle is slower than the actual change taken into effect

frontend/appflowy_flutter/lib/plugins/database/board/presentation/toolbar/board_setting_bar.dart

@@ -2,10 +2,13 @@ import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/grid/application/filter/filter_editor_bloc.dart';
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/toolbar/filter_button.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/toolbar/view_database_button.dart';
 import 'package:appflowy/plugins/database/widgets/setting/setting_button.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:provider/provider.dart';
 
 class BoardSettingBar extends StatelessWidget {
   const BoardSettingBar({
@@ -30,6 +33,8 @@ class BoardSettingBar extends StatelessWidget {
           if (value) {
             return const SizedBox.shrink();
           }
+          final isReference =
+              Provider.of<ReferenceState?>(context)?.isReference ?? false;
           return SizedBox(
             height: 20,
             child: Row(
@@ -38,6 +43,10 @@ class BoardSettingBar extends StatelessWidget {
                 FilterButton(
                   toggleExtension: toggleExtension,
                 ),
+                if (isReference) ...[
+                  const HSpace(2),
+                  ViewDatabaseButton(view: databaseController.view),
+                ],
                 const HSpace(2),
                 SettingButton(
                   databaseController: databaseController,

frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/toolbar/calendar_setting_bar.dart

@@ -2,10 +2,13 @@ import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/grid/application/filter/filter_editor_bloc.dart';
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/toolbar/filter_button.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/toolbar/view_database_button.dart';
 import 'package:appflowy/plugins/database/widgets/setting/setting_button.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:provider/provider.dart';
 
 class CalendarSettingBar extends StatelessWidget {
   const CalendarSettingBar({
@@ -30,6 +33,8 @@ class CalendarSettingBar extends StatelessWidget {
           if (value) {
             return const SizedBox.shrink();
           }
+          final isReference =
+              Provider.of<ReferenceState?>(context)?.isReference ?? false;
           return SizedBox(
             height: 20,
             child: Row(
@@ -38,6 +43,10 @@ class CalendarSettingBar extends StatelessWidget {
                 FilterButton(
                   toggleExtension: toggleExtension,
                 ),
+                if (isReference) ...[
+                  const HSpace(2),
+                  ViewDatabaseButton(view: databaseController.view),
+                ],
                 const HSpace(2),
                 SettingButton(
                   databaseController: databaseController,

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/toolbar/grid_setting_bar.dart

@@ -54,12 +54,14 @@ class GridSettingBar extends StatelessWidget {
               mainAxisAlignment: MainAxisAlignment.end,
               children: [
                 FilterButton(toggleExtension: toggleExtension),
-                const HSpace(6),
+                const HSpace(2),
                 SortButton(toggleExtension: toggleExtension),
-                const HSpace(6),
+                if (isReference) ...[
+                  const HSpace(2),
+                  ViewDatabaseButton(view: controller.view),
+                ],
+                const HSpace(2),
                 SettingButton(databaseController: controller),
-                if (isReference) const HSpace(6),
-                if (isReference) ViewDatabaseButton(view: controller.view),
               ],
             ),
           );

frontend/appflowy_flutter/lib/plugins/database/widgets/setting/database_layout_selector.dart

@@ -81,6 +81,7 @@ class DatabaseLayoutSelector extends StatelessWidget {
                         builder: (context, compactMode, child) {
                           return Toggle(
                             value: compactMode,
+                            duration: Duration.zero,
                             onChanged: (value) =>
                                 databaseController.setCompactMode(value),
                             padding: EdgeInsets.zero,

frontend/appflowy_flutter/lib/workspace/presentation/widgets/toggle/toggle.dart

@@ -1,6 +1,5 @@
-import 'package:flutter/material.dart';
-
 import 'package:flowy_infra/theme_extension.dart';
+import 'package:flutter/material.dart';
 
 class ToggleStyle {
   const ToggleStyle({
@@ -38,6 +37,7 @@ class Toggle extends StatelessWidget {
     this.thumbColor,
     this.activeBackgroundColor,
     this.inactiveBackgroundColor,
+    this.duration = const Duration(milliseconds: 150),
     this.padding = const EdgeInsets.all(8.0),
   });
 
@@ -48,6 +48,7 @@ class Toggle extends StatelessWidget {
   final Color? activeBackgroundColor;
   final Color? inactiveBackgroundColor;
   final EdgeInsets padding;
+  final Duration duration;
 
   @override
   Widget build(BuildContext context) {
@@ -70,7 +71,7 @@ class Toggle extends StatelessWidget {
               ),
             ),
             AnimatedPositioned(
-              duration: const Duration(milliseconds: 150),
+              duration: duration,
               top: (style.height - style.thumbRadius) / 2,
               left: value ? style.width - style.thumbRadius - 1 : 1,
               child: Container(