new sortable list implementation

app/templates/users/settings.html

@@ -1,4 +1,4 @@
-{% from 'common/macros.html' import babycode_editor_component, badge_editor_single %}
+{% from 'common/macros.html' import babycode_editor_component, badge_editor_single, sortable_list %}
 {% extends 'base.html' %}
 {% block title %}settings{% endblock %}
 {% block content %}
@@ -57,7 +57,7 @@
       <legend>Badges</legend>
       <a href="{{ url_for('guides.guide_page', category='user-guides', slug='settings', _anchor='badges')}}">Badges help</a>
       <bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} BadgeEditorForm" data-listeners="click input submit change">
-        <form data-use="badgeEditorPrepareSubmit" data-init='loadBadgeEditor' data-receive='addBadge' method='post' enctype='multipart/form-data' action='{{ url_for('users.save_badges', username=active_user.username) }}'>
+        <form data-use="badgeEditorPrepareSubmit" data-init='loadBadgeEditor' method='post' enctype='multipart/form-data' action='{{ url_for('users.save_badges', username=active_user.username) }}'>
           <div>Loading badges&hellip;</div>
           <div>If badges fail to load, JS may be disabled.</div>
         </form>
@@ -72,4 +72,8 @@
 <template id='badge-editor-template'>
 {{ badge_editor_single(options=uploads) }}
 </template>
+
+<template id="badges-list-template">
+{{ sortable_list(attr={'data-receive': 'addBadge'}) }}
+</template>
 {% endblock %}