From cd8371b80497443800012caedd913a02db404339 Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Tue, 12 Mar 2024 09:40:59 +0100
Subject: [PATCH 01/13] Rename options to options

---
 app/views/activity_read_states/index.html.erb |  2 +-
 app/views/annotations/question_index.html.erb |  8 ++++----
 app/views/courses/index.html.erb              |  2 +-
 app/views/courses/scoresheet.html.erb         |  2 +-
 app/views/layouts/_searchbar.html.erb         |  6 +++---
 app/views/series/scoresheet.html.erb          |  2 +-
 app/views/submissions/index.html.erb          | 11 +++++++----
 7 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/app/views/activity_read_states/index.html.erb b/app/views/activity_read_states/index.html.erb
index c7004be0fe..d82a8c2672 100644
--- a/app/views/activity_read_states/index.html.erb
+++ b/app/views/activity_read_states/index.html.erb
@@ -34,7 +34,7 @@
         <% end %>
       </div>
       <div class="card-supporting-text" id="refresh_element">
-        <%= render partial: 'layouts/searchbar', locals: {actions: [], course_labels: @course_labels,  refresh_element: "#refresh_element"} %>
+        <%= render partial: 'layouts/searchbar', locals: {course_labels: @course_labels,  refresh_element: "#refresh_element"} %>
         <div id="read-states-table-wrapper">
           <%= render partial: 'read_states_table', locals: { read_states: @read_states, activity: @activity, course: @course, user: @user} %>
         </div>
diff --git a/app/views/annotations/question_index.html.erb b/app/views/annotations/question_index.html.erb
index cd2b08c4aa..ebbb8ed75a 100644
--- a/app/views/annotations/question_index.html.erb
+++ b/app/views/annotations/question_index.html.erb
@@ -21,12 +21,12 @@
         </h2>
       </div>
       <div class="card-supporting-text" id="question-container">
-        <% actions = [] %>
+        <% options = [] %>
         <% if current_user&.a_course_admin? %>
-          <% actions << { text: t('questions.index.watch'), search: { refresh: true }, click: 'window.dodona.toggleIndexReload()' } %>
-          <% actions << { text: t('questions.index.everything'), search: { everything: true } } if @unfiltered %>
+          <% options << { text: t('questions.index.watch'), search: { refresh: true } } %>
+          <% options << { text: t('questions.index.everything'), search: { everything: true } } if @unfiltered %>
         <% end %>
-        <%= render partial: 'layouts/searchbar', locals: { actions: actions, refresh_element: "#question-container", courses: @courses, question_states: Question.question_states.keys } %>
+        <%= render partial: 'layouts/searchbar', locals: { options: options, refresh_element: "#question-container", courses: @courses, question_states: Question.question_states.keys } %>
         <div id="questions-table-wrapper">
           <%= render partial: 'questions_table_with_pagination', locals: { questions: @questions } %>
         </div>
diff --git a/app/views/courses/index.html.erb b/app/views/courses/index.html.erb
index 9732465383..8274feadf6 100644
--- a/app/views/courses/index.html.erb
+++ b/app/views/courses/index.html.erb
@@ -25,7 +25,7 @@
           labels << { name: t('courses.index.my_courses'), id: 'my' } if @show_my_courses
         %>
         <d-filter-tabs labels="<%= labels.to_json %>"></d-filter-tabs>
-        <%= render partial: 'layouts/searchbar', locals: {institutions: Institution.all, eager: true, no_dropdown_for: ["institutions"], actions: [{search: {can_register: true}, type: 'can-register', text: "#{t(".only_show_can_register")}"}]  } %>
+        <%= render partial: 'layouts/searchbar', locals: {institutions: Institution.all, eager: true, no_dropdown_for: ["institutions"], options: [{search: {can_register: true}, text: "#{t(".only_show_can_register")}"}]  } %>
         <div id="courses-table-wrapper"></div>
       </div>
     </div>
