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 SwiftData
extension View {
func placeholder<Content: View>(
@ -69,6 +70,7 @@ struct PowerModeView: View {
var body: some View {
NavigationStack(path: $navigationPath) {
VStack(spacing: 0) {
// Header Section
VStack(spacing: 12) {
HStack {
VStack(alignment: .leading, spacing: 4) {
@ -135,120 +137,122 @@ struct PowerModeView: View {
.padding(.horizontal, 24)
.padding(.top, 20)
.padding(.bottom, 16)
.frame(maxWidth: .infinity)
.background(Color(NSColor.windowBackgroundColor))
Rectangle()
.fill(Color(NSColor.separatorColor))
.frame(height: 1)
.padding(.horizontal, 24)
if isReorderMode {
VStack(spacing: 12) {
List {
ForEach(powerModeManager.configurations) { config in
HStack(spacing: 12) {
ZStack {
Circle()
.fill(Color(NSColor.controlBackgroundColor))
.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)
// Content Section
Group {
if isReorderMode {
VStack(spacing: 12) {
List {
ForEach(powerModeManager.configurations) { config in
HStack(spacing: 12) {
ZStack {
Circle()
.fill(Color(NSColor.controlBackgroundColor))
.frame(width: 40, height: 40)
Text(config.emoji)
.font(.system(size: 20))
}
if !config.isEnabled {
Text("Disabled")
.font(.system(size: 11, weight: .medium))
.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) {
Text(config.name)
.font(.system(size: 15, weight: .semibold))
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))
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")
.font(.system(size: 11, weight: .medium))
.padding(.horizontal, 8)
.padding(.vertical, 4)
.background(Capsule().fill(Color(NSColor.controlBackgroundColor)))
.overlay(
Capsule().stroke(Color(NSColor.separatorColor), lineWidth: 0.5)
)
.foregroundColor(.secondary)
.multilineTextAlignment(.center)
.lineSpacing(2)
}
}
Spacer()
}
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
} else {
VStack(spacing: 0) {
PowerModeConfigurationsGrid(
powerModeManager: powerModeManager,
onEditConfig: { config in
configurationMode = .edit(config)
navigationPath.append(configurationMode!)
.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, 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)
.padding(.vertical, 20)
Spacer()
.frame(height: 40)
Spacer()
}
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
} 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))
.navigationDestination(for: ConfigurationMode.self) { mode in
@ -259,11 +263,9 @@ struct PowerModeView: View {
}
// New component for section headers
struct SectionHeader: View {
let title: String
var body: some View {
Text(title)
.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)
}
}
if websiteCount > 0 {
HStack(spacing: 4) {
Image(systemName: "globe")
@ -196,6 +195,7 @@ struct ConfigurationRow: View {
}
}
}
.padding(.top, 2)
.foregroundColor(.secondary)
}
@ -213,7 +213,6 @@ struct ConfigurationRow: View {
if selectedModel != nil || selectedLanguage != nil || config.isAIEnhancementEnabled || config.isAutoSendEnabled {
Divider()
.padding(.horizontal, 16)
HStack(spacing: 8) {
if let model = selectedModel, model != "Default" {
@ -223,8 +222,8 @@ struct ConfigurationRow: View {
Text(model)
.font(.caption)
}
.padding(.horizontal, 8)
.padding(.vertical, 4)
.padding(.horizontal, 6)
.padding(.vertical, 2)
.background(Capsule()
.fill(Color(NSColor.controlBackgroundColor)))
.overlay(
@ -240,8 +239,8 @@ struct ConfigurationRow: View {
Text(language)
.font(.caption)
}
.padding(.horizontal, 8)
.padding(.vertical, 4)
.padding(.horizontal, 6)
.padding(.vertical, 2)
.background(Capsule()
.fill(Color(NSColor.controlBackgroundColor)))
.overlay(
@ -257,8 +256,8 @@ struct ConfigurationRow: View {
Text(modelName.count > 20 ? String(modelName.prefix(18)) + "..." : modelName)
.font(.caption)
}
.padding(.horizontal, 8)
.padding(.vertical, 4)
.padding(.horizontal, 6)
.padding(.vertical, 2)
.background(Capsule()
.fill(Color(NSColor.controlBackgroundColor)))
.overlay(
@ -274,8 +273,8 @@ struct ConfigurationRow: View {
Text("Auto Send")
.font(.caption)
}
.padding(.horizontal, 8)
.padding(.vertical, 4)
.padding(.horizontal, 6)
.padding(.vertical, 2)
.background(Capsule()
.fill(Color(NSColor.controlBackgroundColor)))
.overlay(
@ -291,8 +290,8 @@ struct ConfigurationRow: View {
Text("Context Awareness")
.font(.caption)
}
.padding(.horizontal, 8)
.padding(.vertical, 4)
.padding(.horizontal, 6)
.padding(.vertical, 2)
.background(Capsule()
.fill(Color(NSColor.controlBackgroundColor)))
.overlay(
@ -307,8 +306,8 @@ struct ConfigurationRow: View {
Text(selectedPrompt?.title ?? "AI")
.font(.caption)
}
.padding(.horizontal, 8)
.padding(.vertical, 4)
.padding(.horizontal, 6)
.padding(.vertical, 2)
.background(Capsule()
.fill(Color.accentColor.opacity(0.1)))
.foregroundColor(.accentColor)
@ -316,10 +315,13 @@ struct ConfigurationRow: View {
Spacer()
}
.padding(.vertical, 10)
.padding(.vertical, 6)
.padding(.horizontal, 16)
.background(Color.secondary.opacity(0.1))
}
}
.clipShape(RoundedRectangle(cornerRadius: 16))
.background(CardBackground(isSelected: isEditing))
.opacity(config.isEnabled ? 1.0 : 0.5)