From cd06b8f25c27d2ee0efae4b7cca4c96084a54b4a Mon Sep 17 00:00:00 2001
From: jared <jnevans@gmail.com>
Date: Thu, 29 Jan 2026 00:30:58 +0000
Subject: [PATCH] Add clickable navigation dots to car mode

Users can now click on any dot in the card counter to jump directly
to that news card, making navigation more convenient.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 news-app/src/main.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/news-app/src/main.js b/news-app/src/main.js
index 744dd8c..95c8df1 100644
--- a/news-app/src/main.js
+++ b/news-app/src/main.js
@@ -267,7 +267,7 @@ function renderCarModeCard(group, index, total) {
     <!-- Card counter -->
     <div class="absolute bottom-6 sm:bottom-8 left-1/2 -translate-x-1/2 flex items-center justify-center z-30 max-w-[90vw] px-4">
       ${Array.from({ length: total }, (_, i) => `
-        <div class="shrink-0 rounded-full transition-all duration-300 ${i === index ? 'bg-white' : 'bg-white/40'}" style="width: ${i === index ? Math.max(12, Math.min(24, 200 / total)) : Math.max(6, Math.min(8, 120 / total))}px; height: ${Math.max(6, Math.min(8, 120 / total))}px; margin: 0 ${Math.max(2, Math.min(4, 60 / total))}px;"></div>
+        <div onclick="carModeGoTo(${i})" class="shrink-0 rounded-full transition-all duration-300 cursor-pointer hover:bg-white/70 ${i === index ? 'bg-white' : 'bg-white/40'}" style="width: ${i === index ? Math.max(12, Math.min(24, 200 / total)) : Math.max(6, Math.min(8, 120 / total))}px; height: ${Math.max(6, Math.min(8, 120 / total))}px; margin: 0 ${Math.max(2, Math.min(4, 60 / total))}px;"></div>
       `).join('')}
     </div>
   `
@@ -624,6 +624,14 @@ window.carModePrev = function() {
   transitionCard((state.carModeIndex - 1 + state.groups.length) % state.groups.length)
 }
 
+window.carModeGoTo = function(index) {
+  if (state.groups.length === 0 || state.isTransitioning) return
+  if (index < 0 || index >= state.groups.length) return
+  if (index === state.carModeIndex) return // Already on this card
+  stopCarModeCycle()
+  transitionCard(index)
+}
+
 function transitionCard(newIndex) {
   state.isTransitioning = true
   render() // This adds 'fading-out' class