ios: right-align user bubbles on iPad #7

Merged
buzzert merged 4 commits from codex/ios-right-align-user-bubbles into master 2026-05-03 00:20:25 +00:00
7 changed files with 73 additions and 104 deletions

View File

@@ -4,8 +4,9 @@ public struct SplitView: View {
@State private var viewModel = SybilViewModel() @State private var viewModel = SybilViewModel()
@Environment(\.horizontalSizeClass) private var horizontalSizeClass @Environment(\.horizontalSizeClass) private var horizontalSizeClass
public init() { @MainActor public init() {
SybilFontRegistry.registerIfNeeded() SybilFontRegistry.registerIfNeeded()
SybilTheme.applySystemAppearance()
} }
public var body: some View { public var body: some View {
@@ -25,7 +26,6 @@ public struct SplitView: View {
} else { } else {
NavigationSplitView { NavigationSplitView {
SybilSidebarView(viewModel: viewModel) SybilSidebarView(viewModel: viewModel)
.navigationTitle("Sybil")
} detail: { } detail: {
SybilWorkspaceView(viewModel: viewModel) SybilWorkspaceView(viewModel: viewModel)
} }
@@ -34,6 +34,7 @@ public struct SplitView: View {
} }
} }
.font(.sybil(.body)) .font(.sybil(.body))
.preferredColorScheme(.dark)
.task { .task {
await viewModel.bootstrap() await viewModel.bootstrap()
} }

View File

@@ -25,6 +25,7 @@ struct SybilChatTranscriptView: View {
ForEach(messages) { message in ForEach(messages) { message in
MessageBubble(message: message, isSending: isSending) MessageBubble(message: message, isSending: isSending)
.frame(maxWidth: .infinity)
.id(message.id) .id(message.id)
} }
@@ -86,10 +87,8 @@ private struct MessageBubble: View {
} }
var body: some View { var body: some View {
HStack(alignment: .top) { HStack(alignment: .top, spacing: 0) {
if isUser { leadingSpacer
Spacer(minLength: 44)
}
if let toolCallMetadata { if let toolCallMetadata {
ToolCallActivityChip( ToolCallActivityChip(
@@ -136,12 +135,24 @@ private struct MessageBubble: View {
.frame(maxWidth: isUser ? 420 : nil, alignment: isUser ? .trailing : .leading) .frame(maxWidth: isUser ? 420 : nil, alignment: isUser ? .trailing : .leading)
} }
trailingSpacer
}
.frame(maxWidth: .infinity, alignment: isUser ? .trailing : .leading)
}
@ViewBuilder
private var leadingSpacer: some View {
if isUser {
Spacer(minLength: 44)
}
}
@ViewBuilder
private var trailingSpacer: some View {
if !isUser { if !isUser {
Spacer(minLength: 0) Spacer(minLength: 0)
} }
} }
.frame(maxWidth: .infinity, alignment: isUser ? .trailing : .leading)
}
} }
private struct ToolCallActivityChip: View { private struct ToolCallActivityChip: View {

View File

@@ -10,6 +10,7 @@ extension Theme {
.text { .text {
FontFamily(.custom("Inter")) FontFamily(.custom("Inter"))
FontSize(15) FontSize(15)
ForegroundColor(SybilTheme.text)
} }
.code { .code {
FontFamilyVariant(.monospaced) FontFamilyVariant(.monospaced)

View File

@@ -30,8 +30,8 @@ struct SybilPhoneShellView: View {
.navigationTitle("") .navigationTitle("")
.navigationBarTitleDisplayMode(.inline) .navigationBarTitleDisplayMode(.inline)
.toolbar { .toolbar {
ToolbarItem(placement: .principal) { ToolbarItem(placement: .topBarLeading) {
SybilWordmark(size: 19) SybilWordmark(size: 18)
} }
} }
.navigationDestination(for: PhoneRoute.self) { route in .navigationDestination(for: PhoneRoute.self) { route in

View File

@@ -18,8 +18,6 @@ struct SybilSidebarView: View {
var body: some View { var body: some View {
VStack(spacing: 0) { VStack(spacing: 0) {
VStack(alignment: .leading, spacing: 14) { VStack(alignment: .leading, spacing: 14) {
SybilWordmark(size: 31)
VStack(spacing: 10) { VStack(spacing: 10) {
sidebarActionButton( sidebarActionButton(
title: "New chat", title: "New chat",
@@ -174,6 +172,13 @@ struct SybilSidebarView: View {
.padding(10) .padding(10)
} }
.background(SybilTheme.panelGradient) .background(SybilTheme.panelGradient)
.navigationTitle("")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .topBarLeading) {
SybilWordmark(size: 18)
}
}
} }
private func sidebarActionButton( private func sidebarActionButton(

View File

@@ -1,6 +1,7 @@
import CoreText import CoreText
import Foundation import Foundation
import SwiftUI import SwiftUI
import UIKit
enum SybilFontRegistry { enum SybilFontRegistry {
static func registerIfNeeded() { static func registerIfNeeded() {
@@ -78,6 +79,23 @@ enum SybilTheme {
static let userBubble = Color(red: 0.29, green: 0.13, blue: 0.65) static let userBubble = Color(red: 0.29, green: 0.13, blue: 0.65)
static let danger = Color(red: 0.96, green: 0.32, blue: 0.40) static let danger = Color(red: 0.96, green: 0.32, blue: 0.40)
@MainActor static func applySystemAppearance() {
let navAppearance = UINavigationBarAppearance()
navAppearance.configureWithOpaqueBackground()
navAppearance.backgroundColor = UIColor(red: 0.02, green: 0.02, blue: 0.05, alpha: 1)
navAppearance.shadowColor = UIColor(red: 0.24, green: 0.20, blue: 0.38, alpha: 0.9)
navAppearance.titleTextAttributes = [
.foregroundColor: UIColor(red: 0.96, green: 0.94, blue: 1.0, alpha: 1)
]
navAppearance.largeTitleTextAttributes = navAppearance.titleTextAttributes
UINavigationBar.appearance().prefersLargeTitles = false
UINavigationBar.appearance().standardAppearance = navAppearance
UINavigationBar.appearance().compactAppearance = navAppearance
UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
UINavigationBar.appearance().compactScrollEdgeAppearance = navAppearance
}
static var backgroundGradient: LinearGradient { static var backgroundGradient: LinearGradient {
LinearGradient( LinearGradient(
colors: [ colors: [

View File

@@ -3,13 +3,8 @@ import SwiftUI
struct SybilWorkspaceView: View { struct SybilWorkspaceView: View {
@Bindable var viewModel: SybilViewModel @Bindable var viewModel: SybilViewModel
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
@FocusState private var composerFocused: Bool @FocusState private var composerFocused: Bool
private var isCompact: Bool {
horizontalSizeClass == .compact
}
private var isSettingsSelected: Bool { private var isSettingsSelected: Bool {
if case .settings = viewModel.selectedItem { if case .settings = viewModel.selectedItem {
return true return true
@@ -18,7 +13,7 @@ struct SybilWorkspaceView: View {
} }
private var showsHeader: Bool { private var showsHeader: Bool {
!isCompact || viewModel.errorMessage != nil viewModel.errorMessage != nil
} }
var body: some View { var body: some View {
@@ -55,20 +50,17 @@ struct SybilWorkspaceView: View {
composerBar composerBar
} }
} }
.navigationTitle(isCompact ? "" : viewModel.selectedTitle) .navigationTitle(viewModel.selectedTitle)
.navigationBarTitleDisplayMode(.inline)
.toolbarRole(.editor)
.toolbar { .toolbar {
if isCompact { if !isSettingsSelected {
ToolbarItem(placement: .principal) {
Text(viewModel.selectedTitle)
.font(.sybil(.headline, weight: .semibold))
.foregroundStyle(SybilTheme.text)
.lineLimit(1)
}
}
if isCompact && !viewModel.isSearchMode && !isSettingsSelected {
ToolbarItem(placement: .topBarTrailing) { ToolbarItem(placement: .topBarTrailing) {
compactProviderModelMenu if viewModel.isSearchMode {
searchModeChip
} else {
providerModelMenu
}
} }
} }
} }
@@ -83,30 +75,6 @@ struct SybilWorkspaceView: View {
private var header: some View { private var header: some View {
VStack(alignment: .leading, spacing: 12) { VStack(alignment: .leading, spacing: 12) {
if !isCompact {
HStack(alignment: .top, spacing: 12) {
Spacer()
if !viewModel.isSearchMode && !isSettingsSelected {
providerControls
} else if viewModel.isSearchMode {
Label("Search mode", systemImage: "globe")
.font(.sybil(.caption, weight: .medium))
.foregroundStyle(SybilTheme.accent)
.padding(.horizontal, 10)
.padding(.vertical, 7)
.background(
RoundedRectangle(cornerRadius: 10)
.fill(SybilTheme.accent.opacity(0.10))
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(SybilTheme.accent.opacity(0.24), lineWidth: 1)
)
)
}
}
}
if let error = viewModel.errorMessage { if let error = viewModel.errorMessage {
Text(error) Text(error)
.font(.sybil(.footnote)) .font(.sybil(.footnote))
@@ -119,7 +87,7 @@ struct SybilWorkspaceView: View {
.background(SybilTheme.panelGradient.opacity(0.58)) .background(SybilTheme.panelGradient.opacity(0.58))
} }
private var compactProviderModelMenu: some View { private var providerModelMenu: some View {
Menu { Menu {
Text("\(viewModel.provider.displayName)\(viewModel.model)") Text("\(viewModel.provider.displayName)\(viewModel.model)")
.font(.sybil(.caption)) .font(.sybil(.caption))
@@ -163,57 +131,22 @@ struct SybilWorkspaceView: View {
.accessibilityLabel("Provider and model") .accessibilityLabel("Provider and model")
} }
private var providerControls: some View { private var searchModeChip: some View {
HStack(spacing: 8) { Label("Search", systemImage: "globe")
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(.sybil(.caption, weight: .medium)) .font(.sybil(.caption, weight: .medium))
.foregroundStyle(SybilTheme.text) .foregroundStyle(SybilTheme.accent)
.padding(.horizontal, 10) .padding(.horizontal, 10)
.padding(.vertical, 7) .padding(.vertical, 7)
.background( .background(
RoundedRectangle(cornerRadius: 10) Capsule()
.fill(SybilTheme.surface.opacity(0.78)) .fill(SybilTheme.accent.opacity(0.10))
.overlay( .overlay(
RoundedRectangle(cornerRadius: 10) Capsule()
.stroke(SybilTheme.border.opacity(0.88), lineWidth: 1) .stroke(SybilTheme.accent.opacity(0.24), 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(.sybil(.caption, weight: .medium))
.foregroundStyle(SybilTheme.text)
.lineLimit(1)
.padding(.horizontal, 10)
.padding(.vertical, 7)
.background(
RoundedRectangle(cornerRadius: 10)
.fill(SybilTheme.surface.opacity(0.78))
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(SybilTheme.border.opacity(0.88), lineWidth: 1)
)
)
}
}
}
private var composerBar: some View { private var composerBar: some View {
HStack(alignment: .bottom, spacing: 10) { HStack(alignment: .bottom, spacing: 10) {
TextField( TextField(