disable matomo necessary in settings

apps/remix-ide/src/app/tabs/locales/en/settings.json

@@ -57,9 +57,9 @@
   "settings.analyticsDescription": "Control how Remix uses AI and analytics to improve your experience.",
   "settings.aiDescription": "The Remix AI Assistant enhances your coding experience with smart suggestions and automated insights. Manage how AI interacts with your code and data.",
   "settings.servicesDescription": "Configure the settings for connected services, including Github, IPFS, Swarm, Sindri and Etherscan.",
-  "settings.matomoAnalyticsNoCookies": "Matomo Analytics (no cookies)",
+  "settings.matomoAnalyticsNoCookies": "Matomo Analytics (necessary, no cookies)",
   "settings.matomoAnalyticsNoCookiesDescription": "Help improve Remix with anonymous usage data.",
-  "settings.matomoAnalyticsWithCookies": "Matomo Analytics (with cookies)",
+  "settings.matomoAnalyticsWithCookies": "Matomo Performance Analytics (with cookies)",
   "settings.matomoAnalyticsWithCookiesDescription": "Enable tracking with cookies for more detailed insights.",
   "settings.aiCopilot": "AI Copilot",
   "settings.aiCopilotDescription": "AI Copilot assists with code suggestions and improvements.",

apps/remix-ide/src/app/tabs/settings-tab.tsx

@@ -15,7 +15,7 @@ const _paq = (window._paq = window._paq || [])
 const profile = {
   name: 'settings',
   displayName: 'Settings',
-  methods: ['get', 'updateCopilotChoice', 'getCopilotSetting'],
+  methods: ['get', 'updateCopilotChoice', 'getCopilotSetting', 'updateMatomoPerfAnalyticsChoice'],
   events: [],
   icon: 'assets/img/settings.webp',
   description: 'Remix-IDE settings',

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -96,13 +96,9 @@ const settingsSections: SettingsSection[] = [
     { options: [{
       name: 'matomo-analytics',
       label: 'settings.matomoAnalyticsNoCookies',
+      headerClass: 'text-secondary',
       type: 'toggle',
       description: 'settings.matomoAnalyticsNoCookiesDescription',
-      footnote: {
-        text: 'Learn more about analytics',
-        link: 'https://matomo.org/',
-        styleClass: 'text-primary'
-      }
     }, {
       name: 'matomo-perf-analytics',
       label: 'settings.matomoAnalyticsWithCookies',

libs/remix-ui/settings/src/lib/settings-section.tsx

@@ -39,17 +39,16 @@ export const SettingsSectionUI: React.FC<SettingsSectionUIProps> = ({ plugin, se
   const handleToggle = (name: string) => {
     if (state[name]) {
       const newValue = !state[name].value
-
       dispatch({ type: 'SET_LOADING', payload: { name: name } })
       dispatch({ type: 'SET_VALUE', payload: { name: name, value: newValue } })
-      // _paq.push(['disableCookies'])
       if (!newValue && formUIData[name]) {
         Object.keys(formUIData[name]).forEach((key) => {
           dispatch({ type: 'SET_VALUE', payload: { name: key, value: '' } })
         })
         dispatch({ type: 'SET_TOAST_MESSAGE', payload: { value: 'Credentials removed' } })
       }
       if (name === 'copilot/suggest/activate') plugin.emit('copilotChoiceUpdated', newValue)
+      if (name === 'matomo-perf-analytics') plugin.call('settings', 'updateMatomoPerfAnalyticsChoice', newValue)
       if (name === 'text-wrap') plugin.emit('textWrapChoiceUpdated', newValue)
     } else {
       console.error('Setting does not exist: ', name)
@@ -94,15 +93,15 @@ export const SettingsSectionUI: React.FC<SettingsSectionUIProps> = ({ plugin, se
                   return (
                     <div className={`card border-0 rounded-0 ${isLastOption ? 'pt-3 pb-0' : isFirstOption ? 'border-bottom pb-3' : 'border-bottom py-3'}`} key={optionIndex}>
                       <div className="d-flex align-items-center">
-                        <h5 data-id={`settingsTab${option.name}Label`} className={`${isDark ? 'text-white' : 'text-black'} m-0`}>
+                        <h5 data-id={`settingsTab${option.name}Label`} className={`${option.headerClass || (isDark ? 'text-white' : 'text-black')} m-0`}>
                           <FormattedMessage id={option.label} />
                           {option.labelIconTooltip ?
                             <CustomTooltip tooltipText={<FormattedMessage id={option.labelIconTooltip} />}><i className={option.labelIcon}></i></CustomTooltip> :
                             option.labelIcon && <i className={option.labelIcon}></i>
                           }
                         </h5>
                         <div className="ms-auto">
-                          {option.type === 'toggle' && <ToggleSwitch id={option.name} isOn={toggleValue} onClick={() => handleToggle(option.name)} />}
+                          {option.type === 'toggle' && <ToggleSwitch id={option.name} isOn={toggleValue} onClick={() => handleToggle(option.name)} disabled = {option.name === "matomo-analytics" ? true : false}/>}
                           {option.type === 'select' && <div style={{ minWidth: '110px' }}><SelectDropdown value={selectValue} options={option.selectOptions} name={option.name} dispatch={dispatch as any} /></div>}
                           {option.type === 'button' && <button className="btn btn-secondary btn-sm" onClick={() => handleButtonClick(option.buttonOptions)}><FormattedMessage id={option.buttonOptions.label} /></button>}
                         </div>

libs/remix-ui/settings/src/types/index.ts

@@ -47,6 +47,7 @@ export interface SettingsSection {
       name: keyof SettingsState,
       label: string,
       labelIcon?: string,
+      headerClass?: string,
       labelIconTooltip?: string,
       description?: string | JSX.Element,
       footnote?: {