fix card click delay when reduced motion is active

Skip layoutId and use instant transitions on the card detail modal
when reduced motion is on. The shared layout animation kept the z-50
overlay in the DOM during its exit spring, blocking all card clicks
until it settled.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "openpylon",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -45,7 +45,10 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.6.0",
+    "png-to-ico": "^3.0.1",
+    "puppeteer-core": "^24.37.3",
     "shadcn": "^3.8.4",
+    "sharp": "^0.34.5",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.8.3",

src-tauri/Cargo.lock

@@ -2360,7 +2360,7 @@ dependencies = [
 
 [[package]]
 name = "openpylon"
-version = "0.1.0"
+version = "1.0.1"
 dependencies = [
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "openpylon"
-version = "1.0.0"
+version = "1.0.1"
 description = "A Tauri App"
 authors = ["you"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "openpylon",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "identifier": "com.openpylon.app",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { getCurrentWindow, LogicalSize, LogicalPosition } from "@tauri-apps/api/window";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion, MotionConfig } from "framer-motion";
 import { springs, fadeSlideLeft, fadeSlideRight } from "@/lib/motion";
 import { useAppStore } from "@/stores/app-store";
 import { useBoardStore } from "@/stores/board-store";
@@ -18,6 +18,7 @@ export default function App() {
   const initialized = useAppStore((s) => s.initialized);
   const init = useAppStore((s) => s.init);
   const view = useAppStore((s) => s.view);
+  const reduceMotion = useAppStore((s) => s.settings.reduceMotion);
 
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false);
@@ -127,7 +128,7 @@ export default function App() {
   }
 
   return (
-    <>
+    <MotionConfig reducedMotion={reduceMotion ? "always" : "user"}>
       <AppShell>
         <AnimatePresence mode="wait">
           {view.type === "board-list" ? (
@@ -161,6 +162,6 @@ export default function App() {
       <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
       <ToastContainer />
       <ShortcutHelpModal open={shortcutHelpOpen} onOpenChange={setShortcutHelpOpen} />
-    </>
+    </MotionConfig>
   );
 }

src/components/board/CardThumbnail.tsx

@@ -134,14 +134,14 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick, isFocu
           className={`w-full rounded-lg bg-pylon-surface shadow-sm text-left ${
             isFocused ? "ring-2 ring-pylon-accent ring-offset-2 ring-offset-pylon-column" : ""
           }`}
-          layoutId={`card-${card.id}`}
+          layoutId={prefersReducedMotion ? undefined : `card-${card.id}`}
           variants={fadeSlideUp}
           initial={prefersReducedMotion ? false : "hidden"}
           animate="visible"
           whileHover={{ scale: 1.02, y: -2, boxShadow: "0 4px 12px oklch(0% 0 0 / 10%)" }}
           whileTap={{ scale: 0.98 }}
           transition={springs.bouncy}
-          layout
+          layout={!prefersReducedMotion}
           {...attributes}
           {...listeners}
           role="article"

src/components/card-detail/CardDetailModal.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { X } from "lucide-react";
 import { useBoardStore } from "@/stores/board-store";
@@ -25,6 +25,8 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
   const updateCard = useBoardStore((s) => s.updateCard);
 
   const open = cardId != null && card != null;
+  const prefersReducedMotion = useReducedMotion();
+  const instant = { duration: 0 };
 
   return (
     <AnimatePresence>
@@ -36,7 +38,7 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
+            transition={prefersReducedMotion ? instant : { duration: 0.2 }}
             onClick={onClose}
           />
 
@@ -46,9 +48,12 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
             onClick={onClose}
           >
             <motion.div
-              layoutId={`card-${cardId}`}
+              layoutId={prefersReducedMotion ? undefined : `card-${cardId}`}
               className="relative w-full max-w-4xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
-              transition={springs.gentle}
+              initial={prefersReducedMotion ? { opacity: 0 } : undefined}
+              animate={prefersReducedMotion ? { opacity: 1 } : undefined}
+              exit={prefersReducedMotion ? { opacity: 0 } : undefined}
+              transition={prefersReducedMotion ? instant : springs.gentle}
               onClick={(e) => e.stopPropagation()}
             >
               <EscapeHandler onClose={onClose} />

src/components/settings/SettingsDialog.tsx

@@ -92,6 +92,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
   const setAccentColor = useAppStore((s) => s.setAccentColor);
   const setUiZoom = useAppStore((s) => s.setUiZoom);
   const setDensity = useAppStore((s) => s.setDensity);
+  const setReduceMotion = useAppStore((s) => s.setReduceMotion);
   const setDefaultColumnWidth = useAppStore((s) => s.setDefaultColumnWidth);
 
   const roRef = useRef<ResizeObserver | null>(null);
@@ -268,6 +269,30 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                   ))}
                 </div>
               </div>
+
+              <Separator />
+
+              {/* Reduce Motion */}
+              <div>
+                <SectionLabel>Reduce Motion</SectionLabel>
+                <p className="mb-2 text-xs text-pylon-text-secondary">
+                  Reduces animations and transitions for accessibility.
+                </p>
+                <div className="flex gap-2">
+                  {([false, true] as const).map((value) => (
+                    <Button
+                      key={String(value)}
+                      type="button"
+                      variant={settings.reduceMotion === value ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setReduceMotion(value)}
+                      className="flex-1"
+                    >
+                      {value ? "Reduced" : "Normal"}
+                    </Button>
+                  ))}
+                </div>
+              </div>
             </>
           )}
 

