@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/ios/consumer/apps/ios/Sources/__APP_NAME_PASCAL__/ProfileEditorView.swift

@@ -0,0 +1,208 @@
+import PhotosUI
+import SwiftUI
+
+/// Create the user's profile after sign-up, or edit it later.
+struct ProfileEditorView: View {
+	enum Mode { case create, edit }
+
+	@EnvironmentObject private var app: AppModel
+	@EnvironmentObject private var social: SocialStore
+	@Environment(\.dismiss) private var dismiss
+
+	let mode: Mode
+
+	@State private var displayName = ""
+	@State private var handle = ""
+	@State private var bio = ""
+	@State private var pickedItem: PhotosPickerItem?
+	@State private var pickedImage: UIImage?
+	@State private var saving = false
+	@State private var errorMessage: String?
+	@State private var loaded = false
+
+	private let bioLimit = 150
+
+	var body: some View {
+		ScrollView {
+			VStack(spacing: 24) {
+				avatarPicker
+				VStack(spacing: 12) {
+					labeled("Name") {
+						TextField("Your name", text: $displayName)
+							.textContentType(.name)
+					}
+					labeled("Username") {
+						HStack(spacing: 2) {
+							Text("@").foregroundStyle(.secondary)
+							TextField("username", text: $handle)
+								.textContentType(.username)
+								.textInputAutocapitalization(.never)
+								.autocorrectionDisabled()
+								.onChange(of: handle) { _, value in
+									// The server accepts 2 to 24 of a-z, 0-9, ".", "_".
+									let allowed = Set("abcdefghijklmnopqrstuvwxyz0123456789._")
+									let cleaned = String(value.lowercased().filter { allowed.contains($0) }.prefix(24))
+									if cleaned != value { handle = cleaned }
+								}
+						}
+					}
+					labeled("Bio") {
+						TextField("A line about you", text: $bio, axis: .vertical)
+							.lineLimit(1...4)
+							.padding(.vertical, 14)
+					} trailing: {
+						Text("\(bio.count)/\(bioLimit)")
+							.font(.caption.monospacedDigit())
+							.foregroundStyle(bio.count > bioLimit ? .red : .secondary)
+					}
+				}
+				if let errorMessage {
+					Text(errorMessage)
+						.font(.footnote)
+						.foregroundStyle(.red)
+						.frame(maxWidth: .infinity, alignment: .leading)
+				}
+				if mode == .create {
+					Button("Continue", action: save)
+						.buttonStyle(PrimaryButtonStyle(isLoading: saving))
+						.disabled(!canSave || saving)
+						.opacity(canSave ? 1 : 0.6)
+					Button("Sign out") { Task { await app.signOut() } }
+						.font(.footnote)
+						.foregroundStyle(.secondary)
+				}
+			}
+			.padding(20)
+		}
+		.scrollDismissesKeyboard(.interactively)
+		.navigationTitle(mode == .create ? "Create your profile" : "Edit profile")
+		.navigationBarTitleDisplayMode(.inline)
+		.toolbar {
+			if mode == .edit {
+				ToolbarItem(placement: .cancellationAction) {
+					Button("Cancel") { dismiss() }
+				}
+				ToolbarItem(placement: .confirmationAction) {
+					if saving {
+						ProgressView()
+					} else {
+						Button("Done", action: save)
+							.fontWeight(.semibold)
+							.disabled(!canSave)
+					}
+				}
+			}
+		}
+		.onAppear(perform: fillFromProfile)
+		.onChange(of: pickedItem) { _, item in
+			Task { await loadPicked(item) }
+		}
+	}
+
+	private var avatarPicker: some View {
+		let me = social.me
+		return PhotosPicker(selection: $pickedItem, matching: .images) {
+			VStack(spacing: 10) {
+				ZStack(alignment: .bottomTrailing) {
+					Group {
+						if let pickedImage {
+							Image(uiImage: pickedImage)
+								.resizable()
+								.scaledToFill()
+								.frame(width: 96, height: 96)
+								.clipShape(Circle())
+						} else if let me, me.avatarUrl != nil {
+							AvatarView(profile: me, size: 96)
+						} else {
+							Circle()
+								.fill(Theme.fieldFill)
+								.frame(width: 96, height: 96)
+								.overlay {
+									Image(systemName: "person.fill")
+										.font(.system(size: 40))
+										.foregroundStyle(.tertiary)
+								}
+						}
+					}
+					Image(systemName: "camera.fill")
+						.font(.system(size: 13, weight: .semibold))
+						.foregroundStyle(.white)
+						.frame(width: 30, height: 30)
+						.background(Theme.accent, in: Circle())
+						.overlay(Circle().stroke(Color(uiColor: .systemBackground), lineWidth: 3))
+				}
+				Text(pickedImage == nil && me?.avatarUrl == nil ? "Add a profile photo" : "Change photo")
+					.font(.subheadline.weight(.semibold))
+					.foregroundStyle(Theme.accent)
+			}
+		}
+		.buttonStyle(.plain)
+		.padding(.top, 8)
+	}
+
+	private func labeled<Content: View, Trailing: View>(
+		_ title: String,
+		@ViewBuilder content: () -> Content,
+		@ViewBuilder trailing: () -> Trailing = { EmptyView() }
+	) -> some View {
+		VStack(alignment: .leading, spacing: 6) {
+			HStack {
+				Text(title)
+					.font(.footnote.weight(.semibold))
+					.foregroundStyle(.secondary)
+				Spacer()
+				trailing()
+			}
+			content()
+				.fieldStyle()
+		}
+	}
+
+	private var canSave: Bool {
+		!displayName.trimmingCharacters(in: .whitespaces).isEmpty
+			&& handle.count >= 2
+			&& bio.count <= bioLimit
+	}
+
+	private func fillFromProfile() {
+		guard !loaded else { return }
+		loaded = true
+		if let me = social.me {
+			displayName = me.displayName
+			handle = me.handle
+			bio = me.bio ?? ""
+		}
+	}
+
+	private func loadPicked(_ item: PhotosPickerItem?) async {
+		guard let item,
+		      let data = try? await item.loadTransferable(type: Data.self),
+		      let image = UIImage(data: data) else { return }
+		pickedImage = image
+	}
+
+	private func save() {
+		guard canSave, !saving else { return }
+		saving = true
+		errorMessage = nil
+		Task {
+			defer { saving = false }
+			do {
+				let avatar = pickedImage?.jpegForUpload(maxPixels: 600)
+				let profile = try await social.saveProfile(
+					handle: handle,
+					displayName: displayName.trimmingCharacters(in: .whitespaces),
+					bio: bio.trimmingCharacters(in: .whitespacesAndNewlines),
+					avatarJPEG: avatar
+				)
+				if mode == .create {
+					app.profileCreated(profile)
+				} else {
+					dismiss()
+				}
+			} catch {
+				errorMessage = friendlyMessage(error)
+			}
+		}
+	}
+}

