minor UI changes

This commit is contained in:
Beingpax 2026-01-04 17:15:32 +05:45
parent 586f5fcea0
commit 58e5c2c555
2 changed files with 123 additions and 119 deletions

View File

@ -1,4 +1,5 @@
import SwiftUI import SwiftUI
import SwiftData
extension View { extension View {
func placeholder<Content: View>( func placeholder<Content: View>(
@ -69,6 +70,7 @@ struct PowerModeView: View {
var body: some View { var body: some View {
NavigationStack(path: $navigationPath) { NavigationStack(path: $navigationPath) {
VStack(spacing: 0) { VStack(spacing: 0) {
// Header Section
VStack(spacing: 12) { VStack(spacing: 12) {
HStack { HStack {
VStack(alignment: .leading, spacing: 4) { VStack(alignment: .leading, spacing: 4) {
@ -135,120 +137,122 @@ struct PowerModeView: View {
.padding(.horizontal, 24) .padding(.horizontal, 24)
.padding(.top, 20) .padding(.top, 20)
.padding(.bottom, 16) .padding(.bottom, 16)
.frame(maxWidth: .infinity)
.background(Color(NSColor.windowBackgroundColor))
Rectangle() // Content Section
.fill(Color(NSColor.separatorColor)) Group {
.frame(height: 1) if isReorderMode {
.padding(.horizontal, 24) VStack(spacing: 12) {
List {
if isReorderMode { ForEach(powerModeManager.configurations) { config in
VStack(spacing: 12) { HStack(spacing: 12) {
List { ZStack {
ForEach(powerModeManager.configurations) { config in Circle()
HStack(spacing: 12) { .fill(Color(NSColor.controlBackgroundColor))
ZStack { .frame(width: 40, height: 40)
Circle() Text(config.emoji)
.fill(Color(NSColor.controlBackgroundColor)) .font(.system(size: 20))
.frame(width: 40, height: 40)
Text(config.emoji)
.font(.system(size: 20))
}
Text(config.name)
.font(.system(size: 15, weight: .semibold))
Spacer()
HStack(spacing: 6) {
if config.isDefault {
Text("Default")
.font(.system(size: 11, weight: .medium))
.padding(.horizontal, 6)
.padding(.vertical, 2)
.background(Capsule().fill(Color.accentColor))
.foregroundColor(.white)
} }
if !config.isEnabled {
Text("Disabled") Text(config.name)
.font(.system(size: 11, weight: .medium)) .font(.system(size: 15, weight: .semibold))
.padding(.horizontal, 8)
.padding(.vertical, 4)
.background(Capsule().fill(Color(NSColor.controlBackgroundColor)))
.overlay(
Capsule().stroke(Color(NSColor.separatorColor), lineWidth: 0.5)
)
.foregroundColor(.secondary)
}
}
}
.padding(.vertical, 12)
.padding(.horizontal, 14)
.background(CardBackground(isSelected: false))
.listRowInsets(EdgeInsets())
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
.padding(.vertical, 6)
}
.onMove(perform: powerModeManager.moveConfigurations)
}
.listStyle(.plain)
.listRowSeparator(.hidden)
.scrollContentBackground(.hidden)
.background(Color(NSColor.controlBackgroundColor))
}
.padding(.horizontal, 24)
.padding(.vertical, 20)
} else {
GeometryReader { geometry in
ScrollView {
VStack(spacing: 0) {
if powerModeManager.configurations.isEmpty {
VStack(spacing: 24) {
Spacer() Spacer()
.frame(height: geometry.size.height * 0.2)
HStack(spacing: 6) {
VStack(spacing: 16) { if config.isDefault {
Image(systemName: "square.grid.2x2.fill") Text("Default")
.font(.system(size: 48, weight: .regular)) .font(.system(size: 11, weight: .medium))
.foregroundColor(.secondary.opacity(0.6)) .padding(.horizontal, 6)
.padding(.vertical, 2)
VStack(spacing: 8) { .background(Capsule().fill(Color.accentColor))
Text("No Power Modes Yet") .foregroundColor(.white)
.font(.system(size: 20, weight: .medium)) }
.foregroundColor(.primary) if !config.isEnabled {
Text("Disabled")
Text("Create first power mode to automate your VoiceInk workflow based on apps/website you are using") .font(.system(size: 11, weight: .medium))
.font(.system(size: 14)) .padding(.horizontal, 8)
.padding(.vertical, 4)
.background(Capsule().fill(Color(NSColor.controlBackgroundColor)))
.overlay(
Capsule().stroke(Color(NSColor.separatorColor), lineWidth: 0.5)
)
.foregroundColor(.secondary) .foregroundColor(.secondary)
.multilineTextAlignment(.center)
.lineSpacing(2)
} }
} }
Spacer()
} }
.frame(maxWidth: .infinity) .padding(.vertical, 12)
.frame(minHeight: geometry.size.height) .padding(.horizontal, 14)
} else { .background(CardBackground(isSelected: false))
VStack(spacing: 0) { .listRowInsets(EdgeInsets())
PowerModeConfigurationsGrid( .listRowBackground(Color.clear)
powerModeManager: powerModeManager, .listRowSeparator(.hidden)
onEditConfig: { config in .padding(.vertical, 6)
configurationMode = .edit(config) }
navigationPath.append(configurationMode!) .onMove(perform: powerModeManager.moveConfigurations)
}
.listStyle(.plain)
.listRowSeparator(.hidden)
.scrollContentBackground(.hidden)
.background(Color(NSColor.controlBackgroundColor))
}
.padding(.horizontal, 16)
.padding(.vertical, 20)
} else {
GeometryReader { geometry in
ScrollView {
VStack(spacing: 0) {
if powerModeManager.configurations.isEmpty {
VStack(spacing: 24) {
Spacer()
.frame(height: geometry.size.height * 0.2)
VStack(spacing: 16) {
Image(systemName: "square.grid.2x2.fill")
.font(.system(size: 48, weight: .regular))
.foregroundColor(.secondary.opacity(0.6))
VStack(spacing: 8) {
Text("No Power Modes Yet")
.font(.system(size: 20, weight: .medium))
.foregroundColor(.primary)
Text("Create first power mode to automate your VoiceInk workflow based on apps/website you are using")
.font(.system(size: 14))
.foregroundColor(.secondary)
.multilineTextAlignment(.center)
.lineSpacing(2)
}
} }
)
.padding(.horizontal, 24) Spacer()
.padding(.vertical, 20) }
.frame(maxWidth: .infinity)
Spacer() .frame(minHeight: geometry.size.height)
.frame(height: 40) } else {
VStack(spacing: 0) {
PowerModeConfigurationsGrid(
powerModeManager: powerModeManager,
onEditConfig: { config in
configurationMode = .edit(config)
navigationPath.append(configurationMode!)
}
)
.padding(.horizontal, 24)
.padding(.vertical, 20)
Spacer()
.frame(height: 40)
}
} }
} }
} }
} }
} }
} }
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(NSColor.controlBackgroundColor))
} }
.background(Color(NSColor.controlBackgroundColor)) .background(Color(NSColor.controlBackgroundColor))
.navigationDestination(for: ConfigurationMode.self) { mode in .navigationDestination(for: ConfigurationMode.self) { mode in
@ -259,11 +263,9 @@ struct PowerModeView: View {
} }
// New component for section headers
struct SectionHeader: View { struct SectionHeader: View {
let title: String let title: String
var body: some View { var body: some View {
Text(title) Text(title)
.font(.system(size: 16, weight: .bold)) .font(.system(size: 16, weight: .bold))

View File

@ -65,7 +65,6 @@ struct PowerModeConfigurationsGrid: View {
) )
} }
} }
.padding(.horizontal)
} }
} }
@ -186,7 +185,7 @@ struct ConfigurationRow: View {
.font(.caption2) .font(.caption2)
} }
} }
if websiteCount > 0 { if websiteCount > 0 {
HStack(spacing: 4) { HStack(spacing: 4) {
Image(systemName: "globe") Image(systemName: "globe")
@ -196,6 +195,7 @@ struct ConfigurationRow: View {
} }
} }
} }
.padding(.top, 2)
.foregroundColor(.secondary) .foregroundColor(.secondary)
} }
@ -213,7 +213,6 @@ struct ConfigurationRow: View {
if selectedModel != nil || selectedLanguage != nil || config.isAIEnhancementEnabled || config.isAutoSendEnabled { if selectedModel != nil || selectedLanguage != nil || config.isAIEnhancementEnabled || config.isAutoSendEnabled {
Divider() Divider()
.padding(.horizontal, 16)
HStack(spacing: 8) { HStack(spacing: 8) {
if let model = selectedModel, model != "Default" { if let model = selectedModel, model != "Default" {
@ -223,8 +222,8 @@ struct ConfigurationRow: View {
Text(model) Text(model)
.font(.caption) .font(.caption)
} }
.padding(.horizontal, 8) .padding(.horizontal, 6)
.padding(.vertical, 4) .padding(.vertical, 2)
.background(Capsule() .background(Capsule()
.fill(Color(NSColor.controlBackgroundColor))) .fill(Color(NSColor.controlBackgroundColor)))
.overlay( .overlay(
@ -240,8 +239,8 @@ struct ConfigurationRow: View {
Text(language) Text(language)
.font(.caption) .font(.caption)
} }
.padding(.horizontal, 8) .padding(.horizontal, 6)
.padding(.vertical, 4) .padding(.vertical, 2)
.background(Capsule() .background(Capsule()
.fill(Color(NSColor.controlBackgroundColor))) .fill(Color(NSColor.controlBackgroundColor)))
.overlay( .overlay(
@ -257,8 +256,8 @@ struct ConfigurationRow: View {
Text(modelName.count > 20 ? String(modelName.prefix(18)) + "..." : modelName) Text(modelName.count > 20 ? String(modelName.prefix(18)) + "..." : modelName)
.font(.caption) .font(.caption)
} }
.padding(.horizontal, 8) .padding(.horizontal, 6)
.padding(.vertical, 4) .padding(.vertical, 2)
.background(Capsule() .background(Capsule()
.fill(Color(NSColor.controlBackgroundColor))) .fill(Color(NSColor.controlBackgroundColor)))
.overlay( .overlay(
@ -274,8 +273,8 @@ struct ConfigurationRow: View {
Text("Auto Send") Text("Auto Send")
.font(.caption) .font(.caption)
} }
.padding(.horizontal, 8) .padding(.horizontal, 6)
.padding(.vertical, 4) .padding(.vertical, 2)
.background(Capsule() .background(Capsule()
.fill(Color(NSColor.controlBackgroundColor))) .fill(Color(NSColor.controlBackgroundColor)))
.overlay( .overlay(
@ -291,8 +290,8 @@ struct ConfigurationRow: View {
Text("Context Awareness") Text("Context Awareness")
.font(.caption) .font(.caption)
} }
.padding(.horizontal, 8) .padding(.horizontal, 6)
.padding(.vertical, 4) .padding(.vertical, 2)
.background(Capsule() .background(Capsule()
.fill(Color(NSColor.controlBackgroundColor))) .fill(Color(NSColor.controlBackgroundColor)))
.overlay( .overlay(
@ -307,8 +306,8 @@ struct ConfigurationRow: View {
Text(selectedPrompt?.title ?? "AI") Text(selectedPrompt?.title ?? "AI")
.font(.caption) .font(.caption)
} }
.padding(.horizontal, 8) .padding(.horizontal, 6)
.padding(.vertical, 4) .padding(.vertical, 2)
.background(Capsule() .background(Capsule()
.fill(Color.accentColor.opacity(0.1))) .fill(Color.accentColor.opacity(0.1)))
.foregroundColor(.accentColor) .foregroundColor(.accentColor)
@ -316,10 +315,13 @@ struct ConfigurationRow: View {
Spacer() Spacer()
} }
.padding(.vertical, 10)
.padding(.vertical, 6)
.padding(.horizontal, 16) .padding(.horizontal, 16)
.background(Color.secondary.opacity(0.1))
} }
} }
.clipShape(RoundedRectangle(cornerRadius: 16))
.background(CardBackground(isSelected: isEditing)) .background(CardBackground(isSelected: isEditing))
.opacity(config.isEnabled ? 1.0 : 0.5) .opacity(config.isEnabled ? 1.0 : 0.5)