feat: animated sliding indicator for ModeToggle, update next-env types

Author: kevinkiklee

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/components/shared/ModeToggle.module.css

@@ -21,6 +21,7 @@
 }
 
 .toggle {
+  position: relative;
   display: flex;
   gap: 0;
   border: 1px solid var(--border);
@@ -32,29 +33,38 @@
   flex: 1;
   padding: 8px 12px;
   min-height: 44px;
-  background: var(--bg-primary);
+  background: transparent;
   color: var(--text-secondary);
   border: none;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   font-family: inherit;
-  transition: background 0.15s, color 0.15s;
+  position: relative;
+  z-index: 1;
+  transition: color var(--duration-fast) var(--ease-out);
 }
 
 .btn:not(:last-child) {
   border-right: 1px solid var(--border);
 }
 
-.btn:hover {
-  background: var(--bg-surface);
+.btn:hover:not(.btnActive) {
+  color: var(--text-primary);
+  background: var(--surface-1);
 }
 
 .btnActive {
-  background: var(--accent);
   color: var(--text-on-accent);
 }
 
-.btnActive:hover {
+.indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
   background: var(--accent);
+  border-radius: 7px;
+  transition: left var(--duration-normal) var(--ease-out),
+              width var(--duration-normal) var(--ease-out);
+  z-index: 0;
 }

src/components/shared/ModeToggle.tsx

@@ -1,3 +1,4 @@
+import { useRef, useEffect, useState } from 'react'
 import styles from './ModeToggle.module.css'
 
 interface ModeOption<T extends string> {
@@ -14,10 +15,26 @@ interface ModeToggleProps<T extends string> {
 }
 
 export function ModeToggle<T extends string>({ options, value, onChange, sticky, title }: ModeToggleProps<T>) {
+  const toggleRef = useRef<HTMLDivElement>(null)
+  const [indicator, setIndicator] = useState({ left: 0, width: 0 })
+
+  useEffect(() => {
+    const container = toggleRef.current
+    if (!container) return
+    const idx = options.findIndex((o) => o.value === value)
+    const btn = container.children[idx + 1] as HTMLElement | undefined // +1 for the indicator div
+    if (!btn) return
+    setIndicator({ left: btn.offsetLeft, width: btn.offsetWidth })
+  }, [value, options])
+
   return (
     <div className={`${styles.wrapper} ${sticky ? styles.sticky : ''}`}>
       {title && <div className={styles.title}>{title}</div>}
-      <div className={styles.toggle}>
+      <div className={styles.toggle} ref={toggleRef}>
+        <div
+          className={styles.indicator}
+          style={{ left: indicator.left, width: indicator.width }}
+        />
         {options.map((opt) => (
         <button
           key={opt.value}