Refactor watch Assist UI (#3702)

<!-- 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. -->

## 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. -->

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: bgoncal

Sources/Extensions/Watch/Assist/Views/ChatBubbleView.swift

@@ -8,7 +8,7 @@ struct ChatBubbleView: View {
         Group {
             if item.itemType == .typing {
                 AssistTypingIndicator()
-                    .padding(.vertical, Spaces.half)
+                    .padding(.vertical, DesignSystem.Spaces.half)
             } else {
                 Text(item.markdown)
             }
@@ -44,7 +44,7 @@ struct ChatBubbleView: View {
         case .info:
             .secondary
         default:
-            .primary
+            .black
         }
     }
 

Sources/Extensions/Watch/Assist/WatchAssistView.swift

@@ -2,6 +2,23 @@ import Shared
 import SwiftUI
 
 struct WatchAssistView: View {
+    // MARK: - Constants
+
+    private enum Constants {
+        static let micButtonFontSize: CGFloat = 11
+        static let micButtonOffsetY: CGFloat = 22
+        static let micRecordingFontSizeLarge: CGFloat = 80
+        static let micRecordingFontSizeSmall: CGFloat = 50
+        static let micButtonProgressScale: CGFloat = 1.5
+        static let micButtonProgressHeight: CGFloat = 40
+        static let micButtonProgressPadding: CGFloat = DesignSystem.Spaces.half
+        static let micRecordingTextFontSize: CGFloat = 11
+        static let emptyStateImageWidth: CGFloat = 70
+        static let emptyStateImageHeight: CGFloat = 70
+        static let emptyStateImageOpacity: Double = 0.5
+        static let progressViewScale: CGFloat = 2
+    }
+
     @StateObject private var viewModel: WatchAssistViewModel
     @State private var isInitialAppearance = true
     private let progressViewId = "progressViewId"
@@ -81,7 +98,7 @@ struct WatchAssistView: View {
 
     private var volumeButton: some View {
         NavigationLink(destination: VolumeView()) {
-            Image(systemName: "speaker.wave.2.fill")
+            Image(systemSymbol: .speakerWave2Fill)
         }
     }
 
@@ -91,7 +108,8 @@ struct WatchAssistView: View {
             .opacity(viewModel.state == .recording ? 1 : 0)
         ProgressView()
             .progressViewStyle(.circular)
-            .scaleEffect(.init(floatLiteral: 2))
+            // This could also be achieved using .controlSize(.large) on watchOS 9+
+            .scaleEffect(Constants.progressViewScale)
             .ignoresSafeArea()
             .frame(maxWidth: .infinity, maxHeight: .infinity)
             .modify {
@@ -107,19 +125,19 @@ struct WatchAssistView: View {
     @ViewBuilder
     private var micButton: some View {
         if ![.loading, .recording].contains(viewModel.state), !viewModel.showChatLoader {
-            HStack(spacing: Spaces.one) {
+            HStack(spacing: DesignSystem.Spaces.one) {
                 if viewModel.assistService.deviceReachable {
                     Text(verbatim: L10n.Assist.Watch.MicButton.title)
-                    Image(systemName: "mic.fill")
+                    Image(systemSymbol: .micFill)
                 } else {
-                    Image(systemName: "iphone.slash")
+                    Image(systemSymbol: .iphoneSlash)
                         .foregroundStyle(.red)
                         .padding(.trailing)
                 }
             }
-            .font(.system(size: 11))
+            .font(.system(size: Constants.micButtonFontSize))
             .foregroundStyle(.gray)
-            .offset(y: 22)
+            .offset(y: Constants.micButtonOffsetY)
         }
     }
 
@@ -135,11 +153,11 @@ struct WatchAssistView: View {
     private var micButtonProgressView: some View {
         ProgressView()
             .progressViewStyle(.circular)
-            .scaleEffect(.init(floatLiteral: 1.5))
+            // This could also be achieved using .controlSize(.large) on watchOS 9+
+            .scaleEffect(Constants.micButtonProgressScale)
             .frame(maxWidth: .infinity, alignment: .center)
-            .progressViewStyle(.linear)
-            .frame(height: 40)
-            .padding(Spaces.half)
+            .frame(height: Constants.micButtonProgressHeight)
+            .padding(Constants.micButtonProgressPadding)
             .modify {
                 if #available(watchOS 10, *) {
                     $0.background(.regularMaterial)
@@ -158,7 +176,7 @@ struct WatchAssistView: View {
             VStack(spacing: .zero) {
                 if #available(watchOS 10.0, *) {
                     Image(systemSymbol: .waveformCircleFill)
-                        .font(.system(size: 80))
+                        .font(.system(size: Constants.micRecordingFontSizeLarge))
                         .symbolEffect(
                             .variableColor.cumulative.dimInactiveLayers.nonReversing,
                             options: .repeating,
@@ -168,10 +186,10 @@ struct WatchAssistView: View {
                         .foregroundStyle(.white, Color.haPrimary)
                 } else {
                     Image(systemSymbol: .waveformCircleFill)
-                        .font(.system(size: 50))
+                        .font(.system(size: Constants.micRecordingFontSizeSmall))
                 }
                 Text(verbatim: L10n.Watch.Assist.Button.Recording.title)
-                    .font(.system(size: 11))
+                    .font(.system(size: Constants.micRecordingTextFontSize))
                     .foregroundStyle(.gray)
                 Text(verbatim: L10n.Watch.Assist.Button.SendRequest.title)
                     .font(.footnote.bold())
@@ -194,7 +212,7 @@ struct WatchAssistView: View {
         ScrollViewReader { proxy in
             ScrollView {
                 // Using LazyVStack instead of List to avoid List minimum row height
-                LazyVStack(spacing: Spaces.one) {
+                LazyVStack(spacing: DesignSystem.Spaces.one) {
                     ForEach(viewModel.chatItems, id: \.id) { item in
                         ChatBubbleView(item: item)
                     }
@@ -221,12 +239,12 @@ struct WatchAssistView: View {
             Image(uiImage: Asset.casitaDark.image)
                 .resizable()
                 .frame(
-                    width: 70,
-                    height: 70,
+                    width: Constants.emptyStateImageWidth,
+                    height: Constants.emptyStateImageHeight,
                     alignment: .center
                 )
                 .aspectRatio(contentMode: .fit)
-                .opacity(0.5)
+                .opacity(Constants.emptyStateImageOpacity)
             Spacer()
         }
         .listRowBackground(Color.clear)