Ai tag feature

frontend/appflowy_flutter/lib/plugins/database/application/cell/bloc/tag_cell.bloc.dart

@@ -0,0 +1,111 @@
+import 'dart:async';
+
+import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
+import 'package:appflowy/plugins/database/application/field/field_info.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'tag_cell_bloc.freezed.dart';
+
+class TagCellBloc extends Bloc<TagCellEvent, TagCellState> {
+  TagCellBloc({
+    required this.cellController,
+  }) : super(TagCellState.initial(cellController)) {
+    _dispatch();
+    _startListening();
+  }
+
+  final TagCellController cellController;
+  void Function()? _onCellChangedFn;
+
+  @override
+  Future<void> close() async {
+    if (_onCellChangedFn != null) {
+      cellController.removeListener(
+        onCellChanged: _onCellChangedFn!,
+        onFieldChanged: _onFieldChangedListener,
+      );
+    }
+    await cellController.dispose();
+    return super.close();
+  }
+
+  void _dispatch() {
+    on<TagCellEvent>(
+      (event, emit) async {
+        await event.when(
+          didReceiveCellUpdate: (cellData) {
+            emit(
+              state.copyWith(content: cellData ?? ""),
+            );
+          },
+          didUpdateField: (fieldInfo) {
+            final wrap = fieldInfo.wrapCellContent;
+            if (wrap != null) {
+              emit(state.copyWith(wrap: wrap));
+            }
+          },
+          updateCell: (text) async {
+            if (state.content != text) {
+              emit(state.copyWith(content: text));
+              await cellController.saveCellData(text);
+
+              // If the input content is "abc" that can't parsered as number then the data stored in the backend will be an empty string.
+              // So for every cell data that will be formatted in the backend.
+              // It needs to get the formatted data after saving.
+              add(
+                TagCellEvent.didReceiveCellUpdate(
+                  cellController.getCellData() ?? "",
+                ),
+              );
+            }
+          },
+        );
+      },
+    );
+  }
+
+  void _startListening() {
+    _onCellChangedFn = cellController.addListener(
+      onCellChanged: (cellContent) {
+        if (!isClosed) {
+          add(
+            TagCellEvent.didReceiveCellUpdate(cellContent ?? ""),
+          );
+        }
+      },
+      onFieldChanged: _onFieldChangedListener,
+    );
+  }
+
+  void _onFieldChangedListener(FieldInfo fieldInfo) {
+    if (!isClosed) {
+      add(TagCellEvent.didUpdateField(fieldInfo));
+    }
+  }
+}
+
+@freezed
+class TagCellEvent with _$TagCellEvent {
+  const factory TagCellEvent.didReceiveCellUpdate(String? cellContent) =
+      _DidReceiveCellUpdate;
+  const factory TagCellEvent.didUpdateField(FieldInfo fieldInfo) =
+      _DidUpdateField;
+  const factory TagCellEvent.updateCell(String text) = _UpdateCell;
+}
+
+@freezed
+class TagCellState with _$TagCellState {
+  const factory TagCellState({
+    required String content,
+    required bool wrap,
+  }) = _TagCellState;
+
+  factory TagCellState.initial(TagCellController cellController) {
+    final wrap = cellController.fieldInfo.wrapCellContent;
+    return TagCellState(
+      content: cellController.getCellData() ?? "",
+      wrap: wrap ?? true,
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/database/application/cell/cell_controller_builder.dart

@@ -18,6 +18,7 @@ typedef RelationCellController = CellController<RelationCellDataPB, String>;
 typedef SummaryCellController = CellController<String, String>;
 typedef TimeCellController = CellController<TimeCellDataPB, String>;
 typedef TranslateCellController = CellController<String, String>;
+typedef TagCellController = CellController<String, String>;
 
 CellController makeCellController(
   DatabaseController databaseController,

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/tag_card_cell.dart

@@ -0,0 +1,62 @@
+import 'package:appflowy/plugins/database/application/cell/bloc/tag_cell.bloc.dart';
+import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
+import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
+import 'package:appflowy/plugins/database/application/database_controller.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import 'card_cell.dart';
+
+class TagCardCellStyle extends CardCellStyle {
+  const TagCardCellStyle({
+    required super.padding,
+    required this.textStyle,
+  });
+
+  final TextStyle textStyle;
+}
+
+class TagCardCell extends CardCell<TagCardCellStyle> {
+  const TagCardCell({
+    super.key,
+    required super.style,
+    required this.databaseController,
+    required this.cellContext,
+  });
+
+  final DatabaseController databaseController;
+  final CellContext cellContext;
+
+  @override
+  State<TagCardCell> createState() => _TagCellState();
+}
+
+class _TagCellState extends State<TagCardCell> {
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) {
+        return TagCellBloc(
+          cellController: makeCellController(
+            widget.databaseController,
+            widget.cellContext,
+          ).as(),
+        );
+      },
+      child: BlocBuilder<TagCellBloc, TagCellState>(
+        buildWhen: (previous, current) => previous.content != current.content,
+        builder: (context, state) {
+          if (state.content.isEmpty) {
+            return const SizedBox.shrink();
+          }
+
+          return Container(
+            alignment: AlignmentDirectional.centerStart,
+            padding: widget.style.padding,
+            child: Text(state.content, style: widget.style.textStyle),
+          );
+        },
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_style_maps/mobile_board_card_cell_style.dart

@@ -1,3 +1,5 @@
+import 'package:appflowy/plugins/database/widgets/cell/card_cell_skeleton/tag_card_cell.dart';
+import 'package:appflowy/plugins/database/widgets/cell/card_cell_skeleton/translate_card_cell.dart';
 import 'package:flutter/material.dart';
 
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_skeleton/summary_card_cell.dart';
@@ -89,7 +91,11 @@ CardCellStyleMap mobileBoardCardCellStyleMap(BuildContext context) {
       padding: padding,
       textStyle: textStyle,
     ),
-    FieldType.Translate: SummaryCardCellStyle(
+    FieldType.Translate: TranslateCardCellStyle(
+      padding: padding,
+      textStyle: textStyle,
+    ),
+    FieldType.Tag: TagCardCellStyle(
       padding: padding,
       textStyle: textStyle,
     ),

frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_type_list.dart

@@ -24,6 +24,7 @@ const List<FieldType> _supportedFieldTypes = [
   FieldType.Summary,
   FieldType.Time,
   FieldType.Translate,
+  FieldType.Tag,
 ];
 
 class FieldTypeList extends StatelessWidget with FlowyOverlayDelegate {

frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/builder.dart

@@ -1,7 +1,6 @@
 import 'dart:typed_data';
 
 import 'package:flutter/material.dart';
-
 import 'package:appflowy/plugins/database/widgets/field/type_option_editor/translate.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
@@ -18,6 +17,7 @@ import 'summary.dart';
 import 'time.dart';
 import 'timestamp.dart';
 import 'url.dart';
+import 'tag.dart';
 
 typedef TypeOptionDataCallback = void Function(Uint8List typeOptionData);
 
@@ -38,6 +38,7 @@ abstract class TypeOptionEditorFactory {
       FieldType.Summary => const SummaryTypeOptionEditorFactory(),
       FieldType.Time => const TimeTypeOptionEditorFactory(),
       FieldType.Translate => const TranslateTypeOptionEditorFactory(),
+      FieldType.Tag => const TagTypeOptionEditorFactory(),
       _ => throw UnimplementedError(),
     };
   }

frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/tag.dart

@@ -0,0 +1,19 @@
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:flutter/material.dart';
+
+import 'builder.dart';
+
+class TagTypeOptionEditorFactory implements TypeOptionEditorFactory {
+  const TagTypeOptionEditorFactory();
+
+  @override
+  Widget? build({
+    required BuildContext context,
+    required String viewId,
+    required FieldPB field,
+    required PopoverMutex popoverMutex,
+    required TypeOptionDataCallback onTypeOptionUpdated,
+  }) =>
+      null;
+}

frontend/appflowy_flutter/lib/util/field_type_extension.dart

@@ -24,6 +24,7 @@ extension FieldTypeExtension on FieldType {
         FieldType.Summary => LocaleKeys.grid_field_summaryFieldName.tr(),
         FieldType.Time => LocaleKeys.grid_field_timeFieldName.tr(),
         FieldType.Translate => LocaleKeys.grid_field_translateFieldName.tr(),
+        FieldType.Tag => LocaleKeys.grid_field_tagFieldName.tr(),
         _ => throw UnimplementedError(),
       };
 
@@ -42,12 +43,14 @@ extension FieldTypeExtension on FieldType {
         FieldType.Summary => FlowySvgs.ai_summary_s,
         FieldType.Time => FlowySvgs.timer_start_s,
         FieldType.Translate => FlowySvgs.ai_translate_s,
+        FieldType.Tag => FlowySvgs.ai_tag_s,
         _ => throw UnimplementedError(),
       };
 
   FlowySvgData? get rightIcon => switch (this) {
         FieldType.Summary => FlowySvgs.ai_indicator_s,
         FieldType.Translate => FlowySvgs.ai_indicator_s,
+        FieldType.Tag => FlowySvgs.ai_indicator_s,
         _ => null,
       };
 
@@ -66,6 +69,7 @@ extension FieldTypeExtension on FieldType {
         FieldType.Summary => const Color(0xFFBECCFF),
         FieldType.Time => const Color(0xFFFDEDA7),
         FieldType.Translate => const Color(0xFFBECCFF),
+        FieldType.Tag => const Color(0xFFBECCFF),
         _ => throw UnimplementedError(),
       };
 
@@ -85,6 +89,7 @@ extension FieldTypeExtension on FieldType {
         FieldType.Summary => const Color(0xFF6859A7),
         FieldType.Time => const Color(0xFFFDEDA7),
         FieldType.Translate => const Color(0xFF6859A7),
+        FieldType.Tag => const Color(0xFF6859A7),
         _ => throw UnimplementedError(),
       };
 }