App layout improvements (#10)

This PR contains the work done to improve the app layout for max iPhones and iPads by levering on the navigation split view. Plus, the floating button to add todo tasks was improved and integrated better into the layout and a critical bug occurring on max iPhones and iPads was fixed.

Reviewed-on: rock-n-code/todos-app#10
Co-authored-by: Javier Cicchelli <javier@rock-n-code.com>
Co-committed-by: Javier Cicchelli <javier@rock-n-code.com>

App/Sources/Views/ContentView.swift

@@ -4,13 +4,14 @@ import SwiftUI
 /// The main content view of the app.
 ///
 /// This view serves as the primary interface for managing todo tasks.
-///
-/// The view uses a dedicated view model (`ViewModel`) to manage state and business logic, following the MVVM pattern.
-/// User interactions are handled through the view model, maintaining separation of concerns.
 struct ContentView: View {
 
     // MARK: Properties
 
+    /// The horizontal size class of the environment.
+    @Environment(\.horizontalSizeClass)
+    private var horizontalSizeClass
+
     /// The view model managing the state and logic for this view.
     @State
     private var viewModel = ViewModel()
@@ -19,30 +20,39 @@ struct ContentView: View {
 
     /// The content and behavior of the view.
     ///
-    /// Displays a navigation view containing:
+    /// Displays a navigation split view with:
+    /// - Sidebar: List of todo task groups
+    /// - Detail: List of todo task related to a selected todo task group
     /// - A floating action button for adding new tasks
     ///
-    /// The view presents a sheet when `viewModel.newTaskShown` is true,
-    /// allowing users to create new todo tasks.
+    /// The view presents a sheet to allow users to create new todo tasks.
     var body: some View {
-        NavigationView {
-            ZStack(alignment: .bottomTrailing) {
-                TaskGroupListView()
-
-                Button(action: viewModel.showNewTask) {
-                    Image(systemName: "plus")
-                        .frame(width: 48, height: 48)
-                        .foregroundStyle(.white)
+        NavigationSplitView {
+            TaskGroupListView($viewModel.group)
+                .newTaskButton(show: viewModel.showNewTaskButtonInSidebar(when: horizontalSizeClass)) {
+                    viewModel.showNewTask()
                 }
-                .glassEffect(.regular.tint(.blue.opacity(0.8)).interactive())
-                .padding(.trailing, 20)
+        } detail: {
+            if let group = viewModel.group {
+                TaskListView(group: group)
+                    .id(group)
+                    .newTaskButton(show: viewModel.showNewTaskButtonInDetails) {
+                        viewModel.showNewTask()
+                    }
+                    .sheet(isPresented: $viewModel.newTaskShown) {
+                        NewTaskView()
+                    }
+            }
+            else {
+                ContentUnavailableView(
+                    "view.content.content-unavailable.title",
+                    systemImage: "sidebar.left",
+                    description: Text("view.content.content-unavailable.description")
+                )
             }
-            .navigationTitle("Todos")
-        }
-        .sheet(isPresented: $viewModel.newTaskShown) {
-            NewTaskView()
         }
     }
+
 }
 
 // MARK: - Previews