#206

frontend/src/components/TagDetailSidebar.tsx

@@ -19,6 +19,7 @@ import SidebarComponent from '@/components/layout/SidebarComponent'
 import { toast } from '@/components/ui/use-toast'
 import { CATEGORIES } from '@/consts'
 import { apiDelete, apiGet, apiPatch, apiPost } from '@/lib/api'
+import { dateString, originalCreatedAtString } from '@/lib/utils'
 
 import type { DragEndEvent } from '@dnd-kit/core'
 import type { FC, MutableRefObject, ReactNode } from 'react'
@@ -343,7 +344,7 @@ export default (({ post }: Props) => {
 		       : 'bot操作'}
 		    </li>
 		    */}
-		    <li>耕作日時: {(new Date (post.createdAt)).toLocaleString ()}</li>
+		    <li>耕作日時: {dateString (post.createdAt)}</li>
 		    <li>
 		      <>リンク: </>
 		      <a
@@ -355,20 +356,14 @@ export default (({ post }: Props) => {
 		      </a>
 		    </li>
 		    <li>
-		      {/* TODO: 表示形式きしょすぎるので何とかする */}
 		      <>オリジナルの投稿日時: </>
-		      {!(post.originalCreatedFrom) && !(post.originalCreatedBefore)
+		      {originalCreatedAtString (post.originalCreatedFrom,
-		       ? '不明'
+						post.originalCreatedBefore)}
-		       : (
-			  <>
-			    {post.originalCreatedFrom
-			     && `${ (new Date (post.originalCreatedFrom)).toLocaleString () } 以降 `}
-			    {post.originalCreatedBefore
-			     && `${ (new Date (post.originalCreatedBefore)).toLocaleString () } より前`}
-			  </>)}
 		    </li>
 		    <li>
-		      <PrefetchLink to={`/posts/changes?id=${ post.id }`}>履歴</PrefetchLink>
+		      <PrefetchLink to={`/posts/changes?id=${ post.id }`}>
+			履歴
+		      </PrefetchLink>
 		    </li>
 		  </ul>
 		</div>)}

frontend/src/lib/utils.ts

@@ -4,4 +4,23 @@ import { twMerge } from 'tailwind-merge'
 import type { ClassValue } from 'clsx'
 
 
+export const toDate = (d: string | Date): Date => typeof d === 'string' ? new Date (d) : d
+
+
 export const cn = (...inputs: ClassValue[]) => twMerge (clsx (...inputs))
+
+
+export const dateString = (d: string | Date): string =>
+    toDate (d).toLocaleString ('ja-JP-u-ca-japanese')
+
+
+// TODO: 表示形式きしょすぎるので何とかする
+export const originalCreatedAtString = (
+    f:  string | Date | null,
+    b:  string | Date | null,
+): string =>
+    ([f ? `${ dateString (f) } 以降` : '',
+      b ? `${ dateString (b) } より前` : '']
+     .filter (Boolean)
+     .join (' '))
+    || '不明'

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
+import { motion } from 'framer-motion'
 import { useEffect } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
@@ -11,7 +12,7 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPostChanges } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
-import { cn } from '@/lib/utils'
+import { cn, dateString } from '@/lib/utils'
 
 import type { FC } from 'react'
 
@@ -77,10 +78,17 @@ export default (() => {
 			      <td className="align-top p-2 bg-white dark:bg-[#242424] border-r"
 				  rowSpan={rowsCnt}>
 				<PrefetchLink to={`/posts/${ change.post.id }`}>
-				  <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
+				  <motion.div
-				       alt={change.post.title || change.post.url}
+				      layoutId={`page-${ change.post.id }`}
-				       title={change.post.title || change.post.url || undefined}
+				      transition={{ type: 'spring',
-				       className="w-40"/>
+						    stiffness: 500,
+						    damping: 40,
+						    mass: .5 }}>
+				    <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
+					 alt={change.post.title || change.post.url}
+					 title={change.post.title || change.post.url || undefined}
+					 className="w-40"/>
+				  </motion.div>
 				</PrefetchLink>
 			      </td>)}
 			  <td className="p-2">
