badges on client list and install instructions after clicking native DL

src/preview/PreviewView.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import {TemplateView} from "../utils/TemplateView.js";
 import {ClientListView} from "../client/ClientListView.js";
+import {ClientView} from "../client/ClientView.js";
 
 export class PreviewView extends TemplateView {
 	render(t, vm) {
@@ -31,8 +32,18 @@ export class PreviewView extends TemplateView {
 					]),
 				]),
 				t.p({hidden: vm => !!vm.clientsViewModel}, t.button({onClick: () => vm.accept()}, vm => vm.acceptLabel)),
-				t.mapView(vm => vm.clientsViewModel, vm => vm ? new ClientListView(vm) : null)
+				t.mapView(vm => vm.clientsViewModel, childVM => childVM ? new ClientListView(childVM) : null),
+				t.mapView(vm => vm.missingClientViewModel, childVM => childVM ? new MissingClientView(childVM) : null),
 			])
 		]);
 	}
+}
+
+class MissingClientView extends TemplateView {
+	render(t, vm) {
+		return t.div({className: "MissingClientView"}, [
+			t.h3(`It looks like you don't have ${vm.name} installed.`),
+			t.view(new ClientView(vm)),
+		]);
+	}
 }

src/preview/PreviewViewModel.js

@@ -88,6 +88,11 @@ export class PreviewViewModel extends ViewModel {
 				const deepLink = this._preferredClient.getDeepLink(this._preferredPlatform, this._link);
 				this.openLink(deepLink);
 				// show "looks like you don't have the native app installed"
+				const protocol = new URL(deepLink).protocol;
+				const isWebProtocol = protocol === "http:" || protocol === "https:";
+				if (!isWebProtocol) {
+					this.missingClientViewModel = new ClientViewModel(this.childOptions({client: this._preferredClient, link: this._link}));
+				}
 			} else {
 				this.acceptInstructions = this._preferredClient.getLinkInstructions(this._preferredPlatform, this._link);
 			}