#34

frontend/src/components/PostList.tsx

@@ -2,6 +2,7 @@ import { motion } from 'framer-motion'
 import { useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 
+import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import PrefetchLink from '@/components/PrefetchLink'
 import { cn } from '@/lib/utils'
 import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'
@@ -16,14 +17,19 @@ type Props = { posts:     Post[]
 
 const PostList: FC<Props> = ({ posts, onClick }) => {
   const location = useLocation ()
+  const { settings } = useUserSettings ()
 
   const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)
 
   const cardRef = useRef<HTMLDivElement> (null)
+  const visiblePosts =
+      settings.viewedPostDisplay === 'hide'
+      ? posts.filter (post => !(post.viewed))
+      : posts
 
   return (
       <div className="flex flex-wrap gap-6 p-4">
-	{posts.map ((post, i) => {
+	{visiblePosts.map ((post, i) => {
 	  const sharedId = `page-${ post.id }`
 	  const layoutId = sharedId
 
@@ -42,6 +48,9 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
 		    layoutId={layoutId}
 		    className={cn ('w-full h-full overflow-hidden rounded-xl shadow',
 				   'transform-gpu will-change-transform',
+				   settings.viewedPostDisplay === 'dim'
+				   && post.viewed
+				   && 'opacity-40 saturate-50',
 				   (post.childPosts ?? []).length > 0 && 'ring-4 ring-green-500',
 				   (post.parentPosts ?? []).length > 0 && 'ring-4 ring-yellow-500')}
 		    whileHover={{ scale: 1.02 }}
@@ -72,4 +81,4 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
       </div>)
 }
 
-export default PostList
+export default PostList