Bootstrap 5 & remove jQuery (#661)

* build: move frontend assets to Bootstrap 5.3 and Tom Select

* feat: migrate templates and scripts to Bootstrap 5, dropping jQuery

Templates
- Rename Bootstrap 4 classes and data attributes (data-bs-*, ms-/me-/ps-/pe-,
  text-start/end, form-group -> mb-3, input-group wrappers removed, badges,
  custom controls -> form-check/form-select, media -> d-flex, btn-close, ...)
- Dark mode now uses Bootstrap 5.3 colour modes (data-bs-theme on <html>),
  set from <head> to avoid a flash of the light theme
- Remove the Bootstrap 4 /bootstrap/ demo page
- Contextual table classes (table-success etc.) still work as plain
  backgrounds for the rigboard key

JavaScript
- Remove jQuery: src.js/interaction.js and every inline template script are
  rewritten in plain JS on top of small helpers (helpers.js, bundled with
  Bootstrap into jpop.js so inline scripts can use them)
- Replace bootstrap-select/ajax-bootstrap-select with Tom Select. The remote
  search now sends the `q` parameter and reads `text`, which is what the
  API actually uses (the old picker sent `term` and read `label`)
- HTML fragments are fetched with an X-Requested-With header so views keep
  rendering their modal variants, and fetched scripts are re-executed
- Remove the Bootstrap 4 plugin script includes

* fix: stop rigboard header buttons stretching to full width under Bootstrap 5

* fix: restore dark-mode brand colours and contextual table colours under Bootstrap 5

* fix: brighten dark-mode links and make coloured card outlines visible

* fix: calendar layout and grid borders, navbar search button width, guard missing modal links

* fix: readable text in dark-mode Tom Select inputs and placeholders, restore form-control column widths

* build: split the Dockerfile into cached stages with prod and dev targets

* deploy: make compose.yml development-only with live reload, and document it

* fix: keep badge text colour for links inside badges

* fix: restore table-bordered grid lines in dark mode

* fix: include Bootstrap's progress styles and keep progress labels readable

gulpfile.js

@@ -22,11 +22,10 @@ function fonts(done) {
 }
 
 function styles(done) {
-    const bs_select = ["bootstrap-select.css", "ajax-bootstrap-select.css"]
+    const bs_select = ["tom-select.bootstrap5.css"]
     return gulp.src(['pipeline/source_assets/scss/**/*.scss',
                     'node_modules/fullcalendar/main.css',
-                    'node_modules/bootstrap-select/dist/css/bootstrap-select.css',
-                    'node_modules/ajax-bootstrap-select/dist/css/ajax-bootstrap-select.css',
+                    'node_modules/tom-select/dist/css/tom-select.bootstrap5.css',
                     'node_modules/easymde/dist/easymde.min.css'
                     ])
     .pipe(sourcemaps.init())
@@ -47,35 +46,24 @@ function styles(done) {
 
 function scripts() {
     const dest = 'pipeline/built_assets/js';
-    const base_scripts = ["src.js", "util.js", "alert.js", "collapse.js", "dropdown.js", "modal.js", "konami.js"];
-    const bs_select = ["bootstrap-select.js", "ajax-bootstrap-select.js"]
+    const base_scripts = ["src.js", "konami.js"];
+    const bs_select = ["tom-select.complete.js", "autocompleter.js"]
     const interaction = ["html5sortable.min.js", "interaction.js"]
-    const jpop = ["jquery.min.js", "popper.min.js"]
-    return gulp.src(['node_modules/jquery/dist/jquery.min.js',
-                    /* JQuery Plugins */
-                    'node_modules/popper.js/dist/umd/popper.min.js',
-                    /* Bootstrap Plugins */
-                    'node_modules/bootstrap/js/dist/util.js',
-                    'node_modules/bootstrap/js/dist/tooltip.js',
-                    'node_modules/bootstrap/js/dist/popover.js',
-                    'node_modules/bootstrap/js/dist/dropdown.js',
-                    'node_modules/bootstrap/js/dist/collapse.js',
-                    'node_modules/bootstrap/js/dist/modal.js',
-                    'node_modules/bootstrap/js/dist/alert.js',
+    return gulp.src([/* Bootstrap bundle includes Popper */
+                    'node_modules/bootstrap/dist/js/bootstrap.bundle.js',
 
                     'node_modules/html5sortable/dist/html5sortable.min.js',
                     'node_modules/clipboard/dist/clipboard.min.js',
                     'node_modules/moment/moment.js',
                     'node_modules/fullcalendar/main.js',
-                    'node_modules/bootstrap-select/dist/js/bootstrap-select.js',
-                    'node_modules/ajax-bootstrap-select/dist/js/ajax-bootstrap-select.js',
+                    'node_modules/tom-select/dist/js/tom-select.complete.js',
                     'node_modules/easymde/dist/easymde.min.js',
                     'node_modules/konami/konami.js',
                     'pipeline/source_assets/js/**/*.js',])
     .pipe(gulpif(function(file) { return base_scripts.includes(file.relative);}, con('base.js')))
     .pipe(gulpif(function(file) { return bs_select.includes(file.relative);}, con('selects.js')))
     .pipe(gulpif(function(file) { return interaction.includes(file.relative);}, con('interaction.js')))
-    .pipe(gulpif(function(file) { return jpop.includes(file.relative);}, con('jpop.js')))
+    .pipe(gulpif(function(file) { return ["bootstrap.bundle.js", "helpers.js"].includes(file.relative);}, con('jpop.js')))
     .pipe(flatten())
     // Only minify if filename does not already denote it as minified
     .pipe(gulpif(function(file) { return file.path.indexOf("min") === -1;},terser()))
@@ -105,5 +93,12 @@ function watchFiles() {
   gulp.watch("**/templates/*.html", browserSyncReload);
 }
 
+// Rebuild the bundles when the sources change (used by the `assets` service in compose.override.yml)
+function watchSources() {
+  gulp.watch("pipeline/source_assets/scss/**/*.scss", styles);
+  gulp.watch("pipeline/source_assets/js/**/*.js", scripts);
+}
+
 exports.build = gulp.parallel(styles, scripts, fonts);
 exports.watch = gulp.parallel(watchFiles, browserSync);
+exports.watchAssets = gulp.series(exports.build, watchSources);