Collapse the lesson-type filter behind a Show Only button

The filter took a row of the booking calendar before a student had asked for it. The view toggle and a new "Show Only" button now share one control row, and the lesson-type list is revealed between that row and the calendar. The list stays open across re-renders once revealed, and collapsing it leaves the filter applied — the button keeps its active styling and carries the number of ticked types, so a collapsed filter is never invisible. Closes #119 Co-Authored-By: Claude Opus 5 <[email protected]>
2026-07-28 12:47:24 -03:00
parent add6605141
commit 9d11cc3b01
5 changed files with 95 additions and 37 deletions
@@ -117,6 +117,29 @@
    color: #8a6d1a;
 }

+.us-calendar-controls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.us-filter-toggle {
+    padding: 6px 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+}
+
+.us-filter-toggle.us-active {
+    background: #333;
+    border-color: #333;
+    color: #fff;
+}
+
 .us-type-filter {
    display: flex;
    flex-wrap: wrap;
@@ -150,7 +173,6 @@
 .us-view-toggle {
    display: flex;
    gap: 8px;
-    margin-bottom: 12px;
 }

 .us-view-toggle button {