From 5232fe7ea59c9dbd79fee239aef177e6d4de6c2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bruno=20Pantale=C3=A3o=20Gon=C3=A7alves?=
 <5808343+bgoncal@users.noreply.github.com>
Date: Thu, 23 Oct 2025 15:17:24 +0200
Subject: [PATCH] Fix watch home view header buttons visibility (#3908)

<!-- 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 -->
Fixes the visibility and layout of the header buttons in the Watch Home
view, ensuring they display correctly across watchOS versions.

## Screenshots
<!-- If this is a user-facing change not in the frontend, please include
screenshots in light and dark mode. -->
<img width="416" height="496" alt="Simulator Screenshot - Watch with
iPhone - 2025-10-23 at 13 16 55"
src="https://github.com/user-attachments/assets/08e2ad70-4cf9-4e29-94c1-f0871f625fbc"
/>



## 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. -->
---
 .../CircularGlassOrLegacyBackground.swift     |  8 +-
 .../Extensions/Watch/Home/WatchHomeView.swift | 84 ++++++++-----------
 .../Shared/DesignSystem/DesignSystem.swift    |  6 +-
 3 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/Sources/Extensions/Watch/Home/CircularGlassOrLegacyBackground.swift b/Sources/Extensions/Watch/Home/CircularGlassOrLegacyBackground.swift
index 60156ec68..cae9ef0ae 100644
--- a/Sources/Extensions/Watch/Home/CircularGlassOrLegacyBackground.swift
+++ b/Sources/Extensions/Watch/Home/CircularGlassOrLegacyBackground.swift
@@ -3,13 +3,15 @@ import Shared
 import SwiftUI
 
 private struct CircularGlassOrLegacyBackgroundModifier: ViewModifier {
+    let tint: Color?
+
     func body(content: Content) -> some View {
         Group {
             if #available(watchOS 26.0, *) {
                 content
                     .frame(width: 30, height: 30)
                     .padding(DesignSystem.Spaces.half)
-                    .glassEffect(.clear.interactive(), in: .circle)
+                    .glassEffect(.clear.interactive().tint(tint), in: .circle)
             } else {
                 content
                     .padding(DesignSystem.Spaces.half)
@@ -22,8 +24,8 @@ private struct CircularGlassOrLegacyBackgroundModifier: ViewModifier {
 
 extension View {
     /// Applies a circular glass effect on watchOS 26+, otherwise falls back to padding + black background.
-    func circularGlassOrLegacyBackground() -> some View {
-        modifier(CircularGlassOrLegacyBackgroundModifier())
+    func circularGlassOrLegacyBackground(tint: Color? = nil) -> some View {
+        modifier(CircularGlassOrLegacyBackgroundModifier(tint: tint))
     }
 }
 
diff --git a/Sources/Extensions/Watch/Home/WatchHomeView.swift b/Sources/Extensions/Watch/Home/WatchHomeView.swift
index cb738a009..8e258737a 100644
--- a/Sources/Extensions/Watch/Home/WatchHomeView.swift
+++ b/Sources/Extensions/Watch/Home/WatchHomeView.swift
@@ -7,7 +7,7 @@ struct WatchHomeView: View {
     @State private var showAssist = false
 
     var body: some View {
-        navigation
+        content
             ._statusBarHidden(true)
             .onReceive(NotificationCenter.default.publisher(for: AssistDefaultComplication.launchNotification)) { _ in
                 showAssist = true
@@ -40,29 +40,6 @@ struct WatchHomeView: View {
             }
     }
 
-    @ViewBuilder
-    private var navigation: some View {
-        if #available(watchOS 10, *) {
-            watchOS10Content
-        } else {
-            olderWatchOSContent
-        }
-    }
-
-    @available(watchOS 10, *)
-    private var watchOS10Content: some View {
-        NavigationStack {
-            content
-                .persistentSystemOverlays(.hidden)
-        }
-    }
-
-    private var olderWatchOSContent: some View {
-        NavigationView {
-            content
-        }
-    }
-
     @ViewBuilder
     private var content: some View {
         List {
@@ -97,18 +74,11 @@ struct WatchHomeView: View {
     private var listHeader: some View {
         HStack {
             navReloadButton
-            Spacer()
-            if viewModel.isLoading {
-                toolbarLoadingState
-            }
-            if viewModel.showAssist {
-                Spacer()
-                assistHeaderButton
-            } else {
-                Spacer()
-            }
+            toolbarLoadingState
+            assistHeaderButton
         }
         .listRowBackground(Color.clear)
+        .padding(.top, DesignSystem.Spaces.one)
     }
 
     @ViewBuilder
@@ -133,16 +103,24 @@ struct WatchHomeView: View {
         }
     }
 
+    @ViewBuilder
     private var assistHeaderButton: some View {
-        assistButton
-            .modify { view in
-                if #available(watchOS 11, *) {
-                    view.handGestureShortcut(.primaryAction)
-                } else {
-                    view
+        if viewModel.showAssist {
+            assistButton
+                .modify { view in
+                    if #available(watchOS 11, *) {
+                        view.handGestureShortcut(.primaryAction)
+                    } else {
+                        view
+                    }
                 }
-            }
-            .circularGlassOrLegacyBackground()
+                .circularGlassOrLegacyBackground(tint: .haPrimary)
+        } else {
+            // Reserve space to keep the loader centered
+            Rectangle()
+                .foregroundStyle(Color.clear)
+                .frame(width: 44, height: 44)
+        }
     }
 
     private var assistButton: some View {
@@ -182,9 +160,15 @@ struct WatchHomeView: View {
         .circularGlassOrLegacyBackground()
     }
 
+    @ViewBuilder
     private var toolbarLoadingState: some View {
-        loadingState
-            .circularGlassOrLegacyBackground()
+        HStack {
+            if viewModel.isLoading {
+                loadingState
+                    .circularGlassOrLegacyBackground()
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .center)
     }
 
     private var loadingState: some View {
@@ -201,10 +185,14 @@ struct WatchHomeView: View {
     }
 
     private var appVersion: some View {
-        Text(verbatim: AppConstants.version)
-            .listRowBackground(Color.clear)
-            .foregroundStyle(.secondary)
-            .frame(maxWidth: .infinity, alignment: .center)
+        VStack(alignment: .center, spacing: .zero) {
+            Text(verbatim: AppConstants.version)
+            Text(verbatim: "(\(AppConstants.build))")
+                .font(DesignSystem.Font.caption3)
+        }
+        .frame(maxWidth: .infinity, alignment: .center)
+        .listRowBackground(Color.clear)
+        .foregroundStyle(.secondary)
     }
 
     @ViewBuilder
diff --git a/Sources/Shared/DesignSystem/DesignSystem.swift b/Sources/Shared/DesignSystem/DesignSystem.swift
index 5a7b77609..da260dfae 100644
--- a/Sources/Shared/DesignSystem/DesignSystem.swift
+++ b/Sources/Shared/DesignSystem/DesignSystem.swift
@@ -14,18 +14,20 @@ public enum DesignSystem {
         public static let title3: SwiftUICore.Font = .title3
         /// Headline (17pt, semibold)
         public static let headline: SwiftUICore.Font = .headline
-        /// Subheadline (15pt)
-        public static let subheadline: SwiftUICore.Font = .subheadline
         /// Body (17pt)
         public static let body: SwiftUICore.Font = .body
         /// Callout (16pt)
         public static let callout: SwiftUICore.Font = .callout
+        /// Subheadline (15pt)
+        public static let subheadline: SwiftUICore.Font = .subheadline
         /// Footnote (13pt)
         public static let footnote: SwiftUICore.Font = .footnote
         /// Caption (12pt)
         public static let caption: SwiftUICore.Font = .caption
         /// Caption2 (11pt)
         public static let caption2: SwiftUICore.Font = .caption2
+        /// Caption3 (10pt)
+        public static let caption3: SwiftUICore.Font = .system(size: 10)
     }
 
     // 8-point system