feat: apply pink Opal design with reactive square persona
This commit is contained in:
snowspeeder committed
1 parent
5b41b3924a
commit
74d2b63614
8 files changed
+199
-57
No files matched your search
@@ -50,11 +50,19 @@ struct ConversationView: View {
|
||||
var body: some View {
|
||||
TabView(selection: $selectedTab) {
|
||||
NavigationStack {
|
||||
ConversationContent(settings: settings, session: session)
|
||||
ConversationContent(settings: settings, session: session, displayName: user.displayName ?? user.username)
|
||||
.toolbar {
|
||||
settingsLink
|
||||
ToolbarItem(placement: .topBarLeading) {
|
||||
Button("Sign out") { Task { await auth.logout { await session.disconnect() } } }
|
||||
Menu {
|
||||
Button("Sign out", role: .destructive) {
|
||||
Task { await auth.logout { await session.disconnect() } }
|
||||
}
|
||||
} label: {
|
||||
Image(systemName: "person.crop.circle")
|
||||
.frame(minWidth: 44, minHeight: 44)
|
||||
}
|
||||
.accessibilityLabel("Account")
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -165,6 +173,7 @@ private struct ConversationContent: View {
|
||||
@ObservedObject var session: VoiceSession
|
||||
@ObservedObject private var transcripts: TranscriptHandler
|
||||
@ObservedObject private var conversation: ConversationStateModel
|
||||
let displayName: String
|
||||
@State private var composerText = ""
|
||||
@State private var sendError: String?
|
||||
@State private var isSending = false
|
||||
@@ -173,9 +182,10 @@ private struct ConversationContent: View {
|
||||
@Environment(\.accessibilityReduceMotion) private var reduceMotion
|
||||
@Environment(\.colorSchemeContrast) private var contrast
|
||||
|
||||
init(settings: SettingsStore, session: VoiceSession) {
|
||||
init(settings: SettingsStore, session: VoiceSession, displayName: String) {
|
||||
self.settings = settings
|
||||
self.session = session
|
||||
self.displayName = displayName
|
||||
transcripts = session.transcriptHandler
|
||||
conversation = session.stateModel
|
||||
}
|
||||
@@ -217,26 +227,66 @@ private struct ConversationContent: View {
|
||||
|
||||
private var welcome: some View {
|
||||
ScrollView {
|
||||
VStack(alignment: .leading, spacing: Nearlight.s24) {
|
||||
LightwellView(phase: lightwellPhase(session: session, conversation: conversation, textMode: settings.textMode))
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.top, Nearlight.s32)
|
||||
VStack(alignment: .leading, spacing: Nearlight.s12) {
|
||||
Text("A moment with Hope.")
|
||||
.font(NearlightFont.welcome(typeSize))
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
Text("Speak or type to your own assistant.")
|
||||
.font(NearlightFont.support(typeSize))
|
||||
VStack(spacing: Nearlight.s16) {
|
||||
VStack(spacing: Nearlight.s8) {
|
||||
Text("A little room for you,")
|
||||
.font(.largeTitle.weight(.regular))
|
||||
Text(greetingName + ".")
|
||||
.font(.system(.largeTitle, design: .serif).italic())
|
||||
.foregroundStyle(Nearlight.rosewood)
|
||||
Text("No perfect words needed. Start anywhere.")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(Nearlight.quiet)
|
||||
}
|
||||
statusLine
|
||||
.multilineTextAlignment(.center)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.padding(.top, Nearlight.s24)
|
||||
|
||||
LightwellView(phase: lightwellPhase(session: session, conversation: conversation, textMode: settings.textMode))
|
||||
.padding(.top, Nearlight.s8)
|
||||
Text(statusTitle)
|
||||
.font(.footnote)
|
||||
.foregroundStyle(Nearlight.rosewood)
|
||||
.accessibilityIdentifier("talk.status")
|
||||
|
||||
if !typeSize.isAccessibilitySize {
|
||||
VStack(spacing: Nearlight.s8) {
|
||||
HStack(spacing: Nearlight.s8) {
|
||||
prompt("Talk through my day", draft: "Help me talk through my day.")
|
||||
prompt("Explore an idea", draft: "Help me explore an idea.")
|
||||
}
|
||||
prompt("Make a plan", draft: "Help me make a plan.")
|
||||
}
|
||||
.padding(.top, Nearlight.s8)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.horizontal, Nearlight.s20)
|
||||
.padding(.bottom, Nearlight.s24)
|
||||
}
|
||||
}
|
||||
|
||||
private var greetingName: String {
|
||||
displayName.split(separator: " ").first.map(String.init) ?? displayName
|
||||
}
|
||||
|
||||
private func prompt(_ title: String, draft: String) -> some View {
|
||||
Button {
|
||||
// Prepare an editable draft, never submit a prompt or enable capture implicitly.
|
||||
composerText = draft
|
||||
settings.textMode = true
|
||||
composerFocused = true
|
||||
} label: {
|
||||
Text(title)
|
||||
.font(.footnote)
|
||||
.padding(.horizontal, Nearlight.s16)
|
||||
.frame(minHeight: 44)
|
||||
.background(Nearlight.selectedWash, in: Capsule())
|
||||
.foregroundStyle(Nearlight.rosewood)
|
||||
}
|
||||
.accessibilityHint("Prepares a message you can edit. Connect before sending.")
|
||||
}
|
||||
|
||||
/// Status text 24 below the supporting copy on welcome.
|
||||
private var statusLine: some View {
|
||||
Text(statusTitle)
|
||||
@@ -369,21 +419,17 @@ private struct ConversationContent: View {
|
||||
else { HStack(spacing: Nearlight.s12) { muteButton; micMeter } }
|
||||
endButton
|
||||
} else {
|
||||
if settings.textMode { draftPreview }
|
||||
startControls
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, Nearlight.s20)
|
||||
.padding(.top, Nearlight.s12)
|
||||
.padding(.bottom, Nearlight.s12)
|
||||
.background(
|
||||
// Dock: Surface, 16-point top corners, decorative top separator.
|
||||
VStack(spacing: 0) {
|
||||
Rectangle().fill(Nearlight.separator).frame(height: 1 / UIScreen.main.scale)
|
||||
Nearlight.surface
|
||||
}
|
||||
.ignoresSafeArea(.container, edges: .bottom)
|
||||
.clipShape(UnevenRoundedRectangle(topLeadingRadius: Nearlight.radiusDock, topTrailingRadius: Nearlight.radiusDock))
|
||||
)
|
||||
.background(Nearlight.surface, in: RoundedRectangle(cornerRadius: Nearlight.radiusDock))
|
||||
.padding(.horizontal, Nearlight.s16)
|
||||
.padding(.bottom, Nearlight.s8)
|
||||
|
||||
}
|
||||
|
||||
@ViewBuilder private var modeSelector: some View {
|
||||
@@ -431,6 +477,16 @@ private struct ConversationContent: View {
|
||||
.accessibilityAddTraits(selected ? .isSelected : [])
|
||||
}
|
||||
|
||||
private var draftPreview: some View {
|
||||
TextField("What’s on your mind?", text: $composerText, axis: .vertical)
|
||||
.lineLimit(1...3)
|
||||
.font(.body)
|
||||
.padding(Nearlight.s12)
|
||||
.background(Nearlight.selectedWash, in: RoundedRectangle(cornerRadius: Nearlight.radiusControl))
|
||||
.focused($composerFocused)
|
||||
.accessibilityLabel("Message Hope")
|
||||
}
|
||||
|
||||
private var startControls: some View {
|
||||
VStack(spacing: Nearlight.s8) {
|
||||
Text(settings.textMode ? "Your microphone stays off." : "Your microphone starts after you connect.")
|
||||
@@ -520,7 +576,7 @@ private struct ConversationContent: View {
|
||||
private var typeControls: some View {
|
||||
VStack(spacing: Nearlight.s12) {
|
||||
HStack(alignment: .bottom, spacing: Nearlight.s8) {
|
||||
TextField("Message Hope", text: $composerText, axis: .vertical)
|
||||
TextField("What’s on your mind?", text: $composerText, axis: .vertical)
|
||||
.lineLimit(1...5)
|
||||
.padding(Nearlight.s12)
|
||||
.background(Nearlight.surface, in: RoundedRectangle(cornerRadius: Nearlight.radiusControl))
|
||||
|
||||
Reference in new issue
Block a user