Add visual feedback for widget progress (#3403)

<!-- Thank you for submitting a Pull Request and helping to improve Home
Assistant. Please complete the following sections to help the processing
and review of your changes. Please do not delete anything from this
template. -->

## Summary
<!-- Provide a brief summary of the changes you have made and most
importantly what they aim to achieve -->

## Screenshots
<!-- If this is a user-facing change not in the frontend, please include
screenshots in light and dark mode. -->

![CleanShot 2025-02-04 at 16 11
19@2x](https://github.com/user-attachments/assets/32261197-242c-441d-b727-5f476bf1a123)


## Link to pull request in Documentation repository
<!-- Pull requests that add, change or remove functionality must have a
corresponding pull request in the Companion App Documentation repository
(https://github.com/home-assistant/companion.home-assistant). Please add
the number of this pull request after the "#" -->
Documentation: home-assistant/companion.home-assistant#

## Any other notes
<!-- If there is any other information of note, like if this Pull
Request is part of a bigger change, please include it here. -->

Author: bgoncal

Sources/Extensions/Widgets/Common/WidgetBasicButtonView.swift

@@ -64,39 +64,80 @@ struct WidgetBasicButtonView: WidgetBasicViewInterface {
     }
 
     private var tileView: some View {
-        VStack(alignment: .leading) {
-            Group {
-                switch sizeStyle {
-                case .regular, .condensed, .compressed:
-                    HStack(alignment: .center, spacing: Spaces.oneAndHalf) {
-                        icon
-                        VStack(alignment: .leading, spacing: .zero) {
+        ZStack(alignment: .topTrailing) {
+            VStack(alignment: .leading) {
+                Group {
+                    switch sizeStyle {
+                    case .regular, .condensed, .compressed:
+                        HStack(alignment: .center, spacing: Spaces.oneAndHalf) {
+                            icon
+                            VStack(alignment: .leading, spacing: .zero) {
+                                text
+                                subtext
+                            }
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                        }
+                        .padding([.leading, .trailing], Spaces.oneAndHalf)
+                    case .single, .expanded:
+                        VStack(alignment: .leading, spacing: 0) {
+                            icon
+                            Spacer()
                             text
                             subtext
                         }
                         .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.horizontal)
+                        .padding(.vertical, sizeStyle == .regular ? 10 : /* use default */ nil)
                     }
-                    .padding([.leading, .trailing], Spaces.oneAndHalf)
-                case .single, .expanded:
-                    VStack(alignment: .leading, spacing: 0) {
-                        icon
-                        Spacer()
-                        text
-                        subtext
-                    }
-                    .frame(maxWidth: .infinity, alignment: .leading)
-                    .padding(.horizontal)
-                    .padding(.vertical, sizeStyle == .regular ? 10 : /* use default */ nil)
                 }
-            }
-            .modify { view in
-                if #available(iOS 18, *) {
-                    view.widgetAccentable()
-                } else {
-                    view
+                .modify { view in
+                    if #available(iOS 18, *) {
+                        view.widgetAccentable()
+                    } else {
+                        view
+                    }
                 }
             }
+            .tileCardStyle(sizeStyle: sizeStyle, model: model, tinted: tinted)
+            .opacity(model.disabled ? 0.3 : 1)
+            progressIndicator
+        }
+    }
+
+    @ViewBuilder
+    private var progressIndicator: some View {
+        Group {
+            let success = model.progress == 100
+            let failure = model.progress == -1
+            RingProgressView(progress: model.progress)
+                .opacity((model.showProgress && !success && !failure) ? 1 : 0)
+                .offset(x: -2, y: 2)
+            Image(systemSymbol: success ? .checkmarkCircleFill : .xmarkCircleFill)
+                .resizable()
+                .frame(width: 19, height: 19, alignment: .topTrailing)
+                .foregroundStyle(.white, success ? Color.asset(Asset.Colors.haPrimary) : .red)
+                .opacity((success || failure) ? 1 : 0)
+        }
+        .padding([.top, .trailing], Spaces.one)
+    }
+}
+
+struct RingProgressView: View {
+    var progress: Int
+
+    private let lineWidth: CGFloat = 4
+    private let size: CGFloat = 15
+
+    var body: some View {
+        ZStack {
+            Circle()
+                .trim(from: 0.0, to: CGFloat(progress) / 100)
+                .stroke(
+                    AngularGradient(gradient: Gradient(colors: [Color.asset(Asset.Colors.haPrimary)]), center: .center),
+                    style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
+                )
+                .rotationEffect(.degrees(-90))
         }
-        .tileCardStyle(sizeStyle: sizeStyle, model: model, tinted: tinted)
+        .frame(width: size, height: size, alignment: .topTrailing)
     }
 }

Sources/Extensions/Widgets/Common/WidgetBasicView.swift

@@ -13,8 +13,6 @@ struct WidgetBasicView: View {
     let rows: [[WidgetBasicViewModel]]
     let sizeStyle: WidgetBasicSizeStyle
 
-    private let opacityWhenDisabled: CGFloat = 0.3
-
     var body: some View {
         let spacing = sizeStyle == .compressed ? .zero : Spaces.one
         VStack(alignment: .leading, spacing: spacing) {
@@ -308,7 +306,6 @@ struct WidgetBasicView: View {
                 ))
             }
         }
-        .opacity(model.disabled ? opacityWhenDisabled : 1)
     }
 
     private func normalView(model: WidgetBasicViewModel, sizeStyle: WidgetBasicSizeStyle) -> some View {
@@ -328,7 +325,6 @@ struct WidgetBasicView: View {
                 ))
             }
         }
-        .opacity(model.disabled ? opacityWhenDisabled : 1)
     }
 
     @available(iOS 17.0, *)
@@ -365,8 +361,10 @@ struct WidgetBasicView: View {
                 return intent
             case .refresh:
                 return ReloadWidgetsAppIntent()
-            case let .toggle(entityId, domain, serverId):
+            case let .toggle(widgetId, magicItemServerUniqueId, entityId, domain, serverId):
                 let intent = CustomWidgetToggleAppIntent()
+                intent.widgetId = widgetId
+                intent.magicItemServerUniqueId = magicItemServerUniqueId
                 intent.domain = domain
                 intent.entityId = entityId
                 intent.serverId = serverId

Sources/Extensions/Widgets/Common/WidgetBasicViewModel.swift

@@ -14,6 +14,8 @@ struct WidgetBasicViewModel: Identifiable, Hashable, Encodable {
         backgroundColor: Color = Color.asset(Asset.Colors.tileBackground),
         useCustomColors: Bool = false,
         showConfirmation: Bool = false,
+        showProgress: Bool = false,
+        progress: Int = 0,
         requiresConfirmation: Bool = false,
         widgetId: String? = nil,
         disabled: Bool = false
@@ -28,6 +30,8 @@ struct WidgetBasicViewModel: Identifiable, Hashable, Encodable {
         self.backgroundColor = backgroundColor
         self.useCustomColors = useCustomColors
         self.showConfirmation = showConfirmation
+        self.showProgress = showProgress
+        self.progress = progress
         self.requiresConfirmation = requiresConfirmation
         self.widgetId = widgetId
         self.disabled = disabled
@@ -53,6 +57,10 @@ struct WidgetBasicViewModel: Identifiable, Hashable, Encodable {
     // the intent of the forms in this button will run or not the real intent
     var requiresConfirmation: Bool
 
+    // When the widget item is executing it can display progress
+    var showProgress: Bool
+    var progress: Int
+
     /// Used to update confirmation state
     var widgetId: String?
     /// When one item confirmation is pending, the rest of the items should be blurred
@@ -67,7 +75,13 @@ struct WidgetBasicViewModel: Identifiable, Hashable, Encodable {
         case action(id: String, name: String)
         case script(id: String, entityId: String, serverId: String, name: String, showConfirmationNotification: Bool)
         /// Entities that can be toggled
-        case toggle(entityId: String, domain: String, serverId: String)
+        case toggle(
+            widgetId: String,
+            magicItemServerUniqueId: String,
+            entityId: String,
+            domain: String,
+            serverId: String
+        )
         /// Script or Scene
         case activate(entityId: String, domain: String, serverId: String)
         /// Button

Sources/Extensions/Widgets/Custom/AppIntents/CustomWidgetToggleAppIntent.swift

@@ -8,6 +8,10 @@ struct CustomWidgetToggleAppIntent: AppIntent {
     static var title: LocalizedStringResource = "Toggle"
     static var isDiscoverable: Bool = false
 
+    @Parameter(title: "Widget Id")
+    var widgetId: String?
+    @Parameter(title: "Magic Item Id")
+    var magicItemServerUniqueId: String?
     @Parameter(title: "Server")
     var serverId: String?
     @Parameter(title: "Domain")
@@ -25,21 +29,70 @@ struct CustomWidgetToggleAppIntent: AppIntent {
               }), let connection = Current.api(for: server)?.connection else {
             return .result()
         }
-        await withCheckedContinuation { continuation in
+
+        await updateProgress(waitSeconds: 0, progress: 20)
+        let success = await withCheckedContinuation { continuation in
             connection.send(.toggleDomain(domain: domain, entityId: entityId)).promise.pipe { result in
                 switch result {
                 case .fulfilled:
-                    continuation.resume()
+                    continuation.resume(returning: true)
                 case let .rejected(error):
                     Current.Log
                         .error(
                             "Failed to execute ToggleAppIntent, serverId: \(serverId), domain: \(domain), entityId: \(entityId), error: \(error)"
                         )
-                    continuation.resume()
+                    continuation.resume(returning: false)
                 }
             }
         }
-        _ = try await ResetAllCustomWidgetConfirmationAppIntent().perform()
+
+        if success {
+            await updateProgress(waitSeconds: 1, progress: 80)
+            await updateProgress(waitSeconds: 2, progress: 100)
+            await resetStates(waitSeconds: 3)
+        } else {
+            await updateProgress(waitSeconds: 1, progress: -1)
+            await resetStates(waitSeconds: 2)
+        }
+
         return .result()
     }
+
+    private func resetStates(waitSeconds: UInt64) async {
+        Task {
+            do {
+                // Allow visual feedback to display
+                await wait(seconds: 3)
+                _ = try await ResetAllCustomWidgetConfirmationAppIntent().perform()
+            } catch {
+                Current.Log.error("Failed to ResetAllCustomWidgetConfirmationAppIntent")
+            }
+        }
+    }
+
+    private func updateProgress(waitSeconds: UInt64, progress: Int) async {
+        Task {
+            do {
+                // Update state to show progress
+                let progressIntent = UpdateWidgetItemExecutionProgressStateAppIntent()
+                progressIntent.widgetId = widgetId
+                progressIntent.serverUniqueId = magicItemServerUniqueId
+                progressIntent.progress = progress
+                // Allow visual feedback to display
+                await wait(seconds: waitSeconds)
+                // Update state to show progress
+                _ = try await progressIntent.perform()
+            } catch {
+                Current.Log.error("Failed to update custom widget item progress")
+            }
+        }
+    }
+
+    private func wait(seconds: UInt64) async {
+        do {
+            try await Task.sleep(nanoseconds: seconds * 1_000_000_000)
+        } catch {
+            Current.Log.error("Failed to wait in Custom CustomWidgetToggleAppIntent")
+        }
+    }
 }

Sources/Extensions/Widgets/Custom/AppIntents/ResetAllCustomWidgetConfirmationAppIntent.swift

@@ -2,13 +2,17 @@ import AppIntents
 import Foundation
 import Shared
 import SwiftUI
+import WidgetKit
 
 @available(iOS 16.4, *)
 struct ResetAllCustomWidgetConfirmationAppIntent: AppIntent {
     static var title: LocalizedStringResource = "Reset custom widget confirmation states"
     static var isDiscoverable: Bool = false
 
     func perform() async throws -> some IntentResult {
+        defer {
+            WidgetCenter.shared.reloadTimelines(ofKind: WidgetsKind.custom.rawValue)
+        }
         do {
             guard var customWidgets = try CustomWidget.widgets(), !customWidgets.isEmpty else {
                 return .result()
@@ -37,7 +41,6 @@ struct ResetAllCustomWidgetConfirmationAppIntent: AppIntent {
         } catch {
             Current.Log.error("Failed to load custom widgets to reset items states: \(error)")
         }
-
         return .result()
     }
 }

Sources/Extensions/Widgets/Custom/AppIntents/UpdateWidgetItemConfirmationStateAppIntent.swift

@@ -41,3 +41,45 @@ struct UpdateWidgetItemConfirmationStateAppIntent: AppIntent {
         return .result()
     }
 }
+
+@available(iOS 16.4, *)
+struct UpdateWidgetItemExecutionProgressStateAppIntent: AppIntent {
+    static var title: LocalizedStringResource = "Update custom widget confirmation"
+    static var isDiscoverable: Bool = false
+
+    @Parameter(title: "Widget Id")
+    var widgetId: String?
+
+    @Parameter(title: "item Id")
+    var serverUniqueId: String?
+
+    @Parameter(title: "Progress")
+    var progress: Int?
+
+    func perform() async throws -> some IntentResult {
+        guard let serverUniqueId, let widgetId, let progress else {
+            return .result()
+        }
+
+        _ = try await ResetAllCustomWidgetConfirmationAppIntent().perform()
+
+        WidgetCenter.shared.reloadTimelines(ofKind: WidgetsKind.custom.rawValue)
+
+        if var widget = try CustomWidget.widgets()?.first(where: { $0.id == widgetId }),
+           let magicItem = widget.items.first(where: { $0.serverUniqueId == serverUniqueId }) {
+            widget.itemsStates[magicItem.serverUniqueId] = .progress(progress)
+            do {
+                try await Current.database.write { [widget] db in
+                    try widget.update(db)
+                }
+                WidgetCenter.shared.reloadTimelines(ofKind: WidgetsKind.custom.rawValue)
+            } catch {
+                Current.Log
+                    .error(
+                        "Failed to update custom widget to set pending confirmation item, error: \(error.localizedDescription)"
+                    )
+            }
+        }
+        return .result()
+    }
+}