feat: Add SecuBox portal header to Netifyd views

Add unified SecuBox header navigation to all 5 Netifyd views:
- dashboard.js, devices.js, flows.js, applications.js, settings.js

Pattern: Wrap view content with secubox-page-wrapper and prepend
SbHeader.render() to hide LuCI sidebar when in portal context.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package/secubox/luci-app-secubox-netifyd/htdocs/luci-static/resources/view/secubox-netifyd/applications.js

@@ -4,6 +4,13 @@
 'require ui';
 'require dom';
 'require secubox-netifyd/api as netifydAPI';
+'require secubox-theme/theme as Theme';
+'require secubox-portal/header as SbHeader';
+
+var lang = (typeof L !== 'undefined' && L.env && L.env.lang) ||
+	(document.documentElement && document.documentElement.getAttribute('lang')) ||
+	(navigator.language ? navigator.language.split('-')[0] : 'en');
+Theme.init({ language: lang });
 
 return view.extend({
 	refreshInterval: 5,
@@ -285,7 +292,7 @@ return view.extend({
 
 		var serviceRunning = status.running;
 
-		return E('div', { 'class': 'cbi-map' }, [
+		var view = E('div', { 'class': 'cbi-map' }, [
 			E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem' }, [
 				E('h2', { 'name': 'content', 'style': 'margin: 0' }, [
 					E('i', { 'class': 'fa fa-cubes', 'style': 'margin-right: 0.5rem' }),
@@ -352,6 +359,11 @@ return view.extend({
 				])
 			])
 		]);
+
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	addFooter: function() {

package/secubox/luci-app-secubox-netifyd/htdocs/luci-static/resources/view/secubox-netifyd/dashboard.js

@@ -4,6 +4,13 @@
 'require ui';
 'require dom';
 'require secubox-netifyd/api as netifydAPI';
+'require secubox-theme/theme as Theme';
+'require secubox-portal/header as SbHeader';
+
+var lang = (typeof L !== 'undefined' && L.env && L.env.lang) ||
+	(document.documentElement && document.documentElement.getAttribute('lang')) ||
+	(navigator.language ? navigator.language.split('-')[0] : 'en');
+Theme.init({ language: lang });
 
 return view.extend({
 	refreshInterval: 5,
@@ -717,7 +724,10 @@ return view.extend({
 		dom.content(self.appsContainer, self.renderTopApplications(topApps));
 		dom.content(self.protosContainer, self.renderTopProtocols(topProtos));
 
-		return pageContent;
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+		wrapper.appendChild(pageContent);
+		return wrapper;
 	},
 
 	handleSaveApply: null,

package/secubox/luci-app-secubox-netifyd/htdocs/luci-static/resources/view/secubox-netifyd/devices.js

@@ -4,6 +4,13 @@
 'require ui';
 'require dom';
 'require rpc';
+'require secubox-theme/theme as Theme';
+'require secubox-portal/header as SbHeader';
+
+var lang = (typeof L !== 'undefined' && L.env && L.env.lang) ||
+	(document.documentElement && document.documentElement.getAttribute('lang')) ||
+	(navigator.language ? navigator.language.split('-')[0] : 'en');
+Theme.init({ language: lang });
 
 var callGetDevices = rpc.declare({
 	object: 'luci.secubox-netifyd',
@@ -324,7 +331,7 @@ return view.extend({
 
 		var serviceRunning = status.running;
 
-		return E('div', { 'style': 'max-width: 1400px; margin: 0 auto; padding: 24px' }, [
+		var view = E('div', { 'style': 'max-width: 1400px; margin: 0 auto; padding: 24px' }, [
 			// Header
 			E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px' }, [
 				E('div', { 'style': 'display: flex; align-items: center; gap: 12px' }, [
@@ -395,6 +402,11 @@ return view.extend({
 			// CSS for pulse animation
 			E('style', {}, '@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }')
 		]);
+
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	addFooter: function() {

package/secubox/luci-app-secubox-netifyd/htdocs/luci-static/resources/view/secubox-netifyd/flows.js

@@ -4,6 +4,13 @@
 'require ui';
 'require dom';
 'require secubox-netifyd/api as netifydAPI';
+'require secubox-theme/theme as Theme';
+'require secubox-portal/header as SbHeader';
+
+var lang = (typeof L !== 'undefined' && L.env && L.env.lang) ||
+	(document.documentElement && document.documentElement.getAttribute('lang')) ||
+	(navigator.language ? navigator.language.split('-')[0] : 'en');
+Theme.init({ language: lang });
 
 return view.extend({
 	refreshInterval: 3,
@@ -338,7 +345,7 @@ return view.extend({
 
 		var serviceRunning = status.running;
 
-		return E('div', { 'class': 'cbi-map' }, [
+		var view = E('div', { 'class': 'cbi-map' }, [
 			E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem' }, [
 				E('h2', { 'name': 'content', 'style': 'margin: 0' }, [
 					E('i', { 'class': 'fa fa-stream', 'style': 'margin-right: 0.5rem' }),
@@ -413,6 +420,11 @@ return view.extend({
 				])
 			])
 		]);
+
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	addFooter: function() {

package/secubox/luci-app-secubox-netifyd/htdocs/luci-static/resources/view/secubox-netifyd/settings.js

@@ -5,6 +5,13 @@
 'require ui';
 'require rpc';
 'require secubox-netifyd/api as netifydAPI';
+'require secubox-theme/theme as Theme';
+'require secubox-portal/header as SbHeader';
+
+var lang = (typeof L !== 'undefined' && L.env && L.env.lang) ||
+	(document.documentElement && document.documentElement.getAttribute('lang')) ||
+	(navigator.language ? navigator.language.split('-')[0] : 'en');
+Theme.init({ language: lang });
 
 var callServiceList = rpc.declare({
 	object: 'service',
@@ -743,6 +750,11 @@ return view.extend({
 			]);
 		};
 
-		return m.render();
+		return m.render().then(function(formEl) {
+			var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+			wrapper.appendChild(SbHeader.render());
+			wrapper.appendChild(formEl);
+			return wrapper;
+		});
 	}
 });