#139

frontend/src/components/PostList.tsx

@@ -1,10 +1,9 @@
-import { useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
-import { fetchPost } from '@/lib/posts'
 import PrefetchLink from '@/components/PrefetchLink'
+import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'
 
 import type { FC, MouseEvent } from 'react'
 
@@ -15,47 +14,35 @@ type Props = { posts:     Post[]
 
 
 export default (({ posts, onClick }: Props) => {
-  const navigate = useNavigate ()
+  const location = useLocation ()
 
-  const qc = useQueryClient ()
+  const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)
 
-  const prefetch = (id: string) => qc.prefetchQuery ({
-      queryKey: ['post', id],
-      queryFn:  () => fetchPost (id) })
-
-  return (
-      <div className="flex flex-wrap gap-6 p-4">
-	{posts.map ((post, i) => {
-	  const id = String (post.id)
-	  const hRef = `/posts/${ id }`
   const cardRef = useRef<HTMLDivElement> (null)
 
-	  const handleClick = async (ev: MouseEvent<HTMLAnchorElement>) => {
+  const outboundSharedId = useSharedTransitionStore (s => s.byLocationKey[location.key])
-	    onClick?.(ev)
 
-	    if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.button === 1)
+  return (
-	      return
+      <>
-
+	<div className="flex flex-wrap gap-6 p-4">
-	    ev.preventDefault ()
+	  {posts.map ((post, i) => {
-
+	    const id2 = `page-${ post.id }`
-	    await qc.ensureQueryData ({
+	    const layoutId = outboundSharedId === id2 ? id2 : undefined
-		queryKey: ['post', id],
-		queryFn:  () => fetchPost (id) })
-
-	    navigate (hRef)
-	  }
 
 	    return (
 		<PrefetchLink
-		  to={hRef}
+		    to={`/posts/${ post.id }`}
-		  key={id}
+		    key={post.id}
 		    className="w-40 h-40"
-		  onMouseEnter={() => prefetch (id)}
+		    state={{ sharedId: `page-${ post.id }` }}
-		  onFocus={() => prefetch (id)}
+		    onClick={e => {
-		  onClick={handleClick}>
+		      const sharedId = `page-${ post.id }`
+		      setForLocationKey (location.key, sharedId)
+		      onClick?.(e)
+		    }}>
 		  <motion.div
 		      ref={cardRef}
-		    layoutId={`page-${ id }`}
+		      layoutId={layoutId}
 		      className="w-full h-full overflow-hidden rounded-xl shadow
 				 transform-gpu will-change-transform"
 		      whileHover={{ scale: 1.02 }}
@@ -83,5 +70,6 @@ export default (({ posts, onClick }: Props) => {
 		  </motion.div>
 		</PrefetchLink>)
 	  })}
-      </div>)
+	</div>
+      </>)
 }) satisfies FC<Props>

frontend/src/components/PrefetchLink.tsx

@@ -1,5 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { forwardRef, useMemo } from 'react'
+import { flushSync } from 'react-dom'
 import { createPath, useNavigate } from 'react-router-dom'
 
 import { useOverlayStore } from '@/components/RouteBlockerOverlay'
@@ -11,6 +12,7 @@ import type { To } from 'react-router-dom'
 
 type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
     to:             To
+    state?:         Record<string, string>
     replace?:       boolean
     className?:     string
     cancelOnError?: boolean }
@@ -20,11 +22,15 @@ export default forwardRef<HTMLAnchorElement, Props> (({
     to,
     replace,
     className,
+    state,
     onMouseEnter,
     onTouchStart,
     onClick,
     cancelOnError = false,
     ...rest }, ref) => {
+  if ('onClick' in rest)
+    delete rest['onClick']
+
   const navigate = useNavigate ()
   const qc = useQueryClient ()
   const url = useMemo (() => {
@@ -57,6 +63,8 @@ export default forwardRef<HTMLAnchorElement, Props> (({
   }
 
   const handleClick = async (ev: MouseEvent<HTMLAnchorElement>) => {
+    try
+    {
       onClick?.(ev)
 
       if (ev.defaultPrevented
@@ -68,14 +76,24 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 
       ev.preventDefault ()
 
+      flushSync (() => {
 	setOverlay (true)
+      })
       const ok = await doPrefetch ()
+      flushSync (() => {
 	setOverlay (false)
+      })
 
       if (!(ok) && cancelOnError)
 	return
 
-    navigate (to, { replace })
+      navigate (to, { replace, ...(state && { state }) })
+    }
+    catch (ex)
+    {
+      console.log (ex)
+      ev.preventDefault ()
+    }
   }
 
   return (

frontend/src/pages/posts/PostDetailPage.tsx

@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { useParams } from 'react-router-dom'
+import { useLocation, useParams } from 'react-router-dom'
 
 import PostEditForm from '@/components/PostEditForm'
 import PostEmbed from '@/components/PostEmbed'
@@ -31,6 +31,11 @@ export default (({ user }: Props) => {
   const postId = String (id ?? '')
   const postKey = postsKeys.show (postId)
 
+  const location = useLocation ()
+  const navState = (location.state ?? { }) as { sharedId?: string }
+
+  const inboundSharedId = navState.sharedId
+
   const { data: post, isError: errorFlg, error } = useQuery ({
       enabled:  Boolean (id),
       queryKey: postKey,
@@ -89,6 +94,7 @@ export default (({ user }: Props) => {
 		       : 'bg-gray-500 hover:bg-gray-600')
 
   return (
+      <>
 	<div className="md:flex md:flex-1">
 	  <Helmet>
 	    {(post?.thumbnail || post?.thumbnailBase) && (
@@ -101,20 +107,21 @@ export default (({ user }: Props) => {
 	  </div>
 
 	  <MainArea className="relative">
-	  <motion.div
-	      layoutId={`page-${ String (id) }`}
-	      initial={{ clipPath: 'inset(0% 0% 0% 0%)' }}
-	      animate={{ clipPath: 'inset(0% 0% 0% 0% round 0px)', opacity: 0 }}
-	      transition={{ type: 'spring', stiffness: 500, damping: 40, mass: .5 }}
-	      className="absolute overflow-hidden transform-gpu will-change-transform
-			 inset-0 pointer-events-none z-10 w-[640px] h-[360px]">
-	    <img src={post?.thumbnailBase || post?.thumbnail}
-		 alt={post?.url}/>
-	  </motion.div>
-
 	    {post
 	     ? (
 		<>
+		  {inboundSharedId === `page-${ id }` && (
+		      <motion.div
+			  layoutId={inboundSharedId}
+			  className="absolute top-4 left-4 w-[640px] max-w-full h-[360px]
+				     overflow-hidden rounded-xl shadow pointer-events-none
+				     opacity-0 z-10">
+			<img src={post.thumbnail || post.thumbnailBase || undefined}
+			     alt={post.title || post.url}
+			     title={post.title || post.url || undefined}
+			     className="object-cover w-full h-full"/>
+		      </motion.div>)}
+
 		  <PostEmbed post={post}/>
 		  <Button onClick={() => changeViewedFlg.mutate ()}
 			  disabled={changeViewedFlg.isPending}
@@ -146,5 +153,6 @@ export default (({ user }: Props) => {
 	  <div className="md:hidden">
 	    <TagDetailSidebar post={post ?? null}/>
 	  </div>
-      </div>)
+	</div>
+      </>)
 }) satisfies FC<Props>

frontend/src/stores/sharedTransitionStore.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand'
+
+type SharedTransitionState = {
+    byLocationKey:        Record<string, string>
+    setForLocationKey:    (locationKey: string, sharedId: string) => void
+    clearForLocationKey:  (locationKey: string) => void }
+
+
+export const useSharedTransitionStore = create<SharedTransitionState> (set => ({
+    byLocationKey:      { },
+    setForLocationKey:  (locationKey, sharedId) =>
+	set (state => ({ byLocationKey: { ...state.byLocationKey,
+					  [locationKey]: sharedId } })),
+    clearForLocationKey: (locationKey) =>
+	set (state => {
+	  const next = { ...state.byLocationKey }
+	  delete next[locationKey]
+	  return { byLocationKey: next }
+	}) }))