Refine how path elements are displayed

Path elements were and are horizontal scroll forms composed of path item
elements. Previously they were separated like this (each "(x)" is a
different path item element):

  (My ~/Music Library >) (C418 >) (72 Minutes Of Fame >) (03 Alive)

Now they're separated like this:

  (In: My ~/Music Libary) (> C418) (> 72 Minutes Of Fame)

There are two changes here:

* The last item, i.e. the selected item itself, is no longer a part of
  the path display. In practice this wasn't actually a very useful
  button, and now the path element is more useful in how it was designed
  to be used: as a way to jump to the group which a selected track is
  in. (This is emphasized by the new "In:" label at the start of the
  first path element.)

* The "arrow label" part of the element is now placed on the left of the
  element instead of the right. Before, all but the last item had a ">"
  in their arrow label; now, all but the first do. (The first item has
  the text "In:" instead.) This is so that it's clear when the path
  element has been scrolled to the right and the first/leftmost items
  are cut off; if any are cut off, the first visible element will start
  with ">" instead of "In:".

1 files changed, 10 insertions, 9 deletions

diff --git a/ui.js b/ui.js
index 9154390..3da7f5c 100644
--- a/ui.js
+++ b/ui.js
@@ -1014,10 +1014,11 @@ class PathElement extends ListScrollForm {
     }
 
     const itemPath = getItemPath(item)
+    const parentPath = itemPath.slice(0, -1)
 
-    for (const pathItem of itemPath) {
-      const isLast = pathItem === itemPath[itemPath.length - 1]
-      const element = new PathItemElement(pathItem, isLast)
+    for (const pathItem of parentPath) {
+      const isFirst = pathItem === parentPath[0]
+      const element = new PathItemElement(pathItem, isFirst)
       element.on('select', () => this.emit('select', pathItem))
       element.fixLayout()
       this.addInput(element)
@@ -1031,11 +1032,14 @@ class PathElement extends ListScrollForm {
 }
 
 class PathItemElement extends FocusElement {
-  constructor(item, isLast) {
+  constructor(item, isFirst) {
     super()
 
     this.item = item
-    this.isLast = isLast
+    this.isFirst = isFirst
+
+    this.arrowLabel = new Label(isFirst ? 'In: ' : ' > ')
+    this.addChild(this.arrowLabel)
 
     this.button = new Button(item.name || '(Unnamed)')
     this.addChild(this.button)
@@ -1043,9 +1047,6 @@ class PathItemElement extends FocusElement {
     this.button.on('pressed', () => {
       this.emit('select')
     })
-
-    this.arrowLabel = new Label(isLast ? '' : ' > ')
-    this.addChild(this.arrowLabel)
   }
 
   selected() {
@@ -1056,7 +1057,7 @@ class PathItemElement extends FocusElement {
     this.button.fixLayout()
     this.arrowLabel.fixLayout()
     this.w = this.button.w + this.arrowLabel.w
-    this.arrowLabel.x = this.button.right
+    this.button.x = this.arrowLabel.right
     this.h = 1
   }
 }