Pin Details Page : Added Pin Content Views and Delete old pin page class

app/integration_test/tests/pins.dart

@@ -3,7 +3,7 @@ import 'package:acter/common/widgets/html_editor.dart';
 import 'package:acter/common/widgets/spaces/select_space_form_field.dart';
 import 'package:acter/features/home/data/keys.dart';
 import 'package:acter/features/pins/pages/create_pin_page.dart';
-import 'package:acter/features/pins/pages/pin_page.dart';
+import 'package:acter/features/pins/pages/pin_details_page.dart';
 import 'package:acter/features/pins/widgets/pin_item.dart';
 import 'package:acter/features/search/model/keys.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
@@ -74,15 +74,15 @@ extension ActerNews on ConvenientTest {
   }
 
   Future<String> editPin(String title, String content, String url) async {
-    await find.byKey(PinPage.actionMenuKey).should(findsOneWidget);
-    final actionMenuKey = find.byKey(PinPage.actionMenuKey);
+    await find.byKey(PinDetailsPage.actionMenuKey).should(findsOneWidget);
+    final actionMenuKey = find.byKey(PinDetailsPage.actionMenuKey);
     await actionMenuKey.tap();
 
-    await find.byKey(PinPage.editBtnKey).should(findsOneWidget);
-    final editBtnKey = find.byKey(PinPage.editBtnKey);
+    await find.byKey(PinDetailsPage.editBtnKey).should(findsOneWidget);
+    final editBtnKey = find.byKey(PinDetailsPage.editBtnKey);
     await editBtnKey.tap();
 
-    final titleField = find.byKey(PinPage.titleFieldKey);
+    final titleField = find.byKey(PinDetailsPage.titleFieldKey);
     await titleField.should(findsOneWidget);
     await titleField.replaceText(title);
 
@@ -109,9 +109,9 @@ extension ActerNews on ConvenientTest {
     await tester.ensureVisible(saveBtnKey);
     await saveBtnKey.tap();
 
-    final pinPage = find.byKey(PinPage.pinPageKey);
+    final pinPage = find.byKey(PinDetailsPage.pinPageKey);
     await pinPage.should(findsOneWidget);
-    final page = pinPage.evaluate().first.widget as PinPage;
+    final page = pinPage.evaluate().first.widget as PinDetailsPage;
     return page.pinId;
   }
 }

app/lib/common/widgets/space_name_widget.dart

