fix(popup): resolve custom select init timing issue and improve UX

- Use `await` for `chrome.tabs.query` to ensure active platform is set before initializing the custom select.
- Initialize custom select only after platform value is resolved.
- Remove `e.isTrusted` check in `custom-select.ts` to allow programmatic change events.
- Update `updateUITexts` to dynamically translate `<select>` options.
- Add `youtubeShorts` translation key to i18n (ar, en, types).
- Enable save button as a trigger when no platform is selected.
- Stop event propagation on save click to prevent dropdown from instantly closing.
- Adjust custom select header spacing in `styles.css` for better alignment.

Author: YazanAmmar

src/i18n/locales/ar.ts

@@ -17,6 +17,7 @@ const ar: LocaleStrings = {
     reason_bypass: 'السبب: محاولة تحايل',
     lockedBtn: 'مقفول!',
     selectPlatform: 'اختر المنصة...',
+    youtubeShorts: 'يوتيوب شورتس',
   },
   dashboard: {
     title: 'مركز قيادة ليمترا',

src/i18n/locales/en.ts

@@ -17,6 +17,7 @@ const en: LocaleStrings = {
     reason_bypass: 'Triggered by: Anti-Bypass System',
     lockedBtn: 'Locked!',
     selectPlatform: 'Select Platform...',
+    youtubeShorts: 'YouTube Shorts',
   },
   dashboard: {
     title: 'Limitra Command Center',

src/i18n/types.ts

@@ -17,6 +17,7 @@ export interface LocaleStrings {
     reason_bypass: string;
     lockedBtn: string;
     selectPlatform: string;
+    youtubeShorts: string;
   };
   dashboard: {
     title: string;

src/ui/components/custom-select.ts

@@ -80,8 +80,7 @@ export function initCustomSelects(): void {
       select.parentNode.insertBefore(wrapper, select.nextSibling);
     }
 
-    select.addEventListener('change', (e: Event) => {
-      if (!e.isTrusted) return;
+    select.addEventListener('change', () => {
       const newActive = Array.from(select.options).find((opt) => opt.value === select.value);
       if (newActive) {
         selectedText.textContent = newActive.text;

src/ui/popup/index.ts

@@ -36,16 +36,18 @@ function updateUITexts() {
     'lbl-usage-videos': t.popup.videosUnit,
     'lbl-usage-time': t.popup.timeTitle,
   };
-
   Object.entries(map).forEach(([id, value]) => setText(id, value));
 
-  btnSave.textContent = t.popup.saveBtn;
+  const ytOption = platformSelector.querySelector('option[value="youtube_shorts"]');
+  if (ytOption) ytOption.textContent = t.popup.youtubeShorts;
 
-  document.body.dir = i18n.language === 'ar' ? 'rtl' : 'ltr';
+  const placeholderOption = platformSelector.querySelector('option[value=""]');
+  if (placeholderOption) placeholderOption.textContent = t.popup.selectPlatform;
 
+  btnSave.textContent = t.popup.saveBtn;
+  document.body.dir = i18n.language === 'ar' ? 'rtl' : 'ltr';
   updateProgressBar();
 }
-
 function updateProgressBar() {
   const isLimitEnabled = toggleLimit.checked;
   const isTimeEnabled = toggleTime.checked;
@@ -103,7 +105,7 @@ function lockUIForSelection() {
   timeInput.disabled = true;
   toggleLimit.disabled = true;
   toggleTime.disabled = true;
-  btnSave.disabled = true;
+  btnSave.disabled = false;
   btnSave.textContent = i18n.t.popup.selectPlatform;
 
   setText('stats-videos', `- / -`);
@@ -165,20 +167,19 @@ async function init() {
   await i18n.init();
   updateUITexts();
 
-  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-    const currentTab = tabs[0];
-    const currentUrl = currentTab?.url || '';
+  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+  const currentTab = tabs[0];
+  const currentUrl = currentTab?.url || '';
 
-    if (currentUrl.includes('youtube.com') && currentUrl.includes('/shorts/')) {
-      activePlatform = 'youtube_shorts';
-      platformSelector.value = activePlatform;
-      void loadPlatformData();
-    } else {
-      activePlatform = null;
-      platformSelector.value = '';
-      lockUIForSelection();
-    }
-  });
+  if (currentUrl.includes('youtube.com') && currentUrl.includes('/shorts/')) {
+    activePlatform = 'youtube_shorts';
+    platformSelector.value = activePlatform;
+    await loadPlatformData();
+  } else {
+    activePlatform = null;
+    platformSelector.value = '';
+    lockUIForSelection();
+  }
 
   initCustomSelects();
 
@@ -221,11 +222,18 @@ const systemThemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
 updateActionIcon(systemThemeQuery.matches);
 systemThemeQuery.addEventListener('change', (event) => updateActionIcon(event.matches));
 
-btnSave.onclick = async () => {
-  if (!activePlatform) return;
+btnSave.onclick = async (e: MouseEvent) => {
+  if (!activePlatform) {
+    e.stopPropagation();
 
-  clickCount++;
+    const trigger = document.querySelector('.custom-brutal-trigger') as HTMLElement;
+    if (trigger) {
+      trigger.click();
+    }
+    return;
+  }
 
+  clickCount++;
   if (spamResetTimer) clearTimeout(spamResetTimer);
   spamResetTimer = window.setTimeout(() => (clickCount = 0), 2000);
 

styles.css

@@ -347,12 +347,13 @@ button#save:disabled {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 20px;
-  min-height: 20px;
-  max-height: 20px;
+  height: 22px;
+  min-height: 22px;
+  max-height: 22px;
   padding: 0 8px;
   border-width: 1.5px !important;
-  box-shadow: 2px 2px 0px 0px;
+  box-shadow: none;
+  margin-top: 3px;
   background-color: var(--bg-surface);
   transition:
     transform 0.1s ease,