package/templates/ios/consumer/apps/ios/Sources/__APP_NAME_PASCAL__/ProfileView.swift

@@ -0,0 +1,183 @@
+import SwiftUI
+
+/// A profile: photo, counts, bio, follow or edit, and a three-column grid of posts.
+struct ProfileView: View {
+	@EnvironmentObject private var app: AppModel
+	@EnvironmentObject private var social: SocialStore
+	let profileId: String
+	/// True on the Profile tab, where the toolbar holds sign-out.
+	let isRoot: Bool
+
+	@State private var editing = false
+	@State private var confirmSignOut = false
+
+	private var profile: Profile? { social.profile(profileId) }
+	private var isMe: Bool { profileId == social.myProfileId }
+	private var posts: [Post] { social.posts(by: profileId) }
+
+	var body: some View {
+		ScrollView {
+			VStack(alignment: .leading, spacing: 0) {
+				header
+				grid
+			}
+		}
+		.navigationTitle(profile?.handle ?? "")
+		.navigationBarTitleDisplayMode(.inline)
+		.toolbar {
+			if isRoot {
+				ToolbarItem(placement: .topBarTrailing) {
+					Menu {
+						Button("Edit profile", systemImage: "pencil") { editing = true }
+						Button("Sign out", systemImage: "rectangle.portrait.and.arrow.right", role: .destructive) {
+							confirmSignOut = true
+						}
+					} label: {
+						Image(systemName: "line.3.horizontal")
+					}
+					.accessibilityLabel("Settings")
+				}
+			}
+		}
+		.sheet(isPresented: $editing) {
+			NavigationStack { ProfileEditorView(mode: .edit) }
+				.environmentObject(social)
+		}
+		.confirmationDialog("Sign out of __APP_NAME__?", isPresented: $confirmSignOut, titleVisibility: .visible) {
+			Button("Sign out", role: .destructive) { Task { await app.signOut() } }
+		}
+		.modifier(RootRoutes(isRoot: isRoot))
+	}
+
+	private var header: some View {
+		VStack(alignment: .leading, spacing: 12) {
+			HStack(spacing: 20) {
+				StoryAvatar(profile: profile, size: 84, ringed: social.hasRecentPost(profileId))
+				HStack(spacing: 0) {
+					stat(posts.count, "posts")
+					stat(social.followerCount(profileId), social.followerCount(profileId) == 1 ? "follower" : "followers")
+					stat(social.followingIds(of: profileId).count, "following")
+				}
+			}
+			VStack(alignment: .leading, spacing: 2) {
+				Text(profile?.displayName ?? "")
+					.font(.subheadline.weight(.semibold))
+				if let bio = profile?.bio, !bio.isEmpty {
+					Text(bio)
+						.font(.subheadline)
+				}
+			}
+			actionButtons
+		}
+		.padding(.horizontal, 16)
+		.padding(.top, 8)
+		.padding(.bottom, 14)
+	}
+
+	private func stat(_ value: Int, _ label: String) -> some View {
+		VStack(spacing: 2) {
+			Text(value.compactCount)
+				.font(.headline)
+				.contentTransition(.numericText())
+			Text(label)
+				.font(.footnote)
+				.foregroundStyle(.secondary)
+		}
+		.frame(maxWidth: .infinity)
+		.animation(.snappy, value: value)
+	}
+
+	@ViewBuilder
+	private var actionButtons: some View {
+		HStack(spacing: 6) {
+			if isMe {
+				Button("Edit profile") { editing = true }
+					.buttonStyle(ProfileButtonStyle())
+				if let profile {
+					ShareLink(item: "@\(profile.handle) on __APP_NAME__") {
+						Text("Share profile")
+					}
+					.buttonStyle(ProfileButtonStyle())
+				}
+			} else {
+				let following = social.isFollowing(profileId)
+				Button(following ? "Following" : "Follow") {
+					social.toggleFollow(profileId)
+				}
+				.buttonStyle(ProfileButtonStyle(prominent: !following))
+				.sensoryFeedback(.selection, trigger: following)
+			}
+		}
+	}
+
+	@ViewBuilder
+	private var grid: some View {
+		Divider()
+		if posts.isEmpty {
+			VStack(spacing: 10) {
+				Image(systemName: "camera")
+					.font(.system(size: 34, weight: .light))
+					.frame(width: 72, height: 72)
+					.overlay(Circle().stroke(Color.primary, lineWidth: 1.5))
+				Text(isMe ? "Share your first photo" : "No posts yet")
+					.font(.title3.weight(.semibold))
+				if isMe {
+					Text("Photos you share show up on your profile.")
+						.font(.subheadline)
+						.foregroundStyle(.secondary)
+				}
+			}
+			.frame(maxWidth: .infinity)
+			.padding(.top, 48)
+		} else {
+			LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 2), count: 3), spacing: 2) {
+				ForEach(posts) { post in
+					NavigationLink(value: Route.profilePosts(profileId: profileId, startAt: post.id)) {
+						Color.clear
+							.aspectRatio(1, contentMode: .fit)
+							.overlay {
+								RemoteImage(url: social.media.thumbnailURL(for: post.imageUrl, width: 384))
+							}
+							.clipped()
+					}
+					.buttonStyle(.plain)
+					.accessibilityLabel(post.caption ?? "Photo")
+				}
+			}
+			.padding(.top, 2)
+			.animation(.snappy, value: posts.map(\.id))
+		}
+	}
+}
+
+/// Registers route destinations once, on the Profile tab's root view.
+/// Pushed profiles share their stack's registration.
+private struct RootRoutes: ViewModifier {
+	let isRoot: Bool
+
+	func body(content: Content) -> some View {
+		if isRoot { content.appRoutes() } else { content }
+	}
+}
+
+/// One person's posts as a feed, opened at the post tapped in their grid.
+struct ProfilePostsView: View {
+	@EnvironmentObject private var social: SocialStore
+	let profileId: String
+	let startAt: String
+
+	var body: some View {
+		ScrollViewReader { proxy in
+			ScrollView {
+				LazyVStack(spacing: 0) {
+					ForEach(social.posts(by: profileId)) { post in
+						PostCard(post: post).id(post.id)
+					}
+				}
+			}
+			.onAppear { proxy.scrollTo(startAt, anchor: .top) }
+		}
+		.navigationTitle("Posts")
+		.navigationBarTitleDisplayMode(.inline)
+	}
+}

