very basic client list code

src/preview/PreviewView.js

@@ -15,18 +15,23 @@ limitations under the License.
 */
 
 import {TemplateView} from "../utils/TemplateView.js";
+import {ClientListView} from "../client/ClientListView.js";
 
 export class PreviewView extends TemplateView {
 	render(t, vm) {
 		return t.div({className: "PreviewView card"}, [
 			t.h2({className: {hidden: vm => !vm.loading}}, "Loading preview…"),
-			t.div({className: {preview: true, hidden: vm => vm.loading}}, [
-				t.p(t.img({className: "avatar", src: vm => vm.avatarUrl})),
-				t.div({className: "profileInfo"}, [
-					t.h2(vm => vm.name),
-					t.p(vm => vm.identifier),
-					t.p(["Preview from ", vm => vm.previewDomain]),
-				])
+			t.div({className: {hidden: vm => vm.loading}}, [
+				t.div({className: "preview"}, [
+					t.p(t.img({className: "avatar", src: vm => vm.avatarUrl})),
+					t.div({className: "profileInfo"}, [
+						t.h2(vm => vm.name),
+						t.p(vm => vm.identifier),
+						t.p(["Preview from ", vm => vm.previewDomain]),
+					]),
+				]),
+				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)
 			])
 		]);
 	}

src/preview/PreviewViewModel.js

@@ -17,17 +17,28 @@ limitations under the License.
 import {LinkKind} from "../Link.js";
 import {ViewModel} from "../utils/ViewModel.js";
 import {resolveServer} from "./HomeServer.js";
+import {ClientListViewModel} from "../client/ClientListViewModel.js";
 
 export class PreviewViewModel extends ViewModel {
 	constructor(options) {
 		super(options);
-		const {link, consentedServers} = options;
+		const {
+			link, consentedServers,
+			preferredClient, preferredPlatform, clients
+		} = options;
 		this._link = link;
 		this._consentedServers = consentedServers;
+		this._preferredClient = preferredClient;
+		// used to differentiate web from native if a client supports both
+		this._preferredPlatform = preferredPlatform;
+		this._clients = clients;
+
 		this.loading = false;
 		this.name = null;
 		this.avatarUrl = null;
 		this.previewDomain = null;
+		this.clientsViewModel = null;
+		this.acceptInstructions = null;
 	}
 
 	async load() {
@@ -62,4 +73,28 @@ export class PreviewViewModel extends ViewModel {
 	get identifier() {
 		return this._link.identifier;
 	}
+
+	get acceptLabel() {
+		if (this._preferredClient) {
+			return `Open in ${this._preferredClient.getName(this._preferredPlatform)}`;
+		} else {
+			return "Choose app";
+		}
+	}
+
+	accept() {
+		if (this._preferredClient) {
+			if (this._preferredClient.getLinkSupport(this._preferredPlatform, this._link)) {
+				const deepLink = this._preferredClient.getDeepLink(this._preferredPlatform, this._link);
+				this.openLink(deepLink);
+				// show "looks like you don't have the native app installed"
+			} else {
+				this.acceptInstructions = this._preferredClient.getLinkInstructions(this._preferredPlatform, this._link);
+			}
+		} else {
+			this.clientsViewModel = new ClientListViewModel(this.childOptions({clients: this._clients, link: this._link}));
+			// show client list
+		}
+		this.emitChange();
+	}
 }