Restyle Quick Actions sheet to match DevTools drawer design

Replace TabView with segmented Picker in principal toolbar position,
and remove opaque systemBackground to let sheet material show through.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: mcintyre94

CLAUDE.md

@@ -124,9 +124,9 @@ The app runs on iPhone, iPad, and Mac (Designed for iPad). Keep all three in min
 Two sheet patterns in use — match the right one:
 
 - **Form sheets** (data entry, e.g. New Sprite, New Checkpoint): `NavigationStack` > `Form` > `.navigationTitle` + `.navigationBarTitleDisplayMode(.inline)` + `.toolbar` with text Cancel / action-name buttons (e.g. "Cancel" / "Create"). Keep text labels — they're more informative than icons for actions with consequences.
-- **Utility/panel sheets** (e.g. Quick Actions): `NavigationStack` > custom content > `.navigationTitle` + `.navigationBarTitleDisplayMode(.inline)` + `Image(systemName: "xmark")` in `.cancellationAction`. `TabView` is fine for tabs here. Note: if you ever need a transparent sheet background, `TabView` will block it — its UIKit-backed view hierarchy ignores SwiftUI `.background(.clear)` and would need replacing with a custom VStack + HStack tab bar.
+- **Utility/panel sheets** (e.g. Quick Actions): `NavigationStack` > custom content > `.navigationBarTitleDisplayMode(.inline)` + `Image(systemName: "xmark")` in `.cancellationAction`. For tabs, use a segmented `Picker` in `ToolbarItem(placement: .principal)` + `Group { switch selectedTab }` for content — do **not** use `TabView`. TabView consumes bottom bar space, breaks transparent backgrounds, and its swipe gesture conflicts with any horizontal scroll content inside tabs.
 
-Both sheet types use opaque `Color(.systemBackground)` throughout — do **not** use material/transparent backgrounds on sheets. Materials suit bars and floating elements (popovers, context menus), not sheets.
+Both sheet types use `.background(.clear)` on inner content views so the system sheet material shows through. Do **not** force `Color(.systemBackground)` on sheet content — let the sheet's natural material handle the background.
 
 Avoid sandwiching a fixed element (e.g. input bar) between two `Divider`s. A divider above the input bar separating scrollable content from a fixed action area is standard; a second one below it is redundant.
 

Wisp/Views/QuickActions/BashQuickView.swift

@@ -138,7 +138,7 @@ struct BashQuickView: View {
                 }
             }
         }
-        .background(Color(.systemBackground))
+        .background(.clear)
     }
 }
 

Wisp/Views/QuickActions/QuickActionsView.swift

@@ -1,37 +1,44 @@
 import SwiftUI
 
+private enum QuickActionsTab {
+    case chat, bash
+}
+
 struct QuickActionsView: View {
     @Environment(SpritesAPIClient.self) private var apiClient
     @Environment(\.dismiss) private var dismiss
     let viewModel: QuickActionsViewModel
     var insertCallback: ((String) -> Void)? = nil
     var startChatCallback: ((String) -> Void)? = nil
 
-    @State private var selectedTab = 0
+    @State private var selectedTab: QuickActionsTab = .chat
 
     var body: some View {
         NavigationStack {
-            tabs
-                .navigationTitle(selectedTab == 0 ? "Quick Chat" : "Bash")
-                .navigationBarTitleDisplayMode(.inline)
-                .toolbar {
-                    ToolbarItem(placement: .cancellationAction) {
-                        Button(action: handleDone) {
-                            Image(systemName: "xmark")
-                        }
+            Group {
+                switch selectedTab {
+                case .chat:
+                    QuickChatView(viewModel: viewModel.quickChatViewModel)
+                case .bash:
+                    bashTab
+                }
+            }
+            .navigationBarTitleDisplayMode(.inline)
+            .toolbar {
+                ToolbarItem(placement: .principal) {
+                    Picker("Tab", selection: $selectedTab) {
+                        Text("Quick Chat").tag(QuickActionsTab.chat)
+                        Text("Bash").tag(QuickActionsTab.bash)
                     }
+                    .pickerStyle(.segmented)
+                    .frame(width: 200)
                 }
-        }
-    }
-
-    private var tabs: some View {
-        TabView(selection: $selectedTab) {
-            QuickChatView(viewModel: viewModel.quickChatViewModel)
-                .tabItem { Label("Quick Chat", systemImage: "bubble.left") }
-                .tag(0)
-            bashTab
-                .tabItem { Label("Bash", systemImage: "terminal") }
-                .tag(1)
+                ToolbarItem(placement: .cancellationAction) {
+                    Button(action: handleDone) {
+                        Image(systemName: "xmark")
+                    }
+                }
+            }
         }
     }
 

Wisp/Views/QuickActions/QuickChatView.swift

@@ -87,7 +87,7 @@ struct QuickChatView: View {
             .padding(.vertical, 8)
             .padding(.bottom, isRunningOnMac ? 12 : 0)
         }
-        .background(Color(.systemBackground))
+        .background(.clear)
     }
 }