package/templates/ios/consumer/apps/ios/Sources/__APP_NAME_PASCAL__/RootView.swift

@@ -1,40 +1,34 @@
 import SwiftUI
-import PylonClient
-import PylonSync
-import PylonSwiftUI
 
-/// Watches the live Profile collection. If we have a saved profileId
-/// AND a Profile row in the local store with that id, render the
-/// feed; otherwise, profile setup. The profile row appears in the
-/// store via the SyncEngine, so a fresh device sees its own profile
-/// pop in moments after `upsertProfile` returns.
+/// Picks the screen for the session state: sign in, profile setup, or the app.
 struct RootView: View {
-	@EnvironmentObject var session: AppSession
-	let engine: SyncEngine
-	@StateObject private var profiles: PylonQuery<Profile>
-
-	init(engine: SyncEngine) {
-		self.engine = engine
-		_profiles = StateObject(
-			wrappedValue: PylonQuery<Profile>(engine: engine, entity: "Profile"),
-		)
-	}
+	@EnvironmentObject private var app: AppModel
 
 	var body: some View {
-		Group {
-			if let me = currentProfile {
-				FeedView(engine: engine, me: me, profiles: profiles.rows)
-			} else {
-				ProfileSetupView(
-					engine: engine,
-					existingHandles: profiles.rows.map { $0.handle },
-				)
+		ZStack {
+			switch app.phase {
+			case .launching:
+				Wordmark(size: 40)
+					.frame(maxWidth: .infinity, maxHeight: .infinity)
+			case .signedOut:
+				AuthView()
+					.transition(.opacity)
+			case .needsProfile:
+				if let social = app.social {
+					NavigationStack {
+						ProfileEditorView(mode: .create)
+					}
+					.environmentObject(social)
+					.transition(.move(edge: .trailing))
+				}
+			case .ready:
+				if let social = app.social {
+					MainTabView()
+						.environmentObject(social)
+						.transition(.opacity)
+				}
 			}
 		}
-	}
-
-	private var currentProfile: Profile? {
-		guard let id = session.myProfileId else { return nil }
-		return profiles.rows.first { $0.id == id }
+		.animation(.easeInOut(duration: 0.3), value: app.phase)
 	}
 }