Pin List Item UI-UX Improvements

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

@@ -12,6 +12,7 @@ import 'package:acter/features/pins/actions/reduct_pin_action.dart';
 import 'package:acter/features/pins/actions/report_pin_action.dart';
 import 'package:acter/features/pins/providers/pins_provider.dart';
 import 'package:acter/features/pins/widgets/fake_link_attachment_item.dart';
+import 'package:acter/features/pins/widgets/pin_icon.dart';
 import 'package:acter_flutter_sdk/acter_flutter_sdk_ffi.dart';
 import 'package:atlas_icons/atlas_icons.dart';
 import 'package:flutter/material.dart';
@@ -184,7 +185,7 @@ class _PinDetailsPageState extends ConsumerState<PinDetailsPage> {
         children: [
           Row(
             children: [
-              pinIconUI(),
+              const PinIcon(),
               const SizedBox(width: 12),
               Expanded(
                 child: Column(
@@ -204,18 +205,6 @@ class _PinDetailsPageState extends ConsumerState<PinDetailsPage> {
     );
   }
 
-  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 SelectionArea(
       child: GestureDetector(

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

@@ -8,7 +8,7 @@ import 'package:acter/common/widgets/add_button_with_can_permission.dart';
 import 'package:acter/common/widgets/empty_state_widget.dart';
 import 'package:acter/common/widgets/space_name_widget.dart';
 import 'package:acter/features/pins/providers/pins_provider.dart';
-import 'package:acter/features/pins/widgets/pin_list_item.dart';
+import 'package:acter/features/pins/widgets/pin_list_item_widget.dart';
 import 'package:acter/features/pins/widgets/pin_list_skeleton.dart';
 import 'package:acter_flutter_sdk/acter_flutter_sdk_ffi.dart';
 import 'package:flutter/material.dart';
@@ -115,7 +115,7 @@ class _AllPinsPageConsumerState extends ConsumerState<PinsListPage> {
         crossAxisCount: max(1, min(widthCount, minCount)),
         children: [
           for (var pin in pins)
-            PinListItemById(
+            PinListItemWidget(
               pinId: pin.eventIdStr(),
               showSpace: widget.spaceId == null,
             ),

app/lib/features/pins/widgets/pin_icon.dart

@@ -0,0 +1,28 @@
+import 'package:atlas_icons/atlas_icons.dart';
+import 'package:flutter/material.dart';
+
+class PinIcon extends StatelessWidget {
+  final Color? iconColor;
+
+  const PinIcon({
+    super.key,
+    this.iconColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return pinIconUI(context);
+  }
+
+  Widget pinIconUI(BuildContext context) {
+    return Container(
+      height: 50,
+      width: 50,
+      decoration: BoxDecoration(
+        color: iconColor ?? Theme.of(context).unselectedWidgetColor,
+        borderRadius: const BorderRadius.all(Radius.circular(100)),
+      ),
+      child: const Icon(Atlas.pin),
+    );
+  }
+}

app/lib/features/pins/widgets/pin_list_item_widget.dart

@@ -0,0 +1,55 @@
+import 'package:acter/common/utils/routes.dart';
+import 'package:acter/common/widgets/space_name_widget.dart';
+import 'package:acter/features/pins/providers/pins_provider.dart';
+import 'package:acter/features/pins/widgets/pin_icon.dart';
+import 'package:acter_flutter_sdk/acter_flutter_sdk_ffi.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:logging/logging.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:skeletonizer/skeletonizer.dart';
+
+final _log = Logger('a3::pins::pin_item');
+
+class PinListItemWidget extends ConsumerWidget {
+  final String pinId;
+  final bool showSpace;
+
+  const PinListItemWidget({
+    required this.pinId,
+    this.showSpace = false,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final pinData = ref.watch(pinProvider(pinId));
+    return pinData.when(
+      data: (pin) => buildPinItemUI(context, pin),
+      error: (e, s) {
+        _log.severe('Failed to load pin', e, s);
+        return Text(L10n.of(context).errorLoadingPin(e));
+      },
+      loading: () => const Skeletonizer(
+        child: SizedBox(height: 100, width: 100),
+      ),
+    );
+  }
+
+  Widget buildPinItemUI(BuildContext context, ActerPin pin) {
+    return Card(
+      child: ListTile(
+        onTap: () => context.pushNamed(
+          Routes.pin.name,
+          pathParameters: {'pinId': pinId},
+        ),
+        leading: const PinIcon(),
+        title: Text(pin.title(), overflow: TextOverflow.ellipsis),
+        subtitle: showSpace
+            ? SpaceNameWidget(spaceId: pin.roomIdStr(), isShowBrackets: false)
+            : null,
+      ),
+    );
+  }
+}

app/lib/features/space/widgets/space_sections/pins_section.dart

@@ -1,6 +1,6 @@
 import 'package:acter/common/utils/routes.dart';
 import 'package:acter/features/pins/providers/pins_provider.dart';
-import 'package:acter/features/pins/widgets/pin_list_item.dart';
+import 'package:acter/features/pins/widgets/pin_list_item_widget.dart';
 import 'package:acter/features/space/widgets/space_sections/section_header.dart';
 import 'package:acter_flutter_sdk/acter_flutter_sdk_ffi.dart';
 import 'package:flutter/material.dart';
@@ -65,7 +65,7 @@ class PinsSection extends ConsumerWidget {
       padding: EdgeInsets.zero,
       physics: const NeverScrollableScrollPhysics(),
       itemBuilder: (context, index) {
-        return PinListItemById(pinId: pins[index].eventIdStr());
+        return PinListItemWidget(pinId: pins[index].eventIdStr());
       },
     );
   }

app/lib/l10n/app_en.arb

@@ -2119,5 +2119,5 @@
   "pinDetails": "Pin Details",
   "inSpaceLabelInline": "In",
   "comingSoon": "Not supported yet, coming soon!",
-  "colonCharacter": ":"
+  "colonCharacter": " : "
 }