Move artists into library (#68)

* Use more sensible naming for api responses

* Move artist overview into library; closes #50 and #52

* Fix sass live-reload

* Move editor config out of shadow-cljs.edn

src/assets/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Airsonic</title>
-        <link rel="stylesheet" href="./app/style.css">
+        <link rel="stylesheet" href="./app/app.css">
         <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">

src/cljs/airsonic_ui/api/events.cljs

@@ -15,13 +15,13 @@
   {:http-xhrio {:method :get
                 :uri (api/url (:credentials db) endpoint params)
                 :response-format (ajax/json-response-format {:keywords? true})
-                :on-success [:api/good-response endpoint params]
-                :on-failure [:api/failed-response endpoint params]}
+                :on-success [:api.response/ok endpoint params]
+                :on-failure [:api.response/failed endpoint params]}
    :db (assoc-in db (conj (cache-path endpoint params) :api/is-loading?) true)})
 
 (reg-event-fx :api/request api-request)
 
-(defn good-api-response
+(defn api-success
   "Handles when the server responded. There could still be an error while
   processing the request on the server side which we have to account for."
   [{:keys [db]} [_ endpoint params response]]
@@ -32,9 +32,9 @@
         {:dispatch [:notification/show :error (api/error-msg e)]
          :db (update-in db response-cache dissoc :api/is-loading?)}))))
 
-(reg-event-fx :api/good-response good-api-response)
+(reg-event-fx :api.response/ok api-success)
 
-(defn failed-api-response
+(defn api-failure
   "Handler for catastrophic failures (network errors and such things)"
   [fx [ev endpoint params]]
   (let [response-cache (cons :db (cache-path endpoint params))]
@@ -42,4 +42,4 @@
      :dispatch [:notification/show :error "Communication with server failed. Check browser logs for details."]
      :db (update-in fx response-cache dissoc :api/is-loading?)}))
 
-(reg-event-fx :api/failed-response failed-api-response)
+(reg-event-fx :api.response/failed api-failure)

src/cljs/airsonic_ui/components/artist/views.cljs

@@ -1,5 +1,6 @@
 (ns airsonic-ui.components.artist.views
   (:require [airsonic-ui.components.collection.views :as collection]
+            [airsonic-ui.components.library.views :as library]
             [airsonic-ui.routes :as routes]
             [clojure.string :as str]))
 
@@ -68,7 +69,7 @@
 (defn overview
   "Displays the alphabetical listing of all artists along with some additional
   information about the collection"
-  [{:keys [artists]}]
+  [current-route {:keys [artists]}]
   (let [artists (:index artists)
         ;; TODO: Calculations in views should be avoided
         artists-count (count (mapcat :artist artists))
@@ -76,8 +77,9 @@
                          (map :albumCount)
                          (reduce +))]
     [:div
-     [:section.hero.is-small>div.hero-body
+     [library/tab-section current-route]
+     [:section.hero.single-line.is-small>div.hero-body
       [:div.container
        [:h1.title "Artists"]
-       [:p.subtitle.is-5.has-text-grey [:strong artists-count] " artists in your collection with " [:strong album-count] " albums"]]]
+       [:p.subtitle.is-5.has-text-grey [:strong artists-count] " artists  with " [:strong album-count] " albums"]]]
      [:section.section>div.container [alphabetical-listing artists]]]))

src/cljs/airsonic_ui/components/library/views.cljs

@@ -55,7 +55,8 @@
   (->>
    [[[::routes/library {:kind "recent"}] "Recently played"]
     [[::routes/library {:kind "newest"}] "Newest additions"]
-    [[::routes/library {:kind "starred"}] "Starred"]]
+    [[::routes/library {:kind "starred"}] "Starred"]
+    [[::routes/artist.overview] "Artists"]]
    (map (fn [[[id params :as route] label]]
           (cond-> {:href (apply routes/url-for route)
                    :label label}
@@ -63,12 +64,17 @@
                  (= (:kind params) (:kind current-params)))
             (assoc :active? true))))))
 
