feat: add flow animations to supply-chain graph edges (#154)

app/[locale]/(dashboard)/settings/page.tsx

@@ -7,9 +7,17 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { OrgProfileForm } from '@/components/ui/org-profile-form';
 import Link from 'next/link';
+import * as React from 'react';
+
+import { usePreferences } from '@/hooks';
 
 export default function SettingsPage() {
   const { data: session } = useSession();
+  const animationsDisabled = usePreferences((state) => state.animationsDisabled);
+  const setAnimationsDisabled = usePreferences((state) => state.setAnimationsDisabled);
+  // Avoid hydration mismatch by only rendering after mount
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
 
   return (
     <div className="flex flex-col gap-6">
@@ -56,6 +64,29 @@ export default function SettingsPage() {
         </Card>
       </div>
 
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-foreground">Accessibility</CardTitle>
+          <CardDescription>Customize the interface for reduced motion.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex items-center space-x-2">
+          {mounted ? (
+            <input
+              type="checkbox"
+              id="disable-animations"
+              className="h-4 w-4 rounded border-border"
+              checked={animationsDisabled}
+              onChange={(e) => setAnimationsDisabled(e.target.checked)}
+            />
+          ) : (
+            <div className="h-4 w-4 rounded border border-border bg-muted/50" />
+          )}
+          <Label htmlFor="disable-animations" className="cursor-pointer">
+            Disable Animations
+          </Label>
+        </CardContent>
+      </Card>
+
       <Card>
         <CardHeader>
           <CardTitle className="text-foreground">Account</CardTitle>

components/graph/supply-chain-graph.tsx

@@ -25,6 +25,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { usePreferences } from '@/hooks';
 
 function SupplierNode({ data }: { data: { label: string } }) {
   return (
@@ -75,6 +76,10 @@ export function SupplyChainGraph({
   routes: RouteRecord[];
   emissionsByRoute?: Map<string, number>;
 }) {
+  const animationsDisabled = usePreferences((state) => state.animationsDisabled);
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+
   const { nodes, edges } = React.useMemo(() => {
     const nodes: Node[] = [];
     const edges: Edge[] = [];
@@ -107,21 +112,30 @@ export function SupplyChainGraph({
       const sourceId = r.originSupplierId ? `supplier-${r.originSupplierId}` : `facility-${r.originFacilityId}`;
       const targetId = `facility-${r.destinationId}`;
       const emissions = emissionsByRoute?.get(r.id);
+
+      const isAnimated = mounted ? !animationsDisabled : true;
+      const thickness = emissions !== undefined ? Math.min(6, Math.max(1.5, 1.5 + (emissions / 2000))) : 1.5;
+      const speed = emissions !== undefined ? Math.max(0.5, 3 - (emissions / 4000)) : 2;
+
       edges.push({
         id: `route-${r.id}`,
         source: sourceId,
         target: targetId,
         label: emissions !== undefined ? `${MODE_LABEL[r.mode]} · ${formatKg(emissions)}` : `${MODE_LABEL[r.mode]} · ${r.distanceKm}km`,
-        animated: r.mode === 'AIR',
+        animated: isAnimated,
         markerEnd: { type: MarkerType.ArrowClosed },
-        style: { stroke: r.mode === 'AIR' ? 'hsl(var(--destructive))' : 'hsl(var(--muted-foreground))' },
+        style: { 
+          stroke: r.mode === 'AIR' ? 'hsl(var(--destructive))' : 'hsl(var(--muted-foreground))',
+          strokeWidth: thickness,
+          ...(isAnimated && { animationDuration: `${speed}s` })
+        },
         labelStyle: { fill: 'hsl(var(--foreground))', fontSize: 10, fontWeight: 500 },
         labelBgStyle: { fill: 'hsl(var(--background))' },
       });
     });
 
     return { nodes, edges };
-  }, [suppliers, facilities, routes, emissionsByRoute]);
+  }, [suppliers, facilities, routes, emissionsByRoute, animationsDisabled, mounted]);
 
   const graphRef = React.useRef<HTMLDivElement>(null);
 

hooks/index.ts

@@ -2,3 +2,4 @@ export { useApi } from './use-api';
 export type { ApiState } from './use-api';
 export { useMutation } from './use-mutation';
 export { useDebounce } from './use-debounce';
+export { usePreferences } from './use-preferences';

hooks/use-preferences.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface PreferencesState {
+  animationsDisabled: boolean;
+  setAnimationsDisabled: (disabled: boolean) => void;
+}
+
+export const usePreferences = create<PreferencesState>()(
+  persist(
+    (set) => ({
+      animationsDisabled: false,
+      setAnimationsDisabled: (disabled) => set({ animationsDisabled: disabled }),
+    }),
+    {
+      name: 'ecosphere-preferences',
+    }
+  )
+);

package.json

@@ -60,7 +60,8 @@
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "xlsx": "^0.18.5",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",