feat: Kisani rebrand, step-based onboarding flow, dark mode fixes
- Rename app to Kisani in all UI text and Face ID prompt - Replace flat 2-state RootView with 5-step flow: ConnectView → LoginView → FolderSetupView → PhotoPermissionView → MainTabView - Remove NavigationStack from LoginView (was causing nested-stack crash); drive navigation via ConnectionStore.isSessionActive - Add FolderSetupView and PhotoPermissionView onboarding screens with step indicator (2/3, 3/3), spring entrance animations, and UGreen connection chip - Fix dark mode button invisibility: PrimaryButtonStyle and PillButtonStyle now use AppTheme.inkInverse; GhostButtonStyle border uses ink.opacity(0.25) - Add AppTheme.inkInverse adaptive token (dark bg ink on dark, white on light) - Add ConnectionStore.isSessionActive (non-persisted) and onboardingPhotoShown (UserDefaults-persisted) - Add os_log logging in LoginViewModel at auth start/success/failure - Remove dead Help button from ConnectView - UGreenCompatibilityBadge, KeychainStore, SavedConnections, extensions, PrivacyInfo.xcprivacy, unit test target and test stubs - AppTheme: full UIColor dynamic provider tokens for dark/light adaptive color - AppearanceMode enum + segmented picker in SettingsView - BackupView: enlarged ring, removed options card and linear progress bar - HistoryView: duration and bytes formatting, improved typography hierarchy Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Robin Kutesa
151
Features/Onboarding/FolderSetupView.swift
Normal file
151
Features/Onboarding/FolderSetupView.swift
Normal file
@@ -0,0 +1,151 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
129
Features/Onboarding/PhotoPermissionView.swift
Normal file
129
Features/Onboarding/PhotoPermissionView.swift
Normal file
@@ -0,0 +1,129 @@
|
||||
import SwiftUI
|
||||
import Photos
|
||||
|
||||
struct PhotoPermissionView: View {
|
||||
@EnvironmentObject var store: ConnectionStore
|
||||
@State private var appeared = false
|
||||
@State private var isRequesting = false
|
||||
|
||||
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)
|
||||
|
||||
Spacer()
|
||||
|
||||
// Icon
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(AppTheme.surfaceSunken)
|
||||
.frame(width: 96, height: 96)
|
||||
Image(systemName: "photo.stack")
|
||||
.font(.system(size: 38, 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: 32)
|
||||
|
||||
// Title + description
|
||||
VStack(spacing: 10) {
|
||||
Text("Access your photos")
|
||||
.font(.system(size: 24, weight: .semibold))
|
||||
.foregroundStyle(AppTheme.ink)
|
||||
|
||||
Text("Kisani needs read access to your photo library to find and back up your photos and videos to the NAS.")
|
||||
.font(AppTheme.body())
|
||||
.foregroundStyle(AppTheme.inkSecondary)
|
||||
.multilineTextAlignment(.center)
|
||||
.padding(.horizontal, 32)
|
||||
|
||||
// Detail chips
|
||||
HStack(spacing: 8) {
|
||||
detailChip(icon: "eye.slash", label: "Read-only")
|
||||
detailChip(icon: "lock.shield", label: "Stays on-device")
|
||||
detailChip(icon: "icloud.slash", label: "No cloud upload")
|
||||
}
|
||||
.padding(.top, 8)
|
||||
}
|
||||
.opacity(appeared ? 1 : 0)
|
||||
.animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.18), value: appeared)
|
||||
|
||||
Spacer()
|
||||
|
||||
// Buttons
|
||||
VStack(spacing: 12) {
|
||||
Button(action: requestAccess) {
|
||||
Group {
|
||||
if isRequesting {
|
||||
ProgressView().tint(AppTheme.inkInverse)
|
||||
} else {
|
||||
Text("Allow Photo Access")
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonStyle(PrimaryButtonStyle())
|
||||
.disabled(isRequesting)
|
||||
|
||||
Button(action: skipAndContinue) {
|
||||
Text("Not Now")
|
||||
}
|
||||
.buttonStyle(GhostButtonStyle())
|
||||
}
|
||||
.padding(.horizontal, AppTheme.hPad)
|
||||
.opacity(appeared ? 1 : 0)
|
||||
.animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.28), value: appeared)
|
||||
|
||||
Spacer().frame(height: 48)
|
||||
}
|
||||
}
|
||||
.onAppear { appeared = true }
|
||||
}
|
||||
|
||||
private var stepIndicator: some View {
|
||||
HStack(spacing: 6) {
|
||||
ForEach(1...3, id: \.self) { step in
|
||||
Capsule()
|
||||
.fill(step == 3 ? AppTheme.ink : AppTheme.inkQuaternary)
|
||||
.frame(width: step == 3 ? 20 : 6, height: 6)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func detailChip(icon: String, label: String) -> some View {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: icon)
|
||||
.font(.system(size: 10, weight: .medium))
|
||||
Text(label)
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
}
|
||||
.foregroundStyle(AppTheme.inkSecondary)
|
||||
.padding(.horizontal, 10)
|
||||
.padding(.vertical, 5)
|
||||
.background(AppTheme.surfaceSunken)
|
||||
.clipShape(Capsule(style: .continuous))
|
||||
}
|
||||
|
||||
private func requestAccess() {
|
||||
isRequesting = true
|
||||
PHPhotoLibrary.requestAuthorization(for: .readWrite) { _ in
|
||||
DispatchQueue.main.async {
|
||||
isRequesting = false
|
||||
store.onboardingPhotoShown = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func skipAndContinue() {
|
||||
store.onboardingPhotoShown = true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user