snowspeeder/hope-voice-ios
Archived
1
0 Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat: apply pink Opal design with reactive square persona

Browse Source
This commit is contained in:
snowspeeder committed 2026-10-02 13:28:10 -04:00
1 parent 5b41b3924a
commit 74d2b63614
8 files changed
+199 -57
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Sources/Features/Conversation/ConversationView.swift
+81 -25
View File
@@ -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))
Sources/Features/Conversation/LightwellView.swift
+4 -4
View File
@@ -18,8 +18,8 @@ struct LightwellView: View {
@Environment(\.dynamicTypeSize) private var typeSize
private var side: CGFloat {
if compact { return typeSize.isAccessibilitySize ? 88 : 136 }
return typeSize.isAccessibilitySize ? 160 : 220
if compact { return typeSize.isAccessibilitySize ? 80 : 112 }
return typeSize.isAccessibilitySize ? 136 : 184
}
private var animated: Bool {
@@ -41,7 +41,7 @@ struct LightwellView: View {
}
}
.frame(width: side, height: side)
.background(Nearlight.surface, in: RoundedRectangle(cornerRadius: Nearlight.radiusDock))
.background(Nearlight.personaSurface, in: RoundedRectangle(cornerRadius: Nearlight.radiusDock))
.overlay {
RoundedRectangle(cornerRadius: Nearlight.radiusDock)
.strokeBorder(contrast == .increased ? Nearlight.quiet : Nearlight.separator, lineWidth: 1)
@@ -52,7 +52,7 @@ struct LightwellView: View {
private var tint: Color {
switch phase {
case .failed: return Nearlight.alert
case .idle, .tearingDown, .readyNoInput: return Nearlight.quiet
case .tearingDown: return Nearlight.quiet
default: return Nearlight.rosewood
}
}
Sources/Features/Conversation/LoginView.swift
+40 -8
View File
@@ -7,13 +7,24 @@ struct LoginView: View {
@State private var password = ""
@State private var server = ""
@State private var serverError: String?
@Environment(\.dynamicTypeSize) private var typeSize
var body: some View {
NavigationStack {
Form {
Section {
Text("Sign in to Hope").font(.title2.bold())
Text("Use the account provided by your server administrator. Hermes is managed by your server.")
.foregroundStyle(.secondary)
VStack(alignment: .leading, spacing: Nearlight.s12) {
Text("Sign in to Hope")
.font(NearlightFont.welcome(typeSize))
.foregroundStyle(Nearlight.ink)
.accessibilityAddTraits(.isHeader)
Text("Use the account provided by your server administrator. Hermes is managed by your server.")
.font(.body)
.foregroundStyle(Nearlight.quiet)
.fixedSize(horizontal: false, vertical: true)
}
.padding(.vertical, Nearlight.s16)
.listRowBackground(Nearlight.ground)
.listRowSeparator(.hidden)
}
Section("Account") {
TextField("Username", text: $username).textContentType(.username)
@@ -24,10 +35,20 @@ struct LoginView: View {
password = ""
Task { await auth.login(username: username, password: suppliedPassword) }
}
.font(NearlightFont.control(typeSize))
.buttonStyle(.borderedProminent)
.tint(Nearlight.rosewood)
.foregroundStyle(Nearlight.onRosewood)
.frame(minHeight: 44)
.padding(.vertical, Nearlight.s4)
.disabled(auth.isBusy || username.isEmpty || password.isEmpty)
if auth.isBusy { ProgressView("Signing in…") }
if let error = auth.error { Text(error).foregroundStyle(.red) }
if auth.isBusy { ProgressView("Signing in…").tint(Nearlight.rosewood) }
if let error = auth.error {
Text(error).foregroundStyle(Nearlight.alert)
.fixedSize(horizontal: false, vertical: true)
}
}
.listRowBackground(Nearlight.surface)
Section("Server") {
TextField("HTTPS server address", text: $server).keyboardType(.URL)
.textInputAutocapitalization(.never).autocorrectionDisabled()
@@ -37,17 +58,28 @@ struct LoginView: View {
case .failure(let error): serverError = error.localizedDescription
}
}.disabled(auth.isBusy)
if let serverError { Text(serverError).foregroundStyle(.red) }
if let serverError {
Text(serverError).foregroundStyle(Nearlight.alert)
.fixedSize(horizontal: false, vertical: true)
}
Text("Connections use HTTPS and secure WebSockets. A private server certificate must be trusted by this iPhone for conversations.")
.font(.footnote).foregroundStyle(.secondary)
.font(.footnote).foregroundStyle(Nearlight.quiet)
.fixedSize(horizontal: false, vertical: true)
if auth.config.baseURL.host == TLSPinning.host, auth.config.baseURL.port == 9178 {
Link("Install Hope server certificate in Safari", destination: auth.config.baseURL.appendingPathComponent("hope-server.mobileconfig"))
Text("Install Hope LAN Server Trust in Settings → General → VPN & Device Management. Then enable 192.168.86.2 in Settings → General → About → Certificate Trust Settings. Only trust this certificate for your own server.")
.font(.footnote).foregroundStyle(.secondary)
.font(.footnote).foregroundStyle(Nearlight.quiet)
.fixedSize(horizontal: false, vertical: true)
}
}
.listRowBackground(Nearlight.surface)
}
.foregroundStyle(Nearlight.ink)
.tint(Nearlight.rosewood)
.scrollContentBackground(.hidden)
.background(Nearlight.ground)
.navigationTitle("Hope")
.toolbarBackground(Nearlight.ground, for: .navigationBar)
.onAppear { server = settings.serverURL }
}
}
Sources/Features/Settings/SettingsView.swift
+3 -1
View File
@@ -102,7 +102,9 @@ struct SettingsView: View {
}
.navigationTitle("Settings")
.navigationBarTitleDisplayMode(.inline)
.tint(Nearlight.quiet)
.scrollContentBackground(.hidden)
.background(Nearlight.ground)
.tint(Nearlight.rosewood)
.sheet(isPresented: $showVoicePicker) {
VoicePickerView(settings: settings, session: session)
}