common/static/common/styles/_forms.sass

@@ -10,6 +10,10 @@
   +margin(2, left)
 
 .form-control-sm
+  font-size: var(--fs-sm)
+  height: calc(var(--spacer) * 2)
+  +padding(0, y)
+
   &[type="file"]
     font-size: var(--fs-xs)
     height: calc(var(--spacer) * 2)
@@ -22,3 +26,8 @@
 .was-validated .form-control:invalid,
 .form-control.is-invalid
   background-image: none
+
+select
+  &.form-control
+    &:hover
+      cursor: pointer

extensions/templates/extensions/list.html

@@ -6,6 +6,26 @@
 {% block content %}
 <div class="row">
   <div class="col-md-12 my-4">
+    {% if type %}
+      <div class="align-items-center d-flex justify-content-between mb-3">
+        <h2>{{ type }}</h2>
+
+        {# TODO: @back-end add sort based on select options #}
+        <div class="box d-flex p-2">
+          <label class="align-items-center d-flex fs-sm mb-0 me-3 text-nowrap"><i class="i-repeat me-1"></i>Sort by</label>
+          <select class="form-control form-control-sm">
+            <option value="-date_approved">Newest First</option>
+            <option value="date_approved">Oldest First</option>
+            <option value="-date_modified">Recently Updated</option>
+            <option value="-total_ratings_count">Most Reviewed</option>
+            <option value="-average_score">Rating</option>
+            <option value="-download_count">Downloads</option>
+            <option value="-name">Title (A-Z)</option>
+            <option value="name">Title (Z-A)</option>
+          </select>
+        </div>
+      </div>
+    {% else %}
       {% if author %}
         <h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ author }}</em></h2>
       {% endif %}
@@ -18,21 +38,24 @@
           {% include "extensions/components/badge_tag.html" %}
         </h2>
       {% endif %}
-    {% if type %}
-      <h2>{{ type }}</h2>
-    {% endif %}
       {% if request.GET.q %}
         <h2>{{ page_obj.paginator.count }} result{{ page_obj.paginator.count | pluralize }} for <em class="search-highlight">{{ request.GET.q }}</em></h2>
       {% endif %}
+    {% endif %}
 
     {% if tags %}
-      <div class="row">
+      <div class="mb-3 row">
         <div class="col-md-12">
           <div class="box p-2">
             <div class="btn-row">
               {# TODO: @back-end add conditional link to either Add-ons or Themes pages #}
-              <a class="btn btn-sm {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
+              <a class="align-items-center btn btn-sm d-flex {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
+                <div>
                   All
+                </div>
+                <div class="align-items-center bg-primary d-flex h-3 fs-xs justify-content-center ms-2 rounded-circle w-3">
+                  1
+                </div>
               </a>
               {% for list_tag in tags %}
                 <a class="align-items-center btn btn-sm d-flex {% if tag == list_tag %}btn-primary{% endif %}" href="{% url "extensions:by-tag" tag_slug=list_tag.slug %}" title="{{ list_tag.name }}">
@@ -40,11 +63,9 @@
                     {{ list_tag.name }}
                   </div>
                   {# TODO: @back-end add tags count dynamic #}
-                  {% comment %}
                   <div class="align-items-center bg-primary d-flex h-3 fs-xs justify-content-center ms-2 rounded-circle w-3">
                     1
                   </div>
-                  {% endcomment %}
                 </a>
               {% endfor %}
             </div>