diff --git a/app/views/courses/scoresheet.html.erb b/app/views/courses/scoresheet.html.erb
index 5b4de9681c..cae9dd738a 100644
--- a/app/views/courses/scoresheet.html.erb
+++ b/app/views/courses/scoresheet.html.erb
@@ -26,7 +26,7 @@
           <% end %>
         </div>
         <%= render partial: 'layouts/searchbar', locals: {
-            actions: [
+          options: [
                 { text: t('.at_least_one_started'), search: { at_least_one_started: true } }
             ],
             course_labels: @course_labels,
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index 5a16f25173..0770400388 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -9,11 +9,11 @@
       <d-search-field placeholder="<%= t("layout.search.search") %>"></d-search-field>
       <d-loading-bar></d-loading-bar>
     </form>
-    <% if local_assigns[:actions]&.any? %>
-      <d-search-actions actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'></d-search-actions>
-    <% end %>
   </div>
   <d-dropdown-filters class="dropdown-filters"></d-dropdown-filters>
+  <% if local_assigns[:actions]&.any? %>
+    <d-search-actions actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'></d-search-actions>
+  <% end %>
 </div>
 
 <script type="text/javascript">
diff --git a/app/views/series/scoresheet.html.erb b/app/views/series/scoresheet.html.erb
index edd388f6e4..0d8590ed76 100644
--- a/app/views/series/scoresheet.html.erb
+++ b/app/views/series/scoresheet.html.erb
@@ -29,7 +29,7 @@
         </div>
         <% if @series.activities.any? %>
           <%= render partial: 'layouts/searchbar', locals: {
-              actions: [
+            options: [
                   { text: t('.at_least_one_started'), search: { at_least_one_started: true } }
               ],
               course_labels: @course_labels
diff --git a/app/views/submissions/index.html.erb b/app/views/submissions/index.html.erb
index fdc9b655e4..c2f46a3bf0 100644
--- a/app/views/submissions/index.html.erb
+++ b/app/views/submissions/index.html.erb
@@ -34,15 +34,18 @@
         <% end %>
       </div>
       <div class="card-supporting-text" id="refresh_element">
-        <% actions = [] %>
+        <%
+          actions = []
+          options = []
+        %>
         <% if current_user&.course_admin?(@course) %>
           <%
              actions << {icon: 'replay', text: t(".reevaluate_submissions"), confirm: t(".confirm_reevaluate_submissions"), action: mass_rejudge_submissions_path(user_id: @user&.id, activity_id: @activity&.id, course_id: @course&.id, series_id: @series&.id, judge_id: @judge&.id)} if policy(Submission).mass_rejudge?
-             actions << {icon: 'done', text: t('.most_recent'), search: {most_recent_per_user: true}} if @activity
-             actions << {icon: 'file-eye', text: t('.watch_submissions'), search: {refresh: true}, click: 'window.dodona.toggleIndexReload()'}
+             options << {text: t('.most_recent'), search: {most_recent_per_user: true}} if @activity
+             options << {text: t('.watch_submissions'), search: {refresh: true}}
           %>
         <% end %>
-        <%= render partial: 'layouts/searchbar', locals: {actions: actions, course_labels: @course_labels, statuses: Submission.statuses.keys, refresh_element: "#refresh_element"} %>
+        <%= render partial: 'layouts/searchbar', locals: {actions: actions, options: options, course_labels: @course_labels, statuses: Submission.statuses.keys, refresh_element: "#refresh_element"} %>
         <div id="submissions-table-wrapper">
           <%= render partial: 'submissions_table', locals: {submissions: @submissions, exercise: @activity, course: @course, user: @user} %>
         </div>

From 9435ca299676238c457daf33554338f3a547fb8b Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Tue, 12 Mar 2024 10:13:13 +0100
Subject: [PATCH 02/13] Separate and simplify search options

---
 .../components/search/search_actions.ts       | 90 ++---------------
 .../components/search/search_option.ts        | 98 +++++++++++++++++++
 app/views/annotations/question_index.html.erb |  4 +-
 app/views/courses/index.html.erb              |  2 +-
 app/views/courses/scoresheet.html.erb         |  2 +-
 app/views/layouts/_searchbar.html.erb         |  8 +-
 app/views/series/scoresheet.html.erb          |  2 +-
 app/views/submissions/index.html.erb          |  4 +-
 8 files changed, 118 insertions(+), 92 deletions(-)
 create mode 100644 app/assets/javascripts/components/search/search_option.ts

diff --git a/app/assets/javascripts/components/search/search_actions.ts b/app/assets/javascripts/components/search/search_actions.ts
index bbaee86266..8cd234ea01 100644
--- a/app/assets/javascripts/components/search/search_actions.ts
+++ b/app/assets/javascripts/components/search/search_actions.ts
@@ -1,12 +1,9 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { Toast } from "toast";
-import { fetch, ready } from "utilities";
+import { fetch } from "utilities";
 import { searchQueryState } from "state/SearchQuery";
 import { DodonaElement } from "components/meta/dodona_element";
-import { i18n } from "i18n/i18n";
-
-export type SearchOption = {search: Record<string, string>, type?: string, text: string};
 export type SearchAction = {
     url?: string,
     type?: string,
@@ -17,63 +14,6 @@ export type SearchAction = {
     icon: string
 };
 
-const isSearchOption = (opt): opt is SearchOption => (opt as SearchOption).search !== undefined;
-const isSearchAction = (act): act is SearchAction => (act as SearchAction).js !== undefined || (act as SearchAction).action !== undefined || (act as SearchAction).url !== undefined;
-
-/**
- * This component represents a SearchOption using a checkbox to be used in a dropdown list
- * The checkbox tracks whether the searchoption is curently active
- *
- * @element d-search-option
- *
- * @prop {SearchOption} searchOption - the search option which can be activated or disabled
- * @prop {number} key - unique identifier used to differentiate from other search options
- */
-@customElement("d-search-option")
-export class SearchOptionElement extends DodonaElement {
-    @property({ type: Object })
-    searchOption: SearchOption;
-    @property( { type: Number })
-    key: number;
-
-    get active(): boolean {
-        return Object.entries(this.searchOption.search).every(([key, value]) => {
-            return searchQueryState.queryParams.get(key) == value.toString();
-        });
-    }
-
-    performSearch(): void {
-        if (!this.active) {
-            Object.entries(this.searchOption.search).forEach(([key, value]) => {
-                searchQueryState.queryParams.set(key, value.toString());
-            });
-        } else {
-            Object.keys(this.searchOption.search).forEach(key => {
-                searchQueryState.queryParams.set(key, undefined);
-            });
-        }
-    }
-
-    render(): TemplateResult {
-        return html`
-                    <li><span class="dropdown-item-text ">
-                        <div class="form-check">
-                            <input
-                                class="form-check-input"
-                                type="checkbox"
-                                .checked=${this.active}
-                                @click="${() => this.performSearch()}"
-                                id="check-${this.searchOption.type}-${this.key}"
-                            >
-                            <label class="form-check-label" for="check-${this.searchOption.type}-${this.key}">
-                                ${this.searchOption.text}
-                            </label>
-                        </div>
-                    </span></li>
-        `;
-    }
-}
-
 /**
  * This component represents a dropdown containing a combination of SearchOptions and SearchActions
  *
@@ -84,15 +24,7 @@ export class SearchOptionElement extends DodonaElement {
 @customElement("d-search-actions")
 export class SearchActions extends DodonaElement {
     @property({ type: Array })
-    actions: (SearchOption|SearchAction)[] = [];
-
-    getSearchOptions(): Array<SearchOption> {
-        return this.actions.filter(isSearchOption);
-    }
-
-    getSearchActions(): Array<SearchAction> {
-        return this.actions.filter(isSearchAction);
-    }
+    actions: SearchAction[] = [];
 
     async performAction(action: SearchAction): Promise<boolean> {
         if (!action.action && !action.js) {
@@ -126,25 +58,17 @@ export class SearchActions extends DodonaElement {
 
 
     render(): TemplateResult {
+        if (this.actions.length === 0) {
+            return html``;
+        }
+
         return html`
             <div class="dropdown actions" id="kebab-menu">
                 <a class="btn btn-icon dropdown-toggle" data-bs-toggle="dropdown">
                     <i class="mdi mdi-dots-vertical"></i>
                 </a>
                 <ul class="dropdown-menu dropdown-menu-end">
-                    ${this.getSearchOptions().length > 0 ? html`
-                        <li><h6 class='dropdown-header'>${i18n.t("js.options")}</h6></li>
-                    ` : html``}
-                    ${this.getSearchOptions().map((opt, id) => html`
-                        <d-search-option .searchOption=${opt}
-                                         .key=${id}>
-                        </d-search-option>
-                    `)}
-
-                    ${this.getSearchActions().length > 0 ? html`
-                        <li><h6 class='dropdown-header'>${i18n.t("js.actions")}</h6></li>
-                    ` : html``}
-                    ${this.getSearchActions().map(action => html`
+                    ${this.actions.map(action => html`
                         <li>
                             <a class="action dropdown-item"
                                href='${action.url ? action.url : "#"}'
diff --git a/app/assets/javascripts/components/search/search_option.ts b/app/assets/javascripts/components/search/search_option.ts
new file mode 100644
index 0000000000..d71022dfaf
--- /dev/null
+++ b/app/assets/javascripts/components/search/search_option.ts
@@ -0,0 +1,98 @@
+import { customElement, property } from "lit/decorators.js";
+import { DodonaElement } from "components/meta/dodona_element";
+import { searchQueryState } from "state/SearchQuery";
+import { html, TemplateResult } from "lit";
+import { i18n } from "i18n/i18n";
+
+type option = {param: string, label: string};
+
+/**
+ * This component represents a boolean option for search using a checkbox
+ * The checkbox tracks whether the search option is curently active
+ *
+ * @element d-search-option
+ *
+ * @prop {string} param - the name of the search parameter
+ * @prop {string} label - the label to be displayed next to the checkbox
+ */
+@customElement("d-search-option")
+export class SearchOptionElement extends DodonaElement {
+    @property({ type: String })
+    param = "";
+    @property({ type: String })
+    label = "";
+
+    get active(): boolean {
+        return searchQueryState.queryParams.get(this.param) !== undefined;
+    }
+
+    toggle(): void {
+        if (this.active) {
+            searchQueryState.queryParams.set(this.param, undefined);
+        } else {
+            searchQueryState.queryParams.set(this.param, "true");
+        }
+    }
+
+    render(): TemplateResult {
+        return html`
+            <div class="form-check">
+                <input
+                    class="form-check-input"
+                    type="checkbox"
+                    .checked=${this.active}
+                    @click="${() => this.toggle()}"
+                    id="check-${this.param}"
+                >
+                <label class="form-check-label" for="check-${this.param}">
+                    ${this.label}
+                </label>
+            </div>
+        `;
+    }
+}
+
+/**
+ * This component represents a list op boolean options for search
+ * The options are displayed in a dropdown
+ * Unless there is only one option, in which case it is displayed as a single checkbox
+ *
+ * @element d-search-options
+ *
+ * @prop {option[]} options - the list of options to be displayed
+ */
+@customElement("d-search-options")
+export class SearchOptions extends DodonaElement {
+    @property({ type: Array })
+    options: option[] = [];
+
+    get activeOptions(): option[] {
+        return this.options.filter(option => searchQueryState.queryParams.get(option.param) !== undefined);
+    }
+
+    render(): TemplateResult {
+        if (this.options.length === 0) {
+            return html``;
+        } else if (this.options.length === 1) {
+            return html`<d-search-option param="${this.options[0].param}" label="${this.options[0].label}"></d-search-option>`;
+        }
+
+
+        return html`
+            <div class="dropdown dropdown-filter">
+                <a class="btn btn-outline dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+                    ${this.activeOptions.map( () => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-deep-purple left-icon"></i>`)}
+                    ${i18n.t(`js.dropdown.multi.search_options`)}
+                    <i class="mdi mdi-chevron-down mdi-18 right-icon"></i>
+                </a>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                    ${this.options.map(o => html`
+                        <li><span class="dropdown-item-text ">
+                            <d-search-option param="${o.param}" label="${o.label}"></d-search-option>
+                        </span></li>
+                    `)}
+                </ul>
+            </div>
+        `;
+    }
+}
diff --git a/app/views/annotations/question_index.html.erb b/app/views/annotations/question_index.html.erb
index ebbb8ed75a..beed5c2e38 100644
--- a/app/views/annotations/question_index.html.erb
+++ b/app/views/annotations/question_index.html.erb
@@ -23,8 +23,8 @@
       <div class="card-supporting-text" id="question-container">
         <% options = [] %>
         <% if current_user&.a_course_admin? %>
-          <% options << { text: t('questions.index.watch'), search: { refresh: true } } %>
-          <% options << { text: t('questions.index.everything'), search: { everything: true } } if @unfiltered %>
+          <% options << { label: t('questions.index.watch'), param: 'refresh' } %>
+          <% options << { label: t('questions.index.everything'), param: 'everything' } if @unfiltered %>
         <% end %>
         <%= render partial: 'layouts/searchbar', locals: { options: options, refresh_element: "#question-container", courses: @courses, question_states: Question.question_states.keys } %>
         <div id="questions-table-wrapper">
diff --git a/app/views/courses/index.html.erb b/app/views/courses/index.html.erb
index 8274feadf6..da1d490fd4 100644
--- a/app/views/courses/index.html.erb
+++ b/app/views/courses/index.html.erb
@@ -25,7 +25,7 @@
           labels << { name: t('courses.index.my_courses'), id: 'my' } if @show_my_courses
         %>
         <d-filter-tabs labels="<%= labels.to_json %>"></d-filter-tabs>
-        <%= render partial: 'layouts/searchbar', locals: {institutions: Institution.all, eager: true, no_dropdown_for: ["institutions"], options: [{search: {can_register: true}, text: "#{t(".only_show_can_register")}"}]  } %>
+        <%= render partial: 'layouts/searchbar', locals: {institutions: Institution.all, eager: true, no_dropdown_for: ["institutions"], options: [{param: 'can_register', label: "#{t(".only_show_can_register")}"}]  } %>
         <div id="courses-table-wrapper"></div>
       </div>
     </div>
diff --git a/app/views/courses/scoresheet.html.erb b/app/views/courses/scoresheet.html.erb
index cae9dd738a..2231c8b9ab 100644
--- a/app/views/courses/scoresheet.html.erb
+++ b/app/views/courses/scoresheet.html.erb
@@ -27,7 +27,7 @@
         </div>
         <%= render partial: 'layouts/searchbar', locals: {
           options: [
-                { text: t('.at_least_one_started'), search: { at_least_one_started: true } }
+                { label: t('.at_least_one_started'), param: 'at_least_one_started' }
             ],
             course_labels: @course_labels,
             eager: true
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index 0770400388..cc9645e285 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -9,11 +9,15 @@
       <d-search-field placeholder="<%= t("layout.search.search") %>"></d-search-field>
       <d-loading-bar></d-loading-bar>
     </form>
+    <% if local_assigns[:actions]&.any? %>
+      <d-search-actions actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'></d-search-actions>
+    <% end %>
   </div>
   <d-dropdown-filters class="dropdown-filters"></d-dropdown-filters>
-  <% if local_assigns[:actions]&.any? %>
-    <d-search-actions actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'></d-search-actions>
+  <% if local_assigns[:options]&.any? %>
+    <d-search-options options='<%= raw (local_assigns.fetch :options, false).to_json %>'></d-search-options>
   <% end %>
+
 </div>
 
 <script type="text/javascript">
diff --git a/app/views/series/scoresheet.html.erb b/app/views/series/scoresheet.html.erb
index 0d8590ed76..a108e9a708 100644
--- a/app/views/series/scoresheet.html.erb
+++ b/app/views/series/scoresheet.html.erb
@@ -30,7 +30,7 @@
         <% if @series.activities.any? %>
           <%= render partial: 'layouts/searchbar', locals: {
             options: [
-                  { text: t('.at_least_one_started'), search: { at_least_one_started: true } }
+                  { label: t('.at_least_one_started'), param: 'at_least_one_started' }
               ],
               course_labels: @course_labels
           } %>
diff --git a/app/views/submissions/index.html.erb b/app/views/submissions/index.html.erb
index c2f46a3bf0..cdfab70db7 100644
--- a/app/views/submissions/index.html.erb
+++ b/app/views/submissions/index.html.erb
@@ -41,8 +41,8 @@
         <% if current_user&.course_admin?(@course) %>
           <%
              actions << {icon: 'replay', text: t(".reevaluate_submissions"), confirm: t(".confirm_reevaluate_submissions"), action: mass_rejudge_submissions_path(user_id: @user&.id, activity_id: @activity&.id, course_id: @course&.id, series_id: @series&.id, judge_id: @judge&.id)} if policy(Submission).mass_rejudge?
-             options << {text: t('.most_recent'), search: {most_recent_per_user: true}} if @activity
-             options << {text: t('.watch_submissions'), search: {refresh: true}}
+             options << {label: t('.most_recent'), param: 'most_recent_per_user'} if @activity
+             options << {label: t('.watch_submissions'), param: 'refresh'}
           %>
         <% end %>
         <%= render partial: 'layouts/searchbar', locals: {actions: actions, options: options, course_labels: @course_labels, statuses: Submission.statuses.keys, refresh_element: "#refresh_element"} %>

From b0e85bdc122a050cf8c0f19860cc436acf642076 Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Tue, 12 Mar 2024 10:36:54 +0100
Subject: [PATCH 03/13] Fix misc

---
 .../javascripts/components/search/search_option.ts    |  6 +-----
 app/assets/javascripts/i18n/translations.json         |  2 ++
 app/assets/stylesheets/material_icons.css.scss        |  4 ++++
 app/javascript/packs/search.js                        |  1 +
 app/views/layouts/_searchbar.html.erb                 | 11 ++++++-----
 config/locales/js/en.yml                              |  1 +
 config/locales/js/nl.yml                              |  1 +
 7 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/components/search/search_option.ts b/app/assets/javascripts/components/search/search_option.ts
index d71022dfaf..e439daa3d8 100644
--- a/app/assets/javascripts/components/search/search_option.ts
+++ b/app/assets/javascripts/components/search/search_option.ts
@@ -55,7 +55,6 @@ export class SearchOptionElement extends DodonaElement {
 /**
  * This component represents a list op boolean options for search
  * The options are displayed in a dropdown
- * Unless there is only one option, in which case it is displayed as a single checkbox
  *
  * @element d-search-options
  *
@@ -73,15 +72,12 @@ export class SearchOptions extends DodonaElement {
     render(): TemplateResult {
         if (this.options.length === 0) {
             return html``;
-        } else if (this.options.length === 1) {
-            return html`<d-search-option param="${this.options[0].param}" label="${this.options[0].label}"></d-search-option>`;
         }
 
-
         return html`
             <div class="dropdown dropdown-filter">
                 <a class="btn btn-outline dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
-                    ${this.activeOptions.map( () => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-deep-purple left-icon"></i>`)}
+                    ${this.activeOptions.map( () => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-gray left-icon"></i>`)}
                     ${i18n.t(`js.dropdown.multi.search_options`)}
                     <i class="mdi mdi-chevron-down mdi-18 right-icon"></i>
                 </a>
diff --git a/app/assets/javascripts/i18n/translations.json b/app/assets/javascripts/i18n/translations.json
index 75631ffce4..a434838fb0 100644
--- a/app/assets/javascripts/i18n/translations.json
+++ b/app/assets/javascripts/i18n/translations.json
@@ -201,6 +201,7 @@
           "programming_languages": "Programming Languages",
           "question_states": "Statuses",
           "repositories": "Repositories",
+          "search_options": "Options",
           "statuses": "Statuses"
         },
         "search": "Search",
@@ -726,6 +727,7 @@
           "programming_languages": "Programmeertalen",
           "question_states": "Toestanden",
           "repositories": "Repository's",
+          "search_options": "Opties",
           "statuses": "Statussen"
         },
         "search": "Zoeken",
diff --git a/app/assets/stylesheets/material_icons.css.scss b/app/assets/stylesheets/material_icons.css.scss
index 224938efbf..fa36b7fb5b 100644
--- a/app/assets/stylesheets/material_icons.css.scss
+++ b/app/assets/stylesheets/material_icons.css.scss
@@ -246,4 +246,8 @@
   &.accent-cyan {
     color: var(--d-cyan-container);
   }
+
+  &.accent-gray {
+    color: var(--d-gray-container);
+  }
 }
diff --git a/app/javascript/packs/search.js b/app/javascript/packs/search.js
index 1063496f79..00f37d725e 100644
--- a/app/javascript/packs/search.js
+++ b/app/javascript/packs/search.js
@@ -10,5 +10,6 @@ import "components/search/dropdown_filter";
 import "components/search/filter_tabs";
 import "components/search/standalone-dropdown-filter";
 import "components/search/loading_bar";
+import "components/search/search_option.ts";
 
 window.dodona.search = search;
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index cc9645e285..8817608dd4 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -13,11 +13,12 @@
       <d-search-actions actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'></d-search-actions>
     <% end %>
   </div>
-  <d-dropdown-filters class="dropdown-filters"></d-dropdown-filters>
-  <% if local_assigns[:options]&.any? %>
-    <d-search-options options='<%= raw (local_assigns.fetch :options, false).to_json %>'></d-search-options>
-  <% end %>
-
+  <div>
+    <d-dropdown-filters class="dropdown-filters"></d-dropdown-filters>
+    <% if local_assigns[:options]&.any? %>
+      <d-search-options options='<%= raw (local_assigns.fetch :options, false).to_json %>'></d-search-options>
+    <% end %>
+  </div>
 </div>
 
 <script type="text/javascript">
diff --git a/config/locales/js/en.yml b/config/locales/js/en.yml
index d4bab5d56f..800fa3b843 100644
--- a/config/locales/js/en.yml
+++ b/config/locales/js/en.yml
@@ -241,6 +241,7 @@ en:
         courses: Courses
         question_states: Statuses
         popularity: Popularity
+        search_options: Options
       single:
         labels: Label
         programming_languages: Programming Language
diff --git a/config/locales/js/nl.yml b/config/locales/js/nl.yml
index 81d7882eb9..845cafa1bc 100644
--- a/config/locales/js/nl.yml
+++ b/config/locales/js/nl.yml
@@ -241,6 +241,7 @@ nl:
         courses: Cursussen
         question_states: Toestanden
         popularity: Populariteit
+        search_options: Opties
       single:
         labels: Label
         programming_languages: Programmeertaal

From 6178360f51b2bc0e5f1b6431c0475fdd030f1984 Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Tue, 12 Mar 2024 11:16:26 +0100
Subject: [PATCH 04/13] Make actions into buttons

---
 .../components/search/search_actions.ts       | 33 +++++++------------
 .../components/table-toolbar.css.scss         |  4 ---
 app/views/layouts/_searchbar.html.erb         |  9 ++---
 3 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/components/search/search_actions.ts b/app/assets/javascripts/components/search/search_actions.ts
index 8cd234ea01..ed15546c76 100644
--- a/app/assets/javascripts/components/search/search_actions.ts
+++ b/app/assets/javascripts/components/search/search_actions.ts
@@ -57,31 +57,20 @@ export class SearchActions extends DodonaElement {
     }
 
 
-    render(): TemplateResult {
+    render(): TemplateResult | TemplateResult[] {
         if (this.actions.length === 0) {
             return html``;
         }
 
-        return html`
-            <div class="dropdown actions" id="kebab-menu">
-                <a class="btn btn-icon dropdown-toggle" data-bs-toggle="dropdown">
-                    <i class="mdi mdi-dots-vertical"></i>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    ${this.actions.map(action => html`
-                        <li>
-                            <a class="action dropdown-item"
-                               href='${action.url ? action.url : "#"}'
-                               data-type="${action.type}"
-                               @click=${() => this.performAction(action)}
-                            >
-                                <i class='mdi mdi-${action.icon} mdi-18'></i>
-                                ${action.text}
-                            </a>
-                        </li>
-                    `)}
-                </ul>
-            </div>
-        `;
+        return this.actions.map(action => html`
+            <a class="btn btn-outline with-icon m-2 me-0"
+               href='${action.url ? action.url : "#"}'
+               data-type="${action.type}"
+               @click=${() => this.performAction(action)}
+            >
+                <i class='mdi mdi-${action.icon} mdi-18'></i>
+                ${action.text}
+            </a>
+        `);
     }
 }
diff --git a/app/assets/stylesheets/components/table-toolbar.css.scss b/app/assets/stylesheets/components/table-toolbar.css.scss
index 6b3878880a..61b6c7aad7 100644
--- a/app/assets/stylesheets/components/table-toolbar.css.scss
+++ b/app/assets/stylesheets/components/table-toolbar.css.scss
@@ -9,10 +9,6 @@
   color: var(--d-on-surface);
   margin-bottom: 6px;
 
-  .btn {
-    font-size: 18px;
-  }
-
   .dropdown-filters {
     margin-left: 8px;
   }
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index 8817608dd4..e9b81f27f3 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -9,15 +9,16 @@
       <d-search-field placeholder="<%= t("layout.search.search") %>"></d-search-field>
       <d-loading-bar></d-loading-bar>
     </form>
-    <% if local_assigns[:actions]&.any? %>
-      <d-search-actions actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'></d-search-actions>
-    <% end %>
   </div>
-  <div>
+  <div class="d-flex">
     <d-dropdown-filters class="dropdown-filters"></d-dropdown-filters>
     <% if local_assigns[:options]&.any? %>
       <d-search-options options='<%= raw (local_assigns.fetch :options, false).to_json %>'></d-search-options>
     <% end %>
+    <% if local_assigns[:actions]&.any? %>
+      <div class="flex-spacer"></div>
+      <d-search-actions actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'></d-search-actions>
+    <% end %>
   </div>
 </div>
 

From 71af6bb7ea91784f6e093c699c36c8b5320a4542 Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Tue, 12 Mar 2024 15:21:03 +0100
Subject: [PATCH 05/13] Fixcourse member tabs

---
 .../components/search/filter_tabs.ts          |  5 +-
 .../components/search/search_actions.ts       | 20 ++++--
 app/assets/javascripts/course.ts              | 67 -------------------
 app/assets/stylesheets/models/course.css.scss |  5 +-
 app/views/course_members/index.html.erb       | 25 +++----
 app/views/layouts/_searchbar.html.erb         |  7 +-
 6 files changed, 37 insertions(+), 92 deletions(-)

diff --git a/app/assets/javascripts/components/search/filter_tabs.ts b/app/assets/javascripts/components/search/filter_tabs.ts
index be9731a213..743ff9c7ec 100644
--- a/app/assets/javascripts/components/search/filter_tabs.ts
+++ b/app/assets/javascripts/components/search/filter_tabs.ts
@@ -3,6 +3,8 @@ import { customElement, property } from "lit/decorators.js";
 import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
 import { watchMixin } from "components/meta/watch_mixin";
 
+type TabInfo = {id: string, name: string, title?: string, count?: number};
+
 /**
  * This component inherits from FilterCollectionElement.
  * It represent a list of tabs, where each tab shows a filtered set of the search results
@@ -20,7 +22,7 @@ export class FilterTabs extends watchMixin(FilterCollectionElement) {
     @property()
     paramVal = (label: Label): string => label.id.toString();
     @property({ type: Array })
-    labels: {id: string, name: string, title: string}[];
+    labels: TabInfo[];
 
     processClick(e: Event, label: Label): void {
         if (!this.isSelected(label)) {
@@ -45,6 +47,7 @@ export class FilterTabs extends watchMixin(FilterCollectionElement) {
                         <li role="presentation" data-bs-toggle="tooltip" data-bs-title="${label.title ? label.title : ""}" data-bs-trigger="hover">
                             <a href="#" @click=${e => this.processClick(e, label)} class="${this.isSelected(label) ? "active" : ""}">
                                 ${label.name}
+                                ${label.count ? html`<span class="badge rounded-pill colored-secondary" id="${label.id}-count">${label.count}</span>` : ""}
                             </a>
                         </li>
                     `)}
diff --git a/app/assets/javascripts/components/search/search_actions.ts b/app/assets/javascripts/components/search/search_actions.ts
index ed15546c76..c73da4bdee 100644
--- a/app/assets/javascripts/components/search/search_actions.ts
+++ b/app/assets/javascripts/components/search/search_actions.ts
@@ -6,7 +6,7 @@ import { searchQueryState } from "state/SearchQuery";
 import { DodonaElement } from "components/meta/dodona_element";
 export type SearchAction = {
     url?: string,
-    type?: string,
+    filterValue?: string,
     text: string,
     action?: string,
     js?: string,
@@ -25,6 +25,8 @@ export type SearchAction = {
 export class SearchActions extends DodonaElement {
     @property({ type: Array })
     actions: SearchAction[] = [];
+    @property({ type: String, attribute: "filter-param" })
+    filterParam = undefined;
 
     async performAction(action: SearchAction): Promise<boolean> {
         if (!action.action && !action.js) {
@@ -56,16 +58,20 @@ export class SearchActions extends DodonaElement {
         return false;
     }
 
-
-    render(): TemplateResult | TemplateResult[] {
-        if (this.actions.length === 0) {
-            return html``;
+    get filteredActions(): SearchAction[] {
+        if (!this.filterParam) {
+            return this.actions;
         }
 
-        return this.actions.map(action => html`
+        const filterValue = searchQueryState.queryParams.get(this.filterParam);
+        return this.actions.filter(action => action.filterValue === undefined || action.filterValue === filterValue);
+    }
+
+
+    render(): TemplateResult[] {
+        return this.filteredActions.map(action => html`
             <a class="btn btn-outline with-icon m-2 me-0"
                href='${action.url ? action.url : "#"}'
-               data-type="${action.type}"
                @click=${() => this.performAction(action)}
             >
                 <i class='mdi mdi-${action.icon} mdi-18'></i>
diff --git a/app/assets/javascripts/course.ts b/app/assets/javascripts/course.ts
index 1b9499a1e6..77fad7ade5 100644
--- a/app/assets/javascripts/course.ts
+++ b/app/assets/javascripts/course.ts
@@ -13,65 +13,8 @@ function loadUsers(_status = undefined): void {
 
 function initCourseMembers(): void {
     function init(): void {
-        initUserTabs();
         initLabelsEditModal();
     }
-
-    function initUserTabs(): void {
-        const userTabs = document.getElementById("user-tabs");
-        if (userTabs === null) {
-            return;
-        }
-
-        const baseUrl = userTabs.dataset.baseurl;
-        // Select tab and load users
-        const selectTab = (tab): HTMLElement => {
-            const kebab = document.getElementById("kebab-menu");
-            const status = tab.dataset.status;
-            const kebabItems = kebab.querySelectorAll<HTMLElement>("li a.action");
-            let anyShown = false;
-            for (const item of kebabItems) {
-                const dataType = item.dataset.type;
-                if (dataType && dataType !== status) {
-                    hideElement(item);
-                } else {
-                    showElement(item);
-                    anyShown = true;
-                }
-            }
-            if (anyShown) {
-                showElement(kebab);
-            } else {
-                hideElement(kebab);
-            }
-            if (tab.parentNode.classList.contains("active")) {
-                // The current tab is already loaded, nothing to do
-                return;
-            }
-
-            loadUsers(status);
-            document.querySelector("#user-tabs li.active").classList.remove("active");
-            tab.parentNode.classList.add("active");
-        };
-
-        // Switch to clicked tab
-        document.querySelectorAll("#user-tabs li a")
-            .forEach(el => {
-                el.addEventListener("click", function (e) {
-                    selectTab(el);
-                    e.preventDefault();
-                });
-            });
-
-        // Determine which tab to show first
-        const status = searchQueryState.queryParams.get("status");
-        let tab = document.querySelector("a[data-status='" + status + "']");
-        if (tab === null) {
-            tab = document.querySelector("a[data-status='enrolled']");
-        }
-        selectTab(tab);
-    }
-
     function initLabelsEditModal(): void {
         document.getElementById("labelsUploadButton").addEventListener("click", () => {
             const modal = document.getElementById("labelsUploadModal");
@@ -99,19 +42,9 @@ function initCourseMembers(): void {
         });
     }
 
-    function hideElement(element: HTMLElement): void {
-        element.style.display = "none";
-    }
-
-    function showElement(element: HTMLElement): void {
-        element.style.display = "block";
-    }
-
     init();
 }
 
-const ICON_SELECTOR = ".series-icon";
-
 class Series {
     public readonly id: number;
     private url: string;
diff --git a/app/assets/stylesheets/models/course.css.scss b/app/assets/stylesheets/models/course.css.scss
index 5a239f5b80..587da7f0ec 100644
--- a/app/assets/stylesheets/models/course.css.scss
+++ b/app/assets/stylesheets/models/course.css.scss
@@ -8,8 +8,9 @@
   margin-bottom: 16px;
 }
 
-.badge-pending {
-  background-color: var(--d-danger);
+.badge.colored-secondary {
+  background-color: var(--d-secondary-container);
+  color: var(--d-on-secondary-container);
 }
 
 .card.course {
diff --git a/app/views/course_members/index.html.erb b/app/views/course_members/index.html.erb
index a082506f63..545241e375 100644
--- a/app/views/course_members/index.html.erb
+++ b/app/views/course_members/index.html.erb
@@ -9,17 +9,13 @@
         <h2 class="card-title-text"><%= @course.name + " - " + t("courses.show.users") %></h2>
       </div>
       <div class="card-supporting-text card-border">
-        <div class="card-tab">
-          <ul id="user-tabs" class="nav nav-tabs" data-baseurl="<%= course_members_path(@course) %>" role="tablist">
-            <li role="presentation" class="active"><a href="#" data-status="enrolled"><%= t 'courses.show.subscribed' %></a></li>
-            <% if @course.moderated || !@course.pending_members.empty? %>
-              <li role="presentation"><a href="#" data-status="pending"><%= t 'courses.show.pending' %>
-                <span class="badge rounded-pill badge-pending" id="pending-count"><%= @course.pending_members.count unless @course.pending_members.empty? %></span></a>
-              </li>
-            <% end %>
-            <li role="presentation"><a href="#" data-status="unsubscribed"><%= t 'courses.show.unsubscribed' %></a></li>
-          </ul>
-        </div>
+        <%
+          tabs = []
+          tabs << { id: 'enrolled', name: t('courses.show.subscribed') }
+          tabs << { id: 'pending', name: t('courses.show.pending'), count: @course.pending_members.count } if @course.moderated || !@course.pending_members.empty?
+          tabs << { id: 'unsubscribed', name: t('courses.show.unsubscribed') }
+        %>
+        <d-filter-tabs labels="<%= tabs.to_json %>" param="status"></d-filter-tabs>
         <% content_for :modal do %>
           <div class="modal fade" id="labelsUploadModal" tabindex="-1" role="dialog" data-course_id="<%= @course.id %>">
             <div class="modal-dialog" role="document">
@@ -62,26 +58,27 @@
         <%= render partial: 'layouts/searchbar',
                    locals: {
                        eager: false,
+                       actionFilter: 'status',
                        actions: [
                            {
                                icon: 'check',
                                text: t("courses.show.accept_all"),
                                confirm: t("courses.show.confirm_accept_all"),
                                action: mass_accept_pending_course_path(@course),
-                               type: 'pending'
+                               filterValue: 'pending'
                            },
                            {
                                icon: 'minus',
                                text: t("courses.show.decline_all"),
                                confirm: t("courses.show.confirm_decline_all"),
                                action: mass_decline_pending_course_path(@course),
-                               type: 'pending'
+                               filterValue: 'pending'
                            },
                            {
                                icon: 'palette-swatch',
                                text: t(".edit_all_labels"),
                                js: 'bootstrap.Modal.getOrCreateInstance(document.querySelector("#labelsUploadModal")).show()',
-                               type: 'enrolled'
+                               filterValue: 'enrolled'
                            }
                        ],
                        course_labels: @course_labels,
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index e9b81f27f3..5304c5ebf8 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -17,7 +17,12 @@
     <% end %>
     <% if local_assigns[:actions]&.any? %>
       <div class="flex-spacer"></div>
-      <d-search-actions actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'></d-search-actions>
+      <d-search-actions
+        actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'
+        <% if local_assigns[:actionFilter].present? %>
+          filter-param='<%= local_assigns.fetch :actionFilter, false %>'
+        <% end %>
+      ></d-search-actions>
     <% end %>
   </div>
 </div>

From 757e42fc187e49ca044c99e60862d1405e2baccc Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Tue, 12 Mar 2024 15:24:37 +0100
Subject: [PATCH 06/13] Fix title warning

---
 app/assets/javascripts/components/search/filter_tabs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/components/search/filter_tabs.ts b/app/assets/javascripts/components/search/filter_tabs.ts
index 743ff9c7ec..bf63f0e978 100644
--- a/app/assets/javascripts/components/search/filter_tabs.ts
+++ b/app/assets/javascripts/components/search/filter_tabs.ts
@@ -44,7 +44,7 @@ export class FilterTabs extends watchMixin(FilterCollectionElement) {
             <div class="card-tab">
                 <ul class="nav nav-tabs" role="tablist">
                     ${this.labels.map(label => html`
-                        <li role="presentation" data-bs-toggle="tooltip" data-bs-title="${label.title ? label.title : ""}" data-bs-trigger="hover">
+                        <li role="presentation" data-bs-toggle="tooltip" title="${label.title ? label.title : ""}" data-bs-trigger="hover">
                             <a href="#" @click=${e => this.processClick(e, label)} class="${this.isSelected(label) ? "active" : ""}">
                                 ${label.name}
                                 ${label.count ? html`<span class="badge rounded-pill colored-secondary" id="${label.id}-count">${label.count}</span>` : ""}

From 93df01678da2d58a9bc0919e8b511904b38e4b5b Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Tue, 12 Mar 2024 17:01:53 +0100
Subject: [PATCH 07/13] Add and fix tests

---
 .../components/search/search_option.ts        | 10 ++--
 .../components/search/search_actions.test.ts  | 39 ++++++---------
 .../components/search/search_options.ts       | 50 +++++++++++++++++++
 3 files changed, 70 insertions(+), 29 deletions(-)
 create mode 100644 test/javascript/components/search/search_options.ts

diff --git a/app/assets/javascripts/components/search/search_option.ts b/app/assets/javascripts/components/search/search_option.ts
index e439daa3d8..374da66e6c 100644
--- a/app/assets/javascripts/components/search/search_option.ts
+++ b/app/assets/javascripts/components/search/search_option.ts
@@ -4,7 +4,7 @@ import { searchQueryState } from "state/SearchQuery";
 import { html, TemplateResult } from "lit";
 import { i18n } from "i18n/i18n";
 
-type option = {param: string, label: string};
+export type Option = {param: string, label: string};
 
 /**
  * This component represents a boolean option for search using a checkbox
@@ -16,7 +16,7 @@ type option = {param: string, label: string};
  * @prop {string} label - the label to be displayed next to the checkbox
  */
 @customElement("d-search-option")
-export class SearchOptionElement extends DodonaElement {
+export class SearchOption extends DodonaElement {
     @property({ type: String })
     param = "";
     @property({ type: String })
@@ -58,14 +58,14 @@ export class SearchOptionElement extends DodonaElement {
  *
  * @element d-search-options
  *
- * @prop {option[]} options - the list of options to be displayed
+ * @prop {Option[]} options - the list of options to be displayed
  */
 @customElement("d-search-options")
 export class SearchOptions extends DodonaElement {
     @property({ type: Array })
-    options: option[] = [];
+    options: Option[] = [];
 
-    get activeOptions(): option[] {
+    get activeOptions(): Option[] {
         return this.options.filter(option => searchQueryState.queryParams.get(option.param) !== undefined);
     }
 
diff --git a/test/javascript/components/search/search_actions.test.ts b/test/javascript/components/search/search_actions.test.ts
index a357cde1a2..ccff675e1b 100644
--- a/test/javascript/components/search/search_actions.test.ts
+++ b/test/javascript/components/search/search_actions.test.ts
@@ -1,5 +1,5 @@
 import "components/search/search_actions";
-import { SearchAction, SearchActions, SearchOption } from "components/search/search_actions";
+import { SearchAction, SearchActions } from "components/search/search_actions";
 import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/dom";
@@ -12,44 +12,25 @@ describe("SearchActions", () => {
     beforeEach(async () => {
         searchQueryState.queryParams.clear();
         searchQueryState.arrayQueryParams.clear();
-        const actions: (SearchOption | SearchAction)[] = [
-            { text: "foo", search: { foo: "bar", fool: "bars" } },
+        const actions: SearchAction[] = [
             { text: "bar", icon: "replay", confirm: "Are you sure?", action: "https://test.dodona.be/destroy" },
             { icon: "test", text: "js-test", js: "window.alert('test')" },
             { icon: "link", text: "link-test", url: "https://test.dodona.be" },
+            { icon: "play", text: "bars", filterValue: "bar", url: "https://test.dodona.be" },
         ];
         await fixture(`<div class="toasts"></div>`);
         searchActions = await fixture(html`
             <d-search-actions .actions=${actions}
+                              filter-param="foo"
             ></d-search-actions>`);
     });
 
-    it("should render the search options/actions", () => {
-        expect(screen.queryByText("foo")).not.toBeNull();
+    it("should render the search actions", () => {
         expect(screen.queryByText("bar")).not.toBeNull();
         expect(screen.queryByText("js-test")).not.toBeNull();
         expect(screen.queryByText("link-test")).not.toBeNull();
     });
 
-    it("should show a checkbox for the search options", () => {
-        expect(screen.queryByLabelText("foo")).not.toBeNull();
-    });
-
-    test("the search options should be checked when they are active", async () => {
-        const checkbox = screen.queryByLabelText("foo") as HTMLInputElement;
-        expect(checkbox.checked).toBe(false);
-        await userEvent.click(checkbox);
-        expect(checkbox.checked).toBe(true);
-        expect(searchQueryState.queryParams.get("foo")).toBe("bar");
-        expect(searchQueryState.queryParams.get("fool")).toBe("bars");
-        searchQueryState.queryParams.set("foo", undefined);
-        await nextFrame();
-        expect(checkbox.checked).toBe(false);
-        searchQueryState.queryParams.set("foo", "bar");
-        await nextFrame();
-        expect(checkbox.checked).toBe(true);
-    });
-
     test("clicking a js action should execute the js", async () => {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         jest.spyOn(window, "alert").mockImplementation(() => {});
@@ -107,4 +88,14 @@ describe("SearchActions", () => {
             },
         });
     });
+
+    test("actions with a filterValue should only be shown when the filterOaram is set to the filterValue", async () => {
+        expect(screen.queryByText("bars")).toBeNull();
+        searchQueryState.queryParams.set("foo", "bar");
+        await nextFrame();
+        expect(screen.queryByText("bars")).not.toBeNull();
+        searchQueryState.queryParams.set("foo", "baz");
+        await nextFrame();
+        expect(screen.queryByText("bars")).toBeNull();
+    });
 });
diff --git a/test/javascript/components/search/search_options.ts b/test/javascript/components/search/search_options.ts
new file mode 100644
index 0000000000..197339a646
--- /dev/null
+++ b/test/javascript/components/search/search_options.ts
@@ -0,0 +1,50 @@
+import "components/search/search_options";
+import { SearchOptions } from "components/search/search_option";
+import { fixture, nextFrame } from "@open-wc/testing-helpers";
+import userEvent from "@testing-library/user-event";
+import { screen } from "@testing-library/dom";
+import { html } from "lit";
+import { searchQueryState } from "state/SearchQuery";
+import { Option } from "components/search/search_option";
+
+describe("SearchOptions", () => {
+    let searchOptions: SearchOptions;
+    beforeEach(async () => {
+        searchQueryState.queryParams.clear();
+        searchQueryState.arrayQueryParams.clear();
+        const options: Option[] = [
+            { param: "foo", label: "foo" },
+            { param: "bar", label: "fool" },
+        ];
+        await fixture(`<div class="toasts"></div>`);
+        searchOptions = await fixture(html`
+            <d-search-options .options=${options}
+            ></d-search-options>`);
+    });
+
+    it("should render the search options", () => {
+        expect(screen.queryByText("foo")).not.toBeNull();
+        expect(screen.queryByText("fool")).not.toBeNull();
+        expect(screen.queryByText("bar")).toBeNull();
+    });
+
+    it("should show a checkbox for the search options", () => {
+        expect(screen.queryByLabelText("foo")).not.toBeNull();
+        expect(screen.queryByLabelText("fool")).not.toBeNull();
+    });
+
+    test("the search options should be checked when they are active", async () => {
+        const checkbox = screen.queryByLabelText("foo") as HTMLInputElement;
+        expect(checkbox.checked).toBe(false);
+        await userEvent.click(checkbox);
+        expect(checkbox.checked).toBe(true);
+        expect(searchQueryState.queryParams.get("foo")).toBe("true");
+        expect(searchQueryState.queryParams.get("bar")).toBe(undefined);
+        searchQueryState.queryParams.set("foo", undefined);
+        await nextFrame();
+        expect(checkbox.checked).toBe(false);
+        searchQueryState.queryParams.set("foo", "true");
+        await nextFrame();
+        expect(checkbox.checked).toBe(true);
+    });
+});

From c190aba6f6ee5391f77e7905a901e9bd6648900a Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Wed, 27 Mar 2024 10:08:42 +0100
Subject: [PATCH 08/13] Move search options back to the three dots

---
 .../javascripts/components/search/search_option.ts | 14 ++++----------
 app/views/layouts/_searchbar.html.erb              |  6 +++---
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/components/search/search_option.ts b/app/assets/javascripts/components/search/search_option.ts
index 374da66e6c..5b57a878c6 100644
--- a/app/assets/javascripts/components/search/search_option.ts
+++ b/app/assets/javascripts/components/search/search_option.ts
@@ -65,23 +65,17 @@ export class SearchOptions extends DodonaElement {
     @property({ type: Array })
     options: Option[] = [];
 
-    get activeOptions(): Option[] {
-        return this.options.filter(option => searchQueryState.queryParams.get(option.param) !== undefined);
-    }
-
     render(): TemplateResult {
         if (this.options.length === 0) {
             return html``;
         }
 
         return html`
-            <div class="dropdown dropdown-filter">
-                <a class="btn btn-outline dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
-                    ${this.activeOptions.map( () => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-gray left-icon"></i>`)}
-                    ${i18n.t(`js.dropdown.multi.search_options`)}
-                    <i class="mdi mdi-chevron-down mdi-18 right-icon"></i>
+            <div class="dropdown">
+                <a class="btn btn-icon dropdown-toggle" data-bs-toggle="dropdown">
+                    <i class="mdi mdi-dots-vertical"></i>
                 </a>
-                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                <ul class="dropdown-menu dropdown-menu-end">
                     ${this.options.map(o => html`
                         <li><span class="dropdown-item-text ">
                             <d-search-option param="${o.param}" label="${o.label}"></d-search-option>
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index 544c54e457..918634fb58 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -9,12 +9,12 @@
       <d-search-field placeholder="<%= t("layout.search.search") %>"></d-search-field>
       <d-loading-bar search-based></d-loading-bar>
     </form>
-  </div>
-  <div class="d-flex">
-    <d-dropdown-filters class="dropdown-filters"></d-dropdown-filters>
     <% if local_assigns[:options]&.any? %>
       <d-search-options options='<%= raw (local_assigns.fetch :options, false).to_json %>'></d-search-options>
     <% end %>
+  </div>
+  <div class="d-flex">
+    <d-dropdown-filters class="dropdown-filters"></d-dropdown-filters>
     <% if local_assigns[:actions]&.any? %>
       <div class="flex-spacer"></div>
       <d-search-actions

From db0e2f7fb6a2d801833ba4fa173a976d06807cbc Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Wed, 27 Mar 2024 10:14:38 +0100
Subject: [PATCH 09/13] Fix loading bar

---
 .../javascripts/components/search/loading_bar.ts      | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/components/search/loading_bar.ts b/app/assets/javascripts/components/search/loading_bar.ts
index a2f70f09de..80c60bb739 100644
--- a/app/assets/javascripts/components/search/loading_bar.ts
+++ b/app/assets/javascripts/components/search/loading_bar.ts
@@ -2,6 +2,7 @@ import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { search } from "search";
 import { DodonaElement } from "components/meta/dodona_element";
+import { watchMixin } from "components/meta/watch_mixin";
 
 /**
  * This component represents a loading bar.
@@ -10,7 +11,7 @@ import { DodonaElement } from "components/meta/dodona_element";
  * @element d-loading-bar
  */
 @customElement("d-loading-bar")
-export class LoadingBar extends DodonaElement {
+export class LoadingBar extends watchMixin(DodonaElement) {
     @property({ type: Boolean, attribute: "search-based" })
     searchBased = false;
 
@@ -24,6 +25,14 @@ export class LoadingBar extends DodonaElement {
         }
     }
 
+    watch = {
+        searchBased: () => {
+            if (this.searchBased) {
+                search.loadingBars.push(this);
+            }
+        }
+    };
+
     show(): void {
         this.loading = true;
     }

From 72aa58f032d1ac4de879c49cf49214e6b7cf95ac Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Wed, 3 Apr 2024 15:06:33 +0200
Subject: [PATCH 10/13] Restyle tokens

---
 .../components/search/dropdown_filter.ts      |  2 +-
 .../components/search/search_token.ts         |  4 +-
 .../components/dropdown-filter.css.scss       | 25 --------
 .../components/table-toolbar.css.scss         |  2 +-
 .../stylesheets/components/token.css.scss     | 58 ++++++++++++++++---
 app/views/layouts/_searchbar.html.erb         |  2 +-
 6 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/components/search/dropdown_filter.ts b/app/assets/javascripts/components/search/dropdown_filter.ts
index f07d17dea9..fb5bc8a16e 100644
--- a/app/assets/javascripts/components/search/dropdown_filter.ts
+++ b/app/assets/javascripts/components/search/dropdown_filter.ts
@@ -42,7 +42,7 @@ export class DropdownFilter extends FilterCollectionElement {
 
         return html`
             <div class="dropdown dropdown-filter">
-                <a class="btn btn-outline dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+                <a class="token token-bordered" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                     ${this.getSelectedLabels().map( s => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-${this.color(s)} left-icon"></i>`)}
                     ${i18n.t(`js.dropdown.${this.multi?"multi":"single"}.${this.type}`)}
                     <i class="mdi mdi-chevron-down mdi-18 right-icon"></i>
diff --git a/app/assets/javascripts/components/search/search_token.ts b/app/assets/javascripts/components/search/search_token.ts
index 8d44667335..ebfb53c10b 100644
--- a/app/assets/javascripts/components/search/search_token.ts
+++ b/app/assets/javascripts/components/search/search_token.ts
@@ -30,7 +30,9 @@ export class SearchToken extends FilterCollectionElement {
             ${ this.getSelectedLabels().map( label => html`
                 <div class="token accent-${this.color(label)}">
                     <span class="token-label">${label.name}</span>
-                    <a href="#" class="close" tabindex="-1"  @click=${e => this.processClick(e, label)}>×</a>
+                    <a href="#" class="close" tabindex="-1"  @click=${e => this.processClick(e, label)}>
+                        <i class="mdi mdi-close mdi-18"></i>
+                    </a>
                 </div>
             `)}
         `;
diff --git a/app/assets/stylesheets/components/dropdown-filter.css.scss b/app/assets/stylesheets/components/dropdown-filter.css.scss
index 68ef2a9351..2cae0619e7 100644
--- a/app/assets/stylesheets/components/dropdown-filter.css.scss
+++ b/app/assets/stylesheets/components/dropdown-filter.css.scss
@@ -1,31 +1,6 @@
 .dropdown-filter {
-  margin: 8px;
-  margin-right: 0;
   display: inline-block;
 
-  .dropdown-toggle {
-    display: inline-flex;
-    padding-left: 16px;
-    padding-right: 16px;
-    font-size: 14px;
-    white-space: nowrap;
-    box-shadow: none;
-
-    .mdi::before {
-      line-height: 36px;
-    }
-
-    .left-icon::before {
-      margin-left: -8px;
-      margin-right: 8px;
-    }
-
-    .right-icon::before {
-      margin-left: 8px;
-      margin-right: -8px;
-    }
-  }
-
   .form-check-label {
     width: 100%;
   }
diff --git a/app/assets/stylesheets/components/table-toolbar.css.scss b/app/assets/stylesheets/components/table-toolbar.css.scss
index 61b6c7aad7..c7507ad5e5 100644
--- a/app/assets/stylesheets/components/table-toolbar.css.scss
+++ b/app/assets/stylesheets/components/table-toolbar.css.scss
@@ -10,7 +10,7 @@
   margin-bottom: 6px;
 
   .dropdown-filters {
-    margin-left: 8px;
+    margin-left: 16px;
   }
 }
 
diff --git a/app/assets/stylesheets/components/token.css.scss b/app/assets/stylesheets/components/token.css.scss
index fabc044b90..d7fc25b253 100644
--- a/app/assets/stylesheets/components/token.css.scss
+++ b/app/assets/stylesheets/components/token.css.scss
@@ -9,25 +9,65 @@
   align-items: center;
   height: var(--d-token-height);
   border-radius: 8px;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
   border-width: 0;
   text-transform: capitalize;
   white-space: nowrap;
   cursor: default;
   margin-right: 8px;
+
+  .left-icon::before {
+    margin-left: -8px;
+    margin-right: 8px;
+  }
+
+  .right-icon::before {
+    margin-left: 8px;
+    margin-right: -8px;
+  }
+
+  .token-label {
+    line-height: 24px;
+  }
+}
+
+.token.token-bordered {
+  border: 1px solid var(--d-divider);
+  color: var(--d-on-surface);
+}
+
+a.token {
+  &:hover,
+  &:focus {
+    background: rgba(var(--d-on-surface-rgb), 0.1);
+    cursor: pointer;
+  }
 }
 
 .token .close {
-  font-size: 18px;
-  margin-left: 8px;
-  margin-right: -4px; // a token with a close button has a right padding of 8 instead of 12px
   color: inherit;
-}
+  margin-left: 8px;
+  margin-right: -8px;
 
-.token .close:hover {
-  color: var(--d-on-surface);
-  cursor: pointer;
+  ::before {
+    line-height: 24px;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 20px;
+    width: 24px;
+    height: 24px;
+    background: rgba(var(--d-on-surface-rgb), 0.1);
+    margin-left: 5px;
+    margin-right: -11px;
+    padding-left: 3px;
+  }
 }
 
 .token.accent-red {
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index 918634fb58..e6d13e9d57 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -216,7 +216,7 @@
             {id: false, name: "<%= t("activities.index.filters.not_draft") %>"}
           ],
           color: function () {
-            return "brown";
+            return "indigo";
           },
         };
       <% end %>

From c95d8355e53bdcfe0e50d519f5649c29aaa69e43 Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Wed, 3 Apr 2024 15:09:24 +0200
Subject: [PATCH 11/13] Fix action button style

---
 app/assets/javascripts/components/search/search_actions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/components/search/search_actions.ts b/app/assets/javascripts/components/search/search_actions.ts
index c73da4bdee..06b57ebb9d 100644
--- a/app/assets/javascripts/components/search/search_actions.ts
+++ b/app/assets/javascripts/components/search/search_actions.ts
@@ -70,7 +70,7 @@ export class SearchActions extends DodonaElement {
 
     render(): TemplateResult[] {
         return this.filteredActions.map(action => html`
-            <a class="btn btn-outline with-icon m-2 me-0"
+            <a class="btn btn-outline with-icon ml-2"
                href='${action.url ? action.url : "#"}'
                @click=${() => this.performAction(action)}
             >

From b25015c8df6a49f5d11e90ac7c8515d4b24a0ead Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Wed, 3 Apr 2024 16:45:31 +0200
Subject: [PATCH 12/13] Improve vertical layout

---
 app/views/layouts/_searchbar.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index e6d13e9d57..dbdc79437c 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -13,7 +13,7 @@
       <d-search-options options='<%= raw (local_assigns.fetch :options, false).to_json %>'></d-search-options>
     <% end %>
   </div>
-  <div class="d-flex">
+  <div class="d-flex align-items-center">
     <d-dropdown-filters class="dropdown-filters"></d-dropdown-filters>
     <% if local_assigns[:actions]&.any? %>
       <div class="flex-spacer"></div>

From 63b357ea82bb8dc51bd4782ba66230d08f51a484 Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Mon, 22 Apr 2024 09:53:40 +0200
Subject: [PATCH 13/13] Add vertical margin

---
 app/assets/stylesheets/components/token.css.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/components/token.css.scss b/app/assets/stylesheets/components/token.css.scss
index d7fc25b253..dd99635775 100644
--- a/app/assets/stylesheets/components/token.css.scss
+++ b/app/assets/stylesheets/components/token.css.scss
@@ -16,6 +16,7 @@
   white-space: nowrap;
   cursor: default;
   margin-right: 8px;
+  margin-top: 4px;
 
   .left-icon::before {
     margin-left: -8px;