Vowels and consonants in all albums.

Author: goatonabicycle

templates/frontend/components/album-table.html

@@ -49,7 +49,7 @@
                     {{ end }}
                 </button>
             </th>
-            <th class="px-4 py-3 min-w-[100px]">
+            <th class="px-4 py-3 min-w-[60px]">
                 <button class="flex items-center gap-1 hover:text-white w-full"
                         hx-get="/all-albums/sort"
                         hx-target="#albums-table"
@@ -61,6 +61,30 @@
                     {{ end }}
                 </button>
             </th>
+             <th class="px-4 py-3 min-w-[60px]">
+                <button class="flex items-center gap-1 hover:text-white w-full"
+                        hx-get="/all-albums/sort"
+                        hx-target="#albums-table"
+                        hx-indicator="#loading-indicator"
+                        hx-vals='{"sort": "vowels", "dir": "{{ .NextSortDir }}"}'>
+                    Vowels
+                    {{ if eq .Sort "vowels" }}
+                        {{ if eq .SortDir "asc" }}↑{{ else }}↓{{ end }}
+                    {{ end }}
+                </button>
+            </th>
+             <th class="px-4 py-3 min-w-[60px]">
+                <button class="flex items-center gap-1 hover:text-white w-full"
+                        hx-get="/all-albums/sort"
+                        hx-target="#albums-table"
+                        hx-indicator="#loading-indicator"
+                        hx-vals='{"sort": "consonants", "dir": "{{ .NextSortDir }}"}'>
+                    Consonants
+                    {{ if eq .Sort "consonants" }}
+                        {{ if eq .SortDir "asc" }}↑{{ else }}↓{{ end }}
+                    {{ end }}
+                </button>
+            </th>
         </tr>
     </thead>
     <tbody class="divide-y divide-gray-700">
@@ -78,6 +102,8 @@
             <td class="px-4 py-3">{{ .TotalUniqueWords }}</td>
             <td class="px-4 py-3">{{ .FormattedLength }}</td>
             <td class="px-4 py-3">{{ .AverageWordsPerTrack }}</td>
+            <td class="px-4 py-3">Soon</td>
+            <td class="px-4 py-3">Soon</td>
         </tr>
         {{ end }}
     </tbody>