add reduce motion toggle and bump to v1.0.1

Add in-app reduce motion setting under Settings > Appearance so users
can disable animations without changing their OS preference. Applies a
.reduce-motion CSS class to kill all CSS transitions/animations and
wraps the app in MotionConfig to globally disable Framer Motion springs,
layout animations, and enter/exit transitions. Setting persists to disk.

Also removes leftover default Square*.png icons and bumps version to
1.0.1.

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/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;
 }