[templates] Standardize toolbar across list and detail pages

PROJECT.org

@@ -18,7 +18,7 @@ tasks, Todoist tasks, web pages I've read and trails I've hiked has turned out
 to be sometimes cathartic and sometimes functional as I try to remember when I
 did a thing.
 
-* Backlog [1/31] :vrobbler:project:personal:
+* Backlog [2/32] :vrobbler:project:personal:
 ** TODO [#C] Configure IMAP folder/start in user profile :imap:settings:
 *** Description
 
@@ -595,3 +595,8 @@ The Edit log form should have from top to bottom:
 :PROPERTIES:
 :ID:       ed744d3f-86fb-e9f8-acb9-0e4200c99c7f
 :END:
+
+** DONE Standarize the toolbar buttons :templates:ui:
+:PROPERTIES:
+:ID:       3780d203-85f2-32a1-ded2-9895bc969c3c
+:END:

tests/scrobbles_tests/test_toolbar.py

@@ -0,0 +1,52 @@
+import pytest
+from django.contrib.auth import get_user_model
+from django.utils import timezone
+from scrobbles.models import Scrobble
+from tasks.models import Task
+
+
+@pytest.mark.django_db
+def test_standard_toolbar_on_base_list_page(client):
+    user = get_user_model().objects.create_user(
+        username="toolbaruser", password="testpass"
+    )
+    task = Task.objects.create(title="Ship the toolbar")
+    Scrobble.objects.create(
+        user=user,
+        task=task,
+        media_type="Task",
+        timestamp=timezone.now(),
+    )
+    client.force_login(user)
+    response = client.get(f"/tasks/{task.uuid}/")
+    assert response.status_code == 200
+    content = response.content.decode()
+    # Standard toolbar present on a base_list-based detail page
+    assert "Search..." in content
+    assert "Calendar" in content
+    assert "Admin" in content
+    assert "Charts" in content
+    assert "Live" in content
+    assert "Browse" in content
+    assert "media-browser-menu" in content
+    # Grid view toggle kept
+    assert "Grid View" in content
+
+
+@pytest.mark.django_db
+def test_standard_toolbar_on_home(client):
+    user = get_user_model().objects.create_user(
+        username="toolbarhome", password="testpass"
+    )
+    task = Task.objects.create(title="Task")
+    Scrobble.objects.create(
+        user=user, task=task, media_type="Task", timestamp=timezone.now()
+    )
+    client.force_login(user)
+    response = client.get("/")
+    assert response.status_code == 200
+    content = response.content.decode()
+    assert "Search..." in content
+    assert "Calendar" in content
+    assert "Live" in content
+    assert "media-browser-menu" in content

vrobbler/templates/agents/agent_session_search.html

@@ -32,12 +32,10 @@
         <h1 class="h2">Search Agent Sessions</h1>
         <div class="btn-toolbar mb-2 mb-md-0">
             {% if user.is_authenticated %}
+            {% include "scrobbles/_toolbar.html" %}
             <div class="btn-group me-2">
               <a href="{% url 'agents:agent_session_list' %}" class="btn btn-sm btn-outline-secondary">Agent sessions</a>
             </div>
-            <div class="btn-group me-2">
-              <a href="{% url 'scrobbles:search' %}" class="btn btn-sm btn-outline-secondary">Search scrobbles</a>
-            </div>
             {% endif %}
         </div>
     </div>

vrobbler/templates/base_detail.html

@@ -6,12 +6,7 @@
         <h1 class="h2">{% block title %}{% endblock %} </h1>
         <div class="btn-toolbar mb-2 mb-md-0">
             {% if user.is_authenticated %}
-            <div class="btn-group me-2">
+            {% include "scrobbles/_toolbar.html" %}
-              <a href="{% url 'admin:index' %}" class="btn btn-sm btn-outline-secondary">Admin</a>
-            </div>
-            <div class="btn-group me-2">
-              <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">Charts</a>
-            </div>
             <div class="btn-group me-2">
                 <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                     data-bs-target="#exportModal">Export</button>

vrobbler/templates/base_list.html

@@ -7,14 +7,7 @@
         class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
         <h1 class="h2">{% block title %}{% endblock %} </h1>
         <div class="btn-toolbar mb-2 mb-md-0">
-            {% if user.is_authenticated %}
+            {% include "scrobbles/_toolbar.html" %}
-            <div class="btn-group me-2">
-              <a href="{% url 'admin:index' %}" class="btn btn-sm btn-outline-secondary">Admin</a>
-            </div>
-            <div class="btn-group me-2">
-              <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">Charts</a>
-            </div>
-            {% endif %}
             {% block grid_view_button %}
             <div class="btn-group me-2">
                 {% if view == 'grid' %}

vrobbler/templates/scrobbles/_toolbar.html

@@ -0,0 +1,27 @@
+{% if user.is_authenticated %}
+<form method="get" action="{% url 'scrobbles:search' %}" class="d-flex me-2">
+    <input type="text"
+           name="q"
+           class="form-control form-control-sm"
+           placeholder="Search..."
+           style="width: 150px;">
+</form>
+<div class="btn-group me-2">
+  <a href="{% url 'scrobbles:calendar' %}" class="btn btn-sm btn-outline-secondary">Calendar</a>
+</div>
+<div class="btn-group me-2">
+  <a href="{% url 'admin:index' %}" class="btn btn-sm btn-outline-secondary">Admin</a>
+</div>
+<div class="btn-group me-2">
+  <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">Charts</a>
+</div>
+<div class="btn-group me-2">
+  <a href="{% url 'scrobbles:scrobble-list' %}" class="btn btn-sm btn-outline-secondary">Live</a>
+</div>
+{% include "scrobbles/_media_browser.html" %}
+{% if not user.profile.trends_disabled %}
+<div class="btn-group me-2">
+  <a href="{% url 'trends:trends-home' %}" class="btn btn-sm btn-outline-secondary">Trends</a>
+</div>
+{% endif %}
+{% endif %}

vrobbler/templates/scrobbles/scrobble_list.html

@@ -65,46 +65,13 @@
         <h1 class="h2">{% if date %}{{date|naturaltime}}{% else %}{{title}}{% endif %}</h1>
         <div class="btn-toolbar mb-2 mb-md-0">
             {% if user.is_authenticated %}
-            <form method="get" action="{% url 'scrobbles:search' %}" class="d-flex me-2">
+            {% include "scrobbles/_toolbar.html" %}
-                <input type="text"
-                       name="q"
-                       class="form-control form-control-sm"
-                       placeholder="Search..."
-                       style="width: 150px;">
-            </form>
-            <div class="btn-group me-2">
-              <a href="{% url 'scrobbles:calendar' %}" class="btn btn-sm btn-outline-secondary">Calendar</a>
-            </div>
-            <div class="btn-group me-2">
-              <a href="{% url 'admin:index' %}" class="btn btn-sm btn-outline-secondary">Admin</a>
-            </div>
-            <div class="btn-group me-2">
-              <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">Charts</a>
-            </div>
-            <div class="btn-group me-2">
-              <a href="{% url 'scrobbles:scrobble-list' %}" class="btn btn-sm btn-outline-secondary">Live</a>
-            </div>
-            {% include "scrobbles/_media_browser.html" %}
-            {% if not user.profile.trends_disabled %}
-            <div class="btn-group me-2">
-              <a href="{% url 'trends:trends-home' %}" class="btn btn-sm btn-outline-secondary">Trends</a>
-            </div>
-            {% endif %}
             <div class="btn-group me-2">
                 {% if user.profile.lastfm_username and not user.profile.lastfm_auto_import %}
                 <form action="{% url 'scrobbles:lastfm-import' %}" method="get">
                     <button type="submit" class="btn btn-sm btn-outline-secondary">Last.fm Sync</button>
                 </form>
                 {% endif %}
-
-            </div>
-            <div class="btn-group me-2">
-                {% if user.profile.lastfm_username and not user.profile.lastfm_auto_import %}
-
-                <form action="{% url 'scrobbles:lastfm-import' %}" method="get">
-                    <button type="submit" class="btn btn-sm btn-outline-secondary">Last.fm Sync</button>
-                </form>
-                {% endif %}
                 <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                     data-bs-target="#importModal">Import</button>
                 <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"

vrobbler/templates/scrobbles/scrobble_search.html

@@ -63,15 +63,7 @@
         <h1 class="h2">Search Scrobbles</h1>
         <div class="btn-toolbar mb-2 mb-md-0">
             {% if user.is_authenticated %}
-            <div class="btn-group me-2">
+            {% include "scrobbles/_toolbar.html" %}
-              <a href="{% url 'scrobbles:calendar' %}" class="btn btn-sm btn-outline-secondary">Calendar</a>
-            </div>
-            <div class="btn-group me-2">
-              <a href="{% url 'admin:index' %}" class="btn btn-sm btn-outline-secondary">Admin</a>
-            </div>
-            <div class="btn-group me-2">
-              <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">Charts</a>
-            </div>
             <div class="btn-group me-2">
               <a href="{% url 'agents:agent_session_search' %}" class="btn btn-sm btn-outline-secondary">Agent prompts</a>
             </div>