feat(settings): add option to hide avatars

src/components/settings-modal/interface-settings/interface-settings.module.css

@@ -24,4 +24,8 @@
 
 .interfaceSettings {
   margin-bottom: 10px;
+}
+
+.setting input[type="checkbox"] {
+  margin-right: 2px;
 }

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import useTheme from '../../../hooks/use-theme';
 import styles from './interface-settings.module.css';
 import packageJson from '../../../../package.json';
+import useAvatarVisibilityStore from '../../../stores/use-avatar-visibility-store';
 
 const commitRef = process.env.REACT_APP_COMMIT_REF;
 const isElectron = window.isElectron === true;
@@ -107,6 +108,11 @@ const InterfaceLanguage = () => {
 
 const InterfaceSettings = () => {
   const { t } = useTranslation();
+  const { hideAvatars, setHideAvatars } = useAvatarVisibilityStore();
+
+  const handleHideAvatarsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setHideAvatars(e.target.checked);
+  };
 
   return (
     <div className={styles.interfaceSettings}>
@@ -130,6 +136,11 @@ const InterfaceSettings = () => {
       <div className={styles.setting}>
         {t('interface_language')}: <InterfaceLanguage />
       </div>
+      <div className={styles.setting}>
+        <label>
+          <input type='checkbox' checked={hideAvatars} onChange={handleHideAvatarsChange} /> {t('hide_avatars')}
+        </label>
+      </div>
     </div>
   );
 };