From 0e770d81d6e1dc15cef3c2254274e52a2e81a576 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 09:32:26 +0100
Subject: [PATCH 01/10] Fix identifier wrapping

Fixes https://github.com/matrix-org/matrix.to/issues/153
---
 src/clients/Nheko.tsx                | 10 ++++++++--
 src/clients/Weechat.tsx              | 10 ++++++++--
 src/components/CreateLinkTile.scss   |  4 ----
 src/components/CreateLinkTile.tsx    |  2 +-
 src/components/DefaultPreview.scss   |  4 ----
 src/components/DefaultPreview.tsx    |  2 +-
 src/components/HomeserverOptions.tsx |  7 ++++++-
 src/components/InviteTile.tsx        |  2 +-
 src/components/LinkPreview.tsx       |  7 ++++++-
 src/components/RoomPreview.tsx       |  6 ++++--
 src/components/UserPreview.tsx       |  9 ++++++---
 src/index.scss                       |  4 ++++
 12 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/clients/Nheko.tsx b/src/clients/Nheko.tsx
index a0954d1..22f8045 100644
--- a/src/clients/Nheko.tsx
+++ b/src/clients/Nheko.tsx
@@ -40,7 +40,10 @@ const Nheko: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /join <b>{link.identifier}</b>
+                            /join{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
@@ -49,7 +52,10 @@ const Nheko: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /invite <b>{link.identifier}</b>
+                            /invite{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
diff --git a/src/clients/Weechat.tsx b/src/clients/Weechat.tsx
index cd15769..86b0a98 100644
--- a/src/clients/Weechat.tsx
+++ b/src/clients/Weechat.tsx
@@ -40,7 +40,10 @@ const Weechat: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /join <b>{link.identifier}</b>
+                            /join{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
@@ -49,7 +52,10 @@ const Weechat: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /invite <b>{link.identifier}</b>
+                            /invite{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
diff --git a/src/components/CreateLinkTile.scss b/src/components/CreateLinkTile.scss
index a377ae4..0fba4fc 100644
--- a/src/components/CreateLinkTile.scss
+++ b/src/components/CreateLinkTile.scss
@@ -35,10 +35,6 @@ limitations under the License.
         color: $foreground;
     }
 
-    .linkHeader h1 {
-        word-break: break-all;
-    }
-
     .createLinkReset {
         height: 40px;
         width: 40px;
diff --git a/src/components/CreateLinkTile.tsx b/src/components/CreateLinkTile.tsx
index 5c05c58..fbca6d9 100644
--- a/src/components/CreateLinkTile.tsx
+++ b/src/components/CreateLinkTile.tsx
@@ -128,7 +128,7 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
                 <div>New link</div>
                 <img src={refreshIcon} alt="Go back to matrix.to home page" />
             </button>
-            <h1 className="linkHeader">{props.link}</h1>
+            <h1 className="linkHeader matrixIdentifier">{props.link}</h1>
             <Button
                 flashChildren={'Copied'}
                 icon={copyIcon}
diff --git a/src/components/DefaultPreview.scss b/src/components/DefaultPreview.scss
index 48e404c..21b77bb 100644
--- a/src/components/DefaultPreview.scss
+++ b/src/components/DefaultPreview.scss
@@ -19,8 +19,4 @@ limitations under the License.
         border-radius: 0;
         border: 0;
     }
-
-    h1 {
-        word-break: break-all;
-    }
 }
diff --git a/src/components/DefaultPreview.tsx b/src/components/DefaultPreview.tsx
index 894bbf8..00f4b91 100644
--- a/src/components/DefaultPreview.tsx
+++ b/src/components/DefaultPreview.tsx
@@ -34,7 +34,7 @@ const DefaultPreview: React.FC<IProps> = ({ link }: IProps) => {
                 avatarUrl={genericRoomPreview}
                 label={`Generic icon representing ${link.identifier}`}
             />
-            <h1>{link.identifier}</h1>
+            <h1 className="matrixIdentifier">{link.identifier}</h1>
         </div>
     );
 };
diff --git a/src/components/HomeserverOptions.tsx b/src/components/HomeserverOptions.tsx
index ab30a3c..750b1c0 100644
--- a/src/components/HomeserverOptions.tsx
+++ b/src/components/HomeserverOptions.tsx
@@ -91,7 +91,12 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
         <Tile className="homeserverOptions">
             <div className="homeserverOptionsDescription">
                 <div>
-                    <h3>About {link.identifier}</h3>
+                    <h3>
+                        About&nbsp;
+                        <span className="matrixIdentifier">
+                            {link.identifier}
+                        </span>
+                    </h3>
                     <p>
                         A homeserver will show you metadata about the link, like
                         a description. Homeservers will be able to relate your
diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx
index 269e47e..da331f2 100644
--- a/src/components/InviteTile.tsx
+++ b/src/components/InviteTile.tsx
@@ -53,7 +53,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
                         Accept invite
                     </LinkButton>
                 );