@@ -3,9 +3,14 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 class SpaceNameWidget extends ConsumerWidget {
-  final String? spaceId;
+  final String spaceId;
+  final bool isShowBrackets;
 
-  const SpaceNameWidget({super.key, this.spaceId});
+  const SpaceNameWidget({
+    super.key,
+    required this.spaceId,
+    this.isShowBrackets = true,
+  });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -14,10 +19,12 @@ class SpaceNameWidget extends ConsumerWidget {
 
   Widget _buildSpaceName(BuildContext context, WidgetRef ref) {
     String spaceName =
-        ref.watch(roomDisplayNameProvider(spaceId!)).valueOrNull ?? '';
+        ref.watch(roomDisplayNameProvider(spaceId)).valueOrNull ?? '';
+    if (isShowBrackets) spaceName = '($spaceName)';
     return Text(
-      '($spaceName)',
+      spaceName,
       overflow: TextOverflow.ellipsis,
+      maxLines: 3,
       style: Theme.of(context).textTheme.labelLarge,
     );
   }

app/lib/features/events/pages/event_list_page.dart

@@ -54,7 +54,7 @@ class _EventListPageState extends ConsumerState<EventListPage> {
           Text(L10n.of(context).events),
           if (widget.spaceId != null)
             SpaceNameWidget(
-              spaceId: widget.spaceId,
+              spaceId: widget.spaceId!,
             ),
         ],
       ),

app/lib/features/home/widgets/space_chip.dart

@@ -71,7 +71,7 @@ class SpaceChip extends ConsumerWidget {
       child: useCompatView
           ? Row(
               children: [
-                const Text('In'),
+                Text(L10n.of(context).inKey),
                 ActerInlineTextButton(
                   onPressed: () =>
                       onTapSelectSpace != null ? onTapSelectSpace!() : null,

app/lib/features/pins/pages/pin_details_page.dart

@@ -1,5 +1,11 @@
 import 'package:acter/common/providers/common_providers.dart';
 import 'package:acter/common/providers/room_providers.dart';
+import 'package:acter/common/widgets/edit_html_description_sheet.dart';
+import 'package:acter/common/widgets/render_html.dart';
+import 'package:acter/common/widgets/space_name_widget.dart';
+import 'package:acter/features/attachments/widgets/attachment_section.dart';
+import 'package:acter/features/comments/widgets/comments_section.dart';
+import 'package:acter/features/pins/Utils/pins_utils.dart';
 import 'package:acter/features/pins/actions/edit_pin_actions.dart';
 import 'package:acter/features/pins/actions/reduct_pin_action.dart';
 import 'package:acter/features/pins/actions/report_pin_action.dart';
@@ -48,9 +54,18 @@ class _PinDetailsPageState extends ConsumerState<PinDetailsPage> {
   Widget _buildBodyUI() {
     final pinData = ref.watch(pinProvider(widget.pinId));
     return pinData.when(
-      data: (pin) {
-        return Container();
-      },
+      data: (pin) => SingleChildScrollView(
+        child: Column(
+          children: [
+            const SizedBox(height: 20),
+            _buildPinHeaderUI(pin),
+            const SizedBox(height: 20),
+            AttachmentSectionWidget(manager: pin.attachments()),
+            const SizedBox(height: 20),
+            CommentsSection(manager: pin.comments()),
+          ],
+        ),
+      ),
       loading: () => Skeletonizer(child: Text(L10n.of(context).loadingPin)),
       error: (err, st) => Text(
         L10n.of(context).errorLoadingPin(err),
@@ -141,4 +156,110 @@ class _PinDetailsPageState extends ConsumerState<PinDetailsPage> {
 
     return actions;
   }
+
+  Widget _buildPinHeaderUI(ActerPin pin) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              pinIconUI(),
+              const SizedBox(width: 12),
+              Expanded(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    pinTitleUI(pin),
+                    pinSpaceNameUI(pin),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 18),
+          pinDescriptionUI(pin),
+        ],
+      ),
+    );
+  }
+
+  Widget pinIconUI() {
+    return Container(
+      height: 50,
+      width: 50,
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.secondary,
+        borderRadius: const BorderRadius.all(Radius.circular(100)),
+      ),
+      child: const Icon(Atlas.pin),
+    );
+  }
+
+  Widget pinTitleUI(ActerPin pin) {
+    return Text(
+      pin.title(),
+      style: Theme.of(context).textTheme.titleSmall,
+    );
+  }
+
+  Widget pinSpaceNameUI(ActerPin pin) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          L10n.of(context).inKey,
+          style: Theme.of(context).textTheme.labelLarge,
+        ),
+        Text(
+          ' : ',
+          style: Theme.of(context).textTheme.labelLarge,
+        ),
+        Expanded(
+          child: SpaceNameWidget(
+            spaceId: pin.roomIdStr(),
+            isShowBrackets: false,
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget pinDescriptionUI(ActerPin pin) {
+    final description = pin.content();
+    if (description == null) return const SizedBox.shrink();
+    final formattedBody = description.formattedBody();
+
+    return SelectionArea(
+      child: GestureDetector(
+        onTap: () {
+          showEditHtmlDescriptionBottomSheet(
+            context: context,
+            descriptionHtmlValue: description.formattedBody(),
+            descriptionMarkdownValue: description.body(),
+            onSave: (htmlBodyDescription, plainDescription) async {
+              saveDescription(
+                context,
+                htmlBodyDescription,
+                plainDescription,
+                pin,
+              );
+            },
+          );
+        },
+        child: formattedBody != null
+            ? RenderHtml(
+                text: formattedBody,
+                defaultTextStyle: Theme.of(context).textTheme.labelLarge,
+              )
+            : Text(
+                description.body(),
+                style: Theme.of(context).textTheme.labelLarge,
+              ),
+      ),
+    );
+  }
 }