feat: polish scenarios and stabilize keyboard layout height
Add preset-driven polish scenarios (Settings, onboarding, ScenarioChip) with ScenarioPrompt and style directives; drive keyboard height from content (240pt) and use viewIsAppearing encapsulated-height offset for smoother keyboard switches; remove redundant StatusBadge and hide system dictation via hasDictationKey.
This commit is contained in:
Rocky
@@ -3,16 +3,17 @@
|
||||
//
|
||||
// Typeless-inspired keyboard surface. The keyboard is laid out in three
|
||||
// vertical bands, but the entire height is reserved for us — we set
|
||||
// `inputView.allowsSelfSizing = true` in the view controller so SwiftUI's
|
||||
// frame is honoured, and we add safe-area insets at the top and bottom so
|
||||
// the system Spotlight / home-indicator chrome never clips our controls.
|
||||
// `KeyboardViewController` drives height on `view` (priority 999) and mirrors
|
||||
// `KeyboardLayoutMetrics.totalHeight` in SwiftUI — see presentation offset
|
||||
// in `applyPresentationHeightOffset()`.
|
||||
//
|
||||
// ┌───────────────────────────────────────────┐
|
||||
// │ [polish] [中] ● ⚙ │ ← top: ~38 pt (+20%)
|
||||
// │ [polish] [中] ⚙ │ ← header band (top)
|
||||
// │ (transcript preview) │
|
||||
// │ │
|
||||
// │ (⌫) ◯ mic (↩) │ ← action row: circular
|
||||
// │ (space) │ flanking buttons
|
||||
// │ ┊ │
|
||||
// │ (⌫) ◯ mic (↩) │ ← action cluster:
|
||||
// │ (space) │ centred below header
|
||||
// │ ┊ │
|
||||
// └───────────────────────────────────────────┘
|
||||
|
||||
import SwiftUI
|
||||
@@ -24,8 +25,33 @@ private enum KeyboardLayoutMetrics {
|
||||
static let sideSpaceBarWidth: CGFloat = 19
|
||||
static let micFlankMinSpacing: CGFloat = 36
|
||||
static let sideActionStackSpacing: CGFloat = 16
|
||||
/// Gap between the top chip row and the transcript / hint line (4 pt → 8 pt, +100%).
|
||||
static let topBarToTranscriptSpacing: CGFloat = Spacing.xs
|
||||
/// Outer inset for delete / return·space from screen edges (8 pt → 24 pt, +200%).
|
||||
static let sideActionHorizontalInset: CGFloat = Spacing.xs * 3
|
||||
|
||||
// MARK: - Content-driven keyboard height (single source of truth)
|
||||
static let outerPaddingTop: CGFloat = 2
|
||||
static let outerPaddingBottom: CGFloat = 6
|
||||
static let topBarHeight: CGFloat = 38
|
||||
static let transcriptLineHeight: CGFloat = 22
|
||||
static let actionClusterHeight: CGFloat = 132
|
||||
/// Fixed breathing room above/below the mic row (not flexible Spacers).
|
||||
static let actionClusterVerticalGap: CGFloat = Spacing.md
|
||||
|
||||
static var headerBandHeight: CGFloat {
|
||||
topBarHeight + topBarToTranscriptSpacing + transcriptLineHeight
|
||||
}
|
||||
|
||||
/// 2 + 68 + 16 + 132 + 16 + 6 = 240 pt
|
||||
static var totalHeight: CGFloat {
|
||||
outerPaddingTop
|
||||
+ headerBandHeight
|
||||
+ actionClusterVerticalGap
|
||||
+ actionClusterHeight
|
||||
+ actionClusterVerticalGap
|
||||
+ outerPaddingBottom
|
||||
}
|
||||
}
|
||||
|
||||
public struct KeyboardRootView: View {
|
||||
@@ -37,11 +63,9 @@ public struct KeyboardRootView: View {
|
||||
self.state = state
|
||||
}
|
||||
|
||||
/// Total keyboard height. We set the same value as a height-anchor
|
||||
/// constraint in the view controller so the host UIInputView picks
|
||||
/// it up.
|
||||
static let totalHeight: CGFloat = 280
|
||||
private static let topBarHeight: CGFloat = 38
|
||||
/// Content-driven keyboard height; mirrored on `UIInputViewController.view`
|
||||
/// in `KeyboardViewController` (see `KeyboardLayoutMetrics.totalHeight`).
|
||||
static let totalHeight: CGFloat = KeyboardLayoutMetrics.totalHeight
|
||||
|
||||
private var palette: ThemePalette {
|
||||
colorScheme == .dark ? Palette.dark : Palette.light
|
||||
@@ -49,14 +73,19 @@ public struct KeyboardRootView: View {
|
||||
|
||||
public var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
topBar
|
||||
.frame(height: Self.topBarHeight)
|
||||
headerBand
|
||||
|
||||
centreArea
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
Color.clear
|
||||
.frame(height: KeyboardLayoutMetrics.actionClusterVerticalGap)
|
||||
|
||||
micActionRow
|
||||
.frame(height: KeyboardLayoutMetrics.actionClusterHeight)
|
||||
|
||||
Color.clear
|
||||
.frame(height: KeyboardLayoutMetrics.actionClusterVerticalGap)
|
||||
}
|
||||
.padding(.top, 4)
|
||||
.padding(.bottom, 6)
|
||||
.padding(.top, KeyboardLayoutMetrics.outerPaddingTop)
|
||||
.padding(.bottom, KeyboardLayoutMetrics.outerPaddingBottom)
|
||||
// 透明背景：让系统键盘 chrome 透出，不自行铺色（深浅模式一致）。
|
||||
.background(Color.clear)
|
||||
.frame(height: Self.totalHeight)
|
||||
@@ -64,6 +93,26 @@ public struct KeyboardRootView: View {
|
||||
.environment(\.themePalette, palette)
|
||||
}
|
||||
|
||||
/// Top chip row + transcript / hint line.
|
||||
private var headerBand: some View {
|
||||
VStack(spacing: KeyboardLayoutMetrics.topBarToTranscriptSpacing) {
|
||||
topBar
|
||||
.frame(height: KeyboardLayoutMetrics.topBarHeight)
|
||||
|
||||
TranscriptLine(
|
||||
phase: state.phase,
|
||||
transcript: state.lastTranscript,
|
||||
flowSessionActive: state.flowSessionActive,
|
||||
isLocalEngine: state.isLocalEngine,
|
||||
localModelsReady: state.localModelsReady,
|
||||
localModelsLoaded: state.localModelsLoaded,
|
||||
openSettings: state.openSettings,
|
||||
startFlowSession: state.startFlowSession
|
||||
)
|
||||
.frame(height: KeyboardLayoutMetrics.transcriptLineHeight)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Top bar
|
||||
|
||||
private var topBar: some View {
|
||||
@@ -73,22 +122,20 @@ public struct KeyboardRootView: View {
|
||||
} else {
|
||||
CloudEngineChip()
|
||||
}
|
||||
if state.isPolishScenarioChipVisible {
|
||||
ScenarioChip(state: state)
|
||||
}
|
||||
LocaleChip(localeId: state.localeId) { newId in
|
||||
state.setLocale(newId)
|
||||
}
|
||||
// v0.2.1: translation chip — sits next to the locale picker
|
||||
// and doubles as both the on/off switch and the target-
|
||||
// language picker (Menu pattern matches LocaleChip so the
|
||||
// top bar stays visually consistent).
|
||||
// v0.2.1 final review: only render the chip when translation
|
||||
// is actually on. Off-by-default keeps the top bar compact
|
||||
// for users who don't need translation; the menu still lives
|
||||
// in onboarding so the feature is discoverable.
|
||||
if state.translationEnabled {
|
||||
// v0.3: always show the translation chip when the active
|
||||
// engine can run the cloud LLM step — off-by-default keeps
|
||||
// the menu reachable so the user can pick a target language
|
||||
// without opening Settings.
|
||||
if state.isTranslationChipVisible {
|
||||
TranslationChip(state: state)
|
||||
}
|
||||
Spacer(minLength: 0)
|
||||
StatusBadge(phase: state.phase, onDeviceSupported: state.onDeviceSupported)
|
||||
Button(action: state.openSettings) {
|
||||
Image(systemName: "gearshape.fill")
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
@@ -103,35 +150,11 @@ public struct KeyboardRootView: View {
|
||||
.padding(.horizontal, Spacing.md)
|
||||
}
|
||||
|
||||
// MARK: - Centre area
|
||||
|
||||
private var centreArea: some View {
|
||||
VStack(spacing: Spacing.xxs) {
|
||||
TranscriptLine(
|
||||
phase: state.phase,
|
||||
transcript: state.lastTranscript,
|
||||
flowSessionActive: state.flowSessionActive,
|
||||
isLocalEngine: state.isLocalEngine,
|
||||
localModelsReady: state.localModelsReady,
|
||||
localModelsLoaded: state.localModelsLoaded,
|
||||
openSettings: state.openSettings,
|
||||
startFlowSession: state.startFlowSession
|
||||
)
|
||||
.frame(height: 22)
|
||||
|
||||
Spacer(minLength: 0)
|
||||
|
||||
micActionRow
|
||||
.padding(.bottom, Spacing.xs)
|
||||
|
||||
Spacer(minLength: 0)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
// MARK: - Action cluster
|
||||
|
||||
/// Delete (left), mic (centre), return + space stacked on the right.
|
||||
/// HStack vertical alignment keeps delete, mic centre, and the gap
|
||||
/// between return/space on one horizontal axis.
|
||||
/// Fixed vertical gaps in `body` keep the cluster centred without
|
||||
/// flexible Spacers consuming extra keyboard height.
|
||||
private var micActionRow: some View {
|
||||
HStack(alignment: .center, spacing: 0) {
|
||||
CircularToolbarButton(systemName: "delete.left", label: "delete") {
|
||||
@@ -186,19 +209,19 @@ extension KeyboardRootView {
|
||||
#if DEBUG
|
||||
#Preview("Keyboard · Idle") {
|
||||
KeyboardRootView(state: KeyboardViewController.State.previewIdle)
|
||||
.frame(width: 390, height: 280)
|
||||
.frame(width: 390, height: KeyboardRootView.totalHeight)
|
||||
.preferredColorScheme(.dark)
|
||||
}
|
||||
|
||||
#Preview("Keyboard · Recording") {
|
||||
KeyboardRootView(state: KeyboardViewController.State.previewRecording)
|
||||
.frame(width: 390, height: 280)
|
||||
.frame(width: 390, height: KeyboardRootView.totalHeight)
|
||||
.preferredColorScheme(.dark)
|
||||
}
|
||||
|
||||
#Preview("Keyboard · Processing") {
|
||||
KeyboardRootView(state: KeyboardViewController.State.previewProcessing)
|
||||
.frame(width: 390, height: 280)
|
||||
.frame(width: 390, height: KeyboardRootView.totalHeight)
|
||||
.preferredColorScheme(.dark)
|
||||
}
|
||||
#endif
|
||||
@@ -367,62 +390,6 @@ private struct CircularToolbarButton: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Status badge
|
||||
|
||||
private struct StatusBadge: View {
|
||||
@Environment(\.themePalette) private var palette: ThemePalette
|
||||
|
||||
let phase: KeyboardViewController.State.Phase
|
||||
/// Reflects whether the active ASR session is on-device. We surface
|
||||
/// a small ⚠️ during recording so the user knows their audio is
|
||||
/// going to the cloud for this locale (and so devs catch it during
|
||||
/// QA without staring at the Xcode console).
|
||||
let onDeviceSupported: Bool
|
||||
|
||||
var body: some View {
|
||||
Group {
|
||||
switch phase {
|
||||
case .idle:
|
||||
EmptyView()
|
||||
case .requestingPermissions:
|
||||
EmptyView()
|
||||
case .recording:
|
||||
if onDeviceSupported {
|
||||
dot(color: palette.recordRed, labelKey: "keyboard.status.rec")
|
||||
} else {
|
||||
dot(color: palette.warning, labelKey: "keyboard.status.recWarning", showWarning: true)
|
||||
}
|
||||
case .processing:
|
||||
dot(color: palette.accent, labelKey: "keyboard.status.processing")
|
||||
case .error:
|
||||
dot(color: palette.warning, labelKey: "keyboard.status.error")
|
||||
case .denied:
|
||||
dot(color: palette.warning, labelKey: "keyboard.status.error")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func dot(color: Color, labelKey: String, showWarning: Bool = false) -> some View {
|
||||
HStack(spacing: 4) {
|
||||
Circle()
|
||||
.fill(color)
|
||||
.frame(width: 6, height: 6)
|
||||
if showWarning {
|
||||
Image(systemName: "exclamationmark.triangle.fill")
|
||||
.font(.system(size: 9, weight: .bold))
|
||||
.foregroundStyle(palette.warning)
|
||||
}
|
||||
Text(ExtL10n.string(labelKey))
|
||||
.font(TypeStyle.caption2)
|
||||
.foregroundStyle(palette.textSecondary)
|
||||
}
|
||||
.padding(.horizontal, Spacing.xs)
|
||||
.padding(.vertical, 4)
|
||||
.background(palette.surface, in: Capsule())
|
||||
.overlay(Capsule().stroke(palette.divider, lineWidth: 0.5))
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Cloud engine chip (cloud always ASR + LLM polish)
|
||||
|
||||
private struct CloudEngineChip: View {
|
||||
|
||||
Reference in New Issue
Block a user