#34

frontend/src/pages/posts/PostDetailPage.tsx

@@ -15,6 +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 { canEditContent } from '@/lib/users'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
@@ -29,6 +30,7 @@ type Props = { user: User | null }
 
 const PostDetailPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
+  const thumbnailMode = getClientThumbnailMode ()
   const { id } = useParams ()
   const postId = String (id ?? '')
   const postKey = postsKeys.show (postId)
@@ -134,7 +136,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		      </div>)
 		})}
 
-		{(post.thumbnail || post.thumbnailBase) && (
+		{thumbnailMode !== 'off' && (post.thumbnail || post.thumbnailBase) && (
 		    <motion.div
 			layoutId={`page-${ id }`}
 			className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
@@ -145,6 +147,8 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		      <img src={post.thumbnail || post.thumbnailBase || undefined}
 			   alt={post.title || post.url}
 			   title={post.title || post.url || undefined}
+			   loading={thumbnailMode === 'light' ? 'lazy' : 'eager'}
+			   decoding="async"
 			   className="object-cover w-full h-full"/>
 		    </motion.div>)}
 

frontend/src/pages/users/SettingPage.tsx

@@ -8,7 +8,7 @@ import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import TagLink from '@/components/TagLink'
-import BehaviorSettingsSection from '@/components/users/BehaviorSettingsSection'
+import BehaviourSettingsSection from '@/components/users/BehaviourSettingsSection'
 import KeyboardSettingsSection from '@/components/users/KeyboardSettingsSection'
 import InheritDialogue from '@/components/users/InheritDialogue'
 import UserCodeDialogue from '@/components/users/UserCodeDialogue'
@@ -259,7 +259,7 @@ const ThemeSection: FC<SharedSectionProps> = (
       <div className="space-y-3">
 	<div className="flex flex-wrap items-center justify-between gap-2">
 	  <div>
-	  <h3 className="font-medium">タグカテゴリ色</h3>
+	    <h3 className="font-medium">タグカテゴリ色</h3>
 	  </div>
 	  <Button
 	      type="button"
@@ -270,7 +270,7 @@ const ThemeSection: FC<SharedSectionProps> = (
 	  </Button>
 	</div>
 
-	<div className="grid gap-3 sm:grid-cols-2">
+	<div className="space-y-3">
 	  {CATEGORIES.map (category => {
 	      const resolvedDefaults =
 		  defaultThemeTagColoursFor (selectedTheme.baseTheme)
@@ -280,9 +280,19 @@ const ThemeSection: FC<SharedSectionProps> = (
 	      return (
 		  <div
 		      key={category}
-		      className="space-y-2 rounded-lg border border-border/70 px-3 py-2">
-		    <div className="flex items-center justify-between gap-3">
-		      <span className="text-sm">{CATEGORY_NAMES[category]}</span>
+		      className="flex flex-col gap-3 rounded-lg border border-border/70 px-3 py-3
+				 sm:flex-row sm:items-center sm:justify-between">
+		    <div className="space-y-2">
+		      <p className="text-sm font-medium">{CATEGORY_NAMES[category]}</p>
+		      <div style={themePreviewStyle (draftTagColours)}>
+			<TagLink
+			    tag={previewTags[category]}
+			    linkFlg={false}
+			    truncateOnMobile
+			    withWiki={false}/>
+		      </div>
+		    </div>
+		    <div className="flex flex-wrap items-center gap-3">
 		      <input
 			  type="color"
 			  value={draftTagColours[category]}
@@ -291,8 +301,6 @@ const ThemeSection: FC<SharedSectionProps> = (
 			  onChange={ev => onTagColourChange (category, ev.target.value)}
 			  className="h-10 w-16 cursor-pointer rounded border border-border
 				     bg-transparent p-1"/>
-		    </div>
-		    <div className="flex justify-end">
 		      <Button
 			  type="button"
 			  variant="ghost"
@@ -693,7 +701,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 		{activeTab === 'keyboard' && (
 		    <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
 		{activeTab === 'behavior' && (
-		    <BehaviorSettingsSection sectionClassName={sectionClassName}/>)}
+		    <BehaviourSettingsSection sectionClassName={sectionClassName}/>)}
 	      </div>)}
 	</div>
 
@@ -742,7 +750,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			  {activeTab === 'keyboard' && (
 			      <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
 			  {activeTab === 'behavior' && (
-			      <BehaviorSettingsSection sectionClassName={sectionClassName}/>)}
+			      <BehaviourSettingsSection sectionClassName={sectionClassName}/>)}
 			</>)}
 		  </div>)}
 	    </div>