From 450eda5c26bd4ca52ac3c3300b47196d441c0dba Mon Sep 17 00:00:00 2001
From: Tris Forster <tris@tfconsulting.com.au>
Date: Tue, 14 Jul 2026 08:31:32 +1000
Subject: [PATCH 1/3] Added sort columns

---
 .../library/templates/library/work_list.html  |  6 ++--
 polyphonic/library/views/__init__.py          | 31 +++++++++++++------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/polyphonic/library/templates/library/work_list.html b/polyphonic/library/templates/library/work_list.html
index d6f27a1..b668aee 100644
--- a/polyphonic/library/templates/library/work_list.html
+++ b/polyphonic/library/templates/library/work_list.html
@@ -30,7 +30,7 @@
 <div class="has-text-centered">
 <a href="?">_</a>
 {% for letter in letters %}
-<a href="?start={{ letter }}">{{ letter }}</a>&nbsp;
+<a href="?start={{ letter }}&sort={{ sort }}">{{ letter }}</a>&nbsp;
 {% endfor %}
 </div>
 {% endif %}
@@ -38,8 +38,8 @@
 <table class="table is-striped is-fullwidth">
     <thead>
         <tr>
-            <th>Work</th>
-            <th>Composer</th>
+          <th>Work <a href="?start={{ start }}&sort=name">{{ "list_arrow"|icon }}</a></th>
+          <th>Composer <a href="?start={{ start }}&sort=composer">{{ "list_arrow"|icon }}</a></th>
             <th class="is-hidden-mobile">Edition</th>
             {% if not collection %}<th class="is-hidden-touch">Collection</th>{% endif %}
         </tr>
diff --git a/polyphonic/library/views/__init__.py b/polyphonic/library/views/__init__.py
index e36dc5d..9b80e41 100644
--- a/polyphonic/library/views/__init__.py
+++ b/polyphonic/library/views/__init__.py
@@ -200,13 +200,8 @@ class WorkListView(CollectionMixin, TemplateView):
             data["meta"] = qs.meta
             # data["page_range"] = data["page_obj"]["paginator"]
         else:
-            qs = self.get_queryset()
-
-            start = self.request.GET.get("start")
-            if start:
-                start = start.upper()
-                qs = qs.filter(name__gte=start, name__lt=start + "~")
-                data["start"] = start
+            qs, ctx = self.get_filtered_queryset()
+            data.update(ctx)
 
             data["letters"] = string.ascii_uppercase
 
@@ -223,9 +218,27 @@ class WorkListView(CollectionMixin, TemplateView):
     def get_collections(self):
         raise NotImplementedError
 
-    def get_queryset(self):
+    def get_filtered_queryset(self):
         works = self.get_works()
-        return works.order_by("name", "composer", "edition", "pk").distinct()
+        ctx = {}
+
+        sort = self.request.GET.get("sort", "name").lower()
+
+        order = ["name", "composer", "edition"]
+        if sort not in order:
+            raise KeyError(f"Cannot sort by {sort}")
+        order.remove(sort)
+        order = [sort] + order + ["pk"]
+        ctx["sort"] = sort
+
+        start = self.request.GET.get("start")
+        if start:
+            start = start.upper()
+            filters = {f"{sort}__gte": start, f"{sort}__lt": start + "~"}
+            works = works.filter(**filters)
+            ctx["start"] = start
+
+        return works.order_by(*order).distinct(), ctx
 
     def get_results(self, query, page):
         try:

From 375d08488d24688b9a49b0b6ae7da3804ef6c9f4 Mon Sep 17 00:00:00 2001
From: Tris Forster <tris@tfconsulting.com.au>
Date: Tue, 14 Jul 2026 09:01:22 +1000
Subject: [PATCH 2/3] Inline icon

---
 polyphonic/library/templates/library/work_list.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/polyphonic/library/templates/library/work_list.html b/polyphonic/library/templates/library/work_list.html
index b668aee..0bab50c 100644
--- a/polyphonic/library/templates/library/work_list.html
+++ b/polyphonic/library/templates/library/work_list.html
@@ -38,10 +38,10 @@
 <table class="table is-striped is-fullwidth">
     <thead>
         <tr>
-          <th>Work <a href="?start={{ start }}&sort=name">{{ "list_arrow"|icon }}</a></th>
-          <th>Composer <a href="?start={{ start }}&sort=composer">{{ "list_arrow"|icon }}</a></th>
-            <th class="is-hidden-mobile">Edition</th>
-            {% if not collection %}<th class="is-hidden-touch">Collection</th>{% endif %}
+          <th>Work <span class="icon-text"><a href="?start={{ start }}&sort=name">{{ "list_arrow"|icon }}</a></span></th>
+          <th>Composer <span class="icon-text"><a href="?start={{ start }}&sort=composer">{{ "list_arrow"|icon }}</a></span></th>
+          <th class="is-hidden-mobile">Edition</th>
+          {% if not collection %}<th class="is-hidden-touch">Collection</th>{% endif %}
         </tr>
     </thead>
     <tbody>

