Fix: Add default for font combo box.

Don't pass dispatcher in, just provide it globally.
Fix: Allow clicking through to profile from server sidebar.

src/pages/settings/panes/Appearance.tsx

@@ -6,14 +6,13 @@ import Checkbox from "../../../components/ui/Checkbox";
 import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";
 import { connectState } from "../../../redux/connector";
-import { WithDispatcher } from "../../../redux/reducers";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import ColourSwatches from "../../../components/ui/ColourSwatches";
 import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import CollapsibleSection from "../../../components/common/CollapsibleSection";
-import { FONTS, FONT_KEYS, MONOSCAPE_FONTS, MONOSCAPE_FONT_KEYS, Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
+import { DEFAULT_FONT, DEFAULT_MONO_FONT, FONTS, FONT_KEYS, MONOSCAPE_FONTS, MONOSCAPE_FONT_KEYS, Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
 
 // @ts-ignore
 import pSBC from 'shade-blend-color';
@@ -25,25 +24,26 @@ import mutantSVG from '../assets/mutant_emoji.svg';
 import notoSVG from '../assets/noto_emoji.svg';
 import openmojiSVG from '../assets/openmoji_emoji.svg';
 import twemojiSVG from '../assets/twemoji_emoji.svg';
+import { dispatch } from "../../../redux";
 
 interface Props {
     settings: Settings;
 }
 
 // ! FIXME: code needs to be rewritten to fix jittering
-export function Component(props: Props & WithDispatcher) {
+export function Component(props: Props) {
     const theme = useContext(ThemeContext);
     const { writeClipboard, openScreen } = useIntermediate();
 
     function setTheme(theme: ThemeOptions) {
-        props.dispatcher({
+        dispatch({
             type: "SETTINGS_SET_THEME",
             theme
         });
     }
 
     function pushOverride(custom: Partial<Theme>) {
-        props.dispatcher({
+        dispatch({
             type: "SETTINGS_SET_THEME_OVERRIDE",
             custom
         });
@@ -58,7 +58,7 @@ export function Component(props: Props & WithDispatcher) {
 
     const emojiPack = props.settings.appearance?.emojiPack ?? 'mutant';
     function setEmojiPack(emojiPack: EmojiPacks) {
-        props.dispatcher({
+        dispatch({
             type: 'SETTINGS_SET_APPEARANCE',
             options: {
                 emojiPack
@@ -135,7 +135,7 @@ export function Component(props: Props & WithDispatcher) {
             <h3>
                 <Text id="app.settings.pages.appearance.font" />
             </h3>
-            <ComboBox value={theme.font} onChange={e => setTheme({ custom: { font: e.currentTarget.value as any } })}>
+            <ComboBox value={theme.font ?? DEFAULT_FONT} onChange={e => setTheme({ custom: { font: e.currentTarget.value as any } })}>
                 {
                     FONT_KEYS
                         .map(key =>
@@ -285,7 +285,7 @@ export function Component(props: Props & WithDispatcher) {
                 <h3>
                     <Text id="app.settings.pages.appearance.mono_font" />
                 </h3>
-                <ComboBox value={theme.monoscapeFont} onChange={e => setTheme({ custom: { monoscapeFont: e.currentTarget.value as any } })}>
+                <ComboBox value={theme.monoscapeFont ?? DEFAULT_MONO_FONT} onChange={e => setTheme({ custom: { monoscapeFont: e.currentTarget.value as any } })}>
                     {
                         MONOSCAPE_FONT_KEYS
                             .map(key =>
@@ -314,6 +314,5 @@ export const Appearance = connectState(
         return {
             settings: state.settings
         };
-    },
-    true
+    }
 );

src/pages/settings/panes/Experiments.tsx

@@ -1,15 +1,15 @@
 import { Text } from "preact-i18n";
 import styles from "./Panes.module.scss";
+import { dispatch } from "../../../redux";
 import Checkbox from "../../../components/ui/Checkbox";
 import { connectState } from "../../../redux/connector";
-import { WithDispatcher } from "../../../redux/reducers";
 import { AVAILABLE_EXPERIMENTS, ExperimentOptions } from "../../../redux/reducers/experiments";
 
 interface Props {
     options?: ExperimentOptions;
 }
 
-export function Component(props: Props & WithDispatcher) {
+export function Component(props: Props) {
     return (
         <div className={styles.experiments}>
             <h3>
@@ -20,12 +20,12 @@ export function Component(props: Props & WithDispatcher) {
                     key =>
                         <Checkbox
                             checked={(props.options?.enabled ?? []).indexOf(key) > -1}
-                            onChange={enabled => {
-                                props.dispatcher({
+                            onChange={enabled =>
+                                dispatch({
                                     type: enabled ? 'EXPERIMENTS_ENABLE' : 'EXPERIMENTS_DISABLE',
                                     key
-                                });
-                            }}
+                                })
+                            }
                         >
                             <Text id={`app.settings.pages.experiments.titles.${key}`} />
                             <p>
@@ -51,6 +51,5 @@ export const ExperimentsPage = connectState(
         return {
             options: state.experiments
         };
-    },
-    true
+    }
 );

src/pages/settings/panes/Languages.tsx

@@ -1,19 +1,19 @@
 import { Text } from "preact-i18n";
 import styles from "./Panes.module.scss";
+import { dispatch } from "../../../redux";
 import Tip from "../../../components/ui/Tip";
 import Emoji from "../../../components/common/Emoji";
 import Checkbox from "../../../components/ui/Checkbox";
 import { connectState } from "../../../redux/connector";
-import { WithDispatcher } from "../../../redux/reducers";
 import { Language, LanguageEntry, Languages as Langs } from "../../../context/Locale";
 
-type Props = WithDispatcher & {
+type Props = {
     locale: Language;
 }
 
 type Key = [ string, LanguageEntry ];
 
-function Entry({ entry: [ x, lang ], locale, dispatcher }: { entry: Key } & Props) {
+function Entry({ entry: [ x, lang ], locale }: { entry: Key } & Props) {
     return (
         <Checkbox
             key={x}
@@ -21,7 +21,7 @@ function Entry({ entry: [ x, lang ], locale, dispatcher }: { entry: Key } & Prop
             checked={locale === x}
             onChange={v => {
                 if (v) {
-                    dispatcher({
+                    dispatch({
                         type: "SET_LOCALE",
                         locale: x as Language
                     });
@@ -80,6 +80,5 @@ export const Languages = connectState(
         return {
             locale: state.locale
         };
-    },
-    true
+    }
 );

src/pages/settings/panes/Notifications.tsx

@@ -1,9 +1,9 @@
 import { Text } from "preact-i18n";
 import styles from "./Panes.module.scss";
+import { dispatch } from "../../../redux";
 import defaultsDeep from "lodash.defaultsdeep";
 import Checkbox from "../../../components/ui/Checkbox";
 import { connectState } from "../../../redux/connector";
-import { WithDispatcher } from "../../../redux/reducers";
 import { SOUNDS_ARRAY } from "../../../assets/sounds/Audio";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { urlBase64ToUint8Array } from "../../../lib/conversion";
@@ -15,7 +15,7 @@ interface Props {
     options?: NotificationOptions;
 }
 
-export function Component({ options, dispatcher }: Props & WithDispatcher) {
+export function Component({ options }: Props) {
     const client = useContext(AppContext);
     const { openScreen } = useIntermediate();
     const [pushEnabled, setPushEnabled] = useState<undefined | boolean>(
@@ -51,7 +51,7 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
                         }
                     }
 
-                    dispatcher({
+                    dispatch({
                         type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
                         options: { desktopEnabled }
                     });
@@ -107,7 +107,7 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
                     <Checkbox
                         checked={enabledSounds[key] ? true : false}
                         onChange={enabled =>
-                            dispatcher({
+                            dispatch({
                                 type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
                                 options: {
                                     sounds: {
@@ -131,6 +131,5 @@ export const Notifications = connectState(
         return {
             options: state.settings.notification
         };
-    },
-    true
+    }
 );

src/pages/settings/panes/Sync.tsx

@@ -1,15 +1,15 @@
 import { Text } from "preact-i18n";
 import styles from "./Panes.module.scss";
+import { dispatch } from "../../../redux";
 import Checkbox from "../../../components/ui/Checkbox";
 import { connectState } from "../../../redux/connector";
-import { WithDispatcher } from "../../../redux/reducers";
 import { SyncKeys, SyncOptions } from "../../../redux/reducers/sync";
 
 interface Props {
     options?: SyncOptions;
 }
 
-export function Component(props: Props & WithDispatcher) {
+export function Component(props: Props) {
     return (
         <div className={styles.notifications}>
             <h3>
@@ -26,12 +26,12 @@ export function Component(props: Props & WithDispatcher) {
                         <Checkbox
                             checked={(props.options?.disabled ?? []).indexOf(key) === -1}
                             description={<Text id={`app.settings.pages.sync.descriptions.${key}`} />}
-                            onChange={enabled => {
-                                props.dispatcher({
+                            onChange={enabled =>
+                                dispatch({
                                     type: enabled ? 'SYNC_ENABLE_KEY' : 'SYNC_DISABLE_KEY',
                                     key
-                                });
-                            }}
+                                })
+                            }
                         >
                             <Text id={`app.settings.pages.${title}`} />
                         </Checkbox>
@@ -47,6 +47,5 @@ export const Sync = connectState(
         return {
             options: state.sync
         };
-    },
-    true
+    }
 );

src/pages/settings/server/Roles.tsx

@@ -30,7 +30,7 @@ export function Roles({ server }: Props) {
 
     if (role !== 'default' && typeof roles[role] === 'undefined') {
         useEffect(() => setRole('default'));
-        return;
+        return null;
     }
 
     const v = (id: string) => I32ToU32(id === 'default' ? server.default_permissions : roles[id].permissions)