Collapsible sort on the grid

.env.sample

@@ -239,6 +239,10 @@
 # Default: false
 # BK_SHOW_GRID_FILTERS=true
 
+# Optional: Make the grid sort displayed by default, rather than collapsed
+# Default: false
+# BK_SHOW_GRID_SORT=true
+
 # Optional: Skip saving or displaying spare parts
 # Default: false
 # BK_SKIP_SPARE_PARTS=true

CHANGELOG.md

@@ -11,6 +11,8 @@
 - Renamed: `BK_HIDE_MISSING_PARTS` -> `BK_HIDE_ALL_PROBLEMS_PARTS`
 - Added: `BK_HIDE_TABLE_MISSING_PARTS`, hide the Missing column in all tables
 - Added: `BK_HIDE_TABLE_DAMAGED_PARTS`, hide the Damaged column in all tables
+- Added: `BK_SHOW_GRID_SORT`, show the sort options on the grid by default
+- Added: `BK_SHOW_GRID_FILTERS`, show the filter options on the grid by default
 
 ### Code
 
@@ -82,6 +84,7 @@ Parts
 - Sets grid
     - Collapsible controls depending on screen size
     - Manually collapsible filters (with configuration variable for default state)
+    - Manually collapsible sort (with configuration variable for default state)
 
 ## 1.1.1: PDF Instructions Download
 

bricktracker/config.py

@@ -55,6 +55,7 @@ CONFIG: Final[list[dict[str, Any]]] = [
     {'n': 'SETS_DEFAULT_ORDER', 'd': '"rebrickable_sets"."number" DESC, "rebrickable_sets"."version" ASC'},  # noqa: E501
     {'n': 'SETS_FOLDER', 'd': 'sets', 's': True},
     {'n': 'SHOW_GRID_FILTERS', 'c': bool},
+    {'n': 'SHOW_GRID_SORT', 'c': bool},
     {'n': 'SKIP_SPARE_PARTS', 'c': bool},
     {'n': 'SOCKET_NAMESPACE', 'd': 'bricksocket'},
     {'n': 'SOCKET_PATH', 'd': '/bricksocket/'},

templates/sets.html

@@ -14,7 +14,23 @@
       </div>
     </div>
     <div class="col-12">
-      <div id="grid-sort" class="input-group">
+      <div class="input-group">
+        <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#grid-sort" aria-expanded="{% if config['SHOW_GRID_SORT'] %}true{% else %}false{% endif %}" aria-controls="grid-sort">
+          <i class="ri-sort-asc"></i> Sort
+        </button>
+      </div>
+    </div>
+    <div class="col-12">
+      <div class="input-group">
+        <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#grid-filter" aria-expanded="{% if config['SHOW_GRID_FILTERS'] %}true{% else %}false{% endif %}" aria-controls="grid-filter">
+          <i class="ri-filter-line"></i> Filters
+        </button>
+      </div>
+    </div>
+  </div>
+  <div id="grid-sort" class="collapse {% if config['SHOW_GRID_SORT'] %}show{% endif %} row row-cols-lg-auto g-1 justify-content-center align-items-center pb-2">
+    <div class="col-12 flex-grow-1">
+      <div class="input-group">
         <span class="input-group-text"><i class="ri-sort-asc"></i><span class="ms-1 d-none d-xxl-inline"> Sort</span></span>
         <button id="sort-number" type="button" class="btn btn-outline-primary"
           data-sort-attribute="number" data-sort-natural="true"><i class="ri-hashtag"></i><span class="d-none d-xxl-inline"> Set</span></button>
@@ -36,13 +52,6 @@
           data-sort-clear="true"><i class="ri-close-circle-line"></i><span class="d-none d-xxl-inline"> Clear</span></button>
       </div>
     </div>
-    <div class="col-12">
-      <div class="input-group">
-        <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#grid-filter" aria-expanded="{% if config['SHOW_GRID_FILTERS'] %}true{% else %}false{% endif %}" aria-controls="grid-filter">
-          <i class="ri-filter-line"></i> Filters
-        </button>
-      </div>
-    </div>
   </div>
   <div id="grid-filter" class="collapse {% if config['SHOW_GRID_FILTERS'] %}show{% endif %} row row-cols-lg-auto g-1 justify-content-center align-items-center pb-2">
     <div class="col-12 flex-grow-1">