Make the remember client option work more intuitively.

src/components/ClientList.tsx

@@ -27,11 +27,12 @@ import './ClientList.scss';
 
 interface IProps {
     link: SafeLink;
+    rememberSelection: boolean;
 }
 
-const ClientList: React.FC<IProps> = ({ link }: IProps) => {
+const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
     const [
-        { rememberSelection, showOnlyDeviceClients, showExperimentalClients },
+        { showOnlyDeviceClients, showExperimentalClients },
         clientDispatcher,
     ] = useContext(ClientContext);
     const { uaResults } = useContext(UAContext);

src/components/ClientSelection.scss

@@ -17,14 +17,13 @@ limitations under the License.
 .advanced {
     margin: 0 5%;
 
+    display: grid;
+    row-gap: 20px;
+
     .advancedOptions {
         display: flex;
         flex-direction: column;
 
         align-items: flex-start;
     }
-
-    .clientList {
-        margin-top: 20px;
-    }
 }

src/components/ClientSelection.tsx

@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useContext } from 'react';
+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';
 
 interface IProps {
     link: SafeLink;
@@ -27,17 +28,16 @@ interface IProps {
 
 const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
     const [clientState, clientStateDispatch] = useContext(ClientContext);
+    const [rememberSelection, setRememberSelection] = useState(false);
     const options = (
         <div className="advancedOptions">
             <label>
                 <input
                     type="checkbox"
                     onChange={(): void => {
-                        clientStateDispatch({
-                            action: ActionType.ToggleRememberSelection,
-                        });
+                        setRememberSelection(!rememberSelection);
                     }}
-                    checked={clientState.rememberSelection}
+                    checked={rememberSelection}
                 />
                 Remember my selection for future invites in this browser
             </label>
@@ -68,10 +68,24 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
         </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} />
+            <ClientList link={link} rememberSelection={rememberSelection} />
+            {clearSelection}
         </div>
     );
 };

src/components/LinkPreview.tsx

@@ -92,15 +92,14 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
         (async (): Promise<void> => setContent(await invite({ link })))();
     }, [link]);
 
-    const [{ rememberSelection, clientId }] = useContext(ClientContext);
+    const [{ clientId }] = useContext(ClientContext);
 
     // Select which client to link to
-    const displayClientId =
-        rememberSelection && clientId
-            ? clientId
-            : link.arguments.client
-            ? link.arguments.client
-            : null;
+    const displayClientId = clientId
+        ? clientId
+        : link.arguments.client
+        ? link.arguments.client
+        : null;
 
     const client = displayClientId ? clientMap[displayClientId] : null;