set up better ux for using categories

templates/index.html

@@ -18,6 +18,7 @@
             hx-get="/items"
             hx-target="#home-page-container"
             hx-swap="innerHTML"
+            onclick="handleLabelUpdate"
             class="inline-flex items-center h-8 px-4 m-2 text-sm text-blue-100 transition-colors duration-150 bg-blue-700 rounded-lg focus:shadow-outline hover:bg-blue-800"
           >
             Items
@@ -26,6 +27,7 @@
             hx-get="/boxes"
             hx-target="#home-page-container"
             hx-swap="innerHTML"
+            onclick="handleLabelUpdate"
             class="inline-flex items-center h-8 px-4 m-2 text-sm text-blue-100 transition-colors duration-150 bg-blue-700 rounded-lg focus:shadow-outline hover:bg-blue-800"
           >
             Boxes
@@ -34,11 +36,18 @@
         </nav>
 
         <br/>
-        <span class="text-xl">Items</span>
+        <span id="page-label" class="text-xl">Items</span>
         <div id="home-page-container">
           {{ template "items/entity-list.html" . }}
         </div>
       </div>
     </main>
+
+    <script>
+      function handleLabelUpdate() {
+        const prev = document.getElementById('page-label').innerText;
+        document.getElementById('page-label').innerText = prev === 'Items' ? 'Boxes' : 'Items';
+      }
+    </script>
   </body>
 </html>