+(defn tab-section [current-route]
+  [:section.section.ui-tab-bar.is-small>div.container
+   [tabs {:items (tab-items current-route)}]])
+
 (defn main
   "Renders the pagination and shows a list of all albums with their cover art.
   The first parameter is the route that's passed in, the second one is the
   content that has been fetched for that route."
   [[_ {:keys [kind]} {:keys [page] :or {page 1}} :as current-route]
    {:keys [scan-status]}]
+  (println "scan-status" scan-status)
   (let [library @(subscribe [:library/paginated kind])
         page (int page)
         current-items (get library page)
@@ -77,14 +83,13 @@
                                       :items library
                                       :url-fn url-fn}]]
     [:div
-     [:section.hero.is-small>div.hero-body>div.container
+     [tab-section current-route]
+     [:section.hero.single-line.is-small>div.hero-body>div.container
       [:h2.title "Your library"]
       (if (:count scan-status)
         [:p.subtitle.is-5.has-text-grey [:strong (:count scan-status)] " items"]
         (when (:scanning scan-status)
           [:p.subtitle.is-5.has-text-grey "Scanning…"]))]
-     [:section.section.is-small>div.container
-      [tabs {:items (tab-items current-route)}]]
      [:section.section.is-tiny>div.container pagination-links]
      [:section.section.is-tiny>div.container [collection/listing current-items]]
      [:section.section.is-tiny>div.container pagination-links]]))

src/cljs/airsonic_ui/events.cljs

@@ -67,7 +67,7 @@
                 :uri (api/url credentials "getUser" {:username (:u credentials)})
                 :response-format (ajax/json-response-format {:keywords? true})
                 :on-success [:credentials/authentication-response credentials]
-                :on-failure [:api/failed-response]}}) ; <- we don't need endpoint and params here because the response is not cached
+                :on-failure [:api.response/failed]}}) ; <- we don't need endpoint and params here because the response is not cached
 
 (rf/reg-event-fx :credentials/send-authentication-request authentication-request)
 

src/cljs/airsonic_ui/views.cljs

@@ -60,17 +60,19 @@
     [:nav.navbar.is-fixed-top.is-dark {:role "navigation", :aria-label "search and navigation"}
      ;; user is `nil` when we're not logged in, we can hide the extended navigation
      [:div.navbar-brand
-      [:div.navbar-item      
+      [:div.navbar-item
        [:a {:href (url-for ::routes/library)} [:img {:src logo-url}]]
        [:div.navbar-burger.burger {:on-click toggle-navbar-active!}
-        (for [idx (range 3)] ^{:key (str "burger-" idx)} [:span])]]]
+        [:span]
+        [:span]
+        [:span]]]]
      (when user
        [(if @navbar-active? :div.navbar-menu.is-active :div.navbar-menu)
         [:div.navbar-start
          [:div.navbar-item [search/form]]]
         [:div.navbar-end
          [:a.navbar-item {:href (url-for ::routes/current-queue)
-                          :title "Current queue"} [icon :audio-spectrum]]
+                          :title "Current queue"} [:span.heart-beat [icon :audio-spectrum]]]
          (when stream-role
            [navbar-dropdown "Library"
             [[{:href (url-for ::routes/library {:kind "recent"})} "Recently played"]
@@ -112,7 +114,7 @@
       [breadcrumbs route content]
       (case route-id
         ::routes/library [library/main route content]
-        ::routes/artist.overview [artist/overview content]
+        ::routes/artist.overview [artist/overview route content]
         ::routes/artist.detail [artist/detail content]
         ::routes/album.detail [collection/detail content]
         ::routes/search [search/results content]

src/cljs/airsonic_ui/views/breadcrumbs.cljs

@@ -17,36 +17,48 @@
         (when content-pending? [:span.loader])]]]]))
 
 (defmulti breadcrumbs
-  (fn dispatch-on [[route-id] content] route-id))
+  ;; the first parameter is always the current route, the second parameter is
+  ;; whatever the subscriptions return as the current content (e.g. album title)
+  (fn dispatch-on [[route-id] _] route-id))
 
 (defmethod breadcrumbs :default [_ _]
-  [bulma-breadcrumbs "Start"])
+  [bulma-breadcrumbs "Airsonic"])
 
