Restyle tab bar ornament with Liquid Glass and crossfade tabs

Briefly tried switching the main tab bar to a native visionOS TabView,
but it had two unfixable issues for our use case: tab changes triggered
a window-wide scale animation, and the leading tab bar ornament was
occluded by protruding diorama thumbnail foreground layers (the diorama
parallax requires +z, and a `.cornerRadius().clipped()` thumbnail can't
be shifted back without the flat layer getting culled).

Sticking with a custom ornament instead, but refreshed to look closer
to native:

- Liquid Glass bar (`.glassBackgroundEffect()`) anchored at `.bottomFront`
  with extra top padding so it sits clear of any forward-popped diorama
- Selected tab renders as a `.thinMaterial` capsule pill with a hairline
  border and inline label, replacing the flat blue square
- `.hoverEffect(.highlight)` on every tab so gaze targeting is legible
  for inactive controls, not just the selected one
- `.help(tab.rawValue)` adds a hover tooltip per tab
- Tab content crossfades via `.id(selectedTab)` + opacity transition
  instead of hard-cutting

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: illixion

SpatialStash/SpatialStash/Views/ContentView.swift

@@ -13,24 +13,29 @@ struct ContentView: View {
     @State private var windowModel = MainWindowModel()
 
     var body: some View {
-        Group {
-            switch windowModel.selectedTab {
-            case .pictures:
-                PicturesTabView()
-            case .videos:
-                VideosTabView()
-            case .local:
-                LocalTabView()
-            case .filters:
-                FiltersTabView()
-            case .settings:
-                SettingsTabView()
-            case .remote:
-                RemoteTabView()
-            case .console:
-                DebugConsoleView()
+        ZStack {
+            Group {
+                switch windowModel.selectedTab {
+                case .pictures:
+                    PicturesTabView()
+                case .videos:
+                    VideosTabView()
+                case .local:
+                    LocalTabView()
+                case .filters:
+                    FiltersTabView()
+                case .settings:
+                    SettingsTabView()
+                case .remote:
+                    RemoteTabView()
+                case .console:
+                    DebugConsoleView()
+                }
             }
+            .id(windowModel.selectedTab)
+            .transition(.opacity)
         }
+        .animation(.smooth(duration: 0.25), value: windowModel.selectedTab)
         .environment(appModel)
         .environment(windowModel)
         .ornament(

SpatialStash/SpatialStash/Views/TabBarOrnament.swift

@@ -25,41 +25,79 @@ struct TabBarOrnament: View {
     }
 
     var body: some View {
-        HStack(spacing: 24) {
+        HStack(spacing: 8) {
             ForEach(visibleTabs) { tab in
-                Button {
-                    // Track last content tab for filter context
-                    if tab == .pictures || tab == .videos {
-                        windowModel.lastContentTab = tab
-                    }
+                TabBarButton(
+                    tab: tab,
+                    isSelected: windowModel.selectedTab == tab,
+                    action: { select(tab) }
+                )
+            }
+        }
+        .padding(.horizontal, 12)
+        .padding(.vertical, 8)
+        .glassBackgroundEffect()
+        // Sit below the window's bottom edge so a protruding diorama
+        // foreground layer doesn't visually clip the tab bar.
+        .padding(.top, 20)
+    }
+
+    private func select(_ tab: Tab) {
+        if tab == .pictures || tab == .videos {
+            windowModel.lastContentTab = tab
+        }
+        if tab == .local && windowModel.selectedTab == .local {
+            windowModel.localTabReselected += 1
+        } else {
+            windowModel.selectedTab = tab
+        }
+    }
+}
 
-                    // Special handling for Local tab re-selection
-                    if tab == .local && windowModel.selectedTab == .local {
-                        windowModel.localTabReselected += 1
-                    } else {
-                        windowModel.selectedTab = tab
-                    }
-                } label: {
-                    VStack(spacing: 4) {
-                        Image(systemName: tab.systemImage)
-                            .font(.title2)
-                        Text(tab.rawValue)
-                            .font(.caption)
-                    }
-                    .foregroundColor(windowModel.selectedTab == tab ? .white : .secondary)
-                    .padding(.horizontal, 16)
-                    .padding(.vertical, 8)
-                    .background(
-                        windowModel.selectedTab == tab
-                            ? Color.accentColor.opacity(0.3)
-                            : Color.clear
-                    )
-                    .cornerRadius(8)
+private struct TabBarButton: View {
+    let tab: Tab
+    let isSelected: Bool
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            HStack(spacing: 8) {
+                Image(systemName: tab.systemImage)
+                    .font(.title3)
+                if isSelected {
+                    Text(tab.rawValue)
+                        .font(.callout)
+                        .fontWeight(.medium)
+                        .transition(.opacity)
                 }
-                .buttonStyle(.plain)
             }
+            .frame(minWidth: 44, minHeight: 32)
+            .padding(.horizontal, isSelected ? 14 : 10)
+            .padding(.vertical, 8)
+            .contentShape(Capsule())
         }
-        .padding()
-        .glassBackgroundEffect()
+        .buttonStyle(TabBarButtonStyle(isSelected: isSelected))
+        .hoverEffect(.highlight)
+        .help(tab.rawValue)
+        .animation(.smooth(duration: 0.22), value: isSelected)
+    }
+}
+
+private struct TabBarButtonStyle: ButtonStyle {
+    let isSelected: Bool
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .foregroundStyle(isSelected ? .primary : .secondary)
+            .background {
+                if isSelected {
+                    Capsule()
+                        .fill(.thinMaterial)
+                        .overlay(
+                            Capsule()
+                                .strokeBorder(.white.opacity(0.18), lineWidth: 0.5)
+                        )
+                }
+            }
     }
 }