Implement fleshed out design

css/open.css

@@ -68,6 +68,21 @@ limitations under the License.
     background-size: 85%;
 }
 
+.OpeningClientView .clientIcon {
+    border-radius: 8px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 60px;
+    height: 60px;
+    overflow: hidden;
+    display: block;
+    margin-left: 16px;
+}
+
+.OpeningClientView .timeoutOptions {
+    margin-top: 15px;
+}
+
 .OpeningClientView .spinner {
     margin-top: 15px;
 }

src/open/OpenDefaultViewModel.js

@@ -32,6 +32,10 @@ export class OpenDefaultViewModel extends ViewModel {
         return this._client?.name;
     }
 
+    get iconUrl() {
+        return this._client?.icon;
+    }
+
     get openingDefault() {
         return !this._client;
     }
@@ -42,7 +46,7 @@ export class OpenDefaultViewModel extends ViewModel {
     }
 
     get webDeepLink() {
-        return this._client && this._webPlatform && this._client.getDeepLink(this._webPlatform);
+        return this._client && this._webPlatform && this._client.getDeepLink(this._webPlatform, this._link);
     }
 
     close() {
@@ -50,7 +54,7 @@ export class OpenDefaultViewModel extends ViewModel {
     }
 
     tryOpenLink() {
-        this._trying = true;
+        this.trying = true;
         // TODO actually try opening link
         this.setTimeout(() => {
             if (this.autoRedirect) {
@@ -58,7 +62,7 @@ export class OpenDefaultViewModel extends ViewModel {
                 // bother with visual updates.
                 this.close();
             } else {
-                this._trying = false;
+                this.trying = false;
                 this.emitChange();
             }
         }, 1000);

src/open/OpenLinkView.js

@@ -38,11 +38,32 @@ export class OpenLinkView extends TemplateView {
 
 class TryingLinkView extends TemplateView {
     render (t, vm) {
+        const explanation = vm.autoRedirect ?
+            "If this doesn't work, you will be redirected shortly." :
+            t.span(["Click ", t.strong(`"Open ${vm.name}"`), " to launch the desktop app."]);
+        const webLink = vm.webDeepLink ?
+            t.span(["You can also ", t.a({
+                href: vm.webDeepLink,
+                target: "_blank",
+                rel: "noopener noreferrer",
+            }, `open ${vm.name} in your browser.`)]) :
+            [];
+        const timeoutOptions = t.span({ className: "timeoutOptions" }, [
+            t.strong("Not working? "),
+            t.button({ className: "text", onClick: () => vm.tryOpenLink() }, "Try again"),
+            " or ",
+            t.button({ className: "text", onClick: () => vm.close() }, "select another app")
+        ]);
+                
         return t.div({ className: "OpeningClientView" }, [
-            t.div({className: "defaultAvatar"}),
-            t.h1("Trying to open your default client..."),
-            t.span("If this doesn't work, you will be redirected shortly."),
-            t.div({className: "spinner"}),
+            vm.iconUrl ? t.img({ className: "clientIcon", src: vm.iconUrl }) : t.div({className: "defaultAvatar"}),
+            t.h1(vm.name ? `Opening ${vm.name}` : "Trying to open your default client..."),
+            explanation,
+            webLink,
+            t.map(vm => vm.trying, trying => trying ?
+                t.div({className: "spinner"}) :
+                timeoutOptions
+            ),
         ]);
     }
 }

src/open/OpenLinkViewModel.js

@@ -73,6 +73,10 @@ export class OpenLinkViewModel extends ViewModel {
 
     closeDefault() {
         this.openDefaultViewModel = null;
+        // If no client was selected, this is a no-op.
+        // Otherwise, see ClientViewModel.back for some reasons
+        // why we do this.
+        this.preferences.setClient(undefined, undefined);
         this._activeOpen();
     }