feat: add wiki disclaimer to diagnostics

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

@@ -15,3 +15,4 @@ export * from './renderCircleCheckBigIcon24';
 export * from './renderSquareChartGanttIcon24';
 export * from './renderCogIcon24';
 export * from './renderSearchIcon24';
+export * from './renderBookOpenTextIcon24';

fe-app-podkop/src/icons/renderBookOpenTextIcon24.ts

@@ -0,0 +1,28 @@
+import { svgEl } from '../helpers';
+
+export function renderBookOpenTextIcon24() {
+  const NS = 'http://www.w3.org/2000/svg';
+  return svgEl(
+    'svg',
+    {
+      xmlns: NS,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': '2',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      class: 'lucide lucide-book-open-text-icon lucide-book-open-text',
+    },
+    [
+      svgEl('path', { d: 'M12 7v14' }),
+      svgEl('path', { d: 'M16 12h2' }),
+      svgEl('path', { d: 'M16 8h2' }),
+      svgEl('path', {
+        d: 'M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z',
+      }),
+      svgEl('path', { d: 'M6 12h2' }),
+      svgEl('path', { d: 'M6 8h2' }),
+    ],
+  );
+}

fe-app-podkop/src/podkop/tabs/diagnostic/diagnostic.store.ts

@@ -92,7 +92,7 @@ export const loadingDiagnosticsChecksStore: Pick<
       code: DIAGNOSTICS_CHECKS.DNS,
       title: DIAGNOSTICS_CHECKS_MAP.DNS.title,
       order: DIAGNOSTICS_CHECKS_MAP.DNS.order,
-      description: _('Queued'),
+      description: _('Pending'),
       items: [],
       state: 'skipped',
     },
@@ -100,7 +100,7 @@ export const loadingDiagnosticsChecksStore: Pick<
       code: DIAGNOSTICS_CHECKS.SINGBOX,
       title: DIAGNOSTICS_CHECKS_MAP.SINGBOX.title,
       order: DIAGNOSTICS_CHECKS_MAP.SINGBOX.order,
-      description: _('Queued'),
+      description: _('Pending'),
       items: [],
       state: 'skipped',
     },
@@ -108,7 +108,7 @@ export const loadingDiagnosticsChecksStore: Pick<
       code: DIAGNOSTICS_CHECKS.NFT,
       title: DIAGNOSTICS_CHECKS_MAP.NFT.title,
       order: DIAGNOSTICS_CHECKS_MAP.NFT.order,
-      description: _('Queued'),
+      description: _('Pending'),
       items: [],
       state: 'skipped',
     },
@@ -116,7 +116,7 @@ export const loadingDiagnosticsChecksStore: Pick<
       code: DIAGNOSTICS_CHECKS.FAKEIP,
       title: DIAGNOSTICS_CHECKS_MAP.FAKEIP.title,
       order: DIAGNOSTICS_CHECKS_MAP.FAKEIP.order,
-      description: _('Queued'),
+      description: _('Pending'),
       items: [],
       state: 'skipped',
     },

fe-app-podkop/src/podkop/tabs/diagnostic/helpers/getMeta.ts

