ios: update style

This commit is contained in:
2026-05-02 16:23:00 -07:00
parent adb9e15b6c
commit cb368a4005
15 changed files with 667 additions and 217 deletions

View File

@@ -17,27 +17,31 @@ struct SybilSidebarView: View {
var body: some View {
VStack(spacing: 0) {
HStack(spacing: 10) {
Button {
viewModel.startNewChat()
} label: {
Label("New chat", systemImage: "plus")
.frame(maxWidth: .infinity)
}
.buttonStyle(.borderedProminent)
.tint(viewModel.draftKind == .chat ? SybilTheme.primary : SybilTheme.primarySoft)
VStack(alignment: .leading, spacing: 14) {
SybilWordmark(size: 31)
Button {
viewModel.startNewSearch()
} label: {
Label("New search", systemImage: "magnifyingglass")
.frame(maxWidth: .infinity)
VStack(spacing: 10) {
sidebarActionButton(
title: "New chat",
systemImage: "plus",
isPrimary: true,
isActive: viewModel.draftKind == .chat
) {
viewModel.startNewChat()
}
sidebarActionButton(
title: "New search",
systemImage: "magnifyingglass",
isPrimary: false,
isActive: viewModel.draftKind == .search
) {
viewModel.startNewSearch()
}
}
.buttonStyle(.bordered)
.tint(viewModel.draftKind == .search ? SybilTheme.primary : SybilTheme.textMuted)
}
.padding(.horizontal, 12)
.padding(.top, 12)
.padding(.top, 18)
.padding(.bottom, 10)
Divider()
@@ -45,7 +49,7 @@ struct SybilSidebarView: View {
if let errorMessage = viewModel.errorMessage {
Text(errorMessage)
.font(.footnote)
.font(.sybil(.footnote))
.foregroundStyle(SybilTheme.danger)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal, 12)
@@ -60,7 +64,7 @@ struct SybilSidebarView: View {
ProgressView()
.tint(SybilTheme.primary)
Text("Loading conversations…")
.font(.footnote)
.font(.sybil(.footnote))
.foregroundStyle(SybilTheme.textMuted)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
@@ -68,10 +72,10 @@ struct SybilSidebarView: View {
} else if viewModel.sidebarItems.isEmpty {
VStack(spacing: 10) {
Image(systemName: "message.badge")
.font(.title3)
.font(.system(size: 20, weight: .medium))
.foregroundStyle(SybilTheme.textMuted)
Text("Start a chat or run your first search.")
.font(.footnote)
.font(.sybil(.footnote))
.multilineTextAlignment(.center)
.foregroundStyle(SybilTheme.textMuted)
}
@@ -87,24 +91,36 @@ struct SybilSidebarView: View {
VStack(alignment: .leading, spacing: 6) {
HStack(spacing: 8) {
Image(systemName: iconName(for: item))
.font(.caption.weight(.semibold))
.font(.system(size: 12, weight: .semibold))
.foregroundStyle(isSelected(item) ? SybilTheme.accent : SybilTheme.textMuted)
.frame(width: 22, height: 22)
.background(
RoundedRectangle(cornerRadius: 7)
.fill(isSelected(item) ? SybilTheme.accent.opacity(0.12) : SybilTheme.surface.opacity(0.72))
.overlay(
RoundedRectangle(cornerRadius: 7)
.stroke(isSelected(item) ? SybilTheme.accent.opacity(0.36) : SybilTheme.border.opacity(0.72), lineWidth: 1)
)
)
Text(item.title)
.font(.subheadline.weight(.medium))
.font(.sybil(.subheadline, weight: .semibold))
.lineLimit(1)
}
HStack(spacing: 8) {
Text(item.updatedAt.sybilRelativeLabel)
.font(.caption2)
.font(.sybil(.caption2))
.foregroundStyle(SybilTheme.textMuted)
if let initiated = item.initiatedLabel {
Spacer(minLength: 0)
Text(initiated)
.font(.caption2)
.font(.sybil(.caption2))
.foregroundStyle(SybilTheme.textMuted.opacity(0.88))
.lineLimit(1)
.multilineTextAlignment(.trailing)
.frame(maxWidth: .infinity, alignment: .trailing)
}
}
}
@@ -114,7 +130,7 @@ struct SybilSidebarView: View {
.frame(maxWidth: .infinity, alignment: .leading)
.background(
RoundedRectangle(cornerRadius: 12)
.fill(isSelected(item) ? SybilTheme.primary.opacity(0.28) : SybilTheme.surface.opacity(0.4))
.fill(isSelected(item) ? SybilTheme.selectedRowGradient : LinearGradient(colors: [SybilTheme.surface.opacity(0.56), SybilTheme.surface.opacity(0.36)], startPoint: .topLeading, endPoint: .bottomTrailing))
)
.overlay(
RoundedRectangle(cornerRadius: 12)
@@ -144,7 +160,7 @@ struct SybilSidebarView: View {
viewModel.openSettings()
} label: {
Label("Settings", systemImage: "gearshape")
.font(.subheadline.weight(.medium))
.font(.sybil(.subheadline, weight: .medium))
.foregroundStyle(SybilTheme.text)
.padding(.horizontal, 12)
.padding(.vertical, 10)
@@ -157,6 +173,32 @@ struct SybilSidebarView: View {
.buttonStyle(.plain)
.padding(10)
}
.background(SybilTheme.surfaceStrong.opacity(0.84))
.background(SybilTheme.panelGradient)
}
private func sidebarActionButton(
title: String,
systemImage: String,
isPrimary: Bool,
isActive: Bool,
action: @escaping () -> Void
) -> some View {
Button(action: action) {
Label(title, systemImage: systemImage)
.font(.sybil(.subheadline, weight: .semibold))
.foregroundStyle(isPrimary ? SybilTheme.text : SybilTheme.text.opacity(0.92))
.padding(.horizontal, 13)
.padding(.vertical, 11)
.frame(maxWidth: .infinity, alignment: .leading)
.background(
RoundedRectangle(cornerRadius: 11)
.fill(isPrimary ? SybilTheme.primaryGradient : LinearGradient(colors: [SybilTheme.surface.opacity(0.86), SybilTheme.surface.opacity(0.62)], startPoint: .topLeading, endPoint: .bottomTrailing))
)
.overlay(
RoundedRectangle(cornerRadius: 11)
.stroke(isActive ? SybilTheme.primary.opacity(0.70) : SybilTheme.border.opacity(isPrimary ? 0.28 : 0.72), lineWidth: 1)
)
}
.buttonStyle(.plain)
}
}