Add preferences for notification badges

app/javascript/flavours/glitch/features/drawer/header/index.js

@@ -47,6 +47,7 @@ const messages = defineMessages({
 export default function DrawerHeader ({
   columns,
   unreadNotifications,
+  showNotificationsBadge,
   intl,
   onSettingsClick,
 }) {
@@ -81,7 +82,7 @@ export default function DrawerHeader ({
         >
           <span className='icon-badge-wrapper'>
             <Icon icon='bell' />
-            { unreadNotifications > 0 && <div className='icon-badge' />}
+            { showNotificationsBadge && unreadNotifications > 0 && <div className='icon-badge' />}
           </span>
         </Link>
       ))}
@@ -119,6 +120,7 @@ export default function DrawerHeader ({
 DrawerHeader.propTypes = {
   columns: ImmutablePropTypes.list,
   unreadNotifications: PropTypes.number,
+  showNotificationsBadge: PropTypes.bool,
   intl: PropTypes.object,
   onSettingsClick: PropTypes.func,
 };

app/javascript/flavours/glitch/features/drawer/index.js

@@ -35,6 +35,7 @@ const mapStateToProps = state => ({
   searchValue: state.getIn(['search', 'value']),
   submitted: state.getIn(['search', 'submitted']),
   unreadNotifications: state.getIn(['notifications', 'unread']),
+  showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
 });
 
 //  Dispatch mapping.
@@ -89,6 +90,7 @@ class Drawer extends React.Component {
       submitted,
       isSearchPage,
       unreadNotifications,
+      showNotificationsBadge,
     } = this.props;
     const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
 
@@ -99,6 +101,7 @@ class Drawer extends React.Component {
           <DrawerHeader
             columns={columns}
             unreadNotifications={unreadNotifications}
+            showNotificationsBadge={showNotificationsBadge}
             intl={intl}
             onSettingsClick={onOpenSettings}
           />
@@ -143,6 +146,7 @@ Drawer.propTypes = {
   searchValue: PropTypes.string,
   submitted: PropTypes.bool,
   unreadNotifications: PropTypes.number,
+  showNotificationsBadge: PropTypes.bool,
 
   //  Dispatch props.
   onChange: PropTypes.func,

app/javascript/flavours/glitch/features/local_settings/page/index.js

@@ -42,6 +42,25 @@ export default class LocalSettingsPage extends React.PureComponent {
         >
           <FormattedMessage id='settings.show_reply_counter' defaultMessage='Display an estimate of the reply count' />
         </LocalSettingsPageItem>
+        <section>
+          <h2><FormattedMessage id='settings.notifications_opts' defaultMessage='Notifications options' /></h2>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['notifications', 'tab_badge']}
+            id='mastodon-settings--notifications-tab_badge'
+            onChange={onChange}
+          >
+            <FormattedMessage id='settings.notifications.tab_badge' defaultMessage="Display a badge for unread notifications if the notifications column isn't open" />
+          </LocalSettingsPageItem>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['notifications', 'favicon_badge']}
+            id='mastodon-settings--notifications-favicon_badge'
+            onChange={onChange}
+          >
+            <FormattedMessage id='settings.notifications.favicon_badge' defaultMessage='Display unread notifications count in the favicon' />
+          </LocalSettingsPageItem>
+        </section>
         <section>
           <h2><FormattedMessage id='settings.layout_opts' defaultMessage='Layout options' /></h2>
           <LocalSettingsPageItem
@@ -78,7 +97,6 @@ export default class LocalSettingsPage extends React.PureComponent {
     ),
     ({ intl, onChange, settings }) => (
       <div className='glitch local-settings_page compose_box_opts'>
-<section>
         <h1><FormattedMessage id='settings.compose_box_opts' defaultMessage='Compose box options' /></h1>
         <LocalSettingsPageItem
           settings={settings}

app/javascript/flavours/glitch/features/ui/components/tabs_bar.js

@@ -8,20 +8,22 @@ import { connect } from 'react-redux';
 
 const mapStateToProps = state => ({
   unreadNotifications: state.getIn(['notifications', 'unread']),
+  showBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
 });
 
 @connect(mapStateToProps)
 class NotificationsIcon extends React.PureComponent {
   static propTypes = {
     unreadNotifications: PropTypes.number,
+    showBadge: PropTypes.bool,
   };
 
   render() {
-    const { unreadNotifications } = this.props;
+    const { unreadNotifications, showBadge } = this.props;
     return (
       <span className='icon-badge-wrapper'>
         <i className='fa fa-fw fa-bell' />
-        { unreadNotifications > 0 && <div className='icon-badge' />}
+        { showBadge && unreadNotifications > 0 && <div className='icon-badge' />}
       </span>
     );
   }

app/javascript/flavours/glitch/features/ui/index.js

@@ -66,6 +66,7 @@ const mapStateToProps = state => ({
   navbarUnder: state.getIn(['local_settings', 'navbar_under']),
   dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
   unreadNotifications: state.getIn(['notifications', 'unread']),
+  showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']),
 });
 
 const keyMap = {
@@ -118,6 +119,7 @@ export default class UI extends React.Component {
     intl: PropTypes.object.isRequired,
     dropdownMenuIsOpen: PropTypes.bool,
     unreadNotifications: PropTypes.number,
+    showFaviconBadge: PropTypes.bool,
   };
 
   state = {
@@ -272,9 +274,10 @@ export default class UI extends React.Component {
     if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
       this.columnsAreaNode.handleChildrenContentChange();
     }
-    if (this.props.unreadNotifications != prevProps.unreadNotifications) {
+    if (this.props.unreadNotifications != prevProps.unreadNotifications ||
+        this.props.showFaviconBadge != prevProps.showFaviconBadge) {
       if (this.favicon) {
-        this.favicon.badge(this.props.unreadNotifications);
+        this.favicon.badge(this.props.showFaviconBadge ? this.props.unreadNotifications : 0);
       }
     }
   }

app/javascript/flavours/glitch/reducers/local_settings.js

@@ -37,6 +37,10 @@ const initialState = ImmutableMap({
     letterbox   : true,
     fullwidth   : true,
   }),
+  notifications : ImmutableMap({
+    favicon_badge : false,
+    tab_badge     : true,
+  }),
 });
 
 const hydrate = (state, localSettings) => state.mergeDeep(localSettings);