chore: Implement tabbed inline view to enable testing inline bug (#283)

Author: mahmoud-elmorabea

apps/amiapp_flutter/lib/src/screens/inline_messages.dart

@@ -5,47 +5,158 @@ import 'package:flutter/material.dart';
 
 import '../components/container.dart';
 
-class InlineMessagesScreen extends StatelessWidget {
+class InlineMessagesScreen extends StatefulWidget {
   const InlineMessagesScreen({super.key});
 
+  @override
+  State<InlineMessagesScreen> createState() => _InlineMessagesScreenState();
+}
+
+class _InlineMessagesScreenState extends State<InlineMessagesScreen>
+    with SingleTickerProviderStateMixin {
+  late TabController _tabController;
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: 2, vsync: this);
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return AppContainer(
       appBar: AppBar(
         title: const Text('Inline Message Test'),
+        bottom: TabBar(
+          controller: _tabController,
+          tabs: const [
+            Tab(text: 'Single View'),
+            Tab(text: 'Multiple Views'),
+          ],
+        ),
+      ),
+      body: TabBarView(
+        controller: _tabController,
+        children: [
+          _buildSingleViewTab(),
+          _buildMultipleViewsTab(),
+        ],
       ),
-      body: Column(
+    );
+  }
+
+  Widget _buildSingleViewTab() {
+    return SingleChildScrollView(
+      padding: const EdgeInsets.all(16),
+      child: Column(
         children: [
-          // Sticky Header Inline Message
+          Container(
+            width: double.infinity,
+            padding: const EdgeInsets.all(12),
+            margin: const EdgeInsets.only(bottom: 16),
+            decoration: BoxDecoration(
+              color: Colors.blue[50],
+              borderRadius: BorderRadius.circular(8),
+              border: Border.all(color: Colors.blue[200]!),
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Element IDs in this tab:',
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    color: Colors.blue[800],
+                    fontSize: 14,
+                  ),
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  '• single-inline',
+                  style: TextStyle(
+                    color: Colors.blue[700],
+                    fontSize: 13,
+                    fontFamily: 'monospace',
+                  ),
+                ),
+              ],
+            ),
+          ),
           InlineInAppMessageView(
-            elementId: 'sticky-header',
+            elementId: 'single-inline',
             onActionClick: _showInlineActionClick,
           ),
-          Expanded(
-            child: SingleChildScrollView(
-              padding: const EdgeInsets.all(16),
-              child: Column(
-                children: [
-                  _buildImageAndTextBlock(),
-                  _buildFullWidthCard(),
-                  _buildThreeColumnRow(),
-                  const SizedBox(height: 16),
-                  InlineInAppMessageView(
-                    elementId: 'inline',
-                    onActionClick: _showInlineActionClick,
+          const SizedBox(height: 16),
+          _buildImageAndTextBlock(),
+          _buildFullWidthCard(),
+          _buildThreeColumnRow(),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildMultipleViewsTab() {
+    return SingleChildScrollView(
+      padding: const EdgeInsets.all(16),
+      child: Column(
+        children: [
+          Container(
+            width: double.infinity,
+            padding: const EdgeInsets.all(12),
+            margin: const EdgeInsets.only(bottom: 16),
+            decoration: BoxDecoration(
+              color: Colors.green[50],
+              borderRadius: BorderRadius.circular(8),
+              border: Border.all(color: Colors.green[200]!),
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Element IDs in this tab:',
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    color: Colors.green[800],
+                    fontSize: 14,
                   ),
-                  _buildImageAndTextBlock(),
-                  _buildFullWidthCard(),
-                  _buildThreeColumnRow(),
-                  const SizedBox(height: 16),
-                  InlineInAppMessageView(
-                    elementId: 'below-fold',
-                    onActionClick: _showInlineActionClick,
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  '• multi-top\n• multi-middle\n• multi-bottom',
+                  style: TextStyle(
+                    color: Colors.green[700],
+                    fontSize: 13,
+                    fontFamily: 'monospace',
                   ),
-                ],
-              ),
+                ),
+              ],
             ),
           ),
+          InlineInAppMessageView(
+            elementId: 'multi-top',
+            onActionClick: _showInlineActionClick,
+          ),
+          const SizedBox(height: 16),
+          _buildImageAndTextBlock(),
+          _buildFullWidthCard(),
+          const SizedBox(height: 16),
+          InlineInAppMessageView(
+            elementId: 'multi-middle',
+            onActionClick: _showInlineActionClick,
+          ),
+          const SizedBox(height: 16),
+          _buildThreeColumnRow(),
+          const SizedBox(height: 16),
+          InlineInAppMessageView(
+            elementId: 'multi-bottom',
+            onActionClick: _showInlineActionClick,
+          ),
         ],
       ),
     );