chore: config checklist cell

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_cell_editor.dart

@@ -2,6 +2,11 @@ import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_servic
 import 'package:app_flowy/plugins/grid/application/cell/checklist_cell_editor_bloc.dart';
 import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_prograss_bar.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart';
+import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
@@ -41,6 +46,8 @@ class _GridChecklistCellEditorState extends State<GridChecklistCellEditor> {
         builder: (context, state) {
           final List<Widget> slivers = [
             const SliverChecklistPrograssBar(),
+            SliverToBoxAdapter(
+                child: Container(color: Colors.red, height: 2, width: 2100)),
             SliverToBoxAdapter(
               child: ListView.separated(
                 controller: ScrollController(),
@@ -55,11 +62,14 @@ class _GridChecklistCellEditorState extends State<GridChecklistCellEditor> {
               ),
             ),
           ];
-          return CustomScrollView(
+          return Padding(
-            shrinkWrap: true,
+            padding: const EdgeInsets.symmetric(horizontal: 8),
-            slivers: slivers,
+            child: CustomScrollView(
-            controller: ScrollController(),
+              shrinkWrap: true,
-            physics: StyledScrollPhysics(),
+              slivers: slivers,
+              controller: ScrollController(),
+              physics: StyledScrollPhysics(),
+            ),
           );
         },
       ),
@@ -67,15 +77,77 @@ class _GridChecklistCellEditorState extends State<GridChecklistCellEditor> {
   }
 }
 
-class _ChecklistOptionCell extends StatelessWidget {
+class _ChecklistOptionCell extends StatefulWidget {
   final ChecklistSelectOption option;
   const _ChecklistOptionCell({
     required this.option,
     Key? key,
   }) : super(key: key);
 
+  @override
+  State<_ChecklistOptionCell> createState() => _ChecklistOptionCellState();
+}
+
+class _ChecklistOptionCellState extends State<_ChecklistOptionCell> {
+  late PopoverController _popoverController;
+
+  @override
+  void initState() {
+    _popoverController = PopoverController();
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Container(height: 20, width: 100, color: Colors.red);
+    final icon = widget.option.isSelected
+        ? svgWidget('editor/editor_check')
+        : svgWidget('editor/editor_uncheck');
+    return _wrapPopover(
+      SizedBox(
+        height: GridSize.typeOptionItemHeight,
+        child: Row(
+          children: [
+            icon,
+            const HSpace(6),
+            FlowyText(widget.option.data.name),
+            const Spacer(),
+            _disclosureButton(),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _disclosureButton() {
+    return FlowyIconButton(
+      width: 20,
+      onPressed: () => _popoverController.show(),
+      hoverColor: Colors.transparent,
+      iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
+      icon: svgWidget(
+        "editor/details",
+        color: Theme.of(context).colorScheme.onSurface,
+      ),
+    );
+  }
+
+  Widget _wrapPopover(Widget child) {
+    return AppFlowyPopover(
+      controller: _popoverController,
+      offset: const Offset(20, 0),
+      asBarrier: true,
+      constraints: BoxConstraints.loose(const Size(200, 300)),
+      child: child,
+      popupBuilder: (BuildContext popoverContext) {
+        return SelectOptionTypeOptionEditor(
+          option: widget.option.data,
+          onDeleted: () {},
+          onUpdated: (updatedOption) {},
+          key: ValueKey(
+            widget.option.data.id,
+          ), // Use ValueKey to refresh the UI, otherwise, it will remain the old value.
+        );
+      },
+    );
   }
 }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_prograss_bar.dart

@@ -17,6 +17,7 @@ class ChecklistPrograssBar extends StatelessWidget {
     return LinearPercentIndicator(
       lineHeight: 10.0,
       percent: percent,
+      padding: EdgeInsets.zero,
       progressColor: Theme.of(context).colorScheme.primary,
       backgroundColor: AFThemeExtension.of(context).tint9,
       barRadius: const Radius.circular(5),
@@ -54,21 +55,18 @@ class _SliverChecklistPrograssBarDelegate
                 padding: const EdgeInsets.symmetric(vertical: 8.0),
                 child: ChecklistPrograssBar(percent: state.percent),
               ),
-            Padding(
+            FlowyTextField(
-              padding: const EdgeInsets.all(8.0),
+              hintText: LocaleKeys.grid_checklist_panelTitle.tr(),
-              child: FlowyTextField(
+              onChanged: (text) {
-                hintText: LocaleKeys.grid_checklist_panelTitle.tr(),
+                context
-                onChanged: (text) {
+                    .read<ChecklistCellEditorBloc>()
-                  context
+                    .add(ChecklistCellEditorEvent.filterOption(text));
-                      .read<ChecklistCellEditorBloc>()
+              },
-                      .add(ChecklistCellEditorEvent.filterOption(text));
+              onSubmitted: (text) {
-                },
+                context
-                onSubmitted: (text) {
+                    .read<ChecklistCellEditorBloc>()
-                  context
+                    .add(ChecklistCellEditorEvent.newOption(text));
-                      .read<ChecklistCellEditorBloc>()
+              },
-                      .add(ChecklistCellEditorEvent.newOption(text));
-                },
-              ),
             )
           ],
         );