#1: Beginning of the search front-end.

app/Library/Search.php

@@ -114,9 +114,9 @@ class Search {
             ]
         ]);
 
-        $tracks = $this->transformToEloquent(Track::class, $results['responses'][0]['hits']['hits']);
-        $albums = $this->transformToEloquent(Album::class, $results['responses'][1]['hits']['hits']);
-        $playlists = $this->transformToEloquent(Playlist::class, $results['responses'][2]['hits']['hits']);
+        $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']);
 
         return [
@@ -127,6 +127,30 @@ class Search {
         ];
     }
 
+    protected function transformTracks(array $searchHits) {
+        $tracks = $this->transformToEloquent(Track::class, $searchHits);
+        $tracks = $tracks->map(function (Track $track) {
+            return Track::mapPublicTrackSummary($track);
+        });
+        return $tracks;
+    }
+
+    protected function transformAlbums(array $searchHits) {
+        $albums = $this->transformToEloquent(Album::class, $searchHits);
+        $albums = $albums->map(function (Album $track) {
+            return Album::mapPublicAlbumSummary($track);
+        });
+        return $albums;
+    }
+
+    protected function transformPlaylists(array $searchHits) {
+        $playlists = $this->transformToEloquent(Playlist::class, $searchHits);
+        $playlists = $playlists->map(function (Playlist $track) {
+            return Playlist::mapPublicPlaylistSummary($track);
+        });
+        return $playlists;
+    }
+
     /**
      * Transforms the given Elasticsearch results into a collection of corresponding
      * Eloquent models.

public/templates/directives/search.html

@@ -0,0 +1,19 @@
+<div class="search" ng-blur="searchInProgress = false">
+    <input class="search-input" type="text" placeholder="Search&hellip;" ng-model="searchQuery" ng-keyup="quickSearch()" pfm-popup="search-results" />
+
+    <div class="search-results pfm-popup" id="search-results" ng-show="searchInProgress">
+        <h3 class="-section-header">Matching tracks</h3>
+        <pfm-tracks-list tracks="tracks"></pfm-tracks-list>
+
+        <h3 class="-section-header">Matching albums</h3>
+        <pfm-albums-list albums="albums"></pfm-albums-list>
+
+        <h3 class="-section-header">Matching playlists</h3>
+        <pfm-playlists-list playlists="playlists"></pfm-playlists-list>
+
+        <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>
+    </div>
+</div>

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

@@ -0,0 +1,59 @@
+# 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 'pfmSearch', () ->
+    restrict: 'E'
+    templateUrl: '/templates/directives/search.html'
+    scope:
+        resource: '=resource',
+        type: '@type'
+
+    controller: [
+        '$scope', 'search'
+        ($scope, search) ->
+            $scope.searchQuery = null
+            $scope.searchInProgress = false
+
+            $scope.tracks = []
+            $scope.albums = []
+            $scope.playlists = []
+            $scope.users = []
+
+            clearResults = ()->
+                $scope.tracks = []
+                $scope.albums = []
+                $scope.playlists = []
+                $scope.users = []
+
+            $scope.quickSearch = ()->
+                clearResults()
+                $scope.searchInProgress = true
+
+                search.searchAllContent($scope.searchQuery)
+                    .done (results)->
+                        for track in results.tracks
+                            $scope.tracks.push(track)
+
+                        for album in results.albums
+                            $scope.albums.push(album)
+
+                        for playlist in results.playlists
+                            $scope.playlists.push(playlist)
+
+                        for user in results.users
+                            $scope.users.push(user)
+
+    ]

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

@@ -0,0 +1,32 @@
+# 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').factory('search', [
+    '$http'
+    ($http) ->
+
+        self =
+            searchAllContent: (query) ->
+                searchDef = new $.Deferred()
+
+                $http.get('/api/web/search?query=' + encodeURIComponent(query))
+                    .success (results)->
+                        searchDef.resolve(results.results)
+
+                searchDef.promise()
+
+        self
+])

resources/assets/styles/app.less

@@ -32,3 +32,4 @@
 @import 'content';
 @import 'dashboard';
 @import 'uploader';
+@import 'search';

resources/assets/styles/search.less

@@ -0,0 +1,58 @@
+/**
+ * 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/>.
+ */
+
+@import 'base/bootstrap/bootstrap';
+@import 'mixins';
+@import 'variables';
+
+
+.search-input {
+
+}
+
+.search-results {
+  position: absolute;
+  width: 500px;
+  padding: 10px;
+
+  background: #fff;
+
+  ol li {
+    list-style: disc;
+  }
+
+  li a {
+    padding: 0;
+    padding-right: 0;
+    overflow: hidden;
+    color: @pfm-light-grey;
+  }
+
+  .-section-header {
+    background: transparent;
+    color: @pfm-purple;
+
+    padding-left: 0;
+  }
+
+  .albums-listing, .playlists-listing {
+    li {
+      width: 100%;
+    }
+  }
+}

resources/views/shared/_app_layout.blade.php

@@ -66,6 +66,7 @@
 
     <div class="site-body">
         <ul class="sidebar" ng-controller="sidebar">
+            <li><pfm-search></pfm-search></li>
             <li ng-class="{selected: stateIncludes('content.tracks') || stateIncludes('content.track')}"><a href="/tracks">Tracks</a></li>
             <li ng-class="{selected: stateIncludes('content.albums') || stateIncludes('content.album')}"><a href="/albums">Albums</a></li>
             <li ng-class="{selected: stateIncludes('content.playlists') || stateIncludes('content.playlist')}"><a href="/playlists">Playlists</a></li>