refactor(alpine): restructure components and remove unused utilities for better modularity and maintainability

templates/modules/category-tree.html

@@ -1,10 +1,33 @@
-<ul th:fragment="next (categories)">
-  <li th:fragment="single (categories)" th:each="category : ${categories}">
-    <a th:href="@{${category.status.permalink}}">
-      <span th:text="${category.spec.displayName}+' ('+${category.status.visiblePostCount?:0}+' 篇文章)'"> </span>
-    </a>
-    <th:block th:if="${not #lists.isEmpty(category.children)}">
+<ul th:fragment="next (categories)" class="devcm-tree__nested">
+  <li th:fragment="single (categories)" th:each="category : ${categories}" class="devcm-tree__node">
+    <details class="devcm-tree-folder" open th:if="${not #lists.isEmpty(category.children)}">
+      <summary class="devcm-tree__item devcm-tree__item--folder">
+        <span class="devcm-tree__chev" aria-hidden="true"></span>
+        <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+        <span th:text="${category.spec.displayName}">Category</span>
+        <a
+          class="devcm-tree__open"
+          th:href="@{${category.status.permalink}}"
+          th:title="#{devcm.action.open}"
+          th:aria-label="#{devcm.action.openCategory}"
+          >↗</a
+        >
+      </summary>
       <th:block th:replace="~{modules/category-tree :: next (categories=${category.children})}"></th:block>
-    </th:block>
+    </details>
+    <a
+      class="devcm-tree__item"
+      th:unless="${not #lists.isEmpty(category.children)}"
+      th:href="@{${category.status.permalink}}"
+    >
+      <span class="devcm-tree__chev" aria-hidden="true"></span>
+      <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+      <span th:text="${category.spec.displayName}">Category</span>
+      <span
+        class="devcm-tree__count"
+        th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}"
+        >0</span
+      >
+    </a>
   </li>
 </ul>