🧹 Add checks for duplicate HTML element IDs

app.py

@@ -2479,6 +2479,9 @@ def explore():
                             ) if result.prev_page_token else None
 
     favourite_programs = g_db().get_hedy_choices()
+    favourite_ids = set(a['id'] for a in favourite_programs)
+    # Filter out programs that already favourites
+    result = [r for r in result if r['id'] not in favourite_ids]
 
     # Do 'normalize_public_programs' on both sets at once, to save database calls
     normalized = normalize_public_programs(list(result) + list(favourite_programs.records))

static/js/appbundle.js

@@ -127648,7 +127648,7 @@ def note_with_error(value, err):
     if (dropdown === void 0 || dropdown === null) {
       throw new Error("Unexpected error!");
     }
-    $(dropdown).slideToggle("medium");
+    $(dropdown).slideToggle("fast");
   }
   document.addEventListener("click", (e) => {
     let dropdowns = [...document.getElementsByClassName("dropdown-menu")];
@@ -127658,7 +127658,7 @@ def note_with_error(value, err):
       dropdowns.forEach((dropdown2) => {
         if ($(dropdown2).is(":hidden"))
           return;
-        $(dropdown2).slideToggle("medium");
+        $(dropdown2).slideToggle("fast");
       });
     }
   });

static/js/custom-elements.ts

