listless

commit 2d158a50fc69bb391a6bcc75d11eba4403e27158
parent 31a6c4911c5d2ec1011a29d0a050ea174b76255c
Author: Michael Camilleri <[email protected]>
Date:   Sun, 15 Feb 2026 05:32:54 +0900

Use accent colours in iOS

Co-Authored-By: Claude 4.5 Sonnet <[email protected]>

Diffstat

4 files changed, 73 insertions(+), 11 deletions(-)

@@ -126,7 +126,7 @@ struct TaskListView: View {
             }
             .frame(maxWidth: .infinity, alignment: .topLeading)
             #if os(iOS)
-            .padding(.horizontal, 16)
+            .padding(.trailing, 16)
             .padding(.vertical, 12)
             #endif
             .dropDestination(for: String.self) { items, location in

@@ -2,15 +2,15 @@ import SwiftUI
 import UIKit
 
 extension Color {
-    /// Warm gray canvas shown behind task cards and beneath completed-task text.
+    /// Canvas behind task cards: warm gray in light mode, black in dark mode.
     static let outerBackground = Color(uiColor: UIColor { traits in
         traits.userInterfaceStyle == .dark
-            ? UIColor(red: 0.173, green: 0.165, blue: 0.153, alpha: 1)  // #2C2A27
+            ? .black
             : UIColor(red: 0.922, green: 0.906, blue: 0.886, alpha: 1)  // #EBE7E2
     })
 
-    /// Stark card background: white in light mode, black in dark mode.
+    /// Card surface: white in light mode, elevated dark gray in dark mode.
     static let taskCard = Color(uiColor: UIColor { traits in
-        traits.userInterfaceStyle == .dark ? .black : .white
+        traits.userInterfaceStyle == .dark ? UIColor.secondarySystemBackground : .white
     })
 }

@@ -9,6 +9,7 @@ extension View {
         swipeOffset: Binding<CGFloat>,
         swipeDirection: Binding<TaskRowSwipeGesture.SwipeDirection>,
         isTriggered: Binding<Bool>,
+        completeColor: Color = .green,
         onComplete: @escaping () -> Void,
         onDelete: @escaping () -> Void,
         onSwipeActiveChanged: @escaping (Bool) -> Void = { _ in }
@@ -21,6 +22,7 @@ extension View {
                 swipeOffset: swipeOffset,
                 swipeDirection: swipeDirection,
                 isTriggered: isTriggered,
+                completeColor: completeColor,
                 onComplete: onComplete,
                 onDelete: onDelete,
                 onSwipeActiveChanged: onSwipeActiveChanged
@@ -35,6 +37,7 @@ struct TaskRowSwipeGesture: ViewModifier {
     @Binding var swipeOffset: CGFloat
     @Binding var swipeDirection: SwipeDirection
     @Binding var isTriggered: Bool
+    let completeColor: Color
     let onComplete: () -> Void
     let onDelete: () -> Void
     let onSwipeActiveChanged: (Bool) -> Void
@@ -85,8 +88,8 @@ struct TaskRowSwipeGesture: ViewModifier {
     @ViewBuilder
     private var swipeBackground: some View {
         if swipeDirection == .right {
-            // Complete action — plain green background
-            Color.green.opacity(backgroundOpacity(offset: swipeOffset))
+            // Complete action — accent color background
+            completeColor.opacity(backgroundOpacity(offset: swipeOffset))
         } else if swipeDirection == .left {
             // Delete action (red background, trash icon)
             Color.red.opacity(backgroundOpacity(offset: swipeOffset))

@@ -3,6 +3,8 @@ import SwiftUI
 struct TaskRowView: View {
     let task: TaskItem
     let taskID: UUID
+    let index: Int
+    let totalTasks: Int
     let isSelected: Bool
     let onToggle: (TaskItem) -> Void
     let onTitleChange: (TaskItem, String) -> Void
@@ -17,6 +19,7 @@ struct TaskRowView: View {
     @State private var swipeOffset: CGFloat = 0
     @State private var swipeDirection: TaskRowSwipeGesture.SwipeDirection = .none
     @State private var isSwipeTriggered: Bool = false
+    @State private var cachedAccentColor: Color = .clear
 
     init(
         task: TaskItem,
@@ -35,6 +38,8 @@ struct TaskRowView: View {
     ) {
         self.task = task
         self.taskID = taskID
+        self.index = index
+        self.totalTasks = totalTasks
         self.isSelected = isSelected
         self.onToggle = onToggle
         self.onTitleChange = onTitleChange
@@ -95,15 +100,32 @@ struct TaskRowView: View {
             }
         }
         .background(cardBackground)
-        .clipShape(RoundedRectangle(cornerRadius: task.isCompleted ? 0 : 14))
+        .clipShape(
+            UnevenRoundedRectangle(
+                topLeadingRadius: 0, bottomLeadingRadius: 0,
+                bottomTrailingRadius: task.isCompleted ? 0 : 14,
+                topTrailingRadius: task.isCompleted ? 0 : 14
+            )
+        )
         .overlay {
             if isSelected && !task.isCompleted {
-                RoundedRectangle(cornerRadius: 14)
-                    .strokeBorder(Color.accentColor, lineWidth: 2)
+                UnevenRoundedRectangle(
+                    topLeadingRadius: 0, bottomLeadingRadius: 0,
+                    bottomTrailingRadius: 14, topTrailingRadius: 14
+                )
+                .strokeBorder(Color.accentColor, lineWidth: 2)
+            }
+        }
+        .overlay(alignment: .leading) {
+            if !task.isCompleted {
+                Rectangle()
+                    .fill(cachedAccentColor)
+                    .frame(width: 8)
             }
         }
         .onAppear {
             editingTitle = task.title
+            cachedAccentColor = computeAccentColor()
         }
         .onChange(of: editingTitle) {
             guard !task.isCompleted else { return }
@@ -114,6 +136,9 @@ struct TaskRowView: View {
                 editingTitle = newValue
             }
         }
+        .onChange(of: "\(index)-\(totalTasks)") { _, _ in
+            cachedAccentColor = computeAccentColor()
+        }
         .taskSwipeGesture(
             isActive: true,
             isEditing: isCurrentlyEditing,
@@ -121,10 +146,44 @@ struct TaskRowView: View {
             swipeOffset: $swipeOffset,
             swipeDirection: $swipeDirection,
             isTriggered: $isSwipeTriggered,
+            completeColor: cachedAccentColor,
             onComplete: { onToggle(task) },
             onDelete: { onDelete(task) }
         )
-        .clipShape(RoundedRectangle(cornerRadius: task.isCompleted ? 0 : 14))
+        .clipShape(
+            UnevenRoundedRectangle(
+                topLeadingRadius: 0, bottomLeadingRadius: 0,
+                bottomTrailingRadius: task.isCompleted ? 0 : 14,
+                topTrailingRadius: task.isCompleted ? 0 : 14
+            )
+        )
+    }
+
+    private func computeAccentColor() -> Color {
+        guard !task.isCompleted else { return .clear }
+        guard totalTasks > 1 else { return Color(hue: 0.98, saturation: 0.85, brightness: 1.0) }
+
+        // Gradient: coral/red → pink/magenta → purple/blue (matches macOS)
+        let progress = Double(index) / Double(totalTasks - 1)
+        let topColor = Color(hue: 0.98, saturation: 0.85, brightness: 1.0)
+        let midColor = Color(hue: 0.88, saturation: 0.75, brightness: 0.95)
+        let bottomColor = Color(hue: 0.72, saturation: 0.65, brightness: 0.85)
+
+        if progress < 0.5 {
+            return interpolateColor(from: topColor, to: midColor, progress: progress * 2.0)
+        } else {
+            return interpolateColor(from: midColor, to: bottomColor, progress: (progress - 0.5) * 2.0)
+        }
+    }
+
+    private func interpolateColor(from: Color, to: Color, progress: Double) -> Color {
+        let fromHSB = PlatformColor(from).hsba
+        let toHSB = PlatformColor(to).hsba
+        return Color(
+            hue: fromHSB.hue + (toHSB.hue - fromHSB.hue) * progress,
+            saturation: fromHSB.saturation + (toHSB.saturation - fromHSB.saturation) * progress,
+            brightness: fromHSB.brightness + (toHSB.brightness - fromHSB.brightness) * progress
+        )
     }
 
     @ViewBuilder