FEATURE: Add groups page.

app/assets/javascripts/discourse/controllers/groups.js.es6

@@ -0,0 +1,16 @@
+import { observes } from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Controller.extend({
+  application: Ember.inject.controller(),
+
+  @observes("groups.canLoadMore")
+  _showFooter() {
+    this.set("application.showFooter", !this.get("groups.canLoadMore"));
+  },
+
+  actions: {
+    loadMore() {
+      this.get('groups').loadMore();
+    }
+  }
+});

app/assets/javascripts/discourse/models/group.js.es6

@@ -1,8 +1,9 @@
 import { ajax } from 'discourse/lib/ajax';
 import { default as computed, observes } from "ember-addons/ember-computed-decorators";
 import GroupHistory from 'discourse/models/group-history';
+import RestModel from 'discourse/models/rest';
 
-const Group = Discourse.Model.extend({
+const Group = RestModel.extend({
   limit: 50,
   offset: 0,
   user_count: 0,

app/assets/javascripts/discourse/routes/app-route-map.js.es6

@@ -50,6 +50,8 @@ export default function() {
     this.route(defaultHomepage(), { path: '/' });
   });
 
+  this.route('groups', { resetNamespace: true });
+
   this.route('group', { path: '/groups/:name', resetNamespace: true }, function() {
     this.route('members');
     this.route('posts');

app/assets/javascripts/discourse/routes/groups.js.es6

@@ -0,0 +1,13 @@
+export default Discourse.Route.extend({
+  titleToken() {
+    return I18n.t('groups.index');
+  },
+
+  model(params) {
+    return this.store.findAll('group', params);
+  },
+
+  setupController(controller, model) {
+    controller.set('groups', model);
+  }
+});

app/assets/javascripts/discourse/templates/groups.hbs

@@ -0,0 +1,39 @@
+{{#d-section pageClass="groups"}}
+  {{#load-more selector=".groups-table .groups-table-row" action="loadMore"}}
+    <h1>{{i18n "groups.index"}}</h1>
+
+    <div class='container'>
+      <table class="groups-table">
+        <thead>
+          <th>{{i18n "groups.name"}}</th>
+          <th>{{i18n "groups.user_count"}}</th>
+        </thead>
+
+        <tbody>
+          {{#each groups as |group|}}
+            <tr class="groups-table-row">
+              <td class="groups-name">
+                {{#link-to "group.members" group.name}}
+                  {{#if group.flair_url}}
+                    <span>
+                      {{avatar-flair
+                        flairURL=group.flair_url
+                        flairBgColor=group.flair_bg_color
+                        flairColor=group.flair_color
+                        groupName=group.name}}
+                    </span>
+                  {{/if}}
+
+                  <span><h4>@{{group.name}}</h4></span>
+                {{/link-to}}
+              </td>
+              <td>{{group.user_count}}</td>
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    </div>
+  {{/load-more}}
+
+  {{conditional-loading-spinner condition=groups.loadingMore}}
+{{/d-section}}

app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6

@@ -103,6 +103,8 @@ export default createWidget('hamburger-menu', {
       links.push({ route: 'users', className: 'user-directory-link', label: 'directory.title' });
     }
 
+    links.push({ route: 'groups', className: 'groups-link', label: 'groups.index' });
+
     if (this.siteSettings.tagging_enabled) {
       links.push({ route: 'tags', label: 'tagging.tags' });
     }