From d6f4a61b26f4bc7f7ae0a33cbc04fc90e427b871 Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Mon, 1 Apr 2024 13:33:53 +0100
Subject: [PATCH 1/9] chore(www): upgrade `servers-view` to Lit

---
 client/src/www/app/app.ts                  |   3 +-
 client/src/www/ui_components/app-root.js   |   9 +-
 client/src/www/views/servers_view/index.ts | 162 +++++++++++----------
 3 files changed, 93 insertions(+), 81 deletions(-)

diff --git a/client/src/www/app/app.ts b/client/src/www/app/app.ts
index e5802c0633..27f2fecef7 100644
--- a/client/src/www/app/app.ts
+++ b/client/src/www/app/app.ts
@@ -122,7 +122,7 @@ export class App {
     document.addEventListener('resume', this.syncConnectivityStateToServerCards.bind(this));
 
     // Register handlers for events fired by Polymer components.
-    this.rootEl.addEventListener('PromptAddServerRequested', this.requestPromptAddServer.bind(this));
+    this.rootEl.$.serversView.addEventListener('add-server', this.requestPromptAddServer.bind(this));
     this.rootEl.addEventListener('AddServerConfirmationRequested', this.requestAddServerConfirmation.bind(this));
     this.rootEl.addEventListener('AddServerRequested', this.requestAddServer.bind(this));
     this.rootEl.addEventListener('IgnoreServerRequested', this.requestIgnoreServer.bind(this));
@@ -300,7 +300,6 @@ export class App {
   }
 
   private requestPromptAddServer() {
-    this.rootEl.promptAddServer();
     this.pullClipboardText();
   }
 
diff --git a/client/src/www/ui_components/app-root.js b/client/src/www/ui_components/app-root.js
index f9183d4052..8241edcb07 100644
--- a/client/src/www/ui_components/app-root.js
+++ b/client/src/www/ui_components/app-root.js
@@ -339,7 +339,14 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         </app-header>
 
         <iron-pages id="pages" selected="[[page]]" attr-for-selected="name">
-          <servers-view name="servers" id="serversView" servers="[[servers]]" localize="[[localize]]" use-alt-access-message="[[useAltAccessMessage]]""></servers-view>
+          <servers-view
+            name="servers"
+            id="serversView"
+            servers="[[servers]]"
+            localize="[[localize]]"
+            use-alt-access-message="[[useAltAccessMessage]]"
+            on-add-server="promptAddServer"
+            ></servers-view>
           <template is="dom-if" if="{{contactViewFeatureFlag}}">
             <contact-view
               name="contact"
diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index 68d4d7830c..953fc1b9c7 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -14,14 +14,16 @@
   limitations under the License.
 */
 
-import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+import {css, html, LitElement, TemplateResult} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
 import './server_connection_indicator';
 import './server_list';
 
 import {ServerListItem as _ServerListItem} from './server_list_item';
 import {ServerConnectionState as _ServerConnectionState} from './server_connection_indicator';
+import { Localizer } from 'src/infrastructure/i18n';
 
 export type ServerListItem = _ServerListItem;
 
@@ -29,9 +31,10 @@ export type ServerListItem = _ServerListItem;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export import ServerConnectionState = _ServerConnectionState;
 
-Polymer({
-  _template: html`
-    <style>
+@customElement('servers-view')
+export class ServerList extends LitElement {
+  static styles = [
+    css`
       :host {
         width: 100%;
         height: 100%;
@@ -41,34 +44,25 @@ Polymer({
         height: -webkit-calc(100vh - 64px);
         font-size: 14px;
         line-height: 20px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: auto;
+        max-width: 400px;
       }
       :host a {
         color: var(--medium-green);
         text-decoration: none;
       }
-      .server-list-container {
+      .server-list {
         width: 100%;
         height: 100%;
-        max-width: 400px;
         margin: auto;
       }
-      .flex-column-container {
-        margin: 0 auto;
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        display: -webkit-flex;
-        -webkit-flex-wrap: wrap;
-        flex-wrap: wrap;
-        -webkit-flex-direction: column;
-        flex-direction: column;
-        -webkit-flex: 1;
-        flex: 1;
-        justify-content: center;
-      }
       .header {
-        font-size: 20px;
         color: rgba(0, 0, 0, 0.87);
+        font-size: 20px;
         line-height: 32px;
         margin-top: 34px;
       }
@@ -76,14 +70,14 @@ Polymer({
         color: rgba(0, 0, 0, 0.54);
       }
       .footer {
+        border-top: 1px solid rgba(0, 0, 0, 0.08);
         margin: 0;
-        padding: 24px 0 16px 0;
-        border-top-width: 1px;
-        border-top-color: rgba(0, 0, 0, 0.08);
-        border-top-style: solid;
+        padding: 24px 0 16px;
+        text-align: center;
       }
       paper-button {
         display: flex;
+        flex: 1;
         flex-direction: column;
         text-transform: none;
         outline: none; /* Remove outline for Safari. */
@@ -92,61 +86,73 @@ Polymer({
         width: 192px;
         height: 192px;
       }
-    </style>
-    <div class="server-list-container">
-      <template is="dom-if" if="[[shouldShowZeroState]]">
-        <div class="flex-column-container">
-          <div class="flex-column-container">
-            <paper-button noink="" on-tap="_requestPromptAddServer">
-              <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
-              <div class="header">[[localize('server-add')]]</div>
-              <div class="subtle">[[localize('server-add-zero-state-instructions')]]</div>
-            </paper-button>
-          </div>
-          <template is="dom-if" if="[[!useAltAccessMessage]]">
-            <div
-              class="footer subtle"
-              inner-h-t-m-l="[[localize('server-create-your-own-zero-state', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>', 'closeLink', '</a>')]]"
-            ></div>
-          </template>
-          <template is="dom-if" if="[[useAltAccessMessage]]">
-            <div
-              class="footer subtle"
-              inner-h-t-m-l="[[localize('server-create-your-own-zero-state-access', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>', 'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>', 'closeLink', '</a>')]]"
-            ></div>
-          </template>
-        </div>
-      </template>
+    `,
+  ];
+
+  @property({type: Function}) localize: Localizer = msg => msg;
+  @property({type: Boolean}) useAltAccessMessage = false;
+  @property({type: Array}) servers: ServerListItem[] = [];
+
+  get shouldShowZeroState() {
+    return this.servers ? this.servers.length === 0 : false;
+  }
+
+  private requestPromptAddServer() {
+    this.dispatchEvent(new CustomEvent('add-server', {bubbles: true, composed: true}));
+  }
+
+  private get zeroStateFooter(): TemplateResult {
+    let msg;
+    if (this.useAltAccessMessage) {
+      msg = this.localize(
+        'server-create-your-own-zero-state-access',
+        'breakLine', '<br/>',
+        'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>',
+        'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>',
+        'closeLink', '</a>');
+    } else {
+      msg = this.localize(
+        'server-create-your-own-zero-state',
+        'breakLine', '<br/>',
+        'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>',
+        'closeLink', '</a>');
+    }
+    return html ` <div class="footer subtle">${unsafeHTML(msg)}</div>`;
+  }
+
+  private get renderMainContent(): TemplateResult {
+    if (this.shouldShowZeroState) {
+      return html`
+        <paper-button
+          noink=""
+          @tap="${this.requestPromptAddServer}"
+        >
+          <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
+          <div class="header">${this.localize('server-add')}</div>
+          <div class="subtle">${this.localize('server-add-zero-state-instructions')}</div>
+        </paper-button>
+        ${this.zeroStateFooter}
+      `;
+    } else {
+      return html`
+        <server-list
+          .servers=${this.servers}
+          .localize=${this.localize}
+        ></server-list>
+      `;
+    }
+  }
+
+  render() {
+    return html`
+      ${this.renderMainContent}
       <user-comms-dialog
         id="autoConnectDialog"
-        localize="[[localize]]"
+        .localize=${this.localize}
         title-localization-key="auto-connect-dialog-title"
         detail-localization-key="auto-connect-dialog-detail"
         fire-event-on-hide="AutoConnectDialogDismissed"
       ></user-comms-dialog>
-      <template is="dom-if" if="[[!shouldShowZeroState]]">
-        <server-list id="serverList" servers="[[servers]]" localize="[[localize]]"></server-list>
-      </template>
-    </div>
-  `,
-
-  is: 'servers-view',
-
-  properties: {
-    localize: Function,
-    useAltAccessMessage: Boolean,
-    servers: Array,
-    shouldShowZeroState: {
-      type: Boolean,
-      computed: '_computeShouldShowZeroState(servers)',
-    },
-  },
-
-  _computeShouldShowZeroState(servers: ServerListItem[]) {
-    return servers ? servers.length === 0 : false;
-  },
-
-  _requestPromptAddServer() {
-    this.fire('PromptAddServerRequested', {});
-  },
-});
+    `;
+  }
+}

From 248b0d1e6c00bffbda9ad76c7afe663d62911334 Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Mon, 1 Apr 2024 14:05:30 +0100
Subject: [PATCH 2/9] Remove use of `paper-button` from `servers-view`.

---
 client/src/www/views/servers_view/index.ts | 33 +++++++++++++---------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index 953fc1b9c7..c14caf1118 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -18,6 +18,7 @@ import {css, html, LitElement, TemplateResult} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
+import '@material/mwc-button';
 import './server_connection_indicator';
 import './server_list';
 
@@ -60,6 +61,9 @@ export class ServerList extends LitElement {
         height: 100%;
         margin: auto;
       }
+      p {
+        margin: 0;
+      }
       .header {
         color: rgba(0, 0, 0, 0.87);
         font-size: 20px;
@@ -75,14 +79,18 @@ export class ServerList extends LitElement {
         padding: 24px 0 16px;
         text-align: center;
       }
-      paper-button {
+      [role="button"] {
+        align-items: center;
         display: flex;
-        flex: 1;
         flex-direction: column;
-        text-transform: none;
+        flex: 1;
+        justify-content: center;
         outline: none; /* Remove outline for Safari. */
       }
-      paper-button server-connection-indicator {
+      [role="button"]:hover {
+        cursor: pointer;
+      }
+      server-connection-indicator {
         width: 192px;
         height: 192px;
       }
@@ -117,21 +125,18 @@ export class ServerList extends LitElement {
         'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>',
         'closeLink', '</a>');
     }
-    return html ` <div class="footer subtle">${unsafeHTML(msg)}</div>`;
+    return html ` <p class="footer subtle">${unsafeHTML(msg)}</p>`;
   }
 
   private get renderMainContent(): TemplateResult {
     if (this.shouldShowZeroState) {
       return html`
-        <paper-button
-          noink=""
-          @tap="${this.requestPromptAddServer}"
-        >
-          <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
-          <div class="header">${this.localize('server-add')}</div>
-          <div class="subtle">${this.localize('server-add-zero-state-instructions')}</div>
-        </paper-button>
-        ${this.zeroStateFooter}
+      <div role="button" @click=${this.requestPromptAddServer}>
+        <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
+        <p class="header">${this.localize('server-add')}</p>
+        <p class="subtle">${this.localize('server-add-zero-state-instructions')}</p>
+      </div>
+      ${this.zeroStateFooter}
       `;
     } else {
       return html`

From b70ebffea80f1f364d7d42f3304bf69b874dd4c7 Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Tue, 2 Apr 2024 13:02:56 +0100
Subject: [PATCH 3/9] Use semantic elements for header and footer.

---
 client/src/www/views/servers_view/index.ts | 37 +++++++++++++++-------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index c14caf1118..3082672dd2 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -43,7 +43,7 @@ export class ServerList extends LitElement {
          * Subtract |header-height| to fix iOS padding, and |server-margin| to fix scrolling in Android.
          */
         height: -webkit-calc(100vh - 64px);
-        font-size: 14px;
+        font-size: .9rem;
         line-height: 20px;
 
         display: flex;
@@ -64,16 +64,29 @@ export class ServerList extends LitElement {
       p {
         margin: 0;
       }
-      .header {
-        color: rgba(0, 0, 0, 0.87);
-        font-size: 20px;
+      header {
         line-height: 32px;
         margin-top: 34px;
+        text-align: center;
       }
-      .subtle {
+      header,
+      footer {
         color: rgba(0, 0, 0, 0.54);
       }
-      .footer {
+      h1,
+      h2 {
+        margin: 0;
+      }
+      h1 {
+        color: rgba(0, 0, 0, 0.87);
+        font-size: 1.25rem;
+        font-weight: 400;
+      }
+      h2 {
+        font-size: .9rem;
+        font-weight: initial;
+      }
+      footer {
         border-top: 1px solid rgba(0, 0, 0, 0.08);
         margin: 0;
         padding: 24px 0 16px;
@@ -109,7 +122,7 @@ export class ServerList extends LitElement {
     this.dispatchEvent(new CustomEvent('add-server', {bubbles: true, composed: true}));
   }
 
-  private get zeroStateFooter(): TemplateResult {
+  private get zeroStateContent(): TemplateResult {
     let msg;
     if (this.useAltAccessMessage) {
       msg = this.localize(
@@ -125,7 +138,7 @@ export class ServerList extends LitElement {
         'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>',
         'closeLink', '</a>');
     }
-    return html ` <p class="footer subtle">${unsafeHTML(msg)}</p>`;
+    return html ` ${unsafeHTML(msg)} `;
   }
 
   private get renderMainContent(): TemplateResult {
@@ -133,10 +146,12 @@ export class ServerList extends LitElement {
       return html`
       <div role="button" @click=${this.requestPromptAddServer}>
         <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
-        <p class="header">${this.localize('server-add')}</p>
-        <p class="subtle">${this.localize('server-add-zero-state-instructions')}</p>
+        <header>
+          <h1>${this.localize('server-add')}</h1>
+          <h2>${this.localize('server-add-zero-state-instructions')}</h2>
+        </header>
       </div>
-      ${this.zeroStateFooter}
+      <footer>${this.zeroStateContent}</footer>
       `;
     } else {
       return html`

From ed19ca923395973f39facb601b060a835c2249af Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Tue, 2 Apr 2024 13:12:00 +0100
Subject: [PATCH 4/9] Use `<button>` element.

---
 client/src/www/views/servers_view/index.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index 3082672dd2..cc2451bea8 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -92,15 +92,17 @@ export class ServerList extends LitElement {
         padding: 24px 0 16px;
         text-align: center;
       }
-      [role="button"] {
+      button {
         align-items: center;
+        border: 0;
         display: flex;
         flex-direction: column;
         flex: 1;
         justify-content: center;
         outline: none; /* Remove outline for Safari. */
+        padding: 0;
       }
-      [role="button"]:hover {
+      button:hover {
         cursor: pointer;
       }
       server-connection-indicator {
@@ -144,13 +146,13 @@ export class ServerList extends LitElement {
   private get renderMainContent(): TemplateResult {
     if (this.shouldShowZeroState) {
       return html`
-      <div role="button" @click=${this.requestPromptAddServer}>
+      <button type="button" @click=${this.requestPromptAddServer}>
         <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
         <header>
           <h1>${this.localize('server-add')}</h1>
           <h2>${this.localize('server-add-zero-state-instructions')}</h2>
         </header>
-      </div>
+      </button>
       <footer>${this.zeroStateContent}</footer>
       `;
     } else {

From 0bef3ebdb658de0de82fedfd951387e80cf44f9a Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Tue, 2 Apr 2024 13:23:28 +0100
Subject: [PATCH 5/9] Change `line-height` values.

---
 client/src/www/views/servers_view/index.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index cc2451bea8..1b2725855d 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -37,20 +37,19 @@ export class ServerList extends LitElement {
   static styles = [
     css`
       :host {
-        width: 100%;
+        display: flex;
+        flex-direction: column;
+        font-size: .9rem;
         height: 100%;
         /* Use vh, as % does not work in iOS. |header-height|+|server-margin| = 64px.
          * Subtract |header-height| to fix iOS padding, and |server-margin| to fix scrolling in Android.
          */
         height: -webkit-calc(100vh - 64px);
-        font-size: .9rem;
-        line-height: 20px;
-
-        display: flex;
-        flex-direction: column;
         justify-content: center;
+        line-height: 1.25rem;
         margin: auto;
         max-width: 400px;
+        width: 100%;
       }
       :host a {
         color: var(--medium-green);
@@ -85,6 +84,7 @@ export class ServerList extends LitElement {
       h2 {
         font-size: .9rem;
         font-weight: initial;
+        line-height: 1.5;
       }
       footer {
         border-top: 1px solid rgba(0, 0, 0, 0.08);

From 3fd058b506c21809984e8265a48ca0523fd52a8c Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Tue, 2 Apr 2024 13:54:23 +0100
Subject: [PATCH 6/9] Rename `useAltAccessMessage` to
 `shouldShowAccessKeyWikiLink`.

---
 client/src/www/ui_components/app-root.js   |  4 +--
 client/src/www/views/servers_view/index.ts | 29 +++++++++++-----------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/client/src/www/ui_components/app-root.js b/client/src/www/ui_components/app-root.js
index 8241edcb07..97f44eedf0 100644
--- a/client/src/www/ui_components/app-root.js
+++ b/client/src/www/ui_components/app-root.js
@@ -344,9 +344,9 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
             id="serversView"
             servers="[[servers]]"
             localize="[[localize]]"
-            use-alt-access-message="[[useAltAccessMessage]]"
+            should-show-access-key-wiki-link="[[useAltAccessMessage]]"
             on-add-server="promptAddServer"
-            ></servers-view>
+          ></servers-view>
           <template is="dom-if" if="{{contactViewFeatureFlag}}">
             <contact-view
               name="contact"
diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index 1b2725855d..4d21a2f2d5 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -16,7 +16,7 @@
 
 import {css, html, LitElement, TemplateResult} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
-import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {unsafeHTML, UnsafeHTMLDirective} from 'lit/directives/unsafe-html.js';
 
 import '@material/mwc-button';
 import './server_connection_indicator';
@@ -31,6 +31,7 @@ export type ServerListItem = _ServerListItem;
 // (This value is used: it's exported.)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export import ServerConnectionState = _ServerConnectionState;
+import { DirectiveResult } from 'lit/directive';
 
 @customElement('servers-view')
 export class ServerList extends LitElement {
@@ -113,7 +114,7 @@ export class ServerList extends LitElement {
   ];
 
   @property({type: Function}) localize: Localizer = msg => msg;
-  @property({type: Boolean}) useAltAccessMessage = false;
+  @property({type: Boolean}) shouldShowAccessKeyWikiLink = false;
   @property({type: Array}) servers: ServerListItem[] = [];
 
   get shouldShowZeroState() {
@@ -124,9 +125,9 @@ export class ServerList extends LitElement {
     this.dispatchEvent(new CustomEvent('add-server', {bubbles: true, composed: true}));
   }
 
-  private get zeroStateContent(): TemplateResult {
+  private get zeroStateContent(): DirectiveResult<typeof UnsafeHTMLDirective> {
     let msg;
-    if (this.useAltAccessMessage) {
+    if (this.shouldShowAccessKeyWikiLink) {
       msg = this.localize(
         'server-create-your-own-zero-state-access',
         'breakLine', '<br/>',
@@ -140,21 +141,21 @@ export class ServerList extends LitElement {
         'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>',
         'closeLink', '</a>');
     }
-    return html ` ${unsafeHTML(msg)} `;
+    return unsafeHTML(msg);
   }
 
   private get renderMainContent(): TemplateResult {
     if (this.shouldShowZeroState) {
       return html`
-      <button type="button" @click=${this.requestPromptAddServer}>
-        <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
-        <header>
-          <h1>${this.localize('server-add')}</h1>
-          <h2>${this.localize('server-add-zero-state-instructions')}</h2>
-        </header>
-      </button>
-      <footer>${this.zeroStateContent}</footer>
-      `;
+        <button type="button" @click=${this.requestPromptAddServer}>
+          <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
+          <header>
+            <h1>${this.localize('server-add')}</h1>
+            <h2>${this.localize('server-add-zero-state-instructions')}</h2>
+          </header>
+        </button>
+        <footer>${this.zeroStateContent}</footer>
+        `;
     } else {
       return html`
         <server-list

From bda8d671463072dbb961ed5b2be43104e82b6af3 Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Tue, 2 Apr 2024 14:06:15 +0100
Subject: [PATCH 7/9] Hoist `<user-coms-dialog>` to the root element.

---
 client/src/www/app/app.ts                  |  2 +-
 client/src/www/ui_components/app-root.js   |  8 ++++++++
 client/src/www/views/servers_view/index.ts | 15 +--------------
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/client/src/www/app/app.ts b/client/src/www/app/app.ts
index 27f2fecef7..341d9f3eb3 100644
--- a/client/src/www/app/app.ts
+++ b/client/src/www/app/app.ts
@@ -439,7 +439,7 @@ export class App {
       console.error(`Failed to read auto-connect dialog status, assuming not dismissed: ${e}`);
     }
     if (!dismissed) {
-      this.rootEl.$.serversView.$.autoConnectDialog.show();
+      this.rootEl.$.autoConnectDialog.show();
     }
   }
 
diff --git a/client/src/www/ui_components/app-root.js b/client/src/www/ui_components/app-root.js
index 97f44eedf0..dae3997229 100644
--- a/client/src/www/ui_components/app-root.js
+++ b/client/src/www/ui_components/app-root.js
@@ -497,6 +497,14 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         root-path="[[rootPath]]"
         localize="[[localize]]"
       ></server-rename-dialog>
+
+      <user-comms-dialog
+        id="autoConnectDialog"
+        localize="[[localize]]"
+        title-localization-key="auto-connect-dialog-title"
+        detail-localization-key="auto-connect-dialog-detail"
+        fire-event-on-hide="AutoConnectDialogDismissed"
+      ></user-comms-dialog>
     `;
   }
 
diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index 4d21a2f2d5..4df8344051 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -144,7 +144,7 @@ export class ServerList extends LitElement {
     return unsafeHTML(msg);
   }
 
-  private get renderMainContent(): TemplateResult {
+  render() {
     if (this.shouldShowZeroState) {
       return html`
         <button type="button" @click=${this.requestPromptAddServer}>
@@ -165,17 +165,4 @@ export class ServerList extends LitElement {
       `;
     }
   }
-
-  render() {
-    return html`
-      ${this.renderMainContent}
-      <user-comms-dialog
-        id="autoConnectDialog"
-        .localize=${this.localize}
-        title-localization-key="auto-connect-dialog-title"
-        detail-localization-key="auto-connect-dialog-detail"
-        fire-event-on-hide="AutoConnectDialogDismissed"
-      ></user-comms-dialog>
-    `;
-  }
 }

From c6d530b89955eb6d3d37b9952b0be4308a21abd3 Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Tue, 2 Apr 2024 14:10:27 +0100
Subject: [PATCH 8/9] Remove unused import.

---
 client/src/www/views/servers_view/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index 4df8344051..ba953e8287 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import {css, html, LitElement, TemplateResult} from 'lit';
+import {css, html, LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {unsafeHTML, UnsafeHTMLDirective} from 'lit/directives/unsafe-html.js';
 

From be9602442766bfadff00c354cdb925519359afcb Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Tue, 2 Apr 2024 15:26:54 +0100
Subject: [PATCH 9/9] Add a section element.

---
 client/src/www/views/servers_view/index.ts | 43 +++++++++++-----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index ba953e8287..750a545310 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -56,25 +56,23 @@ export class ServerList extends LitElement {
         color: var(--medium-green);
         text-decoration: none;
       }
-      .server-list {
-        width: 100%;
-        height: 100%;
-        margin: auto;
-      }
-      p {
-        margin: 0;
+      section {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
       }
       header {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        justify-content: center;
         line-height: 32px;
-        margin-top: 34px;
         text-align: center;
       }
-      header,
+      h1,
+      h2,
       footer {
         color: rgba(0, 0, 0, 0.54);
-      }
-      h1,
-      h2 {
         margin: 0;
       }
       h1 {
@@ -89,7 +87,6 @@ export class ServerList extends LitElement {
       }
       footer {
         border-top: 1px solid rgba(0, 0, 0, 0.08);
-        margin: 0;
         padding: 24px 0 16px;
         text-align: center;
       }
@@ -98,7 +95,6 @@ export class ServerList extends LitElement {
         border: 0;
         display: flex;
         flex-direction: column;
-        flex: 1;
         justify-content: center;
         outline: none; /* Remove outline for Safari. */
         padding: 0;
@@ -107,8 +103,9 @@ export class ServerList extends LitElement {
         cursor: pointer;
       }
       server-connection-indicator {
-        width: 192px;
         height: 192px;
+        margin-bottom: 34px;
+        width: 192px;
       }
     `,
   ];
@@ -147,15 +144,17 @@ export class ServerList extends LitElement {
   render() {
     if (this.shouldShowZeroState) {
       return html`
-        <button type="button" @click=${this.requestPromptAddServer}>
-          <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
+        <section>
           <header>
-            <h1>${this.localize('server-add')}</h1>
-            <h2>${this.localize('server-add-zero-state-instructions')}</h2>
+            <button type="button" @click=${this.requestPromptAddServer}>
+              <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
+              <h1>${this.localize('server-add')}</h1>
+              <h2>${this.localize('server-add-zero-state-instructions')}</h2>
+            </button>
           </header>
-        </button>
-        <footer>${this.zeroStateContent}</footer>
-        `;
+          <footer>${this.zeroStateContent}</footer>
+        </section>
+      `;
     } else {
       return html`
         <server-list