#34

frontend/src/pages/posts/PostSearchPage.tsx

@@ -22,7 +22,6 @@ import {
     getClientListLimit,
     getClientListOrder,
     LIST_LIMIT_OPTIONS,
-    POST_LIST_ORDER_OPTIONS,
     setClientListSettings,
 } from '@/lib/settings'
 import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
@@ -40,28 +39,30 @@ const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
     qs.set (k, t)
 }
 
-const postOrderLabel: Record<FetchPostsOrder, string> = {
-    'title:asc': 'タイトル昇順',
-    'title:desc': 'タイトル降順',
-    'url:asc': 'URL 昇順',
-    'url:desc': 'URL 降順',
-    'original_created_at:asc': 'オリジナル投稿日時 昇順',
-    'original_created_at:desc': 'オリジナル投稿日時 降順',
-    'created_at:asc': '投稿日 昇順',
-    'created_at:desc': '投稿日 降順',
-    'updated_at:asc': '更新日 昇順',
-    'updated_at:desc': '更新日 降順',
-}
-
 const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
   const n = Number (value)
   return n === 20 || n === 50 || n === 100 ? n : null
 }
 
-const parseOrder = (value: string | null): FetchPostsOrder | null =>
-    POST_LIST_ORDER_OPTIONS.some (option => option === value)
-    ? value as FetchPostsOrder
-    : null
+const parseOrder = (value: string | null): FetchPostsOrder | null => {
+  switch (value)
+  {
+  case 'title:asc':
+  case 'title:desc':
+  case 'url:asc':
+  case 'url:desc':
+  case 'original_created_at:asc':
+  case 'original_created_at:desc':
+  case 'created_at:asc':
+  case 'created_at:desc':
+  case 'updated_at:asc':
+  case 'updated_at:desc':
+    return value
+
+  default:
+    return null
+  }
+}
 
 
 const PostSearchPage: FC = () => {
@@ -188,41 +189,26 @@ const PostSearchPage: FC = () => {
 	</Helmet>
 
 	<div className="max-w-xl">
-	  <PageTitle>広場検索</PageTitle>
+	  <div className="flex flex-wrap items-center justify-between gap-3">
+	    <PageTitle>広場検索</PageTitle>
+	    <label className="flex items-center gap-2 text-xs text-muted-foreground">
+	      <span>件数</span>
+	      <select
+		  className="rounded border border-border bg-background px-2 py-1 text-sm
+			     text-foreground"
+		  value={limit}
+		  onChange={ev => updateListQuery ({
+		      limit: Number (ev.target.value) as 20 | 50 | 100,
+		  })}>
+		{LIST_LIMIT_OPTIONS.map (value => (
+		    <option key={value} value={value}>
+		      {value}
+		    </option>))}
+	      </select>
+	    </label>
+	  </div>
 
 	  <form onSubmit={handleSearch} className="space-y-2">
-	    <div className="grid gap-3 rounded-xl border border-border bg-background/80 p-3 sm:grid-cols-2">
-	      <FormField label="表示件数">
-		{() => (
-		    <select
-			className={inputClass (false)}
-			value={limit}
-			onChange={ev => updateListQuery ({
-			    limit: Number (ev.target.value) as 20 | 50 | 100,
-			})}>
-		      {LIST_LIMIT_OPTIONS.map (value => (
-			  <option key={value} value={value}>
-			    {value} 件
-			  </option>))}
-		    </select>)}
-	      </FormField>
-
-	      <FormField label="並び順">
-		{() => (
-		    <select
-			className={inputClass (false)}
-			value={order}
-			onChange={ev => updateListQuery ({
-			    order: ev.target.value as FetchPostsOrder,
-			})}>
-		      {POST_LIST_ORDER_OPTIONS.map (value => (
-			  <option key={value} value={value}>
-			    {postOrderLabel[value]}
-			  </option>))}
-		    </select>)}
-	      </FormField>
-	    </div>
-
 	    {/* タイトル */}
 	    <FormField label="タイトル">
 	      {({ invalid }) => (