@@ -88,12 +96,14 @@ export default (() => {
 			    {`を${ change.changeType === 'add' ? '記載' : '消除' }`}
 			  </td>
 			  <td className="p-2">
-			    {change.user ? (
+			    {change.user
+			     ? (
 				<PrefetchLink to={`/users/${ change.user.id }`}>
 				  {change.user.name}
-				</PrefetchLink>) : 'bot 操作'}
+				</PrefetchLink>)
+			     : 'bot 操作'}
 			    <br/>
-			    {change.timestamp}
+			    {dateString (change.timestamp)}
 			  </td>
 			</tr>)
 		  })}

frontend/src/pages/posts/PostSearchPage.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
+import { motion } from 'framer-motion'
 import { useEffect, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -15,6 +16,7 @@ import { SITE_TITLE } from '@/config'
 import { apiGet } from '@/lib/api'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
+import { dateString, originalCreatedAtString } from '@/lib/utils'
 
 import type { FC, ChangeEvent, FormEvent, KeyboardEvent } from 'react'
 
@@ -359,10 +361,17 @@ export default (() => {
 			<tr key={row.id} className={'even:bg-gray-100 dark:even:bg-gray-700'}>
 			  <td className="p-2">
 			    <PrefetchLink to={`/posts/${ row.id }`} title={row.title}>
-			      <img src={row.thumbnail || row.thumbnailBase || undefined}
+			      <motion.div
-				   alt={row.title || row.url}
+				  layoutId={`page-${ row.id }`}
-				   title={row.title || row.url || undefined}
+				  transition={{ type: 'spring',
-				   className="w-8"/>
+						stiffness: 500,
+						damping: 40,
+						mass: .5 }}>
+				<img src={row.thumbnail || row.thumbnailBase || undefined}
+				     alt={row.title || row.url}
+				     title={row.title || row.url || undefined}
+				     className="w-8"/>
+			      </motion.div>
 			    </PrefetchLink>
 			  </td>
 			  <td className="p-2 truncate">
@@ -385,10 +394,11 @@ export default (() => {
 				</span>))}
 			  </td>
 			  <td className="p-2">
-			    {row.originalCreatedFrom} 〜 {row.originalCreatedBefore}
+			    {originalCreatedAtString (row.originalCreatedFrom,
+						      row.originalCreatedBefore)}
 			  </td>
-			  <td className="p-2">{row.createdAt}</td>
+			  <td className="p-2">{dateString (row.createdAt)}</td>
-			  <td className="p-2">{row.updatedAt}</td>
+			  <td className="p-2">{dateString (row.updatedAt)}</td>
 			</tr>))}
 		  </tbody>
 		</table>

frontend/src/pages/wiki/WikiHistoryPage.tsx

@@ -7,6 +7,7 @@ import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { apiGet } from '@/lib/api'
+import { dateString } from '@/lib/utils'
 
 import type { WikiPageChange } from '@/types'
 
@@ -65,7 +66,7 @@ export default () => {
 		      {change.user.name}
 		    </PrefetchLink>
 		    <br/>
-		    {change.timestamp}
+		    {dateString (change.timestamp)}
 		  </td>
 		</tr>))}
 	  </tbody>

frontend/src/pages/wiki/WikiSearchPage.tsx

@@ -6,6 +6,7 @@ import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { apiGet } from '@/lib/api'
+import { dateString } from '@/lib/utils'
 
 import type { FormEvent } from 'react'
 
@@ -84,7 +85,7 @@ export default () => {
 		      </PrefetchLink>
 		    </td>
 		    <td className="p-2">
-		      {page.updatedAt}
+		      {dateString (page.updatedAt)}
 		    </td>
 		  </tr>))}
 	    </tbody>