improve app ui for demo

Pocket Poster/Views/ContentView.swift

@@ -13,54 +13,88 @@ struct ContentView: View {
     @AppStorage("pbHash") var pbHash: String = ""
     
     @State var showTendiesImporter: Bool = false
-    @State var selectedTendie: URL? = nil
+    @State var selectedTendies: [URL]? = nil
     
     @State var showErrorAlert = false
+    @State var showSuccessAlert = false
     @State var lastError: String?
     
     var body: some View {
-        VStack {
-            TextField("App Hash", text: $pbHash)
-            
-            Button(action: {
-                showTendiesImporter.toggle()
-            }) {
-                Text("Select Tendie")
-            }
-            
-            if let selectedTendie = selectedTendie {
-                Text("Selected Tendie: \(selectedTendie)")
-                if pbHash != "" {
+        NavigationStack {
+            ScrollView {
+                Section {
+                    HStack {
+                        Text("App Hash:")
+                            .bold()
+                        Spacer()
+                    }
+                    TextField("App Hash", text: $pbHash)
+                }
+                .padding(.bottom, 5)
+                
+                Section {
                     Button(action: {
-                        do {
-                            try PosterBoardManager.applyTendie(selectedTendie, appHash: pbHash)
-                            lastError = "Success. Delete in files app."
-                            showErrorAlert.toggle()
-                        } catch {
-                            lastError = error.localizedDescription
-                            showErrorAlert.toggle()
-                        }
+                        showTendiesImporter.toggle()
                     }) {
-                        Text("Apply")
+                        Text("Select Tendies")
+                    }
+                    .buttonStyle(TintedButton(color: .green, fullwidth: true))
+                    
+                    if let selectedTendies = selectedTendies {
+                        HStack {
+                            Text("Selected Tendies:")
+                                .bold()
+                            Spacer()
+                        }
+                        ForEach(selectedTendies, id: \.self) { tendie in
+                            HStack {
+                                Text("- \(tendie.deletingPathExtension().lastPathComponent)")
+                                Spacer()
+                            }
+                        }
+                    }
+                }
+                
+                Section {
+                    if let selectedTendies = selectedTendies, pbHash != "" {
+                        Button(action: {
+                            do {
+                                try PosterBoardManager.applyTendies(selectedTendies, appHash: pbHash)
+                                lastError = "Please open PosterBoard in the Shortcuts app and then close it from the app switcher."
+                                showSuccessAlert.toggle()
+                            } catch {
+                                lastError = error.localizedDescription
+                                showErrorAlert.toggle()
+                            }
+                        }) {
+                            Text("Apply")
+                        }
+                        .buttonStyle(TintedButton(color: .blue, fullwidth: true))
                     }
                 }
             }
+            .padding()
+            .navigationTitle("Pocket Poster")
         }
-        .padding()
-        .fileImporter(isPresented: $showTendiesImporter, allowedContentTypes: [UTType(filenameExtension: "tendies", conformingTo: .data)!], onCompletion: { result in
-                switch result {
-                case .success(let url):
-                    selectedTendie = url
-                case .failure(let error):
-                    lastError = error.localizedDescription
-                    showErrorAlert.toggle()
-                }
-            })
-            .alert("Error", isPresented: $showErrorAlert) {
-                Button("OK") {}
-            } message: {
-                Text(lastError ?? "???")
+        .fileImporter(isPresented: $showTendiesImporter, allowedContentTypes: [UTType(filenameExtension: "tendies", conformingTo: .data)!], allowsMultipleSelection: true, onCompletion: { result in
+            switch result {
+            case .success(let url):
+                selectedTendies = url
+            case .failure(let error):
+                lastError = error.localizedDescription
+                showErrorAlert.toggle()
             }
+        })
+        .alert("Error", isPresented: $showErrorAlert) {
+            Button("OK") {}
+        } message: {
+            Text(lastError ?? "???")
+        }
+        .alert("Success!", isPresented: $showSuccessAlert) {
+            Button("OK") {}
+        } message: {
+            Text(lastError ?? "???")
+        }
     }
 }