refactor: migrate global styles to injectGlobalStyles

fe-app-podkop/src/helpers/index.ts

@@ -1,2 +1,3 @@
 export * from './getBaseUrl';
 export * from './parseValueList';
+export * from './injectGlobalStyles';

fe-app-podkop/src/helpers/injectGlobalStyles.ts

@@ -0,0 +1,12 @@
+import { GlobalStyles } from '../styles';
+
+export function injectGlobalStyles() {
+  document.head.insertAdjacentHTML(
+    'beforeend',
+    `
+        <style>
+          ${GlobalStyles}
+        </style>
+    `,
+  );
+}

fe-app-podkop/src/styles.ts

@@ -0,0 +1,26 @@
+// language=CSS
+export const GlobalStyles = `
+.cbi-value {
+    margin-bottom: 10px !important;
+}
+
+#diagnostics-status .table > div {
+    background: var(--background-color-primary);
+    border: 1px solid var(--border-color-medium);
+    border-radius: var(--border-radius);
+}
+
+#diagnostics-status .table > div pre,
+#diagnostics-status .table > div div[style*="monospace"] {
+    color: var(--color-text-primary);
+}
+
+#diagnostics-status .alert-message {
+    background: var(--background-color-primary);
+    border-color: var(--border-color-medium);
+}
+
+#cbi-podkop:has(.cbi-tab-disabled[data-tab="basic"]) #cbi-podkop-extra {
+    display: none;
+}
+`;

luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js

@@ -288,6 +288,45 @@ function parseValueList(value) {
   return value.split(/\n/).map((line) => line.split("//")[0]).join(" ").split(/[,\s]+/).map((s) => s.trim()).filter(Boolean);
 }
 
+// src/styles.ts
+var GlobalStyles = `
+.cbi-value {
+    margin-bottom: 10px !important;
+}
+
+#diagnostics-status .table > div {
+    background: var(--background-color-primary);
+    border: 1px solid var(--border-color-medium);
+    border-radius: var(--border-radius);
+}
+
+#diagnostics-status .table > div pre,
+#diagnostics-status .table > div div[style*="monospace"] {
+    color: var(--color-text-primary);
+}
+
+#diagnostics-status .alert-message {
+    background: var(--background-color-primary);
+    border-color: var(--border-color-medium);
+}
+
+#cbi-podkop:has(.cbi-tab-disabled[data-tab="basic"]) #cbi-podkop-extra {
+    display: none;
+}
+`;
+
+// src/helpers/injectGlobalStyles.ts
+function injectGlobalStyles() {
+  document.head.insertAdjacentHTML(
+    "beforeend",
+    `
+        <style>
+          ${GlobalStyles}
+        </style>
+    `
+  );
+}
+
 // src/constants.ts
 var STATUS_COLORS = {
   SUCCESS: "#4caf50",
@@ -417,6 +456,7 @@ return baseclass.extend({
   UPDATE_INTERVAL_OPTIONS,
   bulkValidate,
   getBaseUrl,
+  injectGlobalStyles,
   parseValueList,
   validateDNS,
   validateDomain,

luci-app-podkop/htdocs/luci-static/resources/view/podkop/podkop.js

@@ -6,36 +6,11 @@
 'require view.podkop.diagnosticTab as diagnosticTab';
 'require view.podkop.additionalTab as additionalTab';
 'require view.podkop.utils as utils';
+'require view.podkop.main as main';
 
 return view.extend({
     async render() {
-        document.head.insertAdjacentHTML('beforeend', `
+        main.injectGlobalStyles();
-            <style>
-                .cbi-value {
-                    margin-bottom: 10px !important;
-                }
-
-                #diagnostics-status .table > div {
-                    background: var(--background-color-primary);
-                    border: 1px solid var(--border-color-medium);
-                    border-radius: var(--border-radius);
-                }
-
-                #diagnostics-status .table > div pre,
-                #diagnostics-status .table > div div[style*="monospace"] {
-                    color: var(--color-text-primary);
-                }
-
-                #diagnostics-status .alert-message {
-                    background: var(--background-color-primary);
-                    border-color: var(--border-color-medium);
-                }
-
-                #cbi-podkop:has(.cbi-tab-disabled[data-tab="basic"]) #cbi-podkop-extra {
-                    display: none;
-                }
-            </style>
-        `);
 
         const m = new form.Map('podkop', '', null, ['main', 'extra']);
 
@@ -90,4 +65,4 @@ return view.extend({
 
         return map_promise;
     }
-});
+});