-                inviteUseString = `Accepting will open ${link.identifier} in ${client.name}.`;
+                inviteUseString = `Accepting will open this link in ${client.name}.`;
                 break;
             case ClientKind.TEXT_CLIENT:
                 // TODO: copy to clipboard
diff --git a/src/components/LinkPreview.tsx b/src/components/LinkPreview.tsx
index dec14e8..37557e7 100644
--- a/src/components/LinkPreview.tsx
+++ b/src/components/LinkPreview.tsx
@@ -137,7 +137,12 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
                     checked={showHSOptions}
                     onChange={(): void => setShowHSOPtions(!showHSOptions)}
                 >
-                    About {link.identifier}
+                    <span>
+                        About&nbsp;
+                        <span className="matrixIdentifier">
+                            {link.identifier}
+                        </span>
+                    </span>
                 </Toggle>
             </>
         );
diff --git a/src/components/RoomPreview.tsx b/src/components/RoomPreview.tsx
index 0ef2f14..620874a 100644
--- a/src/components/RoomPreview.tsx
+++ b/src/components/RoomPreview.tsx
@@ -38,9 +38,11 @@ const RoomPreview: React.FC<IProps> = ({ room }: IProps) => {
     return (
         <div className="roomPreview">
             <RoomAvatar room={room} />
-            <h1>{room.name ? room.name : roomAlias}</h1>
+            <h1 className="matrixIdentifier">
+                {room.name ? room.name : roomAlias}
+            </h1>
             {members}
-            <p>{roomAlias}</p>
+            <p className="matrixIdentifier">{roomAlias}</p>
         </div>
     );
 };
