Add new consent prompt to homeserver options as first step

This adds the new style consent text defaulting to matrix.org alongside the
older style. More work is still needed here to polish this and then remove the
older one.

src/App.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { useState, useEffect } from 'react';
 
+import GlobalContext from './contexts/GlobalContext';
 import SingleColumn from './layouts/SingleColumn';
 import CreateLinkTile from './components/CreateLinkTile';
 import MatrixTile from './components/MatrixTile';
@@ -24,8 +25,6 @@ import LinkRouter from './pages/LinkRouter';
 
 import './App.scss';
 
-import GlobalContext from './contexts/GlobalContext';
-
 /* eslint-disable no-restricted-globals */
 
 const App: React.FC = () => {

src/components/HomeserverOptions.scss

@@ -17,6 +17,16 @@ limitations under the License.
 @import '../color-scheme';
 
 .homeserverOptions {
+    .actions {
+        display: flex;
+        width: 100%;
+        margin-top: 2em;
+
+        > * {
+            flex: 1;
+        }
+    }
+
     display: grid;
     row-gap: 20px;
 

src/components/HomeserverOptions.tsx

@@ -89,6 +89,14 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
 
     return (
         <Tile className="homeserverOptions">
+            <div>
+                View this link using matrix.org to preview content, or you can
+                use another server or continue without a preview.
+            </div>
+            <div className="actions">
+                <StyledCheckbox>Ask every time</StyledCheckbox>
+                <Button>Continue</Button>
+            </div>
             <div className="homeserverOptionsDescription">
                 <div>
                     <h3>

src/pages/LinkRouter.tsx

@@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useContext } from 'react';
 
+import HSContext, { HSOptions } from '../contexts/HSContext';
 import Tile from '../components/Tile';
 import LinkPreview from '../components/LinkPreview';
 import InvitingClientTile from '../components/InvitingClientTile';
 import { parseHash } from '../parser/parser';
 import { LinkKind } from '../parser/types';
+import HomeserverOptions from '../components/HomeserverOptions';
 
 /* eslint-disable no-restricted-globals */
 
@@ -31,16 +33,13 @@ interface IProps {
 const LinkRouter: React.FC<IProps> = ({ link }: IProps) => {
     // our room id's will be stored in the hash
     const parsedLink = parseHash(link);
+    const [hsState] = useContext(HSContext);
 
-    let feedback: JSX.Element;
-    let client: JSX.Element = <></>;
-    switch (parsedLink.kind) {
-        case LinkKind.ParseFailed:
-            feedback = (
+    if (parsedLink.kind === LinkKind.ParseFailed) {
+        return (
             <Tile>
                 <p>
-                        That URL doesn't seem right. Links should be in the
-                        format:
+                    That URL doesn't seem right. Links should be in the format:
                 </p>
                 <br />
                 <p>
@@ -48,25 +47,25 @@ const LinkRouter: React.FC<IProps> = ({ link }: IProps) => {
                 </p>
             </Tile>
         );
-            break;
-        default:
+    }
+
+    if (hsState.option === HSOptions.Unset) {
+        return <HomeserverOptions link={parsedLink} />;
+    }
+
+    let client: JSX.Element = <></>;
     if (parsedLink.arguments.client) {
         client = (
-                    <InvitingClientTile
-                        clientName={parsedLink.arguments.client}
-                    />
+            <InvitingClientTile clientName={parsedLink.arguments.client} />
         );
     }
 
-            feedback = (
+    return (
         <>
             <LinkPreview link={parsedLink} />
             {client}
         </>
     );
-    }
-
-    return feedback;
 };
 
 export default LinkRouter;