feat: reduce motion use fade-in and fade-out transition

Signed-off-by: Innei <[email protected]>

Author: Innei

Diff for: cssAsPlugin.js renamed to configs/tw-css-plugin.js

@@ -16,11 +16,18 @@ export const m: typeof M = new Proxy(M, {
       const nextProps = { ...props }
       if (shouldReduceMotion) {
         if (props.exit) {
-          delete nextProps.exit
+          nextProps.exit = {
+            opacity: 0,
+          }
         }
 
         if (props.initial) {
-          nextProps.initial = true
+          nextProps.initial = {
+            opacity: 0,
+          }
+        }
+        nextProps.animate = {
+          opacity: 1,
         }
       }
 

Diff for: src/renderer/src/components/common/Motion.tsx

@@ -1,7 +1,8 @@
+import { m } from "@renderer/components/common/Motion"
 import { views } from "@renderer/constants"
 import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
 import clsx from "clsx"
-import { AnimatePresence, m } from "framer-motion"
+import { AnimatePresence } from "framer-motion"
 import { useEffect, useRef, useState } from "react"
 
 export const ListItemHoverOverlay = ({

Diff for: src/renderer/src/components/ui/list-item-hover-overlay.tsx

@@ -1,4 +1,4 @@
-import { m } from "framer-motion"
+import { m } from "@renderer/components/common/Motion"
 import type { PropsWithChildren } from "react"
 import { createContext, useContext } from "react"
 import { Link } from "react-router-dom"

Diff for: src/renderer/src/components/ui/modal/inspire/PeekModal.tsx

@@ -136,6 +136,7 @@ export const EntryContentRender: Component<{ entryId: string }> = ({ entryId, cl
   })
 
   const isPeekModal = useInPeekModal()
+
   if (!entry) return null
 
   const content = entry?.entries.content ?? data?.entries.content
@@ -168,7 +169,7 @@ export const EntryContentRender: Component<{ entryId: string }> = ({ entryId, cl
                 }
               : undefined
           }
-          className="duration-200 ease-in-out animate-in fade-in slide-in-from-bottom-24"
+          className="duration-200 ease-in-out animate-in fade-in slide-in-from-bottom-24 f-motion-reduce:fade-in-0 f-motion-reduce:slide-in-from-bottom-0"
           key={entry.entries.id}
         >
           <article

Diff for: src/renderer/src/modules/entry-content/index.tsx

@@ -1,8 +1,9 @@
 import { useUISettingValue } from "@renderer/atoms/settings/ui"
+import { useReduceMotion } from "@renderer/hooks/biz/useReduceMotion"
 import { useSyncThemeark } from "@renderer/hooks/common"
 import { tipcClient } from "@renderer/lib/client"
 import { feedUnreadActions } from "@renderer/store/unread"
-import { useEffect, useInsertionEffect } from "react"
+import { useEffect, useInsertionEffect, useLayoutEffect } from "react"
 
 const useUISettingSync = () => {
   const setting = useUISettingValue()
@@ -43,7 +44,15 @@ const useUISettingSync = () => {
     }
   }, [setting.voice])
 }
+
+const useUXSettingSync = () => {
+  const reduceMotion = useReduceMotion()
+  useLayoutEffect(() => {
+    document.documentElement.dataset.motionReduce = reduceMotion ? "true" : "false"
+  }, [reduceMotion])
+}
 export const SettingSync = () => {
   useUISettingSync()
+  useUXSettingSync()
   return null
 }

Diff for: src/renderer/src/providers/ui-setting-sync.tsx

@@ -1,10 +1,11 @@
-import "./cssAsPlugin"
+import "./configs/tw-css-plugin"
 
 import path from "node:path"
 
 import { getIconCollections, iconsPlugin } from "@egoist/tailwindcss-icons"
 import { cleanupSVG, importDirectorySync, isEmptyColor, parseColors, runSVGO } from "@iconify/tools"
 import { compareColors, stringToColor } from "@iconify/utils/lib/colors"
+import plugin from "tailwindcss/plugin"
 import resolveConfig from "tailwindcss/resolveConfig"
 
 /** @type {import('tailwindcss').Config} */
@@ -115,6 +116,7 @@ export default resolveConfig({
       }),
     },
   },
+
   plugins: [
     iconsPlugin({
       collections: {
@@ -126,6 +128,11 @@ export default resolveConfig({
     require("@tailwindcss/container-queries"),
     require("@tailwindcss/typography"),
     require("./src/renderer/src/styles/tailwind-extend.css"),
+    plugin(({ addVariant }) => {
+      addVariant("f-motion-reduce", '[data-motion-reduce="true"] &')
+      addVariant("group-motion-reduce", ':merge(.group)[data-motion-reduce="true"] &')
+      addVariant("peer-motion-reduce", ':merge(.peer)[data-motion-reduce="true"] ~ &')
+    }),
   ],
 })