added locally hosted htmx dependency; updated base.html template & req's files accordingly; wrote new FT (failing) in test_dashboard that calls for this lib

requirements.dev.txt

@@ -8,6 +8,7 @@ cssselect==1.3.0
 dj-database-url
 Django==6.0
 django-compressor
+django-htmx
 django-libsass
 django-stubs==5.2.8
 django-stubs-ext==5.2.8

requirements.txt

@@ -3,6 +3,7 @@ cssselect==1.3.0
 Django==6.0
 dj-database-url
 django-compressor
+django-htmx
 django-libsass
 django-stubs==5.2.8
 django-stubs-ext==5.2.8

src/core/settings.py

@@ -77,6 +77,7 @@ MIDDLEWARE = [
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'django_htmx.middleware.HtmxMiddleware',
 ]
 
 ROOT_URLCONF = 'core.urls'

src/functional_tests/test_dashboard.py

@@ -1,3 +1,4 @@
+from selenium.common.exceptions import NoSuchElementException
 from selenium.webdriver.common.by import By
 from selenium.webdriver.common.keys import Keys
 
@@ -37,3 +38,64 @@ class DashboardMaintenanceTest(FunctionalTest):
                 self.browser.find_element(By.CSS_SELECTOR, "#id_new_username").get_attribute("value")
             )
         )
+
+    def test_user_can_toggle_applet_visibility_via_gear_menu(self):
+        # 1. Auth as discoman@example.com, navigate home
+        self.create_pre_authenticated_session("discoman@example.com")
+        self.browser.get(self.live_server_url)
+        # 2. Assert both applets present on page (id_applet_username, id_applet_theme_switcher)
+        self.browser.find_element(By.ID, "id_applet_username")
+        self.browser.find_element(By.ID, "id_applet_theme_switcher")
+        # 3. Click el w. id="id_dash_gear"
+        dash_gear = self.browser.find_element(By.ID, "id_dash_gear")
+        dash_gear.click()
+        # 4. A menu appears; wait_for el w. id="id_applet_menu"
+        self.wait_for(
+            lambda: self.browser.find_element(By.ID, "id_applet_menu")
+        )
+        # 5. Find two checkboxes in menu, name="username" & name="theme-switcher"; assert both .is_selected()
+        menu = self.browser.find_element(By.ID, "id_applet_menu")
+        username_cb = menu.find_element(By.NAME, "username")
+        theme_cb = menu.find_element(By.NAME, "theme-switcher")
+        self.assertTrue(username_cb.is_selected())
+        self.assertTrue(theme_cb.is_selected())
+        # 6. Click theme-switcher box to uncheck it
+        theme_cb.click()
+        self.assertFalse(theme_cb.is_selected())
+        self.browser.execute_script("window.__no_reload_marker = True")
+        # 7. Submit the menu form via [type="submit"] btn inside menu
+        menu.find_element(By.CSS_SELECTOR, '[type="submit"]').click()
+        self.wait_for(
+            lambda: self.assertFalse(
+                self.browser.find_element(By.ID, "id_applet_menu").is_displayed()
+            )
+        )
+        # 8. wait_for theme-switcher applet to be gone
+        self.wait_for(
+            lambda: self.assertRaises(
+                NoSuchElementException,
+                self.browser.find_element,
+                By.ID, "id_applet_theme_switcher"
+            )
+        )
+        # 9. assert id_applet_username remains
+        self.browser.find_element(By.ID, "id_applet_username")
+        # 10. Click gear again, find menu, find theme-switcher checkbox; assert now NOT selected
+        dash_gear.click()
+        self.assertFalse(theme_cb.is_selected())
+        # 11. Click it to re-check box; submit
+        theme_cb.click()
+        self.assertTrue(theme_cb.is_selected())
+        menu.find_element(By.CSS_SELECTOR, '[type="submit"]').click()
+        # 12. wait_for id_applet_theme_switcher to reappear
+        self.wait_for(
+            lambda: self.assertFalse(
+                self.browser.find_element(By.ID, "id_applet_menu").is_displayed()
+            )
+        )
+        self.wait_for(
+            lambda: self.assertTrue(
+                self.browser.find_element(By.ID, "id_applet_theme_switcher")
+            )
+        )
+        self.assertTrue(self.browser.execute_script("return window.__no_reload_marker === true"))

src/templates/core/base.html

@@ -77,9 +77,27 @@
             {% endblock content %}
 
         </div>
-    </body>
-    
-    {% block scripts %}
-    {% endblock scripts %}
 
+        {% block scripts %}
+        {% endblock scripts %}
+        <script src="{% static "vendor/htmx.min.js" %}"></script>
+        <script>
+            document.body.addEventListener('htmx:configRequest', function(evt) {
+                evt.detail.headers['X-CSRFToken'] = getCookie('csrftoken');
+            });
+            function getCookie(name) {
+                let val = null;
+                if (document.cookie) {
+                    for (let c of document.cookie.split(';')) {
+                        c = c.trim();
+                        if (c.startsWith(name + '=')) {
+                            val = decodeURIComponent(c.substring(name.length + 1));
+                            break;
+                        }
+                    }
+                }
+                return val;
+            }
+        </script>
+    </body>
 </html>