@@ -17,7 +17,7 @@ export function getMeta({ allGood, atLeastOneGood }: IGetMetaProps): {
   if (atLeastOneGood) {
     return {
       state: 'warning',
-      description: _('Checks partially passed'),
+      description: _('Issues detected'),
     };
   }
 

fe-app-podkop/src/podkop/tabs/diagnostic/initController.ts

@@ -18,6 +18,7 @@ import { normalizeCompiledVersion } from '../../../helpers/normalizeCompiledVers
 import { renderModal } from '../../../partials';
 import { PODKOP_LUCI_APP_VERSION } from '../../../constants';
 import { showToast } from '../../../helpers/showToast';
+import { renderWikiDisclaimer } from './partials/renderWikiDisclaimer';
 
 async function fetchSystemInfo() {
   const systemInfo = await PodkopShellMethods.getSystemInfo();
@@ -309,6 +310,30 @@ async function handleShowSingBoxConfig() {
   }
 }
 
+function renderWikiDisclaimerWidget() {
+  const diagnosticsChecks = store.get().diagnosticsChecks;
+
+  function getWikiKind() {
+    const allResults = diagnosticsChecks.map((check) => check.state);
+
+    if (allResults.includes('error')) {
+      return 'error';
+    }
+
+    if (allResults.includes('warning')) {
+      return 'warning';
+    }
+
+    return 'default';
+  }
+
+  const container = document.getElementById('pdk_diagnostic-page-wiki');
+
+  return preserveScrollForPage(() => {
+    container!.replaceChildren(renderWikiDisclaimer(getWikiKind()));
+  });
+}
+
 function renderDiagnosticAvailableActionsWidget() {
   const diagnosticsActions = store.get().diagnosticsActions;
   const servicesInfoWidget = store.get().servicesInfoWidget;
@@ -464,6 +489,7 @@ async function onStoreUpdate(
 ) {
   if (diff.diagnosticsChecks) {
     renderDiagnosticsChecks();
+    renderWikiDisclaimerWidget();
   }
 
   if (diff.diagnosticsRunAction) {
@@ -519,6 +545,9 @@ function onPageMount() {
   // Initial system info render
   renderDiagnosticSystemInfoWidget();
 
+  // Initial Wiki disclaimer render
+  renderWikiDisclaimerWidget();
+
   // Initial services info fetch
   fetchServicesInfo();
 

fe-app-podkop/src/podkop/tabs/diagnostic/partials/renderWikiDisclaimer.ts

@@ -0,0 +1,40 @@
+import { renderBookOpenTextIcon24 } from '../../../../icons';
+import { renderButton } from '../../../../partials';
+import { insertIf } from '../../../../helpers';
+
+export function renderWikiDisclaimer(kind: 'default' | 'error' | 'warning') {
+  const iconWrap = E('span', {
+    class: 'pdk_diagnostic-page__right-bar__wiki__icon',
+  });
+  iconWrap.appendChild(renderBookOpenTextIcon24());
+
+  const className = [
+    'pdk_diagnostic-page__right-bar__wiki',
+    ...insertIf(kind === 'error', [
+      'pdk_diagnostic-page__right-bar__wiki--error',
+    ]),
+    ...insertIf(kind === 'warning', [
+      'pdk_diagnostic-page__right-bar__wiki--warning',
+    ]),
+  ].join(' ');
+
+  return E('div', { class: className }, [
+    E('div', { class: 'pdk_diagnostic-page__right-bar__wiki__content' }, [
+      iconWrap,
+      E('div', { class: 'pdk_diagnostic-page__right-bar__wiki__texts' }, [
+        E('b', {}, _('Troubleshooting')),
+        E('div', {}, _('Do not panic, everything can be fixed, just...')),
+      ]),
+    ]),
+    renderButton({
+      classNames: ['cbi-button-save'],
+      text: _('Visit Wiki'),
+      onClick: () =>
+        window.open(
+          'https://podkop.net/docs/troubleshooting/',
+          '_blank',
+          'noopener,noreferrer',
+        ),
+    }),
+  ]);
+}

fe-app-podkop/src/podkop/tabs/diagnostic/renderDiagnostic.ts

@@ -8,6 +8,7 @@ export function render() {
       }),
     ]),
     E('div', { class: 'pdk_diagnostic-page__right-bar' }, [
+      E('div', { id: 'pdk_diagnostic-page-wiki' }),
       E('div', { id: 'pdk_diagnostic-page-actions' }),
       E('div', { id: 'pdk_diagnostic-page-system-info' }),
     ]),

fe-app-podkop/src/podkop/tabs/diagnostic/styles.ts

@@ -28,6 +28,31 @@ export const styles = `
     grid-row-gap: 10px;
 }
 
+.pdk_diagnostic-page__right-bar__wiki {
+    border: 2px var(--background-color-low, lightgray) solid;
+    border-radius: 4px;
+    padding: 10px;
+
+    display: grid;
+    grid-template-columns: auto;
+    grid-row-gap: 10px;
+}
+
+.pdk_diagnostic-page__right-bar__wiki--warning {
+    border: 2px var(--warn-color-medium, orange) solid;
+}
+.pdk_diagnostic-page__right-bar__wiki--error {
+    border: 2px var(--error-color-medium, red) solid;
+}
+
+.pdk_diagnostic-page__right-bar__wiki__content {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-column-gap: 10px;
+}
+
+.pdk_diagnostic-page__right-bar__wiki__texts {}
+
 .pdk_diagnostic-page__right-bar__actions {
     border: 2px var(--background-color-low, lightgray) solid;
     border-radius: 4px;

fe-app-podkop/src/validators/validateProxyUrl.ts

@@ -6,20 +6,22 @@ import { validateSocksUrl } from './validateSocksUrl';
 
 // TODO refactor current validation and add tests
 export function validateProxyUrl(url: string): ValidationResult {
-  if (url.startsWith('ss://')) {
-    return validateShadowsocksUrl(url);
+  const trimmedUrl = url.trim();
+
+  if (trimmedUrl.startsWith('ss://')) {
+    return validateShadowsocksUrl(trimmedUrl);
   }
 
-  if (url.startsWith('vless://')) {
-    return validateVlessUrl(url);
+  if (trimmedUrl.startsWith('vless://')) {
+    return validateVlessUrl(trimmedUrl);
   }
 
-  if (url.startsWith('trojan://')) {
-    return validateTrojanUrl(url);
+  if (trimmedUrl.startsWith('trojan://')) {
+    return validateTrojanUrl(trimmedUrl);
   }
 
-  if (/^socks(4|4a|5):\/\//.test(url)) {
-    return validateSocksUrl(url);
+  if (/^socks(4|4a|5):\/\//.test(trimmedUrl)) {
+    return validateSocksUrl(trimmedUrl);
   }
 
   return {