Add .tasks tab to NotchViewModel and create UI TasksPane

Author: xand0dev

Sources/VoidBar/Model/NotchViewModel.swift

@@ -4,7 +4,7 @@ import Combine
 @MainActor
 final class NotchViewModel: ObservableObject {
     enum Tab: String, CaseIterable, Identifiable {
-        case media, shelf, clipboard, snippets, calendar, timer, translate, notes, teleprompter, monitor, weather
+        case media, shelf, clipboard, snippets, calendar, timer, translate, notes, teleprompter, monitor, weather, tasks
         var id: String { rawValue }
 
         var symbol: String {
@@ -20,6 +20,7 @@ final class NotchViewModel: ObservableObject {
             case .teleprompter: return "text.line.first.and.arrowtriangle.forward"
             case .monitor: return "cpu"
             case .weather: return "cloud.sun"
+            case .tasks: return "checkmark.circle"
             }
         }
 
@@ -36,6 +37,7 @@ final class NotchViewModel: ObservableObject {
             case .teleprompter: return localized("Teleprompter")
             case .monitor: return localized("Monitor")
             case .weather: return localized("Weather")
+            case .tasks: return localized("Tasks")
             }
         }
 
@@ -48,7 +50,7 @@ final class NotchViewModel: ObservableObject {
         /// body has — so growth continues in a second column on the right,
         /// which the scratch notes open.
         static let leftRail: [Tab] = [.media, .shelf, .clipboard, .snippets, .calendar, .timer, .translate]
-        static let rightRail: [Tab] = [.notes, .teleprompter, .monitor, .weather]
+        static let rightRail: [Tab] = [.notes, .tasks, .teleprompter, .monitor, .weather]
     }
 
     @Published var isOpen = false {
@@ -99,6 +101,7 @@ final class NotchViewModel: ObservableObject {
     let teleprompter: TeleprompterStore
     let monitor: SystemMonitorStore
     let weather: WeatherStore
+    let tickTick: TickTickStore
 
     private var cancellables = Set<AnyCancellable>()
 
@@ -115,6 +118,7 @@ final class NotchViewModel: ObservableObject {
         self.teleprompter = TeleprompterStore()
         self.monitor = SystemMonitorStore()
         self.weather = WeatherStore()
+        self.tickTick = TickTickStore()
 
         // The panel header reads through to the stores — counters, the source
         // name, the equalizer. Nested ObservableObjects do not propagate on
@@ -154,7 +158,8 @@ final class NotchViewModel: ObservableObject {
             shelf.objectWillChange,
             clipboard.objectWillChange,
             calendar.objectWillChange,
-            monitor.objectWillChange
+            monitor.objectWillChange,
+            tickTick.objectWillChange
         ] {
             child
                 .sink { [weak self] _ in

Sources/VoidBar/UI/NotchContentView.swift

@@ -114,6 +114,12 @@ struct NotchContentView: View {
             EmptyView()
         case .weather:
             EmptyView()
+        case .tasks:
+            if !vm.tickTick.tasks.isEmpty {
+                counter(vm.tickTick.tasks.filter { !$0.isCompleted }.count)
+            } else {
+                EmptyView()
+            }
         }
     }
 
@@ -183,6 +189,8 @@ struct NotchContentView: View {
             MonitorPane(monitor: vm.monitor)
         case .weather:
             WeatherPane(weatherStore: vm.weather)
+        case .tasks:
+            TasksPane(store: vm.tickTick)
         }
     }
 }

Sources/VoidBar/UI/TasksPane.swift

@@ -0,0 +1,99 @@
+import SwiftUI
+
+struct TasksPane: View {
+    @ObservedObject var store: TickTickStore
+    
+    var body: some View {
+        VStack(spacing: 0) {
+            header
+            
+            if store.isLoading && store.tasks.isEmpty {
+                Spacer()
+                ProgressView()
+                Spacer()
+            } else if let error = store.errorMessage {
+                Spacer()
+                Text(error)
+                    .font(.system(size: 13, weight: .medium))
+                    .foregroundColor(Theme.tertiary)
+                    .multilineTextAlignment(.center)
+                    .padding()
+                Spacer()
+            } else if store.tasks.isEmpty {
+                Spacer()
+                VStack(spacing: 8) {
+                    Image(systemName: "checkmark.circle.fill")
+                        .font(.system(size: 24))
+                        .foregroundColor(Theme.tertiary)
+                    Text("All done for today!")
+                        .font(.system(size: 13, weight: .medium))
+                        .foregroundColor(Theme.tertiary)
+                }
+                Spacer()
+            } else {
+                ScrollView {
+                    VStack(alignment: .leading, spacing: 10) {
+                        ForEach(store.tasks) { task in
+                            taskRow(task)
+                        }
+                    }
+                    .padding(14)
+                }
+            }
+        }
+    }
+    
+    private var header: some View {
+        HStack {
+            Text("TickTick")
+                .font(.system(size: 11, weight: .semibold))
+                .foregroundColor(Theme.secondary)
+            Spacer()
+            Button {
+                Task {
+                    await store.fetchTasks()
+                }
+            } label: {
+                Image(systemName: "arrow.clockwise")
+                    .font(.system(size: 10, weight: .semibold))
+                    .foregroundColor(Theme.tertiary)
+            }
+            .buttonStyle(.plain)
+        }
+        .padding(.horizontal, 14)
+        .padding(.top, 14)
+        .padding(.bottom, 6)
+    }
+    
+    private func taskRow(_ task: TickTickTask) -> some View {
+        HStack(alignment: .top, spacing: 10) {
+            Image(systemName: task.isCompleted ? "checkmark.circle.fill" : "circle")
+                .font(.system(size: 14))
+                .foregroundColor(task.isCompleted ? Theme.secondary : Theme.tertiary)
+                .padding(.top, 2)
+            
+            VStack(alignment: .leading, spacing: 4) {
+                Text(task.title)
+                    .font(.system(size: 13, weight: .medium))
+                    .foregroundColor(task.isCompleted ? Theme.tertiary : .white)
+                    .strikethrough(task.isCompleted)
+                
+                if let date = task.dueDate {
+                    Text(date, style: .date)
+                        .font(.system(size: 11))
+                        .foregroundColor(priorityColor(task.priority))
+                }
+            }
+            Spacer()
+        }
+    }
+    
+    private func priorityColor(_ priority: Int) -> Color {
+        switch priority {
+        case 5: return .red
+        case 3: return .orange
+        case 1: return .blue
+        default: return Theme.tertiary
+        }
+    }
+}