empede/templates/browser.html

{# #}
<ul class="breadcrumb">
  <li>
    <a
      href="/?path=" 
      hx-replace-url="/?path=" 
      hx-get="/browser?path=" 
      hx-target=".browser"
    >Root</a>
  </li>
  {% for (i, component) in path.iter().enumerate() %}
  <li>
    {% if i == path.len() - 1 %}
    {{ component }}
    {% else %}
    <a
      href="/?path={{ path[..i + 1].join("/") }}" 
      hx-replace-url="/?path={{ path[..i + 1].join("/") }}" 
      hx-get="/browser?path={{ path[..i + 1].join("/") }}" hx-target=".browser"
    >{{ component }}</a>
    {% endif %}
  </li>
  {% endfor %}
</ul>

<ul class="dir" hx-boost="true">
  {% for entry in entries %}
  {% match entry %}
  {% when mpd::Entry::Song with { name, path, artist } %}
  <li hx-post="/queue?path={{path}}" hx-swap="none" role="button">
    <span class="material-symbols-outlined">music_note</span>
    <!-- img src="/art?path={{path}}" -->
    <div class="song">
      <div class="song__name">{{ name }}</div>
      <div class="song__artist">{{ artist }}</div>
    </a>
  </li>
  {% when mpd::Entry::Directory with { name, path } %}
  <li
    hx-get="/browser?path={{ path }}"
    hx-replace-url="/?path={{ path }}"
    hx-target=".browser"
  >
    <span class="material-symbols-outlined">folder</span>
    <div class="song__name">{{ name }}</div>
  </li>
  {% when mpd::Entry::Playlist with { name, path } %}
  <li hx-post="/queue?path={{path}}" hx-swap="none" role="button" >
    <span class="material-symbols-outlined">playlist_play</span>
    <div class="song">
      <div class="song__name">{{ name }}</div>
    </a>
  </li>
  {% endmatch %}
  {% endfor %}
</ul>