Adding german localization

app/assets/javascripts/components/components/status_action_bar.jsx

@@ -2,7 +2,15 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import IconButton from './icon_button';
 import DropdownMenu from './dropdown_menu';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  delete: { id: 'status.delete', defaultMessage: 'Delete' },
+  mention: { id: 'status.mention', defaultMessage: 'Mention' },
+  reply: { id: 'status.reply', defaultMessage: 'Reply' },
+  reblog: { id: 'status.reblog', defaultMessage: 'Reblog' },
+  favourite: { id: 'status.favourite', defaultMessage: 'Favourite' }
+});
 
 const StatusActionBar = React.createClass({
   propTypes: {
@@ -41,16 +49,16 @@ const StatusActionBar = React.createClass({
     let menu = [];
 
     if (status.getIn(['account', 'id']) === me) {
-      menu.push({ text: intl.formatMessage({ id: 'status.delete', defaultMessage: 'Delete' }), action: this.handleDeleteClick });
+      menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
     } else {
-      menu.push({ text: intl.formatMessage({ id: 'status.mention', defaultMessage: 'Mention' }), action: this.handleMentionClick });
+      menu.push({ text: intl.formatMessage(messages.mention), action: this.handleMentionClick });
     }
 
     return (
       <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-        <div style={{ float: 'left', marginRight: '18px'}}><IconButton title={intl.formatMessage({ id: 'status.reply', defaultMessage: 'Reply' })} icon='reply' onClick={this.handleReplyClick} /></div>
-        <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('reblogged')} title={intl.formatMessage({ id: 'status.reblog', defaultMessage: 'Reblog' })} icon='retweet' onClick={this.handleReblogClick} /></div>
-        <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title={intl.formatMessage({ id: 'status.favourite', defaultMessage: 'Favourite' })} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
+        <div style={{ float: 'left', marginRight: '18px'}}><IconButton title={intl.formatMessage(messages.reply)} icon='reply' onClick={this.handleReplyClick} /></div>
+        <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon='retweet' onClick={this.handleReblogClick} /></div>
+        <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
 
         <div style={{ width: '18px', height: '18px', float: 'left' }}>
           <DropdownMenu items={menu} icon='ellipsis-h' size={18} />

app/assets/javascripts/components/components/video_player.jsx

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import IconButton from './icon_button';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' }
+});
 
 const videoStyle = {
   position: 'relative',
@@ -64,7 +68,7 @@ const VideoPlayer = React.createClass({
 
     return (
       <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${width}px`, height: `${height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}>
-        <div style={muteStyle}><IconButton title={intl.formatMessage({ id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' })} icon={this.state.muted ? 'volume-up' : 'volume-off'} onClick={this.handleClick} /></div>
+        <div style={muteStyle}><IconButton title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-up' : 'volume-off'} onClick={this.handleClick} /></div>
         <video src={media.get('url')} autoPlay='true' loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} />
       </div>
     );

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

@@ -34,6 +34,8 @@ import Favourites from '../features/favourites';
 import HashtagTimeline from '../features/hashtag_timeline';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import en from 'react-intl/locale-data/en';
+import de from 'react-intl/locale-data/de';
+import getMessagesForLocale from '../locales';
 
 const store = configureStore();
 
@@ -41,7 +43,7 @@ const browserHistory = useRouterHistory(createBrowserHistory)({
   basename: '/web'
 });
 
-addLocaleData([...en]);
+addLocaleData([...en, ...de]);
 
 const Mastodon = React.createClass({
 
@@ -89,7 +91,7 @@ const Mastodon = React.createClass({
     const { locale } = this.props;
 
     return (
-      <IntlProvider locale={locale}>
+      <IntlProvider locale={locale} messages={getMessagesForLocale(locale)}>
         <Provider store={store}>
           <Router history={browserHistory} render={applyRouterMiddleware(useScroll())}>
             <Route path='/' component={UI}>

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

@@ -2,7 +2,17 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenu from '../../../components/dropdown_menu';
 import { Link } from 'react-router';
-import { injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
+
+const messages = defineMessages({
+  mention: { id: 'account.mention', defaultMessage: 'Mention' },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+  unblock: { id: 'account.unblock', defaultMessage: 'Unblock' },
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  block: { id: 'account.block', defaultMessage: 'Block' },
+  follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  block: { id: 'account.block', defaultMessage: 'Block' }
+});
 
 const outerStyle = {
   borderTop: '1px solid #363c4b',
@@ -41,18 +51,18 @@ const ActionBar = React.createClass({
 
     let menu = [];
 
-    menu.push({ text: intl.formatMessage({ id: 'account.mention', defaultMessage: 'Mention' }), action: this.props.onMention });
+    menu.push({ text: intl.formatMessage(messages.mention), action: this.props.onMention });
 
     if (account.get('id') === me) {
-      menu.push({ text: intl.formatMessage({ id: 'account.edit_profile', defaultMessage: 'Edit profile' }), href: '/settings/profile' });
+      menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
     } else if (account.getIn(['relationship', 'blocking'])) {
-      menu.push({ text: intl.formatMessage({ id: 'account.unblock', defaultMessage: 'Unblock' }), action: this.props.onBlock });
+      menu.push({ text: intl.formatMessage(messages.unblock), action: this.props.onBlock });
     } else if (account.getIn(['relationship', 'following'])) {
-      menu.push({ text: intl.formatMessage({ id: 'account.unfollow', defaultMessage: 'Unfollow' }), action: this.props.onFollow });
-      menu.push({ text: intl.formatMessage({ id: 'account.block', defaultMessage: 'Block' }), action: this.props.onBlock });
+      menu.push({ text: intl.formatMessage(messages.unfollow), action: this.props.onFollow });
+      menu.push({ text: intl.formatMessage(messages.block), action: this.props.onBlock });
     } else {
-      menu.push({ text: intl.formatMessage({ id: 'account.follow', defaultMessage: 'Follow' }), action: this.props.onFollow });
-      menu.push({ text: intl.formatMessage({ id: 'account.block', defaultMessage: 'Block' }), action: this.props.onBlock });
+      menu.push({ text: intl.formatMessage(messages.follow), action: this.props.onFollow });
+      menu.push({ text: intl.formatMessage(messages.block), action: this.props.onBlock });
     }
 
     return (

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

@@ -2,6 +2,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import emojify from '../../../emoji';
 import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser';
+import { FormattedMessage } from 'react-intl';
 
 const Header = React.createClass({
 
@@ -23,7 +24,7 @@ const Header = React.createClass({
     }
 
     if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
-      info = <span style={{ position: 'absolute', top: '10px', right: '10px', opacity: '0.7', display: 'inline-block', verticalAlign: 'top', background: 'rgba(0, 0, 0, 0.4)', color: '#fff', textTransform: 'uppercase', fontSize: '11px', fontWeight: '500', padding: '4px', borderRadius: '4px' }}>Follows you</span>
+      info = <span style={{ position: 'absolute', top: '10px', right: '10px', opacity: '0.7', display: 'inline-block', verticalAlign: 'top', background: 'rgba(0, 0, 0, 0.4)', color: '#fff', textTransform: 'uppercase', fontSize: '11px', fontWeight: '500', padding: '4px', borderRadius: '4px' }}><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>
     }
 
     const content         = { __html: emojify(account.get('note')) };

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

@@ -8,7 +8,12 @@ import Autosuggest from 'react-autosuggest';
 import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container';
 import { debounce } from 'react-decoration';
 import UploadButtonContainer from '../containers/upload_button_container';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
+  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' }
+});
 
 const getTokenForSuggestions = (str, caretPosition) => {
   let word;
@@ -53,7 +58,7 @@ const textareaStyle = {
 };
 
 const renderInputComponent = inputProps => (
-  <textarea {...inputProps} placeholder='What is on your mind?'  className='compose-form__textarea' style={textareaStyle} />
+  <textarea {...inputProps} className='compose-form__textarea' style={textareaStyle} />
 );
 
 const ComposeForm = React.createClass({
@@ -144,7 +149,7 @@ const ComposeForm = React.createClass({
     }
 
     const inputProps = {
-      placeholder: intl.formatMessage({ id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }),
+      placeholder: intl.formatMessage(messages.placeholder),
       value: this.props.text,
       onKeyUp: this.handleKeyUp,
       onChange: this.handleChange,
@@ -169,7 +174,7 @@ const ComposeForm = React.createClass({
         />
 
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-          <div style={{ float: 'right' }}><Button text={intl.formatMessage({ id: 'compose_form.publish', defaultMessage: 'Publish' })} onClick={this.handleSubmit} disabled={disabled} /></div>
+          <div style={{ float: 'right' }}><Button text={intl.formatMessage(messages.publish)} onClick={this.handleSubmit} disabled={disabled} /></div>
           <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.text} /></div>
           <UploadButtonContainer style={{ paddingTop: '4px' }} />
         </div>

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

@@ -4,7 +4,11 @@ import Avatar from '../../../components/avatar';
 import IconButton from '../../../components/icon_button';
 import DisplayName from '../../../components/display_name';
 import emojify from '../../../emoji';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' }
+});
 
 const ReplyIndicator = React.createClass({
 
@@ -37,7 +41,7 @@ const ReplyIndicator = React.createClass({
     return (
       <div style={{ background: '#9baec8', padding: '10px' }}>
         <div style={{ overflow: 'hidden', marginBottom: '5px' }}>
-          <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title={intl.formatMessage({ id: 'reply_indicator.cancel', defaultMessage: 'Cancel' })} icon='times' onClick={this.handleClick} /></div>
+          <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} /></div>
 
           <a href={this.props.status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
             <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div>

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

@@ -3,7 +3,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import Autosuggest from 'react-autosuggest';
 import AutosuggestAccountContainer from '../containers/autosuggest_account_container';
 import { debounce } from 'react-decoration';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+const messages = defineMessages({
+  placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }
+});
 
 const getSuggestionValue = suggestion => suggestion.value;
 
@@ -16,7 +20,7 @@ const renderSuggestion = suggestion => {
 };
 
 const renderSectionTitle = section => (
-  <strong>{section.title}</strong>
+  <strong><FormattedMessage id={`search.${section.title}`} defaultMessage={section.title} /></strong>
 );
 
 const getSectionSuggestions = section => section.items;
@@ -95,7 +99,7 @@ const Search = React.createClass({
 
   render () {
     const inputProps = {
-      placeholder: this.props.intl.formatMessage({ id: 'search.placeholder', defaultMessage: 'Search' }),
+      placeholder: this.props.intl.formatMessage(messages.placeholder),
       value: this.props.value,
       onChange: this.onChange,
       style: inputStyle

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

 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import IconButton from '../../../components/icon_button';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  upload: { id: 'upload_button.label', defaultMessage: 'Add media' }
+});
 
 const UploadButton = React.createClass({
 
@@ -31,7 +35,7 @@ const UploadButton = React.createClass({
 
     return (
       <div style={this.props.style}>
-        <IconButton icon='photo' title={intl.formatMessage({ id: 'upload_button.label', defaultMessage: 'Add media' })} disabled={this.props.disabled} onClick={this.handleClick} size={24} />
+        <IconButton icon='photo' title={intl.formatMessage(messages.upload)} disabled={this.props.disabled} onClick={this.handleClick} size={24} />
         <input ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={this.props.disabled} style={{ display: 'none' }} />
       </div>
     );

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

 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import IconButton from '../../../components/icon_button';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  undo: { id: 'upload_form.undo', defaultMessage: 'Undo' }
+});
 
 const UploadForm = React.createClass({
 
@@ -19,7 +23,7 @@ const UploadForm = React.createClass({
     const uploads = this.props.media.map(attachment => (
       <div key={attachment.get('id')} style={{ borderRadius: '4px', marginBottom: '10px' }} className='transparent-background'>
         <div style={{ width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}>
-          <IconButton icon='times' title={intl.formatMessage({ id: 'upload_form.undo', defaultMessage: 'Undo' })} size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} />
+          <IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} />
         </div>
       </div>
     ));

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

@@ -4,7 +4,11 @@ import Avatar from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import { Link } from 'react-router';
 import IconButton from '../../../components/icon_button';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  follow: { id: 'account.follow', defaultMessage: 'Follow' }
+});
 
 const outerStyle = {
   padding: '10px',
@@ -69,7 +73,7 @@ const Account = React.createClass({
 
       buttons = (
         <div style={buttonsStyle}>
-          <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage({ id: 'account.follow', defaultMessage: 'Follow' })} onClick={this.handleFollow} active={following} />
+          <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} active={following} />
         </div>
       );
     }

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

@@ -3,7 +3,11 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import StatusListContainer from '../ui/containers/status_list_container';
 import Column from '../ui/components/column';
 import { refreshTimeline } from '../../actions/timelines';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  title: { id: 'column.home', defaultMessage: 'Home' }
+});
 
 const HomeTimeline = React.createClass({
 
@@ -21,7 +25,7 @@ const HomeTimeline = React.createClass({
     const { intl } = this.props;
 
     return (
-      <Column icon='home' heading={intl.formatMessage({ id: 'column.home', defaultMessage: 'Home' })}>
+      <Column icon='home' heading={intl.formatMessage(messages.title)}>
         <StatusListContainer {...this.props} type='home' />
       </Column>
     );

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

@@ -3,7 +3,11 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import StatusListContainer from '../ui/containers/status_list_container';
 import Column from '../ui/components/column';
 import { refreshTimeline } from '../../actions/timelines';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  title: { id: 'column.mentions', defaultMessage: 'Mentions' }
+});
 
 const MentionsTimeline = React.createClass({
 
@@ -21,7 +25,7 @@ const MentionsTimeline = React.createClass({
     const { intl } = this.props;
 
     return (
-      <Column icon='at' heading={intl.formatMessage({ id: 'column.mentions', defaultMessage: 'Mentions' })}>
+      <Column icon='at' heading={intl.formatMessage(messages.title)}>
         <StatusListContainer {...this.props} type='mentions' />
       </Column>
     );

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

@@ -7,7 +7,11 @@ import {
   updateTimeline,
   deleteFromTimelines
 } from '../../actions/timelines';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  title: { id: 'column.public', defaultMessage: 'Public' }
+});
 
 const PublicTimeline = React.createClass({
 
@@ -48,7 +52,7 @@ const PublicTimeline = React.createClass({
     const { intl } = this.props;
 
     return (
-      <Column icon='globe' heading={intl.formatMessage({ id: 'column.public', defaultMessage: 'Public' })}>
+      <Column icon='globe' heading={intl.formatMessage(messages.title)}>
         <StatusListContainer type='public' />
       </Column>
     );

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

@@ -2,7 +2,15 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import IconButton from '../../../components/icon_button';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenu from '../../../components/dropdown_menu';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  delete: { id: 'status.delete', defaultMessage: 'Delete' },
+  mention: { id: 'status.mention', defaultMessage: 'Mention' },
+  reply: { id: 'status.reply', defaultMessage: 'Reply' },
+  reblog: { id: 'status.reblog', defaultMessage: 'Reblog' },
+  favourite: { id: 'status.favourite', defaultMessage: 'Favourite' }
+});
 
 const ActionBar = React.createClass({
 
@@ -44,16 +52,16 @@ const ActionBar = React.createClass({
     let menu = [];
 
     if (me === status.getIn(['account', 'id'])) {
-      menu.push({ text: intl.formatMessage({ id: 'status.delete', defaultMessage: 'Delete' }), action: this.handleDeleteClick });
+      menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
     } else {
-      menu.push({ text: intl.formatMessage({ id: 'status.mention', defaultMessage: 'Mention' }), action: this.handleMentionClick });
+      menu.push({ text: intl.formatMessage(messages.mention), action: this.handleMentionClick });
     }
 
     return (
       <div style={{ background: '#2f3441', display: 'flex', flexDirection: 'row', borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px 0' }}>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title={intl.formatMessage({ id: 'status.reply', defaultMessage: 'Reply' })} icon='reply' onClick={this.handleReplyClick} /></div>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('reblogged')} title={intl.formatMessage({ id: 'status.reblog', defaultMessage: 'Reblog' })} icon='retweet' onClick={this.handleReblogClick} /></div>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('favourited')} title={intl.formatMessage({ id: 'status.favourite', defaultMessage: 'Favourite' })} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
+        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title={intl.formatMessage(messages.reply)} icon='reply' onClick={this.handleReplyClick} /></div>
+        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon='retweet' onClick={this.handleReblogClick} /></div>
+        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
         <div style={{ flex: '1 1 auto', textAlign: 'center' }}><DropdownMenu size={18} icon='ellipsis-h' items={menu} /></div>
       </div>
     );

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

+const en = {
+  "column_back_button.label": "Zurück",
+  "lightbox.close": "Schließen",
+  "loading_indicator.label": "Lade...",
+  "status.mention": "Erwähnen",
+  "status.delete": "Löschen",
+  "status.reply": "Antworten",
+  "status.reblog": "Teilen",
+  "status.favourite": "Favorisieren",
+  "status.reblogged_by": "{name} teilte",
+  "video_player.toggle_sound": "Ton umschalten",
+  "account.mention": "Erwähnen",
+  "account.edit_profile": "Profil bearbeiten",
+  "account.unblock": "Entblocken",
+  "account.unfollow": "Entfolgen",
+  "account.block": "Blocken",
+  "account.follow": "Folgen",
+  "account.posts": "Beiträge",
+  "account.follows": "Folgt",
+  "account.followers": "Folger",
+  "account.follows_you": "Folgt dir",
+  "getting_started.heading": "Erste Schritte",
+  "getting_started.about_addressing": "Du kannst Leuten folgen, falls du ihren Nutzernamen und ihre Domain kennst, in dem du eine e-mail-artige Addresse in das Suchfeld oben an der Seite eingibst.",
+  "getting_started.about_shortcuts": "Falls der Zielnutzer an derselben Domain ist wie du, funktioniert der Nutzername auch alleine. Das gilt auch für Erwähnungen in Beiträgen.",
+  "getting_started.about_developer": "Der Entwickler des Projekts kann unter Gargron@mastodon.social gefunden werden",
+  "column.home": "Home",
+  "column.mentions": "Erwähnungen",
+  "column.public": "Gesamtes Bekanntes Netz",
+  "tabs_bar.compose": "Schreiben",
+  "tabs_bar.home": "Home",
+  "tabs_bar.mentions": "Erwähnungen",
+  "tabs_bar.public": "Gesamtes Netz",
+  "compose_form.placeholder": "Worüber möchstest du schreiben?",
+  "compose_form.publish": "Veröffentlichen",
+  "navigation_bar.settings": "Einstellungen",
+  "navigation_bar.public_timeline": "Öffentlich",
+  "navigation_bar.logout": "Abmelden",
+  "reply_indicator.cancel": "Abbrechen",
+  "search.placeholder": "Suche",
+  "search.account": "Konto",
+  "search.hashtag": "Hashtag",
+  "suggestions_box.who_to_follow": "Wem folgen",
+  "suggestions_box.refresh": "Aktualisieren",
+  "upload_button.label": "Media-Datei anfügen",
+  "upload_form.undo": "Entfernen"
+};
+
+export default en;

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

+const en = {
+  "column_back_button.label": "Back",
+  "lightbox.close": "Close",
+  "loading_indicator.label": "Loading...",
+  "status.mention": "Mention",
+  "status.delete": "Delete",
+  "status.reply": "Reply",
+  "status.reblog": "Reblog",
+  "status.favourite": "Favourite",
+  "status.reblogged_by": "{name} reblogged",
+  "video_player.toggle_sound": "Toggle sound",
+  "account.mention": "Mention",
+  "account.edit_profile": "Edit profile",
+  "account.unblock": "Unblock",
+  "account.unfollow": "Unfollow",
+  "account.block": "Block",
+  "account.follow": "Follow",
+  "account.block": "Block",
+  "account.posts": "Posts",
+  "account.follows": "Follows",
+  "account.followers": "Followers",
+  "account.follows_you": "Follows you",
+  "getting_started.heading": "Getting started",
+  "getting_started.about_addressing": "You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form at the top of the sidebar.",
+  "getting_started.about_shortcuts": "If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.",
+  "getting_started.about_developer": "The developer of this project can be followed as Gargron@mastodon.social",
+  "column.home": "Home",
+  "column.mentions": "Mentions",
+  "column.public": "Public",
+  "tabs_bar.compose": "Compose",
+  "tabs_bar.home": "Home",
+  "tabs_bar.mentions": "Mentions",
+  "tabs_bar.public": "Public",
+  "compose_form.placeholder": "What is on your mind?",
+  "compose_form.publish": "Publish",
+  "navigation_bar.settings": "Settings",
+  "navigation_bar.public_timeline": "Public timeline",
+  "navigation_bar.logout": "Logout",
+  "reply_indicator.cancel": "Cancel",
+  "search.placeholder": "Search",
+  "search.account": "Account",
+  "search.hashtag": "Hashtag",
+  "suggestions_box.who_to_follow": "Who to follow",
+  "suggestions_box.refresh": "Refresh",
+  "upload_button.label": "Add media",
+  "upload_form.undo": "Undo"
+};
+
+export default en;

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

+import en from './en';
+import de from './de';
+
+const locales = {
+  en,
+  de
+};
+
+export default function getMessagesForLocale (locale) {
+  return locales[locale];
+};

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

@@ -14,7 +14,7 @@ const initialState = Immutable.Map({
 const normalizeSuggestions = (state, value, accounts) => {
   let newSuggestions = [
     {
-      title: 'Account',
+      title: 'account',
       items: accounts.map(item => ({
         type: 'account',
         id: item.id,
@@ -25,7 +25,7 @@ const normalizeSuggestions = (state, value, accounts) => {
 
   if (value.indexOf('@') === -1) {
     newSuggestions.push({
-      title: 'Hashtag',
+      title: 'hashtag',
       items: [
         {
           type: 'hashtag',

config/application.rb

@@ -20,7 +20,7 @@ module Mastodon
 
     # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
     # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
-    config.i18n.available_locales = [:en]
+    config.i18n.available_locales = [:en, :de]
     config.i18n.default_locale    = :en
 
     # config.paths.add File.join('app', 'api'), glob: File.join('**', '*.rb')