⚡ cut components for messaging

Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>

AUTHORS.md

@@ -3,6 +3,7 @@ Authors
 
 Mastodon is available on [GitHub](https://github.com/tootsuite/mastodon)
 and provided thanks to the work of the following contributors:
+* [Tykayn](https://framagit.org/tykayn) for the Bliss version
 
 * [Gargron](https://github.com/Gargron)
 * [ThibG](https://github.com/ThibG)

app/javascript/mastodon/features/ui/components/link_footer.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 import { invitesEnabled, repository, source_url, version } from 'mastodon/initial_state';
 import { logOut } from 'mastodon/utils/log_out';
 import { openModal } from 'mastodon/actions/modal';
@@ -104,17 +104,32 @@ class LinkFooter extends React.PureComponent {
   }
 
   render() {
+    const HashTagNavlinks = ['Mastoart', 'OpenStreetMaps', 'Ironèmes', 'vélo'];
     const { withHotkeys } = this.props;
     var snowClasses = this.props.enableChristmasSnow ? 'snow-button active' : 'snow-button ';
+    const navToTags = HashTagNavlinks.map(element => {
+      return (
+        <li className='tag-element btn-small btn'>
+
+          <NavLink
+            exact
+            activeClassName='active'
+            to={'/timelines/tag/' + element}
+            title='Mastoart'
+          >
+            #{element}
+          </NavLink >
+        </li >
+      );
+    });
 
     return (
 
-      <div className='getting-started__footer hide-on-smaller-screens'>
+      <div className='links-started__footer desktop-only'>
 
         <div className='extras'>
 
-          // TODO
+          <button className='mod-theme btn btn-block btn-small btn-primary pull-left'>
-          <button className='mod-theme btn btn-block'>
             {this.themeIsDark ? (
               <span
                 onClick={this.setState('theme', 'light')}
@@ -150,13 +165,26 @@ class LinkFooter extends React.PureComponent {
             </div >
           )}
           {isStaff && (
+            <span >
 
-            <a href='/admin/tags?pending_review=1'>
+              <a
+                className='btn-warning'
+                href='/admin/tags?pending_review=1'
+              >
                 <i className='fa fa-fire' />
-              Trending hashtags</a >
+              Trending hashtags
-
+              </a >
+              <a
+                className='btn-warning'
+                href='/admin/accounts'
+              >
+                <i className='fa fa-users' />
+                Comptes
+              </a >
+            </span >
           )}
           <br />
+
           <div className='external-utilities'>
             <a href='https://mastodon.cipherbliss.com/@tykayn'>
               <i className='fa fa-paper-plane' />
@@ -170,10 +198,11 @@ class LinkFooter extends React.PureComponent {
             <a href='https://framapad.org/'> <i className='fa fa-file-text' /> Pad</a >
             <a href='https://framagit.org/tykayn/mastodon'> <i className='fa fa-gitlab' /> Source</a >
             <hr />
-            <a href='/web/timelines/tag/vélo'> <i className='fa fa-bicycle' /> #vélo</a >
+            <div className='suggested-tags'>
-            <a href='/web/timelines/tag/openstreetmap'> <i className='fa fa-map-o' /> #OpenStreetMap</a >
+              <ul >
-            <a href='/web/timelines/tag/mastoart'> <i className='fa fa-paint-brush' /> #Mastoart</a >
+                {navToTags}
-            <a href='/web/timelines/tag/ironèmes'> <i className='fa fa-file-text-o' /> #ironèmes</a >
+              </ul >
+            </div >
           </div >
         </div >
         <ul >

app/javascript/mastodon/features/ui/components/messaging/Contact.js

@@ -1,6 +1,7 @@
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import React from 'react';
+import Permalink from '../../../../components/permalink';
 
 export default class Contact extends ImmutablePureComponent {
 
@@ -21,6 +22,7 @@ export default class Contact extends ImmutablePureComponent {
   };
 
   render() {
+    const account = this.props.account;
     return (
       <div
         className='contact media'
@@ -28,6 +30,14 @@ export default class Contact extends ImmutablePureComponent {
       >
         <div className='name media-left'>
 
+          <Permalink
+            key={account.id}
+            className='account__display-name'
+            title={account.acct}
+            href={account.url}
+            to={`/accounts/${account.id}`}
+          >
+
             <div className='avatar image is-32x32'>
               <img
                 className='is-rounded'
@@ -35,7 +45,7 @@ export default class Contact extends ImmutablePureComponent {
                 alt='avatar'
               />
             </div >
-
+          </Permalink >
         </div >
         <div className='media-content'>
           <div className='username'>

app/javascript/mastodon/features/ui/components/messaging/contacts-list.js

@@ -81,21 +81,18 @@ export default class ContactsList extends ImmutablePureComponent {
       });
     }
 
-    const classList = 'btn btn-primary toggle-list ' + (this.state.showList ? 'active' : 'inactive');
+    const showListClass = (this.state.showList ? 'active' : 'inactive');
+    const classListContainer = 'messaging-box ' + showListClass;
+    const classList = 'btn btn-primary toggle-list ' + showListClass;
     return (
       <div className='messaging-container'>
-        <div className='messaging-box'>
+        <div className={classListContainer}>
           <div className='title column-header'>
             <i
               role='img'
               className='fa fa-envelope column-header__icon fa-fw'
             />
-            Messaging box
+            {this.state.following_count} contacts
-          </div >
-          <div className='user-list'>
-            <h2 className='title'>
-              la liste de {this.state.following_count} contacts
-
             <button
               className={classList}
               onClick={this.toggleList}
@@ -107,10 +104,11 @@ export default class ContactsList extends ImmutablePureComponent {
                 <i className='fa fa-caret-left' />
               )}
             </button >
-            </h2 >
+          </div >
+          <div className='user-list'>
+
             {this.state.showList && (
               <div className='contact-list-container'>
-                <h3 >show list</h3 >
                 <ul className='contact-list'>
                   {renderedList}
                 </ul >

app/javascript/mastodon/features/ui/components/messaging/conversationStack.js

@@ -1,10 +1,11 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
+import { mockContactList } from './mockContactList';
 
-const following = ['bidule', 'chose', 'truc'];
+const following = mockContactList;
 
-export default class Conversation extends React.Component {
+export default class ConversationStack extends React.Component {
 
   static propTypes = {
     following: PropTypes.array,
@@ -15,8 +16,8 @@ export default class Conversation extends React.Component {
     following: following,
   };
 
-  openConversationWith(name) {
+  openConversationWith(account) {
-    console.log('openConversationWith name', name);
+    console.log('openConversationWith name', account.username);
   }
 
   render() {
@@ -28,7 +29,7 @@ export default class Conversation extends React.Component {
           className='username'
           onClick={this.openConversationWith(elem)}
         >
-          Machin {elem}
+          Machin {elem.username}
         </div >
         <div className='last-active'>3 min</div >
       </li >),

app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ContactsList from './contacts-list';
+import ConversationStack from './conversationStack';
 
 export default class InstantMessaging extends React.PureComponent {
 
@@ -25,39 +26,12 @@ export default class InstantMessaging extends React.PureComponent {
   //
   // };
 
-  // constructor() {
-  //   super();
-  //
-  //   this.props.conversations = [
-  //     {
-  //       withAccount: '@machin',
-  //       messages   : [],
-  //       opened     : true,
-  //     },
-  //     {
-  //       withAccount: '@chuck',
-  //       messages   : [],
-  //       opened     : false,
-  //     },
-  //   ];
-  //   this.props.following = [
-  //     { username: 'wulfila', handle: '@wulfila' },
-  //     { username: 'machin', handle: '@machin' },
-  //     { username: 'chuck norris', handle: '@chuck' },
-  //   ];
-  //
-  // }
-
   render() {
     return (
       <div >
-        <div className='debug'>
-
-          messagerie todo
 
         <ContactsList />
-        </div >
+        <ConversationStack />
-        {/*<Conversation />*/}
       </div >
     );
   }

app/javascript/mastodon/features/ui/index.js

@@ -10,51 +10,50 @@ import LoadingBarContainer from './containers/loading_bar_container';
 import ModalContainer from './containers/modal_container';
 import { isMobile } from '../../is_mobile';
 import { debounce } from 'lodash';
-import { uploadCompose, resetCompose } from '../../actions/compose';
+import { resetCompose, uploadCompose } from '../../actions/compose';
 import { expandHomeTimeline } from '../../actions/timelines';
 import { expandNotifications } from '../../actions/notifications';
 import { fetchFilters } from '../../actions/filters';
 import { clearHeight } from '../../actions/height_cache';
 import { focusApp, unfocusApp } from 'mastodon/actions/app';
 import { submitMarkers } from 'mastodon/actions/markers';
-import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
+import { WrappedRoute, WrappedSwitch } from './util/react_router_helpers';
 import UploadArea from './components/upload_area';
 import ColumnsAreaContainer from './containers/columns_area_container';
 import DocumentTitle from './components/document_title';
 import {
-  Compose,
-  Status,
-  GettingStarted,
-  KeyboardShortcuts,
-  PublicTimeline,
-  CommunityTimeline,
-  AccountTimeline,
   AccountGallery,
-  HomeTimeline,
+  AccountTimeline,
+  Blocks,
+  BookmarkedStatuses,
+  CommunityTimeline,
+  Compose,
+  Directory,
+  DirectTimeline,
+  DomainBlocks,
+  FavouritedStatuses,
+  Favourites,
   Followers,
   Following,
-  Reblogs,
-  Favourites,
-  DirectTimeline,
-  HashtagTimeline,
-  Notifications,
   FollowRequests,
   GenericNotFound,
-  FavouritedStatuses,
+  GettingStarted,
-  BookmarkedStatuses,
+  HashtagTimeline,
-  ListTimeline,
+  HomeTimeline,
-  Blocks,
+  KeyboardShortcuts,
-  DomainBlocks,
-  Mutes,
-  PinnedStatuses,
   Lists,
+  ListTimeline,
+  Mutes,
+  Notifications,
+  PinnedStatuses,
+  PublicTimeline,
+  Reblogs,
   Search,
-  Directory,
+  Status,
 } from './util/async-components';
-import { me, forceSingleColumn } from '../../initial_state';
+import { forceSingleColumn, me } from '../../initial_state';
 import { previewState as previewMediaState } from './components/media_modal';
 import { previewState as previewVideoState } from './components/video_modal';
-
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
 import '../../components/status';
@@ -114,6 +113,12 @@ class SwitchingColumnsArea extends React.PureComponent {
   state = {
     mobile: isMobile(window.innerWidth),
   };
+  handleLayoutChange = debounce(() => {
+    // The cached heights are no longer accurate, invalidate
+    this.props.onLayoutChange();
+  }, 500, {
+    trailing: true,
+  });
 
   componentWillMount() {
     window.addEventListener('resize', this.handleResize, { passive: true });
@@ -146,13 +151,6 @@ class SwitchingColumnsArea extends React.PureComponent {
     return location.state !== previewMediaState && location.state !== previewVideoState;
   }
 
-  handleLayoutChange = debounce(() => {
-    // The cached heights are no longer accurate, invalidate
-    this.props.onLayoutChange();
-  }, 500, {
-    trailing: true,
-  })
-
   handleResize = () => {
     const mobile = isMobile(window.innerWidth);
 
@@ -163,59 +161,217 @@ class SwitchingColumnsArea extends React.PureComponent {
     } else {
       this.handleLayoutChange();
     }
-  }
+  };
 
   setRef = c => {
     if (c) {
       this.node = c.getWrappedInstance();
     }
-  }
+  };
 
   render() {
     const { children } = this.props;
     const { mobile } = this.state;
     const singleColumn = forceSingleColumn || mobile;
-    const redirect = singleColumn ? <Redirect from='/' to='/timelines/home' exact /> : <Redirect from='/' to='/getting-started' exact />;
+    const redirect = singleColumn ? (<Redirect
+      from='/'
+      to='/timelines/home'
+      exact
+    />) : (<Redirect
+      from='/'
+      to='/getting-started'
+      exact
+    />);
 
     return (
-      <ColumnsAreaContainer ref={this.setRef} singleColumn={singleColumn}>
+      <ColumnsAreaContainer
+        ref={this.setRef}
+        singleColumn={singleColumn}
+      >
         <WrappedSwitch >
           {redirect}
-          <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
+          <WrappedRoute
-          <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
+            path='/tk-example'
-          <WrappedRoute path='/timelines/home' component={HomeTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            component={GettingStarted}
-          <WrappedRoute path='/timelines/public' exact component={PublicTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            content={children}
-          <WrappedRoute path='/timelines/public/local' exact component={CommunityTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+          />
-          <WrappedRoute path='/timelines/direct' component={DirectTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+          <WrappedRoute
-          <WrappedRoute path='/timelines/tag/:id' component={HashtagTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            path='/getting-started'
-          <WrappedRoute path='/timelines/list/:id' component={ListTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            component={GettingStarted}
+            content={children}
+          />
+          <WrappedRoute
+            path='/keyboard-shortcuts'
+            component={KeyboardShortcuts}
+            content={children}
+          />
+          <WrappedRoute
+            path='/timelines/home'
+            component={HomeTimeline}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/timelines/public'
+            exact
+            component={PublicTimeline}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/timelines/public/local'
+            exact
+            component={CommunityTimeline}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/timelines/direct'
+            component={DirectTimeline}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/timelines/tag/:id'
+            component={HashtagTimeline}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/timelines/list/:id'
+            component={ListTimeline}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
 
-          <WrappedRoute path='/notifications' component={Notifications} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+          <WrappedRoute
-          <WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            path='/notifications'
-          <WrappedRoute path='/bookmarks' component={BookmarkedStatuses} content={children} />
+            component={Notifications}
-          <WrappedRoute path='/pinned' component={PinnedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/favourites'
+            component={FavouritedStatuses}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/bookmarks'
+            component={BookmarkedStatuses}
+            content={children}
+          />
+          <WrappedRoute
+            path='/pinned'
+            component={PinnedStatuses}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
 
-          <WrappedRoute path='/search' component={Search} content={children} />
+          <WrappedRoute
-          <WrappedRoute path='/directory' component={Directory} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            path='/search'
+            component={Search}
+            content={children}
+          />
+          <WrappedRoute
+            path='/directory'
+            component={Directory}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
 
-          <WrappedRoute path='/statuses/new' component={Compose} content={children} />
+          <WrappedRoute
-          <WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            path='/statuses/new'
-          <WrappedRoute path='/statuses/:statusId/reblogs' component={Reblogs} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            component={Compose}
-          <WrappedRoute path='/statuses/:statusId/favourites' component={Favourites} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            content={children}
+          />
+          <WrappedRoute
+            path='/statuses/:statusId'
+            exact
+            component={Status}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/statuses/:statusId/reblogs'
+            component={Reblogs}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/statuses/:statusId/favourites'
+            component={Favourites}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
 
-          <WrappedRoute path='/accounts/:accountId' exact component={AccountTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+          <WrappedRoute
-          <WrappedRoute path='/accounts/:accountId/with_replies' component={AccountTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll, withReplies: true }} />
+            path='/accounts/:accountId'
-          <WrappedRoute path='/accounts/:accountId/followers' component={Followers} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            exact
-          <WrappedRoute path='/accounts/:accountId/following' component={Following} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            component={AccountTimeline}
-          <WrappedRoute path='/accounts/:accountId/media' component={AccountGallery} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/accounts/:accountId/with_replies'
+            component={AccountTimeline}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll, withReplies: true }}
+          />
+          <WrappedRoute
+            path='/accounts/:accountId/followers'
+            component={Followers}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/accounts/:accountId/following'
+            component={Following}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/accounts/:accountId/media'
+            component={AccountGallery}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
 
-          <WrappedRoute path='/follow_requests' component={FollowRequests} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+          <WrappedRoute
-          <WrappedRoute path='/blocks' component={Blocks} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            path='/follow_requests'
-          <WrappedRoute path='/domain_blocks' component={DomainBlocks} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            component={FollowRequests}
-          <WrappedRoute path='/mutes' component={Mutes} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            content={children}
-          <WrappedRoute path='/lists' component={Lists} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/blocks'
+            component={Blocks}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/domain_blocks'
+            component={DomainBlocks}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/mutes'
+            component={Mutes}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
+          <WrappedRoute
+            path='/lists'
+            component={Lists}
+            content={children}
+            componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }}
+          />
 
-          <WrappedRoute component={GenericNotFound} content={children} />
+          <WrappedRoute
+            component={GenericNotFound}
+            content={children}
+          />
         </WrappedSwitch >
       </ColumnsAreaContainer >
     );
@@ -259,20 +415,20 @@ class UI extends React.PureComponent {
       // but we set user-friendly message for other browsers, e.g. Edge.
       e.returnValue = intl.formatMessage(messages.beforeUnload);
     }
-  }
+  };
 
   handleWindowFocus = () => {
     this.props.dispatch(focusApp());
-  }
+  };
 
   handleWindowBlur = () => {
     this.props.dispatch(unfocusApp());
-  }
+  };
 
   handleLayoutChange = () => {
     // The cached heights are no longer accurate, invalidate
     this.props.dispatch(clearHeight());
-  }
+  };
 
   handleDragEnter = (e) => {
     e.preventDefault();
@@ -288,7 +444,7 @@ class UI extends React.PureComponent {
     if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files') && this.props.canUploadMore) {
       this.setState({ draggingOver: true });
     }
-  }
+  };
 
   handleDragOver = (e) => {
     if (this.dataTransferIsText(e.dataTransfer)) return false;
@@ -303,7 +459,7 @@ class UI extends React.PureComponent {
     }
 
     return false;
-  }
+  };
 
   handleDrop = (e) => {
     if (this.dataTransferIsText(e.dataTransfer)) return;
@@ -316,7 +472,7 @@ class UI extends React.PureComponent {
     if (e.dataTransfer && e.dataTransfer.files.length >= 1 && this.props.canUploadMore) {
       this.props.dispatch(uploadCompose(e.dataTransfer.files));
     }
-  }
+  };
 
   handleDragLeave = (e) => {
     e.preventDefault();
@@ -329,15 +485,15 @@ class UI extends React.PureComponent {
     }
 
     this.setState({ draggingOver: false });
-  }
+  };
 
   dataTransferIsText = (dataTransfer) => {
     return (dataTransfer && Array.from(dataTransfer.types).filter((type) => type === 'text/plain').length === 1);
-  }
+  };
 
   closeUploadModal = () => {
     this.setState({ draggingOver: false });
-  }
+  };
 
   handleServiceWorkerPostMessage = ({ data }) => {
     if (data.type === 'navigate') {
@@ -345,7 +501,7 @@ class UI extends React.PureComponent {
     } else {
       console.warn('Unknown message type:', data.type);
     }
-  }
+  };
 
   componentWillMount() {
     window.addEventListener('focus', this.handleWindowFocus, false);
@@ -392,7 +548,7 @@ class UI extends React.PureComponent {
 
   setRef = c => {
     this.node = c;
-  }
+  };
 
   handleHotkeyNew = e => {
     e.preventDefault();
@@ -402,7 +558,7 @@ class UI extends React.PureComponent {
     if (element) {
       element.focus();
     }
-  }
+  };
 
   handleHotkeySearch = e => {
     e.preventDefault();
@@ -412,12 +568,12 @@ class UI extends React.PureComponent {
     if (element) {
       element.focus();
     }
-  }
+  };
 
   handleHotkeyForceNew = e => {
     this.handleHotkeyNew(e);
     this.props.dispatch(resetCompose());
-  }
+  };
 
   handleHotkeyFocusColumn = e => {
     const index = (e.key * 1) + 1; // First child is drawer, skip that
@@ -435,7 +591,7 @@ class UI extends React.PureComponent {
         status.focus();
       }
     }
-  }
+  };
 
   handleHotkeyBack = () => {
     if (window.history && window.history.length === 1) {
@@ -443,11 +599,11 @@ class UI extends React.PureComponent {
     } else {
       this.context.router.history.goBack();
     }
-  }
+  };
 
   setHotkeysRef = c => {
     this.hotkeys = c;
-  }
+  };
 
   handleHotkeyToggleHelp = () => {
     if (this.props.location.pathname === '/keyboard-shortcuts') {
@@ -455,55 +611,55 @@ class UI extends React.PureComponent {
     } else {
       this.context.router.history.push('/keyboard-shortcuts');
     }
-  }
+  };
 
   handleHotkeyGoToHome = () => {
     this.context.router.history.push('/timelines/home');
-  }
+  };
 
   handleHotkeyGoToNotifications = () => {
     this.context.router.history.push('/notifications');
-  }
+  };
 
   handleHotkeyGoToLocal = () => {
     this.context.router.history.push('/timelines/public/local');
-  }
+  };
 
   handleHotkeyGoToFederated = () => {
     this.context.router.history.push('/timelines/public');
-  }
+  };
 
   handleHotkeyGoToDirect = () => {
     this.context.router.history.push('/timelines/direct');
-  }
+  };
 
   handleHotkeyGoToStart = () => {
     this.context.router.history.push('/getting-started');
-  }
+  };
 
   handleHotkeyGoToFavourites = () => {
     this.context.router.history.push('/favourites');
-  }
+  };
 
   handleHotkeyGoToPinned = () => {
     this.context.router.history.push('/pinned');
-  }
+  };
 
   handleHotkeyGoToProfile = () => {
     this.context.router.history.push(`/accounts/${me}`);
-  }
+  };
 
   handleHotkeyGoToBlocked = () => {
     this.context.router.history.push('/blocks');
-  }
+  };
 
   handleHotkeyGoToMuted = () => {
     this.context.router.history.push('/mutes');
-  }
+  };
 
   handleHotkeyGoToRequests = () => {
     this.context.router.history.push('/follow_requests');
-  }
+  };
 
   render() {
     const { draggingOver } = this.state;
@@ -531,16 +687,32 @@ class UI extends React.PureComponent {
     };
 
     return (
-      <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
+      <HotKeys
-        <div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
+        keyMap={keyMap}
-          <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
+        handlers={handlers}
+        ref={this.setHotkeysRef}
+        attach={window}
+        focused
+      >
+        <div
+          className={classNames('ui', { 'is-composing': isComposing })}
+          ref={this.setRef}
+          style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}
+        >
+          <SwitchingColumnsArea
+            location={location}
+            onLayoutChange={this.handleLayoutChange}
+          >
             {children}
           </SwitchingColumnsArea >
 
           <NotificationsContainer />
           <LoadingBarContainer className='loading-bar' />
           <ModalContainer />
-          <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
+          <UploadArea
+            active={draggingOver}
+            onClose={this.closeUploadModal}
+          />
           <DocumentTitle />
         </div >
       </HotKeys >

app/javascript/mastodon/features/ui/util/react_router_helpers.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Switch, Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import ColumnLoading from '../components/column_loading';
 import BundleColumnError from '../components/bundle_column_error';
@@ -46,19 +46,26 @@ export class WrappedRoute extends React.Component {
     const { component, content, multiColumn, componentParams } = this.props;
 
     return (
-      <BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
+      <BundleContainer
-        {Component => <Component params={match.params} multiColumn={multiColumn} {...componentParams}>{content}</Component>}
+        fetchComponent={component}
+        loading={this.renderLoading}
+        error={this.renderError}
+      >
+        {Component => (<Component
+          params={match.params}
+          multiColumn={multiColumn} {...componentParams}
+        >{content}</Component >)}
       </BundleContainer >
     );
-  }
+  };
 
   renderLoading = () => {
     return <ColumnLoading />;
-  }
+  };
 
   renderError = (props) => {
     return <BundleColumnError {...props} />;
-  }
+  };
 
   render() {
     const { component: Component, content, ...rest } = this.props;

app/javascript/mastodon/reducers/accounts.js

@@ -4,7 +4,6 @@ import { fromJS, Map as ImmutableMap } from 'immutable';
 const initialState = ImmutableMap();
 
 const normalizeAccount = (state, account) => {
-  console.log('account', account);
   account = { ...account };
 
   delete account.followers_count;

app/javascript/styles/bliss.scss

@@ -1,3 +1,6 @@
+@import '~bulma/bulma';
+@import '~bulma/sass/utilities/mixins';
+
 @import 'bliss/variables';
 @import 'bliss/mixins';
 @import 'bliss/variables';

app/javascript/styles/bliss/components.scss

@@ -2265,9 +2265,7 @@ a.account__display-name {
   .columns-area__panels__pane--compositional {
     display: none;
   }
-  .hide-on-smaller-screens{
+
-    display: none;
-  }
 }
 
 @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {

app/javascript/styles/bliss/footer.scss

@@ -136,7 +136,7 @@
   }
 }
 
-.getting-started__footer {
+.links-started__footer {
   display: block;
   position: fixed;
   bottom: 0;
@@ -144,6 +144,11 @@
   width: 32vw;
   z-index: 10;
   text-align: right;
+  color: $ui-primary-color;
+
+  hr {
+    border-color: $ui-primary-color;
+  }
 
   .fa {
     margin-right: 1ch;
@@ -164,5 +169,6 @@
 
   a {
     margin-left: 2ch;
+    color: $ui-primary-color;
   }
 }

app/javascript/styles/bliss/messaging.scss

@@ -1,5 +1,5 @@
-$messagingBoxWidth: 15em;
+$messagingBoxWidth: 20em;
-$messagingBoxHeight: 20em;
+$messagingBoxHeight: 100%;
 
 .fixed-box {
   border: solid 1px white;
@@ -26,8 +26,13 @@ $messagingBoxHeight: 20em;
   right: 1em;
   width: $messagingBoxWidth;
   background: $ui-base-color;
-  height: 80%;
+  height: 4em;
   color: white;
+  z-index: 10;
+
+  &.active {
+    height: $messagingBoxHeight;
+  }
 
   .messager-textarea {
     width: 100%;
@@ -38,6 +43,10 @@ $messagingBoxHeight: 20em;
   }
 }
 
+.contact-list-container {
+  overflow-x: auto;
+}
+
 .contact-list {
   display: block;
   padding: 1em;
@@ -45,7 +54,11 @@ $messagingBoxHeight: 20em;
   list-style-type: none;
   color: white;
 
+  .contact {
+    margin-bottom: 0.5rem;
   }
+}
+
 
 .toggle-list {
   float: right;