ios: update style
This commit is contained in:
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user