Adding notifications column

app/assets/javascripts/components/actions/alerts.jsx

@@ -0,0 +1,24 @@
+export const ALERT_SHOW    = 'ALERT_SHOW';
+export const ALERT_DISMISS = 'ALERT_DISMISS';
+export const ALERT_CLEAR   = 'ALERT_CLEAR';
+
+export function dismissAlert(alert) {
+  return {
+    type: ALERT_DISMISS,
+    alert
+  };
+};
+
+export function clearAlert() {
+  return {
+    type: ALERT_CLEAR
+  };
+};
+
+export function showAlert(title, message) {
+  return {
+    type: ALERT_SHOW,
+    title,
+    message
+  };
+};

app/assets/javascripts/components/actions/notifications.jsx

@@ -1,24 +1,124 @@
-export const NOTIFICATION_SHOW    = 'NOTIFICATION_SHOW';
-export const NOTIFICATION_DISMISS = 'NOTIFICATION_DISMISS';
-export const NOTIFICATION_CLEAR   = 'NOTIFICATION_CLEAR';
+import api, { getLinks } from '../api'
+import Immutable from 'immutable';
 
-export function dismissNotification(notification) {
-  return {
-    type: NOTIFICATION_DISMISS,
-    notification: notification
+import { fetchRelationships } from './accounts';
+
+export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
+
+export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST';
+export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS';
+export const NOTIFICATIONS_REFRESH_FAIL    = 'NOTIFICATIONS_REFRESH_FAIL';
+
+export const NOTIFICATIONS_EXPAND_REQUEST = 'NOTIFICATIONS_EXPAND_REQUEST';
+export const NOTIFICATIONS_EXPAND_SUCCESS = 'NOTIFICATIONS_EXPAND_SUCCESS';
+export const NOTIFICATIONS_EXPAND_FAIL    = 'NOTIFICATIONS_EXPAND_FAIL';
+
+const fetchRelatedRelationships = (dispatch, notifications) => {
+  const accountIds = notifications.filter(item => item.type === 'follow').map(item => item.account.id);
+
+  if (accountIds > 0) {
+    dispatch(fetchRelationships(accountIds));
+  }
+};
+
+export function updateNotifications(notification) {
+  return dispatch => {
+    dispatch({
+      type: NOTIFICATIONS_UPDATE,
+      notification,
+      account: notification.account,
+      status: notification.status
+    });
+
+    fetchRelatedRelationships(dispatch, [notification]);
   };
 };
 
-export function clearNotifications() {
-  return {
-    type: NOTIFICATION_CLEAR
+export function refreshNotifications() {
+  return (dispatch, getState) => {
+    dispatch(refreshNotificationsRequest());
+
+    const params = {};
+    const ids    = getState().getIn(['notifications', 'items']);
+
+    if (ids.size > 0) {
+      params.since_id = ids.first().get('id');
+    }
+
+    api(getState).get('/api/v1/notifications', { params }).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+      dispatch(refreshNotificationsSuccess(response.data, next ? next.uri : null));
+      fetchRelatedRelationships(dispatch, response.data);
+    }).catch(error => {
+      dispatch(refreshNotificationsFail(error));
+    });
   };
 };
 
-export function showNotification(title, message) {
+export function refreshNotificationsRequest() {
   return {
-    type: NOTIFICATION_SHOW,
-    title: title,
-    message: message
+    type: NOTIFICATIONS_REFRESH_REQUEST
+  };
+};
+
+export function refreshNotificationsSuccess(notifications, next) {
+  return {
+    type: NOTIFICATIONS_REFRESH_SUCCESS,
+    notifications,
+    accounts: notifications.map(item => item.account),
+    statuses: notifications.map(item => item.status),
+    next
+  };
+};
+
+export function refreshNotificationsFail(error) {
+  return {
+    type: NOTIFICATIONS_REFRESH_FAIL,
+    error
+  };
+};
+
+export function expandNotifications() {
+  return (dispatch, getState) => {
+    const url = getState().getIn(['notifications', 'next'], null);
+
+    if (url === null) {
+      return;
+    }
+
+    dispatch(expandNotificationsRequest());
+
+    api(getState).get(url).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+      dispatch(expandNotificationsSuccess(response.data, next ? next.uri : null));
+      fetchRelatedRelationships(dispatch, response.data);
+    }).catch(error => {
+      dispatch(expandNotificationsFail(error));
+    });
+  };
+};
+
+export function expandNotificationsRequest() {
+  return {
+    type: NOTIFICATIONS_EXPAND_REQUEST
+  };
+};
+
+export function expandNotificationsSuccess(notifications, next) {
+  return {
+    type: NOTIFICATIONS_EXPAND_SUCCESS,
+    notifications,
+    accounts: notifications.map(item => item.account),
+    statuses: notifications.map(item => item.status),
+    next
+  };
+};
+
+export function expandNotificationsFail(error) {
+  return {
+    type: NOTIFICATIONS_EXPAND_FAIL,
+    error
   };
 };

app/assets/javascripts/components/api.jsx

@@ -2,7 +2,13 @@ import axios from 'axios';
 import LinkHeader from 'http-link-header';
 
 export const getLinks = response => {
-  return LinkHeader.parse(response.headers.link);
+  const value = response.headers.link;
+
+  if (!value) {
+    return { refs: [] };
+  }
+
+  return LinkHeader.parse(value);
 };
 
 export default getState => axios.create({

app/assets/javascripts/components/components/account.jsx

@@ -1,9 +1,9 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
+import Avatar from './avatar';
+import DisplayName from './display_name';
 import { Link } from 'react-router';
-import IconButton from '../../../components/icon_button';
+import IconButton from './icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({

app/assets/javascripts/components/components/status.jsx

@@ -11,6 +11,15 @@ import { FormattedMessage } from 'react-intl';
 import emojify from '../emoji';
 import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser';
 
+const outerStyle = {
+  padding: '8px 10px',
+  paddingLeft: '68px',
+  position: 'relative',
+  minHeight: '48px',
+  borderBottom: '1px solid #363c4b',
+  cursor: 'default'
+};
+
 const Status = React.createClass({
 
   contextTypes: {
@@ -26,7 +35,7 @@ const Status = React.createClass({
     onDelete: React.PropTypes.func,
     onOpenMedia: React.PropTypes.func,
     me: React.PropTypes.number,
-    now: React.PropTypes.any
+    muted: React.PropTypes.bool
   },
 
   mixins: [PureRenderMixin],
@@ -81,14 +90,14 @@ const Status = React.createClass({
     }
 
     return (
-      <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'default' }}>
+      <div className={this.props.muted ? 'muted' : ''} style={outerStyle}>
         <div style={{ fontSize: '15px' }}>
           <div style={{ float: 'right', fontSize: '14px' }}>
             <a href={status.get('url')} className='status__relative-time' style={{ color: '#616b86' }} target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} now={now} /></a>
           </div>
 
           <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#616b86' }}>
-            <div style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
+            <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
               <Avatar src={status.getIn(['account', 'avatar'])} size={48} />
             </div>
 

app/assets/javascripts/components/containers/account_container.jsx

@@ -1,10 +1,10 @@
-import { connect }            from 'react-redux';
-import { makeGetAccount }     from '../../../selectors';
-import Account                from '../components/account';
+import { connect } from 'react-redux';
+import { makeGetAccount } from '../selectors';
+import Account from '../components/account';
 import {
   followAccount,
   unfollowAccount
-}                             from '../../../actions/accounts';
+} from '../actions/accounts';
 
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();

app/assets/javascripts/components/containers/mastodon.jsx

@@ -6,6 +6,7 @@ import {
   deleteFromTimelines,
   refreshTimeline
 } from '../actions/timelines';
+import { updateNotifications } from '../actions/notifications';
 import { setAccessToken } from '../actions/meta';
 import { setAccountSelf } from '../actions/accounts';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
@@ -32,6 +33,7 @@ import Following from '../features/following';
 import Reblogs from '../features/reblogs';
 import Favourites from '../features/favourites';
 import HashtagTimeline from '../features/hashtag_timeline';
+import Notifications from '../features/notifications';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import en from 'react-intl/locale-data/en';
 import de from 'react-intl/locale-data/de';
@@ -75,11 +77,18 @@ const Mastodon = React.createClass({
               return store.dispatch(refreshTimeline('home', true));
             case 'block':
               return store.dispatch(refreshTimeline('mentions', true));
+            case 'notification':
+              return store.dispatch(updateNotifications(JSON.parse(data.message)));
           }
         }
 
       });
     }
+
+    // Desktop notifications
+    if (Notification.permission === 'default') {
+      Notification.requestPermission();
+    }
   },
 
   componentWillUnmount () {
@@ -103,6 +112,8 @@ const Mastodon = React.createClass({
               <Route path='timelines/public' component={PublicTimeline} />
               <Route path='timelines/tag/:id' component={HashtagTimeline} />
 
+              <Route path='notifications' component={Notifications} />
+
               <Route path='statuses/new' component={Compose} />
               <Route path='statuses/:statusId' component={Status} />
               <Route path='statuses/:statusId/reblogs' component={Reblogs} />

app/assets/javascripts/components/features/compose/components/suggestions_box.jsx

@@ -1,6 +1,6 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import AccountContainer from '../../followers/containers/account_container';
+import AccountContainer from '../../../containers/account_container';
 import { FormattedMessage } from 'react-intl';
 
 const outerStyle = {

app/assets/javascripts/components/features/favourites/index.jsx

@@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import LoadingIndicator from '../../components/loading_indicator';
 import { fetchFavourites } from '../../actions/interactions';
 import { ScrollContainer } from 'react-router-scroll';
-import AccountContainer from '../followers/containers/account_container';
+import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 import ColumnBackButton from '../../components/column_back_button';
 

app/assets/javascripts/components/features/followers/index.jsx

@@ -7,7 +7,7 @@ import {
   expandFollowers
 } from '../../actions/accounts';
 import { ScrollContainer } from 'react-router-scroll';
-import AccountContainer from './containers/account_container';
+import AccountContainer from '../../containers/account_container';
 
 const mapStateToProps = (state, props) => ({
   accountIds: state.getIn(['user_lists', 'followers', Number(props.params.accountId), 'items'])

app/assets/javascripts/components/features/following/index.jsx

@@ -7,7 +7,7 @@ import {
   expandFollowing
 } from '../../actions/accounts';
 import { ScrollContainer } from 'react-router-scroll';
-import AccountContainer from '../followers/containers/account_container';
+import AccountContainer from '../../containers/account_container';
 
 const mapStateToProps = (state, props) => ({
   accountIds: state.getIn(['user_lists', 'following', Number(props.params.accountId), 'items'])

app/assets/javascripts/components/features/notifications/components/notification.jsx

@@ -0,0 +1,79 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import StatusContainer from '../../../containers/status_container';
+import AccountContainer from '../../../containers/account_container';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';
+
+const messageStyle = {
+  padding: '8px 10px',
+  paddingBottom: '0',
+  cursor: 'default',
+  color: '#d9e1e8',
+  fontSize: '15px'
+};
+
+const linkStyle = {
+  fontWeight: '500'
+};
+
+const Notification = React.createClass({
+
+  propTypes: {
+    notification: ImmutablePropTypes.map.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  renderFollow (account, link) {
+    return (
+      <div className='notification'>
+        <div style={messageStyle}><i className='fa fa-fw fa-user-plus' style={{ color: '#2b90d9' }} /> <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} /></div>
+        <AccountContainer id={account.get('id')} withNote={false} />
+      </div>
+    );
+  },
+
+  renderMention (notification) {
+    return <StatusContainer id={notification.get('status')} />;
+  },
+
+  renderFavourite (notification, link) {
+    return (
+      <div className='notification'>
+        <div style={messageStyle}><i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} /> <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /></div>
+        <StatusContainer id={notification.get('status')} muted={true} />
+      </div>
+    );
+  },
+
+  renderReblog (notification, link) {
+    return (
+      <div className='notification'>
+        <div style={messageStyle}><i className='fa fa-fw fa-retweet' style={{ color: '#2b90d9' }} /> <FormattedMessage id='notification.reblog' defaultMessage='{name} reblogged your status' values={{ name: link }} /></div>
+        <StatusContainer id={notification.get('status')} muted={true} />
+      </div>
+    );
+  },
+
+  render () {
+    const { notification } = this.props;
+    const account          = notification.get('account');
+    const displayName      = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');
+    const link             = <Link className='notification__display-name' style={linkStyle} to={`/accounts/${account.get('id')}`}>{displayName}</Link>;
+
+    switch(notification.get('type')) {
+      case 'follow':
+        return this.renderFollow(account, link);
+      case 'mention':
+        return this.renderMention(notification);
+      case 'favourite':
+        return this.renderFavourite(notification, link);
+      case 'reblog':
+        return this.renderReblog(notification, link);
+    }
+  }
+
+});
+
+export default Notification;

app/assets/javascripts/components/features/notifications/containers/notification_container.jsx

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { makeGetNotification } from '../../../selectors';
+import Notification from '../components/notification';
+
+const makeMapStateToProps = () => {
+  const getNotification = makeGetNotification();
+
+  const mapStateToProps = (state, props) => ({
+    notification: getNotification(state, props.notification, props.accountId)
+  });
+
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps)(Notification);

app/assets/javascripts/components/features/notifications/index.jsx

@@ -0,0 +1,61 @@
+import { connect } from 'react-redux';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Column from '../ui/components/column';
+import {
+  refreshNotifications,
+  expandNotifications
+} from '../../actions/notifications';
+import NotificationContainer from './containers/notification_container';
+import { ScrollContainer } from 'react-router-scroll';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  title: { id: 'column.notifications', defaultMessage: 'Notifications' }
+});
+
+const mapStateToProps = state => ({
+  notifications: state.getIn(['notifications', 'items'])
+});
+
+const Notifications = React.createClass({
+
+  propTypes: {
+    notifications: ImmutablePropTypes.list.isRequired,
+    dispatch: React.PropTypes.func.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  componentWillMount () {
+    const { dispatch } = this.props;
+    dispatch(refreshNotifications());
+  },
+
+  handleScroll (e) {
+    const { scrollTop, scrollHeight, clientHeight } = e.target;
+
+    if (scrollTop === scrollHeight - clientHeight) {
+      this.props.dispatch(expandNotifications());
+    }
+  },
+
+  render () {
+    const { intl, notifications } = this.props;
+
+    return (
+      <Column icon='bell' heading={intl.formatMessage(messages.title)}>
+        <ScrollContainer scrollKey='notifications'>
+          <div className='scrollable' onScroll={this.handleScroll}>
+            <div>
+              {notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
+            </div>
+          </div>
+        </ScrollContainer>
+      </Column>
+    );
+  }
+
+});
+
+export default connect(mapStateToProps)(injectIntl(Notifications));

app/assets/javascripts/components/features/reblogs/index.jsx

@@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import LoadingIndicator from '../../components/loading_indicator';
 import { fetchReblogs } from '../../actions/interactions';
 import { ScrollContainer } from 'react-router-scroll';
-import AccountContainer from '../followers/containers/account_container';
+import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 import ColumnBackButton from '../../components/column_back_button';
 

app/assets/javascripts/components/features/ui/containers/notifications_container.jsx

@@ -1,19 +1,19 @@
-import { connect }             from 'react-redux';
-import { NotificationStack }   from 'react-notification';
+import { connect } from 'react-redux';
+import { NotificationStack } from 'react-notification';
 import {
-  dismissNotification,
-  clearNotifications
-}                              from '../../../actions/notifications';
-import { getNotifications }    from '../../../selectors';
+  dismissAlert,
+  clearAlerts
+} from '../../../actions/alerts';
+import { getAlerts } from '../../../selectors';
 
 const mapStateToProps = (state, props) => ({
-  notifications: getNotifications(state)
+  notifications: getAlerts(state)
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    onDismiss: notifiction => {
-      dispatch(dismissNotification(notifiction));
+    onDismiss: alert => {
+      dispatch(dismissAlert(alert));
     }
   };
 };

app/assets/javascripts/components/locales/de.jsx

@@ -26,10 +26,12 @@ const en = {
   "column.home": "Home",
   "column.mentions": "Erwähnungen",
   "column.public": "Gesamtes Bekanntes Netz",
+  "column.notifications": "Mitteilungen",
   "tabs_bar.compose": "Schreiben",
   "tabs_bar.home": "Home",
   "tabs_bar.mentions": "Erwähnungen",
   "tabs_bar.public": "Gesamtes Netz",
+  "tabs_bar.notifications": "Mitteilungen",
   "compose_form.placeholder": "Worüber möchstest du schreiben?",
   "compose_form.publish": "Veröffentlichen",
   "navigation_bar.settings": "Einstellungen",
@@ -42,7 +44,11 @@ const en = {
   "suggestions_box.who_to_follow": "Wem folgen",
   "suggestions_box.refresh": "Aktualisieren",
   "upload_button.label": "Media-Datei anfügen",
-  "upload_form.undo": "Entfernen"
+  "upload_form.undo": "Entfernen",
+  "notification.follow": "{name} folgt dir",
+  "notification.favourite": "{name} favorisierte deinen Status",
+  "notification.reblog": "{name} teilte deinen Status",
+  "notification.mention": "{name} erwähnte dich"
 };
 
 export default en;

app/assets/javascripts/components/locales/en.jsx

@@ -27,10 +27,12 @@ const en = {
   "column.home": "Home",
   "column.mentions": "Mentions",
   "column.public": "Public",
+  "column.notifications": "Notifications",
   "tabs_bar.compose": "Compose",
   "tabs_bar.home": "Home",
   "tabs_bar.mentions": "Mentions",
   "tabs_bar.public": "Public",
+  "tabs_bar.notifications": "Notifications",
   "compose_form.placeholder": "What is on your mind?",
   "compose_form.publish": "Publish",
   "navigation_bar.settings": "Settings",
@@ -43,7 +45,11 @@ const en = {
   "suggestions_box.who_to_follow": "Who to follow",
   "suggestions_box.refresh": "Refresh",
   "upload_button.label": "Add media",
-  "upload_form.undo": "Undo"
+  "upload_form.undo": "Undo",
+  "notification.follow": "{name} followed you",
+  "notification.favourite": "{name} favourited your status",
+  "notification.reblog": "{name} reblogged your status",
+  "notification.mention": "{name} mentioned you"
 };
 
 export default en;

app/assets/javascripts/components/locales/es.jsx

@@ -27,10 +27,12 @@ const es = {
   "column.home": "Inicio",
   "column.mentions": "Menciones",
   "column.public": "Historia pública",
+  "column.notifications": "Notificaciones",
   "tabs_bar.compose": "Redactar",
   "tabs_bar.home": "Inicio",
   "tabs_bar.mentions": "Menciones",
   "tabs_bar.public": "Público",
+  "tabs_bar.notifications": "Notificaciones",
   "compose_form.placeholder": "¿En qué estás pensando?",
   "compose_form.publish": "Publicar",
   "navigation_bar.settings": "Ajustes",
@@ -43,7 +45,11 @@ const es = {
   "suggestions_box.who_to_follow": "A quién seguir",
   "suggestions_box.refresh": "Refrescar",
   "upload_button.label": "Añadir medio",
-  "upload_form.undo": "Deshacer"
+  "upload_form.undo": "Deshacer",
+  "notification.follow": "{name} le esta ahora siguiendo",
+  "notification.favourite": "{name} marcó como favorito su estado",
+  "notification.reblog": "{name} volvió a publicar su estado",
+  "notification.mention": "Fue mencionado por {name}"
 };
 
 export default es;

app/assets/javascripts/components/middleware/errors.jsx

@@ -1,4 +1,4 @@
-import { showNotification } from '../actions/notifications';
+import { showAlert } from '../actions/alerts';
 
 const defaultFailSuffix = 'FAIL';
 
@@ -18,10 +18,10 @@ export default function errorsMiddleware() {
             message = data.error;
           }
 
-          dispatch(showNotification(title, message));
+          dispatch(showAlert(title, message));
         } else {
           console.error(action.error);
-          dispatch(showNotification('Oops!', 'An unexpected error occurred. Inspect the console for more details'));
+          dispatch(showAlert('Oops!', 'An unexpected error occurred. Inspect the console for more details'));
         }
       }
     }

app/assets/javascripts/components/reducers/accounts.jsx

@@ -28,6 +28,11 @@ import {
   CONTEXT_FETCH_SUCCESS
 } from '../actions/statuses';
 import { SEARCH_SUGGESTIONS_READY } from '../actions/search';
+import {
+  NOTIFICATIONS_UPDATE,
+  NOTIFICATIONS_REFRESH_SUCCESS,
+  NOTIFICATIONS_EXPAND_SUCCESS
+} from '../actions/notifications';
 import Immutable from 'immutable';
 
 const normalizeAccount = (state, account) => state.set(account.id, Immutable.fromJS(account));
@@ -64,6 +69,7 @@ export default function accounts(state = initialState, action) {
   switch(action.type) {
     case ACCOUNT_SET_SELF:
     case ACCOUNT_FETCH_SUCCESS:
+    case NOTIFICATIONS_UPDATE:
       return normalizeAccount(state, action.account);
     case SUGGESTIONS_FETCH_SUCCESS:
     case FOLLOWERS_FETCH_SUCCESS:
@@ -74,6 +80,8 @@ export default function accounts(state = initialState, action) {
     case FAVOURITES_FETCH_SUCCESS:
     case COMPOSE_SUGGESTIONS_READY:
     case SEARCH_SUGGESTIONS_READY:
+    case NOTIFICATIONS_REFRESH_SUCCESS:
+    case NOTIFICATIONS_EXPAND_SUCCESS:
       return normalizeAccounts(state, action.accounts);
     case TIMELINE_REFRESH_SUCCESS:
     case TIMELINE_EXPAND_SUCCESS:

app/assets/javascripts/components/reducers/alerts.jsx

@@ -0,0 +1,25 @@
+import {
+  ALERT_SHOW,
+  ALERT_DISMISS,
+  ALERT_CLEAR
+} from '../actions/alerts';
+import Immutable from 'immutable';
+
+const initialState = Immutable.List([]);
+
+export default function alerts(state = initialState, action) {
+  switch(action.type) {
+    case ALERT_SHOW:
+      return state.push(Immutable.Map({
+        key: state.size > 0 ? state.last().get('key') + 1 : 0,
+        title: action.title,
+        message: action.message
+      }));
+    case ALERT_DISMISS:
+      return state.filterNot(item => item.get('key') === action.alert.key);
+    case ALERT_CLEAR:
+      return state.clear();
+    default:
+      return state;
+  }
+};

app/assets/javascripts/components/reducers/index.jsx

@@ -1,26 +1,28 @@
-import { combineReducers }   from 'redux-immutable';
-import timelines             from './timelines';
-import meta                  from './meta';
-import compose               from './compose';
-import notifications         from './notifications';
+import { combineReducers } from 'redux-immutable';
+import timelines from './timelines';
+import meta from './meta';
+import compose from './compose';
+import alerts from './alerts';
 import { loadingBarReducer } from 'react-redux-loading-bar';
-import modal                 from './modal';
-import user_lists            from './user_lists';
-import accounts              from './accounts';
-import statuses              from './statuses';
-import relationships         from './relationships';
-import search                from './search';
+import modal from './modal';
+import user_lists from './user_lists';
+import accounts from './accounts';
+import statuses from './statuses';
+import relationships from './relationships';
+import search from './search';
+import notifications from './notifications';
 
 export default combineReducers({
   timelines,
   meta,
   compose,
-  notifications,
+  alerts,
   loadingBar: loadingBarReducer,
   modal,
   user_lists,
   accounts,
   statuses,
   relationships,
-  search
+  search,
+  notifications
 });

app/assets/javascripts/components/reducers/notifications.jsx

@@ -1,24 +1,56 @@
 import {
-  NOTIFICATION_SHOW,
-  NOTIFICATION_DISMISS,
-  NOTIFICATION_CLEAR
+  NOTIFICATIONS_UPDATE,
+  NOTIFICATIONS_REFRESH_SUCCESS,
+  NOTIFICATIONS_EXPAND_SUCCESS
 } from '../actions/notifications';
 import Immutable from 'immutable';
 
-const initialState = Immutable.List([]);
+const initialState = Immutable.Map({
+  items: Immutable.List(),
+  next: null,
+  loaded: false
+});
+
+const notificationToMap = notification => Immutable.Map({
+  id: notification.id,
+  type: notification.type,
+  account: notification.account.id,
+  status: notification.status ? notification.status.id : null
+});
+
+const normalizeNotification = (state, notification) => {
+  return state.update('items', list => list.unshift(notificationToMap(notification)));
+};
+
+const normalizeNotifications = (state, notifications, next) => {
+  let items    = Immutable.List();
+  const loaded = state.get('loaded');
+
+  notifications.forEach((n, i) => {
+    items = items.set(i, notificationToMap(n));
+  });
+
+  return state.update('items', list => loaded ? list.unshift(...items) : list.push(...items)).set('next', next).set('loaded', true);
+};
+
+const appendNormalizedNotifications = (state, notifications, next) => {
+  let items = Immutable.List();
+
+  notifications.forEach((n, i) => {
+    items = items.set(i, notificationToMap(n));
+  });
+
+  return state.update('items', list => list.push(...items)).set('next', next);
+};
 
 export default function notifications(state = initialState, action) {
   switch(action.type) {
-    case NOTIFICATION_SHOW:
-      return state.push(Immutable.Map({
-        key: state.size > 0 ? state.last().get('key') + 1 : 0,
-        title: action.title,
-        message: action.message
-      }));
-    case NOTIFICATION_DISMISS:
-      return state.filterNot(item => item.get('key') === action.notification.key);
-    case NOTIFICATION_CLEAR:
-      return state.clear();
+    case NOTIFICATIONS_UPDATE:
+      return normalizeNotification(state, action.notification);
+    case NOTIFICATIONS_REFRESH_SUCCESS:
+      return normalizeNotifications(state, action.notifications, action.next);
+    case NOTIFICATIONS_EXPAND_SUCCESS:
+      return appendNormalizedNotifications(state, action.notifications, action.next);
     default:
       return state;
   }

app/assets/javascripts/components/reducers/statuses.jsx

@@ -18,9 +18,18 @@ import {
   ACCOUNT_TIMELINE_FETCH_SUCCESS,
   ACCOUNT_TIMELINE_EXPAND_SUCCESS
 } from '../actions/accounts';
+import {
+  NOTIFICATIONS_UPDATE,
+  NOTIFICATIONS_REFRESH_SUCCESS,
+  NOTIFICATIONS_EXPAND_SUCCESS
+} from '../actions/notifications';
 import Immutable from 'immutable';
 
 const normalizeStatus = (state, status) => {
+  if (!status) {
+    return state;
+  }
+
   status.account = status.account.id;
 
   if (status.reblog && status.reblog.id) {
@@ -53,6 +62,7 @@ export default function statuses(state = initialState, action) {
   switch(action.type) {
     case TIMELINE_UPDATE:
     case STATUS_FETCH_SUCCESS:
+    case NOTIFICATIONS_UPDATE:
       return normalizeStatus(state, action.status);
     case REBLOG_SUCCESS:
     case UNREBLOG_SUCCESS:
@@ -64,6 +74,8 @@ export default function statuses(state = initialState, action) {
     case ACCOUNT_TIMELINE_FETCH_SUCCESS:
     case ACCOUNT_TIMELINE_EXPAND_SUCCESS:
     case CONTEXT_FETCH_SUCCESS:
+    case NOTIFICATIONS_REFRESH_SUCCESS:
+    case NOTIFICATIONS_EXPAND_SUCCESS:
       return normalizeStatuses(state, action.statuses);
     case TIMELINE_DELETE:
       return deleteStatus(state, action.id, action.references);

app/assets/javascripts/components/selectors/index.jsx

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect'
-import Immutable          from 'immutable';
+import Immutable from 'immutable';
 
 const getStatuses = state => state.get('statuses');
 const getAccounts = state => state.get('accounts');
@@ -50,9 +50,9 @@ const assembleStatus = (id, statuses, accounts) => {
   return status.set('reblog', reblog).set('account', accounts.get(status.get('account')));
 };
 
-const getNotificationsBase = state => state.get('notifications');
+const getAlertsBase = state => state.get('alerts');
 
-export const getNotifications = createSelector([getNotificationsBase], (base) => {
+export const getAlerts = createSelector([getAlertsBase], (base) => {
   let arr = [];
 
   base.forEach(item => {
@@ -66,3 +66,12 @@ export const getNotifications = createSelector([getNotificationsBase], (base) =>
 
   return arr;
 });
+
+export const makeGetNotification = () => {
+  return createSelector([
+    (_, base)             => base,
+    (state, _, accountId) => state.getIn(['accounts', accountId])
+  ], (base, account) => {
+    return base.set('account', account);
+  });
+};

app/assets/stylesheets/components.scss

@@ -219,6 +219,30 @@
   }
 }
 
+.muted {
+  .status__content p, .status__content a {
+    color: #616b86;
+  }
+
+  .status__display-name strong {
+    color: #616b86;
+  }
+
+  .status__avatar {
+    opacity: 0.5;
+  }
+}
+
+.notification__display-name {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    color: #fff;
+    text-decoration: underline;
+  }
+}
+
 .status__relative-time, .detailed-status__datetime {
   &:hover {
     text-decoration: underline;

config/application.rb

@@ -40,7 +40,6 @@ module Mastodon
     config.middleware.use Rack::Attack
     config.middleware.use Rack::Deflater
 
-    config.browserify_rails.source_map_environments += %w(development production)
     config.browserify_rails.commandline_options = '--transform [ babelify --presets [ es2015 react ] ] --extension=".jsx"'
 
     config.to_prepare do

db/migrate/20161119211120_create_notifications.rb

@@ -9,5 +9,6 @@ class CreateNotifications < ActiveRecord::Migration[5.0]
     end
 
     add_index :notifications, :account_id
+    add_index :notifications, [:account_id, :activity_id, :activity_type], unique: true, name: 'account_activity'
   end
 end

db/schema.rb

@@ -102,6 +102,7 @@ ActiveRecord::Schema.define(version: 20161119211120) do
     t.string   "activity_type"
     t.datetime "created_at",    null: false
     t.datetime "updated_at",    null: false
+    t.index ["account_id", "activity_id", "activity_type"], name: "account_activity", unique: true, using: :btree
     t.index ["account_id"], name: "index_notifications_on_account_id", using: :btree
   end