diff --git a/web/apps/app-listing.react.js b/web/apps/app-listing.react.js
new file mode 100644
index 000000000..7fb5a5df7
--- /dev/null
+++ b/web/apps/app-listing.react.js
@@ -0,0 +1,83 @@
+// @flow
+
+import { faCheckCircle } from '@fortawesome/free-regular-svg-icons';
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classnames from 'classnames';
+import * as React from 'react';
+import { useDispatch } from 'react-redux';
+
+import {
+ disableAppActionType,
+ enableAppActionType,
+} from 'lib/reducers/enabled-apps-reducer';
+import type { SupportedApps } from 'lib/types/enabled-apps';
+
+import SWMansionIcon from '../SWMansionIcon.react';
+import css from './apps.css';
+
+type Props = {
+ +id: SupportedApps | 'chat',
+ +readOnly: boolean,
+ +enabled: boolean,
+ +name: string,
+ +icon: 'message-square' | 'calendar',
+ +copy: string,
+};
+
+function AppListing(props: Props): React.Node {
+ const { id, readOnly, enabled, name, icon, copy } = props;
+ const dispatch = useDispatch();
+
+ const switchAppState = React.useCallback(
+ () =>
+ dispatch({
+ type: enabled ? disableAppActionType : enableAppActionType,
+ payload: id,
+ }),
+ [dispatch, enabled, id],
+ );
+
+ const actionButton = React.useMemo(() => {
+ const switchIcon = enabled ? faCheckCircle : faPlusCircle;
+ if (readOnly) {
+ const readOnlyIconClasses = classnames(
+ css.appListingIcon,
+ css.appListingIconState,
+ css.iconReadOnly,
+ );
+ return (
+
+
+
+ );
+ }
+ const iconClasses = classnames(
+ css.appListingIcon,
+ css.appListingIconState,
+ {
+ [css.iconEnabled]: enabled,
+ [css.iconDisabled]: !enabled,
+ },
+ );
+ return (
+
+
+
+ );
+ }, [enabled, readOnly, switchAppState]);
+ return (
+
+
+
+
+
+
{name}
+ {copy}
+
+ {actionButton}
+
Apps directory
;
+ const enabledApps = useSelector(state => state.enabledApps);
+
+ const appData = React.useMemo(
+ () =>
+ APP_DIRECTORY_DATA.map(app => {
+ const { defaultEnabled, ...data } = app;
+ return {
+ ...data,
+ enabled: enabledApps[app.id] ?? defaultEnabled,
+ };
+ }),
+ [enabledApps],
+ );
+
+ const appItems = React.useMemo(
+ () => appData.map(item => ),
+ [appData],
+ );
+
+ return (
+
+
Choose Apps
+
{appItems}
+