feat: change analytics from opt-out to opt-in

- Add non-blocking bottom banner prompting users to enable logging
- Default log_enabled to false, track user response with log_prompt_answered
- Banner shows until user clicks Sure/No thanks, dismiss hides for session only
- Update settings menu icon from dots to gear
- Widen sidebar to prevent "Video Player" text wrapping

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/options/body.css

@@ -390,6 +390,75 @@ html[foo=bar] {
 }
 
 
+/* Logging Opt-in Banner */
+#log_prompt_banner {
+  position: fixed;
+  bottom: 8px;
+  left: 8px;
+  right: 8px;
+  z-index: 100;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+
+  background: var(--body-color);
+  border-radius: var(--border-radius);
+  font-size: 12px;
+  opacity: 0.9;
+}
+
+#log_prompt_banner * {
+  color: var(--body-background-color);
+}
+
+#log_prompt_text {
+  flex: 1;
+}
+
+#log_prompt_buttons {
+  display: flex;
+  gap: 6px;
+}
+
+#log_prompt_buttons button {
+  padding: 4px 10px;
+  border: none;
+  border-radius: var(--border-radius);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+#log_prompt_yes {
+  background-color: var(--body-background-color);
+  color: var(--body-color) !important;
+}
+
+#log_prompt_no {
+  background-color: transparent;
+  border: 1px solid var(--box-shadow-color) !important;
+}
+
+#log_prompt_buttons button:hover {
+  opacity: 0.85;
+}
+
+#log_prompt_dismiss {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 4px;
+  opacity: 0.7;
+  line-height: 1;
+}
+
+#log_prompt_dismiss:hover {
+  opacity: 1;
+}
+
+
 /* Menu Timer */
 #timer_container {
   position: fixed;
@@ -439,7 +508,7 @@ html[foo=bar] {
 
 #sidebar {
   height: calc(6px + var(--body-height));
-  width: 140px;
+  width: 160px;
   padding: 8px 6px;
   overflow: hidden;
 

src/options/feedback/feedback.html

@@ -115,7 +115,7 @@
               </div>
               <div class="info-row">
                 <span class="info-label">Screenshot</span>
-                <span class="info-value">A visual helps a lot</span>
+                <span class="info-value">If possible, attach a screenshot</span>
               </div>
               <div class="info-row">
                 <span class="info-label">Browser</span>

src/options/header.css

@@ -3,13 +3,17 @@
 html[dark_mode='false'] { --svg-color: #464646 }
 html[dark_mode='true']  { --svg-color: #E9E9E9 }
 
-#header-settings circle,
 #header-toggle path,
 .dark_mode circle, .dark_mode path
 {
   fill: var(--svg-color);
 }
 
+#header-settings path,
+#header-settings circle {
+  stroke: var(--svg-color);
+}
+
 /* Dark mode styling */
 html[dark_mode='true']  #header-dark  { display: none }
 html[dark_mode='false'] #header-light { display: none }
@@ -169,9 +173,9 @@ html[foo=bar]
 }
 #header-settings {
   cursor: pointer;
-  height: var(--icon-dim);
+  height: calc(var(--icon-dim) - 6px);
-  max-height: var(--icon-dim);
+  max-height: calc(var(--icon-dim) - 6px);
-  max-width: var(--icon-dim);
+  max-width: calc(var(--icon-dim) - 6px);
 }
 #settings-menu {
   font-size: 14px;

src/options/main.html

@@ -121,6 +121,15 @@
 
     </div>
 
+    <div id="log_prompt_banner" hidden>
+      <div id="log_prompt_text">Help improve RYS? Share anonymous usage data to guide development.</div>
+      <div id="log_prompt_buttons">
+        <button id="log_prompt_no">No thanks</button>
+        <button id="log_prompt_yes">Sure</button>
+      </div>
+      <button id="log_prompt_dismiss" title="Ask me later">✕</button>
+    </div>
+
     <div id="timer_container">
       <div>Menu Timer</div>
       <div></div>
@@ -142,8 +151,8 @@
       <a href='https://www.youtube.com/feed/history' title="Too many cat video suggestions? Try removing cat videos from your watch history." target="_blank">Manage History</a>
       <a href='https://myactivity.google.com/product/youtube' title="Too many cat video suggestions? Try removing cat videos from your watch history." target="_blank">Manage History — Advanced</a>
       <hr>
