#34

frontend/src/pages/posts/PostDetailPage.tsx

@@ -15,7 +15,7 @@ import { SITE_TITLE } from '@/config'
 import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
-import { getClientThumbnailMode } from '@/lib/settings'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { canEditContent } from '@/lib/users'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
@@ -30,8 +30,17 @@ type Props = { user: User | null }
 
 const PostDetailPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
-  const thumbnailMode = getClientThumbnailMode ()
+  const behaviourSettings = useClientBehaviourSettings ()
+  const thumbnailMode = behaviourSettings.thumbnailMode ?? 'normal'
+  const animationMode = behaviourSettings.animation ?? 'normal'
   const { id } = useParams ()
+  const heroLayoutId = animationMode === 'off' ? undefined : `page-${ id }`
+  const heroTransition =
+      animationMode === 'off'
+      ? { duration: 0 }
+      : animationMode === 'reduced'
+	? { duration: .08, ease: 'linear' as const }
+	: { duration: .2, ease: 'easeOut' as const }
   const postId = String (id ?? '')
   const postKey = postsKeys.show (postId)
 
@@ -138,12 +147,12 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 
 		{thumbnailMode !== 'off' && (post.thumbnail || post.thumbnailBase) && (
 		    <motion.div
-			layoutId={`page-${ id }`}
+			layoutId={heroLayoutId}
 			className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
 				   overflow-hidden rounded-xl pointer-events-none z-50"
 			initial={{ opacity: 1 }}
 			animate={{ opacity: 0 }}
-			transition={{ duration: .2, ease: 'easeOut' }}>
+			transition={heroTransition}>
 		      <img src={post.thumbnail || post.thumbnailBase || undefined}
 			   alt={post.title || post.url}
 			   title={post.title || post.url || undefined}

frontend/src/pages/users/SettingPage.tsx

@@ -319,23 +319,6 @@ const ThemeSection: FC<SharedSectionProps> = (
 	</div>
       </div>
 
-      <div className="space-y-2 rounded-lg border border-border bg-background p-3
-		      text-foreground shadow-sm transition-colors">
-	<p className="text-sm font-medium">プレビュー</p>
-	<p className="text-xs text-muted-foreground">
-	  現在の表示テーマ: {themeLabelById (draftActiveThemeId, draftCustomThemes)}
-	</p>
-	<div className="flex flex-wrap gap-3" style={themePreviewStyle (draftTagColours)}>
-	  {CATEGORIES.map (category => (
-	      <TagLink
-		  key={category}
-		  tag={previewTags[category]}
-		  linkFlg={false}
-		  truncateOnMobile
-		  withWiki={false}/>))}
-	</div>
-      </div>
-
       <Button type="button" onClick={onThemeSubmit}>
 	テーマを保存
       </Button>