diff --git a/VoiceInk/PowerMode/PowerModeView.swift b/VoiceInk/PowerMode/PowerModeView.swift index b1ab190..21e468b 100644 --- a/VoiceInk/PowerMode/PowerModeView.swift +++ b/VoiceInk/PowerMode/PowerModeView.swift @@ -1,4 +1,5 @@ import SwiftUI +import SwiftData extension View { func placeholder( @@ -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)) diff --git a/VoiceInk/PowerMode/PowerModeViewComponents.swift b/VoiceInk/PowerMode/PowerModeViewComponents.swift index 5048cba..9d006d5 100644 --- a/VoiceInk/PowerMode/PowerModeViewComponents.swift +++ b/VoiceInk/PowerMode/PowerModeViewComponents.swift @@ -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)