-      <div id='log-enable' title="By default, RYS uses logging to collect statistics about usage. This data helps guide future development of new features. All data is anonymous, not shared with 3rd parties, and I am committed to users' privacy. You currently have logging disabled, if you'd like to re-enable it click here.">Re-enable logging</div>
+      <div id='log-enable' title="RYS can collect anonymous usage statistics to help guide future development. All data is anonymous and not shared with 3rd parties. Click here to enable logging.">Enable logging</div>
-      <div id='log-disable' title="By default, RYS uses logging to collect statistics about usage. This data helps guide future development of new features. All data is anonymous, not shared with 3rd parties, and I am committed to users' privacy. To disable logging, click here.">Opt-out of logging</div>
+      <div id='log-disable' title="RYS collects anonymous usage statistics to help guide future development. All data is anonymous and not shared with 3rd parties. Click here to disable logging.">Disable logging</div>
       <hr>
       <a href='https://github.com/lawrencehook/remove-youtube-suggestions' target='_blank'>View Source Code</a>
       <a href='https://docs.google.com/forms/d/1AzQQxTWgG6M5N87jinvXKQkGS6Mehzg19XV4mjteTK0' target='_blank'>Give Feedback</a>
@@ -203,10 +212,9 @@
         </a>
       </div>
 
-      <svg id='header-settings' viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="black">
+      <svg id='header-settings' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="1.5">
-        <circle cx="12" cy="32" r="7"/>
+        <circle cx="12" cy="12" r="3"/>
-        <circle cx="52" cy="32" r="7"/>
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-        <circle cx="32" cy="32" r="7"/>
       </svg>
 
     </div>

src/options/main.js

@@ -35,6 +35,11 @@ document.addEventListener("DOMContentLoaded", () => {
       return acc;
     }, {});
 
+    // Show logging opt-in modal if user hasn't responded yet
+    if (!localSettings.log_prompt_answered) {
+      showLogPrompt();
+    }
+
     browser.tabs.query({ currentWindow: true, active: true }, tabs => {
       if (!tabs || tabs.length === 0) return;
       const [{ url }] = tabs;
@@ -439,3 +444,28 @@ function initAnnouncementBanner() {
     }));
   });
 }
+
+
+// Logging opt-in banner
+function showLogPrompt() {
+  const banner = document.getElementById('log_prompt_banner');
+  const yesBtn = document.getElementById('log_prompt_yes');
+  const noBtn = document.getElementById('log_prompt_no');
+  const dismissBtn = document.getElementById('log_prompt_dismiss');
+
+  banner.hidden = false;
+
+  yesBtn.addEventListener('click', () => {
+    browser.storage.local.set({ log_enabled: true, log_prompt_answered: true });
+    banner.hidden = true;
+  });
+
+  noBtn.addEventListener('click', () => {
+    browser.storage.local.set({ log_enabled: false, log_prompt_answered: true });
+    banner.hidden = true;
+  });
+
+  dismissBtn.addEventListener('click', () => {
+    banner.hidden = true;
+  });
+}

src/shared/analytics.js

@@ -4,7 +4,7 @@ for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".
 mixpanel.init('44d2dff3b4d141679640b297d31d5093');
 
 function recordEvent(name, props={}) {
-	const logEnabled = document.documentElement.getAttribute('log_enabled') || 'true';
+	const logEnabled = document.documentElement.getAttribute('log_enabled') || 'false';
 
 	if (logEnabled !== 'true') return;
 

src/shared/main.js

@@ -611,7 +611,8 @@ const PASSWORD_SETTINGS = {
 const OTHER_SETTINGS = {
   global_enable: true,
   dark_mode: false,
-  log_enabled: true,
+  log_enabled: false,
+  log_prompt_answered: false,
   ...TIMED_SETTINGS,
   ...SCHEDULE_SETTINGS,
   ...PASSWORD_SETTINGS,
@@ -737,6 +738,7 @@ const idToShortId = {
   "add_reveal_end_of_video":           '89',
   "add_reveal_button":                 '90', // deprecated; migrated to add_reveal_* settings
   "remove_sidebar_infinite_scroll":    '91',
+  "log_prompt_answered":               '92',
 };