#1: Moved the artists list into its own directive + visual cleanup of search.

app/Http/Controllers/Api/Web/ArtistsController.php

@@ -195,18 +195,7 @@ class ArtistsController extends ApiControllerBase
         $users = [];
 
         foreach ($query->get() as $user) {
-            $users[] = [
-                'id' => $user->id,
-                'name' => $user->display_name,
-                'slug' => $user->slug,
-                'url' => $user->url,
-                'is_archived' => $user->is_archived,
-                'avatars' => [
-                    'small' => $user->getAvatarUrl(Image::SMALL),
-                    'normal' => $user->getAvatarUrl(Image::NORMAL)
-                ],
-                'created_at' => $user->created_at
-            ];
+            $users[] = User::mapPublicUserSummary($user);
         }
 
         return Response::json(["artists" => $users, "current_page" => $page, "total_pages" => ceil($count / $perPage)],

app/Http/Controllers/Api/Web/SearchController.php

@@ -30,9 +30,7 @@ class SearchController extends ApiControllerBase
 {
     public function getSearch(Search $search)
     {
-        $input = Input::all();
-
-        $results = $search->searchAllContent($input['query']);
+        $results = $search->searchAllContent(Input::query('query'));
 
         return Response::json([
             'results' => $results,

app/Library/Search.php

@@ -117,7 +117,7 @@ class Search {
         $tracks = $this->transformTracks($results['responses'][0]['hits']['hits']);
         $albums = $this->transformAlbums($results['responses'][1]['hits']['hits']);
         $playlists = $this->transformPlaylists($results['responses'][2]['hits']['hits']);
-        $users = $this->transformToEloquent(User::class, $results['responses'][3]['hits']['hits']);
+        $users = $this->transformUsers($results['responses'][3]['hits']['hits']);
 
         return [
             'tracks'    => $tracks,
@@ -137,20 +137,28 @@ class Search {
 
     protected function transformAlbums(array $searchHits) {
         $albums = $this->transformToEloquent(Album::class, $searchHits);
-        $albums = $albums->map(function (Album $track) {
-            return Album::mapPublicAlbumSummary($track);
+        $albums = $albums->map(function (Album $album) {
+            return Album::mapPublicAlbumSummary($album);
         });
         return $albums;
     }
 
     protected function transformPlaylists(array $searchHits) {
         $playlists = $this->transformToEloquent(Playlist::class, $searchHits);
-        $playlists = $playlists->map(function (Playlist $track) {
-            return Playlist::mapPublicPlaylistSummary($track);
+        $playlists = $playlists->map(function (Playlist $playlist) {
+            return Playlist::mapPublicPlaylistSummary($playlist);
         });
         return $playlists;
     }
 
+    protected function transformUsers(array $searchHits) {
+        $users = $this->transformToEloquent(User::class, $searchHits);
+        $users = $users->map(function (User $user) {
+            return User::mapPublicUserSummary($user);
+        });
+        return $users;
+    }
+
     /**
      * Transforms the given Elasticsearch results into a collection of corresponding
      * Eloquent models.

app/Models/User.php

@@ -251,6 +251,21 @@ class User extends Model implements AuthenticatableContract, CanResetPasswordCon
         return false;
     }
 
+    public static function mapPublicUserSummary(User $user) {
+        return [
+            'id' => $user->id,
+            'name' => $user->display_name,
+            'slug' => $user->slug,
+            'url' => $user->url,
+            'is_archived' => $user->is_archived,
+            'avatars' => [
+                'small' => $user->getAvatarUrl(Image::SMALL),
+                'normal' => $user->getAvatarUrl(Image::NORMAL)
+            ],
+            'created_at' => $user->created_at
+        ];
+    }
+
     /**
      * Returns this model in Elasticsearch-friendly form. The array returned by
      * this method should match the current mapping for this model's ES type.

public/templates/artists/list.html

@@ -1,21 +1,3 @@
 <div class="stretch-to-bottom">
-    <ul class="artist-listing">
-        <li class="artist" ng-class="{'x-archived': artist.is_archived}" ng-repeat="artist in artists" bindonce>
-            <a href="{{artist.url}}">
-                <img class="image" pfm-src-loader="artist.avatars.small" pfm-src-size="small" />
-                <span class="info">
-                    <span class="title" bo-text="artist.name"></span>
-                    <span ng-hide="artist.is_archived" class="published">
-                        joined <span bo-text="artist.created_at.date | momentFromNow"></span>
-                    </span>
-                    <span ng-show="artist.is_archived" class="published">
-                        archived artist
-                    </span>
-                </span>
-            </a>
-        </li>
-        <li ng-show="!artists.length" class="empty">
-            No artists found...
-        </li>
-    </ul>
+    <pfm-users-list users="artists"></pfm-users-list>
 </div>

public/templates/directives/search.html

@@ -16,9 +16,7 @@
 
         <div class="-column2">
             <h3 class="-section-header">Matching users</h3>
-            <ol>
-                <li bindonce ng-repeat="user in users track by user.id" bo-text="user.display_name"></li>
-            </ol>
+            <pfm-users-list users="users"></pfm-users-list>
 
             <h3 class="-section-header">Matching albums</h3>
             <pfm-albums-list albums="albums"></pfm-albums-list>

public/templates/directives/users-list.html

@@ -0,0 +1,19 @@
+<ul class="users-listing">
+    <li class="artist" ng-class="{'x-archived': user.is_archived}" ng-repeat="user in users track by user.id" bindonce>
+        <a bo-href="user.url">
+            <img class="image" pfm-src-loader="user.avatars.small" pfm-src-size="small" />
+            <span class="info">
+                <span class="title" bo-text="user.name"></span>
+                <span ng-hide="user.is_archived" class="published">
+                    joined <span bo-text="user.created_at.date | momentFromNow"></span>
+                </span>
+                <span ng-show="user.is_archived" class="published">
+                    archived artist
+                </span>
+            </span>
+        </a>
+    </li>
+    <li ng-show="!users.length" class="empty">
+        No users found&hellip;
+    </li>
+</ul>

resources/assets/scripts/app/directives/search.coffee

@@ -59,5 +59,5 @@ angular.module('ponyfm').directive 'pfmSearch', () ->
 
                             for user in results.users
                                 $scope.users.push(user)
-            , 200)
+            , 300)
     ]

resources/assets/scripts/app/directives/users-list.coffee

@@ -0,0 +1,29 @@
+# Pony.fm - A community for pony fan music.
+# Copyright (C) 2016 Peter Deltchev
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+angular.module('ponyfm').directive 'pfmUsersList', () ->
+    restrict: 'E'
+    replace: true
+    templateUrl: '/templates/directives/users-list.html'
+    scope:
+        users: '=users',
+        class: '@class'
+
+    controller: [
+        '$scope', 'auth'
+        ($scope, auth) ->
+            $scope.auth = auth.data
+    ]

resources/assets/styles/content.less

@@ -22,7 +22,7 @@
 
 @media (max-width: 1300px) and (min-width: 720px) {
   html {
-    .albums-listing, .playlists-listing, .artist-listing {
+    .albums-listing, .playlists-listing, .users-listing {
       &.two-columns li {
         width: auto;
         float: none;
@@ -37,7 +37,7 @@
 
 @media (max-width: 720px) {
   html {
-    .albums-listing, .playlists-listing, .artist-listing {
+    .albums-listing, .playlists-listing, .users-listing {
       &.two-columns li {
         width: auto;
         float: none;
@@ -51,7 +51,7 @@
   }
 }
 
-.albums-listing, .playlists-listing, .artist-listing {
+.albums-listing, .playlists-listing, .users-listing {
   margin: 0px;
   padding: 0px;
   list-style: none;

resources/assets/styles/search.less

@@ -66,7 +66,7 @@ input.search-input {
     padding-left: 0;
   }
 
-  .albums-listing, .playlists-listing {
+  .albums-listing, .playlists-listing, .users-listing {
     li {
       width: 100%;
     }