Improve DoubtQueue UI and queue experience

app/lib/main.dart

@@ -3,6 +3,7 @@ import 'package:http/http.dart' as http;
 
 import 'screens/session_list_screen.dart';
 import 'services/api_service.dart';
+import 'theme/app_theme.dart';
 
 void main() {
   runApp(DoubtQueueApp(api: ApiService(http.Client())));
@@ -17,10 +18,7 @@ class DoubtQueueApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'DoubtQueue',
-      theme: ThemeData(
-        useMaterial3: true,
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
-      ),
+      theme: buildAppTheme(),
       home: SessionListScreen(api: api),
     );
   }

app/lib/models/doubt.dart

@@ -1,34 +1,47 @@
+import '../utils/time_format.dart';
+
 class Doubt {
   const Doubt({
     required this.id,
     required this.sessionId,
     required this.studentName,
+    required this.studentEmail,
     required this.topic,
     required this.question,
     required this.status,
     this.position,
+    this.createdAt,
+    this.startedAt,
   });
 
   factory Doubt.fromJson(Map<String, dynamic> json) {
     return Doubt(
       id: json['id'] as int,
       sessionId: json['session_id'] as int,
       studentName: json['student_name'] as String,
+      studentEmail: json['student_email'] as String,
       topic: json['topic'] as String,
       question: json['question'] as String,
       status: json['status'] as String,
       position: json['position'] as int?,
+      createdAt: parseApiDate(json['created_at'] as String?),
+      startedAt: parseApiDate(json['started_at'] as String?),
     );
   }
 
   final int id;
   final int sessionId;
   final String studentName;
+  final String studentEmail;
   final String topic;
   final String question;
   final String status;
   final int? position;
+  final DateTime? createdAt;
+  final DateTime? startedAt;
 
   bool get isWaiting => status == 'WAITING';
   bool get isFinished => status == 'SOLVED' || status == 'SKIPPED';
+
+  int get studentsAhead => position == null ? 0 : position! - 1;
 }

app/lib/models/session.dart

