feat: add combined template time/break section

packages/flutter_availability/lib/src/ui/models/view_template_daydata.dart

@@ -0,0 +1,52 @@
+import "package:flutter/material.dart";
+import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
+
+/// The data for creating or editing a day template
+class ViewDayTemplateData {
+  /// Constructor
+  const ViewDayTemplateData({
+    this.startTime,
+    this.endTime,
+    this.breaks = const [],
+  });
+
+  /// Create a new instance from a [DayTemplateData]
+  factory ViewDayTemplateData.fromDayTemplateData(DayTemplateData data) =>
+      ViewDayTemplateData(
+        startTime: TimeOfDay.fromDateTime(data.startTime),
+        endTime: TimeOfDay.fromDateTime(data.endTime),
+        breaks: data.breaks,
+      );
+
+  /// The start time to apply on a new availability
+  final TimeOfDay? startTime;
+
+  /// The start time to apply on a new availability
+  final TimeOfDay? endTime;
+
+  /// A list of breaks to apply to every new availability
+  final List<AvailabilityBreakModel> breaks;
+
+  /// Whether the data is valid for saving
+  bool get isValid => startTime != null && endTime != null;
+
+  /// Create a copy with new values
+  ViewDayTemplateData copyWith({
+    TimeOfDay? startTime,
+    TimeOfDay? endTime,
+    List<AvailabilityBreakModel>? breaks,
+  }) =>
+      ViewDayTemplateData(
+        startTime: startTime ?? this.startTime,
+        endTime: endTime ?? this.endTime,
+        breaks: breaks ?? this.breaks,
+      );
+
+  /// Convert to [DayTemplateData]
+  DayTemplateData toDayTemplateData() => DayTemplateData(
+        startTime:
+            DateTime(0, 0, 0, startTime?.hour ?? 0, startTime?.minute ?? 0),
+        endTime: DateTime(0, 0, 0, endTime?.hour ?? 0, endTime?.minute ?? 0),
+        breaks: breaks,
+      );
+}

packages/flutter_availability/lib/src/ui/screens/template_day_modification.dart

@@ -1,8 +1,8 @@
 import "package:flutter/material.dart";
+import "package:flutter_availability/src/ui/models/view_template_daydata.dart";
 import "package:flutter_availability/src/ui/widgets/color_selection.dart";
-import "package:flutter_availability/src/ui/widgets/pause_selection.dart";
 import "package:flutter_availability/src/ui/widgets/template_name_input.dart";
-import "package:flutter_availability/src/ui/widgets/template_time_selection.dart";
+import "package:flutter_availability/src/ui/widgets/template_time_break.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 
@@ -102,54 +102,6 @@ class _DayTemplateModificationScreenState
       },
     );
 
-    var timeSection = TemplateTimeSelection(
-      key: ValueKey(_template.templateData),
-      // TODO(Joey): Extract this
-      startTime: TimeOfDay.fromDateTime(
-        (_template.templateData as DayTemplateData).startTime,
-      ),
-      // TODO(Joey): Extract this
-      endTime: TimeOfDay.fromDateTime(
-        (_template.templateData as DayTemplateData).endTime,
-      ),
-      // TODO(Joey): Extract this
-      onStartChanged: (start) {
-        var startTime = (_template.templateData as DayTemplateData).startTime;
-        var updatedStartTime = DateTime(
-          startTime.year,
-          startTime.month,
-          startTime.day,
-          start.hour,
-          start.minute,
-        );
-        setState(() {
-          _template = _template.copyWith(
-            templateData: (_template.templateData as DayTemplateData).copyWith(
-              startTime: updatedStartTime,
-            ),
-          );
-        });
-      },
-      // TODO(Joey): Extract this
-      onEndChanged: (end) {
-        var endTime = (_template.templateData as DayTemplateData).endTime;
-        var updatedEndTime = DateTime(
-          endTime.year,
-          endTime.month,
-          endTime.day,
-          end.hour,
-          end.minute,
-        );
-        setState(() {
-          _template = _template.copyWith(
-            templateData: (_template.templateData as DayTemplateData).copyWith(
-              endTime: updatedEndTime,
-            ),
-          );
-        });
-      },
-    );
-
     var colorSection = TemplateColorSelection(
       selectedColor: _selectedColor,
       // TODO(Joey): Extract this
@@ -161,15 +113,14 @@ class _DayTemplateModificationScreenState
       },
     );
 
-    var pauseSection = PauseSelection(
-      breaks: (_template.templateData as DayTemplateData).breaks,
-      editingTemplate: true,
-      // TODO(Joey): Extrac this
-      onBreaksChanged: (breaks) {
+    var availabilitySection = TemplateTimeAndBreakSection(
+      dayData: ViewDayTemplateData.fromDayTemplateData(
+        _template.templateData as DayTemplateData,
+      ),
+      onDayDataChanged: (data) {
         setState(() {
           _template = _template.copyWith(
-            templateData: (_template.templateData as DayTemplateData)
-                .copyWith(breaks: breaks),
+            templateData: data.toDayTemplateData(),
           );
         });
       },
@@ -186,11 +137,9 @@ class _DayTemplateModificationScreenState
               const SizedBox(height: 24),
               templateTitleSection,
               const SizedBox(height: 24),
-              timeSection,
+              availabilitySection,
               const SizedBox(height: 24),
               colorSection,
-              const SizedBox(height: 24),
-              pauseSection,
               const SizedBox(height: 32),
             ],
           ),

packages/flutter_availability/lib/src/ui/widgets/template_time_break.dart

@@ -0,0 +1,42 @@
+import "package:flutter/material.dart";
+import "package:flutter_availability/src/ui/models/view_template_daydata.dart";
+import "package:flutter_availability/src/ui/widgets/pause_selection.dart";
+import "package:flutter_availability/src/ui/widgets/template_time_selection.dart";
+
+/// Section for selecting the time and breaks for a single day 
+class TemplateTimeAndBreakSection extends StatelessWidget {
+  ///
+  const TemplateTimeAndBreakSection({
+    required this.onDayDataChanged,
+    this.dayData = const ViewDayTemplateData(),
+    super.key,
+  });
+
+  /// The day data to display and edit
+  final ViewDayTemplateData dayData;
+
+  /// Callback for when the day data changes
+  final void Function(ViewDayTemplateData data) onDayDataChanged;
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          TemplateTimeSelection(
+            key: ValueKey([dayData.startTime, dayData.endTime]),
+            startTime: dayData.startTime,
+            endTime: dayData.endTime,
+            onStartChanged: (start) =>
+                onDayDataChanged(dayData.copyWith(startTime: start)),
+            onEndChanged: (end) =>
+                onDayDataChanged(dayData.copyWith(endTime: end)),
+          ),
+          const SizedBox(height: 24),
+          PauseSelection(
+            editingTemplate: true,
+            breaks: dayData.breaks,
+            onBreaksChanged: (pauses) =>
+                onDayDataChanged(dayData.copyWith(breaks: pauses)),
+          ),
+        ],
+      );
+}