feat: add micro-animations to TopBar, toasts, settings, and shortcut help

src/components/settings/SettingsDialog.tsx

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { springs, scaleIn, microInteraction } from "@/lib/motion";
 import {
   Sun, Moon, Monitor, RotateCcw,
 } from "lucide-react";
@@ -120,7 +122,16 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
         </div>
 
         {/* Tab content */}
-        <div className="flex flex-col gap-5 pt-1">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={tab}
+            className="flex flex-col gap-5 pt-1"
+            variants={scaleIn}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            transition={springs.snappy}
+          >
           {tab === "appearance" && (
             <>
               {/* Theme */}
@@ -193,16 +204,19 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                       ? "oklch(50% 0 0)"
                       : `oklch(55% 0.12 ${hue})`;
                     return (
-                      <button
+                      <motion.button
                         key={hue}
                         type="button"
                         onClick={() => setAccentColor(hue)}
-                        className="size-7 rounded-full transition-transform hover:scale-110"
+                        className="size-7 rounded-full"
                         style={{
                           backgroundColor: bg,
                           outline: settings.accentColor === hue ? "2px solid currentColor" : "none",
                           outlineOffset: "2px",
                         }}
+                        whileHover={microInteraction.hover}
+                        whileTap={microInteraction.tap}
+                        transition={springs.snappy}
                         aria-label={label}
                         title={label}
                       />
@@ -278,7 +292,8 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
               </p>
             </div>
           )}
-        </div>
+          </motion.div>
+        </AnimatePresence>
       </DialogContent>
     </Dialog>
   );