Sybil-2/ios/Packages/Sybil/Sources/Sybil/SybilWorkspaceView.swift

import Observation
import SwiftUI

struct SybilWorkspaceView: View {
    @Bindable var viewModel: SybilViewModel
    @FocusState private var composerFocused: Bool

    private var isSettingsSelected: Bool {
        if case .settings = viewModel.selectedItem {
            return true
        }
        return false
    }

    var body: some View {
        VStack(spacing: 0) {
            header

            Divider()
                .overlay(SybilTheme.border)

            Group {
                if isSettingsSelected {
                    SybilSettingsView(viewModel: viewModel)
                } else if viewModel.isSearchMode {
                    SybilSearchResultsView(
                        search: viewModel.selectedSearch,
                        isLoading: viewModel.isLoadingSelection,
                        isRunning: viewModel.isSending
                    )
                } else {
                    SybilChatTranscriptView(
                        messages: viewModel.displayedMessages,
                        isLoading: viewModel.isLoadingSelection,
                        isSending: viewModel.isSending
                    )
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)

            if viewModel.showsComposer {
                Divider()
                    .overlay(SybilTheme.border)
                composerBar
            }
        }
        .navigationTitle(viewModel.selectedTitle)
        .background(SybilTheme.background)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .onChange(of: viewModel.isSending) { _, isSending in
            if !isSending, viewModel.showsComposer {
                composerFocused = true
            }
        }
    }

    private var header: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack(alignment: .top, spacing: 12) {
                Spacer()

                if !viewModel.isSearchMode && !isSettingsSelected {
                    providerControls
                } else if viewModel.isSearchMode {
                    Label("Search mode", systemImage: "globe")
                        .font(.caption.weight(.medium))
                        .foregroundStyle(SybilTheme.textMuted)
                        .padding(.horizontal, 10)
                        .padding(.vertical, 7)
                        .background(
                            Capsule()
                                .fill(SybilTheme.surface)
                                .overlay(
                                    Capsule()
                                        .stroke(SybilTheme.border, lineWidth: 1)
                                )
                        )
                }
            }

            if let error = viewModel.errorMessage {
                Text(error)
                    .font(.footnote)
                    .foregroundStyle(SybilTheme.danger)
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 12)
    }

    private var providerControls: some View {
        HStack(spacing: 8) {
            Menu {
                ForEach(Provider.allCases, id: \.self) { candidate in
                    Button(candidate.displayName) {
                        viewModel.setProvider(candidate)
                    }
                }
            } label: {
                Label(viewModel.provider.displayName, systemImage: "chevron.down")
                    .labelStyle(.titleAndIcon)
                    .font(.caption.weight(.medium))
                    .foregroundStyle(SybilTheme.text)
                    .padding(.horizontal, 10)
                    .padding(.vertical, 7)
                    .background(
                        RoundedRectangle(cornerRadius: 10)
                            .fill(SybilTheme.surface)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(SybilTheme.border, lineWidth: 1)
                            )
                    )
            }

            Menu {
                ForEach(viewModel.providerModelOptions, id: \.self) { model in
                    Button(model) {
                        viewModel.setModel(model)
                    }
                }
            } label: {
                Label(viewModel.model, systemImage: "chevron.down")
                    .labelStyle(.titleAndIcon)
                    .font(.caption.weight(.medium))
                    .foregroundStyle(SybilTheme.text)
                    .lineLimit(1)
                    .padding(.horizontal, 10)
                    .padding(.vertical, 7)
                    .background(
                        RoundedRectangle(cornerRadius: 10)
                            .fill(SybilTheme.surface)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(SybilTheme.border, lineWidth: 1)
                            )
                    )
            }
        }
    }

    private var composerBar: some View {
        HStack(alignment: .bottom, spacing: 10) {
            TextField(
                viewModel.isSearchMode ? "Search the web" : "Message Sybil",
                text: $viewModel.composer,
                axis: .vertical
            )
            .focused($composerFocused)
            .textInputAutocapitalization(.sentences)
            .autocorrectionDisabled(false)
            .lineLimit(1 ... 6)
            .submitLabel(.send)
            .onSubmit {
                Task {
                    await viewModel.sendComposer()
                }
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 10)
            .background(
                RoundedRectangle(cornerRadius: 12)
                    .fill(SybilTheme.surface)
                    .overlay(
                        RoundedRectangle(cornerRadius: 12)
                            .stroke(SybilTheme.border, lineWidth: 1)
                    )
            )
            .foregroundStyle(SybilTheme.text)

            Button {
                Task {
                    await viewModel.sendComposer()
                }
            } label: {
                Image(systemName: viewModel.isSearchMode ? "magnifyingglass" : "arrow.up")
                    .font(.headline.weight(.semibold))
                    .frame(width: 40, height: 40)
                    .background(
                        Circle()
                            .fill(viewModel.composer.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || viewModel.isSending ? SybilTheme.surface : SybilTheme.primary)
                    )
                    .foregroundStyle(viewModel.composer.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || viewModel.isSending ? SybilTheme.textMuted : SybilTheme.text)
            }
            .buttonStyle(.plain)
            .disabled(viewModel.composer.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || viewModel.isSending)
        }
        .padding(.horizontal, 14)
        .padding(.vertical, 12)
        .background(SybilTheme.background)
    }
}