Remove probably useless console line

2020-09-23 22:28:24 +01:00
192 changed files with 19311 additions and 12009 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -1,14 +0,0 @@
-# top-most EditorConfig file
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-end_of_line = lf
-insert_final_newline = true
-charset = utf-8
-indent_style = space
-indent_size = 4
-
-# Matches multiple files with brace expansion notation
-# Set default charset
-# [*.{js,py}]
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,14 +1,7 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es6": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "ecmaVersion": 2020,
-        "sourceType": "module"
-    },
-    "rules": {
-        "no-console": "off"
-    }
-};
+    "extends": [
+        "matrix-org/ts",
+        "matrix-org/react",
+    ],
+}
+
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,27 @@
-node_modules
-build
-*.tar.gz
-/.idea
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
 .DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.vercel
+
+storybook-static
--- a/.storybook/main.js
+++ b/.storybook/main.js
@ -0,0 +1,32 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+module.exports = {
+    stories: ['../src/**/*.stories.tsx'],
+    addons: [
+        '@storybook/preset-create-react-app',
+        '@storybook/addon-actions',
+        '@storybook/addon-links',
+        '@storybook/addon-storysource',
+        '@storybook/addon-viewport/register',
+        '@storybook/addon-a11y/register',
+        '@storybook/addon-knobs/register',
+        '@storybook/addon-actions/register',
+        'storybook-addon-designs',
+        '@storybook/addon-backgrounds/register',
+    ],
+};
+
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@ -0,0 +1,45 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { addDecorator } from '@storybook/react';
+import { withA11y } from '@storybook/addon-a11y';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withDesign } from 'storybook-addon-designs'
+import { addParameters } from '@storybook/react';
+
+import SingleColumn from '../src/layouts/SingleColumn';
+
+// Default styles
+import "../src/index.scss";
+
+addDecorator(
+    storyFn => <SingleColumn>{storyFn()}</SingleColumn>
+);
+
+addDecorator(withA11y);
+
+addDecorator(withKnobs);
+
+addDecorator(withDesign);
+
+addParameters({
+    backgrounds: [
+        {name: 'light', value: '#F4F4F4', default: true},
+        {name: 'white', value: '#FFFFFF'},
+    ],
+});
+
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -1,59 +0,0 @@
-# Contributing to Matrix.to
-
-Thank you for taking the time to contribute to Matrix!
-
-This is the repository for Matrix.to, a simple url redirection service for the Matrix.org ecosystem which lets users share links to matrix entities without being tied to a specific app.
-
-## Sign off
-
-We ask that everybody who contributes to this project signs off their contributions, as explained below.
-
-We follow a simple 'inbound=outbound' model for contributions: the act of submitting an 'inbound' contribution means that the contributor agrees to license their contribution under the same terms as the project's overall 'outbound' license - in our case, this is Apache Software License v2 (see [LICENSE](./LICENSE)).
-
-In order to have a concrete record that your contribution is intentional and you agree to license it under the same terms as the project's license, we've adopted the same lightweight approach used by the [Linux Kernel](https://www.kernel.org/doc/html/latest/process/submitting-patches.html), [Docker](https://github.com/docker/docker/blob/master/CONTRIBUTING.md), and many other projects: the [Developer Certificate of Origin](https://developercertificate.org/) (DCO). This is a simple declaration that you wrote the contribution or otherwise have the right to contribute it to Matrix:
-
-```
-Developer Certificate of Origin
-Version 1.1
-
-Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
-660 York Street, Suite 102,
-San Francisco, CA 94110 USA
-
-Everyone is permitted to copy and distribute verbatim copies of this
-license document, but changing it is not allowed.
-
-Developer's Certificate of Origin 1.1
-
-By making a contribution to this project, I certify that:
-
-(a) The contribution was created in whole or in part by me and I
-    have the right to submit it under the open source license
-    indicated in the file; or
-
-(b) The contribution is based upon previous work that, to the best
-    of my knowledge, is covered under an appropriate open source
-    license and I have the right under that license to submit that
-    work with modifications, whether created in whole or in part
-    by me, under the same open source license (unless I am
-    permitted to submit under a different license), as indicated
-    in the file; or
-
-(c) The contribution was provided directly to me by some other
-    person who certified (a), (b) or (c) and I have not modified
-    it.
-
-(d) I understand and agree that this project and the contribution
-    are public and that a record of the contribution (including all
-    personal information I submit with it, including my sign-off) is
-    maintained indefinitely and may be redistributed consistent with
-    this project or the open source license(s) involved.
-```
-
-If you agree to this for your contribution, then all that's needed is to include the line in your commit or pull request comment:
-
-```
-Signed-off-by: Your Name <your@email.example.org>
-```
-
-Git allows you to add this signoff automatically when using the `-s` flag to `git commit`, which uses the name and email set in your `user.name` and `user.email` git configs.
--- a/19
+++ b/19
@ -1,19 +0,0 @@
-FROM node:latest
-
-# Set working directory
-WORKDIR /app
-
-# Copy package files first to leverage Docker cache
-COPY package.json yarn.lock ./
-
-# Install dependencies
-RUN yarn install
-
-# Copy the rest of the application
-COPY . .
-
-# Expose port 5000
-EXPOSE 5000
-
-# Start the application
-CMD ["yarn", "start"]
--- a/177
+++ b/177
@ -1,177 +0,0 @@
-
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
--- a/README.md
+++ b/README.md
@ -1,54 +1,10 @@
-# dm.sij.law
-This repo is cloned from the official Matrix.to repo on Github. I've added a Dockerfile and will make modifications in the future. The current version is live at [dm.sij.law](https://dm.sij.law)
-
-## First clone the repo
-```bash
-git clone https://sij.ai/sij/env.esq.git
-```
-
-## Next build the image
-```bash
-docker build -t matrix-to .
-```
-
-## Then run it
-```bash
-docker run -d \
-  --name matrix-to \
-  -p 3636:5000 \
-  matrix-to
-```
-
-# EVERYTHING BELOW HERE IS ORIGINAL DOCUMENTATION
-
-## Matrix.to
+# Matrix.to

 Matrix.to is a simple url redirection service for the Matrix.org ecosystem
 which lets users share links to matrix entities without being tied to a
 specific app.
 Stylistically it serves as a landing page for rooms and communities.

-## How can I put a badge on my website linking to my matrix room?
-
-You can use the badge image we've put up at https://matrix.to/img/matrix-badge.svg, and use it in a link like this:
-
-[![Chat on Matrix](https://matrix.to/img/matrix-badge.svg)](https://matrix.to/#/#matrix.to:matrix.org)
-
-You can use this Markdown:
-```md
-[![Chat on Matrix](https://matrix.to/img/matrix-badge.svg)](https://matrix.to/#/#matrix.to:matrix.org)
-```
-
-Or this HTML:
-
-```html
-<a href="https://matrix.to/#/#matrix.to:matrix.org" rel="noopener" target="_blank"><img src="https://matrix.to/img/matrix-badge.svg" alt="Chat on Matrix"></a>
-```
-
-to show the badge.
-
-## How does matrix.to work?
-
 Matrix.to preserves user privacy by not sharing any information about the links
 being followed with the Matrix.to server - the redirection is calculated
 entirely clientside using JavaScript, and the link details is hidden behind a
@ -65,8 +21,6 @@ point at an alternative deployment of the service.  The Matrix.to service could
 also be hosted in an immutable/signed environment such as IPFS to further
 increase its availability and avoid tampering.

-## URL Scheme
-
 The matrix.to URL scheme is

 | Entity type: | Example URL                                                       |
@ -86,23 +40,10 @@ visitors.
 (Technically the # and @ in the URL fragment should probably be escaped, but in
 practice for legibility we bend the rules and include it verbatim)

-### Optional parameters
-
-https://matrix.to/#/#matrix:matrix.org?web-instance[element.io]=chat.mozilla.org
-
- `client`, e.g. `client=im.fluffychat`, `client=element.io`
- `web-instance[]`, e.g. `web-instance[element.io]=chat.mozilla.org`.
-    - For [matrix.to](https://matrix.to/), we have a list of [trusted web instances configured](src/open/clients/Element.js) (see `trustedWebInstances`).
-  `via`, e.g. `via=mozilla.org`
-
 You can discuss matrix.to in
 [`#matrix.to:matrix.org`](https://matrix.to/#/#matrix.to:matrix.org)

-## Build Instructions
+A development build of matrix-two can be found at https://matrix-to.vercel.app

-1. Install [yarn](https://classic.yarnpkg.com/en/docs/install)
-1. `git clone https://github.com/matrix-org/matrix.to`
-1. `cd matrix.to`
-1. `yarn`
-1. `yarn start`
-1. Go to http://localhost:5000 in your browser
+A preview of all components can be found at
+https://matrix-to-storybook.vercel.app
--- a/css/client.css
+++ b/css/client.css
@ -1,98 +0,0 @@
-.ClientListView h2 {
-    text-align: center;
-    margin: 18px 0;
-}
-
-.ClientListView .filterOption {
-    display: flex;
-    align-items: center;
-    margin: 8px 0;
-}
-
-.ClientView {
-    border: 1px solid #E6E6E6;
-    border-radius: 8px;
-    margin: 16px 0;
-    padding: 16px;
-}
-
-.ClientView.isPreferred {
-    border: 3px solid var(--link);
-    box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.05);
-}
-
-.ClientView .hostedBanner {
-    text-align: center;
-    margin-bottom: 29px;
-    padding: 4px 0;
-    line-height: 20px;
-    border-radius: 8px;
-    font-weight: bold;
-    font-size: 16px;
-    background-color: var(--lightgrey);
-}
-
-.ClientView .header {
-    display: flex;
-}
-
-.ClientView .description {
-    flex: 1;
-}
-
-.ClientView h3 {
-    margin-top: 0;
-}
-
-.ClientView .clientIcon {
-    border-radius: 8px;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 60px;
-    height: 60px;
-    overflow: hidden;
-    display: block;
-    margin-left: 16px;
-}
-
-.ClientView .platforms {
-    background-image: url('../images/platform-icon.svg');
-    background-repeat: no-repeat;
-    background-position: 0 center;
-    padding-left: 28px;
-}
-
-.ClientView .actions a.badge {
-    display: inline-block;
-    height: 40px;
-    margin: 8px 16px 8px 0;
-}
-
-.ClientView .actions img {
-    height: 100%;
-}
-
-.ClientView .back {
-    margin-top: 22px;
-}
-
-.InstallClientView .instructions button {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-color: transparent;
-    padding: 4px;
-    border: none;
-    width: 24px;
-    height: 24px;
-    margin: 8px;
-    vertical-align: middle;
-}
-
-.InstallClientView .instructions button.copy {
-    background-image: url('../images/copy.svg');
-}
-
-.InstallClientView .instructions button.tick {
-    background-image: url('../images/tick-dark.svg');
-}
-
--- a/css/create.css
+++ b/css/create.css
@ -1,13 +0,0 @@
-.CreateLinkView h2 {
-    padding: 0 40px;
-    word-break: break-all;
-    text-align: center;
-}
-
-.CreateLinkView form {
-    margin-top: 36px;
-}
-
-.CreateLinkView form > *:not(:first-child) {
-    margin-top: 24px;
-}
--- a/css/main.css
+++ b/css/main.css
@ -1,223 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-@import url('spinner.css');
-@import url('client.css');
-@import url('preview.css');
-@import url('create.css');
-@import url('open.css');
-
-:root {
-    --app-background: #f4f4f4;
-    --background: #ffffff;
-    --foreground: #000000;
-    --font: #333333;
-    --grey: #666666;
-    --accent: #0098d4;
-    --error: #d6001c;
-    --link: #0098d4;
-    --borders: #f4f4f4;
-    --lightgrey: #E6E6E6;
-    --spinner-stroke-size: 2px;
-}
-
-html {
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    background-color: var(--app-background);
-    background-image: url('../images/background.svg');
-    background-attachment: fixed;
-    background-repeat: no-repeat;
-    background-size: auto;
-    background-position: center -50px;
-    height: 100%;
-    width: 100%;
-    font-size: 14px;
-    color: var(--font);
-    padding: 120px 0 0 0;
-    margin: 0;
-}
-
-noscript {
-    display: block;
-    padding: 20px;
-}
-
-p { line-height: 150%; }
-a { text-decoration: none; }
-
-h1 { font-size: 24px; }
-h2 { font-size: 21px; }
-h3 { font-size: 16px; }
-
-body,
-button,
-input,
-textarea {
-    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-    font-style: normal;
-}
-
-button, input[type=submit] {
-    cursor: pointer;
-}
-
-button, input {
-    font-size: inherit;
-    font-weight: inherit;
-}
-
-input[type="checkbox"], input[type="radio"] {
-    margin: 0 8px 0 0;
-}
-
-.RootView {
-    margin: 0 auto;
-    max-width: 480px;
-    width: 100%;
-}
-
-.card {
-    background-color: var(--background);
-    border-radius: 16px;
-    box-shadow: 0px 18px 24px rgba(0, 0, 0, 0.06);
-}
-
-.card, .footer {
-    padding: 2rem;
-}
-
-.hidden {
-    display: none !important;
-}
-
-
-@media screen and (max-width: 480px) {
-    body {
-        background-image: none;
-        background-color: var(--background);
-        padding: 0;
-    }
-
-    .card {
-        border-radius: unset;
-        box-shadow: unset;
-    }
-}
-
-.footer .links li:not(:first-child) {
-    margin-left: 0.5em;
-}
-
-.footer .links li:not(:first-child)::before {
-    content: "·";
-    margin-right: 0.5em;
-}
-
-.footer .links li {
-    display: inline-block;
-}
-
-.footer .links {
-    font-size: 12px;
-    list-style: none;
-    padding: 0;
-}
-
-a, button.text {
-    color: var(--link);
-}
-
-button.text {
-    background: none;
-    border: none;
-    font-style: normal;
-    font-weight: normal;
-    font-size: inherit;
-    padding: 8px 0;
-    margin: -8px 0;
-}
-
-button.text:hover {
-    cursor: pointer;
-}
-
-.primary, .secondary {
-    text-decoration: none;
-    font-weight: bold;
-    text-align: center;
-    padding: 12px 8px;
-    margin: 8px 0;
-}
-
-.secondary {
-    background: var(--background);
-    color: var(--link);
-    border: 1px solid var(--link);
-    border-radius: 32px;
-}
-
-.primary {
-    background: var(--link);
-    color: var(--background);
-    border-radius: 32px;
-}
-
-.primary.icon, .secondary.icon {
-    background-repeat: no-repeat;
-    background-position: 12px center;
-}
-
-.icon.link { background-image: url('../images/link.svg'); }
-.icon.tick { background-image: url('../images/tick.svg'); }
-.icon.copy { background-image: url('../images/copy.svg'); }
-
-button.primary, input[type='submit'].primary, button.secondary, input[type='submit'].secondary {
-    border: none;
-    font-size: inherit;
-}
-
-input[type='text'].large {
-    width: 100%;
-    padding: 12px;
-    background: var(--background);
-    border: 1px solid var(--foreground);
-    border-radius: 16px;
-    font-size: 14px;
-}
-
-.fullwidth {
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.LoadServerPolicyView {
-    display: flex;
-}
-
-.LoadServerPolicyView .spinner {
-    width: 32px;
-    height: 32px;
-    margin-right: 12px;
-}
-
-.LoadServerPolicyView h2 {
-    margin-top: 0;
-}
--- a/css/open.css
+++ b/css/open.css
@ -1,52 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.OpenLinkView .caption {
-    color: var(--grey);
-    font-size: 12px;
-}
-
-.ServerConsentView .actions label {
-    display: flex;
-    align-items: center;
-}
-
-.ServerConsentView .actions {
-    margin-top: 24px;
-    display: flex;
-    align-items: center;
-}
-
-.ServerConsentView input[type=submit] {
-    flex: 1;
-    margin-left: 32px;
-}
-
-.ServerOptions div {
-    margin: 8px 0;
-}
-
-.ServerOptions label {
-    display: flex;
-    align-items: center;
-}
-
-.ServerOptions label > .line {
-    flex: 1;
-    border: none;
-    border-bottom: 1px solid var(--grey);
-    padding: 4px 0;
-}
--- a/css/preview.css
+++ b/css/preview.css
@ -1,133 +0,0 @@
-.PreviewView {
-    text-align: center;
-    margin-bottom: 32px;
-}
-
-.PreviewView h1 {
-    font-size: 24px;
-    line-height: 32px;
-    margin-bottom: 8px;
-    word-wrap: anywhere;
-}
-
-.PreviewView .avatarContainer {
-    display: flex;
-    justify-content: center;
-    margin: 0;
-}
-
-.PreviewView .avatar {
-    border-radius: 100%;
-    width: 64px;
-    height: 64px;
-}
-
-.PreviewView .mxSpace .avatar {
-    border-radius: 12px;
-}
-
-.PreviewView .defaultAvatar {
-    width: 64px;
-    height: 64px;
-    background-image: url('../images/chat-icon.svg');
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 85%;
-}
-
-.PreviewView .spinner {
-    width: 32px;
-    height: 32px;
-}
-
-.PreviewView .avatar.loading {
-    border: 1px solid #eee;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-}
-
-.PreviewView .identifier {
-    color: var(--grey);
-    font-size: 12px;
-    margin: 8px 0;
-}
-
-.PreviewView .identifier.placeholder {
-    height: 1em;
-    margin: 1em 30%;
-}
-
-.PreviewView .memberCount {
-    display: flex;
-    justify-content: center;
-    margin: 8px 0;
-}
-
-.PreviewView .memberCount.loading {
-    margin: 16px 0;
-}
-
-.PreviewView .memberCount p {
-    font-size: 12px;
-    margin: 0;
-}
-
-.PreviewView .memberCount p:not(.placeholder) {
-    padding: 4px 8px 4px 24px;
-    border-radius: 14px;
-    background-image: url(../images/member-icon.svg);
-    background-repeat: no-repeat;
-    background-position: 2px center;
-    background-color: var(--lightgrey);
-}
-
-.PreviewView .memberCount p.placeholder {
-    height: 1.5em;
-    width: 100px;
-}
-
-.PreviewView .topic {
-    font-size: 12px;
-    color: var(--grey);
-    margin: 32px 0;
-}
-
-.PreviewView .topic.loading {
-    display: block;
-    margin: 24px 12px;
-    padding: 4px 0;
-}
-
-.PreviewView .topic.loading .placeholder {
-    height: 0.8em;
-    display: block;
-    margin: 12px 0;
-}
-
-.PreviewView .topic.loading .placeholder:nth-child(2) {
-    margin-left: 5%;
-    margin-right: 5%;
-}
-
-.placeholder {
-    border-radius: 1em;
-    --flash-bg: #ddd;
-    --flash-fg: #eee;
-    background: linear-gradient(120deg,
-        var(--flash-bg),
-        var(--flash-bg) 10%,
-        var(--flash-fg) calc(10% + 25px),
-        var(--flash-bg) calc(10% + 50px)
-    );
-    animation: flash 2s linear infinite;
-    background-size: 200%;
-}
-
-@keyframes flash {
-    0% { background-position-x: 0; }
-    50% { background-position-x: -80%; }
-    51% { background-position-x: 80%; }
-    100% { background-position-x: 0%; }
-}
--- a/css/spinner.css
+++ b/css/spinner.css
@ -1,27 +0,0 @@
-@keyframes rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.spinner {
-    width: 40px;
-    height: 40px;
-    border-radius: 100%;
-    border: var(--spinner-stroke-size) solid var(--app-background);
-    box-sizing: border-box;
-}
-
-.spinner::before {
-    content: "";
-    display: block;
-    width: inherit;
-    height: inherit;
-    border-radius: 100%;
-    border-width: var(--spinner-stroke-size);
-    border-style: solid;
-    border-color: transparent;
-    border-top-color: var(--grey);
-    animation: rotate 0.8s linear infinite;
-    box-sizing: border-box;
-    margin: calc(-1 * var(--spinner-stroke-size));
-}
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@ -1,6 +0,0 @@
-version: '3'
-services:
-  matrix-to:
-    build: .
-    ports:
-      - "3636:5000"
--- a/images-nohash/matrix-badge.svg
+++ b/images-nohash/matrix-badge.svg
@ -1,20 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="99" height="20">
-<linearGradient id="b" x2="0" y2="100%">
-  <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
-  <stop offset="1" stop-opacity=".1"/>
-</linearGradient>
-<mask id="a">
-  <rect width="99" height="20" rx="3" fill="#fff"/>
-</mask>
-<g mask="url(#a)">
-  <path fill="#555" d="M0 0h42v20H0z"/>
-  <path fill="#46BC99" d="M42 0h59v20H42z"/>
-  <path fill="url(#b)" d="M0 0h99v20H0z"/>
-</g>
-<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
-  <text x="21" y="15" fill="#010101" fill-opacity=".3">matrix</text>
-  <text x="21" y="14">matrix</text>
-  <text x="68.5" y="15" fill="#010101" fill-opacity=".3">join chat</text>
-  <text x="68.5" y="14">join chat</text>
-</g>
-</svg>
--- a/images/app-store-us-alt.svg
+++ b/images/app-store-us-alt.svg
--- a/images/background.svg
+++ b/images/background.svg
@ -1,226 +0,0 @@
-<svg width="1440" height="1505" viewBox="0 0 1440 1505" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<g>
-<path opacity="0.26" d="M1027.99 602.979C1262.01 860.194 1465.48 1242.7 1528.69 1544.36C1592.2 1847.63 1503.31 2018.17 1310.8 1964.61C1117.48 1910.83 851.081 1638.68 658.35 1297.66C466.355 957.9 378.93 607.541 443.1 434.715C506.167 264.833 707.508 296.249 938.653 512.115C968.31 539.852 998.261 570.239 1027.99 602.979Z" stroke="url(#paint0_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1044.18 604.303C1277.61 867.698 1476.23 1255.51 1532.89 1558.78C1589.85 1863.67 1493.74 2031.71 1297.33 1973.07C1100.11 1914.14 833.789 1635 645.032 1288.91C457.01 944.068 376.871 591.501 447.59 420.442C517.133 252.325 723.184 289.112 954.844 511.085C984.648 539.632 1014.53 570.827 1044.18 604.303Z" stroke="url(#paint1_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1060.81 606.069C1293.5 875.644 1486.97 1268.6 1536.79 1573.27C1586.9 1879.56 1483.51 2045.03 1283.27 1981.09C1082.22 1916.94 816.124 1630.66 631.709 1279.64C447.955 930.015 375.249 575.389 452.665 406.316C528.757 240.112 739.517 282.417 971.546 510.496C1001.42 539.779 1031.3 571.784 1060.81 606.069Z" stroke="url(#paint2_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1077.88 608.276C1309.61 883.958 1497.64 1281.99 1540.46 1587.91C1583.51 1895.45 1472.69 2058.05 1268.62 1988.82C1063.75 1919.29 798.166 1626.02 618.239 1270.22C439.048 915.668 374.068 559.276 458.328 392.263C541.117 228.12 756.587 276.09 988.836 510.349C1018.64 540.441 1048.44 573.255 1077.88 608.276Z" stroke="url(#paint3_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1095.4 610.925C1325.96 892.714 1508.24 1295.6 1543.86 1602.56C1579.62 1911.12 1461.21 2070.71 1253.4 1996.03C1044.7 1921.06 779.774 1620.73 604.704 1260.22C430.223 901.101 373.265 543.09 464.516 378.432C554.148 216.569 774.329 270.278 1006.5 510.644C1036.31 541.545 1066.11 575.168 1095.4 610.925Z" stroke="url(#paint4_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1113.28 614.089C1342.51 901.984 1518.76 1309.58 1546.94 1617.42C1575.2 1926.87 1449.14 2083.21 1237.57 2002.94C1025.12 1922.38 761.152 1615.14 591.086 1250.06C421.609 886.313 372.967 526.904 471.209 364.747C567.832 205.385 792.575 264.907 1024.68 511.453C1054.48 543.163 1084.14 577.522 1113.28 614.089Z" stroke="url(#paint5_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1131.6 617.694C1359.29 911.622 1529.21 1323.86 1549.67 1632.28C1570.2 1942.39 1436.27 2095.28 1221.02 2009.42C1004.88 1923.19 741.947 1608.96 577.253 1239.47C413.148 871.378 373.042 510.718 478.496 351.283C582.184 194.497 811.636 260.051 1043.3 512.704C1073.1 545.224 1102.68 580.392 1131.6 617.694Z" stroke="url(#paint6_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1150.29 621.814C1376.21 921.702 1539.51 1338.35 1552.02 1647.21C1564.6 1957.77 1422.72 2106.98 1203.79 2015.38C983.98 1923.41 722.443 1602.26 563.342 1228.43C404.83 856.074 373.554 494.531 486.367 337.966C597.267 184.049 831.282 255.71 1062.5 514.543C1092.23 547.799 1121.59 583.703 1150.29 621.814Z" stroke="url(#paint7_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1169.43 626.449C1393.36 932.296 1549.74 1353.14 1554.08 1662.3C1558.42 1973.07 1408.52 2118.46 1186.06 2021.04C962.716 1923.19 702.724 1595.12 549.436 1217.25C396.738 840.622 374.514 478.418 494.833 324.869C613.018 173.969 851.596 251.884 1082.15 516.823C1111.73 550.888 1140.95 587.528 1169.43 626.449Z" stroke="url(#paint8_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1188.93 631.527C1410.65 943.26 1559.82 1368.15 1555.77 1677.31C1551.73 1988.08 1393.58 2129.42 1167.59 2026.05C940.711 1922.23 682.485 1587.33 535.38 1205.48C388.863 824.953 375.984 462.233 503.883 312.069C629.574 164.406 872.567 248.721 1102.24 519.694C1131.75 554.421 1160.74 591.944 1188.93 631.527Z" stroke="url(#paint9_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1208.87 637.192C1428.24 954.737 1569.83 1383.53 1557.1 1692.39C1544.37 2002.95 1377.91 2139.94 1148.53 2030.61C918.192 1920.76 662.027 1579.09 521.323 1193.41C381.135 809.134 377.971 446.194 513.523 299.414C646.794 155.209 894.276 245.925 1122.85 523.005C1152.21 558.615 1180.98 596.799 1208.87 637.192Z" stroke="url(#paint10_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1229.18 643.371C1445.9 966.729 1579.62 1399.12 1558.05 1707.55C1536.42 2017.66 1361.5 2150.17 1128.73 2034.65C895.012 1918.7 641.127 1570.26 507.12 1180.9C373.702 793.021 380.399 430.154 523.752 287.126C664.676 146.526 916.573 243.865 1143.89 526.904C1173.11 563.249 1201.66 602.243 1229.18 643.371Z" stroke="url(#paint11_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1249.94 650.066C1463.79 979.089 1589.26 1414.87 1558.65 1722.63C1527.81 2032.01 1344.43 2159.8 1108.35 2038.11C871.318 1915.91 619.936 1560.84 492.994 1168.03C366.493 776.761 383.345 414.188 534.645 275.06C683.37 138.286 939.609 242.319 1165.46 531.391C1194.52 568.546 1222.78 608.276 1249.94 650.066Z" stroke="url(#paint12_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1271.06 657.351C1481.74 991.965 1598.75 1430.98 1558.79 1737.78C1518.61 2046.21 1326.54 2169.07 1087.3 2041.13C847.033 1912.6 598.447 1550.91 478.791 1154.86C359.502 760.354 386.877 398.37 546.199 263.288C702.871 130.561 963.305 241.437 1187.53 536.395C1216.31 574.359 1244.27 614.825 1271.06 657.351Z" stroke="url(#paint13_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1292.55 665.149C1499.92 1005.28 1608.1 1447.31 1558.5 1752.94C1508.68 2060.19 1307.93 2177.83 1065.52 2043.56C822.088 1908.62 576.52 1540.39 464.443 1141.32C352.734 743.726 390.853 382.552 558.417 251.811C723.11 123.277 987.739 241.142 1210.05 542.06C1238.61 580.686 1266.2 621.961 1292.55 665.149Z" stroke="url(#paint14_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1314.47 673.537C1518.24 1019.11 1617.22 1463.87 1557.91 1768.1C1498.23 2073.94 1288.64 2186.14 1043.15 2045.4C796.623 1904.06 554.44 1529.35 450.163 1127.42C346.328 726.878 395.413 366.955 571.218 240.702C744.007 116.656 1012.83 241.585 1233.01 548.314C1261.27 587.677 1288.57 629.687 1314.47 673.537Z" stroke="url(#paint15_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1336.7 682.587C1536.64 1033.54 1626.13 1480.72 1556.73 1783.25C1486.97 2087.33 1268.48 2193.94 1019.97 2046.65C770.502 1898.76 531.85 1517.65 435.816 1113.07C340.149 709.956 400.566 351.43 584.688 229.96C765.718 110.549 1038.59 242.614 1256.41 555.157C1284.45 595.328 1311.31 638.001 1336.7 682.587Z" stroke="url(#paint16_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1359.36 692.151C1555.18 1048.32 1634.81 1497.79 1555.18 1798.34C1475.12 2100.5 1247.58 2201.15 996.27 2047.24C743.931 1892.66 509.106 1505.36 421.534 1098.35C334.257 692.813 406.228 336.053 598.885 219.512C788.232 105.031 1065.08 244.38 1280.4 562.588C1308.07 603.495 1334.49 646.903 1359.36 692.151Z" stroke="url(#paint17_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1382.32 702.304C1573.8 1063.55 1643.27 1515 1553.12 1813.27C1462.46 2113.16 1225.8 2207.7 971.765 2047.09C716.629 1885.81 485.999 1492.42 407.185 1083.12C328.665 675.523 412.483 320.823 613.751 209.506C811.56 100.101 1092.23 246.808 1304.76 570.754C1332.06 612.323 1358.04 656.394 1382.32 702.304Z" stroke="url(#paint18_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1405.73 713.12C1592.57 1079.37 1651.51 1532.51 1550.62 1828.28C1449.22 2125.59 1203.35 2213.81 946.599 2046.43C688.815 1878.38 462.6 1478.88 392.837 1067.67C323.442 658.087 419.329 305.741 629.281 199.868C835.626 95.8343 1120.05 249.972 1329.63 579.436C1356.49 621.815 1381.96 666.548 1405.73 713.12Z" stroke="url(#paint19_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1429.42 724.524C1611.33 1095.7 1659.53 1550.24 1547.6 1843.22C1435.16 2137.73 1180.02 2219.33 920.768 2045.1C660.407 1870.22 438.903 1464.82 378.559 1051.85C318.51 640.502 426.834 290.879 645.469 190.671C860.424 92.229 1148.53 253.944 1354.8 588.927C1381.37 631.967 1406.31 677.363 1429.42 724.524Z" stroke="url(#paint20_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1453.49 736.589C1630.25 1112.48 1667.19 1568.2 1544.15 1858C1420.45 2149.43 1155.96 2224.11 894.279 2043.04C631.49 1861.24 414.99 1450.04 364.36 1035.67C313.951 622.844 434.933 276.237 662.472 181.915C886.111 89.2121 1177.82 258.653 1380.63 599.006C1406.68 642.783 1431.04 688.84 1453.49 736.589Z" stroke="url(#paint21_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1477.91 749.245C1649.23 1129.77 1674.69 1586.22 1540.24 1872.72C1405.06 2160.69 1131.16 2228.3 867.12 2040.32C602.05 1851.53 390.848 1434.66 350.226 1019.11C309.752 605.04 443.612 261.818 680.129 173.603C912.525 86.9324 1207.69 264.098 1406.83 609.749C1432.36 654.261 1456.13 700.907 1477.91 749.245Z" stroke="url(#paint22_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1502.64 762.635C1668.29 1147.57 1681.84 1604.62 1535.69 1887.36C1388.8 2171.58 1105.41 2231.83 839.233 2036.86C571.956 1841.08 366.346 1418.69 336.101 1002.19C305.929 587.161 452.961 247.617 698.456 165.803C939.757 85.3863 1238.24 270.425 1433.32 621.299C1458.42 666.4 1481.6 713.708 1502.64 762.635Z" stroke="url(#paint23_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1527.74 776.614C1687.35 1165.89 1688.68 1623.08 1530.75 1901.78C1371.95 2182.02 1078.99 2234.63 810.753 2032.52C541.415 1829.6 341.767 1401.92 322.118 984.681C302.47 569.135 463.042 233.638 717.589 158.445C967.794 84.5771 1269.51 277.488 1460.4 633.439C1484.91 679.202 1507.43 727.172 1527.74 776.614Z" stroke="url(#paint24_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1553.05 791.255C1706.41 1184.66 1695.15 1641.77 1525.09 1916.13C1354.14 2191.96 1051.54 2236.76 781.463 2027.59C510.212 1817.54 316.745 1384.63 308.061 967.097C299.451 551.036 473.711 219.953 737.383 151.676C996.566 84.5034 1301.45 285.434 1487.78 646.461C1511.77 692.813 1533.62 741.298 1553.05 791.255Z" stroke="url(#paint25_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1578.73 806.632C1725.47 1204.01 1701.41 1660.61 1519.05 1930.33C1335.74 2201.52 1023.5 2238.16 751.66 2021.78C478.642 1804.52 291.725 1366.6 294.3 948.924C296.802 532.863 485.045 206.636 757.989 145.349C1026.3 85.1659 1334.05 294.19 1515.67 659.999C1539 707.087 1560.12 756.161 1578.73 806.632Z" stroke="url(#paint26_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1604.71 822.671C1744.6 1223.8 1707.22 1679.66 1512.36 1944.38C1316.46 2210.57 994.506 2238.82 721.046 2015.23C446.41 1790.76 266.409 1347.99 280.539 930.53C294.594 514.69 497.113 193.54 779.329 139.61C1056.76 86.6367 1367.31 303.827 1543.93 674.419C1566.59 722.021 1586.9 771.684 1604.71 822.671Z" stroke="url(#paint27_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1630.98 839.372C1763.74 1244.1 1712.74 1698.79 1505.14 1958.21C1296.44 2219.03 964.776 2238.68 689.845 2007.87C413.81 1776.12 240.874 1328.71 266.925 911.769C292.829 496.371 509.771 180.812 801.407 134.46C1088.04 88.9179 1401.24 314.349 1572.55 689.576C1594.56 737.767 1614.06 787.944 1630.98 839.372Z" stroke="url(#paint28_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1657.48 856.736C1782.8 1264.92 1717.82 1717.99 1497.27 1971.82C1275.55 2226.98 934.089 2237.65 657.833 1999.63C380.474 1760.59 215.118 1308.63 253.385 892.566C291.504 478.051 523.238 168.378 824.22 129.898C1120.05 92.0815 1435.82 325.826 1601.55 705.468C1622.89 754.247 1641.58 804.866 1657.48 856.736Z" stroke="url(#paint29_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1684.26 874.91C1801.78 1286.26 1722.53 1737.49 1488.88 1985.29C1253.98 2234.41 902.667 2235.95 625.307 1990.59C346.77 1744.19 189.289 1288.03 240.065 873.07C290.695 459.732 537.368 156.386 847.842 125.927C1152.94 96.0556 1471.07 338.188 1630.98 722.096C1651.51 771.465 1669.32 822.599 1684.26 874.91Z" stroke="url(#paint30_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1711.27 893.67C1820.77 1308.04 1726.87 1756.99 1479.83 1998.38C1231.54 2241.1 870.434 2233.23 592.045 1980.5C312.551 1726.75 163.238 1266.47 226.893 853.131C290.327 441.337 552.233 144.687 872.127 122.615C1186.58 100.91 1506.91 351.503 1660.64 739.532C1680.44 789.416 1697.36 841.065 1711.27 893.67Z" stroke="url(#paint31_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1738.5 913.241C1839.61 1330.41 1730.7 1776.63 1470.19 2011.41C1208.28 2247.36 837.319 2229.85 558.193 1969.76C277.89 1708.58 137.113 1244.47 213.941 832.972C290.474 423.018 567.834 133.504 897.295 119.967C1221.09 106.65 1543.41 365.777 1690.74 757.78C1709.72 808.178 1725.69 860.268 1738.5 913.241Z" stroke="url(#paint32_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1766.02 933.474C1858.45 1353.21 1734.23 1796.35 1459.96 2024.06C1184.22 2252.95 803.394 2225.51 523.68 1957.99C242.788 1689.37 110.842 1221.74 201.136 812.371C291.137 404.624 584.244 122.689 923.198 117.98C1256.41 113.345 1580.57 381.007 1721.2 776.835C1739.31 827.748 1754.25 880.206 1766.02 933.474Z" stroke="url(#paint33_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1793.69 954.516C1877.14 1376.54 1737.24 1816.29 1449.07 2036.49C1159.34 2257.88 768.73 2220.28 488.574 1945.41C207.241 1669.36 84.567 1198.34 188.623 791.549C292.311 386.304 601.314 112.314 949.908 116.655C1292.54 120.996 1618.32 397.193 1751.96 796.7C1769.18 848.054 1783.09 900.88 1793.69 954.516Z" stroke="url(#paint34_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1821.58 976.22C1895.68 1400.37 1739.82 1836.15 1437.51 2048.56C1133.59 2262.15 733.114 2214.03 452.737 1931.72C171.183 1648.32 58.076 1174.13 176.261 770.286C294.005 367.984 619.197 102.382 977.358 116.067C1329.41 129.604 1656.66 414.409 1783.02 817.3C1799.28 869.17 1812.16 922.364 1821.58 976.22Z" stroke="url(#paint35_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1849.62 998.66C1914.08 1424.65 1741.88 1856.09 1425.3 2060.33C1107.03 2265.68 696.764 2206.89 416.313 1917.16C134.759 1626.32 31.5131 1149.27 164.195 748.729C296.289 349.737 637.818 92.964 1005.62 116.287C1367.09 139.242 1695.67 432.729 1814.37 838.857C1829.68 891.094 1841.45 944.583 1849.62 998.66Z" stroke="url(#paint36_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1877.8 1021.91C1932.33 1449.45 1743.43 1876.1 1412.42 2071.81C1079.65 2268.55 659.526 2198.8 379.297 1901.71C97.8897 1603.36 4.94593 1123.73 152.346 726.877C299.084 331.564 657.245 83.9876 1034.61 117.169C1405.5 149.763 1735.11 451.931 1846.01 861.149C1860.29 913.755 1870.89 967.537 1877.8 1021.91Z" stroke="url(#paint37_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1906.21 1045.82C1950.51 1474.68 1744.53 1896.12 1398.88 2082.92C1051.39 2270.68 621.478 2189.68 341.69 1885.15C60.6513 1579.38 -21.622 1097.47 140.717 704.732C302.54 313.465 677.48 75.6009 1064.41 118.862C1444.73 161.388 1775.22 472.312 1877.95 884.326C1891.12 937.299 1900.54 991.376 1906.21 1045.82Z" stroke="url(#paint38_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1934.69 1070.54C1968.39 1500.43 1745.05 1916.2 1384.68 2093.66C1022.32 2272.08 582.699 2179.52 303.426 1867.64C23.0499 1554.44 -48.3321 1070.47 129.387 682.218C306.517 295.514 698.456 67.7286 1095.03 121.364C1484.76 174.043 1815.91 493.722 1910.11 908.385C1922.18 961.652 1930.42 1015.95 1934.69 1070.54Z" stroke="url(#paint39_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1963.32 1096C1986.13 1526.63 1745.12 1936.29 1369.82 2104.04C992.449 2272.67 543.11 2168.41 264.721 1849.1C-14.9201 1528.54 -74.8957 1042.8 118.498 659.484C311.156 277.635 720.314 60.4446 1126.46 124.675C1525.61 187.801 1857.13 516.235 1942.56 933.253C1953.46 986.815 1960.37 1041.33 1963.32 1096Z" stroke="url(#paint40_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M1992.02 1122.26C2003.57 1553.33 1744.61 1956.37 1354.14 2114.04C961.613 2272.52 502.634 2156.2 225.275 1829.6C-53.2619 1501.61 -101.537 1014.48 107.826 636.455C316.379 259.904 742.905 53.7497 1158.61 128.795C1567.11 202.59 1898.85 539.779 1975.09 958.93C1984.88 1012.79 1990.54 1067.45 1992.02 1122.26Z" stroke="url(#paint41_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-<path opacity="0.26" d="M2020.79 1149.2C2020.79 1580.41 1743.5 1976.39 1337.88 2123.46C930.117 2271.35 461.498 2142.81 185.39 1808.86C-91.8961 1473.66 -128.102 985.346 97.5236 613.136C322.193 242.249 766.306 47.6461 1191.51 133.801C1609.42 218.558 1941.02 564.503 2007.91 985.493C2016.52 1039.64 2020.79 1094.46 2020.79 1149.2Z" stroke="url(#paint42_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
-</g>
-</g>
-<defs>
-<linearGradient id="paint0_linear" x1="985.633" y1="325.888" x2="985.633" y2="1974.38" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="985.644" y1="315.588" x2="985.644" y2="1984.65" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint2_linear" x1="985.667" y1="305.466" x2="985.667" y2="1994.71" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint3_linear" x1="985.745" y1="295.445" x2="985.745" y2="2004.63" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint4_linear" x1="985.811" y1="285.689" x2="985.811" y2="2014.24" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint5_linear" x1="985.893" y1="276.126" x2="985.893" y2="2023.79" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint6_linear" x1="985.932" y1="266.75" x2="985.932" y2="2033.08" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint7_linear" x1="985.934" y1="257.604" x2="985.934" y2="2042.09" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint8_linear" x1="985.952" y1="248.661" x2="985.952" y2="2051.01" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint9_linear" x1="985.954" y1="240.04" x2="985.954" y2="2059.54" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint10_linear" x1="985.935" y1="231.549" x2="985.935" y2="2067.84" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint11_linear" x1="985.894" y1="223.397" x2="985.894" y2="2075.94" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint12_linear" x1="985.853" y1="215.451" x2="985.853" y2="2083.67" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint13_linear" x1="985.78" y1="207.783" x2="985.78" y2="2091.22" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint14_linear" x1="985.655" y1="200.339" x2="985.655" y2="2098.48" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint15_linear" x1="985.579" y1="193.255" x2="985.579" y2="2105.48" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint16_linear" x1="985.428" y1="186.433" x2="985.428" y2="2112.18" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint17_linear" x1="985.288" y1="179.882" x2="985.288" y2="2118.57" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint18_linear" x1="985.116" y1="173.645" x2="985.116" y2="2124.54" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint19_linear" x1="984.964" y1="167.714" x2="984.964" y2="2130.35" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint20_linear" x1="984.807" y1="162.115" x2="984.807" y2="2135.86" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint21_linear" x1="984.669" y1="156.799" x2="984.669" y2="2140.99" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint22_linear" x1="984.581" y1="151.807" x2="984.581" y2="2145.83" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint23_linear" x1="984.47" y1="147.17" x2="984.47" y2="2150.37" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint24_linear" x1="984.413" y1="142.818" x2="984.413" y2="2154.54" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint25_linear" x1="984.278" y1="138.833" x2="984.278" y2="2158.44" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint26_linear" x1="984.286" y1="135.096" x2="984.286" y2="2162.04" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint27_linear" x1="984.263" y1="131.706" x2="984.263" y2="2165.35" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint28_linear" x1="984.295" y1="128.646" x2="984.295" y2="2168.32" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint29_linear" x1="984.293" y1="125.905" x2="984.293" y2="2170.95" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint30_linear" x1="984.353" y1="123.444" x2="984.353" y2="2173.38" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint31_linear" x1="984.425" y1="121.309" x2="984.425" y2="2175.36" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint32_linear" x1="984.506" y1="119.477" x2="984.506" y2="2177.26" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint33_linear" x1="984.625" y1="117.921" x2="984.625" y2="2178.83" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint34_linear" x1="984.762" y1="116.604" x2="984.762" y2="2180.17" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint35_linear" x1="984.858" y1="115.562" x2="984.858" y2="2181.23" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint36_linear" x1="984.956" y1="114.82" x2="984.956" y2="2182.09" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint37_linear" x1="985.041" y1="114.2" x2="985.041" y2="2182.8" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint38_linear" x1="985.161" y1="113.81" x2="985.161" y2="2183.32" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint39_linear" x1="985.213" y1="113.588" x2="985.213" y2="2183.7" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint40_linear" x1="985.322" y1="113.5" x2="985.322" y2="2183.99" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint41_linear" x1="985.357" y1="113.5" x2="985.357" y2="2184.22" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<linearGradient id="paint42_linear" x1="985.395" y1="113.578" x2="985.395" y2="2184.23" gradientUnits="userSpaceOnUse">
-<stop stop-color="#999999"/>
-<stop offset="1" stop-color="#7D92FF"/>
-</linearGradient>
-<clipPath id="clip0">
-<rect width="1440" height="1505" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/images/client-icons/cinny.svg
+++ b/images/client-icons/cinny.svg
@ -1,19 +0,0 @@
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In  -->
-<svg version="1.1"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
-	 x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
-<defs>
-</defs>
-<g>
-	<g>
-		<circle fill="#FFFFFF" cx="9" cy="9" r="8.5"/>
-	</g>
-	<g>
-		<path d="M9,0C4,0,0,4,0,9c0,5,4,9,9,9c5,0,9-4,9-9C18,4,14,0,9,0z M1.2,10.8l3.5-2.3c0-0.1,0-0.2,0-0.3c0-1.8,1.3-3.2,3.1-3.4
-			c0.1,0,0.2,0,0.4,0c1.2,0,2.3,0.6,2.9,1.6c0.3-0.1,0.6-0.1,0.9-0.1c0.4,0,0.8,0,1.2,0.1c0.7,0.2,1.4,0.5,2,0.9
-			C14.6,7.1,14,7,13.3,7c-1.2,0-2.2,0.4-2.9,1.4c-0.7,0.9-1.1,2-1.1,3.2c0,1.5-0.4,2.9-1.3,4.2c-0.3,0.4-0.5,0.7-0.8,1
-			C4.2,16.1,1.9,13.8,1.2,10.8z"/>
-		<circle cx="9.5" cy="6.4" r="0.5"/>
-	</g>
-</g>
-</svg>
--- a/images/client-icons/element.svg
+++ b/images/client-icons/element.svg
@ -1,9 +0,0 @@
-<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
- <rect x="0" y="0" width="64" height="64" fill="#0dbd8b" stop-color="#000000" stroke="#000" stroke-dasharray="0.188976, 0.37795299999999998" stroke-width=".18898"/>
- <g clip-rule="evenodd" fill="#fff" fill-rule="evenodd">
-  <path d="m25.28 10.88c0-1.5906 1.2894-2.88 2.88-2.88 10.604 0 19.2 8.5961 19.2 19.2 0 1.5906-1.2894 2.88-2.88 2.88s-2.88-1.2894-2.88-2.88c0-7.4227-6.0173-13.44-13.44-13.44-1.5906 0-2.88-1.2894-2.88-2.88z"/>
-  <path d="m38.72 53.12c0 1.5906-1.2894 2.88-2.88 2.88-10.604 0-19.2-8.5961-19.2-19.2 0-1.5906 1.2894-2.88 2.88-2.88 1.5905 0 2.88 1.2894 2.88 2.88 0 7.4227 6.0173 13.44 13.44 13.44 1.5906 0 2.88 1.2894 2.88 2.88z"/>
-  <path d="m10.88 38.72c-1.5906 0-2.88-1.2894-2.88-2.88 0-10.604 8.5961-19.2 19.2-19.2 1.5906 0 2.88 1.2894 2.88 2.88 0 1.5905-1.2894 2.88-2.88 2.88-7.4227 0-13.44 6.0173-13.44 13.44 0 1.5906-1.2894 2.88-2.88 2.88z"/>
-  <path d="m53.12 25.28c1.5906 0 2.88 1.2894 2.88 2.88 0 10.604-8.5961 19.2-19.2 19.2-1.5906 0-2.88-1.2894-2.88-2.88 0-1.5905 1.2894-2.88 2.88-2.88 7.4227 0 13.44-6.0173 13.44-13.44 0-1.5906 1.2894-2.88 2.88-2.88z"/>
- </g>
-</svg>
--- a/images/client-icons/fluffychat.svg
+++ b/images/client-icons/fluffychat.svg
@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-     viewBox="0 0 181.4 181.9" style="enable-background:new 0 0 181.4 181.9;" xml:space="preserve">
-<style type="text/css">
-    .st0{fill:url(#SVGID_1_);}
-    .st1{fill:#F094BE;}
-    .st2{fill:#4D3F92;}
-    .st3{fill:#FFFFFF;}
-</style>
-<g id="Capa_1">
-    <rect x="0" y="0" style="color:#FFFFFF" width="181.4" height="181.9" class="st3"/>
-</g>
-<g id="Capa_2">
-    <g>
-        <path class="st2" d="M151.6,95.1c1.5-0.3,2.8-1,3.8-2c4-5.3,0.8-11.8-4.5-12.6c-0.8,0-1.5-0.8-1.5-1.5c0-0.3,0-0.5,0-0.5
-            c0.8-0.8,1.5-1.8,2.5-3.3c8.1-10.8,11.8-50.6,3.8-53.7c-9.8-3.3-29.7,6.3-38.3,17.4c-0.5-0.3-1-1-1-1.8c0.3-3-1.3-5.5-3.5-6.8
-            c-4.5-2.3-8.8,0-10.6,3.3c-0.5,0.8-1.3,1.3-2,1c-0.8,0-1.5-0.8-1.5-1.5c-0.5-2.5-2-4.5-4.3-5.5c-4.8-2-9.8,0.8-10.6,5.3
-            c-0.3,0.8-0.8,1.5-1.5,1.5c-0.8,0.3-1.5-0.3-2-1c-1.5-2.3-4-3.8-6.5-3.8c-4,0-7.6,3.3-7.8,7.3v0.3v0.3c0,0.8-0.5,1.5-1,1.8h-0.3
-            c-8.3-10.8-28.5-20.7-38.5-17.4c-8.1,2.8-4.3,42.6,4,53.4c1.5,2,2.8,3.5,3.8,4.5c-0.3,0.8-1,1.5-1.8,1.5c-1.3,0-2.5,0.5-3.5,1.3
-            c-5.3,5-2.3,12.1,3,13.4c0.8,0.3,1.5,1,1.5,1.8c0,0.8-0.5,1.8-1.3,2c-1,0.5-2,1-2.8,2c-4,5.8,0,12.3,5.5,12.3
-            c0.8,0,1.5,0.5,1.8,1.3c0.3,0.8,0.3,1.5-0.5,2c-1.5,1.5-2.3,3.5-2,5.5c0.3,2.8,2,5.3,4.8,6.5c1.5,0.8,3,0.8,4.5,0.5
-            c0.8-0.3,1.5,0,2,0.8c0.5,0.5,0.5,1.5,0.3,2c-0.8,1.5-1,3.3-0.5,5c0.8,2.8,2.8,4.8,5.5,5.5c2.5,0.5,4.3-0.3,5.5-0.8
-            c0.5-0.3-3.3,9.1-6,15.4c-0.8,2,1.3,4.3,3.5,3.3c8.3-3.8,22.2-10.3,22.2-9.8c0.5,5.3,6.5,9.1,12.3,5.3c1.3-0.8,2-2.3,2.3-3.5
-            c0.3-0.8,1-1.5,2-1.5c1,0,1.8,0.5,2,1.5c0.3,1.3,0.8,2.3,1.8,3c5.8,4.5,12.3,0.8,12.8-4.8c0-0.8,0.5-1.5,1.3-1.8
-            c0.8-0.3,1.5,0,2,0.5c1.5,1.5,3.3,2.5,5.3,2.5l0,0c2.5,0,5-1.3,6.5-3.8c1-1.5,1.3-3,1-5c0-0.8,0.3-1.5,0.8-2c0.5-0.5,1.5-0.5,2,0
-            c1.5,0.8,3.3,1.3,5,0.8c2.8-0.5,5-2.8,5.8-5.3c0.5-1.8,0.3-3.5-0.5-5.3c-0.3-0.8-0.3-1.5,0.3-2s1.3-0.8,2-0.8
-            c1.8,0.3,3.3,0.3,4.8-0.5c2.3-1,3.8-3,4.3-5.5c0.5-2.5-0.3-4.8-2-6.5c-0.5-0.5-0.8-1.3-0.5-2s1-1.3,1.8-1.3c1.8,0,3.8-0.5,5-2
-            c4.3-4.5,2.3-10.6-2.5-12.6c-0.8-0.3-1.3-1-1.3-2C150.1,95.8,150.8,95.1,151.6,95.1z"/>
-        <path class="st3" d="M131.4,42.2c0.5,1.5,0.5,3,0,4.5c-0.3,0.8,0,1.5,0.5,2s1.3,0.8,2,0.5c1-0.5,2-0.5,3-0.5c2.3,0,4.3,1,5.8,3
-            c1,1.3,1.8,3,1.5,4.8c0,1.5-0.5,2.8-1.3,4c-0.5,0.5-0.5,1.5,0,2c0.3,0.3,0.5,0.8,1,0.8c1-0.3,2-1,2.8-2c4.5-6.3,5.3-26.2,0.8-27.7
-            c-4.5-1.5-12.3,1.5-17.9,6C130.7,40.1,131.2,40.9,131.4,42.2z"/>
-        <path class="st3" d="M39,63.6c0.3-0.3,0.5-0.5,0.8-0.8c0.5-0.8,0.3-1.5,0-2C38.5,59,38.2,57,38.5,55c0.5-2.8,2.8-5,5.5-5.8
-            c1.5-0.5,3-0.3,4.5,0.3c0.8,0.3,1.5,0,2-0.5c0.5-0.5,0.8-1.3,0.5-2c-0.5-1.5-0.5-3,0-4.5c0.3-1,0.8-2,1.5-2.8
-            c-5.5-4.5-13.9-7.8-18.4-6.3S30.4,54.8,35,61.1C36,62.6,37.2,63.3,39,63.6z"/>
-        <g>
-            <circle class="st3" cx="60.9" cy="94.6" r="9.3"/>
-            <path class="st3" d="M100.7,94.6c0,5.3-4.3,9.3-9.3,9.3c-5.3,0-9.3-4.3-9.3-9.3S100.7,89.3,100.7,94.6z"/>
-            <circle class="st3" cx="121.6" cy="94.6" r="9.3"/>
-        </g>
-    </g>
-</g>
-</svg>
--- a/images/client-icons/fractal.svg
+++ b/images/client-icons/fractal.svg
@ -1,55 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="8" x2="58" y1="69.999985" y2="69.999985">
-        <stop offset="0" stop-color="#4aaac9"/>
-        <stop offset="0.16" stop-color="#8bddf7"/>
-        <stop offset="0.32" stop-color="#4aaac9"/>
-        <stop offset="1" stop-color="#4aaac9"/>
-    </linearGradient>
-    <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="31.462524" x2="39" y1="113.997253" y2="113.997253">
-        <stop offset="0" stop-color="#4aaac9"/>
-        <stop offset="0.469318" stop-color="#74d7f7"/>
-        <stop offset="1" stop-color="#4aaac9"/>
-    </linearGradient>
-    <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="104" x2="120" y1="84" y2="84">
-        <stop offset="0" stop-color="#1a5fb4"/>
-        <stop offset="0.5" stop-color="#4296ff"/>
-        <stop offset="1" stop-color="#1a5fb4"/>
-    </linearGradient>
-    <clipPath id="d">
-        <path d="m 8 24 h 97 v 84 h -97 z m 0 0"/>
-    </clipPath>
-    <clipPath id="e">
-        <path d="m 24 24 h 80 c 8.835938 0 16 7.164062 16 16 v 52 c 0 8.835938 -7.164062 16 -16 16 h -80 c -8.835938 0 -16 -7.164062 -16 -16 v -52 c 0 -8.835938 7.164062 -16 16 -16 z m 0 0"/>
-    </clipPath>
-    <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="55.608135" x2="71.783539" y1="100" y2="48.532928">
-        <stop offset="0" stop-color="#81dffe"/>
-        <stop offset="1" stop-color="#9bf8fe"/>
-    </linearGradient>
-    <filter id="g" height="100%" width="100%" x="0%" y="0%">
-        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
-    </filter>
-    <mask id="h">
-        <g filter="url(#g)">
-            <rect fill-opacity="0.35" height="128" width="128"/>
-        </g>
-    </mask>
-    <clipPath id="i">
-        <rect height="152" width="192"/>
-    </clipPath>
-    <path d="m 24 28 h 72 c 8.835938 0 16 7.164062 16 16 v 52 c 0 8.835938 -7.164062 16 -16 16 h -72 c -8.835938 0 -16 -7.164062 -16 -16 v -52 c 0 -8.835938 7.164062 -16 16 -16 z m 0 0" fill="url(#a)"/>
-    <path d="m 24 28 h 80 c 8.835938 0 16 7.164062 16 16 v 48 c 0 8.835938 -7.164062 16 -16 16 h -80 c -8.835938 0 -16 -7.164062 -16 -16 v -48 c 0 -8.835938 7.164062 -16 16 -16 z m 0 0" fill="#53bde0"/>
-    <path d="m 24 100 v 12 h 4 c 2.210938 0 4 1.789062 4 4 v 7 c 0 1.992188 1.183594 3.792969 3.011719 4.585938 c 1.828125 0.789062 3.953125 0.417968 5.40625 -0.945313 l 13.523437 -12.707031 c 1.324219 -1.242188 3.070313 -1.933594 4.882813 -1.933594 h 9.175781 v -12 z m 0 0" fill="url(#b)" fill-rule="evenodd"/>
-    <path d="m 102 58.566406 h 2 c 8.835938 0 16 7.164063 16 16 v 21.433594 c 0 8.835938 -7.164062 16 -16 16 h -2 c -8.835938 0 -16 -7.164062 -16 -16 v -21.433594 c 0 -8.835937 7.164062 -16 16 -16 z m 0 0" fill="url(#c)"/>
-    <path d="m 86 87 h 18 v 25 h -18 z m 0 0" fill="#1a5fb4"/>
-    <path d="m 48 24 h 56 c 8.835938 0 16 7.164062 16 16 v 52 c 0 8.835938 -7.164062 16 -16 16 h -56 c -8.835938 0 -16 -7.164062 -16 -16 v -52 c 0 -8.835938 7.164062 -16 16 -16 z m 0 0" fill="#3584e4"/>
-    <g clip-path="url(#d)">
-        <g clip-path="url(#e)">
-            <path d="m 78.804688 16.023438 l 0.527343 2.460937 c -1.207031 -0.082031 -2.417969 4.964844 -3.621093 4.988281 c -19.335938 0.371094 -38.003907 14.230469 -39.148438 34.546875 c -0.835938 14.761719 9.570312 29.839844 25.15625 30.488281 c 10.371094 0.433594 20.96875 -6.957031 21.242188 -17.925781 c 0.179687 -7.078125 -4.953126 -14.3125 -12.488282 -14.355469 c -4.683594 -0.027343 -9.484375 3.425782 -9.398437 8.429688 c 0.074219 2.980469 2.300781 6.042969 5.511719 5.902344 c 1.8125 -0.082032 3.691406 -1.488282 3.539062 -3.453125 c -0.078125 -1.042969 -0.921875 -2.128907 -2.0625 -1.996094 c -0.5625 0.066406 -1.148438 0.539063 -1.046875 1.15625 c 0.070313 0.273437 0.285156 0.570313 0.597656 0.5 c 0.121094 -0.03125 0.25 -0.144531 0.214844 -0.28125 c 0 -0.042969 -0.070313 -0.09375 -0.113281 -0.074219 c 0 0.003906 -0.070313 0.023438 0 0.035156 v 0.007813 v -0.003906 v 0.035156 c 0 0.050781 -0.09375 0.050781 -0.136719 0.03125 c -0.121094 -0.066406 -0.113281 -0.242187 -0.070313 -0.347656 c 0.164063 -0.265625 0.542969 -0.230469 0.777344 -0.074219 c 0.519532 0.367188 0.429688 1.117188 0.070313 1.558594 c -0.710938 0.898437 -2.074219 0.726562 -2.867188 0.042968 c -1.5 -1.28125 -1.167969 -3.601562 0.070313 -4.941406 c 2.167968 -2.367187 5.929687 -1.792968 8.074218 0.28125 c 3.601563 3.476563 2.652344 9.308594 -0.675781 12.597656 c -5.359375 5.292969 -14.109375 3.800782 -18.992187 -1.324218 c -7.570313 -7.953125 -5.304688 -20.664063 2.335937 -27.6875 c 11.480469 -10.550782 29.507813 -7.242188 39.363281 3.785156 c 14.414063 16.121094 9.6875 41.066406 -5.855468 54.582031 c -11.121094 9.226563 -22.246094 15.429688 -32.949219 19.4375 c -13.058594 75.445313 -75.230469 6.835938 -81.039063 -4.195312 l 0.285157 -105.054688 z m 0 0" fill="url(#f)"/>
-        </g>
-    </g>
-    <path d="m 24 106 v 2 h 4 c 2.210938 0 4 1.789062 4 4 v 7 c 0 1.992188 1.183594 3.792969 3.011719 4.585938 c 1.828125 0.789062 3.953125 0.417968 5.40625 -0.945313 l 13.523437 -12.707031 c 1.324219 -1.242188 3.070313 -1.933594 4.882813 -1.933594 h 9.175781 v -2 z m 0 0" fill="#81dffe" fill-rule="evenodd"/>
-    <g clip-path="url(#i)" mask="url(#h)" transform="matrix(1 0 0 1 -8 -16)">
-        <path d="m 173 17 h 8 c 1.65625 0 3 1.34375 3 3 v 7 c 0 1.65625 -1.34375 3 -3 3 h -8 c -1.65625 0 -3 -1.34375 -3 -3 v -7 c 0 -1.65625 1.34375 -3 3 -3 z m 0 0" fill="#241f31"/>
-    </g>
-</svg>
--- a/images/client-icons/org.kde.neochat.svg
+++ b/images/client-icons/org.kde.neochat.svg
@ -1,34 +0,0 @@
-<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M51 12C51 10.8954 50.1046 10 49 10H13C11.8954 10 11 10.8954 11 12V38C11 39.1046 11.8954 40 13 40H30.5858C30.851 40 31.1054 40.1054 31.2929 40.2929L39.2929 48.2929C39.9229 48.9229 41 48.4767 41 47.5858V41C41 40.4477 41.4477 40 42 40H49C50.1046 40 51 39.1046 51 38V12Z" fill="url(#paint0_linear)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 37V38C11 39.1046 11.8954 40 13 40H30.5858C30.851 40 31.1054 40.1054 31.2929 40.2929L39.2929 48.2929C39.9229 48.9229 41 48.4767 41 47.5858V46.5858C41 47.4767 39.9229 47.9229 39.2929 47.2929L31.2929 39.2929C31.1054 39.1054 30.851 39 30.5858 39H13C11.8954 39 11 38.1046 11 37ZM41 41C41 40.4477 41.4477 40 42 40H49C50.1046 40 51 39.1046 51 38V37C51 38.1046 50.1046 39 49 39H42C41.4477 39 41 39.4477 41 40V41Z" fill="#000405" fill-opacity="0.1"/>
-<path d="M8 10C8 8.89543 8.89543 8 10 8H46C47.1046 8 48 8.89543 48 10V36C48 37.1046 47.1046 38 46 38H28.4142C28.149 38 27.8946 38.1054 27.7071 38.2929L19.7071 46.2929C19.0771 46.9229 18 46.4767 18 45.5858V39C18 38.4477 17.5523 38 17 38H10C8.89543 38 8 37.1046 8 36V10Z" fill="url(#paint1_linear)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 35V36C8 37.1046 8.89543 38 10 38H17C17.5523 38 18 38.4477 18 39V38C18 37.4477 17.5523 37 17 37H10C8.89543 37 8 36.1046 8 35ZM18 44.5858V45.5858C18 46.4767 19.0771 46.9229 19.7071 46.2929L27.7071 38.2929C27.8946 38.1054 28.149 38 28.4142 38H46C47.1046 38 48 37.1046 48 36V35C48 36.1046 47.1046 37 46 37H28.4142C28.149 37 27.8946 37.1054 27.7071 37.2929L19.7071 45.2929C19.0771 45.9229 18 45.4767 18 44.5858Z" fill="#031C5A" fill-opacity="0.1"/>
-<rect x="13" y="14" width="30" height="4" rx="2" fill="url(#paint2_linear)"/>
-<rect x="12.5" y="13.5" width="31" height="5" rx="2.5" stroke="#004E6E" stroke-opacity="0.1"/>
-<rect x="13" y="21" width="25" height="4" rx="2" fill="url(#paint3_linear)"/>
-<rect x="12.5" y="20.5" width="26" height="5" rx="2.5" stroke="#004E6E" stroke-opacity="0.1"/>
-<rect x="13" y="28" width="20" height="4" rx="2" fill="url(#paint4_linear)"/>
-<rect x="12.5" y="27.5" width="21" height="5" rx="2.5" stroke="#004E6E" stroke-opacity="0.1"/>
-<defs>
-<linearGradient id="paint0_linear" x1="51" y1="10" x2="11" y2="50" gradientUnits="userSpaceOnUse">
-<stop stop-color="#6EB4D9"/>
-<stop offset="1" stop-color="#004E6E"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="8" y1="8" x2="48" y2="48" gradientUnits="userSpaceOnUse">
-<stop stop-color="#44F0D3"/>
-<stop offset="1" stop-color="#3DAEE9"/>
-</linearGradient>
-<linearGradient id="paint2_linear" x1="43" y1="18" x2="19.5854" y2="-11.2683" gradientUnits="userSpaceOnUse">
-<stop stop-color="#D1D5D9"/>
-<stop offset="1" stop-color="#FCFFFF"/>
-</linearGradient>
-<linearGradient id="paint3_linear" x1="38" y1="25" x2="14.02" y2="0.0208158" gradientUnits="userSpaceOnUse">
-<stop stop-color="#D1D5D9"/>
-<stop offset="1" stop-color="#FCFFFF"/>
-</linearGradient>
-<linearGradient id="paint4_linear" x1="33" y1="32" x2="9.39344" y2="12.3279" gradientUnits="userSpaceOnUse">
-<stop stop-color="#D1D5D9"/>
-<stop offset="1" stop-color="#FCFFFF"/>
-</linearGradient>
-</defs>
-</svg>
--- a/images/client-icons/quaternion.svg
+++ b/images/client-icons/quaternion.svg
@ -1,464 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="48"
-   height="48"
-   viewBox="0 0 48 48.000001"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="quaternion2.svg">
-  <defs
-     id="defs4">
-    <linearGradient
-       id="b"
-       y1="23.774559"
-       x1="22.540125"
-       y2="44.054428"
-       x2="42.645557"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(30,0)">
-      <stop
-         stop-color="#292c2f"
-         id="stop12" />
-      <stop
-         offset="1"
-         stop-color="#292c2f"
-         stop-opacity="0"
-         id="stop14" />
-    </linearGradient>
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient4416">
-      <stop
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0"
-         id="stop4418" />
-      <stop
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1"
-         id="stop4420" />
-    </linearGradient>
-    <style
-       id="current-color-scheme"
-       type="text/css">
-      .ColorScheme-Text {
-        color:#4d4d4d;
-      }
-      .ColorScheme-Highlight {
-        color:#3daee9;
-      }
-      </style>
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#b"
-       id="linearGradient4384-2"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(18.78125,-16.0625)"
-       x1="-21.260931"
-       y1="13.89889"
-       x2="10.555012"
-       y2="48.902145" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient4416"
-       id="linearGradient4422-7"
-       x1="-30.500504"
-       y1="28.249998"
-       x2="-10.500504"
-       y2="7.8749971"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(4.0005053,-4.0000137)" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#b"
-       id="linearGradient5173"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.80454501,0,0,0.80454501,29.039903,1009.4479)"
-       x1="-8.4545803"
-       y1="4.9617052"
-       x2="10.555012"
-       y2="48.902145" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient4416"
-       id="linearGradient5175"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.89628968,0,0,0.89628968,2.535611,1907.0938)"
-       x1="34.2505"
-       y1="-976.61401"
-       x2="8.5004978"
-       y2="-1002.614" />
-    <linearGradient
-       gradientTransform="translate(-384.57,-499.8)"
-       gradientUnits="userSpaceOnUse"
-       x2="0"
-       y2="503.8"
-       y1="543.8"
-       id="a">
-      <stop
-         id="stop7"
-         stop-color="#197cf1" />
-      <stop
-         id="stop9"
-         stop-color="#20bcfa"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="432.5705"
-       id="a-6"
-       y1="547.79999"
-       y2="500.04578"
-       x2="432.5705"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-432.5705,-499.79999)">
-      <stop
-         style="stop-color:#1e2b35;stop-opacity:1"
-         stop-color="#18222a"
-         id="stop4216" />
-      <stop
-         style="stop-color:#525c64;stop-opacity:1"
-         offset="1"
-         stop-color="#566069"
-         id="stop4218" />
-    </linearGradient>
-    <linearGradient
-       gradientTransform="translate(-344.5695,-499.79999)"
-       id="b-7"
-       y1="517.8"
-       x1="399.57"
-       y2="534.8"
-       x2="416.57"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         id="stop4221" />
-      <stop
-         offset="1"
-         stop-opacity="0"
-         id="stop4223" />
-    </linearGradient>
-    <linearGradient
-       gradientTransform="translate(-344.5695,-499.79999)"
-       id="c"
-       y1="537.8"
-       y2="508.8"
-       gradientUnits="userSpaceOnUse"
-       x2="0">
-      <stop
-         stop-color="#026ddc"
-         id="stop4226" />
-      <stop
-         offset="1"
-         stop-color="#28b0fd"
-         id="stop4228" />
-    </linearGradient>
-    <linearGradient
-       id="d"
-       y1="525.28"
-       x1="408.65"
-       y2="533.28"
-       x2="416.65"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-.081-.48)">
-      <stop
-         stop-opacity=".065"
-         id="stop4231" />
-      <stop
-         offset="1"
-         stop-opacity="0"
-         id="stop4233" />
-    </linearGradient>
-    <linearGradient
-       xlink:href="#d"
-       id="e"
-       y1="517.96"
-       x1="417.79"
-       y2="525.91"
-       gradientUnits="userSpaceOnUse"
-       x2="426.22"
-       gradientTransform="matrix(-1,0,0,1,817.2,-0.48)" />
-    <linearGradient
-       gradientUnits="userSpaceOnUse"
-       x2="39.279999"
-       y2="36.632999"
-       x1="22.285"
-       y1="18.709999"
-       id="b-5"
-       gradientTransform="translate(-13.182,-16.463)">
-      <stop
-         id="stop12-3"
-         stop-color="#292c2f" />
-      <stop
-         id="stop14-5"
-         stop-opacity="0"
-         stop-color="#292c2f"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="463.30493"
-       id="b-3"
-       y1="791.61914"
-       y2="721.56116"
-       gradientUnits="userSpaceOnUse"
-       x2="520.69641"
-       gradientTransform="matrix(0.71874732,0,0,0.68157806,-378.12417,-491.55024)">
-      <stop
-         style="stop-color:#00945a;stop-opacity:1"
-         stop-color="#26c281"
-         id="stop4252" />
-      <stop
-         style="stop-color:#38fa95;stop-opacity:1"
-         offset="1"
-         stop-color="#3fc380"
-         id="stop4254" />
-    </linearGradient>
-    <linearGradient
-       id="a-67"
-       y1="517.79999"
-       y2="533.79999"
-       x1="404.98001"
-       x2="420.98001"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.98828127,0,0,0.98828127,-383.20097,-495.43517)">
-      <stop
-         stop-color="#383e51"
-         id="stop4247" />
-      <stop
-         offset="1"
-         stop-color="#655c6f"
-         stop-opacity="0"
-         id="stop4249" />
-    </linearGradient>
-    <linearGradient
-       gradientTransform="matrix(0.98828127,0,0,0.98828127,-378.84265,-493.45861)"
-       id="c-5"
-       y1="531.79999"
-       y2="515.79999"
-       x2="0"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         stop-color="#70e4b3"
-         id="stop4257" />
-      <stop
-         offset="1"
-         stop-color="#c8f0dc"
-         id="stop4259" />
-    </linearGradient>
-    <linearGradient
-       id="b-3-3"
-       y1="785.71002"
-       y2="727.71002"
-       gradientUnits="userSpaceOnUse"
-       x2="0"
-       gradientTransform="matrix(0.71874732,0,0,0.68157806,-387.2511,-495.98773)">
-      <stop
-         stop-color="#26c281"
-         id="stop4252-5" />
-      <stop
-         offset="1"
-         stop-color="#3fc380"
-         id="stop4254-6" />
-    </linearGradient>
-    <linearGradient
-       gradientTransform="translate(-13.130467,-10.269952)"
-       gradientUnits="userSpaceOnUse"
-       x2="42.645557"
-       y2="44.054428"
-       x1="22.540125"
-       y1="23.774559"
-       id="b-1">
-      <stop
-         id="stop12-2"
-         stop-color="#292c2f" />
-      <stop
-         id="stop14-7"
-         stop-opacity="0"
-         stop-color="#292c2f"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       y2="39.179428"
-       x2="3.3955555"
-       y1="32.924278"
-       x1="-2.8595951"
-       gradientTransform="translate(7.947106,-34.03464)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient4318-9"
-       xlink:href="#b"
-       inkscape:collect="always" />
-    <linearGradient
-       y2="39.179428"
-       x2="3.3955555"
-       y1="39.799278"
-       x1="-13.672095"
-       gradientTransform="translate(14.488281,-20.003906)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient4345-7"
-       xlink:href="#b"
-       inkscape:collect="always" />
-    <linearGradient
-       y2="48.902145"
-       x2="10.555012"
-       y1="12.39889"
-       x1="-22.510931"
-       gradientTransform="translate(18.78125,-16.0625)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient4384-2-2"
-       xlink:href="#b"
-       inkscape:collect="always" />
-    <linearGradient
-       gradientUnits="userSpaceOnUse"
-       x2="42.645557"
-       y2="44.054428"
-       x1="22.540125"
-       y1="23.774559"
-       id="b-36"
-       gradientTransform="translate(-71.999501,32.001813)">
-      <stop
-         id="stop12-7"
-         stop-color="#292c2f" />
-      <stop
-         id="stop14-53"
-         stop-opacity="0"
-         stop-color="#292c2f"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="389.3205"
-       id="a-6-5"
-       y1="547.67499"
-       y2="499.92078"
-       x2="426.6955"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-360.571,-467.79817)">
-      <stop
-         style="stop-color:#1e2b35;stop-opacity:1"
-         stop-color="#18222a"
-         id="stop4216-6" />
-      <stop
-         style="stop-color:#6d7983;stop-opacity:1"
-         offset="1"
-         stop-color="#566069"
-         id="stop4218-2" />
-    </linearGradient>
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="32.789359"
-     inkscape:cy="42.117635"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     showguides="false"
-     inkscape:guide-bbox="true"
-     inkscape:snap-global="false"
-     showborder="false"
-     borderlayer="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid5026" />
-    <sodipodi:guide
-       position="13,11.25"
-       orientation="0.70710678,0.70710678"
-       id="guide5089" />
-    <sodipodi:guide
-       position="7.875,26.375001"
-       orientation="0.70710678,0.70710678"
-       id="guide5091" />
-    <sodipodi:guide
-       position="29.875,39.500001"
-       orientation="0.70710678,0.70710678"
-       id="guide5093" />
-    <sodipodi:guide
-       position="35,36.250001"
-       orientation="0.70710678,0.70710678"
-       id="guide5097" />
-    <sodipodi:guide
-       position="9.875,20.5"
-       orientation="0.70710678,0.70710678"
-       id="guide5126" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:groupmode="layer"
-     id="layer2"
-     inkscape:label="Livello 2">
-    <path
-       id="path5159"
-       d="m 24.04876,6.1174361 c -9.930889,0 -17.925793,7.9949039 -17.925793,17.9257939 0,9.930889 7.994904,17.925793 17.925793,17.925793 0.02411,0 0.04771,-0.0017 0.07178,-0.0018 l 16.955978,4.3e-5 c 0.496545,0 0.89629,-0.399737 0.89629,-0.89629 l 0,-16.961232 c 8.1e-5,-0.02232 0.0018,-0.04418 0.0018,-0.06652 0,-9.930889 -7.994904,-17.9257934 -17.925795,-17.9257934 z"
-       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#1d99f3;fill-opacity:1;fill-rule:nonzero;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       inkscape:connector-curvature="0"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-  </g>
-  <g
-     inkscape:label="Livello 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-1004.3622)">
-    <path
-       style="opacity:0.3;fill:#ffffff;fill-opacity:1;stroke-width:2.79999995;stroke-opacity:0.55"
-       inkscape:connector-curvature="0"
-       d="m 6.1310739,1028.8503 c -0.00358,-0.1498 -0.010755,-0.2976 -0.010755,-0.4483 0,-9.9308 7.994904,-17.9257 17.925794,-17.9257 9.93089,0 17.925795,7.9949 17.925795,17.9257 0,0.1507 -0.0072,0.2985 -0.01076,0.4483 -0.23662,-9.7221 -8.138312,-17.4777 -17.91504,-17.4777 -9.780313,0 -17.6784177,7.7556 -17.9150382,17.4777"
-       id="path5163"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <path
-       sodipodi:nodetypes="ccccccccccccccccc"
-       inkscape:connector-curvature="0"
-       id="path5165"
-       d="m 11.232155,1026.802 14.222481,14.2935 -3.520064,-0.3911 -9.191278,-9.1912 2.684492,7.5202 6.204245,6.2684 2.49952,0.1156 17.241676,-0.023 0.640018,-1.0668 -0.05709,-14.8384 -0.0649,-1.7857 -8.756475,-8.7243 -0.64001,0.8532 -3.555621,-3.6266 -10.240187,0.64 -4.76453,4.1244 z"
-       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.18800001;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient5173);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5167"
-       d="m 6.1334706,1027.9574 c -0.00367,0.1495 -0.010504,0.2976 -0.010504,0.448 0,9.9309 7.9949037,17.9258 17.9257927,17.9258 0.02411,0 0.04771,0 0.07178,0 l 16.955981,0 c 0.496544,0 0.896289,-0.3996 0.896289,-0.8962 l 0,-0.8945 c 0,0.4965 -0.399745,0.8963 -0.896289,0.8963 l -16.955983,0 -0.07178,0 c -9.78071,0 -17.6785062,-7.7561 -17.9152898,-17.4777 z m 35.8393324,0.3763 0,0.1383 c 8.2e-5,-0.022 0.0018,-0.044 0.0018,-0.066 0,-0.024 -0.0018,-0.048 -0.0018,-0.072 z"
-       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.3;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#161e25;fill-opacity:1;fill-rule:nonzero;stroke-width:2.79999995;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.55;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <path
-       sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccc"
-       inkscape:connector-curvature="0"
-       id="path5169"
-       d="m 24.850998,1015.3211 -2.3e-4,0 c -4.221957,-0.2137 -8.462616,1.6173 -11.185311,5.279 -1.410567,1.8989 -2.22395,4.0471 -2.493121,6.2301 l 1.696347,-0.2507 3.220344,-0.4718 2.68403,-2.0567 -5.463182,0.8056 c 0.374562,-1.1444 0.916754,-2.2533 1.67664,-3.2759 2.961145,-3.9843 7.972375,-5.4929 12.459008,-4.168 l 1.563639,-1.1933 c -1.347181,-0.5332 -2.750838,-0.8302 -4.158164,-0.9015 z m 6.710874,2.5126 -4.6e-4,0.01 -0.521308,1.6335 -0.859253,2.6992 0.499033,3.8383 1.715908,-5.384 c 0.863373,0.8389 1.619917,1.8132 2.204556,2.9452 2.442167,4.7279 1.298074,10.3196 -2.445266,13.7365 l 0.0072,0.053 c -0.02757,0.026 -0.05527,0.055 -0.0831,0.081 l 4.152714,4.8087 1.274973,-1.1026 -3.204232,-3.7103 c 3.427251,-3.9365 4.309935,-9.6879 1.761636,-14.6216 -1.086112,-2.1028 -2.658768,-3.7804 -4.502389,-4.9823 z m -20.627884,12.8598 c 0.795585,5.8959 5.518184,10.6684 11.708243,11.2806 2.355072,0.2329 4.622679,-0.1736 6.634024,-1.0664 l -1.086358,-1.3241 -0.0062,-5e-4 -2.138088,-2.6048 -3.22492,-1.339 3.657256,4.4524 c -1.173938,0.2676 -2.40585,0.375 -3.673603,0.2496 -5.070346,-0.501 -9.016389,-4.197 -10.072229,-8.8986 z"
-       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.63318729;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <path
-       inkscape:connector-curvature="0"
-       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.45;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient5175);fill-opacity:1;fill-rule:nonzero;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 24.04876,1010.4797 c -9.930889,0 -17.925793,7.9949 -17.925793,17.9257 0,9.9309 7.994904,17.9258 17.925793,17.9258 0.02411,0 0.04771,0 0.07178,0 l 16.955978,0 c 0.496545,0 0.89629,-0.3996 0.89629,-0.8962 l 0,-16.9612 c 8.1e-5,-0.022 0.0018,-0.044 0.0018,-0.066 0,-9.931 -7.994902,-17.9259 -17.925793,-17.9259 z"
-       id="path5171"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-  </g>
-</svg>
--- a/images/client-icons/schildichat.svg
+++ b/images/client-icons/schildichat.svg
--- a/images/client-icons/syphon.svg
+++ b/images/client-icons/syphon.svg
--- a/images/client-icons/tensor.png
+++ b/images/client-icons/tensor.png
--- a/images/client-icons/thunderbird.svg
+++ b/images/client-icons/thunderbird.svg
@ -1,65 +0,0 @@
-<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M452.1 306.5H452.16C474.2 229.45 570.24 191.84 668.11 191.84C735.74 191.84 796.45 213.25 838.07 247.24C813.232 248.411 788.708 253.285 765.31 261.7C798.94 274.2 827.83 293.43 849.24 317.22C833.087 314.439 816.707 313.201 800.32 313.52C840.596 371.863 862.114 441.105 862 512C862 705.3 705.3 862 512 862C321.68 862 162 702.65 162 512C162 481.89 166 450.8 173.77 421.64C175.81 415.52 178.65 409.65 182.42 407.5C187.14 404.81 191.44 412.83 192.13 415.44C197.248 434.61 204.134 453.263 212.7 471.16C211.95 431.2 229.02 394.8 252.5 363.32C268.16 342.33 282.68 322.88 289.38 266.75C289.83 262.98 293.4 260.27 297.01 261.45C347.97 278.13 375.21 362.99 370.98 433.95C399.13 437.98 399 408.57 399 408.57C390 380.91 396 329.5 452 306.5H452.1Z" fill="url(#paint0_linear_1_4)"/>
-<path opacity="0.9" d="M850.55 422.87C859.06 615.37 700.81 781.34 507.84 781.34C327.19 781.34 179.16 641.71 165.77 464.49C163.381 481.085 162.125 497.824 162.01 514.59C163.38 704.21 322.67 862 512.01 862C705.31 862 862.01 705.3 862.01 512C862.01 481.2 858.02 451.33 850.55 422.87Z" fill="url(#paint1_radial_1_4)"/>
-<path style="mix-blend-mode:screen" d="M503.47 332.01C499.7 325.34 482.29 315.47 474.68 313.75C503.48 221.5 650.2 193.18 740 209.5C777.37 216.3 823.91 236.66 838.07 247.24C796.45 213.25 735.73 191.84 668.11 191.84C570.24 191.84 474.2 229.45 452.16 306.5H452C396 329.5 390 380.93 399 408.58C407.64 375.59 448.75 335.05 503.47 332.01Z" fill="url(#paint2_radial_1_4)"/>
-<path d="M605.18 268.3C526.56 283.77 500.87 288.83 474.56 313.84C504.11 235.61 579.54 219.75 669.42 255.41C648.028 259.82 626.615 264.12 605.18 268.31V268.3Z" fill="url(#paint3_linear_1_4)"/>
-<path d="M181 410.93C159.52 498.87 176.12 602.23 273.7 688.97C244.65 657.2 209.18 539.9 287.45 456.1C292.72 450.45 301.79 454.6 302.08 462.32C308.53 636.48 449.06 742.85 611.08 722.96C560.88 720.14 394.86 661.99 518.36 638.99C582.91 626.96 684.12 608.11 684.12 517.29C684.12 370.07 570.29 327.03 501.26 333.43C454.02 337.81 411.97 367.79 399.03 408.56C404 424.63 384.19 435.88 370.98 433.99C375.22 363.04 347.98 278.13 297.01 261.45C293.41 260.27 289.83 262.98 289.38 266.75C282.68 322.88 268.16 342.33 252.51 363.32C229.02 394.81 211.95 431.2 212.7 471.16C204.134 453.263 197.248 434.61 192.13 415.44C191.56 413.28 188.43 407.25 184.65 406.97C182.6 406.82 181.51 408.82 181 410.93Z" fill="url(#paint4_radial_1_4)"/>
-<path style="mix-blend-mode:screen" d="M474.99 647.9C570.03 725.07 761.16 667.21 761.16 479.58C684 596.54 585.72 677.22 475 647.9H474.99Z" fill="url(#paint5_linear_1_4)"/>
-<path style="mix-blend-mode:screen" d="M287.45 456.1C288.314 455.133 289.403 454.394 290.62 453.947C291.838 453.501 293.146 453.361 294.43 453.54C224.37 538.99 280.88 689.06 319.66 725.93C321.83 732.07 282.87 700.14 277.5 692.67C248 667.64 205.72 543.61 287.45 456.1Z" fill="url(#paint6_linear_1_4)"/>
-<path d="M512 654.97C607.06 654.97 684.13 592.09 684.13 514.52C684.13 436.95 607.06 374.07 512 374.07C430.9 374.07 339.83 426.83 339.87 516.57C339.91 655.24 486.41 735.02 611.29 722.94C601.91 721.85 543.39 718.74 503.84 674C500.27 669.97 494.08 662.93 496.89 658.36C499.69 653.79 507.41 654.96 511.99 654.96L512 654.97Z" fill="url(#paint7_linear_1_4)"/>
-<path opacity="0.6" d="M665.38 450.7L529.34 580.88C517.27 589.46 504.42 590.08 491.74 582.3L358.31 451.18C362.117 445.062 366.396 439.251 371.11 433.8L385.11 446.9C420.15 479.74 448.48 506.27 488.41 540.35C506.43 555.73 512.03 555.43 529.71 540.35C575.39 501.35 608.8 471.85 652.23 433.06C657.07 438.586 661.464 444.488 665.37 450.71L665.38 450.7Z" fill="white"/>
-<mask id="mask0_1_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="339" y="448" width="346" height="277">
-<path d="M684.13 514.52C684.13 592.09 607.06 654.97 512 654.97C507.41 654.97 499.7 653.79 496.89 658.37C494.08 662.93 500.27 669.97 503.84 674C541 716.04 594.91 721.33 609.06 722.72L611.29 722.94C486.41 735.02 339.91 655.24 339.87 516.57C339.74 493.482 346.165 470.831 358.4 451.25L492.48 573.03C502.02 581.69 518.09 581.69 527.63 573.03L664.25 448.94C676.95 468.52 684.13 490.84 684.13 514.52Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_1_4)">
-<path opacity="0.7" d="M300 352.53H735.07V747H300V352.53Z" fill="url(#paint8_linear_1_4)"/>
-<g filter="url(#filter0_f_1_4)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M472.04 573.85C446.69 547.47 370.77 459.82 370.77 459.82L376.64 460.08L495.5 548.85C504.4 555.32 517.1 555.25 525.92 548.7L642.47 460.2L648.65 459.71C648.65 459.71 575.21 545.28 547.08 573.47C518.95 601.66 497.39 600.23 472.04 573.85Z" fill="#458FCD"/>
-</g>
-</g>
-<path d="M536.15 303.81C554.57 298.01 552.95 279.78 552.95 279.78C552.95 279.78 543.74 268.93 525.49 274.94C508.41 280.57 505.76 292.74 505.76 292.74C505.76 292.74 515.09 310.44 536.15 303.81Z" fill="white"/>
-<defs>
-<filter id="filter0_f_1_4" x="338.77" y="427.71" width="341.88" height="198.416" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="16" result="effect1_foregroundBlur_1_4"/>
-</filter>
-<linearGradient id="paint0_linear_1_4" x1="283.48" y1="307.2" x2="776.88" y2="767.42" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1B91F3"/>
-<stop offset="1" stop-color="#0B68CB"/>
-</linearGradient>
-<radialGradient id="paint1_radial_1_4" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(282.57 465.55) rotate(66.5177) scale(295.96 283.519)">
-<stop offset="0.53" stop-color="#0B4186" stop-opacity="0"/>
-<stop offset="1" stop-color="#0B4186" stop-opacity="0.45"/>
-</radialGradient>
-<radialGradient id="paint2_radial_1_4" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(521 344) rotate(-127.997) scale(63.2702 104.698)">
-<stop stop-color="#EF3ACC" stop-opacity="0"/>
-<stop offset="1" stop-color="#EF3ACC" stop-opacity="0.64"/>
-</radialGradient>
-<linearGradient id="paint3_linear_1_4" x1="420.77" y1="425.01" x2="598.31" y2="227.37" gradientUnits="userSpaceOnUse">
-<stop stop-color="#0F5DB0"/>
-<stop offset="1" stop-color="#0F5DB0" stop-opacity="0"/>
-</linearGradient>
-<radialGradient id="paint4_radial_1_4" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(380 702.7) rotate(-64.2624) scale(461.716 570.355)">
-<stop offset="0.02" stop-color="#094188"/>
-<stop offset="0.97" stop-color="#0B4186" stop-opacity="0"/>
-</radialGradient>
-<linearGradient id="paint5_linear_1_4" x1="731.92" y1="568.11" x2="649.37" y2="770.8" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E247C4" stop-opacity="0"/>
-<stop offset="1" stop-color="#E247C4" stop-opacity="0.64"/>
-</linearGradient>
-<linearGradient id="paint6_linear_1_4" x1="220.01" y1="386.34" x2="292.74" y2="679.06" gradientUnits="userSpaceOnUse">
-<stop offset="0.1" stop-color="#EF3ACC"/>
-<stop offset="1" stop-color="#EF3ACC" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint7_linear_1_4" x1="512" y1="425.5" x2="512" y2="721.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="0.91" stop-color="#BEE1FE"/>
-<stop offset="1" stop-color="#96CEFD"/>
-</linearGradient>
-<linearGradient id="paint8_linear_1_4" x1="517.54" y1="593" x2="517.54" y2="717" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BCE0FD"/>
-<stop offset="1" stop-color="#88CCFC"/>
-</linearGradient>
-</defs>
-</svg>
--- a/images/fdroid-badge.png
+++ b/images/fdroid-badge.png
--- a/images/flathub-badge.svg
+++ b/images/flathub-badge.svg
--- a/images/google-play-us.svg
+++ b/images/google-play-us.svg
--- a/images/member-icon.svg
+++ b/images/member-icon.svg
@ -1,7 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1332 16.3632C11.1709 16.7731 10.112 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9C17 11.6173 15.7432 13.941 13.8001 15.4005V15.4005C13.4881 15.6349 13.1583 15.847 12.8133 16.0344C12.5926 16.1543 12.3657 16.2641 12.1332 16.3632ZM9.00004 9.39998C10.3255 9.39998 11.4 8.23592 11.4 6.79998C11.4 5.36404 10.3255 4.19998 9.00004 4.19998C7.67456 4.19998 6.60004 5.36404 6.60004 6.79998C6.60004 8.23592 7.67456 9.39998 9.00004 9.39998ZM8.99989 15.4001C10.7295 15.4001 12.2989 14.7139 13.4507 13.599C12.7384 11.8404 11.0141 10.6 9.00009 10.6C6.98597 10.6 5.26159 11.8406 4.54932 13.5992C5.7011 14.714 7.27038 15.4001 8.99989 15.4001Z"/>
-</mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1332 16.3632C11.1709 16.7731 10.112 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9C17 11.6173 15.7432 13.941 13.8001 15.4005V15.4005C13.4881 15.6349 13.1583 15.847 12.8133 16.0344C12.5926 16.1543 12.3657 16.2641 12.1332 16.3632ZM9.00004 9.39998C10.3255 9.39998 11.4 8.23592 11.4 6.79998C11.4 5.36404 10.3255 4.19998 9.00004 4.19998C7.67456 4.19998 6.60004 5.36404 6.60004 6.79998C6.60004 8.23592 7.67456 9.39998 9.00004 9.39998ZM8.99989 15.4001C10.7295 15.4001 12.2989 14.7139 13.4507 13.599C12.7384 11.8404 11.0141 10.6 9.00009 10.6C6.98597 10.6 5.26159 11.8406 4.54932 13.5992C5.7011 14.714 7.27038 15.4001 8.99989 15.4001Z" fill="#666666"/>
-<path d="M12.1332 16.3632L11.3492 14.5232L12.1332 16.3632ZM13.8001 15.4005H11.8001V19.4042L15.0013 16.9996L13.8001 15.4005ZM13.8001 15.4005H15.8001V11.3967L12.5989 13.8014L13.8001 15.4005ZM12.8133 16.0344L13.768 17.7919L13.768 17.7919L12.8133 16.0344ZM13.4507 13.599L14.8418 15.036L15.8107 14.098L15.3044 12.8481L13.4507 13.599ZM4.54932 13.5992L2.69558 12.8485L2.18935 14.0984L3.15837 15.0363L4.54932 13.5992ZM9 19C10.3863 19 11.7115 18.7168 12.9171 18.2031L11.3492 14.5232C10.6303 14.8295 9.83767 15 9 15V19ZM-1 9C-1 14.5228 3.47715 19 9 19V15C5.68629 15 3 12.3137 3 9H-1ZM9 -1C3.47715 -1 -1 3.47715 -1 9H3C3 5.68629 5.68629 3 9 3V-1ZM19 9C19 3.47715 14.5228 -1 9 -1V3C12.3137 3 15 5.68629 15 9H19ZM15.0013 16.9996C17.4256 15.1786 19 12.2729 19 9H15C15 10.9617 14.0607 12.7034 12.5989 13.8014L15.0013 16.9996ZM15.8001 15.4005V15.4005H11.8001V15.4005H15.8001ZM12.5989 13.8014C12.3645 13.9774 12.1171 14.1365 11.8586 14.277L13.768 17.7919C14.1995 17.5574 14.6116 17.2923 15.0013 16.9996L12.5989 13.8014ZM12.9171 18.2031C13.2082 18.0791 13.4921 17.9418 13.768 17.7919L11.8586 14.277C11.6932 14.3668 11.5233 14.449 11.3492 14.5232L12.9171 18.2031ZM9.40004 6.79998C9.40004 7.01655 9.31985 7.18185 9.22749 7.2819C9.13763 7.37925 9.05614 7.39998 9.00004 7.39998V11.4C11.5778 11.4 13.4 9.18675 13.4 6.79998H9.40004ZM9.00004 6.19998C9.05614 6.19998 9.13763 6.22071 9.22749 6.31806C9.31985 6.41811 9.40004 6.58341 9.40004 6.79998H13.4C13.4 4.41321 11.5778 2.19998 9.00004 2.19998V6.19998ZM8.60004 6.79998C8.60004 6.58341 8.68024 6.41811 8.77259 6.31806C8.86246 6.22071 8.94395 6.19998 9.00004 6.19998V2.19998C6.42228 2.19998 4.60004 4.41321 4.60004 6.79998H8.60004ZM9.00004 7.39998C8.94395 7.39998 8.86246 7.37925 8.77259 7.28189C8.68024 7.18184 8.60004 7.01655 8.60004 6.79998H4.60004C4.60004 9.18675 6.42228 11.4 9.00004 11.4V7.39998ZM12.0597 12.162C11.2659 12.9304 10.1898 13.4001 8.99989 13.4001V17.4001C11.2693 17.4001 13.332 16.4975 14.8418 15.036L12.0597 12.162ZM9.00009 12.6C10.1718 12.6 11.18 13.3204 11.597 14.3498L15.3044 12.8481C14.2968 10.3605 11.8564 8.60004 9.00009 8.60004V12.6ZM6.40306 14.35C6.82004 13.3204 7.82833 12.6 9.00009 12.6V8.60004C6.1436 8.60004 3.70313 10.3607 2.69558 12.8485L6.40306 14.35ZM8.99989 13.4001C7.81008 13.4001 6.73407 12.9304 5.94027 12.1621L3.15837 15.0363C4.66812 16.4976 6.73068 17.4001 8.99989 17.4001V13.4001Z" fill="#666666" mask="url(#path-1-inside-1)"/>
-</svg>
--- a/images/platform-icon.svg
+++ b/images/platform-icon.svg
@ -1 +0,0 @@
-<svg width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.358 14.752H4.97a1.048 1.048 0 01-1.047-1.048V6.286c0-.579.469-1.048 1.047-1.048H17.08c.579 0 1.048.47 1.048 1.048v1.33M11.424 15.152v1.21M9.304 16.362h3.653" stroke="#666" stroke-width=".8" stroke-linecap="round" stroke-linejoin="round"/><rect x="14.543" y="8.955" width="3.914" height="7.371" rx=".648" stroke="#666" stroke-width=".8"/><path stroke="#666" stroke-width=".8" d="M16.028 15.174h1.048"/></svg>
--- a/images/tick-dark.svg
+++ b/images/tick-dark.svg
@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.5 12.5L8.84497 15.845C9.71398 16.714 11.1538 16.601 11.8767 15.6071L18.5 6.5" stroke="#333" stroke-width="2" stroke-linecap="round"/>
-</svg>
--- a/index.html
+++ b/index.html
@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>You're invited to talk on Matrix</title>
-    <meta name="description" content="You're invited to talk on Matrix">
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-    <link rel="stylesheet" type="text/css" href="css/main.css">
-    <meta property="twitter:card" content="summary"/>
-    <meta property="twitter:image" content="https://matrix.org/blog/img/matrix-logo.png"/>
-	<meta property="twitter:site" content="@matrixdotorg"/>
-	<meta property="twitter:title" content="Matrix - Decentralised and secure communication"/>
-	<meta property="twitter:description" content="You're invited to talk on Matrix. If you don't already have a client this link will help you pick one, and join the conversation. If you already have one, this link will help you join the conversation"/>
-</head>
-<body>
-    <script id="main" type="module">
-        import {main} from "./src/main.js";
-        main(document.body);
-    </script>
-    <noscript>
-        <h1>Please enable javascript</h1>
-        <p>Matrix.to is a preview service from chat rooms, people and communities on <a href="https://matrix.org">Matrix</a>.</p>
-        <p>It preserves your privacy by only processing what you view on the client side. For this to work, it needs javascript.</p>
-    </noscript>
-</body>
-</html>
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};
--- a/package.json
+++ b/package.json
@ -1,37 +1,83 @@
 {
-  "name": "matrix.to",
-  "version": "1.2.17",
-  "type": "module",
-  "license": "Apache-2.0",
-  "engines": {
-    "node": ">= 14.0.0"
-  },
-  "scripts": {
-    "start": "node scripts/serve-local.js",
-    "build": "node scripts/build.js"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.1",
-    "@babel/preset-env": "^7.11.0",
-    "@rollup/plugin-babel": "^5.1.0",
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-multi-entry": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.3.4",
-    "autoprefixer": "^10.0.1",
-    "cheerio": "^1.0.0-rc.3",
-    "core-js": "^3.6.5",
-    "finalhandler": "^1.1.2",
-    "mdn-polyfills": "^5.20.0",
-    "postcss": "^8.4.31",
-    "postcss-css-variables": "^0.17.0",
-    "postcss-flexbugs-fixes": "^4.2.1",
-    "postcss-import": "^12.0.1",
-    "postcss-url": "^8.0.0",
-    "regenerator-runtime": "^0.13.7",
-    "rollup": "^2.26.4",
-    "rollup-plugin-terser": "^7.0.2",
-    "serve-static": "^1.14.1",
-    "xxhashjs": "^0.2.2"
-  }
+    "name": "matrix.to",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@quentin-sommer/react-useragent": "^3.1.0",
+        "classnames": "^2.2.6",
+        "cross-fetch": "^3.0.6",
+        "formik": "^2.1.4",
+        "promise.any": "^2.0.1",
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1",
+        "react-scripts": "3.4.1",
+        "zod": "^1.10.3"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "lint:fix": "eslint src/**/*.ts src/**/*.tsx --fix",
+        "storybook": "start-storybook -p 9009 -s public",
+        "build-storybook": "build-storybook -s public"
+    },
+    "lint-staged": {
+        "src/**/*.{js,jsx,ts,tsx}": [
+            "eslint --fix",
+            "prettier --write --tab-width 4 --single-quote",
+            "git add"
+        ],
+        "src/**/*.{json,css,scss,md}": [
+            "prettier --write --tab-width 4 --single-quote",
+            "git add"
+        ]
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@storybook/addon-a11y": "^5.3.19",
+        "@storybook/addon-actions": "^5.3.19",
+        "@storybook/addon-backgrounds": "^5.3.19",
+        "@storybook/addon-knobs": "^5.3.19",
+        "@storybook/addon-links": "^5.3.19",
+        "@storybook/addon-storysource": "^5.3.19",
+        "@storybook/addon-viewport": "^5.3.19",
+        "@storybook/addons": "^5.3.19",
+        "@storybook/preset-create-react-app": "^3.1.4",
+        "@storybook/react": "^5.3.19",
+        "@testing-library/jest-dom": "^4.2.4",
+        "@testing-library/react": "^9.3.2",
+        "@testing-library/user-event": "^7.1.2",
+        "@types/classnames": "^2.2.10",
+        "@types/jest": "^24.0.0",
+        "@types/lodash": "^4.14.159",
+        "@types/node": "^12.0.0",
+        "@types/react": "^16.9.0",
+        "@types/react-dom": "^16.9.0",
+        "@types/yup": "^0.29.3",
+        "eslint-config-matrix-org": "^0.1.0",
+        "husky": "^4.2.5",
+        "lint-staged": "^10.2.7",
+        "node-sass": "^4.14.1",
+        "prettier": "^2.0.5",
+        "storybook-addon-designs": "^5.4.0",
+        "ts-jest": "^26.1.4",
+        "typescript": "~3.7.2"
+    }
 }
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="A client-side matrix link redirection service"
+    />
+    <title>Matrix.to</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/scripts/build.js
+++ b/scripts/build.js
@ -1,307 +0,0 @@
-/*
-Copyright 2020 Bruno Windels <bruno@windels.cloud>
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import cheerio from "cheerio";
-import fs from "fs/promises";
-import path from "path";
-import xxhash from 'xxhashjs';
-import { rollup } from 'rollup';
-import postcss from "postcss";
-import postcssImport from "postcss-import";
-// needed for legacy bundle
-import babel from '@rollup/plugin-babel';
-// needed to find the polyfill modules in the main-legacy.js bundle
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-// needed because some of the polyfills are written as commonjs modules
-import commonjs from '@rollup/plugin-commonjs';
-// multi-entry plugin so we can add polyfill file to main
-import multi from '@rollup/plugin-multi-entry';
-import { terser } from "rollup-plugin-terser";
-import replace from "@rollup/plugin-replace";
-// replace urls of asset names with content hashed version
-import postcssUrl from "postcss-url";
-import cssvariables from "postcss-css-variables";
-import autoprefixer from "autoprefixer";
-import flexbugsFixes from "postcss-flexbugs-fixes";
-
-import {createClients} from "../src/open/clients/index.js";
-
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-const projectDir = path.join(dirname(fileURLToPath(import.meta.url)), "../");
-
-async function build() {
-    // get version number
-    const version = JSON.parse(await fs.readFile(path.join(projectDir, "package.json"), "utf8")).version;
-    // clear target dir
-    const targetDir = path.join(projectDir, "build/");
-    await removeDirIfExists(targetDir);
-    await fs.mkdir(targetDir);
-    await fs.mkdir(path.join(targetDir, "images"));
-    await fs.mkdir(path.join(targetDir, "img")); // contains the badge image for historical reasons, unhashed
-    await fs.mkdir(path.join(targetDir, ".well-known"));
-    const assets = new AssetMap(targetDir);
-    const imageAssets = await copyFolder(path.join(projectDir, "images"), path.join(targetDir, "images"));
-    assets.addSubMap(imageAssets);
-    await assets.write(`bundle.js`, await buildJs("src/main.js", assets, ["src/polyfill.js"]));
-    await assets.write(`bundle.css`, await buildCss("css/main.css", targetDir, assets));
-    await assets.writeUnhashed(".well-known/apple-app-site-association", buildAppleAssociatedAppsFile(createClients()));
-    await assets.writeUnhashed("index.html", await buildHtml(assets));
-    await assets.writeUnhashed("img/matrix-badge.svg", await fs.readFile(path.join(projectDir, "images-nohash/matrix-badge.svg")));
-    const globalHash = assets.hashForAll();
-    console.log(`built matrix.to ${version} (${globalHash}) successfully with ${assets.size} files`);
-}
-
-async function buildHtml(assets) {
-    const devHtml = await fs.readFile(path.join(projectDir, "index.html"), "utf8");
-    const doc = cheerio.load(devHtml);
-    doc("link[rel=stylesheet]").attr("href", assets.resolve(`bundle.css`));
-    const mainScripts = [
-        // this is needed to avoid hitting https://github.com/facebook/regenerator/issues/378
-        // which prevents the whole bundle to load, as our CSP headers don't allow unsafe-eval
-        // and I preferred this over disabling strict mode for the whole bundle
-        `<script type="text/javascript">window.regeneratorRuntime = undefined;</script>`,
-        `<script type="text/javascript" src="${assets.resolve(`bundle.js`)}"></script>`,
-        `<script type="text/javascript">bundle.main(document.body);</script>`
-    ];
-    doc("script#main").replaceWith(mainScripts.join(""));
-    return doc.html();
-}
-
-function createReplaceUrlPlugin(assets) {
-    const replacements = {};
-    for (const [key, value] of assets) {
-        replacements[key] = value;
-    }
-    return replace(replacements);
-}
-
-async function buildJs(mainFile, assets, extraFiles = []) {
-    // compile down to whatever IE 11 needs
-    const babelPlugin = babel.babel({
-        babelHelpers: 'bundled',
-        exclude: 'node_modules/**',
-        presets: [
-            [
-                "@babel/preset-env",
-                {
-                    useBuiltIns: "entry",
-                    corejs: "3",
-                    targets: "IE 11",
-                }
-            ]
-        ]
-    });
-    // create js bundle
-    const rollupConfig = {
-        // important the extraFiles come first,
-        // so polyfills are available in the global scope
-        // if needed for the mainfile
-        input: extraFiles.concat(mainFile),
-        plugins: [multi(), commonjs(), nodeResolve(), createReplaceUrlPlugin(assets), babelPlugin, terser()]
-    };
-    const bundle = await rollup(rollupConfig);
-    const {output} = await bundle.generate({
-        format: 'iife',
-        name: `bundle`
-    });
-    const code = output[0].code;
-    return code;
-}
-
-function buildAppleAssociatedAppsFile(clients) {
-    const appIds = clients.map(c => c.appleAssociatedAppId).flat().filter(id => !!id);
-    return JSON.stringify({
-        "applinks": {
-            "details": [
-                {
-                    appIDs: appIds,
-                    components: [
-                        {
-                            "#": "/*",
-                            "comment": "Only open urls with a fragment, so you can still create links"
-                        }
-                    ]
-                }
-            ]
-        }
-    });
-}
-
-async function buildCss(entryPath, targetDir, assets) {
-    entryPath = path.join(projectDir, entryPath);
-    const assetUrlMapper = ({absolutePath}) => {
-        const relPath = absolutePath.slice(projectDir.length);
-        return assets.resolve(path.join(targetDir, relPath));
-    };
-
-    const preCss = await fs.readFile(entryPath, "utf8");
-    const options = [
-        postcssImport,
-        cssvariables(),
-        autoprefixer({overrideBrowserslist: ["IE 11"], grid: "no-autoplace"}),
-        flexbugsFixes(),
-        postcssUrl({url: assetUrlMapper}),
-    ];
-    const cssBundler = postcss(options);
-    const result = await cssBundler.process(preCss, {from: entryPath});
-    return result.css;
-}
-
-async function removeDirIfExists(targetDir) {
-    try {
-        await fs.rmdir(targetDir, {recursive: true});
-    } catch (err) {
-        if (err.code !== "ENOENT") {
-            throw err;
-        }
-    }
-}
-
-async function copyFolder(srcRoot, dstRoot, filter = null, assets = null) {
-    assets = assets || new AssetMap(dstRoot);
-    const dirEnts = await fs.readdir(srcRoot, {withFileTypes: true});
-    for (const dirEnt of dirEnts) {
-        const dstPath = path.join(dstRoot, dirEnt.name);
-        const srcPath = path.join(srcRoot, dirEnt.name);
-        if (dirEnt.isDirectory()) {
-            await fs.mkdir(dstPath);
-            await copyFolder(srcPath, dstPath, filter, assets);
-        } else if ((dirEnt.isFile() || dirEnt.isSymbolicLink()) && (!filter || filter(srcPath))) {
-            const content = await fs.readFile(srcPath);
-            await assets.write(dstPath, content);
-        }
-    }
-    return assets;
-}
-
-function contentHash(str) {
-    var hasher = new xxhash.h32(0);
-    hasher.update(str);
-    return hasher.digest();
-}
-
-class AssetMap {
-    constructor(targetDir) {
-        // remove last / if any, so substr in create works well
-        this._targetDir = path.resolve(targetDir);
-        this._assets = new Map();
-        // hashes for unhashed resources so changes in these resources also contribute to the hashForAll
-        this._unhashedHashes = [];
-    }
-
-    _toRelPath(resourcePath) {
-        let relPath = resourcePath;
-        if (path.isAbsolute(resourcePath)) {
-            if (!resourcePath.startsWith(this._targetDir)) {
-                throw new Error(`absolute path ${resourcePath} that is not within target dir ${this._targetDir}`);
-            }
-            relPath = resourcePath.slice(this._targetDir.length + 1); // + 1 for the /
-        }
-        return relPath;
-    }
-
-    _create(resourcePath, content) {
-        const relPath = this._toRelPath(resourcePath);
-        const hash = contentHash(Buffer.from(content));
-        const dir = path.dirname(relPath);
-        const extname = path.extname(relPath);
-        const basename = path.basename(relPath, extname);
-        const dstRelPath = path.join(dir, `${basename}-${hash}${extname}`);
-        this._assets.set(relPath, dstRelPath);
-        return dstRelPath;
-    }
-
-    async write(resourcePath, content) {
-        const relPath = this._create(resourcePath, content);
-        const fullPath = path.join(this.directory, relPath);
-        if (typeof content === "string") {
-            await fs.writeFile(fullPath, content, "utf8");
-        } else {
-            await fs.writeFile(fullPath, content);
-        }
-        return relPath;
-    }
-
-    async writeUnhashed(resourcePath, content) {
-        const relPath = this._toRelPath(resourcePath);
-        this._assets.set(relPath, relPath);
-        const fullPath = path.join(this.directory, relPath);
-        if (typeof content === "string") {
-            await fs.writeFile(fullPath, content, "utf8");
-        } else {
-            await fs.writeFile(fullPath, content);
-        }
-        return relPath;
-    }
-
-    get directory() {
-        return this._targetDir;
-    }
-
-    resolve(resourcePath) {
-        const relPath = this._toRelPath(resourcePath);
-        const result = this._assets.get(relPath);
-        if (!result) {
-            throw new Error(`unknown path: ${relPath}, only know ${Array.from(this._assets.keys()).join(", ")}`);
-        }
-        return result;
-    }
-
-    addSubMap(assetMap) {
-        if (!assetMap.directory.startsWith(this.directory)) {
-            throw new Error(`map directory doesn't start with this directory: ${assetMap.directory} ${this.directory}`);
-        }
-        const relSubRoot = assetMap.directory.slice(this.directory.length + 1);
-        for (const [key, value] of assetMap._assets.entries()) {
-            this._assets.set(path.join(relSubRoot, key), path.join(relSubRoot, value));
-        }
-    }
-
-    [Symbol.iterator]() {
-        return this._assets.entries();
-    }
-
-    isUnhashed(relPath) {
-        const resolvedPath = this._assets.get(relPath);
-        if (!resolvedPath) {
-            throw new Error("Unknown asset: " + relPath);
-        }
-        return relPath === resolvedPath;
-    }
-
-    get size() {
-        return this._assets.size;
-    }
-
-    has(relPath) {
-        return this._assets.has(relPath);
-    }
-
-    hashForAll() {
-        const globalHashAssets = Array.from(this).map(([, resolved]) => resolved);
-        globalHashAssets.push(...this._unhashedHashes);
-        globalHashAssets.sort();
-        return contentHash(globalHashAssets.join(","));
-    }
-
-    addToHashForAll(resourcePath, content) {
-        this._unhashedHashes.push(`${resourcePath}-${contentHash(Buffer.from(content))}`);
-    }
-}
-
-build().catch(err => console.error(err));
--- a/scripts/package.sh
+++ b/scripts/package.sh
@ -1,8 +0,0 @@
-set -e
-VERSION=$(jq -r ".version" package.json)
-PACKAGE=matrixto-$VERSION.tar.gz
-yarn build
-pushd build
-tar -czvf ../$PACKAGE ./
-popd
-echo $PACKAGE
--- a/scripts/serve-local.js
+++ b/scripts/serve-local.js
@ -1,48 +0,0 @@
-/*
-Copyright 2020 Bruno Windels <bruno@windels.cloud>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import finalhandler from "finalhandler"
-import http from "http"
-import serveStatic from "serve-static"
-import path from "path"
-import { fileURLToPath } from "url";
-const projectDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../");
-
-// Serve up parent directory with cache disabled
-const serve = serveStatic(
-    projectDir,
-    {
-        etag: false,
-        setHeaders: res => {
-            res.setHeader("Pragma", "no-cache");
-            res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
-            res.setHeader("Expires", "Wed, 21 Oct 2015 07:28:00 GMT");
-            // same CSP as matrix.to server is using, so local testing happens under similar environment
-            res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src * data:; connect-src *; font-src 'self'; manifest-src 'self'; form-action 'self'; navigate-to *;");
-        },
-        index: ['index.html', 'index.htm']
-    }
-);
- 
-// Create server
-const server = http.createServer(function onRequest (req, res) {
-    console.log(req.method, req.url);
-    serve(req, res, finalhandler(req, res))
-});
-
-// Listen
-server.listen(5000);
-console.log("Listening on port 5000");
--- a/src/App.scss
+++ b/src/App.scss
@ -0,0 +1,43 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import './color-scheme';
+
+#root {
+    background-color: $app-background;
+    background-image: url('./imgs/background.svg');
+    background-repeat: no-repeat;
+    background-size: stretch;
+    background-position: 50% -20%;
+}
+
+@mixin spacer {
+    width: 100%;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.topSpacer {
+    @include spacer;
+
+    height: 10vh;
+}
+
+.bottomSpacer {
+    @include spacer;
+
+    height: 10vh;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,80 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useState, useEffect } from 'react';
+
+import SingleColumn from './layouts/SingleColumn';
+import CreateLinkTile from './components/CreateLinkTile';
+import MatrixTile from './components/MatrixTile';
+import Tile from './components/Tile';
+import LinkRouter from './pages/LinkRouter';
+import Footer from './components/Footer';
+
+import './App.scss';
+
+import GlobalContext from './contexts/GlobalContext';
+
+/* eslint-disable no-restricted-globals */
+
+const App: React.FC = () => {
+    let page = (
+        <>
+            <CreateLinkTile />
+        </>
+    );
+
+    const [hash, setHash] = useState(location.hash);
+
+    console.log(hash);
+    useEffect(() => {
+        // Some hacky uri decoding
+        if (location.href.split('/').length > 4) {
+            location.href = decodeURIComponent(location.href);
+        }
+
+        window.onhashchange = () => setHash(location.hash);
+    }, []);
+
+    if (hash) {
+        if (hash.startsWith('#/')) {
+            page = <LinkRouter link={hash.slice(2)} />;
+        } else {
+            page = (
+                <Tile>
+                    Links should be in the format {location.host}/#/{'<'}
+                    matrix-resource-identifier{'>'}
+                </Tile>
+            );
+        }
+    }
+
+    return (
+        <GlobalContext>
+            <SingleColumn>
+                <div className="topSpacer" />
+                {page}
+                <div>
+                    <MatrixTile isLink={!!location.hash} />
+                    <br />
+                    <Footer />
+                </div>
+                <div className="bottomSpacer" />
+            </SingleColumn>
+        </GlobalContext>
+    );
+};
+
+export default App;
--- a/src/InvalidUrlView.js
+++ b/src/InvalidUrlView.js
@ -1,56 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {TemplateView} from "./utils/TemplateView.js";
-import {LinkKind, IdentifierKind} from "./Link.js";
-
-export class InvalidUrlView extends TemplateView {
-    render(t, vm) {
-        return t.div({ className: "DisclaimerView card" }, [
-            t.h1("Invalid URL"),
-            t.p([
-                'The link you have entered is not valid. If you like, you can ',
-                t.a({ href: "#/" }, 'return to the home page.')
-            ]),
-            vm.validFixes.length ? this._renderValidFixes(t, vm.validFixes) : [],
-        ]);
-    }
-
-    _describeRoom(identifierKind) {
-        return identifierKind === IdentifierKind.RoomAlias ? "room alias" : "room";
-    }
-
-    _describeLinkKind(linkKind, identifierKind) {
-        switch (linkKind) {
-            case LinkKind.Room: return `The ${this._describeRoom(identifierKind)} `;
-            case LinkKind.User: return "The user ";
-            case LinkKind.Group: return "The group ";
-            case LinkKind.Event: return `An event in ${this._describeRoom(identifierKind)} `;
-        }
-    }
-
-    _renderValidFixes(t, validFixes) {
-        return t.p([
-            'Did you mean any of the following?',
-            t.ul(validFixes.map(fix =>
-                t.li([
-                    this._describeLinkKind(fix.link.kind, fix.link.identifierKind),
-                    t.a({ href: fix.url }, fix.link.identifier)
-                ])
-            ))
-        ]);
-    }
-}
--- a/src/Link.js
+++ b/src/Link.js
@ -1,212 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {createEnum} from "./utils/enum.js";
-import {orderedUnique} from "./utils/unique.js";
-
-const ROOMALIAS_PATTERN = /^#([^:]*):(.+)$/;
-const ROOMID_PATTERN = /^!([^:]*):(.+)$/;
-const USERID_PATTERN = /^@([^:]+):(.+)$/;
-const EVENTID_PATTERN = /^$([^:]+):(.+)$/;
-const GROUPID_PATTERN = /^\+([^:]+):(.+)$/;
-
-export const IdentifierKind = createEnum(
-    "RoomId",
-    "RoomAlias",
-    "UserId",
-    "GroupId",
-);
-
-function asPrefix(identifierKind) {
-    switch (identifierKind) {
-        case IdentifierKind.RoomId: return "!";
-        case IdentifierKind.RoomAlias: return "#";
-        case IdentifierKind.GroupId: return "+";
-        case IdentifierKind.UserId: return "@";
-        default: throw new Error("invalid id kind " + identifierKind);
-    }
-}
-
-function getWebInstanceMap(queryParams) {
-    const prefix = "web-instance[";
-    const postfix = "]";
-    const webInstanceParams = queryParams.filter(([key]) => key.startsWith(prefix) && key.endsWith(postfix));
-    const webInstances = webInstanceParams.map(([key, value]) => {
-        const noPrefix = key.slice(prefix.length);
-        const clientId = noPrefix.slice(0, -postfix.length);
-        return [clientId, value];
-    });
-    return webInstances.reduce((map, [clientId, host]) => {
-        map[clientId] = host;
-        return map;
-    }, {});
-}
-
-export function getLabelForLinkKind(kind) {
-    switch (kind) {
-        case LinkKind.User: return "Start chat";
-        case LinkKind.Room: return "View room";
-        case LinkKind.Group: return "View community";
-        case LinkKind.Event: return "View message";
-    }
-}
-
-export const LinkKind = createEnum(
-    "Room",
-    "User",
-    "Group",
-    "Event"
-)
-
-export function tryFixUrl(fragment) {
-    const attempts = [];
-    const afterHash = fragment.substring(fragment.startsWith("#/") ? 2 : 1);
-    attempts.push('#/@' + afterHash);
-    attempts.push('#/#' + afterHash);
-    attempts.push('#/!' + afterHash);
-
-    const validAttempts = [];
-    for (const attempt of [...new Set(attempts)]) {
-        const link = Link.parseFragment(attempt);
-        if (link) {
-            validAttempts.push({ url: attempt, link });
-        }
-    }
-    return validAttempts;
-}
-
-export class Link {
-    static validateIdentifier(identifier) {
-        return !!(
-            USERID_PATTERN.exec(identifier) ||
-            ROOMALIAS_PATTERN.exec(identifier) || 
-            ROOMID_PATTERN.exec(identifier) ||
-            GROUPID_PATTERN.exec(identifier)
-        );
-    }
-
-    static parseIdentifier(identifier) {
-        return Link._parse(identifier);
-    }
-
-    static parseFragment(fragment) {
-        if (!fragment) {
-            return null;
-        }
-        let [linkStr, queryParamsStr] = fragment.split("?");
-        if (!linkStr.startsWith("#/")) {
-            return null;
-        }
-        linkStr = linkStr.slice(2);
-        const [identifier, eventId] = linkStr.split("/");
-
-        let viaServers = [];
-        let clientId = null;
-        let webInstances = {};
-        if (queryParamsStr) {
-            const queryParams = queryParamsStr.split("&").map(pair => {
-                const [key, value] = pair.split("=");
-                return [decodeURIComponent(key), decodeURIComponent(value)];
-            });
-            viaServers = queryParams
-                .filter(([key, value]) => key === "via")
-                .map(([,value]) => value);
-            const clientParam = queryParams.find(([key]) => key === "client");
-            if (clientParam) {
-                clientId = clientParam[1];
-            }
-            webInstances = getWebInstanceMap(queryParams);
-        }
-        return Link._parse(identifier, eventId, clientId, viaServers, webInstances);
-    }
-
-    static _parse(identifier, eventId = undefined, clientId = null, viaServers = [], webInstances = {}) {
-        if (!identifier) {
-            return null;
-        }
-        let matches;
-        matches = USERID_PATTERN.exec(identifier);
-        if (matches) {
-            const server = matches[2];
-            const localPart = matches[1];
-            return new Link(clientId, viaServers, IdentifierKind.UserId, localPart, server, webInstances);
-        }
-        matches = ROOMALIAS_PATTERN.exec(identifier);
-        if (matches) {
-            const server = matches[2];
-            const localPart = matches[1];
-            return new Link(clientId, viaServers, IdentifierKind.RoomAlias, localPart, server, webInstances, eventId);
-        }
-        matches = ROOMID_PATTERN.exec(identifier);
-        if (matches) {
-            const server = matches[2];
-            const localPart = matches[1];
-            return new Link(clientId, viaServers, IdentifierKind.RoomId, localPart, server, webInstances, eventId);
-        }
-        matches = GROUPID_PATTERN.exec(identifier);
-        if (matches) {
-            const server = matches[2];
-            const localPart = matches[1];
-            return new Link(clientId, viaServers, IdentifierKind.GroupId, localPart, server, webInstances);
-        }
-        return null;
-    }
-
-    constructor(clientId, viaServers, identifierKind, localPart, server, webInstances, eventId) {
-        const servers = [server];
-        servers.push(...viaServers);
-        this.webInstances = webInstances;
-        this.servers = orderedUnique(servers);
-        this.identifierKind = identifierKind;
-        this.identifier = `${asPrefix(identifierKind)}${localPart}:${server}`;
-        this.eventId = eventId;
-        this.clientId = clientId;
-    }
-
-    get kind() {
-        if (this.eventId) {
-            return LinkKind.Event;
-        }
-        switch (this.identifierKind) {
-            case IdentifierKind.RoomId:
-            case IdentifierKind.RoomAlias:
-                return LinkKind.Room;
-            case IdentifierKind.UserId:
-                return LinkKind.User;
-            case IdentifierKind.GroupId:
-                return LinkKind.Group;
-            default:
-                return null;
-        }
-    }
-
-    equals(link) {
-        return link &&
-            link.identifier === this.identifier &&
-            this.servers.length === link.servers.length &&
-            this.servers.every((s, i) => link.servers[i] === s) &&
-            Object.keys(this.webInstances).length === Object.keys(link.webInstances).length &&
-            Object.keys(this.webInstances).every(k => this.webInstances[k] === link.webInstances[k]);
-    }
-
-    toFragment() {
-        if (this.eventId) {
-            return `/${this.identifier}/${this.eventId}`;
-        } else {
-            return `/${this.identifier}`;
-        }
-    }
-}
--- a/src/Platform.js
+++ b/src/Platform.js
@ -1,64 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {createEnum} from "./utils/enum.js";
-
-export const Platform = createEnum(
-    "DesktopWeb",
-    "MobileWeb",
-    "Android",
-    "iOS",
-    "Windows",
-    "macOS",
-    "Linux"
-);
-
-export function guessApplicablePlatforms(userAgent, platform) {
-    // return [Platform.DesktopWeb, Platform.Linux];
-    let nativePlatform;
-    let webPlatform;
-    if (/android/i.test(userAgent)) {
-        nativePlatform = Platform.Android;
-        webPlatform = Platform.MobileWeb;
-    } else if ( // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885
-        (
-            /iPad|iPhone|iPod/.test(navigator.platform) ||
-            (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
-        ) && !window.MSStream
-    ) {
-        nativePlatform = Platform.iOS;
-        webPlatform = Platform.MobileWeb;
-    } else if (platform.toLowerCase().indexOf("linux") !== -1) {
-        nativePlatform = Platform.Linux;
-        webPlatform = Platform.DesktopWeb;
-    } else if (platform.toLowerCase().indexOf("mac") !== -1) {
-        nativePlatform = Platform.macOS;
-        webPlatform = Platform.DesktopWeb;
-    } else {
-        nativePlatform = Platform.Windows;
-        webPlatform = Platform.DesktopWeb;
-    }
-    return [nativePlatform, webPlatform];
-}
-
-export function isWebPlatform(p) {
-    return p === Platform.DesktopWeb || p === Platform.MobileWeb;
-}
-
-
-export function isDesktopPlatform(p) {
-    return p === Platform.Linux || p === Platform.Windows || p === Platform.macOS;
-}
--- a/src/Preferences.js
+++ b/src/Preferences.js
@ -1,68 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {Platform} from "./Platform.js";
-import {EventEmitter} from "./utils/ViewModel.js";
-
-export class Preferences extends EventEmitter {
-    constructor(localStorage) {
-        super();
-        this._localStorage = localStorage;
-        this.clientId = null;
-        // used to differentiate web from native if a client supports both
-        this.platform = null;
-        this.homeservers = null;
-
-        const prefsStr = localStorage.getItem("preferred_client");
-        if (prefsStr) {
-            const {id, platform} = JSON.parse(prefsStr);
-            this.clientId = id;
-            this.platform = Platform[platform];
-        }
-        const serversStr = localStorage.getItem("consented_servers");
-        if (serversStr) {
-            this.homeservers = JSON.parse(serversStr);
-        }
-    }
-
-    setClient(id, platform) {
-        this.clientId = id;
-        platform = Platform[platform];
-        this.platform = platform;
-        this._localStorage.setItem("preferred_client", JSON.stringify({id, platform}));
-        this.emit("canClear")
-    }
-
-    setHomeservers(homeservers, persist) {
-        this.homeservers = homeservers;
-        if (persist) {
-            this._localStorage.setItem("consented_servers", JSON.stringify(homeservers));
-            this.emit("canClear");
-        }
-    }
-
-    clear() {
-        this._localStorage.removeItem("preferred_client");
-        this._localStorage.removeItem("consented_servers");
-        this.clientId = null;
-        this.platform = null;
-        this.homeservers = null;
-    }
-
-    get canClear() {
-        return !!this.clientId || !!this.platform || !!this.homeservers;
-    }
-}
--- a/src/RootView.js
+++ b/src/RootView.js
@ -1,49 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {TemplateView} from "./utils/TemplateView.js";
-import {OpenLinkView} from "./open/OpenLinkView.js";
-import {CreateLinkView} from "./create/CreateLinkView.js";
-import {LoadServerPolicyView} from "./policy/LoadServerPolicyView.js";
-import {DisclaimerView} from "./disclaimer/DisclaimerView.js";
-import {InvalidUrlView} from "./InvalidUrlView.js";
-
-export class RootView extends TemplateView {
-    render(t, vm) {
-        return t.div({className: "RootView"}, [
-            t.mapView(vm => vm.invalidUrlViewModel, invalidVM => invalidVM ? new InvalidUrlView(invalidVM) : null),
-            t.mapView(vm => vm.showDisclaimer, disclaimer => disclaimer ? new DisclaimerView() : null),
-            t.mapView(vm => vm.openLinkViewModel, vm => vm ? new OpenLinkView(vm) : null),
-            t.mapView(vm => vm.createLinkViewModel, vm => vm ? new CreateLinkView(vm) : null),
-            t.mapView(vm => vm.loadServerPolicyViewModel, vm => vm ? new LoadServerPolicyView(vm) : null),
-            t.div({className: "footer"}, [
-                t.p(t.img({src: "images/matrix-logo.svg"})),
-                t.p(["This invite uses ", externalLink(t, "https://matrix.org", "Matrix"), ", an open network for secure, decentralized communication."]),
-                t.ul({className: "links"}, [
-                    t.li(externalLink(t, "https://github.com/matrix-org/matrix.to", "GitHub project")),
-                    t.li(externalLink(t, "https://github.com/matrix-org/matrix.to/tree/main/src/open/clients", "Add your app")),
-                    t.li({className: {hidden: vm => !vm.hasPreferences}},
-                        t.button({className: "text", onClick: () => vm.clearPreferences()}, "Clear preferences")),
-                    t.li(t.a({href: "#/disclaimer/"}, "Disclaimer")),
-                ])
-            ])
-        ]);
-    }
-}
-
-function externalLink(t, href, label) {
-    return t.a({href, target: "_blank", rel: "noopener noreferrer"}, label);
-}
--- a/src/RootViewModel.js
+++ b/src/RootViewModel.js
@ -1,98 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {Link} from "./Link.js";
-import {ViewModel} from "./utils/ViewModel.js";
-import {OpenLinkViewModel} from "./open/OpenLinkViewModel.js";
-import {createClients} from "./open/clients/index.js";
-import {CreateLinkViewModel} from "./create/CreateLinkViewModel.js";
-import {LoadServerPolicyViewModel} from "./policy/LoadServerPolicyViewModel.js";
-import {InvalidUrlViewModel} from "./InvalidUrlViewModel.js";
-import {Platform} from "./Platform.js";
-
-export class RootViewModel extends ViewModel {
-    constructor(options) {
-        super(options);
-        this.link = null;
-        this.openLinkViewModel = null;
-        this.createLinkViewModel = null;
-        this.loadServerPolicyViewModel = null;
-        this.invalidUrlViewModel = null;
-        this.showDisclaimer = false;
-        this.preferences.on("canClear", () => {
-            this.emitChange();
-        });
-    }
-
-    _updateChildVMs(newLink, oldLink) {
-        this.link = newLink;
-        if (!newLink) {
-            this.openLinkViewModel = null;
-        } else if (!oldLink || !oldLink.equals(newLink)) {
-            this.openLinkViewModel = new OpenLinkViewModel(this.childOptions({
-                link: newLink,
-                clients: createClients(),
-            }));
-        }
-    }
-
-    _hideLinks() {
-        this.link = null;
-        this.openLinkViewModel = null;
-        this.createLinkViewModel = null;
-    }
-
-    updateHash(hash) {
-        // All view models except openLink are re-created anyway. Might as well
-        // clear them to avoid having to manually reset (n-1)/n view models in every case.
-        // That just doesn't scale well when we add new views.
-        const oldLink = this.link;
-        this.invalidUrlViewModel = null;
-        this.showDisclaimer = false;
-        this.loadServerPolicyViewModel = null;
-        this.createLinkViewModel = null;
-        let newLink;
-        if (hash.startsWith("#/policy/")) {
-            const server = hash.slice(9);
-            this._updateChildVMs(null, oldLink);
-            this.loadServerPolicyViewModel = new LoadServerPolicyViewModel(this.childOptions({server}));
-            this.loadServerPolicyViewModel.load();
-        } else if (hash.startsWith("#/disclaimer/")) {
-            this._updateChildVMs(null, oldLink);
-            this.showDisclaimer = true;
-        }  else if (hash === "" || hash === "#" || hash === "#/") {
-            this._updateChildVMs(null, oldLink);
-            this.createLinkViewModel = new CreateLinkViewModel(this.childOptions());
-        } else if (newLink = Link.parseFragment(hash)) {
-            this._updateChildVMs(newLink, oldLink);
-        } else {
-            this._updateChildVMs(null, oldLink);
-            this.invalidUrlViewModel = new InvalidUrlViewModel(this.childOptions({
-                fragment: hash
-            }));
-        }
-        this.emitChange();
-    }
-
-    clearPreferences() {
-        this.preferences.clear();
-        this._updateChildVMs();
-    }
-
-    get hasPreferences() {
-        return this.preferences.canClear;
-    }
-}
--- a/src/_color-scheme.scss
+++ b/src/_color-scheme.scss
@ -0,0 +1,25 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$app-background: #f4f4f4;
+$background: #ffffff;
+$foreground: #000000;
+$font: #333333;
+$grey: #666666;
+$accent: #0098d4;
+$error: #d6001c;
+$link: #0098d4;
+$borders: #f4f4f4;
--- a/src/_error.scss
+++ b/src/_error.scss
@ -14,5 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import "core-js/stable";
-import "regenerator-runtime/runtime";
+@mixin error {
+    color: $error;
+    border-color: $error;
+}
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@ -0,0 +1,11 @@
+@mixin unreal-focus {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: Highlight;
+
+    /* WebKit gets its native focus styles. */
+    @media (-webkit-min-device-pixel-ratio: 0) {
+        outline-color: -webkit-focus-ring-color;
+        outline-style: auto;
+    }
+}
--- a/src/clients/Element.io.ts
+++ b/src/clients/Element.io.ts
@ -0,0 +1,96 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+    LinkedClient,
+    Maturity,
+    ClientKind,
+    ClientId,
+    Platform,
+} from './types';
+import { LinkKind } from '../parser/types';
+import logo from '../imgs/element.svg';
+
+const Element: LinkedClient = {
+    kind: ClientKind.LINKED_CLIENT,
+    name: 'Element',
+    author: 'Element',
+    logo: logo,
+    homepage: 'https://element.io',
+    maturity: Maturity.STABLE,
+    description: 'Fully-featured Matrix client for the Web',
+    platform: Platform.Desktop,
+    experimental: false,
+    clientId: ClientId.Element,
+    toUrl: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+                return new URL(
+                    `https://app.element.io/#/room/${link.identifier}`
+                );
+            case LinkKind.UserId:
+                return new URL(
+                    `https://app.element.io/#/user/${link.identifier}`
+                );
+            case LinkKind.Permalink:
+                return new URL(
+                    `https://app.element.io/#/room/${link.identifier}`
+                );
+            case LinkKind.GroupId:
+                return new URL(
+                    `https://app.element.io/#/group/${link.identifier}`
+                );
+        }
+    },
+    linkSupport: () => true,
+};
+
+export const ElementDevelop: LinkedClient = {
+    kind: ClientKind.LINKED_CLIENT,
+    name: 'Element Develop',
+    author: 'Element',
+    logo: logo,
+    homepage: 'https://element.io',
+    maturity: Maturity.STABLE,
+    description: 'Fully-featured Matrix client for the Web',
+    platform: Platform.Desktop,
+    experimental: true,
+    clientId: ClientId.ElementDevelop,
+    toUrl: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+                return new URL(
+                    `https://develop.element.io/#/room/${link.identifier}`
+                );
+            case LinkKind.UserId:
+                return new URL(
+                    `https://develop.element.io/#/user/${link.identifier}`
+                );
+            case LinkKind.Permalink:
+                return new URL(
+                    `https://develop.element.io/#/room/${link.identifier}`
+                );
+            case LinkKind.GroupId:
+                return new URL(
+                    `https://develop.element.io/#/group/${link.identifier}`
+                );
+        }
+    },
+    linkSupport: () => true,
+};
+export default Element;
--- a/src/clients/Fractal.tsx
+++ b/src/clients/Fractal.tsx
@ -0,0 +1,74 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { TextClient, Maturity, ClientKind, ClientId, Platform } from './types';
+
+import { LinkKind } from '../parser/types';
+
+import logo from '../imgs/fractal.png';
+
+const Fractal: TextClient = {
+    kind: ClientKind.TEXT_CLIENT,
+    name: 'Fractal',
+    logo: logo,
+    author: 'Daniel Garcia Moreno',
+    homepage: 'https://github.com/poljar/weechat-matrix',
+    maturity: Maturity.BETA,
+    experimental: false,
+    platform: Platform.Desktop,
+    clientId: ClientId.Fractal,
+    toInviteString: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+            case LinkKind.UserId:
+                return (
+                    <span>
+                        Click the '+' button in the top right and paste the
+                        identifier
+                    </span>
+                );
+            default:
+                return <span>Fractal doesn't support this kind of link</span>;
+        }
+    },
+    copyString: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+            case LinkKind.UserId:
+                return `${link.identifier}`;
+            default:
+                return '';
+        }
+    },
+    linkSupport: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+            case LinkKind.UserId:
+                return true;
+            default:
+                return false;
+        }
+    },
+
+    description: 'Fractal is a Matrix Client written in Rust',
+};
+
+export default Fractal;
--- a/src/clients/Nheko.tsx
+++ b/src/clients/Nheko.tsx
@ -0,0 +1,85 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { TextClient, Maturity, ClientKind, ClientId, Platform } from './types';
+
+import { LinkKind } from '../parser/types';
+
+import logo from '../imgs/nheko.svg';
+
+const Nheko: TextClient = {
+    kind: ClientKind.TEXT_CLIENT,
+    name: 'Nheko',
+    logo: logo,
+    author: 'mujx, red_sky, deepbluev7, Konstantinos Sideris',
+    homepage: 'https://github.com/Nheko-Reborn/nheko',
+    maturity: Maturity.BETA,
+    experimental: false,
+    platform: Platform.Desktop,
+    clientId: ClientId.Nheko,
+    toInviteString: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+                return (
+                    <span>
+                        Type{' '}
+                        <code>
+                            /join <b>{link.identifier}</b>
+                        </code>
+                    </span>
+                );
+            case LinkKind.UserId:
+                return (
+                    <span>
+                        Type{' '}
+                        <code>
+                            /invite <b>{link.identifier}</b>
+                        </code>
+                    </span>
+                );
+            default:
+                return <span>Nheko doesn't support this kind of link</span>;
+        }
+    },
+    copyString: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+                return `/join ${link.identifier}`;
+            case LinkKind.UserId:
+                return `/invite ${link.identifier}`;
+            default:
+                return '';
+        }
+    },
+    linkSupport: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+            case LinkKind.UserId:
+                return true;
+            default:
+                return false;
+        }
+    },
+    description:
+        'A native desktop app for Matrix that feels more like a mainstream chat app.',
+};
+
+export default Nheko;
--- a/src/clients/Weechat.tsx
+++ b/src/clients/Weechat.tsx
@ -0,0 +1,85 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { TextClient, Maturity, ClientKind, ClientId, Platform } from './types';
+
+import { LinkKind } from '../parser/types';
+
+import logo from '../imgs/weechat.svg';
+
+const Weechat: TextClient = {
+    kind: ClientKind.TEXT_CLIENT,
+    name: 'Weechat',
+    logo: logo,
+    author: 'Poljar',
+    homepage: 'https://github.com/poljar/weechat-matrix',
+    maturity: Maturity.LATE_BETA,
+    experimental: false,
+    platform: Platform.Desktop,
+    clientId: ClientId.WeeChat,
+    toInviteString: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+                return (
+                    <span>
+                        Type{' '}
+                        <code>
+                            /join <b>{link.identifier}</b>
+                        </code>
+                    </span>
+                );
+            case LinkKind.UserId:
+                return (
+                    <span>
+                        Type{' '}
+                        <code>
+                            /invite <b>{link.identifier}</b>
+                        </code>
+                    </span>
+                );
+            default:
+                return <span>Weechat doesn't support this kind of link</span>;
+        }
+    },
+    copyString: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+                return `/join ${link.identifier}`;
+            case LinkKind.UserId:
+                return `/invite ${link.identifier}`;
+            default:
+                return '';
+        }
+    },
+    linkSupport: (link) => {
+        switch (link.kind) {
+            case LinkKind.Alias:
+            case LinkKind.RoomId:
+            case LinkKind.UserId:
+                return true;
+            default:
+                return false;
+        }
+    },
+
+    description: 'Command-line Matrix interface using Weechat',
+};
+
+export default Weechat;
--- a/src/clients/index.ts
+++ b/src/clients/index.ts
@ -0,0 +1,45 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Client } from './types';
+
+import Element, { ElementDevelop } from './Element.io';
+import Weechat from './Weechat';
+import Nheko from './Nheko';
+import Fractal from './Fractal';
+
+/*
+ * All the supported clients of matrix.to
+ */
+const clients: Client[] = [Element, Weechat, Nheko, Fractal, ElementDevelop];
+
+/*
+ * A map from sharer string to client.
+ * Configured by hand so we can change the mappings
+ * easily later.
+ */
+export const clientMap: { [key: string]: Client } = {
+    [Element.clientId]: Element,
+    [Weechat.clientId]: Weechat,
+    [ElementDevelop.clientId]: ElementDevelop,
+    [Nheko.clientId]: Nheko,
+    [Fractal.clientId]: Fractal,
+};
+
+/*
+ * All the supported clients of matrix.to
+ */
+export default clients;
--- a/src/clients/types.ts
+++ b/src/clients/types.ts
@ -0,0 +1,94 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { SafeLink } from '../parser/types';
+
+/*
+ * A collection of descriptive tags that can be added to
+ * a clients description.
+ */
+export enum Platform {
+    iOS = 'iOS',
+    Android = 'ANDROID',
+    Desktop = 'DESKTOP',
+}
+
+/*
+ * A collection of states used for describing a clients maturity.
+ */
+export enum Maturity {
+    ALPHA = 'ALPHA',
+    LATE_ALPHA = 'LATE ALPHA',
+    BETA = 'BETA',
+    LATE_BETA = 'LATE_BETA',
+    STABLE = 'STABLE',
+}
+
+/*
+ * Used for constructing the discriminated union of all client types.
+ */
+export enum ClientKind {
+    LINKED_CLIENT = 'LINKED_CLIENT',
+    TEXT_CLIENT = 'TEXT_CLIENT',
+}
+
+export enum ClientId {
+    Element = 'element.io',
+    ElementDevelop = 'develop.element.io',
+    WeeChat = 'weechat',
+    Nheko = 'nheko',
+    Fractal = 'fractal',
+}
+
+/*
+ * The descriptive details of a client
+ */
+export interface ClientDescription {
+    name: string;
+    author: string;
+    homepage: string;
+    logo: string;
+    description: string;
+    platform: Platform;
+    maturity: Maturity;
+    clientId: ClientId;
+    experimental: boolean;
+    linkSupport: (link: SafeLink) => boolean;
+}
+
+/*
+ * A client which can be opened using a link with the matrix resource.
+ */
+export interface LinkedClient extends ClientDescription {
+    kind: ClientKind.LINKED_CLIENT;
+    toUrl(parsedLink: SafeLink): URL;
+}
+
+/*
+ * A client which provides isntructions for how to access the descired
+ * resource.
+ */
+export interface TextClient extends ClientDescription {
+    kind: ClientKind.TEXT_CLIENT;
+    toInviteString(parsedLink: SafeLink): JSX.Element;
+    copyString(parsedLink: SafeLink): string;
+}
+
+/*
+ * A description for a client as well as a method for converting matrix.to
+ * links to the client's specific representation.
+ */
+export type Client = LinkedClient | TextClient;
--- a/src/components/Avatar.scss
+++ b/src/components/Avatar.scss
@ -0,0 +1,29 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import '../color-scheme';
+
+.avatar {
+    border-radius: 100%;
+    border: 1px solid $borders;
+    height: 60px;
+    width: 60px;
+}
+
+.avatarNoCrop {
+    border-radius: 0;
+    border: 0;
+}
--- a/src/components/Avatar.stories.tsx
+++ b/src/components/Avatar.stories.tsx
@ -0,0 +1,44 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// disable camelcase check because our object keys come
+// from the matrix spec
+/* eslint-disable @typescript-eslint/camelcase */
+
+import React from 'react';
+
+import { UserAvatar } from './Avatar';
+
+export default {
+    title: 'Avatar',
+    parameters: {
+        design: {
+            type: 'figma',
+            url:
+                'https://www.figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=143%3A5853',
+        },
+    },
+};
+
+export const Default: React.FC<{}> = () => (
+    <UserAvatar
+        user={{
+            avatar_url: 'mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf',
+            displayname: 'Jorik Schellekens',
+        }}
+        userId="@jorik:matrix.org"
+    />
+);
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@ -0,0 +1,92 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { Group, Room, User } from '../matrix-cypher';
+
+import { getMediaQueryFromMCX } from '../utils/cypher-wrapper';
+import logo from '../imgs/chat-icon.svg';
+
+import './Avatar.scss';
+
+interface IProps {
+    className?: string;
+    avatarUrl: string;
+    label: string;
+}
+
+const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
+    const [src, setSrc] = useState(avatarUrl);
+    useEffect(() => {
+        setSrc(avatarUrl);
+    }, [avatarUrl]);
+
+    const _className = classNames('avatar', className, {
+        avatarNoCrop: src === logo,
+    });
+    return (
+        <img
+            src={src}
+            onError={(): void => setSrc(logo)}
+            alt={label}
+            className={_className}
+        />
+    );
+};
+
+interface IPropsUserAvatar {
+    user: User;
+    userId: string;
+}
+
+export const UserAvatar: React.FC<IPropsUserAvatar> = ({
+    user,
+    userId,
+}: IPropsUserAvatar) => (
+    <Avatar
+        avatarUrl={getMediaQueryFromMCX(user.avatar_url)}
+        label={user.displayname ? user.displayname : userId}
+    />
+);
+
+interface IPropsRoomAvatar {
+    room: Room;
+}
+
+export const RoomAvatar: React.FC<IPropsRoomAvatar> = ({
+    room,
+}: IPropsRoomAvatar) => (
+    <Avatar
+        avatarUrl={getMediaQueryFromMCX(room.avatar_url)}
+        label={room.name || room.room_id}
+    />
+);
+
+interface IPropsGroupAvatar {
+    group: Group;
+}
+
+export const GroupAvatar: React.FC<IPropsGroupAvatar> = ({
+    group,
+}: IPropsGroupAvatar) => (
+    <Avatar
+        avatarUrl={getMediaQueryFromMCX(group.avatar_url)}
+        label={group.name}
+    />
+);
+
+export default Avatar;
--- a/src/components/Button.scss
+++ b/src/components/Button.scss
@ -0,0 +1,61 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import '../color-scheme';
+
+.button {
+    width: 100%;
+
+    height: 48px;
+
+    border-radius: 2rem;
+    border: 0;
+
+    background-color: $foreground;
+    color: $background;
+
+    font-size: 14px;
+    font-weight: 500;
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    position: relative;
+
+    .buttonIcon {
+        position: absolute;
+        height: 24px;
+        width: 24px;
+
+        left: 18px;
+        top: 12px;
+    }
+}
+
+.buttonSecondary {
+    background-color: $background;
+    color: $foreground;
+    border: 1px solid $foreground;
+}
+
+.errorButton:hover {
+    cursor: not-allowed;
+}
+
+.buttonHighlight {
+    background-color: $accent;
+}
--- a/src/components/Button.stories.tsx
+++ b/src/components/Button.stories.tsx
@ -0,0 +1,33 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { text } from '@storybook/addon-knobs';
+
+import Button from './Button';
+
+export default { title: 'Button' };
+
+export const WithText: React.FC = () => (
+    <Button onClick={action('clicked')}>
+        {text('label', 'Hello Story Book')}
+    </Button>
+);
+
+export const Secondary: React.FC = () => (
+    <Button secondary>Secondary button</Button>
+);
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -0,0 +1,89 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classnames from 'classnames';
+
+import './Button.scss';
+
+interface IProps extends React.ButtonHTMLAttributes<Element> {
+    // Briefly display these instead of the children onClick
+    flashChildren?: React.ReactNode;
+    secondary?: boolean;
+    icon?: string;
+    flashIcon?: string;
+}
+
+/**
+ * Like a normal button except it will flash content when clicked.
+ */
+const Button: React.FC<
+    IProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef(
+    (
+        {
+            onClick,
+            children,
+            flashChildren,
+            className,
+            secondary,
+            icon,
+            flashIcon,
+            ...props
+        }: IProps,
+        ref: React.Ref<HTMLButtonElement>
+    ) => {
+        const [wasClicked, setWasClicked] = React.useState(false);
+
+        const wrappedOnClick: React.MouseEventHandler = (e) => {
+            if (onClick) {
+                onClick(e);
+            }
+
+            setWasClicked(true);
+            window.setTimeout(() => {
+                setWasClicked(false);
+            }, 1000);
+        };
+
+        const content = wasClicked && flashChildren ? flashChildren : children;
+
+        const classNames = classnames('button', className, {
+            buttonHighlight: wasClicked,
+            buttonSecondary: secondary,
+        });
+
+        const iconSrc = wasClicked && flashIcon ? flashIcon : icon;
+
+        const buttonIcon = icon ? (
+            <img className="buttonIcon" src={iconSrc} alt="" />
+        ) : null;
+
+        return (
+            <button
+                className={classNames}
+                onClick={wrappedOnClick}
+                ref={ref}
+                {...props}
+            >
+                {buttonIcon}
+                {content}
+            </button>
+        );
+    }
+);
+
+export default Button;
--- a/src/components/ClientList.scss
+++ b/src/components/ClientList.scss
@ -0,0 +1,22 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.clientList {
+    display: grid;
+    row-gap: 20px;
+    list-style-type: none;
+    padding-inline-start: 0;
+}
--- a/src/components/ClientList.tsx
+++ b/src/components/ClientList.tsx
@ -0,0 +1,96 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useContext } from 'react';
+import { UAContext } from '@quentin-sommer/react-useragent';
+
+import { SafeLink } from '../parser/types';
+import { ActionType, ClientContext } from '../contexts/ClientContext';
+import Clients from '../clients';
+import { Client, Platform } from '../clients/types';
+import ClientTile from './ClientTile';
+
+import './ClientList.scss';
+
+interface IProps {
+    link: SafeLink;
+    rememberSelection: boolean;
+}
+
+const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
+    const [
+        { showOnlyDeviceClients, showExperimentalClients },
+        clientDispatcher,
+    ] = useContext(ClientContext);
+    const { uaResults } = useContext(UAContext);
+
+    /*
+     * Function to decide whether a client is shown
+     */
+    const showClient = (client: Client): boolean => {
+        let showClient = false;
+
+        if (!showOnlyDeviceClients || uaResults === {}) {
+            showClient = true;
+        }
+
+        switch (client.platform) {
+            case Platform.Desktop:
+                showClient = showClient || !(uaResults as any).mobile;
+                break;
+            case Platform.iOS:
+                showClient = showClient || (uaResults as any).ios;
+                break;
+            case Platform.Android:
+                showClient = showClient || (uaResults as any).android;
+                break;
+        }
+
+        if (!showExperimentalClients && client.experimental) {
+            showClient = false;
+        }
+
+        if (!client.linkSupport(link)) {
+            showClient = false;
+        }
+
+        return showClient;
+    };
+
+    const clientLi = (client: Client): JSX.Element => (
+        <li
+            key={client.clientId}
+            onClick={(): void =>
+                rememberSelection
+                    ? clientDispatcher({
+                          action: ActionType.SetClient,
+                          clientId: client.clientId,
+                      })
+                    : undefined
+            }
+        >
+            <ClientTile client={client} link={link} />
+        </li>
+    );
+
+    return (
+        <ul className="clientList">
+            {Clients.filter(showClient).map(clientLi)}
+        </ul>
+    );
+};
+
+export default ClientList;
--- a/src/components/ClientSelection.scss
+++ b/src/components/ClientSelection.scss
@ -14,12 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-export function orderedUnique(array) {
-    const copy = [];
-    for (let i = 0; i < array.length; ++i) {
-        if (i === 0 || array.lastIndexOf(array[i], i - 1) === -1) {
-            copy.push(array[i]);
-        }
+.advanced {
+    display: grid;
+    row-gap: 20px;
+
+    .advancedOptions {
+        display: flex;
+        flex-direction: column;
+
+        align-items: flex-start;
    }
-    return copy;
-}
+}
--- a/src/components/ClientSelection.tsx
+++ b/src/components/ClientSelection.tsx
@ -0,0 +1,88 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useContext, useState } from 'react';
+
+import './ClientSelection.scss';
+import { ActionType, ClientContext } from '../contexts/ClientContext';
+import ClientList from './ClientList';
+import { SafeLink } from '../parser/types';
+import Button from './Button';
+import StyledCheckbox from './StyledCheckbox';
+
+interface IProps {
+    link: SafeLink;
+}
+
+const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
+    const [clientState, clientStateDispatch] = useContext(ClientContext);
+    const [rememberSelection, setRememberSelection] = useState(false);
+    const options = (
+        <div className="advancedOptions">
+            <StyledCheckbox
+                onChange={(): void => {
+                    setRememberSelection(!rememberSelection);
+                }}
+                checked={rememberSelection}
+            >
+                Remember choice for future invites in this browser
+            </StyledCheckbox>
+            <StyledCheckbox
+                onChange={(): void => {
+                    clientStateDispatch({
+                        action: ActionType.ToggleShowOnlyDeviceClients,
+                    });
+                }}
+                checked={clientState.showOnlyDeviceClients}
+            >
+                Show only clients suggested for this device
+            </StyledCheckbox>
+            <StyledCheckbox
+                onChange={(): void => {
+                    clientStateDispatch({
+                        action: ActionType.ToggleShowExperimentalClients,
+                    });
+                }}
+                checked={clientState.showExperimentalClients}
+            >
+                Show experimental clients
+            </StyledCheckbox>
+        </div>
+    );
+
+    const clearSelection =
+        clientState.clientId !== null ? (
+            <Button
+                onClick={(): void =>
+                    clientStateDispatch({
+                        action: ActionType.ClearClient,
+                    })
+                }
+            >
+                Clear my default client
+            </Button>
+        ) : null;
+
+    return (
+        <div className="advanced">
+            {options}
+            <ClientList link={link} rememberSelection={rememberSelection} />
+            {clearSelection}
+        </div>
+    );
+};
+
+export default ClientSelection;
--- a/src/components/ClientTile.scss
+++ b/src/components/ClientTile.scss
@ -0,0 +1,75 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import '../color-scheme';
+
+.clientTile {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    min-height: 150px;
+    width: 100%;
+
+    color: $foreground;
+
+    > img {
+        flex-shrink: 0;
+        height: 116px;
+        width: 116px;
+        margin-right: 14px;
+        border-radius: 16px;
+    }
+
+    > div {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        h1 {
+            text-align: left;
+            font-size: 14px;
+            line-height: 24px;
+        }
+
+        p {
+            margin-right: 8px;
+            text-align: left;
+        }
+
+        .button {
+            height: 40px;
+            width: 130px;
+            margin-top: 16px;
+        }
+    }
+
+    border-radius: 8px;
+
+    padding: 15px;
+
+    // For the chevron
+    position: relative;
+
+    &:hover {
+        background-color: $app-background;
+    }
+}
+
+.clientTileLink {
+    position: relative;
+
+    width: 100%;
+}
--- a/src/components/ClientTile.tsx
+++ b/src/components/ClientTile.tsx
@ -0,0 +1,78 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { Client, ClientKind } from '../clients/types';
+import { SafeLink } from '../parser/types';
+import Tile from './Tile';
+import Button from './Button';
+
+import './ClientTile.scss';
+
+interface IProps {
+    client: Client;
+    link: SafeLink;
+}
+
+const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
+    const inviteLine =
+        client.kind === ClientKind.TEXT_CLIENT ? (
+            <p>{client.toInviteString(link)}</p>
+        ) : null;
+
+    const className = classNames('clientTile', {
+        clientTileLink: client.kind === ClientKind.LINKED_CLIENT,
+    });
+
+    let inviteButton: JSX.Element = <></>;
+    if (client.kind === ClientKind.LINKED_CLIENT) {
+        inviteButton = <Button>Accept invite</Button>;
+    } else {
+        const copyString = client.copyString(link);
+        if (copyString !== '') {
+            inviteButton = (
+                <Button
+                    onClick={() => navigator.clipboard.writeText(copyString)}
+                    flashChildren="Invite copied"
+                >
+                    Copy invite
+                </Button>
+            );
+        }
+    }
+
+    let clientTile = (
+        <Tile className={className}>
+            <img src={client.logo} alt={client.name + ' logo'} />
+            <div>
+                <h1>{client.name}</h1>
+                <p>{client.description}</p>
+                {inviteLine}
+                {inviteButton}
+            </div>
+        </Tile>
+    );
+
+    if (client.kind === ClientKind.LINKED_CLIENT) {
+        clientTile = <a href={client.toUrl(link).toString()}>{clientTile}</a>;
+    }
+
+    return clientTile;
+};
+
+export default ClientTile;
--- a/src/components/CreateLinkTile.scss
+++ b/src/components/CreateLinkTile.scss
@ -0,0 +1,93 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import '../color-scheme';
+
+.createLinkTile {
+    background: none;
+
+    row-gap: 24px;
+
+    * {
+        width: 100%;
+    }
+
+    > form {
+        display: grid;
+        row-gap: 24px;
+        align-self: center;
+    }
+
+    > a {
+        color: $foreground;
+    }
+
+    .linkHeader h1 {
+        word-break: break-all;
+    }
+
+    .createLinkReset {
+        height: 40px;
+        width: 40px;
+
+        border-radius: 100%;
+        border: 1px solid lighten($grey, 50%);
+
+        background: $background;
+
+        padding: 6px;
+
+        position: relative;
+
+        > div {
+            // This is a terrible case of faking it till
+            // we make it. It will break. I'm so sorry
+            position: absolute;
+            display: none;
+
+            width: max-content;
+            top: -35px;
+            left: -17px;
+
+            border-radius: 30px;
+            padding: 5px 15px;
+
+            background: $background;
+
+            word-wrap: none;
+        }
+
+        img {
+            height: 100%;
+            width: 100%;
+            border: 0;
+
+            filter: invert(12%);
+        }
+
+        &:hover {
+            border: 0;
+
+            background: $foreground;
+
+            cursor: pointer;
+
+            > div {
+                display: block;
+            }
+        }
+    }
+}
--- a/src/components/CreateLinkTile.stories.tsx
+++ b/src/components/CreateLinkTile.stories.tsx
@ -0,0 +1,32 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import CreateLinkTile from './CreateLinkTile';
+
+export default {
+    title: 'CreateLinkTile',
+    parameters: {
+        design: {
+            type: 'figma',
+            url:
+                'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1',
+        },
+    },
+};
+
+export const Default: React.FC = () => <CreateLinkTile />;
--- a/src/components/CreateLinkTile.tsx
+++ b/src/components/CreateLinkTile.tsx
@ -0,0 +1,158 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useRef } from 'react';
+import { Formik, Form } from 'formik';
+
+import Tile from './Tile';
+import Button from './Button';
+import Input from './Input';
+import { parseHash } from '../parser/parser';
+import { LinkKind } from '../parser/types';
+import linkIcon from '../imgs/link.svg';
+import copyIcon from '../imgs/copy.svg';
+import tickIcon from '../imgs/tick.svg';
+import refreshIcon from '../imgs/refresh.svg';
+import './CreateLinkTile.scss';
+
+interface ILinkNotCreatedTileProps {
+    setLink: React.Dispatch<React.SetStateAction<string>>;
+}
+
+interface FormValues {
+    identifier: string;
+}
+
+// Hacky use of types here
+function validate(values: FormValues): Partial<FormValues> {
+    const errors: Partial<FormValues> = {};
+
+    if (values.identifier === '') {
+        errors.identifier = '';
+        return errors;
+    }
+
+    const parse = parseHash(values.identifier);
+
+    if (parse.kind === LinkKind.ParseFailed) {
+        errors.identifier =
+            "That identifier doesn't look right. Double check the details.";
+    }
+
+    return errors;
+}
+
+const LinkNotCreatedTile: React.FC<ILinkNotCreatedTileProps> = (
+    props: ILinkNotCreatedTileProps
+) => {
+    return (
+        <Tile className="createLinkTile">
+            <h1>
+                Create shareable links to Matrix rooms, users or messages
+                without being tied to any app
+            </h1>
+            <Formik
+                initialValues={{
+                    identifier: '',
+                }}
+                validate={validate}
+                onSubmit={(values): void => {
+                    props.setLink(
+                        document.location.protocol +
+                            '//' +
+                            document.location.host +
+                            '/#/' +
+                            values.identifier
+                    );
+                }}
+            >
+                {(formik): JSX.Element => (
+                    <Form>
+                        <Input
+                            name={'identifier'}
+                            type={'text'}
+                            placeholder="#room:example.com, @user:example.com"
+                            autoFocus
+                        />
+                        <Button
+                            type="submit"
+                            icon={linkIcon}
+                            disabled={!!formik.errors.identifier}
+                            className={
+                                formik.errors.identifier ? 'errorButton' : ''
+                            }
+                        >
+                            Create Link
+                        </Button>
+                    </Form>
+                )}
+            </Formik>
+        </Tile>
+    );
+};
+
+interface ILinkCreatedTileProps {
+    link: string;
+    setLink: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    // Focus button on render
+    useEffect((): void => {
+        if (buttonRef && buttonRef.current) {
+            buttonRef.current.focus();
+        }
+    });
+
+    return (
+        <Tile className="createLinkTile">
+            <button
+                className="createLinkReset"
+                onClick={(): void => props.setLink('')}
+            >
+                <div>New link</div>
+                <img src={refreshIcon} alt="Go back to matrix.to home page" />
+            </button>
+            <a href={props.link}>
+                <h1 className="linkHeader">{props.link}</h1>
+            </a>
+            <Button
+                flashChildren={'Copied'}
+                icon={copyIcon}
+                flashIcon={tickIcon}
+                onClick={(): void => {
+                    navigator.clipboard.writeText(props.link);
+                }}
+                ref={buttonRef}
+            >
+                Copy Link
+            </Button>
+        </Tile>
+    );
+};
+
+const CreateLinkTile: React.FC = () => {
+    const [link, setLink] = React.useState('');
+    if (!link) {
+        return <LinkNotCreatedTile setLink={setLink} />;
+    } else {
+        return <LinkCreatedTile link={link} setLink={setLink} />;
+    }
+};
+
+export default CreateLinkTile;
--- a/src/components/DefaultPreview.scss
+++ b/src/components/DefaultPreview.scss
@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "./utils/ViewModel.js";
-import {tryFixUrl} from "./Link.js";
+.defaultPreview {
+    .avatar {
+        border-radius: 0;
+        border: 0;
+    }

-export class InvalidUrlViewModel extends ViewModel {
-    constructor(options) {
-        super(options);
-        this.validFixes = tryFixUrl(options.fragment);
+    h1 {
+        word-break: break-all;
    }
 }
--- a/src/components/DefaultPreview.tsx
+++ b/src/components/DefaultPreview.tsx
@ -0,0 +1,42 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { SafeLink } from '../parser/types';
+import Avatar from './Avatar';
+
+import './DefaultPreview.scss';
+
+import genericRoomPreview from '../imgs/chat-icon.svg';
+
+interface IProps {
+    link: SafeLink;
+}
+
+const DefaultPreview: React.FC<IProps> = ({ link }: IProps) => {
+    return (
+        <div className="defaultPreview">
+            <Avatar
+                avatarUrl={genericRoomPreview}
+                label={`Generic icon representing ${link.identifier}`}
+            />
+            <h1>{link.identifier}</h1>
+        </div>
+    );
+};
+
+export default DefaultPreview;
--- a/src/components/EventPreview.tsx
+++ b/src/components/EventPreview.tsx
@ -0,0 +1,35 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { Room, Event } from '../matrix-cypher';
+
+import RoomPreview from './RoomPreview';
+
+interface IProps {
+    room: Room;
+    event: Event;
+}
+
+const EventPreview: React.FC<IProps> = ({ room, event }: IProps) => (
+    <>
+        <RoomPreview room={room} />
+        <p>"{event.content}"</p>
+        <p>{event.sender}</p>
+    </>
+);
+
+export default EventPreview;
--- a/src/components/FakeProgress.scss
+++ b/src/components/FakeProgress.scss
@ -0,0 +1,31 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import '../color-scheme';
+
+.fakeProgress {
+    width: 100%;
+    height: 4px;
+    background-color: lighten($grey, 50%);
+    border-radius: 4px;
+
+    > div {
+        width: 60%;
+        height: 100%;
+        background-color: $foreground;
+        border-radius: 4px;
+    }
+}
--- a/src/components/FakeProgress.tsx
+++ b/src/components/FakeProgress.tsx
@ -0,0 +1,27 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import './FakeProgress.scss';
+
+const FakeProgress = () => (
+    <div className="fakeProgress">
+        <div />
+    </div>
+);
+
+export default FakeProgress;
--- a/src/components/Footer.scss
+++ b/src/components/Footer.scss
@ -14,19 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-export class ConnectionError extends Error {
-    constructor(message, isTimeout) {
-        super(message || "ConnectionError");
-        this.isTimeout = isTimeout;
+@import '../color-scheme';
+
+.footer {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: center;
+    column-gap: 5px;
+
+    * {
+        color: $font;
    }

-    get name() {
-        return "ConnectionError";
+    .textButton {
+        margin: 0;
+        padding: 0;
    }
 }
-
-export class AbortError extends Error {
-    get name() {
-        return "AbortError";
-    }
-}
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -0,0 +1,65 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useContext } from 'react';
+
+import HSContext, {
+    HSOptions,
+    ActionType as HSACtionType,
+} from '../contexts/HSContext';
+import ClientContext, {
+    ActionType as ClientActionType,
+} from '../contexts/ClientContext';
+import TextButton from './TextButton';
+
+import './Footer.scss';
+
+const Footer: React.FC = () => {
+    const [hsState, hsDispatch] = useContext(HSContext);
+    const [clientState, clientDispatch] = useContext(ClientContext);
+
+    const clear =
+        hsState.option !== HSOptions.Unset || clientState.clientId !== null ? (
+            <>
+                {' · '}
+                <TextButton
+                    onClick={(): void => {
+                        hsDispatch({
+                            action: HSACtionType.Clear,
+                        });
+                        clientDispatch({
+                            action: ClientActionType.ClearClient,
+                        });
+                    }}
+                >
+                    Clear preferences
+                </TextButton>
+            </>
+        ) : null;
+
+    return (
+        <div className="footer">
+            <a href="https://github.com/matrix-org/matrix.to">GitHub</a>
+            {' · '}
+            <a href="https://github.com/matrix-org/matrix.to/tree/matrix-two/src/clients">
+                Add your client
+            </a>
+            {clear}
+        </div>
+    );
+};
+
+export default Footer;
--- a/src/components/GroupPreview.scss
+++ b/src/components/GroupPreview.scss
@ -0,0 +1,26 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.groupPreview {
+    > .avatar {
+        margin-bottom: 8px;
+    }
+
+    > h1 {
+        font-size: 24px;
+        margin-bottom: 4px;
+    }
+}
--- a/src/components/GroupPreview.tsx
+++ b/src/components/GroupPreview.tsx
@ -0,0 +1,44 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { Group } from '../matrix-cypher';
+
+import { GroupAvatar } from './Avatar';
+
+import './GroupPreview.scss';
+
+interface IProps {
+    group: Group;
+}
+
+const GroupPreview: React.FC<IProps> = ({ group }: IProps) => {
+    const description = group.long_description
+        ? group.long_description
+        : group.short_description
+        ? group.short_description
+        : null;
+
+    return (
+        <div className="groupPreview">
+            <GroupAvatar group={group} />
+            <h1>{group.name}</h1>
+            {description ? <p>{description}</p> : null}
+        </div>
+    );
+};
+
+export default GroupPreview;
--- a/src/components/HomeserverOptions.scss
+++ b/src/components/HomeserverOptions.scss
@ -0,0 +1,57 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import '../color-scheme';
+
+.homeserverOptions {
+    display: grid;
+    row-gap: 20px;
+
+    background: $app-background;
+    text-align: left;
+
+    > * {
+        width: 100%;
+    }
+
+    .homeserverOptionsDescription {
+        width: 100%;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        > p {
+            flex-grow: 1;
+        }
+
+        > img {
+            flex-shrink: 0;
+            flex-grow: 0;
+            background-color: $background;
+            height: 62px;
+            width: 62px;
+            padding: 11px;
+            border-radius: 100%;
+            margin-left: 14px;
+        }
+    }
+
+    form {
+        display: grid;
+        row-gap: 25px;
+    }
+}
--- a/src/components/HomeserverOptions.stories.tsx
+++ b/src/components/HomeserverOptions.stories.tsx
@ -0,0 +1,42 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import HomeserverOptions from './HomeserverOptions';
+import { LinkKind } from '../parser/types';
+
+export default {
+    title: 'HomeserverOptions',
+    parameters: {
+        design: {
+            type: 'figma',
+            url:
+                'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=143%3A5853',
+        },
+    },
+};
+
+export const Default: React.FC = () => (
+    <HomeserverOptions
+        link={{
+            identifier: '#banter:matrix.org',
+            arguments: { vias: [] },
+            kind: LinkKind.Alias,
+            originalLink: 'This is all made up',
+        }}
+    />
+);
--- a/src/components/HomeserverOptions.tsx
+++ b/src/components/HomeserverOptions.tsx
@ -0,0 +1,125 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useContext, useState } from 'react';
+import { Formik, Form } from 'formik';
+import { string } from 'zod';
+
+import Tile from './Tile';
+import HSContext, { TempHSContext, ActionType } from '../contexts/HSContext';
+import icon from '../imgs/telecom-mast.svg';
+import Button from './Button';
+import Input from './Input';
+import StyledCheckbox from './StyledCheckbox';
+import { SafeLink } from '../parser/types';
+
+import './HomeserverOptions.scss';
+
+interface IProps {
+    link: SafeLink;
+}
+
+interface FormValues {
+    HSUrl: string;
+}
+
+function validateURL(values: FormValues): Partial<FormValues> {
+    const errors: Partial<FormValues> = {};
+    try {
+        string().url().parse(values.HSUrl);
+    } catch {
+        errors.HSUrl =
+            'This must be a valid homeserver URL, starting with https://';
+    }
+    return errors;
+}
+
+const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
+    const HSStateDispatcher = useContext(HSContext)[1];
+    const TempHSStateDispatcher = useContext(TempHSContext)[1];
+
+    const [rememberSelection, setRemeberSelection] = useState(false);
+
+    // Select which disaptcher to use based on whether we're writing
+    // the choice to localstorage
+    const dispatcher = rememberSelection
+        ? HSStateDispatcher
+        : TempHSStateDispatcher;
+
+    const hsInput = (
+        <Formik
+            initialValues={{
+                HSUrl: '',
+            }}
+            validate={validateURL}
+            onSubmit={({ HSUrl }): void =>
+                dispatcher({ action: ActionType.SetHS, HSURL: HSUrl })
+            }
+        >
+            {({ values, errors }): JSX.Element => (
+                <Form>
+                    <Input
+                        muted={!values.HSUrl}
+                        type="text"
+                        name="HSUrl"
+                        placeholder="Preferred homeserver URL"
+                    />
+                    {values.HSUrl && !errors.HSUrl ? (
+                        <Button secondary type="submit">
+                            Use {values.HSUrl}
+                        </Button>
+                    ) : null}
+                </Form>
+            )}
+        </Formik>
+    );
+
+    return (
+        <Tile className="homeserverOptions">
+            <div className="homeserverOptionsDescription">
+                <div>
+                    <h3>About {link.identifier}</h3>
+                    <p>
+                        A homeserver will show you metadata about the link, like
+                        a description. Homeservers will be able to relate your
+                        IP to things you've opened invites for in matrix.to.
+                    </p>
+                </div>
+                <img
+                    src={icon}
+                    alt="Icon making it clear that connections may be made with external services"
+                />
+            </div>
+            <StyledCheckbox
+                checked={rememberSelection}
+                onChange={(e): void => setRemeberSelection(e.target.checked)}
+            >
+                Remember my choice
+            </StyledCheckbox>
+            <Button
+                secondary
+                onClick={(): void => {
+                    dispatcher({ action: ActionType.SetAny });
+                }}
+            >
+                Use any homeserver
+            </Button>
+            {hsInput}
+        </Tile>
+    );
+};
+
+export default HomeserverOptions;
--- a/src/components/Input.scss
+++ b/src/components/Input.scss
@ -0,0 +1,50 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import '../color-scheme';
+@import '../error';
+
+.input {
+    width: 100%;
+    padding: 12px;
+
+    background: $background;
+
+    border: 1px solid $foreground;
+    font: lighten($grey, 60%);
+    border-radius: 24px;
+
+    font-size: 14px;
+    line-height: 24px;
+
+    &.error {
+        @include error;
+    }
+
+    &:focus {
+        border: 1px solid $font;
+        font: $font;
+    }
+}
+
+.inputError {
+    @include error;
+    text-align: center;
+}
+
+.inputMuted {
+    border-color: lighten($grey, 60%);
+}
--- a/src/components/Input.stories.tsx
+++ b/src/components/Input.stories.tsx
@ -0,0 +1,45 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import { Formik, Form } from 'formik';
+
+import Input from './Input';
+
+export default {
+    title: 'Input',
+    parameters: {
+        design: {
+            type: 'figma',
+            url:
+                'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1',
+        },
+    },
+    decorators: [withDesign],
+};
+
+export const Default: React.FC = () => (
+    <Formik initialValues={{}} onSubmit={(): void => {}}>
+        <Form>
+            <Input
+                name="Example input"
+                type="text"
+                placeholder="Write something"
+            />
+        </Form>
+    </Formik>
+);
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@ -0,0 +1,50 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classnames from 'classnames';
+import { useField } from 'formik';
+
+import './Input.scss';
+
+interface IProps extends React.InputHTMLAttributes<HTMLElement> {
+    name: string;
+    type: string;
+    muted?: boolean;
+}
+
+const Input: React.FC<IProps> = ({ className, muted, ...props }) => {
+    const [field, meta] = useField(props);
+
+    const errorBool = meta.touched && meta.value !== '' && meta.error;
+    const error = errorBool ? (
+        <div className="inputError">{meta.error}</div>
+    ) : null;
+
+    const classNames = classnames('input', className, {
+        error: errorBool,
+        inputMuted: !!muted,
+    });
+
+    return (
+        <>
+            <input type="text" className={classNames} {...field} {...props} />
+            {error}
+        </>
+    );
+};
+
+export default Input;
--- a/src/components/InviteTile.scss
+++ b/src/components/InviteTile.scss
@ -0,0 +1,39 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import '../color-scheme';
+
+.inviteTile {
+    display: grid;
+    row-gap: 24px;
+
+    .inviteTileClientSelection {
+        margin: 0 auto;
+        display: grid;
+
+        justify-content: space-between;
+        row-gap: 20px;
+
+        h2 + p {
+            color: $foreground;
+        }
+    }
+
+    hr {
+        width: 100%;
+        margin: 0;
+    }
+}
--- a/src/components/InviteTile.stories.tsx
+++ b/src/components/InviteTile.stories.tsx
@ -0,0 +1,121 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// disable camelcase check because our object keys come
+// from the matrix spec
+/* eslint-disable @typescript-eslint/camelcase */
+
+import React from 'react';
+
+import InviteTile from './InviteTile';
+import UserPreview, { InviterPreview } from './UserPreview';
+import RoomPreview, { RoomPreviewWithTopic } from './RoomPreview';
+import Clients from '../clients';
+import { LinkKind, SafeLink } from '../parser/types';
+
+export default {
+    title: 'InviteTile',
+    parameters: {
+        design: {
+            type: 'figma',
+            url:
+                'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A334',
+        },
+    },
+};
+
+const userLink: SafeLink = {
+    kind: LinkKind.UserId,
+    identifier: '@jorik:matrix.org',
+    arguments: {
+        vias: [],
+    },
+    originalLink: 'asdfsadf',
+};
+
+const roomLink: SafeLink = {
+    kind: LinkKind.Alias,
+    identifier: '#element-dev:matrix.org',
+    arguments: {
+        vias: [],
+    },
+    originalLink: 'asdfsadf',
+};
+
+export const withLink: React.FC<{}> = () => (
+    <InviteTile client={Clients[0]} link={userLink}>
+        This is an invite with a link
+    </InviteTile>
+);
+
+export const withInstruction: React.FC<{}> = () => (
+    <InviteTile client={Clients[0]} link={userLink}>
+        This is an invite with an instruction
+    </InviteTile>
+);
+
+export const withUserPreview: React.FC<{}> = () => (
+    <InviteTile client={Clients[0]} link={userLink}>
+        <UserPreview
+            user={{
+                avatar_url: 'mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf',
+                displayname: 'Nicholas Briteli',
+            }}
+            userId="@nicholasbritelli:matrix.org"
+        />
+    </InviteTile>
+);
+
+export const withRoomPreviewAndRoomTopic: React.FC<{}> = () => (
+    <InviteTile client={Clients[0]} link={roomLink}>
+        <RoomPreviewWithTopic
+            room={{
+                aliases: ['#murrays:cheese.bar'],
+                avatar_url: 'mxc://bleeker.street/CHEDDARandBRIE',
+                guest_can_join: false,
+                name: 'CHEESE',
+                num_joined_members: 37,
+                room_id: '!ol19s:bleecker.street',
+                topic: 'Tasty tasty cheese',
+                world_readable: true,
+            }}
+        />
+    </InviteTile>
+);
+
+export const withRoomPreviewAndInviter: React.FC<{}> = () => (
+    <InviteTile client={Clients[0]} link={roomLink}>
+        <InviterPreview
+            user={{
+                avatar_url: 'mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf',
+                displayname: 'Nicholas Briteli',
+            }}
+            userId="@nicholasbritelli:matrix.org"
+        />
+        <RoomPreview
+            room={{
+                aliases: ['#murrays:cheese.bar'],
+                avatar_url: 'mxc://bleeker.street/CHEDDARandBRIE',
+                guest_can_join: false,
+                name: 'CHEESE',
+                num_joined_members: 37,
+                room_id: '!ol19s:bleecker.street',
+                topic: 'Tasty tasty cheese',
+                world_readable: true,
+            }}
+        />
+    </InviteTile>
+);
--- a/src/components/InviteTile.tsx
+++ b/src/components/InviteTile.tsx
@ -0,0 +1,120 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useState } from 'react';
+
+import './InviteTile.scss';
+
+import Tile from './Tile';
+import LinkButton from './LinkButton';
+import Button from './Button';
+import ClientSelection from './ClientSelection';
+import { Client, ClientKind } from '../clients/types';
+import { SafeLink } from '../parser/types';
+import TextButton from './TextButton';
+
+interface IProps {
+    children?: React.ReactNode;
+    client: Client | null;
+    link: SafeLink;
+}
+
+const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    let invite: React.ReactNode;
+    let advanced: React.ReactNode;
+
+    if (client === null) {
+        invite = showAdvanced ? null : (
+            <Button onClick={(): void => setShowAdvanced(!showAdvanced)}>
+                Accept invite
+            </Button>
+        );
+    } else {
+        let inviteUseString: string;
+
+        switch (client.kind) {
+            case ClientKind.LINKED_CLIENT:
+                invite = (
+                    <LinkButton href={client.toUrl(link).toString()}>
+                        Accept invite
+                    </LinkButton>
+                );
+                inviteUseString = `Accepting will open ${link.identifier} in ${client.name}.`;
+                break;
+            case ClientKind.TEXT_CLIENT:
+                // TODO: copy to clipboard
+                invite = <p>{client.toInviteString(link)}</p>;
+                navigator.clipboard.writeText(client.copyString(link));
+                inviteUseString = `These are instructions for ${client.name}.`;
+                break;
+        }
+
+        const advancedToggle = (
+            <p>
+                {inviteUseString}
+                <TextButton
+                    onClick={(): void => setShowAdvanced(!showAdvanced)}
+                >
+                    Change Client.
+                </TextButton>
+            </p>
+        );
+
+        invite = (
+            <>
+                {invite}
+                {advancedToggle}
+            </>
+        );
+    }
+
+    if (showAdvanced) {
+        if (client === null) {
+            advanced = (
+                <>
+                    <hr />
+                    <h2>Almost done!</h2>
+                    <p>Great, pick a client below to confirm and continue</p>
+                    <ClientSelection link={link} />
+                </>
+            );
+        } else {
+            advanced = (
+                <>
+                    <hr />
+                    <h4>Change app</h4>
+                    <ClientSelection link={link} />
+                </>
+            );
+        }
+    }
+
+    advanced = advanced ? (
+        <div className="inviteTileClientSelection">{advanced}</div>
+    ) : null;
+    return (
+        <>
+            <Tile className="inviteTile">
+                {children}
+                {invite}
+                {advanced}
+            </Tile>
+        </>
+    );
+};
+
+export default InviteTile;
--- a/src/components/InvitingClientTile.stories.tsx
+++ b/src/components/InvitingClientTile.stories.tsx
@ -0,0 +1,23 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import ClientTile from './InvitingClientTile';
+
+export default { title: 'ClientTile' };
+
+export const Element = <ClientTile clientName={'element.io'} />;
--- a/src/components/InvitingClientTile.tsx
+++ b/src/components/InvitingClientTile.tsx
@ -0,0 +1,58 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import Tile from './Tile';
+
+import { clientMap } from '../clients';
+import './MatrixTile.scss';
+
+interface IProps {
+    clientName: string;
+}
+
+const InvitingClientTile: React.FC<IProps> = ({ clientName }: IProps) => {
+    const client = clientMap[clientName];
+
+    if (!client) {
+        return (
+            <Tile className="matrixTile">
+                {/* TODO: add gh link */}
+                <p>
+                    The client that created this link "{clientName}" is not a
+                    recognised client. If this is a mistake and you'd like a
+                    nice advertisement for it here please{' '}
+                    <a href="https://github.com/matrix-org/matrix.to">
+                        open a pr
+                    </a>
+                    .
+                </p>
+            </Tile>
+        );
+    }
+
+    return (
+        <Tile className="matrixTile">
+            <img src={client.logo} alt={client.name} />
+            <h2>
+                Invite created with <a href={client.homepage}>{client.name}</a>
+            </h2>
+            <div>{client.description}</div>
+        </Tile>
+    );
+};
+
+export default InvitingClientTile;
--- a/src/components/LinkButton.tsx
+++ b/src/components/LinkButton.tsx
@ -0,0 +1,34 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classnames from 'classnames';
+
+import './Button.scss';
+
+interface IProps extends React.LinkHTMLAttributes<HTMLElement> {}
+
+const LinkButton: React.FC<IProps> = ({
+    className,
+    children,
+    ...props
+}: IProps) => (
+    <a className={classnames('button', className)} {...props}>
+        {children}
+    </a>
+);
+
+export default LinkButton;
--- a/src/components/LinkPreview.tsx
+++ b/src/components/LinkPreview.tsx
@ -0,0 +1,187 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useState, useEffect, useContext } from 'react';
+import { getEvent, client } from '../matrix-cypher';
+
+import { RoomPreviewWithTopic } from './RoomPreview';
+import InviteTile from './InviteTile';
+import { SafeLink, LinkKind } from '../parser/types';
+import UserPreview, { WrappedInviterPreview } from './UserPreview';
+import EventPreview from './EventPreview';
+import GroupPreview from './GroupPreview';
+import HomeserverOptions from './HomeserverOptions';
+import DefaultPreview from './DefaultPreview';
+import Toggle from './Toggle';
+import { clientMap } from '../clients';
+import {
+    getRoomFromId,
+    getRoomFromAlias,
+    getRoomFromPermalink,
+    getUser,
+    getGroup,
+} from '../utils/cypher-wrapper';
+import { ClientContext } from '../contexts/ClientContext';
+import useHSs from '../utils/getHS';
+
+interface IProps {
+    link: SafeLink;
+}
+
+const invite = async ({
+    clientAddress,
+    link,
+}: {
+    clientAddress: string;
+    link: SafeLink;
+}): Promise<JSX.Element> => {
+    // TODO: replace with client fetch
+    switch (link.kind) {
+        case LinkKind.Alias:
+            return (
+                <RoomPreviewWithTopic
+                    room={
+                        await getRoomFromAlias(clientAddress, link.identifier)
+                    }
+                />
+            );
+
+        case LinkKind.RoomId:
+            return (
+                <RoomPreviewWithTopic
+                    room={await getRoomFromId(clientAddress, link.identifier)}
+                />
+            );
+
+        case LinkKind.UserId:
+            return (
+                <UserPreview
+                    user={await getUser(clientAddress, link.identifier)}
+                    userId={link.identifier}
+                />
+            );
+
+        case LinkKind.Permalink:
+            return (
+                <EventPreview
+                    room={await getRoomFromPermalink(clientAddress, link)}
+                    event={
+                        await getEvent(
+                            await client(clientAddress),
+                            link.roomLink,
+                            link.eventId
+                        )
+                    }
+                />
+            );
+
+        case LinkKind.GroupId:
+            return (
+                <GroupPreview
+                    group={await getGroup(clientAddress, link.identifier)}
+                />
+            );
+
+        default:
+            // Todo Implement events
+            return <></>;
+    }
+};
+
+interface PreviewProps extends IProps {
+    client: string;
+}
+
+const Preview: React.FC<PreviewProps> = ({ link, client }: PreviewProps) => {
+    const [content, setContent] = useState(<DefaultPreview link={link} />);
+
+    // TODO: support multiple clients with vias
+    useEffect(() => {
+        (async (): Promise<void> =>
+            setContent(
+                await invite({
+                    clientAddress: client,
+                    link,
+                })
+            ))();
+    }, [link, client]);
+
+    return content;
+};
+
+const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
+    let content: JSX.Element;
+    const [showHSOptions, setShowHSOPtions] = useState(false);
+
+    const hses = useHSs(link);
+
+    if (!hses.length) {
+        content = (
+            <>
+                <DefaultPreview link={link} />
+                <Toggle
+                    checked={showHSOptions}
+                    onChange={(): void => setShowHSOPtions(!showHSOptions)}
+                >
+                    About {link.identifier}
+                </Toggle>
+            </>
+        );
+        if (showHSOptions) {
+            content = (
+                <>
+                    {content}
+                    <HomeserverOptions link={link} />
+                </>
+            );
+        }
+    } else {
+        content = <Preview link={link} client={hses[0]} />;
+    }
+
+    const [{ clientId }] = useContext(ClientContext);
+
+    // Select which client to link to
+    const displayClientId = clientId
+        ? clientId
+        : link.arguments.client
+        ? link.arguments.client
+        : null;
+
+    const client = displayClientId ? clientMap[displayClientId] : null;
+
+    const sharer = link.arguments.sharer ? (
+        <WrappedInviterPreview
+            link={{
+                kind: LinkKind.UserId,
+                identifier: link.arguments.sharer,
+                arguments: { vias: [] },
+                originalLink: '',
+            }}
+        />
+    ) : (
+        <p style={{ margin: '0 0 10px 0' }}>You're invited to join</p>
+    );
+
+    return (
+        <InviteTile client={client} link={link}>
+            {sharer}
+            {content}
+        </InviteTile>
+    );
+};
+
+export default LinkPreview;
--- a/src/components/MatrixTile.scss
+++ b/src/components/MatrixTile.scss
@ -0,0 +1,22 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.matrixTile {
+    background: none;
+    row-gap: 8px;
+
+    padding: 0 40px;
+}
--- a/src/components/MatrixTile.stories.tsx
+++ b/src/components/MatrixTile.stories.tsx
@ -0,0 +1,23 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import MatrixTile from './MatrixTile';
+
+export default { title: 'MatrixTile' };
+
+export const Default: React.FC = () => <MatrixTile />;
--- a/src/components/MatrixTile.tsx
+++ b/src/components/MatrixTile.tsx
@ -0,0 +1,51 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import Tile from './Tile';
+
+import logo from '../imgs/matrix-logo.svg';
+
+import './MatrixTile.scss';
+
+interface IProps {
+    isLink?: boolean;
+}
+
+const MatrixTile: React.FC<IProps> = ({ isLink }: IProps) => {
+    const copy = isLink ? (
+        <div>
+            This invite uses <a href="https://matrix.org">Matrix</a>, an open
+            network for secure, decentralized communication.
+        </div>
+    ) : (
+        <div>
+            Matrix.to is a stateless URL redirecting service for the{' '}
+            <a href="https://matrix.org">Matrix</a> ecosystem.
+        </div>
+    );
+
+    return (
+        <div>
+            <Tile className="matrixTile">
+                <img src={logo} alt="matrix-logo" />
+                {copy}
+            </Tile>
+        </div>
+    );
+};
+
+export default MatrixTile;
--- a/src/components/RoomPreview.scss
+++ b/src/components/RoomPreview.scss
@ -0,0 +1,30 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.roomPreview {
+    > .avatar {
+        margin-bottom: 8px;
+    }
+
+    > h1 {
+        font-size: 24px;
+        margin-bottom: 4px;
+    }
+}
+
+.roomTopic {
+    padding-top: 8px;
+}
--- a/Show more
+++ b/Show more
				`@ -1 +0,0 @@`
				`<svg width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.358 14.752H4.97a1.048 1.048 0 01-1.047-1.048V6.286c0-.579.469-1.048 1.047-1.048H17.08c.579 0 1.048.47 1.048 1.048v1.33M11.424 15.152v1.21M9.304 16.362h3.653" stroke="#666" stroke-width=".8" stroke-linecap="round" stroke-linejoin="round"/><rect x="14.543" y="8.955" width="3.914" height="7.371" rx=".648" stroke="#666" stroke-width=".8"/><path stroke="#666" stroke-width=".8" d="M16.028 15.174h1.048"/></svg>`