add time line wrapper

Signed-off-by: Peter Siegmund <developer@mars3142.org>

apps/lib/features/home/home_screen.dart

@@ -1,31 +1,55 @@
 import 'package:toaster_ui/toaster_ui.dart';
 
+const _toasts = [
+  (
+    icon: Icons.chat_bubble_outline,
+    title: 'Messages',
+    timestamp: '10:42 AM',
+    content: 'New message received from +1 (555) 019-2834',
+    tags: ['res/values/strings.xml', 'en-US'],
+  ),
+  (
+    icon: Icons.notifications_outlined,
+    title: 'Push Notification',
+    timestamp: '10:45 AM',
+    content: 'Your order has been shipped!',
+    tags: ['res/values/strings.xml', 'en-US'],
+  ),
+  (
+    icon: Icons.email_outlined,
+    title: 'Email',
+    timestamp: '11:03 AM',
+    content: 'You have a new message in your inbox.',
+    tags: ['res/values/strings.xml', 'en-US'],
+  ),
+];
+
 class HomeScreen extends StatelessWidget {
   const HomeScreen({super.key});
 
   @override
   Widget build(BuildContext context) {
+    final spacing = context.appSpacing;
+
     return Scaffold(
-      body: Center(
-        child: Column(
-          mainAxisAlignment: .center,
-          children: [
-            Padding(
-              padding: EdgeInsets.symmetric(horizontal: context.appSpacing.md),
-              child: ToastCard(
-                icon: Icons.chat_bubble_outline,
-                title: 'Messages',
-                timestamp: '10:42 AM',
-                content: 'New message received from +1 (555) 019-2834',
-                tags: ['res/values/strings.xml', 'en-US'],
-                onDelete: () {
-                  /* ... */
-                },
-              ),
+      body: ListView.builder(
+        padding: EdgeInsets.all(spacing.md),
+        itemCount: _toasts.length,
+        itemBuilder: (context, index) {
+          final toast = _toasts[index];
+          return TimelineToastCard(
+            isFirst: index == 0,
+            isLast: index == _toasts.length - 1,
+            card: ToastCard(
+              icon: toast.icon,
+              title: toast.title,
+              timestamp: toast.timestamp,
+              content: toast.content,
+              tags: [...toast.tags],
             ),
-          ],
-        ),
+          );
+        },
       ),
     );
   }
-}
+}