Make the remember client option work more intuitively.

src/App.scss

@@ -20,7 +20,7 @@ limitations under the License.
     background-color: $app-background;
     background-image: url('./imgs/background.svg');
     background-repeat: none;
-    background-position: 50% top;
+    background-position: 50% 10%;
 }
 
 @mixin spacer {

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({
+                        setRememberSelection(!rememberSelection);
-                            action: ActionType.ToggleRememberSelection,
-                        });
                     }}
-                    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,11 +92,10 @@ 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 =
+    const displayClientId = clientId
-        rememberSelection && clientId
         ? clientId
         : link.arguments.client
         ? link.arguments.client

src/contexts/ClientContext.ts

@@ -23,7 +23,6 @@ import { persistReducer } from '../utils/localStorage';
 const STATE_SCHEMA = object({
     clientId: string().nullable(),
     showOnlyDeviceClients: boolean(),
-    rememberSelection: boolean(),
     showExperimentalClients: boolean(),
 });
 
@@ -32,7 +31,7 @@ type State = TypeOf<typeof STATE_SCHEMA>;
 // Actions are a discriminated union.
 export enum ActionType {
     SetClient = 'SET_CLIENT',
-    ToggleRememberSelection = 'TOGGLE_REMEMBER_SELECTION',
+    ClearClient = 'CLEAR_CLIENT',
     ToggleShowOnlyDeviceClients = 'TOGGLE_SHOW_ONLY_DEVICE_CLIENTS',
     ToggleShowExperimentalClients = 'TOGGLE_SHOW_EXPERIMENTAL_CLIENTS',
 }
@@ -42,8 +41,8 @@ interface SetClient {
     clientId: ClientId;
 }
 
-interface ToggleRememberSelection {
+interface ClearClient {
-    action: ActionType.ToggleRememberSelection;
+    action: ActionType.ClearClient;
 }
 
 interface ToggleShowOnlyDeviceClients {
@@ -56,13 +55,12 @@ interface ToggleShowExperimentalClients {
 
 export type Action =
     | SetClient
-    | ToggleRememberSelection
+    | ClearClient
     | ToggleShowOnlyDeviceClients
     | ToggleShowExperimentalClients;
 
 const INITIAL_STATE: State = {
     clientId: null,
-    rememberSelection: false,
     showOnlyDeviceClients: true,
     showExperimentalClients: false,
 };
@@ -78,11 +76,6 @@ export const [initialState, reducer] = persistReducer(
                     ...state,
                     clientId: action.clientId,
                 };
-            case ActionType.ToggleRememberSelection:
-                return {
-                    ...state,
-                    rememberSelection: !state.rememberSelection,
-                };
             case ActionType.ToggleShowOnlyDeviceClients:
                 return {
                     ...state,
@@ -93,8 +86,11 @@ export const [initialState, reducer] = persistReducer(
                     ...state,
                     showExperimentalClients: !state.showExperimentalClients,
                 };
-            default:
+            case ActionType.ClearClient:
-                return state;
+                return {
+                    ...state,
+                    clientId: null,
+                };
         }
     }
 );