Near-monochrome palette (ink tokens), black primary buttons, spring animations, 0.5pt hairline dividers, shadow cards, squircle corners. Replaces all blue/coloured accents. Adds ButtonStyles component. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
147 lines
5.2 KiB
Swift
147 lines
5.2 KiB
Swift
import SwiftUI
|
|
|
|
struct SettingsView: View {
|
|
@EnvironmentObject var store: ConnectionStore
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
Color.white.ignoresSafeArea()
|
|
|
|
ScrollView {
|
|
VStack(spacing: AppTheme.sectionGap) {
|
|
LANTriggerSection()
|
|
mediaSection
|
|
quietHoursSection
|
|
notificationSection
|
|
}
|
|
.padding(.horizontal, AppTheme.hPad)
|
|
.padding(.top, 20)
|
|
.padding(.bottom, 48)
|
|
}
|
|
}
|
|
.navigationTitle("Settings")
|
|
.navigationBarTitleDisplayMode(.inline)
|
|
}
|
|
|
|
// MARK: — Media
|
|
|
|
private var mediaSection: some View {
|
|
VStack(alignment: .leading, spacing: 8) {
|
|
sectionLabel("WHAT TO BACK UP")
|
|
|
|
VStack(spacing: 0) {
|
|
ToggleRow(icon: "photo", title: "Photos",
|
|
isOn: $store.backupFilter.includePhotos)
|
|
hairline
|
|
ToggleRow(icon: "video", title: "Videos",
|
|
isOn: $store.backupFilter.includeVideos)
|
|
hairline
|
|
ToggleRow(icon: "camera.viewfinder", title: "Screenshots",
|
|
isOn: $store.backupFilter.includeScreenshots)
|
|
hairline
|
|
ToggleRow(icon: "rays", title: "RAW",
|
|
isOn: $store.backupFilter.includeRAW)
|
|
hairline
|
|
ToggleRow(icon: "doc.badge.clock", title: "New files only",
|
|
subtitle: "Skip files already on NAS",
|
|
isOn: $store.backupFilter.newFilesOnly)
|
|
}
|
|
.background(Color.white)
|
|
.clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
|
|
.shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
|
|
}
|
|
}
|
|
|
|
// MARK: — Quiet hours
|
|
|
|
private var quietHoursSection: some View {
|
|
VStack(alignment: .leading, spacing: 8) {
|
|
sectionLabel("QUIET HOURS")
|
|
|
|
VStack(spacing: 0) {
|
|
ToggleRow(icon: "moon", title: "Quiet hours",
|
|
subtitle: "No auto-backup during this window",
|
|
isOn: $store.quietHoursEnabled)
|
|
|
|
if store.quietHoursEnabled {
|
|
hairline
|
|
timePickerRow(label: "Start", hour: $store.quietHoursStart)
|
|
hairline
|
|
timePickerRow(label: "End", hour: $store.quietHoursEnd)
|
|
}
|
|
|
|
hairline
|
|
ToggleRow(icon: "bolt", title: "Only while charging",
|
|
subtitle: "Preserve battery on large libraries",
|
|
isOn: $store.chargingOnlyMode)
|
|
}
|
|
.background(Color.white)
|
|
.clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
|
|
.shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
|
|
.animation(.spring(response: 0.3, dampingFraction: 0.8), value: store.quietHoursEnabled)
|
|
}
|
|
}
|
|
|
|
private func timePickerRow(label: String, hour: Binding<Int>) -> some View {
|
|
HStack {
|
|
Text(label)
|
|
.font(AppTheme.body())
|
|
.foregroundStyle(AppTheme.ink)
|
|
Spacer()
|
|
Picker(label, selection: hour) {
|
|
ForEach(0..<24, id: \.self) { h in
|
|
Text(String(format: "%02d:00", h)).tag(h)
|
|
}
|
|
}
|
|
.pickerStyle(.menu)
|
|
.tint(AppTheme.inkSecondary)
|
|
}
|
|
.padding(.horizontal, AppTheme.cardPad)
|
|
.padding(.vertical, 12)
|
|
}
|
|
|
|
// MARK: — Notifications
|
|
|
|
private var notificationSection: some View {
|
|
VStack(alignment: .leading, spacing: 8) {
|
|
sectionLabel("NOTIFICATIONS")
|
|
|
|
VStack(spacing: 0) {
|
|
notifRow(icon: "bell", title: "On start", value: "Off")
|
|
hairline
|
|
notifRow(icon: "checkmark.circle", title: "On complete", value: "On")
|
|
hairline
|
|
notifRow(icon: "exclamationmark.triangle", title: "On errors", value: "On")
|
|
}
|
|
.background(Color.white)
|
|
.clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
|
|
.shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
|
|
}
|
|
}
|
|
|
|
private func notifRow(icon: String, title: String, value: String) -> some View {
|
|
HStack(spacing: 12) {
|
|
Image(systemName: icon)
|
|
.font(.system(size: 14, weight: .regular))
|
|
.foregroundStyle(AppTheme.inkSecondary)
|
|
.frame(width: 20)
|
|
Text(title)
|
|
.font(AppTheme.body())
|
|
.foregroundStyle(AppTheme.ink)
|
|
Spacer()
|
|
Text(value)
|
|
.font(AppTheme.caption())
|
|
.foregroundStyle(AppTheme.inkTertiary)
|
|
}
|
|
.padding(.horizontal, AppTheme.cardPad)
|
|
.padding(.vertical, 14)
|
|
}
|
|
|
|
private var hairline: some View {
|
|
Rectangle()
|
|
.fill(AppTheme.separator)
|
|
.frame(height: 0.5)
|
|
.padding(.leading, AppTheme.cardPad)
|
|
}
|
|
}
|