extensive refactor push to continue to liberate applets from dashboard; new _applets.html & .gear.html template partials for use across all -board views; all applets.html sections have been liberated into their own _applet-<applet-name>.html template partials in their respective templates/apps/*board/_partials/ dirs; gameboard.html & home.html greatly simplified; .gear-btn describes gear menu now, #id_<*board nickname>*gear IDs abandoned; as such, .gear-btn styling moved from _dashboard.scss to _base.scss; new applets.js file contains related initGearMenus scripts, which no longer waits for window reload; new apps.applets.utils file manages applet_context() fn; new gameboard.js file but currently empty (false start); updates across all sorts of ITs & dash- & gameboard FTs

src/templates/apps/applets/_partials/_applets.html

@@ -0,0 +1,7 @@
+{% for entry in applets %}
+    {% if entry.visible %}
+        {% with "apps/"|add:entry.applet.context|add:"/_partials/_applet-"|add:entry.applet.slug|add:".html" as partial %}
+            {% include partial %}
+        {% endwith %}
+    {% endif %}
+{% endfor %}

src/templates/apps/applets/_partials/_gear.html

@@ -0,0 +1,3 @@
+<button class="gear-btn" data-menu-target="{{ menu_id }}">
+    <i class="fa-solid fa-gear"></i>
+</button>

src/templates/apps/dashboard/_partials/_applet-my-lists.html

@@ -0,0 +1,17 @@
+<section
+    id="id_applet_my_lists"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <a href="{% url 'my_lists' user.id %}" class="my-lists-main">My lists:</a>
+    <div class="my-lists-container">
+        <ul>
+            {% for list in recent_lists %}
+                <li>
+                    <a href="{{ list.get_absolute_url }}">{{ list.name }}</a>
+                </li>
+            {% empty %}
+                <li>No lists yet.</li>
+            {% endfor %}
+        </ul>
+    </div>
+</section>

src/templates/apps/dashboard/_partials/_applet-new-list.html

@@ -0,0 +1,8 @@
+<section
+    id="id_applet_new_list"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <h2>Start a new to-do list</h2>
+    {% url "new_list" as form_action %}
+    {% include "apps/dashboard/_partials/_form.html" with form=form form_action=form_action %}
+</section>

src/templates/apps/dashboard/_partials/_applet-palette.html

@@ -0,0 +1,21 @@
+<section
+    id="id_applet_palette"
+    class="palette"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <div class="palette-scroll">
+        {% for palette in palettes %}
+            <div class="palette-item">
+                <div class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"></div>
+                {% if not palette.locked %}
+                    <form method="POST" action="{% url "set_palette" %}">
+                        {% csrf_token %}
+                        <button type="submit" name="palette" value="{{ palette.name }}" class="btn btn-confirm">OK</button>
+                    </form>
+                {% else %}
+                    <span class="btn btn-disabled">&times;</span>
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+</section>

src/templates/apps/dashboard/_partials/_applet-username.html

@@ -0,0 +1,23 @@
+<section
+    id="id_applet_username"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <form method="POST" action="{% url "set_profile" %}">
+        {% csrf_token %}
+        <div class="username-field">
+            <span class="username-at">@</span>
+            <input
+                id="id_new_username"
+                name="username"
+                required
+                value="{{ user.username|default:'' }}"
+                autocomplete="off"
+                placeholder="username"
+                data-original="{{ user.username|default:'' }}"
+                oninput="this.closest('form').querySelector('.save-btn').hidden = (this.value === this.dataset.original)"
+                onblur="this.scrollLeft = 0"
+            >
+        </div>
+        <button type="submit" class="btn btn-confirm save-btn" hidden>OK</button>
+    </form>
+</section>

src/templates/apps/dashboard/_partials/_applet-wallet.html

@@ -0,0 +1,7 @@
+<section
+    id="id_applet_wallet"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <span>Writs: {{ user.wallet.writs }}</span>
+    <a href="{% url "wallet" %}" class="wallet-manage-link">Manage Wallet</a>
+</section>

src/templates/apps/dashboard/_partials/_applets.html

@@ -1,10 +1,11 @@
 {% load lyric_extras %}
+
 <div id="id_applets_container">
-    <div id="id_applet_menu" style="display:none;">
+    <div id="id_dash_applet_menu" style="display:none;">
         <form
-        hx-post="{% url "toggle_applets" %}"
-        hx-target="#id_applets_container"
-        hx-swap="outerHTML"
+            hx-post="{% url "toggle_applets" %}"
+            hx-target="#id_applets_container"
+            hx-swap="outerHTML"
         >
             {% csrf_token %}
             {% for entry in applets %}
@@ -20,95 +21,9 @@
             {% endfor %}
             <div class="menu-btns">
                 <button type="submit" class="btn btn-confirm">OK</button>
-                <button type="button" id="id_applet_menu_cancel" class="btn btn-cancel">NVM</button>
+                <button type="button" id="id_applet_menu_cancel" class="btn btn-cancel applet-menu-cancel">NVM</button>
             </div>
         </form>
     </div>
-
-    {% for entry in applets %}
-        {% if entry.visible %}
-            {% if entry.applet.slug == "wallet" %}
-                <section
-                    id="id_applet_wallet"
-                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
-                >
-                    <span>Writs: {{ user.wallet.writs }}</span>
-                    <a href="{% url "wallet" %}" class="wallet-manage-link">Manage Wallet</a>
-                </section>
-            {% elif entry.applet.slug == "new-list" %}
-                <section
-                    id="id_applet_new_list"
-                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
-                >
-                    <h2>Start a new to-do list</h2>
-                    {% url "new_list" as form_action %}
-                    {% include "apps/dashboard/_partials/_form.html" with form=form form_action=form_action %}
-                </section>
-            {% elif entry.applet.slug == "my-lists" %}
-                <section
-                    id="id_applet_my_lists"
-                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
-                >
-                    <a href="{% url 'my_lists' user.id %}" class="my-lists-main">My lists:</a>
-                    <div class="my-lists-container">
-                        <ul>
-                            {% for list in recent_lists %}
-                                <li>
-                                    <a href="{{ list.get_absolute_url }}">{{ list.name }}</a>
-                                </li>
-                            {% empty %}
-                                <li>No lists yet.</li>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                </section>
-            {% elif entry.applet.slug == "username" %}
-                <section
-                    id="id_applet_username"
-                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
-                >
-                    <form method="POST" action="{% url "set_profile" %}">
-                        {% csrf_token %}
-                        <div class="username-field">
-                            <span class="username-at">@</span>
-                            <input
-                                id="id_new_username"
-                                name="username"
-                                required
-                                value="{{ user.username|default:'' }}"
-                                autocomplete="off"
-                                placeholder="username"
-                                data-original="{{ user.username|default:'' }}"
-                                oninput="this.closest('form').querySelector('.save-btn').hidden = (this.value === this.dataset.original)"
-                                onblur="this.scrollLeft = 0"
-                            >
-                        </div>
-                        <button type="submit" class="btn btn-confirm save-btn" hidden>OK</button>
-                    </form>
-                </section>
-            {% elif entry.applet.slug == "palette" %}
-                <section
-                    id="id_applet_palette"
-                    class="palette"
-                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
-                >
-                    <div class="palette-scroll">
-                        {% for palette in palettes %}
-                            <div class="palette-item">
-                                <div class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"></div>
-                                {% if not palette.locked %}
-                                    <form method="POST" action="{% url "set_palette" %}">
-                                        {% csrf_token %}
-                                        <button type="submit" name="palette" value="{{ palette.name }}" class="btn btn-confirm">OK</button>
-                                    </form>
-                                {% else %}
-                                    <span class="btn btn-disabled">&times;</span>
-                                {% endif %}
-                            </div>
-                        {% endfor %}
-                    </div>
-                </section>
-            {% endif %}
-        {% endif %}
-    {% endfor %}
+    {% include "apps/applets/_partials/_applets.html" %}
 </div>

src/templates/apps/dashboard/_partials/_scripts.html

@@ -2,6 +2,5 @@
 <script>
     window.onload = () => {
         initialize("#id_text");
-        initGearMenu();
     };
 </script>

src/templates/apps/dashboard/home.html

@@ -11,9 +11,7 @@
 {% block content %}
     {% if user.is_authenticated %}
         <div id="id_dash_content">
-            <button id="id_dash_gear">
-                <i class="fa-solid fa-gear"></i>
-            </button>
+            {% include "apps/applets/_partials/_gear.html" with menu_id="id_dash_applet_menu" %}
             {% include "apps/dashboard/_partials/_applets.html" %}
         </div>
     {% endif %}

src/templates/apps/gameboard/_partials/_applet-game-kit.html

@@ -0,0 +1,27 @@
+<section
+    id="id_applet_game_kit"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <button
+        id="id_game_kit_btn"
+        onclick="document.getElementById('id_game_kit').style.display='block'"
+    >
+        Game Kit
+    </button>
+    <div id="id_game_kit" style="display: none;">
+        {% if coin %}
+            <div id="id_kit_coin_on_a_string" class="token">
+                <i class="fa-solid fa-clover"></i>
+                <span class="token-tooltip">{{ coin.tooltip_text }}</span>
+            </div>
+        {% endif %}
+        {% for token in free_tokens %}
+            <div id="id_kit_free_token_{{ forloop.counter0 }}" class="token">
+                <i class="fa-solid fa-coins"></i>
+                <span class="token-tooltip">{{ token.tooltip_text }}</span>
+            </div>
+        {% endfor %}
+        <div id="id_kit_card_deck" class="kit-item"><i class="fa-regular fa-id-badge"></i></div>
+        <div id="id_kit_dice_set" class="kit-item"><i class="fa-solid fa-dice"></i></div>
+    </div>
+</section>

src/templates/apps/gameboard/_partials/_applet-my-games.html

@@ -0,0 +1,9 @@
+<section
+    id="id_applet_my_games"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <h2>My Games</h2>
+    <ul class="game-list">
+        <small>[feature forthcoming]</small>
+    </ul>
+</section>

src/templates/apps/gameboard/_partials/_applet-new-game.html

@@ -0,0 +1,9 @@
+<section
+    id="id_applet_new_game"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <h2>New Game</h2>
+    <ul class="game-type">
+        <small>[feature forthcoming]</small>
+    </ul>
+</section>

src/templates/apps/gameboard/_partials/_applets.html

@@ -0,0 +1,27 @@
+<div id="id_game_applets_container">
+    <div id="id_game_applet_menu" style="display:none;">
+        <form
+            hx-post="{% url "toggle_game_applets" %}"
+            hx-target="#id_game_applets_container"
+            hx-swap="outerHTML"
+        >
+            {% csrf_token %}
+            {% for entry in applets %}
+                <label>
+                    <input
+                        type="checkbox"
+                        name="applets"
+                        value="{{ entry.applet.slug }}"
+                        {% if entry.visible %}checked{% endif %}
+                    >
+                    {{ entry.applet.name }}
+                </label>
+            {% endfor %}
+            <div class="menu-btns">
+                <button type="submit" class="btn btn-confirm">OK</button>
+                <button type="button" id="id_game_applet_menu_cancel" class="btn btn-cancel applet-menu-cancel">NVM</button>
+            </div>
+        </form>
+    </div>
+    {% include "apps/applets/_partials/_applets.html" %}
+</div>

src/templates/apps/gameboard/gameboard.html

@@ -5,36 +5,7 @@
 
 {% block content %}
     <div class="gameboard-page">
-        <section id="id_applet_my_games">
-            <h2>My Games</h2>
-        </section>
-
-        <section id="id_applet_new_game">
-            <h2>New Game</h2>
-        </section>
-
-        <div id="id_game_gear"></div>
-        <button
-            id="id_game_kit_btn"
-            onclick="document.getElementById('id_game_kit').style.display='block'"
-        >
-            Game Kit
-        </button>
-        <div id="id_game_kit" style="display:none;">
-            {% if coin %}
-                <div id="id_kit_coin_on_a_string" class="token">
-                    <i class="fa-solid fa-clover"></i>
-                    <span class="token-tooltip">{{ coin.tooltip_text }}</span>
-                </div>
-            {% endif %}
-            {% for token in free_tokens %}
-                <div id="id_kit_free_token_{{ forloop.counter0 }}" class="token">
-                    <i class="fa-solid fa-coins"></i>
-                    <span class="token-tooltip">{{ token.tooltip_text }}</span>
-                </div>
-            {% endfor %}
-            <div id="id_kit_card_deck" class="kit-item"><i class="fa-regular fa-id-badge"></i></div>
-            <div id="id_kit_dice_set" class="kit-item"><i class="fa-solid fa-dice"></i></div>
-        </div>
+        {% include "apps/applets/_partials/_gear.html" with menu_id="id_game_applet_menu" %}
+        {% include "apps/gameboard/_partials/_applets.html" %}
     </div>
 {% endblock content %}

src/templates/core/base.html

@@ -53,6 +53,7 @@
         {% block scripts %}
         {% endblock scripts %}
         <script src="{% static "vendor/htmx.min.js" %}"></script>
+        <script src="{% static "apps/scripts/applets.js" %}"></script>
         <script>
             document.body.addEventListener('htmx:configRequest', function(evt) {
                 evt.detail.headers['X-CSRFToken'] = getCookie('csrftoken');