From 6bb15ae8ad0a911808e30472e5b2cb0422fd5ce5 Mon Sep 17 00:00:00 2001
From: Tris Forster <tris@tfconsulting.com.au>
Date: Wed, 5 Aug 2026 07:43:41 +1000
Subject: [PATCH 3/3] Fixed up library management

---
 Makefile                                       |  17 ++++++++++++++++-
 .../static/{interface => }/css/polyphonic.css  |   0
 .../{interface => images}/background.png       | Bin
 .../static/{interface => images}/icon.png      | Bin
 .../static/{interface => }/js/interface.js     |   0
 polyphonic/interface/templates/base.html       |  14 +++++---------
 6 files changed, 21 insertions(+), 10 deletions(-)
 rename polyphonic/interface/static/{interface => }/css/polyphonic.css (100%)
 rename polyphonic/interface/static/{interface => images}/background.png (100%)
 rename polyphonic/interface/static/{interface => images}/icon.png (100%)
 rename polyphonic/interface/static/{interface => }/js/interface.js (100%)

diff --git a/Makefile b/Makefile
index 2384ba9..ce779a9 100644
--- a/Makefile
+++ b/Makefile
@@ -1,5 +1,9 @@
 PYTHON=env/bin/python
+
+LIBRARY=polyphonic/interface/static
 DROPZONE=5.7.0
+BULMA=1.0.4
+ALPINE=3.15.12
 
 VERSION=0.8.4
 
@@ -39,7 +43,18 @@ upgrade:
 	poetry run manage collectstatic
 	${MAKE} libraries
 
-libraries: static/dropzone static/fonts/Quicksand_Book.otf
+#libraries: static/dropzone static/fonts/Quicksand_Book.otf
+libraries: ${LIBRARY}/css/bulma.min.css ${LIBRARY}/js/alpine.js ${LIBRARY}/css/material.css
+
+${LIBRARY}/css/bulma.min.css:
+	curl -o $@ "https://cdn.jsdelivr.net/npm/bulma@${BULMA}/css/bulma.min.css"
+
+${LIBRARY}/js/alpine.js:
+	curl -o $@ "https://cdn.jsdelivr.net/npm/alpinejs@${ALPINE}/dist/cdn.min.js"
+
+${LIBRARY}/css/material.css:
+	curl -o $@ "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
+
 
 static/dropzone: 
 	wget -O dropzone-${DROPZONE}.zip https://github.com/enyo/dropzone/archive/v${DROPZONE}.zip
diff --git a/polyphonic/interface/static/interface/css/polyphonic.css b/polyphonic/interface/static/css/polyphonic.css
similarity index 100%
rename from polyphonic/interface/static/interface/css/polyphonic.css
rename to polyphonic/interface/static/css/polyphonic.css
diff --git a/polyphonic/interface/static/interface/background.png b/polyphonic/interface/static/images/background.png
similarity index 100%
rename from polyphonic/interface/static/interface/background.png
rename to polyphonic/interface/static/images/background.png
diff --git a/polyphonic/interface/static/interface/icon.png b/polyphonic/interface/static/images/icon.png
similarity index 100%
rename from polyphonic/interface/static/interface/icon.png
rename to polyphonic/interface/static/images/icon.png
diff --git a/polyphonic/interface/static/interface/js/interface.js b/polyphonic/interface/static/js/interface.js
similarity index 100%
rename from polyphonic/interface/static/interface/js/interface.js
rename to polyphonic/interface/static/js/interface.js
diff --git a/polyphonic/interface/templates/base.html b/polyphonic/interface/templates/base.html
index cf64fbd..a8aebbe 100644
--- a/polyphonic/interface/templates/base.html
+++ b/polyphonic/interface/templates/base.html
@@ -5,15 +5,11 @@
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/png" href="{% static 'interface/icon.png' %}" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
-    <!--link rel="stylesheet" href="{% static 'interface/css/bulmaswatch.min.css' %}"></link-->
-    <link rel="stylesheet" href="{% static 'interface/css/polyphonic.css' %}"></link>
-    <script src="{% static 'interface/js/interface.js' %}"></script>
-    <script src="//unpkg.com/alpinejs" defer></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
-    <!-- script src="//kit.fontawesome.com/c837098e5b.js" crossorigin="anonymous" defer></script -->
-    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+    <link rel="icon" type="image/png" href="{% static 'images/icon.png' %}" />
+    <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}" />
+    <link rel="stylesheet" href="{% static 'css/polyphonic.css' %}" />
+    <link rel="stylesheet" href="{% static 'css/material.css' %}" />
+    <script src="{% static 'js/interface.js' %}"></script>
     <title>{% block title %}Polyphonic{% endblock %}</title>
     {% block media %}{% endblock %}
     <style>{% block style %}{% endblock %}</style>