Adding fancy stuff to events list

frontend/lib/events/events_list.dart

@@ -3,9 +3,15 @@ import 'package:frontend/utils/friendly_date_formatter.dart';
 import '../model/event.dart';
 import '../model/device_type.dart';
 
-// Dummy events to display
+class EventsList extends StatefulWidget {
-// TODO : Replace with API call
+  @override
-final List<Event> events = <Event>[
+  _EventListState createState() => _EventListState();
+}
+
+class _EventListState extends State<EventsList> {
+  // Dummy events to display
+  // TODO : Replace with API call
+  List<Event> events = <Event>[
     Event(
       id: 5,
       title: 'New device found',
@@ -46,24 +52,48 @@ final List<Event> events = <Event>[
       deviceType: DeviceType.phone,
       dateTime: DateTime(2026, 01, 17, 14, 47),
     ),
-];
+  ];
 
-class EventsList extends StatelessWidget {
-  const EventsList({super.key});
   @override
   Widget build(BuildContext context) {
-    return ListView.separated(
+    return Scaffold(
+      appBar: AppBar(title: const Text('Events')),
+      body: ListView.separated(
         itemCount: events.length,
         itemBuilder: (context, index) {
-        return ListTile(
+          return Dismissible(
+            key: UniqueKey(),
+            onDismissed: (direction) {
+              setState(() {
+                events.removeAt(index);
+              });
+
+              ScaffoldMessenger.of(context).showSnackBar(
+                SnackBar(
+                  content: Text('Event marked as read'),
+                  behavior: SnackBarBehavior.floating,
+                  showCloseIcon: true,
+                ),
+              );
+            },
+            background: Container(
+              color: Theme.of(context).colorScheme.primaryContainer,
+              alignment: Alignment.center,
+              child: Icon(Icons.done),
+            ),
+            child: ListTile(
               leading: Icon(events[index].deviceType.icon),
               title: Text(
                 '${FriendlyDateFormatter().format(events[index].dateTime)} - ${events[index].title}',
               ),
               subtitle: Text(events[index].description),
+              trailing: Icon(Icons.more_vert),
+              onTap: () {},
+            ),
           );
         },
         separatorBuilder: (context, index) => Divider(),
+      ),
     );
   }
 }

frontend/lib/navigation.dart

@@ -14,7 +14,7 @@ final GoRouter router = GoRouter(
         GoRoute(
           path: '/events',
           name: 'events',
-          builder: (context, state) => const EventsList(),
+          builder: (context, state) => EventsList(),
         ),
         GoRoute(
           path: '/devices',
@@ -49,7 +49,9 @@ class MainShell extends StatelessWidget {
         return Scaffold(
           appBar: AppBar(
             title: const Text('OOTT'),
-            backgroundColor: Theme.of(context).colorScheme.surfaceBright,
+            backgroundColor: Theme.of(
+              context,
+            ).colorScheme.surfaceContainerLowest,
           ),
           body: Row(
             children: [
@@ -57,7 +59,7 @@ class MainShell extends StatelessWidget {
                 child: NavigationRail(
                   backgroundColor: Theme.of(
                     context,
-                  ).colorScheme.primaryContainer,
+                  ).colorScheme.surfaceContainerLow,
                   extended: constraints.maxWidth >= 600,
                   destinations: [
                     NavigationRailDestination(
@@ -89,7 +91,7 @@ class MainShell extends StatelessWidget {
               Expanded(
                 child: Container(
                   padding: const EdgeInsets.all(20),
-                  color: Theme.of(context).colorScheme.surfaceDim,
+                  color: Theme.of(context).colorScheme.surface,
                   child: child,
                 ),
               ),