-(def start [(url-for ::routes/library) "Start"])
+(defmethod breadcrumbs ::routes/library [[_ params] _]
+  [bulma-breadcrumbs
+   [(url-for ::routes/library {:kind "recent"}) "Library"]
+   (case (:kind params)
+     "recent" "Recently played"
+     "newest" "Newest additions"
+     "starred" "Starred")])
 
 (defmethod breadcrumbs ::routes/artist.overview [_ _]
-  [bulma-breadcrumbs start "Artists"])
+  [bulma-breadcrumbs
+   [(url-for ::routes/library {:kind "recent"}) "Library"]
+   "Artists"])
 
 (defmethod breadcrumbs ::routes/artist.detail [_ {:keys [artist]}]
-  [bulma-breadcrumbs start
+  [bulma-breadcrumbs
+   [(url-for ::routes/library {:kind "recent"}) "Library"]
    [(url-for ::routes/artist.overview) "Artists"]
    (:name artist)])
 
 (defmethod breadcrumbs ::routes/album.detail [_ {:keys [album]}]
-  [bulma-breadcrumbs start
+  [bulma-breadcrumbs
+   [(url-for ::routes/library {:kind "recent"}) "Library"]
    [(url-for ::routes/artist.overview) "Artists"]
    [(url-for ::routes/artist.detail {:id (:artistId album)}) (:artist album)]
    (:name album)])
 
 (defmethod breadcrumbs ::routes/search [_ _]
-  [bulma-breadcrumbs start "Search"])
+  [bulma-breadcrumbs "Search"])
 
 (defmethod breadcrumbs ::routes/podcast.overview [_ _]
   ;; TODO: Detail view
-  [bulma-breadcrumbs start "Podcasts"])
+  [bulma-breadcrumbs "Podcasts"])
 
 (defmethod breadcrumbs ::routes/current-queue [_ _]
-  [bulma-breadcrumbs start "Current Queue"])
+  [bulma-breadcrumbs "Current Queue"])
 
 (defmethod breadcrumbs ::routes/about [_ _]
-  [bulma-breadcrumbs start "About"])
+  [bulma-breadcrumbs "About"])

src/cljs/bulma/tabs.cljs

@@ -1,7 +1,7 @@
 (ns bulma.tabs)
 
 (defn tabs [{:keys [items]}]
-  [:div.tabs
+  [:div.tabs.is-boxed
    [:ul
     (for [[idx {:keys [href label active?]}] (map-indexed vector items)]
       ^{:key idx} [:li (when active? {:class "is-active"})

src/sass/app.sass

@@ -228,14 +228,30 @@
   &.is-tiny
     padding: 0.75rem 1.5rem
 
+  // tab bar on top
+  &.ui-tab-bar
+    padding-bottom: 0.75rem
+
 // occurs on many pages at the top to show details
 .hero
   &.is-small + .section
-    padding-top: 0
+    padding: 1.5rem 1.5rem
+
+  &.is-tiny + .section
+    padding: 0.75rem 1.5rem
 
   .media-content
     align-self: center
 
+  // modifies our headlines to be next to each other
+  +tablet
+    &.single-line .container
+      display: flex
+      align-items: baseline
+      .title
+        flex-grow: 1
+        margin-bottom: 0
+
 // floating notifications
 .notifications:not(:empty)
   @extend .container
@@ -358,4 +374,4 @@ tr.sortable-is-moving.is-playing
 // Navigation fixes
 .navbar-brand > .navbar-item > a
   display: flex
-  align-items: center
+  align-items: center