Pull request #144: AG-21939 Improve (beta) options page header

Merge in EXTENSIONS/popup-blocker from feature/AG-21939 to master

Squashed commit of the following:

commit f2289e37290ae31b24409455683c3084b87a839c
Author: Vladimir Zhelvis <v.zhelvis@adguard.com>
Date:   Tue Feb 20 19:11:18 2024 +0300

    src/pages/options/App.tsx edited online with Bitbucket

commit 1a7c2db9ffeca31b91f6ac0ddf6023670b2a3f17
Author: Vladimir Zhelvis <v.zhelvis@adguard.com>
Date:   Tue Feb 20 19:09:14 2024 +0300

    don not import types from tasks

commit 9e5748b6b5f5dc52a2ad719f64d9c67c61b26337
Author: Vladimir Zhelvis <v.zhelvis@adguard.com>
Date:   Tue Feb 20 19:04:06 2024 +0300

    pass channel value to option page title

rollup.config.ts

@@ -138,6 +138,14 @@ const optionsPageConfig = {
         dir: BUILD_PATH,
     },
     plugins: [
+        replace({
+            preventAssignment: true,
+            // word boundaries are ignored
+            delimiters: ['', ''],
+            values: {
+                __channel__: env,
+            },
+        }),
         ...commonPlugins,
         typescript({
             tsconfig: 'tsconfig.json',

src/pages/options/App.tsx

@@ -10,17 +10,29 @@ import { useDetectUserscript } from './hooks';
 import { AppState } from './constants';
 import '../common/styles/options.pcss';
 
+type Channel = 'dev' | 'release' | 'beta';
+
 export const App = () => {
     const [state, setState] = useState(AppState.Detecting);
 
     useDetectUserscript(setState);
 
+    // This is a placeholder for the channel value from the rollup replace plugin.
+    const channel = '__channel__' as Channel;
+
+    let title = translator.getMessage('userscript_name');
+
+    if (channel !== 'release') {
+        // Capitalize the first letter of the channel name.
+        title += ` ${channel[0].toUpperCase() + channel.slice(1)}`;
+    }
+
     return (
         <>
             <div class="settings">
                 <div class="settings__in">
                     <div class="settings__title">
-                        {translator.getMessage('userscript_name')}
+                        {title}
                     </div>
                     {state === AppState.Detecting && <LoadingSubtitle />}
                     {state === AppState.NotInstalled && <NotInstalled />}