✨ Image rendering on watchOS

ios/WatchRunner Watch App/ContentView.swift

@@ -1,3 +1,4 @@
+
 //
 //  ContentView.swift
 //  WatchRunner Watch App
@@ -8,6 +9,8 @@
 import SwiftUI
 import Combine
 import WatchConnectivity
+import Kingfisher // Import Kingfisher
+import KingfisherWebP // Import KingfisherWebP
 
 // MARK: - App State
 
@@ -139,8 +142,11 @@ enum ActivityData: Codable {
 
 struct SnPost: Codable, Identifiable {
     let id: String
-    let content: String?
     let title: String?
+    let content: String?
+    let publisher: SnPublisher
+    let attachments: [SnCloudFile]
+    let tags: [SnPostTag]
 }
 
 struct DiscoveryData: Codable {
@@ -194,7 +200,20 @@ struct SnRealm: Codable, Identifiable {
 struct SnPublisher: Codable, Identifiable {
     let id: String
     let name: String
+    let nick: String?
     let description: String?
+    let picture: SnCloudFile?
+}
+
+struct SnCloudFile: Codable, Identifiable {
+    let id: String
+    let mimeType: String?
+}
+
+struct SnPostTag: Codable, Identifiable {
+    let id: String
+    let slug: String
+    let name: String?
 }
 
 struct SnWebArticle: Codable, Identifiable {
@@ -203,6 +222,18 @@ struct SnWebArticle: Codable, Identifiable {
     let url: String
 }
 
+// MARK: - Helper Functions
+
+func getAttachmentUrl(for fileId: String, serverUrl: String) -> URL? {
+    let urlString: String
+    if fileId.starts(with: "http") {
+        urlString = fileId
+    } else {
+        urlString = "\(serverUrl)/drive/files/\(fileId)"
+    }
+    print("[watchOS] Generated image URL: \(urlString)")
+    return URL(string: urlString)
+}
 
 // MARK: - Network Service
 
@@ -210,7 +241,7 @@ class NetworkService {
     private let session = URLSession.shared
 
     func fetchActivities(filter: String, cursor: String? = nil, token: String, serverUrl: String) async throws -> [SnActivity] {
-        guard let baseURL = URL(string: serverUrl) else { 
+        guard let baseURL = URL(string: serverUrl) else {
             throw URLError(.badURL)
         }
         var components = URLComponents(url: baseURL.appendingPathComponent("/sphere/activities"), resolvingAgainstBaseURL: false)!
@@ -250,13 +281,19 @@ class ActivityViewModel: ObservableObject {
 
     private let networkService = NetworkService()
     let filter: String
-
-    init(filter: String) {
+    private var isMock = false
+    
+    init(filter: String, mockActivities: [SnActivity]? = nil) {
         self.filter = filter
+        if let mockActivities = mockActivities {
+            self.activities = mockActivities
+            self.isMock = true
+        }
     }
 
-    func fetchActivities(appState: AppState) async {
-        guard !isLoading, appState.isReady, let token = appState.token, let serverUrl = appState.serverUrl else { return }
+    func fetchActivities(token: String, serverUrl: String) async {
+        if isMock { return }
+        guard !isLoading else { return }
         isLoading = true
         errorMessage = nil
 
@@ -272,14 +309,178 @@ class ActivityViewModel: ObservableObject {
     }
 }
 
+// MARK: - Custom Layouts
+
+struct FlowLayout: Layout {
+    var alignment: HorizontalAlignment = .leading
+    var spacing: CGFloat = 10
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        let containerWidth = proposal.width ?? 0
+        let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
+
+        var currentX: CGFloat = 0
+        var currentY: CGFloat = 0
+        var lineHeight: CGFloat = 0
+        var totalHeight: CGFloat = 0
+
+        for size in sizes {
+            if currentX + size.width > containerWidth {
+                // New line
+                currentX = 0
+                currentY += lineHeight + spacing
+                totalHeight = currentY + size.height
+                lineHeight = 0
+            }
+
+            currentX += size.width + spacing
+            lineHeight = max(lineHeight, size.height)
+        }
+        totalHeight = currentY + lineHeight
+
+        return CGSize(width: containerWidth, height: totalHeight)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        let containerWidth = bounds.width
+        let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
+
+        var currentX: CGFloat = 0
+        var currentY: CGFloat = 0
+        var lineHeight: CGFloat = 0
+        var lineElements: [(offset: Int, size: CGSize)] = []
+
+        func placeLine() {
+            let lineWidth = lineElements.map { $0.size.width }.reduce(0, +) + CGFloat(lineElements.count - 1) * spacing
+            var startX: CGFloat = 0
+            switch alignment {
+            case .leading:
+                startX = bounds.minX
+            case .center:
+                startX = bounds.minX + (containerWidth - lineWidth) / 2
+            case .trailing:
+                startX = bounds.maxX - lineWidth
+            default:
+                startX = bounds.minX
+            }
+
+            var xOffset = startX
+            for (offset, size) in lineElements {
+                subviews[offset].place(at: CGPoint(x: xOffset, y: bounds.minY + currentY), proposal: ProposedViewSize(size)) // Use bounds.minY + currentY
+                xOffset += size.width + spacing
+            }
+            lineElements.removeAll() // Clear elements for the next line
+        }
+
+        for (offset, size) in sizes.enumerated() {
+            if currentX + size.width > containerWidth && !lineElements.isEmpty {
+                // New line
+                placeLine()
+                currentX = 0
+                currentY += lineHeight + spacing
+                lineHeight = 0
+            }
+
+            lineElements.append((offset, size))
+            currentX += size.width + spacing
+            lineHeight = max(lineHeight, size.height)
+        }
+        placeLine() // Place the last line
+    }
+}
+
+// MARK: - Image Loader
+
+@MainActor
+class ImageLoader: ObservableObject {
+    @Published var image: Image?
+    @Published var errorMessage: String?
+    @Published var isLoading = false
+
+    private var dataTask: URLSessionDataTask?
+    private let session: URLSession
+
+    init(session: URLSession = .shared) {
+        self.session = session
+    }
+
+    func loadImage(from initialUrl: URL, token: String) async {
+        isLoading = true
+        errorMessage = nil
+        image = nil
+
+        do {
+            // First request with Authorization header
+            var request = URLRequest(url: initialUrl)
+            request.setValue("AtField \(token)", forHTTPHeaderField: "Authorization")
+            request.setValue("SolianWatch/1.0", forHTTPHeaderField: "User-Agent")
+
+            let (data, response) = try await session.data(for: request)
+
+            if let httpResponse = response as? HTTPURLResponse {
+                if httpResponse.statusCode == 302, let redirectLocation = httpResponse.allHeaderFields["Location"] as? String, let redirectUrl = URL(string: redirectLocation) {
+                    print("[watchOS] Redirecting to: \(redirectUrl)")
+                    // Second request to the redirected URL (S3 signed URL) without Authorization header
+                    let (redirectData, _) = try await session.data(from: redirectUrl)
+                    if let uiImage = UIImage(data: redirectData) {
+                        self.image = Image(uiImage: uiImage)
+                    } else {
+                        // Try KingfisherWebP for WebP
+                        let processor = WebPProcessor.default // Correct usage
+                        if let kfImage = processor.process(item: .data(redirectData), options: KingfisherParsedOptionsInfo(
+                            [
+                                .processor(processor),
+                                .loadDiskFileSynchronously,
+                                .cacheOriginalImage
+                            ]
+                        )) {
+                            self.image = Image(uiImage: kfImage)
+                        } else {
+                            self.errorMessage = "Invalid image data from redirect (could not decode with KingfisherWebP)."
+                        }
+                    }
+                } else if httpResponse.statusCode == 200 {
+                    if let uiImage = UIImage(data: data) {
+                        self.image = Image(uiImage: uiImage)
+                    } else {
+                        // Try KingfisherWebP for WebP
+                        let processor = WebPProcessor.default // Correct usage
+                        if let kfImage = processor.process(item: .data(data), options: KingfisherParsedOptionsInfo(
+                            [
+                                .processor(processor),
+                                .loadDiskFileSynchronously,
+                                .cacheOriginalImage
+                            ]
+                        )) {
+                            self.image = Image(uiImage: kfImage)
+                        } else {
+                            self.errorMessage = "Invalid image data (could not decode with KingfisherWebP)."
+                        }
+                    }
+                } else {
+                    self.errorMessage = "HTTP Status Code: \(httpResponse.statusCode)"
+                }
+            }
+        } catch {
+            self.errorMessage = error.localizedDescription
+            print("[watchOS] Image loading failed: \(error.localizedDescription)")
+        }
+        isLoading = false
+    }
+
+    func cancel() {
+        dataTask?.cancel()
+    }
+}
+
 // MARK: - Views
 
 struct ActivityListView: View {
     @StateObject private var viewModel: ActivityViewModel
     @EnvironmentObject var appState: AppState
 
-    init(filter: String) {
-        _viewModel = StateObject(wrappedValue: ActivityViewModel(filter: filter))
+    init(filter: String, mockActivities: [SnActivity]? = nil) {
+        _viewModel = StateObject(wrappedValue: ActivityViewModel(filter: filter, mockActivities: mockActivities))
     }
 
     var body: some View {
@@ -302,7 +503,9 @@ struct ActivityListView: View {
                     switch activity.type {
                     case "posts.new", "posts.new.replies":
                         if case .post(let post) = activity.data {
-                            PostRowView(post: post)
+                            NavigationLink(destination: PostDetailView(post: post)) {
+                                PostRowView(post: post)
+                            }
                         }
                     case "discovery":
                          if case .discovery(let discoveryData) = activity.data {
@@ -315,7 +518,10 @@ struct ActivityListView: View {
             }
         }
         .task {
-            await viewModel.fetchActivities(appState: appState)
+            // Only fetch if appState is ready and token/serverUrl are available
+            if appState.isReady, let token = appState.token, let serverUrl = appState.serverUrl {
+                await viewModel.fetchActivities(token: token, serverUrl: serverUrl)
+            }
         }
         .navigationTitle(viewModel.filter)
         .navigationBarTitleDisplayMode(.inline)
@@ -324,12 +530,51 @@ struct ActivityListView: View {
 
 struct PostRowView: View {
     let post: SnPost
+    @EnvironmentObject var appState: AppState
+    @StateObject private var imageLoader = ImageLoader() // Instantiate ImageLoader
 
     var body: some View {
         VStack(alignment: .leading, spacing: 4) {
-            Text(post.title ?? "Post")
-                .font(.headline)
-            if let content = post.content {
+            HStack {
+                if let serverUrl = appState.serverUrl, let pictureId = post.publisher.picture?.id, let imageUrl = getAttachmentUrl(for: pictureId, serverUrl: serverUrl), let token = appState.token {
+                    if imageLoader.isLoading {
+                        ProgressView()
+                            .frame(width: 24, height: 24)
+                    } else if let image = imageLoader.image {
+                        image
+                            .resizable()
+                            .frame(width: 24, height: 24)
+                            .clipShape(Circle())
+                    } else if let errorMessage = imageLoader.errorMessage {
+                        Text("Failed: \(errorMessage)")
+                            .font(.caption)
+                            .foregroundColor(.red)
+                            .frame(width: 24, height: 24)
+                    } else {
+                        // Placeholder if no image and not loading
+                        Image(systemName: "person.circle.fill")
+                            .resizable()
+                            .frame(width: 24, height: 24)
+                            .clipShape(Circle())
+                            .foregroundColor(.gray)
+                    }
+                }
+                Text(post.publisher.nick ?? post.publisher.name)
+                    .font(.subheadline)
+                    .bold()
+            }
+            .task(id: post.publisher.picture?.id) { // Use task(id:) to reload image when pictureId changes
+                if let serverUrl = appState.serverUrl, let pictureId = post.publisher.picture?.id, let imageUrl = getAttachmentUrl(for: pictureId, serverUrl: serverUrl), let token = appState.token {
+                    await imageLoader.loadImage(from: imageUrl, token: token)
+                }
+            }
+            
+            if let title = post.title, !title.isEmpty {
+                Text(title)
+                    .font(.headline)
+            }
+            
+            if let content = post.content, !content.isEmpty {
                 Text(content)
                     .font(.body)
             }
@@ -337,30 +582,218 @@ struct PostRowView: View {
     }
 }
 
+struct PostDetailView: View {
+    let post: SnPost
+    @EnvironmentObject var appState: AppState
+    @StateObject private var publisherImageLoader = ImageLoader() // Instantiate ImageLoader for publisher avatar
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 8) {
+                HStack {
+                    if let serverUrl = appState.serverUrl, let pictureId = post.publisher.picture?.id, let imageUrl = getAttachmentUrl(for: pictureId, serverUrl: serverUrl), let token = appState.token {
+                        if publisherImageLoader.isLoading {
+                            ProgressView()
+                                .frame(width: 32, height: 32)
+                        } else if let image = publisherImageLoader.image {
+                            image
+                                .resizable()
+                                .frame(width: 32, height: 32)
+                                .clipShape(Circle())
+                        } else if let errorMessage = publisherImageLoader.errorMessage {
+                            Text("Failed: \(errorMessage)")
+                                .font(.caption)
+                                .foregroundColor(.red)
+                                .frame(width: 32, height: 32)
+                        } else {
+                            Image(systemName: "person.circle.fill")
+                                .resizable()
+                                .frame(width: 32, height: 32)
+                                .clipShape(Circle())
+                                .foregroundColor(.gray)
+                        }
+                    }
+                    Text("@\(post.publisher.name)")
+                        .font(.headline)
+                }
+                .task(id: post.publisher.picture?.id) { // Use task(id:) to reload image when pictureId changes
+                    if let serverUrl = appState.serverUrl, let pictureId = post.publisher.picture?.id, let imageUrl = getAttachmentUrl(for: pictureId, serverUrl: serverUrl), let token = appState.token {
+                        await publisherImageLoader.loadImage(from: imageUrl, token: token)
+                    }
+                }
+                
+                if let title = post.title, !title.isEmpty {
+                    Text(title)
+                        .font(.title2)
+                        .bold()
+                }
+                
+                if let content = post.content, !content.isEmpty {
+                    Text(content)
+                        .font(.body)
+                }
+                
+                if !post.attachments.isEmpty {
+                    Divider()
+                    Text("Attachments").font(.headline)
+                    ForEach(post.attachments) { attachment in
+                        AttachmentImageView(attachment: attachment)
+                    }
+                }
+                
+                if !post.tags.isEmpty {
+                    Divider()
+                    Text("Tags").font(.headline)
+                    FlowLayout(alignment: .leading, spacing: 4) {
+                        ForEach(post.tags) { tag in
+                            Text("#\(tag.name ?? tag.slug)")
+                                .font(.caption)
+                                .padding(.horizontal, 6)
+                                .padding(.vertical, 3)
+                                .background(Capsule().fill(Color.accentColor.opacity(0.2)))
+                                .cornerRadius(5)
+                        }
+                    }
+                }
+            }
+            .padding()
+        }
+        .navigationTitle("Post")
+    }
+}
+
+struct AttachmentImageView: View {
+    let attachment: SnCloudFile
+    @EnvironmentObject var appState: AppState
+    @StateObject private var imageLoader = ImageLoader()
+
+    var body: some View {
+        Group {
+            if imageLoader.isLoading {
+                ProgressView()
+            } else if let image = imageLoader.image {
+                image
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .frame(maxWidth: .infinity)
+            } else if let errorMessage = imageLoader.errorMessage {
+                Text("Failed to load attachment: \(errorMessage)")
+                    .font(.caption)
+                    .foregroundColor(.red)
+            } else {
+                Text("File: \(attachment.id)")
+            }
+        }
+        .task(id: attachment.id) {
+            if let serverUrl = appState.serverUrl, let imageUrl = getAttachmentUrl(for: attachment.id, serverUrl: serverUrl), let token = appState.token, attachment.mimeType?.starts(with: "image") == true {
+                await imageLoader.loadImage(from: imageUrl, token: token)
+            }
+        }
+    }
+}
+
 struct DiscoveryView: View {
     let discoveryData: DiscoveryData
 
     var body: some View {
-        VStack(alignment: .leading) {
-            Text("Discovery")
-                .font(.headline)
-                .padding(.bottom, 2)
-            ForEach(discoveryData.items) { item in
-                switch item.data {
-                case .realm(let realm):
-                    Text("Realm: \(realm.name)")
-                case .publisher(let publisher):
-                    Text("Publisher: \(publisher.name)")
-                case .article(let article):
-                    Text("Article: \(article.title)")
-                case .unknown:
-                    Text("Unknown discovery item")
-                }
+        NavigationLink(destination: DiscoveryDetailView(discoveryData: discoveryData)) {
+            VStack(alignment: .leading) {
+                Text("Discovery")
+                    .font(.headline)
+                Text("\(discoveryData.items.count) new items to discover")
+                    .font(.subheadline)
+                    .foregroundColor(.secondary)
             }
         }
     }
 }
 
+struct DiscoveryDetailView: View {
+    let discoveryData: DiscoveryData
+
+    var body: some View {
+        List(discoveryData.items) { item in
+            NavigationLink(destination: destinationView(for: item)) {
+                itemView(for: item)
+            }
+        }
+        .navigationTitle("Discovery")
+    }
+
+    @ViewBuilder
+    private func itemView(for item: DiscoveryItem) -> some View {
+        VStack(alignment: .leading) {
+            switch item.data {
+            case .realm(let realm):
+                Text("Realm").font(.headline)
+                Text(realm.name).foregroundColor(.secondary)
+            case .publisher(let publisher):
+                Text("Publisher").font(.headline)
+                Text(publisher.name).foregroundColor(.secondary)
+            case .article(let article):
+                Text("Article").font(.headline)
+                Text(article.title).foregroundColor(.secondary)
+            case .unknown:
+                Text("Unknown item")
+            }
+        }
+    }
+    
+    @ViewBuilder
+    private func destinationView(for item: DiscoveryItem) -> some View {
+        switch item.data {
+        case .realm(let realm):
+            RealmDetailView(realm: realm)
+        case .publisher(let publisher):
+            PublisherDetailView(publisher: publisher)
+        case .article(let article):
+            ArticleDetailView(article: article)
+        case .unknown:
+            Text("Detail view not available")
+        }
+    }
+}
+
+struct RealmDetailView: View {
+    let realm: SnRealm
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text(realm.name).font(.headline)
+            if let description = realm.description {
+                Text(description).font(.body)
+            }
+        }
+        .navigationTitle("Realm")
+    }
+}
+
+struct PublisherDetailView: View {
+    let publisher: SnPublisher
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text(publisher.name).font(.headline)
+            if let description = publisher.description {
+                Text(description).font(.body)
+            }
+        }
+        .navigationTitle("Publisher")
+    }
+}
+
+struct ArticleDetailView: View {
+    let article: SnWebArticle
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text(article.title).font(.headline)
+            Text(article.url).font(.caption).foregroundColor(.secondary)
+        }
+        .navigationTitle("Article")
+    }
+}
+
 
 // The main view with the TabView for filtering.
 struct ExploreView: View {
@@ -409,6 +842,36 @@ struct ContentView: View {
     }
 }
 
+#if DEBUG
+extension SnActivity {
+    static var mock: [SnActivity] {
+        let mockPublisher = SnPublisher(id: "pub1", name: "Mock Publisher", nick: "mock_nick", description: "A publisher for testing", picture: SnCloudFile(id: "mock_avatar_id", mimeType: "image/png"))
+        let mockTag1 = SnPostTag(id: "tag1", slug: "swiftui", name: "SwiftUI")
+        let mockTag2 = SnPostTag(id: "tag2", slug: "watchos", name: "watchOS")
+        let mockAttachment1 = SnCloudFile(id: "mock_image_id_1", mimeType: "image/jpeg")
+        let mockAttachment2 = SnCloudFile(id: "mock_image_id_2", mimeType: "image/png")
+
+        let post1 = SnPost(id: "1", title: "Hello from a Mock Post!", content: "This is a mock post content. It can be a bit longer to see how it wraps.", publisher: mockPublisher, attachments: [mockAttachment1, mockAttachment2], tags: [mockTag1, mockTag2])
+        let activity1 = SnActivity(id: "1", type: "posts.new", data: .post(post1), createdAt: Date())
+        
+        let realm1 = SnRealm(id: "r1", name: "SwiftUI Previews", description: "A place for designing in previews.")
+        let publisher1 = SnPublisher(id: "p1", name: "The Mock Times", nick: "mock_times", description: "All the news that's fit to mock.", picture: nil)
+        let article1 = SnWebArticle(id: "a1", title: "The Art of Mocking Data", url: "https://example.com")
+
+        let discoveryItem1 = DiscoveryItem(type: "realm", data: .realm(realm1))
+        let discoveryItem2 = DiscoveryItem(type: "publisher", data: .publisher(publisher1))
+        let discoveryItem3 = DiscoveryItem(type: "article", data: .article(article1))
+        let discoveryData = DiscoveryData(items: [discoveryItem1, discoveryItem2, discoveryItem3])
+        let activity2 = SnActivity(id: "2", type: "discovery", data: .discovery(discoveryData), createdAt: Date())
+        
+        return [activity1, activity2]
+    }
+}
+#endif
+
 #Preview {
-    ContentView()
-}
+    NavigationStack {
+        ActivityListView(filter: "Preview", mockActivities: SnActivity.mock)
+            .environmentObject(AppState())
+    }
+}