fix: load SortableJS locally via UseLocalAssets pattern

sarg3nt · claude · sarg3nt · commit 011cec407bde · 2026-02-01T16:29:48.000-08:00
SortableJS was loaded as an ES module from CDN via sortable-loader.js,
which was blocked by CSP in local asset mode. This caused "Sortable not
loaded!" errors preventing sidebar nav reordering and dashboard editing.

- Add SortableJS UMD build to base.templ UseLocalAssets conditional
- Remove sortable-loader.js module script from base.templ and dashboard_editor.templ
- Simplify editor.js Sortable check (no longer needs async event listener)
- Add SortableJS to Makefile dev-assets download target

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/gearbox/Makefile b/gearbox/Makefile
@@ -103,6 +103,8 @@ dev-assets: ## Download CDN assets locally for secure development (CSP-compliant
 	@curl -fsSL https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js -o static/js/vendor/chartjs-plugin-zoom.min.js
 	@echo "  → D3.js..."
 	@curl -fsSL https://d3js.org/d3.v7.min.js -o static/js/vendor/d3.v7.min.js
+	@echo "  → SortableJS..."
+	@curl -fsSL https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js -o static/js/vendor/sortable.min.js
 	@echo "  → Tabulator CSS..."
 	@curl -fsSL https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css -o static/css/vendor/tabulator.min.css
 	@echo "  → Tabulator JS..."
diff --git a/gearbox/internal/framework/templates/layouts/base.templ b/gearbox/internal/framework/templates/layouts/base.templ
@@ -86,6 +86,7 @@ templ Base(title string, user *models.User, currentPath ...string) {
 			<script src="/static/js/vendor/chartjs-plugin-zoom.min.js"></script>
 			<link rel="stylesheet" href="/static/css/vendor/tabulator.min.css"/>
 			<script src="/static/js/vendor/tabulator.min.js"></script>
+			<script src="/static/js/vendor/sortable.min.js"></script>
 		} else {
 			<!-- CDN JavaScript libraries -->
 			<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js"></script>
@@ -95,6 +96,7 @@ templ Base(title string, user *models.User, currentPath ...string) {
 			<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
 			<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css"/>
 			<script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
+			<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
 		}
 		<style>
 			/* Base styles */
@@ -810,8 +812,6 @@ templ Base(title string, user *models.User, currentPath ...string) {
 		<script src="/static/js/utils/api.js" defer></script>
 		<script src="/static/js/common/page-header.js" defer></script>
 		<script src="/static/js/common/box-selector.js" defer></script>
-		<!-- Sortable.js for sidebar nav reordering -->
-		<script type="module" src="/static/js/dashboard/sortable-loader.js"></script>
 	</head>
 	<body class="h-full bg-gray-100 dark:bg-slate-900">
 		@ui.CollapsibleRestoreScript()
diff --git a/gearbox/internal/framework/templates/pages/dashboard_editor.templ b/gearbox/internal/framework/templates/pages/dashboard_editor.templ
@@ -384,8 +384,6 @@ templ WidgetConfigModal() {
 
 // DashboardEditorScript provides the editor JavaScript
 templ DashboardEditorScript(dash *dashboard.Dashboard) {
-	<!-- Load Sortable.js module -->
-	<script type="module" src="/static/js/dashboard/sortable-loader.js"></script>
 	<!-- Load widget palette logic -->
 	<script src="/static/js/dashboard/palette.js" defer></script>
 	<!-- Load dashboard editor logic -->
diff --git a/gearbox/static/js/dashboard/editor.js b/gearbox/static/js/dashboard/editor.js
@@ -27,16 +27,11 @@ document.addEventListener('DOMContentLoaded', function() {
 		}
 	}
 
-	// Wait for Sortable module to load before injecting controls
-	if (window.sortableReady) {
-		console.log('Sortable already loaded, initializing controls');
+	// Initialize controls — Sortable is loaded globally via base.templ
+	if (typeof window.Sortable !== 'undefined') {
 		injectEditControls();
 	} else {
-		console.log('Waiting for Sortable to load...');
-		window.addEventListener('sortable-loaded', function() {
-			console.log('Sortable loaded event received, initializing controls');
-			injectEditControls();
-		});
+		console.error('Sortable not loaded! Dashboard editor drag-and-drop will not work.');
 	}
 });
 

Original file line number	Diff line number	Diff line change
`@@ -27,16 +27,11 @@ document.addEventListener('DOMContentLoaded', function() {`
`27`	`27`	`}`
`28`	`28`	`}`
`29`	`29`
`30`		`- // Wait for Sortable module to load before injecting controls`
`31`		`- if (window.sortableReady) {`
`32`		`- console.log('Sortable already loaded, initializing controls');`
	`30`	`+ // Initialize controls — Sortable is loaded globally via base.templ`
	`31`	`+ if (typeof window.Sortable !== 'undefined') {`
`33`	`32`	`injectEditControls();`
`34`	`33`	`} else {`
`35`		`- console.log('Waiting for Sortable to load...');`
`36`		`- window.addEventListener('sortable-loaded', function() {`
`37`		`- console.log('Sortable loaded event received, initializing controls');`
`38`		`- injectEditControls();`
`39`		`- });`
	`34`	`+ console.error('Sortable not loaded! Dashboard editor drag-and-drop will not work.');`
`40`	`35`	`}`
`41`	`36`	`});`
`42`	`37`