From c3af4406bfc68b332af051fede45e7367a2aecc3 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Mon, 15 Jun 2026 00:50:37 -0400
Subject: [PATCH] feat(DeviceDetailOverlay): add swipe indicator dots for
 device navigation

---
 src/app/components/DeviceDetailOverlay.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/app/components/DeviceDetailOverlay.tsx b/src/app/components/DeviceDetailOverlay.tsx
index aa0c7ba..e314980 100644
--- a/src/app/components/DeviceDetailOverlay.tsx
+++ b/src/app/components/DeviceDetailOverlay.tsx
@@ -455,6 +455,23 @@ export default function DeviceDetailOverlay({
               ))}
             </Swiper>
           </div>
+
+          {/* ── Swipe indicator dots ── */}
+          {devices.length > 1 && (
+            <div className="flex-shrink-0 flex items-center justify-center gap-2.5 py-2 border-t border-neutral-200/50">
+              {devices.map((_, i) => (
+                <button
+                  key={i}
+                  onClick={() => swiperRef.current?.slideTo(i)}
+                  className={`rounded-full transition-all duration-200 ${
+                    activeIndex === i
+                      ? 'w-4 h-2 bg-blue-500'
+                      : 'w-2 h-2 bg-neutral-300 hover:bg-neutral-400'
+                  }`}
+                />
+              ))}
+            </div>
+          )}
         </motion.div>
       </div>
     </AnimatePresence>