diff --git a/src/components/UserPreview.tsx b/src/components/UserPreview.tsx
index 6122977..7cfda27 100644
--- a/src/components/UserPreview.tsx
+++ b/src/components/UserPreview.tsx
@@ -67,9 +67,12 @@ export const InviterPreview: React.FC<InviterPreviewProps> = ({
         <div className={className}>
             <div>
                 <h1>
-                    Invited by <b>{user ? user.displayname : userId}</b>
+                    Invited by{' '}
+                    <b className="matrixIdentifier">
+                        {user ? user.displayname : userId}
+                    </b>
                 </h1>
-                {user ? <p>{userId}</p> : null}
+                {user ? <p className="matrixIdentifier">{userId}</p> : null}
             </div>
             {avatar}
         </div>
@@ -84,7 +87,7 @@ export const WrappedInviterPreview: React.FC<WrappedInviterProps> = ({
     link,
 }: WrappedInviterProps) => {
     const [user, setUser] = useState<User | undefined>(undefined);
-    const hss = useHSs({link});
+    const hss = useHSs({ link });
     useEffect(() => {
         if (hss.length) {
             client(hss[0])
diff --git a/src/index.scss b/src/index.scss
index c1ed963..a628c94 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -64,3 +64,7 @@ hr {
     border: 1px solid lighten($grey, 50);
     margin: 0 40px;
 }
+
+.matrixIdentifier {
+    word-break: break-all;
+}

From 4466b725b20989203f2888abf41631b67a8e068c Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 12:54:51 +0100
Subject: [PATCH 02/10] Remove git add from tasks

---
 package.json | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index bd24b98..ee32f92 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,10 @@
     "lint-staged": {
         "src/**/*.{js,jsx,ts,tsx}": [
             "eslint --fix",
-            "prettier --write --tab-width 4 --single-quote",
-            "git add"
+            "prettier --write --tab-width 4 --single-quote"
         ],
         "src/**/*.{json,css,scss,md}": [
-            "prettier --write --tab-width 4 --single-quote",
-            "git add"
+            "prettier --write --tab-width 4 --single-quote"
         ]
     },
     "husky": {

From 1ba8c656e76946c3a82415fbd1ac63886e9c0c51 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 12:55:51 +0100
Subject: [PATCH 03/10] Ignore development bundle

---
 .gitignore | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index 0bd7603..19a9ac3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,10 @@
 # testing
 /coverage
 
+# development
+bundle.js
+bundle.js.map
+
 # production
 /build
 

From dcc43ff4364ec8be8f635392979ff45ac72e226c Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 13:42:20 +0100
Subject: [PATCH 04/10] Tweak change client text

---
 src/components/InviteTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx
index da331f2..93b4d89 100644
--- a/src/components/InviteTile.tsx
+++ b/src/components/InviteTile.tsx
@@ -69,7 +69,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
                 <TextButton
                     onClick={(): void => setShowAdvanced(!showAdvanced)}
                 >
-                    Change Client.
+                    Change client
                 </TextButton>
             </p>
         );

From 684a4cb19ad547cf39785128fbbb02194a284ead Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 16:10:44 +0100
Subject: [PATCH 05/10] Fix blank avatar on Safari

---
 src/components/Avatar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 4dcffc9..adf99ac 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -35,7 +35,7 @@ interface IProps {
 const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
     const [src, setSrc] = useState(avatarUrl);
     useEffect(() => {
-        setSrc(avatarUrl);
+        setSrc(avatarUrl ? avatarUrl : logo);
     }, [avatarUrl]);
 
     const _className = classNames('avatar', className, {

From e18ff8debb0ce9e84804db7a62d8d0537465f501 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 16:26:38 +0100
Subject: [PATCH 06/10] Avoid clipboard error on Safari for iOS

---
 src/components/ClientTile.tsx     | 2 +-
 src/components/CreateLinkTile.tsx | 2 +-
 src/components/InviteTile.tsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ClientTile.tsx b/src/components/ClientTile.tsx
index c238a8b..e8eddde 100644
--- a/src/components/ClientTile.tsx
+++ b/src/components/ClientTile.tsx
@@ -47,7 +47,7 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
         if (copyString !== '') {
             inviteButton = (
                 <Button
-                    onClick={() => navigator.clipboard.writeText(copyString)}
+                    onClick={() => navigator.clipboard?.writeText(copyString)}
                     flashChildren="Invite copied"
                 >
                     Copy invite
diff --git a/src/components/CreateLinkTile.tsx b/src/components/CreateLinkTile.tsx
index fbca6d9..2b92455 100644
--- a/src/components/CreateLinkTile.tsx
+++ b/src/components/CreateLinkTile.tsx
@@ -134,7 +134,7 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
                 icon={copyIcon}
                 flashIcon={tickIcon}
                 onClick={(): void => {
-                    navigator.clipboard.writeText(props.link);
+                    navigator.clipboard?.writeText(props.link);
                 }}
                 ref={buttonRef}
             >
diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx
index 93b4d89..06357b7 100644
--- a/src/components/InviteTile.tsx
+++ b/src/components/InviteTile.tsx
@@ -58,7 +58,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
             case ClientKind.TEXT_CLIENT:
                 // TODO: copy to clipboard
                 invite = <p>{client.toInviteString(link)}</p>;
-                navigator.clipboard.writeText(client.copyString(link));
+                navigator.clipboard?.writeText(client.copyString(link));
                 inviteUseString = `These are instructions for ${client.name}.`;
                 break;
         }

From 3f2fa42b9326bb227a6d5d0d85c4946afaaa92c9 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 16:36:28 +0100
Subject: [PATCH 07/10] Hide native inputs on Safari for iOS

---
 src/components/StyledCheckbox.scss | 4 +---
 src/components/Toggle.scss         | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/StyledCheckbox.scss b/src/components/StyledCheckbox.scss
index 21b40f1..011e53f 100644
--- a/src/components/StyledCheckbox.scss
+++ b/src/components/StyledCheckbox.scss
@@ -23,9 +23,7 @@ limitations under the License.
     align-items: center;
 
     input[type='checkbox'] {
-        appearance: none;
-        margin: 0;
-        padding: 0;
+        display: none;
 
         &:checked + div {
             background: $foreground;
diff --git a/src/components/Toggle.scss b/src/components/Toggle.scss
index 5d82223..8654dcf 100644
--- a/src/components/Toggle.scss
+++ b/src/components/Toggle.scss
@@ -21,9 +21,7 @@ limitations under the License.
 
     > input[type='checkbox'] {
         // Remove the OS's representation
-        margin: 0;
-        padding: 0;
-        appearance: none;
+        display: none;
 
         &.focus-visible {
             & + img {

From 2eed84fc23f7316a9c71c3510ab600600cea4c90 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 16:41:28 +0100
Subject: [PATCH 08/10] Rename Element client file

---
 src/clients/{Element.io.ts => Element.ts} | 0
 src/clients/index.ts                      | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/clients/{Element.io.ts => Element.ts} (100%)

diff --git a/src/clients/Element.io.ts b/src/clients/Element.ts
similarity index 100%
rename from src/clients/Element.io.ts
rename to src/clients/Element.ts
diff --git a/src/clients/index.ts b/src/clients/index.ts
index c3686bb..16cf69d 100644
--- a/src/clients/index.ts
+++ b/src/clients/index.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { Client } from './types';
 
-import Element, { ElementDevelop } from './Element.io';
+import Element, { ElementDevelop } from './Element';
 import Weechat from './Weechat';
 import Nheko from './Nheko';
 import Fractal from './Fractal';

From 03816c1224dfb6b4ed15fc0ca0299777a6d4f4f3 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 16:57:08 +0100
Subject: [PATCH 09/10] Add multiple platforms to Element client

---
 src/clients/Element.ts        |  7 +++----
 src/clients/Fractal.tsx       |  2 +-
 src/clients/Nheko.tsx         |  2 +-
 src/clients/Weechat.tsx       |  2 +-
 src/clients/index.ts          |  2 +-
 src/clients/types.ts          |  2 +-
 src/components/ClientList.tsx | 22 ++++++++++++----------
 7 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/clients/Element.ts b/src/clients/Element.ts
index 2550840..0693ede 100644
--- a/src/clients/Element.ts
+++ b/src/clients/Element.ts
@@ -24,7 +24,7 @@ import {
 import { LinkKind } from '../parser/types';
 import logo from '../imgs/element.svg';
 
-const Element: LinkedClient = {
+export const Element: LinkedClient = {
     kind: ClientKind.LINKED_CLIENT,
     name: 'Element',
     author: 'Element',
@@ -32,7 +32,7 @@ const Element: LinkedClient = {
     homepage: 'https://element.io',
     maturity: Maturity.STABLE,
     description: 'Fully-featured Matrix client for the Web',
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop, Platform.Android, Platform.iOS],
     experimental: false,
     clientId: ClientId.Element,
     toUrl: (link) => {
@@ -69,7 +69,7 @@ export const ElementDevelop: LinkedClient = {
     homepage: 'https://element.io',
     maturity: Maturity.STABLE,
     description: 'Fully-featured Matrix client for the Web',
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop],
     experimental: true,
     clientId: ClientId.ElementDevelop,
     toUrl: (link) => {
@@ -95,4 +95,3 @@ export const ElementDevelop: LinkedClient = {
     },
     linkSupport: () => true,
 };
-export default Element;
diff --git a/src/clients/Fractal.tsx b/src/clients/Fractal.tsx
index 058b4d6..bd0f068 100644
--- a/src/clients/Fractal.tsx
+++ b/src/clients/Fractal.tsx
@@ -30,7 +30,7 @@ const Fractal: TextClient = {
     homepage: 'https://github.com/poljar/weechat-matrix',
     maturity: Maturity.BETA,
     experimental: false,
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop],
     clientId: ClientId.Fractal,
     toInviteString: (link) => {
         switch (link.kind) {
diff --git a/src/clients/Nheko.tsx b/src/clients/Nheko.tsx
index 22f8045..1195716 100644
--- a/src/clients/Nheko.tsx
+++ b/src/clients/Nheko.tsx
@@ -30,7 +30,7 @@ const Nheko: TextClient = {
     homepage: 'https://github.com/Nheko-Reborn/nheko',
     maturity: Maturity.BETA,
     experimental: false,
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop],
     clientId: ClientId.Nheko,
     toInviteString: (link) => {
         switch (link.kind) {
diff --git a/src/clients/Weechat.tsx b/src/clients/Weechat.tsx
index 86b0a98..105a979 100644
--- a/src/clients/Weechat.tsx
+++ b/src/clients/Weechat.tsx
@@ -30,7 +30,7 @@ const Weechat: TextClient = {
     homepage: 'https://github.com/poljar/weechat-matrix',
     maturity: Maturity.LATE_BETA,
     experimental: false,
-    platform: Platform.Desktop,
+    platforms: [Platform.Desktop],
     clientId: ClientId.WeeChat,
     toInviteString: (link) => {
         switch (link.kind) {
diff --git a/src/clients/index.ts b/src/clients/index.ts
index 16cf69d..a00cd71 100644
--- a/src/clients/index.ts
+++ b/src/clients/index.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { Client } from './types';
 
-import Element, { ElementDevelop } from './Element';
+import { Element, ElementDevelop } from './Element';
 import Weechat from './Weechat';
 import Nheko from './Nheko';
 import Fractal from './Fractal';
diff --git a/src/clients/types.ts b/src/clients/types.ts
index 5a93f15..3278f96 100644
--- a/src/clients/types.ts
+++ b/src/clients/types.ts
@@ -62,7 +62,7 @@ export interface ClientDescription {
     homepage: string;
     logo: string;
     description: string;
-    platform: Platform;
+    platforms: Platform[];
     maturity: Maturity;
     clientId: ClientId;
     experimental: boolean;
diff --git a/src/components/ClientList.tsx b/src/components/ClientList.tsx
index 4d23d37..64dbebc 100644
--- a/src/components/ClientList.tsx
+++ b/src/components/ClientList.tsx
@@ -47,16 +47,18 @@ const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
             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;
+        for (const platform of client.platforms) {
+            switch (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) {

From 1a6c7412988942280971c78cc6e8a1829f06b0c1 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 16:59:36 +0100
Subject: [PATCH 10/10] Shorten remember choice to avoid wrapping

---
 src/components/ClientSelection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ClientSelection.tsx b/src/components/ClientSelection.tsx
index 9989b29..6e5ed8d 100644
--- a/src/components/ClientSelection.tsx
+++ b/src/components/ClientSelection.tsx
@@ -38,7 +38,7 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
                 }}
                 checked={rememberSelection}
             >
-                Remember choice for future invites in this browser
+                Remember for future invites in this browser
             </StyledCheckbox>
             <StyledCheckbox
                 onChange={(): void => {