@@ -1,10 +1,14 @@
+import '../utils/time_format.dart';
+
 class Session {
   const Session({
     required this.id,
     required this.title,
     required this.mentorName,
     required this.status,
     required this.waitingCount,
+    this.createdAt,
+    this.closedAt,
   });
 
   factory Session.fromJson(Map<String, dynamic> json) {
@@ -14,6 +18,8 @@ class Session {
       mentorName: json['mentor_name'] as String,
       status: json['status'] as String,
       waitingCount: json['waiting_count'] as int? ?? 0,
+      createdAt: parseApiDate(json['created_at'] as String?),
+      closedAt: parseApiDate(json['closed_at'] as String?),
     );
   }
 
@@ -22,6 +28,8 @@ class Session {
   final String mentorName;
   final String status;
   final int waitingCount;
+  final DateTime? createdAt;
+  final DateTime? closedAt;
 
   bool get isOpen => status == 'OPEN';
 }

app/lib/screens/join_queue_screen.dart

@@ -2,7 +2,10 @@ import 'package:flutter/material.dart';
 
 import '../models/session.dart';
 import '../services/api_service.dart';
+import '../theme/app_theme.dart';
 import '../widgets/content_width.dart';
+import '../widgets/state_views.dart';
+import '../widgets/status_badge.dart';
 import 'my_doubt_screen.dart';
 
 class JoinQueueScreen extends StatefulWidget {
@@ -65,85 +68,158 @@ class _JoinQueueScreenState extends State<JoinQueueScreen> {
     }
   }
 
-  String? _required(String? value) {
-    return value == null || value.trim().isEmpty
-        ? 'This field is required'
-        : null;
+  String? _required(String? value, String message) {
+    return value == null || value.trim().isEmpty ? message : null;
+  }
+
+  String? _validateEmail(String? value) {
+    final email = value?.trim() ?? '';
+    if (email.isEmpty) {
+      return 'Enter your email address';
+    }
+    if (!email.contains('@') || !email.contains('.')) {
+      return 'Enter a valid email address';
+    }
+    return null;
   }
 
   @override
   Widget build(BuildContext context) {
-    final colors = Theme.of(context).colorScheme;
-
     return Scaffold(
-      appBar: AppBar(title: const Text('Join Queue')),
+      appBar: AppBar(title: const Text('Join queue')),
       body: ContentWidth(
         child: ListView(
-          padding: const EdgeInsets.all(16),
+          padding: const EdgeInsets.all(pagePadding),
           children: [
-            Text(
-              widget.session.title,
-              style: Theme.of(context).textTheme.titleLarge,
+            _SessionSummary(session: widget.session),
+            const SizedBox(height: sectionGap),
+            _buildFormCard(),
+            if (_error != null) ...[
+              const SizedBox(height: itemGap),
+              ErrorBanner(message: _error!),
+            ],
+            const SizedBox(height: sectionGap),
+            FilledButton.icon(
+              onPressed: _submitting ? null : _submit,
+              icon: _submitting
+                  ? const SizedBox(
+                      width: 18,
+                      height: 18,
+                      child: CircularProgressIndicator(strokeWidth: 2),
+                    )
+                  : const Icon(Icons.login),
+              label: Text(_submitting ? 'Joining...' : 'Join queue'),
             ),
-            Text('Mentor: ${widget.session.mentorName}'),
-            const SizedBox(height: 16),
-            Form(
-              key: _formKey,
-              child: Column(
-                children: [
-                  TextFormField(
-                    controller: _name,
-                    decoration: const InputDecoration(
-                      labelText: 'Name',
-                      border: OutlineInputBorder(),
-                    ),
-                    textInputAction: TextInputAction.next,
-                    validator: _required,
-                  ),
-                  const SizedBox(height: 16),
-                  TextFormField(
-                    controller: _email,
-                    decoration: const InputDecoration(
-                      labelText: 'Email',
-                      border: OutlineInputBorder(),
-                    ),
-                    keyboardType: TextInputType.emailAddress,
-                    textInputAction: TextInputAction.next,
-                    validator: _required,
-                  ),
-                  const SizedBox(height: 16),
-                  TextFormField(
-                    controller: _topic,
-                    decoration: const InputDecoration(
-                      labelText: 'Topic',
-                      border: OutlineInputBorder(),
-                    ),
-                    textInputAction: TextInputAction.next,
-                    validator: _required,
-                  ),
-                  const SizedBox(height: 16),
-                  TextFormField(
-                    controller: _question,
-                    decoration: const InputDecoration(
-                      labelText: 'Question',
-                      border: OutlineInputBorder(),
-                      alignLabelWithHint: true,
-                    ),
-                    minLines: 3,
-                    maxLines: 6,
-                    validator: _required,
-                  ),
-                ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFormCard() {
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Form(
+          key: _formKey,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                'Your details',
+                style: Theme.of(context).textTheme.titleMedium,
+              ),
+              const SizedBox(height: 16),
+              TextFormField(
+                controller: _name,
+                decoration: const InputDecoration(
+                  labelText: 'Name',
+                  prefixIcon: Icon(Icons.person_outline),
+                ),
+                textInputAction: TextInputAction.next,
+                validator: (value) => _required(value, 'Enter your name'),
+              ),
+              const SizedBox(height: 16),
+              TextFormField(
+                controller: _email,
+                decoration: const InputDecoration(
+                  labelText: 'Email',
+                  prefixIcon: Icon(Icons.mail_outline),
+                ),
+                keyboardType: TextInputType.emailAddress,
+                textInputAction: TextInputAction.next,
+                validator: _validateEmail,
               ),
-            ),
-            if (_error != null) ...[
               const SizedBox(height: 16),
-              Text(_error!, style: TextStyle(color: colors.error)),
+              TextFormField(
+                controller: _topic,
+                decoration: const InputDecoration(
+                  labelText: 'Topic',
+                  hintText: 'For example: Arrays',
+                  prefixIcon: Icon(Icons.label_outline),
+                ),
+                textInputAction: TextInputAction.next,
+                validator: (value) => _required(value, 'Enter a topic'),
+              ),
+              const SizedBox(height: 16),
+              TextFormField(
+                controller: _question,
+                decoration: const InputDecoration(
+                  labelText: 'Question',
+                  hintText: 'Describe what you need help with',
+                  alignLabelWithHint: true,
+                ),
+                minLines: 3,
+                maxLines: 6,
+                validator: (value) => _required(value, 'Enter your question'),
+              ),
             ],
-            const SizedBox(height: 24),
-            FilledButton(
-              onPressed: _submitting ? null : _submit,
-              child: Text(_submitting ? 'Joining...' : 'Join Queue'),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _SessionSummary extends StatelessWidget {
+  const _SessionSummary({required this.session});
+
+  final Session session;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Card(
+      color: theme.colorScheme.primaryContainer,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    session.title,
+                    style: theme.textTheme.titleLarge?.copyWith(
+                      color: theme.colorScheme.onPrimaryContainer,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                ),
+                const SizedBox(width: 8),
+                StatusBadge(status: session.status),
+              ],
+            ),
+            const SizedBox(height: 8),
+            Text(
+              'Mentor: ${session.mentorName}',
+              style: TextStyle(color: theme.colorScheme.onPrimaryContainer),
+            ),
+            Text(
+              '${session.waitingCount} waiting',
+              style: TextStyle(color: theme.colorScheme.onPrimaryContainer),
             ),
           ],
         ),