Lists and selection.

import TerminalUI
import TerminalUICLI
import Observation

@main
struct DeployApp: App {
  var body: some Scene {
    WindowGroup("Deploys") {
      DeployBrowser()
    }
  }
}

struct Deploy: Identifiable, Hashable {
  let id: String
  let environment: String
  let status: String
  let owner: String
  let updates: [Deploy]   // for tree expansion below
}

@Observable
final class DeployStore {
  var deploys: [Deploy] = sampleDeploys()
}

struct DeployBrowser: View {
  @State private var store = DeployStore()
  @State private var selection: Deploy.ID?

  var body: some View {
    HStack(spacing: 1) {
      // 1. List with single selection. The binding is to an optional ID;
      //    arrow keys move it, Enter activates the row's primary action.
      List(store.deploys, selection: $selection) { deploy in
        LabeledContent(deploy.environment, value: deploy.status)
      }
      .frame(width: 32)

      Divider()

      // 2. Detail panel reads from the selection. The selection drives
      //    invalidation; this view rerenders when selection changes.
      DeployDetail(deploy: store.deploys.first { $0.id == selection })
    }
  }
}

struct DeployDetail: View {
  let deploy: Deploy?

  var body: some View {
    if let deploy {
      VStack(alignment: .leading, spacing: 0) {
        Text(deploy.id).bold()
        LabeledContent("Status", value: deploy.status)
        LabeledContent("Owner", value: deploy.owner)
        Divider()
        // 3. Hierarchical: same data shape, expressed as an outline.
        OutlineGroup(deploy.updates, children: \.updatesIfNonEmpty) { node in
          Text(node.id)
        }
      }
    } else {
      Text("Select a deploy.").foregroundStyle(.secondary)
    }
  }
}

extension Deploy {
  // OutlineGroup needs nil for leaves to stop expansion.
  var updatesIfNonEmpty: [Deploy]? {
    updates.isEmpty ? nil : updates
  }
}

func sampleDeploys() -> [Deploy] { ... }

import TerminalUI

struct DeployTable: View {
  let deploys: [Deploy]
  @State private var selection: Set<Deploy.ID> = []

  var body: some View {
    // Multi-selection with Set<ID>.
    Table(deploys, selection: $selection) {
      TableColumn("Env", value: \.environment)
      TableColumn("Status", value: \.status)
      TableColumn("Owner", value: \.owner)
    }
  }
}