import SwiftUI struct FolderSetupView: View { @EnvironmentObject var store: ConnectionStore @State private var showBrowser = false @State private var selectedPath: String = "/" @State private var appeared = false private var connection: NASConnection? { store.savedConnection } var body: some View { ZStack { AppTheme.background.ignoresSafeArea() VStack(spacing: 0) { // Step indicator stepIndicator .padding(.top, 20) .padding(.bottom, 36) .opacity(appeared ? 1 : 0) .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.05), value: appeared) // Icon ZStack { Circle() .fill(AppTheme.surfaceSunken) .frame(width: 80, height: 80) Image(systemName: "folder.badge.plus") .font(.system(size: 32, weight: .light)) .foregroundStyle(AppTheme.ink) } .scaleEffect(appeared ? 1 : 0.85) .opacity(appeared ? 1 : 0) .animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.1), value: appeared) Spacer().frame(height: 28) // Title + description VStack(spacing: 8) { Text("Choose a destination") .font(.system(size: 22, weight: .semibold)) .foregroundStyle(AppTheme.ink) Text("Select the folder on your NAS where photos will be backed up.") .font(AppTheme.body()) .foregroundStyle(AppTheme.inkSecondary) .multilineTextAlignment(.center) .padding(.horizontal, 32) } .opacity(appeared ? 1 : 0) .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.15), value: appeared) Spacer().frame(height: 32) // Connection chip if let conn = connection { connectionChip(conn) .opacity(appeared ? 1 : 0) .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.2), value: appeared) } Spacer().frame(height: 16) // Selected path display / browse button Button(action: { showBrowser = true }) { HStack(spacing: 12) { Image(systemName: selectedPath == "/" ? "folder" : "folder.fill") .font(.system(size: 14, weight: .regular)) .foregroundStyle(selectedPath == "/" ? AppTheme.inkQuaternary : AppTheme.interactive) .frame(width: 20) Text(selectedPath == "/" ? "Tap to browse folders" : selectedPath) .font(AppTheme.body()) .foregroundStyle(selectedPath == "/" ? AppTheme.inkTertiary : AppTheme.ink) .lineLimit(2) .multilineTextAlignment(.leading) .frame(maxWidth: .infinity, alignment: .leading) Image(systemName: "chevron.right") .font(.system(size: 12, weight: .medium)) .foregroundStyle(AppTheme.inkQuaternary) } .padding(.horizontal, 16) .padding(.vertical, 14) .background(AppTheme.surfaceRaised) .clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous)) .shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2) } .buttonStyle(ScaleButtonStyle()) .padding(.horizontal, AppTheme.hPad) .opacity(appeared ? 1 : 0) .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.25), value: appeared) Spacer() // Confirm button Button(action: confirmFolder) { Text("Save This Folder") } .buttonStyle(PrimaryButtonStyle()) .padding(.horizontal, AppTheme.hPad) .disabled(selectedPath == "/") .opacity(selectedPath == "/" ? 0.4 : 1) .animation(.spring(response: 0.3, dampingFraction: 0.8), value: selectedPath == "/") .opacity(appeared ? 1 : 0) .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.3), value: appeared) Spacer().frame(height: 48) } } .sheet(isPresented: $showBrowser) { if let conn = connection { BrowseView(connection: conn, selectedPath: $selectedPath) } } .onAppear { appeared = true } } private var stepIndicator: some View { HStack(spacing: 6) { ForEach(1...3, id: \.self) { step in Capsule() .fill(step == 2 ? AppTheme.ink : AppTheme.inkQuaternary) .frame(width: step == 2 ? 20 : 6, height: 6) } } } private func connectionChip(_ conn: NASConnection) -> some View { HStack(spacing: 6) { Circle() .fill(AppTheme.positive) .frame(width: 6, height: 6) Text(conn.host) .font(AppTheme.micro()) .foregroundStyle(AppTheme.inkSecondary) Text("ยท") .foregroundStyle(AppTheme.inkQuaternary) Text(conn.nasProtocol.rawValue) .font(AppTheme.micro()) .foregroundStyle(AppTheme.inkTertiary) } .padding(.horizontal, 12) .padding(.vertical, 6) .background(AppTheme.surfaceSunken) .clipShape(Capsule(style: .continuous)) } private func confirmFolder() { guard selectedPath != "/", var conn = store.savedConnection else { return } conn.remotePath = selectedPath store.savedConnection = conn } }