src/index.css

@@ -200,3 +200,12 @@
     scroll-behavior: auto !important;
   }
 }
+
+.reduce-motion *,
+.reduce-motion *::before,
+.reduce-motion *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}

src/lib/schemas.ts

@@ -87,4 +87,5 @@ export const appSettingsSchema = z.object({
   boardSortOrder: z.enum(["manual", "title", "created", "updated"]).default("updated"),
   boardManualOrder: z.array(z.string()).default([]),
   lastNotificationCheck: z.string().nullable().default(null),
+  reduceMotion: z.boolean().default(false),
 });

src/stores/app-store.ts

@@ -21,6 +21,7 @@ interface AppState {
   setView: (view: View) => void;
   refreshBoards: () => Promise<void>;
   addRecentBoard: (boardId: string) => void;
+  setReduceMotion: (reduceMotion: boolean) => void;
   setBoardSortOrder: (order: BoardSortOrder) => void;
   setBoardManualOrder: (ids: string[]) => void;
   getSortedBoards: () => BoardMeta[];
@@ -36,6 +37,10 @@ function applyTheme(theme: AppSettings["theme"]): void {
   }
 }
 
+function applyReduceMotion(on: boolean): void {
+  document.documentElement.classList.toggle("reduce-motion", on);
+}
+
 function applyAppearance(settings: AppSettings): void {
   const root = document.documentElement;
   root.style.fontSize = `${settings.uiZoom * 16}px`;
@@ -70,6 +75,7 @@ export const useAppStore = create<AppState>((set, get) => ({
     boardSortOrder: "updated",
     boardManualOrder: [],
     lastNotificationCheck: null,
+    reduceMotion: false,
   },
   boards: [],
   view: { type: "board-list" },
@@ -82,6 +88,7 @@ export const useAppStore = create<AppState>((set, get) => ({
     set({ settings, boards, initialized: true });
     applyTheme(settings.theme);
     applyAppearance(settings);
+    applyReduceMotion(settings.reduceMotion);
 
     // Due date notifications (once per hour)
     const lastCheck = settings.lastNotificationCheck;
@@ -148,6 +155,11 @@ export const useAppStore = create<AppState>((set, get) => ({
     updateAndSave(get, set, { defaultColumnWidth });
   },
 
+  setReduceMotion: (reduceMotion) => {
+    updateAndSave(get, set, { reduceMotion });
+    applyReduceMotion(reduceMotion);
+  },
+
   setView: (view) => set({ view }),
 
   refreshBoards: async () => {

src/types/settings.ts

@@ -22,4 +22,5 @@ export interface AppSettings {
   boardSortOrder: BoardSortOrder;
   boardManualOrder: string[];
   lastNotificationCheck: string | null;
+  reduceMotion: boolean;
 }