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

App/Sources/Views/NewTaskView.swift

@@ -7,9 +7,6 @@ import SwiftUI
 /// - *Title* (required)
 /// - *Note* (optional)
 /// - *Due date* (required)
-///
-/// The view uses a dedicated view model (`ViewModel`) to manage state and business logic, following the MVVM pattern.
-/// When the user saves, the todo is inserted into the SwiftData model context and the view is dismissed afterwards.
 struct NewTaskView: View {
 
     // MARK: Properties

App/Sources/Views/TaskGroupList/TaskGroupListCard.swift

@@ -63,7 +63,7 @@ extension TaskGroupListView {
                 
                 Spacer()
 
-                Text("\(count)")
+                Text(String(count))
                     .font(.title)
                     .fontWeight(.bold)
                     .foregroundStyle(group.color)

App/Sources/Views/TaskGroupListView.swift

@@ -12,12 +12,18 @@ struct TaskGroupListView: View {
 
     // MARK: Properties
 
+    /// Binding to the currently selected todo task group.
+    ///
+    /// When provided, the view will use this binding for navigation split view selection.
+    @Binding
+    private var group: TodoGroup?
+
     /// Query to monitor all todo tasks for changes.
     ///
     /// This query triggers view updates whenever todo tasks are inserted, updated, or deleted,
     /// ensuring the task counts displayed in the view remain accurate.
     @Query
-    private var tasks: [Todo]
+    private var todos: [Todo]
 
     /// The view model managing the state and logic for this view.
     ///
@@ -26,6 +32,18 @@ struct TaskGroupListView: View {
     @State
     private var viewModel = ViewModel()
 
+    // MARK: Initializers
+
+    /// Creates a task group list view with a binding to the selected group.
+    ///
+    /// This initializer configures the view for use in a navigation split view,
+    /// where the binding tracks which task group is currently selected in the sidebar.
+    ///
+    /// - Parameter group: A binding to the currently selected task group.
+    init(_ group: Binding<TodoGroup?>) {
+        self._group = group
+    }
+
     // MARK: Body
 
     /// The content and behavior of the view.
@@ -35,24 +53,30 @@ struct TaskGroupListView: View {
     /// - The group's title
     /// - The current count of tasks in that group
     ///
-    /// Cards are tappable and navigate to a detailed task list for the selected group.
+    /// Cards are tappable and update the selected group binding for navigation split view.
     /// Task counts are fetched on-demand from the model context for each render.
     var body: some View {
-        ScrollView {
-            VStack(spacing: 16) {
-                ForEach(viewModel.groups) { group in
-                    NavigationLink(destination: TaskListView(group: group)) {
-                        Card(
-                            group: group,
-                            count: viewModel.count(tasks, for: group)
-                        )
-                    }
-                    .buttonStyle(.plain)
-                }
-            }
-            .padding(.horizontal)
+        List(
+            viewModel.groups,
+            selection: $group
+        ) { group in
+            Card(
+                group: group,
+                count: viewModel.count(
+                    todos,
+                    for: group
+                )
+            )
+            .listRowBackground(Color.clear)
+            .listRowSeparator(.hidden)
+            .tag(group)
         }
+        .listStyle(.plain)
         .navigationTitle("view.task-group-list.navigation.title")
+        .sensoryFeedback(
+            .selection,
+            trigger: group
+        )
     }
 }
 
@@ -62,8 +86,12 @@ struct TaskGroupListView: View {
     "Task group list with empty tasks",
     traits: .emptyContainer
 ) {
+    @Previewable
+    @State
+    var group: TodoGroup?
+
     NavigationStack {
-        TaskGroupListView()
+        TaskGroupListView($group)
     }
 }
 
@@ -71,7 +99,11 @@ struct TaskGroupListView: View {
     "Task group list with sample tasks",
     traits: .sampleTasks
 ) {
+    @Previewable
+    @State
+    var group: TodoGroup?
+
     NavigationStack {
-        TaskGroupListView()
+        TaskGroupListView($group)
     }
 }

App/Sources/Views/TaskListView.swift

@@ -4,7 +4,6 @@ import SwiftUI
 /// A view that displays filtered todo tasks for a specific task group.
 ///
 /// This view provides the presentation layer for displaying and managing tasks within a specific group category.
-/// It follows the MVVM pattern, delegating business logic to a view model and data fetching to a separate content view.
 struct TaskListView: View {
 
     // MARK: Properties