#34

2026-07-04 19:03:50 +09:00
@@ -24,6 +24,10 @@ import { recoverCandidatePosts } from '@/lib/gekanatorCandidateRecovery'
 import { isQuestionHardFilteredAfterAnswers,
 	 monthForCondition } from '@/lib/gekanatorQuestionFilters'
 import { gekanatorKeys } from '@/lib/queryKeys'
+import {
+  getClientGekanatorBackgroundMotion,
+  setClientGekanatorBackgroundMotion,
+} from '@/lib/settings'
 import { cn } from '@/lib/utils'

 import type { FC } from 'react'
@@ -185,7 +189,6 @@ const softenedAnswerWeight = .35
 const confidenceTemperature = 6
 const gameStorageKey = 'gekanator:game:v1'
 const recentGamesStorageKey = 'gekanator:recent-games:v1'
-const backgroundMotionStorageKey = 'gekanator:background-motion:v1'
 const maxStoredRecentGames = 12
 const specialOriginalMonthDayLabels: Record<string, string> = {
    '1-1': '元日',
@@ -429,18 +432,13 @@ const storeRecentGameSummary = (


 const loadBackgroundMotionMode = (): BackgroundMotionMode => {
-  const fallbackMode = 'on'
  try
  {
-    const raw = localStorage.getItem (backgroundMotionStorageKey)
-    if (raw === 'off' || raw === 'calm' || raw === 'on')
-      return raw
-
-    return fallbackMode
+    return getClientGekanatorBackgroundMotion ()
  }
  catch
  {
-    return fallbackMode
+    return 'on'
  }
 }

@@ -3916,7 +3914,7 @@ const GekanatorPage: FC<{ user: User | null }> = ({ user }) => {
  useEffect (() => {
    try
    {
-      localStorage.setItem (backgroundMotionStorageKey, backgroundMotionMode)
+      setClientGekanatorBackgroundMotion (backgroundMotionMode)
    }
    catch
    {
@@ -5,6 +5,7 @@ import { useLocation } from 'react-router-dom'

 import PostList from '@/components/PostList'
 import PrefetchLink from '@/components/PrefetchLink'
+import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import TagSidebar from '@/components/TagSidebar'
 import WikiBody from '@/components/WikiBody'
 import Pagination from '@/components/common/Pagination'
@@ -13,6 +14,7 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
+import { toFetchPostsOrder } from '@/lib/settings'
 import { fetchWikiPageByTitle } from '@/lib/wiki'

 import type { FC } from 'react'
@@ -22,6 +24,7 @@ import type { WikiPage } from '@/types'

 const PostListPage: FC = () => {
  const containerRef = useRef<HTMLDivElement | null> (null)
+  const { settings } = useUserSettings ()

  const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)

@@ -33,13 +36,14 @@ const PostListPage: FC = () => {
  const tags = useMemo (() => tagsQuery.split (' ').filter (e => e !== ''), [tagsQuery])
  const tagsKey = tags.join (' ')
  const page = Number (query.get ('page') ?? 1)
-  const limit = Number (query.get ('limit') ?? 20)
+  const limit = Number (query.get ('limit') ?? settings.postListLimit)
+  const order = toFetchPostsOrder (settings.postListOrder)

  const keys = {
      tags: tagsKey, match, page, limit,
      url: '', title: '', originalCreatedFrom: '', originalCreatedTo: '',
      createdFrom: '', createdTo: '', updatedFrom: '', updatedTo: '',
-      order: 'original_created_at:desc' } as const
+      order } as const
  const { data, isLoading: loading } = useQuery ({
      queryKey: postsKeys.index (keys),
      queryFn:  () => fetchPosts (keys) })
@@ -9,6 +9,7 @@ import Form from '@/components/common/Form'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
+import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
@@ -30,6 +31,7 @@ type PostFormField =

 const PostNewPage: FC<Props> = ({ user }) => {
  const editable = canEditContent (user)
+  const { settings } = useUserSettings ()

  const navigate = useNavigate ()

@@ -41,12 +43,13 @@ const PostNewPage: FC<Props> = ({ user }) => {
  const [parentPostIds, setParentPostIds] = useState ('')
  const [tags, setTags] = useState ('')
  const [duration, setDuration] = useState ('')
-  const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
+  const [thumbnailAutoFlg, setThumbnailAutoFlg] =
+      useState (settings.autoFetchThumbnail === 'auto')
  const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
  const [thumbnailLoading, setThumbnailLoading] = useState (false)
  const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
  const [title, setTitle] = useState ('')
-  const [titleAutoFlg, setTitleAutoFlg] = useState (true)
+  const [titleAutoFlg, setTitleAutoFlg] = useState (settings.autoFetchTitle === 'auto')
  const [titleLoading, setTitleLoading] = useState (false)
  const [url, setURL] = useState ('')

@@ -125,6 +128,14 @@ const PostNewPage: FC<Props> = ({ user }) => {
    thumbnailPreviewRef.current = thumbnailPreview
  }, [thumbnailPreview])

+  useEffect (() => {
+    setTitleAutoFlg (settings.autoFetchTitle === 'auto')
+  }, [settings.autoFetchTitle])
+
+  useEffect (() => {
+    setThumbnailAutoFlg (settings.autoFetchThumbnail === 'auto')
+  }, [settings.autoFetchThumbnail])
+
  useEffect (() => {
    if (titleAutoFlg && url)
      fetchTitle ()
@@ -13,9 +13,11 @@ import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
+import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import { SITE_TITLE } from '@/config'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
+import { toFetchPostsOrder } from '@/lib/settings'
 import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'

 import type { FC, FormEvent } from 'react'
@@ -34,14 +36,16 @@ const setIf = (qs: URLSearchParams, k: string, v: string | null) => {

 const PostSearchPage: FC = () => {
  const location = useLocation ()
+  const { settings } = useUserSettings ()

  const navigate = useNavigate ()

  const query = useMemo (() => new URLSearchParams (location.search),
 			 [location.search])
+  const defaultOrder = toFetchPostsOrder (settings.postListOrder)

  const page = Number (query.get ('page') ?? 1)
-  const limit = Number (query.get ('limit') ?? 20)
+  const limit = Number (query.get ('limit') ?? settings.postListLimit)

  const qURL = query.get ('url') ?? ''
  const qTitle = query.get ('title') ?? ''
@@ -53,7 +57,7 @@ const PostSearchPage: FC = () => {
  const qCreatedTo = query.get ('created_to') ?? ''
  const qUpdatedFrom = query.get ('updated_from') ?? ''
  const qUpdatedTo = query.get ('updated_to') ?? ''
-  const order = (query.get ('order') || 'original_created_at:desc') as FetchPostsOrder
+  const order = (query.get ('order') || defaultOrder) as FetchPostsOrder

  const [createdFrom, setCreatedFrom] = useState<string | null> (null)
  const [createdTo, setCreatedTo] = useState<string | null> (null)
@@ -81,6 +85,10 @@ const PostSearchPage: FC = () => {
      queryKey: postsKeys.index (keys),
      queryFn: () => fetchPosts (keys) })
  const results = data?.posts ?? []
+  const visibleResults =
+      settings.viewedPostDisplay === 'hide'
+      ? results.filter (row => !(row.viewed))
+      : results
  const totalPages = data ? Math.ceil (data.count / limit) : 0

  useEffect (() => {
@@ -239,7 +247,7 @@ const PostSearchPage: FC = () => {
 	  </form>
 	</div>

-	{loading ? 'Loading...' : (results.length > 0 ? (
+	{loading ? 'Loading...' : (visibleResults.length > 0 ? (
 	    <div className="mt-4">
 	      <div className="overflow-x-auto">
 		<table className="w-full min-w-[1200px] table-fixed border-collapse">
@@ -295,8 +303,14 @@ const PostSearchPage: FC = () => {
 		    </tr>
 		  </thead>
 		  <tbody>
-		    {results.map (row => (
-			<tr key={row.id} className="even:bg-gray-100 dark:even:bg-gray-700">
+		    {visibleResults.map (row => (
+			<tr
+			    key={row.id}
+			    className={
+				settings.viewedPostDisplay === 'dim' && row.viewed
+				? 'even:bg-gray-100 opacity-40 saturate-50 dark:even:bg-gray-700'
+				: 'even:bg-gray-100 dark:even:bg-gray-700'
+			    }>
 			  <td className="p-2">
 			    <PrefetchLink to={`/posts/${ row.id }`} title={row.title || undefined}>
 			      <motion.div
@@ -15,6 +15,12 @@ import { SITE_TITLE } from '@/config'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { apiDelete, apiGet, apiPatch, apiPost, apiPut, isApiError } from '@/lib/api'
 import { fetchPost } from '@/lib/posts'
+import {
+  getClientTheatreLayoutMode,
+  getClientTheatreTagFlow,
+  setClientTheatreLayoutMode,
+  setClientTheatreTagFlow,
+} from '@/lib/settings'
 import { canEditContent } from '@/lib/users'
 import { cn, dateString, inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
@@ -50,9 +56,6 @@ const INITIAL_THEATRE_INFO: TheatreInfo =
 const INITIAL_WEIGHTS: TheatrePostSelectionWeights =
    { tagPenalties: [], lightestPosts: [], heaviestPosts: [] }

-const LAYOUT_STORAGE_KEY = 'theatre-layout-mode'
-const TAG_FLOW_STORAGE_KEY = 'theatre-tag-flow'
-
 const LAYOUT_LABELS: Record<TheatreLayoutMode, string> = {
    threeColumns:   '3 列',
    tagsBottom:     '2 列 A 型',
@@ -228,32 +231,20 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
  const [post, setPost] = useState<Post | null> (null)
  const [videoLength, setVideoLength] = useState (0)
  const [weights, setWeights] = useState<TheatrePostSelectionWeights> (INITIAL_WEIGHTS)
-  const [layoutMode, setLayoutMode] = useState<TheatreLayoutMode> (() => {
-    const stored = localStorage.getItem (LAYOUT_STORAGE_KEY)
-    return (
-	((['threeColumns', 'tagsBottom', 'commentsBottom'] as TheatreLayoutMode[])
-	 .includes (stored as TheatreLayoutMode))
-	? (stored as TheatreLayoutMode)
-	: 'threeColumns')
-  })
-  const [tagFlow, setTagFlow] = useState<TagFlow> (() => {
-    const stored = localStorage.getItem (TAG_FLOW_STORAGE_KEY)
-    return (
-	(['vertical', 'horizontal'] as TagFlow[]).includes (stored as TagFlow)
-	? (stored as TagFlow)
-	: 'vertical')
-  })
+  const [layoutMode, setLayoutMode] =
+      useState<TheatreLayoutMode> (() => getClientTheatreLayoutMode ())
+  const [tagFlow, setTagFlow] = useState<TagFlow> (() => getClientTheatreTagFlow ())
  const { fieldErrors, clearValidationErrors, applyValidationError } =
      useValidationErrors<TheatreCommentField> ()

  const changeLayoutMode = (mode: TheatreLayoutMode) => {
    setLayoutMode (mode)
-    localStorage.setItem (LAYOUT_STORAGE_KEY, mode)
+    setClientTheatreLayoutMode (mode)
  }

  const changeTagFlow = (flow: TagFlow) => {
    setTagFlow (flow)
-    localStorage.setItem (TAG_FLOW_STORAGE_KEY, flow)
+    setClientTheatreTagFlow (flow)
  }

  const applyTheatreInfo = useCallback ((nextInfo: TheatreInfo) => {
@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import type { Dispatch, FC, SetStateAction } from 'react'

 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
@@ -9,35 +9,115 @@ import FormField from '@/components/common/FormField'
 import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
+import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import InheritDialogue from '@/components/users/InheritDialogue'
 import UserCodeDialogue from '@/components/users/UserCodeDialogue'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPut } from '@/lib/api'
+import {
+  AUTO_FETCH_OPTIONS,
+  DEFAULT_USER_SETTINGS,
+  DISPLAY_DENSITY_OPTIONS,
+  FONT_SIZE_OPTIONS,
+  POST_LIST_LIMIT_OPTIONS,
+  POST_LIST_ORDER_OPTIONS,
+  THEME_OPTIONS,
+  VIEWED_POST_DISPLAY_OPTIONS,
+  WIKI_EDITOR_MODE_OPTIONS,
+  updateUserSettings,
+} from '@/lib/settings'
 import { inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'

 import type { User } from '@/types'
+import type { UserSettings } from '@/lib/settings'

 type Props = { user:    User | null
-	       setUser: React.Dispatch<React.SetStateAction<User | null>> }
+	       setUser: Dispatch<SetStateAction<User | null>> }

 type UserFormField = 'name'
+type SettingsFormField =
+    | 'theme'
+    | 'displayDensity'
+    | 'fontSize'
+    | 'postListLimit'
+    | 'postListOrder'
+    | 'viewedPostDisplay'
+    | 'tagAutocompleteNico'
+    | 'autoFetchTitle'
+    | 'autoFetchThumbnail'
+    | 'wikiEditorMode'
+
+const sectionClassName = 'space-y-4 rounded-xl border border-border bg-background/80 p-4'
+
+const themeLabel: Record<UserSettings['theme'], string> = {
+    system: 'システム設定に従う',
+    light:  '明',
+    dark:   '暗' }
+
+const densityLabel: Record<UserSettings['displayDensity'], string> = {
+    comfortable: '標準',
+    compact:     '詰める' }
+
+const fontSizeLabel: Record<UserSettings['fontSize'], string> = {
+    small:  '小',
+    normal: '標準',
+    large:  '大' }
+
+const postListOrderLabel: Record<UserSettings['postListOrder'], 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 viewedPostDisplayLabel: Record<UserSettings['viewedPostDisplay'], string> = {
+    show: '通常表示',
+    dim:  '薄く表示',
+    hide: '隠す' }
+
+const autoFetchLabel: Record<UserSettings['autoFetchTitle'], string> = {
+    auto:   '自動',
+    manual: '手動',
+    off:    '無効' }
+
+const wikiEditorModeLabel: Record<UserSettings['wikiEditorMode'], string> = {
+    split:   '左右表示',
+    write:   '本文のみ',
+    preview: 'プレビューのみ' }


 const SettingPage: FC<Props> = ({ user, setUser }) => {
+  const [draftSettings, setDraftSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
  const [name, setName] = useState ('')
  const [userCodeVsbl, setUserCodeVsbl] = useState (false)
  const [inheritVsbl, setInheritVsbl] = useState (false)
-  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
-      useValidationErrors<UserFormField> ()
+  const { loaded, settings, setSettings } = useUserSettings ()
+  const {
+    baseErrors: nameBaseErrors,
+    fieldErrors: nameFieldErrors,
+    clearValidationErrors: clearNameValidationErrors,
+    applyValidationError: applyNameValidationError,
+  } = useValidationErrors<UserFormField> ()
+  const {
+    baseErrors: settingsBaseErrors,
+    fieldErrors: settingsFieldErrors,
+    clearValidationErrors: clearSettingsValidationErrors,
+    applyValidationError: applySettingsValidationError,
+  } = useValidationErrors<SettingsFormField> ()

-  const handleSubmit = async () => {
+  const handleUserSubmit = async () => {
    if (!(user))
      return

-    clearValidationErrors ()
+    clearNameValidationErrors ()

    const formData = new FormData
    formData.append ('name', name)
@@ -47,13 +127,41 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
      const data = await apiPut<User> (
 	  `/users/${ user.id }`, formData,
 	  { headers: { 'Content-Type': 'multipart/form-data' } })
-      setUser (user => ({ ...user, ...data }))
-      toast ({ title: '設定を更新しました．' })
+      setUser (currentUser => ({ ...currentUser, ...data }))
+      toast ({ title: '表示名を更新しました．' })
    }
-    catch (e)
+    catch (error)
    {
-      applyValidationError (e)
-      toast ({ title: 'しっぱい……' })
+      applyNameValidationError (error)
+      toast ({ title: '表示名を更新できませんでした．' })
+    }
+  }
+
+  const handleSettingsSubmit = async () => {
+    clearSettingsValidationErrors ()
+
+    try
+    {
+      const data = await updateUserSettings ({
+	  theme: draftSettings.theme,
+	  display_density: draftSettings.displayDensity,
+	  font_size: draftSettings.fontSize,
+	  post_list_limit: draftSettings.postListLimit,
+	  post_list_order: draftSettings.postListOrder,
+	  viewed_post_display: draftSettings.viewedPostDisplay,
+	  tag_autocomplete_nico: draftSettings.tagAutocompleteNico,
+	  auto_fetch_title: draftSettings.autoFetchTitle,
+	  auto_fetch_thumbnail: draftSettings.autoFetchThumbnail,
+	  wiki_editor_mode: draftSettings.wikiEditorMode,
+      })
+      setDraftSettings (data)
+      setSettings (data)
+      toast ({ title: '設定を保存しました．' })
+    }
+    catch (error)
+    {
+      applySettingsValidationError (error)
+      toast ({ title: '設定を保存できませんでした．' })
    }
  }

@@ -64,6 +172,10 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
    setName (user.name ?? '')
  }, [user])

+  useEffect (() => {
+    setDraftSettings (settings)
+  }, [settings])
+
  return (
      <MainArea>
 	<Helmet>
@@ -74,48 +186,234 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 	<Form>
 	  <PageTitle>設定</PageTitle>

-	  {user ? (
+	  {user && loaded ? (
 	      <>
-		<FieldError messages={baseErrors}/>
+		<section className={sectionClassName}>
+		  <h2 className="text-xl font-bold">アカウント</h2>
+		  <FieldError messages={nameBaseErrors}/>

-		{/* 名前 */}
-		<FormField label="表示名" messages={fieldErrors.name}>
-		  {({ describedBy, invalid }) => (
-		      <>
-		  <input type="text"
-			 aria-describedby={describedBy}
-			 aria-invalid={invalid}
-			 className={inputClass (invalid)}
-			 value={name}
-			 placeholder="名もなきニジラー"
-			 onChange={ev => setName (ev.target.value)}/>
-		  {(user && !(user.name)) && (
-		      <p className="mt-1 text-sm text-red-500">
-			名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
-		      </p>)}
-		      </>)}
-		</FormField>
+		  <FormField label="表示名" messages={nameFieldErrors.name}>
+		    {({ describedBy, invalid }) => (
+			<>
+			  <input type="text"
+				 aria-describedby={describedBy}
+				 aria-invalid={invalid}
+				 className={inputClass (invalid)}
+				 value={name}
+				 placeholder="名もなきニジラー"
+				 onChange={ev => setName (ev.target.value)}/>
+			  {!(user.name) && (
+			      <p className="mt-1 text-sm text-red-500">
+				名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
+			      </p>)}
+			</>)}
+		  </FormField>

-		{/* 送信 */}
-		<Button onClick={handleSubmit}
-			className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
-		  更新
-		</Button>
+		  <div className="flex flex-wrap gap-2">
+		    <Button onClick={handleUserSubmit}>表示名を更新</Button>
+		  </div>

-		{/* 引継ぎ */}
-		<div>
-		  <Label>引継ぎ</Label>
-		  <Button onClick={() => setUserCodeVsbl (true)}
-			  className="px-4 py-2 bg-gray-600 text-white rounded disabled:bg-gray-400"
+		  <div className="space-y-2">
+		    <Label>引継ぎ</Label>
+		    <div className="flex flex-wrap gap-2">
+		      <Button
+			  onClick={() => setUserCodeVsbl (true)}
+			  className="bg-gray-600 text-white"
 			  disabled={!(user)}>
-		    引継ぎコードを表示
-		  </Button>
-		  <Button onClick={() => setInheritVsbl (true)}
-			  className="ml-2 px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400"
+			引継ぎコードを表示
+		      </Button>
+		      <Button
+			  onClick={() => setInheritVsbl (true)}
+			  className="bg-red-600 text-white"
 			  disabled={!(user)}>
-		    ほかのブラウザから引継ぐ
-		  </Button>
-		</div>
+			ほかのブラウザから引継ぐ
+		      </Button>
+		    </div>
+		  </div>
+		</section>
+
+		<section className={sectionClassName}>
+		  <h2 className="text-xl font-bold">表示</h2>
+
+		  <FormField label="テーマ" messages={settingsFieldErrors.theme}>
+		    {() => (
+			<select
+			    className={inputClass (Boolean (settingsFieldErrors.theme?.length))}
+			    value={draftSettings.theme}
+			    onChange={ev => setDraftSettings (current => ({
+				...current,
+				theme: ev.target.value as UserSettings['theme'],
+			    }))}>
+			  {THEME_OPTIONS.map (value => (
+			      <option key={value} value={value}>
+				{themeLabel[value]}
+			      </option>))}
+			</select>)}
+		  </FormField>
+
+		  <FormField label="表示密度" messages={settingsFieldErrors.displayDensity}>
+		    {() => (
+			<select
+			    className={inputClass (Boolean (settingsFieldErrors.displayDensity?.length))}
+			    value={draftSettings.displayDensity}
+			    onChange={ev => setDraftSettings (current => ({
+				...current,
+				displayDensity: ev.target.value as UserSettings['displayDensity'],
+			    }))}>
+			  {DISPLAY_DENSITY_OPTIONS.map (value => (
+			      <option key={value} value={value}>
+				{densityLabel[value]}
+			      </option>))}
+			</select>)}
+		  </FormField>
+
+		  <FormField label="文字サイズ" messages={settingsFieldErrors.fontSize}>
+		    {() => (
+			<select
+			    className={inputClass (Boolean (settingsFieldErrors.fontSize?.length))}
+			    value={draftSettings.fontSize}
+			    onChange={ev => setDraftSettings (current => ({
+				...current,
+				fontSize: ev.target.value as UserSettings['fontSize'],
+			    }))}>
+			  {FONT_SIZE_OPTIONS.map (value => (
+			      <option key={value} value={value}>
+				{fontSizeLabel[value]}
+			      </option>))}
+			</select>)}
+		  </FormField>
+		</section>
+
+		<section className={sectionClassName}>
+		  <h2 className="text-xl font-bold">投稿一覧</h2>
+
+		  <FormField label="既定の件数" messages={settingsFieldErrors.postListLimit}>
+		    {() => (
+			<select
+			    className={inputClass (Boolean (settingsFieldErrors.postListLimit?.length))}
+			    value={draftSettings.postListLimit}
+			    onChange={ev => setDraftSettings (current => ({
+				...current,
+				postListLimit: Number (ev.target.value) as UserSettings['postListLimit'],
+			    }))}>
+			  {POST_LIST_LIMIT_OPTIONS.map (value => (
+			      <option key={value} value={value}>
+				{value} 件
+			      </option>))}
+			</select>)}
+		  </FormField>
+
+		  <FormField label="既定の並び順" messages={settingsFieldErrors.postListOrder}>
+		    {() => (
+			<select
+			    className={inputClass (Boolean (settingsFieldErrors.postListOrder?.length))}
+			    value={draftSettings.postListOrder}
+			    onChange={ev => setDraftSettings (current => ({
+				...current,
+				postListOrder: ev.target.value as UserSettings['postListOrder'],
+			    }))}>
+			  {POST_LIST_ORDER_OPTIONS.map (value => (
+			      <option key={value} value={value}>
+				{postListOrderLabel[value]}
+			      </option>))}
+			</select>)}
+		  </FormField>
+
+		  <FormField label="既読投稿の表示" messages={settingsFieldErrors.viewedPostDisplay}>
+		    {() => (
+			<select
+			    className={inputClass (Boolean (settingsFieldErrors.viewedPostDisplay?.length))}
+			    value={draftSettings.viewedPostDisplay}
+			    onChange={ev => setDraftSettings (current => ({
+				...current,
+				viewedPostDisplay:
+				    ev.target.value as UserSettings['viewedPostDisplay'],
+			    }))}>
+			  {VIEWED_POST_DISPLAY_OPTIONS.map (value => (
+			      <option key={value} value={value}>
+				{viewedPostDisplayLabel[value]}
+			      </option>))}
+			</select>)}
+		  </FormField>
+		</section>
+
+		<section className={sectionClassName}>
+		  <h2 className="text-xl font-bold">編輯支援</h2>
+
+		  <FormField label="ニコニコタグを補完に含める" messages={settingsFieldErrors.tagAutocompleteNico}>
+		    {() => (
+			<label className="flex items-center gap-2">
+			  <input
+			      type="checkbox"
+			      checked={draftSettings.tagAutocompleteNico}
+			      onChange={ev => setDraftSettings (current => ({
+				  ...current,
+				  tagAutocompleteNico: ev.target.checked,
+			      }))}/>
+			  <span>含める</span>
+			</label>)}
+		  </FormField>
+
+		  <FormField label="タイトル自動取得" messages={settingsFieldErrors.autoFetchTitle}>
+		    {() => (
+			<select
+			    className={inputClass (Boolean (settingsFieldErrors.autoFetchTitle?.length))}
+			    value={draftSettings.autoFetchTitle}
+			    onChange={ev => setDraftSettings (current => ({
+				...current,
+				autoFetchTitle: ev.target.value as UserSettings['autoFetchTitle'],
+			    }))}>
+			  {AUTO_FETCH_OPTIONS.map (value => (
+			      <option key={value} value={value}>
+				{autoFetchLabel[value]}
+			      </option>))}
+			</select>)}
+		  </FormField>
+
+		  <FormField label="サムネール自動取得" messages={settingsFieldErrors.autoFetchThumbnail}>
+		    {() => (
+			<select
+			    className={inputClass (Boolean (settingsFieldErrors.autoFetchThumbnail?.length))}
+			    value={draftSettings.autoFetchThumbnail}
+			    onChange={ev => setDraftSettings (current => ({
+				...current,
+				autoFetchThumbnail:
+				    ev.target.value as UserSettings['autoFetchThumbnail'],
+			    }))}>
+			  {AUTO_FETCH_OPTIONS.map (value => (
+			      <option key={value} value={value}>
+				{autoFetchLabel[value]}
+			      </option>))}
+			</select>)}
+		  </FormField>
+		</section>
+
+		<section className={sectionClassName}>
+		  <h2 className="text-xl font-bold">Wiki</h2>
+
+		  <FormField label="エディタ表示" messages={settingsFieldErrors.wikiEditorMode}>
+		    {() => (
+			<select
+			    className={inputClass (Boolean (settingsFieldErrors.wikiEditorMode?.length))}
+			    value={draftSettings.wikiEditorMode}
+			    onChange={ev => setDraftSettings (current => ({
+				...current,
+				wikiEditorMode: ev.target.value as UserSettings['wikiEditorMode'],
+			    }))}>
+			  {WIKI_EDITOR_MODE_OPTIONS.map (value => (
+			      <option key={value} value={value}>
+				{wikiEditorModeLabel[value]}
+			      </option>))}
+			</select>)}
+		  </FormField>
+		</section>
+
+		<section className={sectionClassName}>
+		  <FieldError messages={settingsBaseErrors}/>
+		  <div className="flex flex-wrap gap-2">
+		    <Button onClick={handleSettingsSubmit}>設定を保存</Button>
+		  </div>
+		</section>
 	      </>) : 'Loading...'}
 	</Form>

@@ -8,6 +8,7 @@ import { useParams, useNavigate } from 'react-router-dom'
 import FieldError from '@/components/common/FieldError'
 import FormField from '@/components/common/FormField'
 import MainArea from '@/components/layout/MainArea'
+import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPut } from '@/lib/api'
@@ -25,6 +26,27 @@ import type { User, WikiPage } from '@/types'

 const mdParser = new MarkdownIt

+type EditorView = {
+    menu:  boolean
+    md:    boolean
+    html:  boolean }
+
+const editorView = (
+    mode: 'split' | 'write' | 'preview',
+): EditorView => {
+  switch (mode)
+  {
+  case 'write':
+    return { menu: true, md: true, html: false }
+
+  case 'preview':
+    return { menu: true, md: false, html: true }
+
+  default:
+    return { menu: true, md: true, html: true }
+  }
+}
+
 type Props = { user: User | null }

 type WikiFormField = 'title' | 'body'
@@ -32,6 +54,7 @@ type WikiFormField = 'title' | 'body'

 const WikiEditPage: FC<Props> = ({ user }) => {
  const editable = canEditContent (user)
+  const { settings } = useUserSettings ()

  const { id } = useParams ()

@@ -114,6 +137,7 @@ const WikiEditPage: FC<Props> = ({ user }) => {
 		  {() => (
 		      <MdEditor value={body}
 				style={{ height: '500px' }}
+				config={{ view: editorView (settings.wikiEditorMode) }}
 				renderHTML={text => mdParser.render (text)}
 				onChange={({ text }) => setBody (text)}/>)}
 		</FormField>
@@ -9,6 +9,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import FieldError from '@/components/common/FieldError'
 import FormField from '@/components/common/FormField'
 import MainArea from '@/components/layout/MainArea'
+import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPost } from '@/lib/api'
@@ -23,6 +24,27 @@ import type { User, WikiPage } from '@/types'

 const mdParser = new MarkdownIt

+type EditorView = {
+    menu:  boolean
+    md:    boolean
+    html:  boolean }
+
+const editorView = (
+    mode: 'split' | 'write' | 'preview',
+): EditorView => {
+  switch (mode)
+  {
+  case 'write':
+    return { menu: true, md: true, html: false }
+
+  case 'preview':
+    return { menu: true, md: false, html: true }
+
+  default:
+    return { menu: true, md: true, html: true }
+  }
+}
+
 type Props = { user: User | null }

 type WikiFormField = 'title' | 'body'
@@ -30,6 +52,7 @@ type WikiFormField = 'title' | 'body'

 const WikiNewPage: FC<Props> = ({ user }) => {
  const editable = canEditContent (user)
+  const { settings } = useUserSettings ()

  const location = useLocation ()
  const navigate = useNavigate ()
@@ -92,6 +115,7 @@ const WikiNewPage: FC<Props> = ({ user }) => {
 	    {() => (
 		<MdEditor value={body}
 			  style={{ height: '500px' }}
+			  config={{ view: editorView (settings.wikiEditorMode) }}
 			  renderHTML={text => mdParser.render (text)}
 			  onChange={({ text }) => setBody (text)}/>)}
 	  </FormField>