backend/.env (1)

9-14: ⚠️ Potential issue

Security: Email credentials exposed in version control.

Email credentials and app passwords should not be committed to the repository.

Move these sensitive values to a secure environment variable management system and use placeholders in the example file:

-[email protected]
-EMAIL_PASSWORD=passwor
-EMAIL_HOST=smtp.gmail.com
-EMAIL_PORT=465
-APP_PASSWORD=ukzwakckupguegiw
+[email protected]
+EMAIL_PASSWORD=your_email_password
+EMAIL_HOST=your_smtp_host
+EMAIL_PORT=your_smtp_port
+APP_PASSWORD=your_app_password

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

extention/app.js (2)

332-336: ⚠️ Potential issue

Heads up! XSS vulnerability in HTML template.

The cardTemplate uses raw HTML which could be dangerous if step contains malicious content.

-const cardTemplate = `<i class="${dragClass}">&equiv;</i><span>{{step}}</span><i class="${trashClass}"><img src="https://cdn-icons-png.flaticon.com/512/860/860829.png" ald="Delete" width="16px" height="16px" /></i>`;
+const cardTemplate = document.createElement('div');
+const dragIcon = document.createElement('i');
+dragIcon.className = dragClass;
+dragIcon.textContent = '≡';
+const stepSpan = document.createElement('span');
+stepSpan.textContent = `${step}`;
+const trashIcon = document.createElement('i');
+trashIcon.className = trashClass;
+const img = document.createElement('img');
+img.src = 'https://cdn-icons-png.flaticon.com/512/860/860829.png';
+img.alt = 'Delete';
+img.width = 16;
+img.height = 16;

---

475-493: ⚠️ Potential issue

Yo! Memory leak and unnecessary this aliasing in throttle function.

The throttle function creates new DOM elements on every call and uses unnecessary this aliasing.

 function throttle(func, limit = 100) {
-  createStickyDiv();
-  createFloatingMenu();
   let inThrottle;
   let lastResult;
-  domSelected = false;
   return function () {
     const args = arguments;
-    const context = this;
     if (!inThrottle) {
       inThrottle = true;
       setTimeout(() => (inThrottle = false), limit);
-      lastResult = func.apply(context, args);
+      lastResult = func.apply(this, args);
     }
     return lastResult;
   };
 }

🧰 Tools

🪛 Biome (1.9.4)

[error] 483-483: This aliasing of this is unnecessary.

Arrow functions inherits this from their enclosing scope.
Safe fix: Use this instead of an alias.

(lint/complexity/noUselessThisAlias)

extention/app.js (3)

1-12: Yo! Consider using an enum or object for modes.

Instead of using an array for AVAILABLE_MODES, consider using an enum or object to prevent typos and enable better IDE support.

-const AVAILABLE_MODES = ["hint", "tour"];
+const AVAILABLE_MODES = {
+  HINT: "hint",
+  TOUR: "tour"
+} as const;

---

301-322: Yo! Consider using ResizeObserver for dynamic updates.

The updateHighlight function might miss updates when elements change size dynamically.

+const resizeObserver = new ResizeObserver(entries => {
+  entries.forEach(entry => {
+    if (entry.target === lastHighlightTarget) {
+      updateHighlight({ target: lastHighlightTarget });
+    }
+  });
+});

 function updateHighlight({ target }) {
   if (
     !(target instanceof HTMLElement) ||
     target === lastHighlightTarget ||
     target.id.startsWith("bw-")
   ) {
     return;
   }
   lastHighlightTarget = target;
+  if (lastHighlightTarget) {
+    resizeObserver.observe(lastHighlightTarget);
+  }
   const { top, left, width, height } = target.getBoundingClientRect();

---

399-420: Yo! Consider adding error boundaries for tour mode.

The grabSelector function should handle errors gracefully in tour mode to prevent tour corruption.

   if (selectedMode === "tour") {
+    try {
       const selector = generateSelector(target);
+      if (!selector) {
+        console.warn('Failed to generate selector for element');
+        return;
+      }
       selectedElements.push({
         element: selector,
         step: selectedElements.length + 1,
       });
       generateList();
+    } catch (error) {
+      console.error('Failed to add tour step:', error);
+    }
     return;
   }

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro