Merge pull request #156 from matrix-org/jryans/tweaks

Quick fixes: round 1

.gitignore

@@ -8,6 +8,10 @@
 # testing
 /coverage
 
+# development
+bundle.js
+bundle.js.map
+
 # production
 /build
 

package.json

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

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;

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) {

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) {
@@ -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>
                 );

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) {
@@ -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>
                 );

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';

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;

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, {

src/components/ClientList.tsx

@@ -47,7 +47,8 @@ const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
             showClient = true;
         }
 
-        switch (client.platform) {
+        for (const platform of client.platforms) {
+            switch (platform) {
                 case Platform.Desktop:
                     showClient = showClient || !(uaResults as any).mobile;
                     break;
@@ -58,6 +59,7 @@ const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
                     showClient = showClient || (uaResults as any).android;
                     break;
             }
+        }
 
         if (!showExperimentalClients && client.experimental) {
             showClient = false;

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 => {

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

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;

src/components/CreateLinkTile.tsx

@@ -128,13 +128,13 @@ 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}
                 flashIcon={tickIcon}
                 onClick={(): void => {
-                    navigator.clipboard.writeText(props.link);
+                    navigator.clipboard?.writeText(props.link);
                 }}
                 ref={buttonRef}
             >

src/components/DefaultPreview.scss

@@ -19,8 +19,4 @@ limitations under the License.
         border-radius: 0;
         border: 0;
     }
-
-    h1 {
-        word-break: break-all;
-    }
 }

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>
     );
 };

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

src/components/InviteTile.tsx

@@ -53,12 +53,12 @@ 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
                 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;
         }
@@ -69,7 +69,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
                 <TextButton
                     onClick={(): void => setShowAdvanced(!showAdvanced)}
                 >
-                    Change Client.
+                    Change client
                 </TextButton>
             </p>
         );

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>
             </>
         );

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>
     );
 };

src/components/StyledCheckbox.scss

@@ -23,9 +23,7 @@ limitations under the License.
     align-items: center;
 
     input[type='checkbox'] {
-        appearance: none;
+        display: none;
-        margin: 0;
-        padding: 0;
 
         &:checked + div {
             background: $foreground;

src/components/Toggle.scss

@@ -21,9 +21,7 @@ limitations under the License.
 
     > input[type='checkbox'] {
         // Remove the OS's representation
-        margin: 0;
+        display: none;
-        padding: 0;
-        appearance: none;
 
         &.focus-visible {
             & + img {

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])

src/index.scss

@@ -64,3 +64,7 @@ hr {
     border: 1px solid lighten($grey, 50);
     margin: 0 40px;
 }
+
+.matrixIdentifier {
+    word-break: break-all;
+}