@@ -9,8 +9,8 @@ export class HedySelect extends HTMLElement {
         const clone = template.content.cloneNode(true) as HTMLElement;
         this.appendChild(clone);
         const options = this.querySelectorAll('option');
-        const label = this.dataset['label'] || '';       
-        const dropdownMenu = this.querySelector('.dropdown-menu')!;                
+        const label = this.dataset['label'] || '';
+        const dropdownMenu = this.querySelector('.dropdown-menu')!;
         if (this.dataset['type'] === 'multiple') {
             const newDiv = document.createElement('div');
             newDiv.classList.add('option');
@@ -40,25 +40,25 @@ export class HedySelect extends HTMLElement {
         const span = this.getElementsByTagName('span')
         if (span.length !== 1) {
             throw new Error('HedySelect should only have one span element!');
-        }        
+        }
         span[0].dataset['value'] = label;
         span[0].textContent = label;
         updateLabelText(this.querySelector('.dropdown')!)
     }
 
-    onOptionClick(this: HTMLDivElement, _event: MouseEvent) {        
+    onOptionClick(this: HTMLDivElement, _event: MouseEvent) {
         const select = this.closest("custom-select") as Element;
         if (!select) {
             return;
         }
         const isSingleSelect = select?.getAttribute('data-type') === 'single';
-    
+
         if (isSingleSelect && !this.classList.contains('selected')) {
             // Deselect other options within the same dropdown
             const otherOptions = select.querySelectorAll('.option.selected');
             otherOptions.forEach(otherOption => otherOption.classList.remove('selected'));
         }
-    
+
         if (!isSingleSelect && this.getAttribute("data-value") === "select_all") {
             const selected = !this.classList.contains("selected")
             const otherOptions = select.querySelectorAll('.option');
@@ -117,17 +117,17 @@ export function toggleDropdown(event: Event) {
     if (dropdown === undefined || dropdown === null) {
         throw new Error('Unexpected error!');
     }
-    $(dropdown).slideToggle('medium');
+    $(dropdown).slideToggle('fast');
 }
 
 document.addEventListener("click", (e) => {
     let dropdowns = [...document.getElementsByClassName('dropdown-menu')]
     let target = e.target as HTMLElement;
-    const dropdown = target.closest('.dropdown-menu') || target.closest('.dropdown');    
+    const dropdown = target.closest('.dropdown-menu') || target.closest('.dropdown');
     if (!dropdown) {
         dropdowns.forEach((dropdown) => {
             if ($(dropdown).is(":hidden")) return;
-            $(dropdown).slideToggle("medium");
+            $(dropdown).slideToggle("fast");
         })
     }
 });

templates/admin/admin-adventures.html

@@ -10,12 +10,12 @@ <h4 class="text-center">Total amount of shown adventures: {{ adventures|length }
   <table class="table-auto w-full text-sm">
     <thead>
       <tr class="font-bold text-left">
-          <td id="classname_header">Adventure name</td>
-          <td id="teacher_header">Creator</td>
-          <td id="students_header">Level</td>
-          <td id="last_used_header">Last updated</td>
-          <td id="public_header">Public</td>
-          <td id="last_used_header">View</td>
+          <td>Adventure name</td>
+          <td>Creator</td>
+          <td>Level</td>
+          <td>Last updated</td>
+          <td>Public</td>
+          <td>View</td>
       </tr>
     </thead>
     <tbody>

templates/admin/admin-users.html

@@ -9,7 +9,7 @@
         </svg>
     </div>
     <div class="text-white font-bold text-2xl mt-2 mb-4">Update the tags of <span id="tags_username"></span></div>
-    <div id="tags_container" class="flex flex-row w-full gap-4">
+    <div class="flex flex-row w-full gap-4">
         <div class="flex flex-col gap-2 items-center">
             <div class="bg-red-500 text-white py-1 rounded-lg font-bold px-3">{{_('certified_teacher')}} ⊙</div>
             <input type="checkbox" id="certified_tag_input" class="tags-input bg-white">
@@ -133,20 +133,20 @@ <h4 class="text-center">Total amount of shown users: {{ users|length }}</h4>
     <thead>
       <tr class="font-bold text-left">
           <td id="username_header">Username</td>
-          <td id="count_header" class="hidden">Programs</td>
+          <td class="hidden">Programs</td>
           <td id="email_header">Email</td>
-          <td id="created_header" class="hidden">Created</td>
+          <td class="hidden">Created</td>
           <td id="last_login_header">Last login</td>
-          <td id="birth_year_header">Birth year</td>
+          <td>Birth year</td>
           <td id="language_header">Language</td>
-          <td id="keyword_language_header">Keyword lang</td>
+          <td>Keyword lang</td>
           <td id="country_header">Country</td>
-          <td id="gender_header" class="hidden">Gender</td>
-          <td id="experience_header" class="hidden">Experience</td>
-          <td id="tags_header" class="text-center">Tags</td>
-          <td id="teacher_header" class="text-center">Teacher</td>
-          <td id="teacher_header" class="text-center">Super Teacher</td>
-          <td id="verified_header" class="hidden">Verified</td>
+          <td class="hidden">Gender</td>
+          <td class="hidden">Experience</td>
+          <td class="text-center">Tags</td>
+          <td class="text-center">Teacher</td>
+          <td class="text-center">Super Teacher</td>
+          <td class="hidden">Verified</td>
       </tr>
     </thead>
     <tbody>
@@ -170,7 +170,7 @@ <h4 class="text-center">Total amount of shown users: {{ users|length }}</h4>
                 hx-post="/admin/mark-as-teacher/{{user.username}}">
             </td>
             <td class="teacher_cell text-center">
-                <input type="checkbox" {% if user.is_super_teacher %}checked="checked"{% endif %} 
+                <input type="checkbox" {% if user.is_super_teacher %}checked="checked"{% endif %}
                 hx-trigger="click"
                 hx-post="/admin/mark-super-teacher/{{user.username}}">
             </td>

templates/class-overview.html

@@ -29,7 +29,7 @@ <h2 id="survey_status_button" class="hidden md:block" data-cy="survey_status_but
                 <button class="green-btn w-fit" id="customize_class_button" data-cy="customize_class_button"
                     onclick="window.location.href = '/for-teachers/customize-class/{{class_info.id}}'">
                     {{_('customize_class')}}
-                </button>                
+                </button>
             </div>
         </div>
         {{ render_partial('customize-grid/partial-grid-levels.html',
@@ -55,24 +55,24 @@ <h2>{{ _('teachers')}}</h2>
                 <th class="px-2 py-2 text-center" id="username_header">{{_('username')}}</th>
                 <th class="px-2 py-2 text-center" id="role">{{_('role')}}</th>
                 <th class="px-2 py-2 text-center" id="overview_header">{{_('programs')}}</th>
-                {% if not is_second_teacher and class_info.teacher == username %}<th class="px-2 p-2 bg-blue-900 text-white text-center" id="remove_second_teacher_header">{{_('remove')}}</th>{% endif %}
+                {% if not is_second_teacher and class_info.teacher == username %}<th class="px-2 p-2 bg-blue-900 text-white text-center">{{_('remove')}}</th>{% endif %}
             </tr>
             </thead>
             <tbody id="class_user_table">
               {% for second_teacher in class_info.second_teachers %}
               <tr class="{% if loop.index is divisibleby 2 %}bg-gray-200{% else %}bg-white{% endif %} m-2">
                 <td class="p-2 text-center font-medium text-blue-900" data-cy="second_teacher_username_cell">{{second_teacher.username}}</td>
-                <td class="text-center" id="role_cell">{% if second_teacher.username == class_info.teacher %}{{_('creator').lower()}}{% else %}{{second_teacher.role}}{% endif %}</td>
+                <td class="text-center">{% if second_teacher.username == class_info.teacher %}{{_('creator').lower()}}{% else %}{{second_teacher.role}}{% endif %}</td>
                 {% if second_teacher.username != username %}
                   <td class="text-center"><a href="/for-teachers/class/{{class_info.id}}/programs/{{second_teacher.username}}" data-cy="programs"
                      ><span class="fas fa-code block mb-4 mt-4 text-blue-900"></span></a></td>
                 {% else %}
                   <td class="text-center"><a href="/programs" data-cy="programs"><span class="text-blue-900 fas fa-code block mb-4 mt-4"></span></a></td>
                 {% endif %}
                 <td class="text-center">
-                  {% if second_teacher.username != class_info.teacher %}<a href="#" class="no-underline" id="remove_second_teacher "
+                  {% if second_teacher.username != class_info.teacher %}<a href="#" class="no-underline"
                   hx-swap="none"
-                  {# TODO: 
+                  {# TODO:
                     - figure a new way of showing modal instead of calling js
                     - remove container instead of reloading if only one el exists.
                     #}

templates/custom-elements-templates.html

@@ -11,7 +11,7 @@
                 <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
             </svg>
         </button>
-        <div class="dropdown-menu overflow-auto dropdown-blue z-30 mt-2 w-full max-h-96" id="classes_dropdown"
+        <div class="dropdown-menu overflow-auto dropdown-blue z-30 mt-2 w-full max-h-96"
             style="display: none; width: 100%;" _="on mutation of @style
                                 set arrow to the previous <svg/>
                                 if *display == 'none'
@@ -30,7 +30,7 @@
         <p class="close-dialog" data-cy="close_warning"><i class="fa-solid fa-xmark"></i></p>
         <div class="flex">
             <div class="py-1">
-                <div id="warningbox_icon">
+                <div>
                     <svg class="fill-current h-6 w-6 text-yellow-500 ltr:mr-4 rtl:ml-4"
                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                         <path