Can list group members

app/assets/javascripts/discourse/controllers/group_controller.js

@@ -0,0 +1,8 @@
+Discourse.GroupController = Discourse.ObjectController.extend({
+
+  // It would be nice if bootstrap marked action lists as selected when their links
+  // were 'active' not the `li` tags.
+  showingIndex: Em.computed.equal('showing', 'index'),
+  showingMembers: Em.computed.equal('showing', 'members'),
+});
+

app/assets/javascripts/discourse/routes/group_index_route.js

@@ -1,5 +1,10 @@
 Discourse.GroupIndexRoute = Discourse.Route.extend({
   model: function() {
     return this.modelFor('group');
+  },
+
+  setupController: function(controller, model) {
+    controller.set('model', model);
+    this.controllerFor('group').set('showing', 'index');
   }
 });

app/assets/javascripts/discourse/routes/group_members_route.js

@@ -12,6 +12,7 @@ Discourse.GroupMembersRoute = Discourse.Route.extend({
 
   setupController: function(controller) {
     controller.set('model', this.get('_members'));
+    this.controllerFor('group').set('showing', 'members');
   }
 
 });

app/assets/javascripts/discourse/templates/group.js.handlebars

@@ -1,10 +1,18 @@
 <div class="container">
     <section class='user-navigation'>
       <ul class='action-list nav-stacked'>
-        <li>{{#link-to 'group.index' model}}Posts{{/link-to}}</li>
+        <li {{bind-attr class="showingIndex:active"}}>{{#link-to 'group.index' model}}{{i18n groups.posts}}{{/link-to}}</li>
-        <li>{{#link-to 'group.members' model}}Members{{/link-to}}</li>
+        <li {{bind-attr class="showingMembers:active"}}>{{#link-to 'group.members' model}}{{i18n groups.members}}{{/link-to}}</li>
       </ul>
     </section>
 
-    {{outlet}}
+    <section class='user-main'>
+      <section class='about'>
+        <div class='details'>
+          <h1>{{name}}</h1>
+        </div>
+      </section>
+
+      {{outlet}}
+    </section>
 </div>

app/assets/javascripts/discourse/templates/group/members.js.handlebars

@@ -1,3 +1,8 @@
 {{#each model}}
-  {{username}}
+  <div class='group-member'>
+    <span class='last-seen-at'>{{i18n last_seen}} {{date last_seen_at}}</span>
+    {{avatar this imageSize="large"}}
+    <h3>{{#link-to 'user' this}}{{username}}{{/link-to}}</h3>
+    <p>{{name}}</p>
+  </div>
 {{/each}}

app/assets/stylesheets/desktop/user.scss

@@ -116,6 +116,19 @@
     width: 680px;
   }
 
+  .group-member {
+    img {
+      float: left;
+      margin-right: 10px;
+    }
+    span.last-seen-at {
+      float: right;
+      color: #999;
+    }
+    clear: both;
+
+  }
+
   .user-content {
     padding: 10px 8px;
     background-color: white;

app/controllers/groups_controller.rb

@@ -9,7 +9,7 @@ class GroupsController < ApplicationController
   def members
     group = Group.where(name: params.require(:group_id)).first
     guardian.ensure_can_see!(group)
-    render_serialized(group.users.order('username_lower asc').limit(200).to_a, BasicUserSerializer)
+    render_serialized(group.users.order('username_lower asc').limit(200).to_a, GroupUserSerializer)
   end
 
 end

app/serializers/group_user_serializer.rb

@@ -0,0 +1,4 @@
+class GroupUserSerializer < BasicUserSerializer
+  attributes :name, :last_seen_at
+end
+

config/locales/client.en.yml

@@ -174,6 +174,8 @@ en:
       sent_by_you: "Sent by <a href='{{userUrl}}'>you</a>"
 
     groups:
+      members: "Members"
+      posts: "Posts"
       alias_levels:
         title: "Who can use this group as an alias?"
         nobody: "Nobody"