Implement new layout of top bar when groups feature is enabled

When the groups feature is enabled, use the new top bar design
from https://trello.com/c/DZEDxU4C/90-top-bar-ui-updates :

 [Group selector    ] [Search][Sort][Share][Account]

 * Align the left/right edges of the top-bar content
   with the content below.

 * Use a placeholder icon for the account menu for the moment.
   It will be replaced with an appropriate SVG when available.

h/static/styles/app.scss

@@ -18,11 +18,13 @@ $base-line-height: 20px;
 @import './top-bar';
 
 body {
+  $sidebar-h-padding: 9px;
+
   @extend .noise;
   font-family: $sans-font-family;
   font-weight: 300;
-  padding: .72rem;
-  padding-top: calc(.72em + 30px);
+  padding: $sidebar-h-padding;
+  padding-top: calc($sidebar-h-padding + 30px);
   -webkit-overflow-scrolling: touch;
 
   @include respond-to(tablets desktops) {

h/static/styles/top-bar.scss

 @import 'base';
 @import 'mixins/responsive';
 
-.topbar {
+.top-bar {
   background: $white;
   border: solid 1px $gray-lighter;
   border-style: solid none;
@@ -14,26 +14,33 @@
   z-index: 5;
 }
 
-.topbar .inner {
+.top-bar__inner {
+  // the edges of the top-bar's contents should be aligned
+  // with the edges of annotation cards displayed below
+  $h-padding: 9px;
+
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
 
+  padding-left: $h-padding;
+  padding-right: $h-padding;
+
   height: 28px;
 }
 
-.topbar .inner .simple-search {
+.top-bar__inner .simple-search {
   flex-grow: 1;
   margin-right: .75em;
   overflow: hidden;
 }
 
-.topbar .inner .group-list {
+.top-bar__inner .group-list {
   margin-right: .75em;
 }
 
-.topbar .btn {
+.top-bar .btn {
   color: $gray-light;
   min-width: 28px;
   height: 28px;

h/templates/client/group_list.html

@@ -10,7 +10,7 @@
     {{groups.focused().name}}
     <i class="h-icon-arrow-drop-down"></i>
   </span>
-  <ul class="dropdown-menu pull-right" role="menu">
+  <ul class="dropdown-menu pull-left" role="menu">
     <li ng-repeat="group in groups.all()">
       <div ng-class="{'group-item': true, selected: group.id == groups.focused().id}"
            ng-click="groups.focus(group.id)">

h/templates/client/top_bar.html

-<div class="topbar" ng-class="frame.visible && 'shown'" ng-cloak>
-  <div class="inner content">
+<div class="top-bar" ng-class="frame.visible && 'shown'" ng-cloak>
+  <!-- Legacy design for top bar !-->
+  <div class="top-bar__inner content" ng-if="!groupsEnabled">
     <button class="btn btn-clean"
             ng-click="shareDialog.visible = !shareDialog.visible"
             ng-if="isSidebar"
@@ -34,4 +35,40 @@
       </div>
     </div>
   </div>
+  <!-- New design for the top bar.
+       This is part of the groups roll-out
+  !-->
+  <div class="top-bar__inner content" ng-if="groupsEnabled">
+    <group-list class="group-list">
+    </group-list>
+    <simple-search class="simple-search"
+         query="searchController.query"
+         on-search="searchController.update(query)"
+         on-clear="searchController.clear()"></simple-search>
+    <button class="btn btn-clean"
+            ng-click="shareDialog.visible = !shareDialog.visible"
+            ng-if="isSidebar"
+            title="Share this page">
+      <i class="h-icon-share btn-icon"></i>
+    </button>
+    <div ng-switch="authUser">
+      <span ng-switch-when="undefined">⋯</span>
+      <a href="" ng-click="onLogin()" ng-switch-when="null">Sign in</a>
+      <div class="pull-right user-picker" dropdown keyboard-nav>
+        <span role="button"
+              data-toggle="dropdown" dropdown-toggle>
+          <!-- TODO - Replace the 'settings' icon with an 'account' icon !-->
+          <i class="h-icon-settings"></i><i class="h-icon-arrow-drop-down"></i>
+        </span>
+        <ul class="dropdown-menu pull-right" role="menu">
+          <li ng-show="authUser"><a href="" ng-click="accountDialog.visible = true">Account</a></li>
+          <li><a href="mailto:support@hypothes.is">Feedback</a></li>
+          <li><a href="/docs/help" target="_blank">Help</a></li>
+          <li ng-show="authUser"><a href="/stream?q=user:{{account.username}}"
+                                     target="_blank">My Annotations</a></li>
+          <li ng-show="authUser"><a href="" ng-click="onLogout()">Sign out</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
 </div>