backend/app/controllers/user_settings_controller.rb

@@ -25,7 +25,11 @@ class UserSettingsController < ApplicationController
   private
 
   def current_setting
-    current_user.setting || current_user.create_setting!(Setting.defaults)
+    Setting.find_or_create_by!(user: current_user) do |setting|
+      setting.assign_attributes(Setting.defaults)
+    end
+  rescue ActiveRecord::RecordNotUnique
+    Setting.find_by!(user: current_user)
   end
 
   def validate_raw_attributes raw_attributes

backend/app/models/setting.rb

@@ -15,7 +15,7 @@ class Setting < ApplicationRecord
     'updated_at_asc',
     'updated_at_desc',
   ].freeze
-  VIEWED_POST_DISPLAYS = ['show', 'dim', 'hide'].freeze
+  VIEWED_POST_DISPLAYS = ['show', 'dim'].freeze
   AUTO_FETCH_MODES = ['auto', 'manual', 'off'].freeze
   WIKI_EDITOR_MODES = ['split', 'write', 'preview'].freeze
 

frontend/src/components/PostFormTagsArea.tsx

@@ -2,7 +2,6 @@
 
 import { useRef, useState } from 'react'
 
-import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import TagSearchBox from '@/components/TagSearchBox'
 import FormField from '@/components/common/FormField'
 import TextArea from '@/components/common/TextArea'
@@ -40,7 +39,6 @@ type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | '
 
 const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
   const ref = useRef<HTMLTextAreaElement> (null)
-  const { settings } = useUserSettings ()
 
   const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
   const [focused, setFocused] = useState (false)
@@ -72,9 +70,10 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
 
     const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
 	q: token,
-	nico: settings.tagAutocompleteNico ? '1' : '0' } })
+	nico: '0' } })
-    setSuggestions (data.filter (t => t.postCount > 0))
+    const nextSuggestions = data.filter (t => t.postCount > 0)
-    setSuggestionsVsbl (suggestions.length > 0)
+    setSuggestions (nextSuggestions)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   return (

frontend/src/components/PostList.tsx

@@ -22,14 +22,10 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
   const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)
 
   const cardRef = useRef<HTMLDivElement> (null)
-  const visiblePosts =
-      settings.viewedPostDisplay === 'hide'
-      ? posts.filter (post => !(post.viewed))
-      : posts
 
   return (
       <div className="flex flex-wrap gap-6 p-4">
-	{visiblePosts.map ((post, i) => {
+	{posts.map ((post, i) => {
 	  const sharedId = `page-${ post.id }`
 	  const layoutId = sharedId
 

frontend/src/components/common/TagInput.tsx

@@ -37,9 +37,9 @@ const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
     const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
 	q,
 	nico: settings.tagAutocompleteNico ? '1' : '0' } })
-    setSuggestions (data.filter (t => t.postCount > 0))
+    const nextSuggestions = data.filter (t => t.postCount > 0)
-    if (suggestions.length > 0)
+    setSuggestions (nextSuggestions)
-      setSuggestionsVsbl (true)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   // TODO: TagSearch からのコピペのため，共通化を考へる．

frontend/src/components/users/UserSettingsProvider.tsx

@@ -9,6 +9,7 @@ import type { UserSettings } from '@/lib/settings'
 
 type ContextValue = {
     loaded:       boolean
+    error:        string | null
     settings:     UserSettings
     setSettings:  Dispatch<SetStateAction<UserSettings>> }
 
@@ -41,6 +42,7 @@ const applyTheme = (theme: UserSettings['theme']) => {
 export const UserSettingsProvider: FC<{
     children:  ReactNode
     user:      User | null }> = ({ children, user }) => {
+  const [error, setError] = useState<string | null> (null)
   const [loaded, setLoaded] = useState (false)
   const [settings, setSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
 
@@ -49,12 +51,14 @@ export const UserSettingsProvider: FC<{
 
     if (!(user))
       {
+	setError (null)
 	setSettings (DEFAULT_USER_SETTINGS)
 	setLoaded (true)
 	return
       }
 
     setLoaded (false)
+    setError (null)
 
     void (async () => {
       try
@@ -62,6 +66,7 @@ export const UserSettingsProvider: FC<{
 	const next = await fetchUserSettings ()
 	if (!(cancelled))
 	  {
+	    setError (null)
 	    setSettings (next)
 	    setLoaded (true)
 	  }
@@ -70,6 +75,7 @@ export const UserSettingsProvider: FC<{
       {
 	if (!(cancelled))
 	  {
+	    setError ('設定を読み込めませんでした．既定値で表示しています．')
 	    setSettings (DEFAULT_USER_SETTINGS)
 	    setLoaded (true)
 	  }
@@ -89,10 +95,11 @@ export const UserSettingsProvider: FC<{
   }, [settings.displayDensity, settings.fontSize])
 
   const value = useMemo<ContextValue> (() => ({
+      error,
       loaded,
       settings,
       setSettings,
-  }), [loaded, settings])
+  }), [error, loaded, settings])
 
   return (
       <UserSettingsContext.Provider value={value}>

frontend/src/lib/settings.ts

@@ -2,6 +2,7 @@ import { apiGet, apiPatch } from '@/lib/api'
 
 import type { FetchPostsOrder } from '@/types'
 
+// DB-backed user settings. These are shared across browsers for the same user.
 export type UserPostListOrder =
     | 'title_asc'
     | 'title_desc'
@@ -20,7 +21,7 @@ export type UserSettings = {
     fontSize:               'small' | 'normal' | 'large'
     postListLimit:          20 | 50 | 100
     postListOrder:          UserPostListOrder
-    viewedPostDisplay:      'show' | 'dim' | 'hide'
+    viewedPostDisplay:      'show' | 'dim'
     tagAutocompleteNico:    boolean
     autoFetchTitle:         'auto' | 'manual' | 'off'
     autoFetchThumbnail:     'auto' | 'manual' | 'off'
@@ -31,6 +32,7 @@ export type TheatreTagFlow = 'vertical' | 'horizontal'
 export type GekanatorBackgroundMotionMode = 'on' | 'calm' | 'off'
 export type ClientPaneBreakpoint = 'desktop' | 'tablet'
 
+// Browser-local settings. These stay in localStorage and are never synced to DB.
 type ClientPaneSettings = {
     widthPxByBreakpoint?: Partial<Record<ClientPaneBreakpoint, number>>
     collapsed?:           boolean }
@@ -77,7 +79,7 @@ export const POST_LIST_ORDER_OPTIONS = [
     'updated_at_asc',
     'updated_at_desc',
 ] as const
-export const VIEWED_POST_DISPLAY_OPTIONS = ['show', 'dim', 'hide'] as const
+export const VIEWED_POST_DISPLAY_OPTIONS = ['show', 'dim'] as const
 export const AUTO_FETCH_OPTIONS = ['auto', 'manual', 'off'] as const
 export const WIKI_EDITOR_MODE_OPTIONS = ['split', 'write', 'preview'] as const
 

frontend/src/pages/posts/PostNewPage.tsx

@@ -43,18 +43,21 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const [parentPostIds, setParentPostIds] = useState ('')
   const [tags, setTags] = useState ('')
   const [duration, setDuration] = useState ('')
-  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 (settings.autoFetchTitle === 'auto')
   const [titleLoading, setTitleLoading] = useState (false)
   const [url, setURL] = useState ('')
 
   const previousURLRef = useRef ('')
   const thumbnailPreviewRef = useRef ('')
+  const titleFetchMode = settings.autoFetchTitle
+  const thumbnailFetchMode = settings.autoFetchThumbnail
+  const titleAutoFlg = titleFetchMode === 'auto'
+  const thumbnailAutoFlg = thumbnailFetchMode === 'auto'
+  const titleFetchVisible = titleFetchMode !== 'off'
+  const thumbnailFetchVisible = thumbnailFetchMode !== 'off'
   const videoFlg =
       useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
                [tags])
@@ -103,9 +106,15 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const fetchTitle = useCallback (async () => {
     setTitle ('')
     setTitleLoading (true)
+    try
+    {
       const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
       setTitle (data.title || '')
+    }
+    finally
+    {
       setTitleLoading (false)
+    }
   }, [url])
 
   const fetchThumbnail = useCallback (async () => {
@@ -114,6 +123,8 @@ const PostNewPage: FC<Props> = ({ user }) => {
     setThumbnailLoading (true)
     if (thumbnailPreviewRef.current)
       URL.revokeObjectURL (thumbnailPreviewRef.current)
+    try
+    {
       const data = await apiGet<Blob> ('/preview/thumbnail',
 				       { params: { url }, responseType: 'blob' })
       const imageURL = URL.createObjectURL (data)
@@ -121,21 +132,17 @@ const PostNewPage: FC<Props> = ({ user }) => {
       setThumbnailFile (new File ([data],
 				  'thumbnail.png',
 				  { type: data.type || 'image/png' }))
+    }
+    finally
+    {
       setThumbnailLoading (false)
+    }
   }, [url])
 
   useEffect (() => {
     thumbnailPreviewRef.current = thumbnailPreview
   }, [thumbnailPreview])
 
-  useEffect (() => {
-    setTitleAutoFlg (settings.autoFetchTitle === 'auto')
-  }, [settings.autoFetchTitle])
-
-  useEffect (() => {
-    setThumbnailAutoFlg (settings.autoFetchThumbnail === 'auto')
-  }, [settings.autoFetchThumbnail])
-
   useEffect (() => {
     if (titleAutoFlg && url)
       fetchTitle ()
@@ -172,14 +179,9 @@ const PostNewPage: FC<Props> = ({ user }) => {
 	  </FormField>
 
 	  {/* タイトル */}
-	  <FormField
+	  <FormField label="タイトル" messages={fieldErrors.title}>
-	      checkBox={{
-		  label:    '自動',
-		  checked:  titleAutoFlg,
-		  onChange: ev => setTitleAutoFlg (ev.target.checked)}}
-	      label="タイトル"
-	      messages={fieldErrors.title}>
 	    {({ describedBy, invalid }) => (
+		<div className="space-y-2">
 		  <input type="text"
 			 aria-describedby={describedBy}
 			 aria-invalid={invalid}
@@ -187,19 +189,48 @@ const PostNewPage: FC<Props> = ({ user }) => {
 			 value={title}
 			 placeholder={titleLoading ? 'Loading...' : ''}
 			 onChange={ev => setTitle (ev.target.value)}
-		       disabled={titleAutoFlg}/>)}
+			 disabled={titleAutoFlg}/>
+		  <div className="flex flex-wrap items-center gap-2 text-sm">
+		    <span>
+		      {titleAutoFlg
+		       ? 'URL 入力時に自動取得します．'
+		       : titleFetchMode === 'manual'
+			 ? '自動取得しません．必要なら手動で取得できます．'
+			 : '取得機能は無効です．'}
+		    </span>
+		    {titleFetchVisible && !(titleAutoFlg) && (
+			<Button
+			    type="button"
+			    variant="outline"
+			    onClick={() => void fetchTitle ()}
+			    disabled={!(url) || titleLoading}>
+			  取得
+			</Button>)}
+		  </div>
+		</div>)}
 	  </FormField>
 
 	  {/* サムネール */}
-	  <FormField
+	  <FormField label="サムネール" messages={fieldErrors.thumbnail}>
-	      checkBox={{
-		  label:    '自動',
-		  checked:  thumbnailAutoFlg,
-		  onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
-	      label="サムネール"
-	      messages={fieldErrors.thumbnail}>
 	    {({ describedBy, invalid }) => (
 		<>
+		  <div className="mb-2 flex flex-wrap items-center gap-2 text-sm">
+		    <span>
+		      {thumbnailAutoFlg
+		       ? 'URL 入力時に自動取得します．'
+		       : thumbnailFetchMode === 'manual'
+			 ? '自動取得しません．必要なら手動で取得できます．'
+			 : '取得機能は無効です．'}
+		    </span>
+		    {thumbnailFetchVisible && !(thumbnailAutoFlg) && (
+			<Button
+			    type="button"
+			    variant="outline"
+			    onClick={() => void fetchThumbnail ()}
+			    disabled={!(url) || thumbnailLoading}>
+			  取得
+			</Button>)}
+		  </div>
 		  {thumbnailAutoFlg
 		   ? (thumbnailLoading
 		      ? <p className="text-gray-500 text-sm">Loading...</p>

frontend/src/pages/posts/PostSearchPage.tsx

@@ -85,10 +85,6 @@ 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 (() => {
@@ -247,7 +243,7 @@ const PostSearchPage: FC = () => {
 	  </form>
 	</div>
 
-	{loading ? 'Loading...' : (visibleResults.length > 0 ? (
+	{loading ? 'Loading...' : (results.length > 0 ? (
 	    <div className="mt-4">
 	      <div className="overflow-x-auto">
 		<table className="w-full min-w-[1200px] table-fixed border-collapse">
@@ -303,7 +299,7 @@ const PostSearchPage: FC = () => {
 		    </tr>
 		  </thead>
 		  <tbody>
-		    {visibleResults.map (row => (
+		    {results.map (row => (
 			<tr
 			    key={row.id}
 			    className={

frontend/src/pages/users/SettingPage.tsx

@@ -1,7 +1,8 @@
-import type { Dispatch, FC, SetStateAction } from 'react'
+import type { Dispatch, FC, KeyboardEvent, SetStateAction } from 'react'
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import FieldError from '@/components/common/FieldError'
 import Form from '@/components/common/Form'
@@ -28,7 +29,7 @@ import {
   WIKI_EDITOR_MODE_OPTIONS,
   updateUserSettings,
 } from '@/lib/settings'
-import { inputClass } from '@/lib/utils'
+import { cn, inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { User } from '@/types'
@@ -50,7 +51,48 @@ type SettingsFormField =
     | 'autoFetchThumbnail'
     | 'wikiEditorMode'
 
-const sectionClassName = 'space-y-4 rounded-xl border border-border bg-background/80 p-4'
+type SettingsTab = 'account' | 'display' | 'posts' | 'editing' | 'wiki'
+
+type TabSpec = {
+    id:     SettingsTab
+    label:  string }
+
+const sectionClassName =
+    'space-y-4 rounded-xl border border-border bg-background/80 p-4'
+
+const tabs: TabSpec[] = [
+    { id: 'account', label: 'アカウント' },
+    { id: 'display', label: '表示' },
+    { id: 'posts', label: '投稿' },
+    { id: 'editing', label: '編輯支援' },
+    { id: 'wiki', label: 'Wiki' },
+]
+
+const settingsTabByField: Record<SettingsFormField, SettingsTab> = {
+    theme:               'display',
+    displayDensity:      'display',
+    fontSize:            'display',
+    postListLimit:       'posts',
+    postListOrder:       'posts',
+    viewedPostDisplay:   'posts',
+    tagAutocompleteNico: 'editing',
+    autoFetchTitle:      'editing',
+    autoFetchThumbnail:  'editing',
+    wikiEditorMode:      'wiki',
+}
+
+const settingsFieldOrder: SettingsFormField[] = [
+    'theme',
+    'displayDensity',
+    'fontSize',
+    'postListLimit',
+    'postListOrder',
+    'viewedPostDisplay',
+    'tagAutocompleteNico',
+    'autoFetchTitle',
+    'autoFetchThumbnail',
+    'wikiEditorMode',
+]
 
 const themeLabel: Record<UserSettings['theme'], string> = {
     system: 'システム設定に従う',
@@ -80,8 +122,7 @@ const postListOrderLabel: Record<UserSettings['postListOrder'], string> = {
 
 const viewedPostDisplayLabel: Record<UserSettings['viewedPostDisplay'], string> = {
     show: '通常表示',
-    dim:  '薄く表示',
+    dim:  '薄く表示' }
-    hide: '隠す' }
 
 const autoFetchLabel: Record<UserSettings['autoFetchTitle'], string> = {
     auto:   '自動',
@@ -94,12 +135,27 @@ const wikiEditorModeLabel: Record<UserSettings['wikiEditorMode'], string> = {
     preview: 'プレビューのみ' }
 
 
+const parseTab = (search: string): SettingsTab => {
+  const tab = new URLSearchParams (search).get ('tab')
+  return tabs.some (candidate => candidate.id === tab)
+    ? tab as SettingsTab
+    : 'account'
+}
+
+
+const tabButtonId = (tab: SettingsTab): string => `settings-tab-${ tab }`
+const tabPanelId = (tab: SettingsTab): string => `settings-panel-${ tab }`
+
+
 const SettingPage: FC<Props> = ({ user, setUser }) => {
+  const location = useLocation ()
+  const navigate = useNavigate ()
+
   const [draftSettings, setDraftSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
   const [name, setName] = useState ('')
   const [userCodeVsbl, setUserCodeVsbl] = useState (false)
   const [inheritVsbl, setInheritVsbl] = useState (false)
-  const { loaded, settings, setSettings } = useUserSettings ()
+  const { error, loaded, settings, setSettings } = useUserSettings ()
   const {
     baseErrors: nameBaseErrors,
     fieldErrors: nameFieldErrors,
@@ -113,6 +169,66 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
     applyValidationError: applySettingsValidationError,
   } = useValidationErrors<SettingsFormField> ()
 
+  const activeTab = useMemo<SettingsTab> (() => parseTab (location.search), [location.search])
+
+  const setActiveTab = useCallback ((tab: SettingsTab) => {
+    const params = new URLSearchParams (location.search)
+    params.set ('tab', tab)
+    navigate (
+	`${ location.pathname }${ params.toString () ? `?${ params.toString () }` : '' }`,
+	{ replace: true },
+    )
+  }, [location.pathname, location.search, navigate])
+
+  const settingsTabErrors = useMemo<Record<SettingsTab, boolean>> (() => ({
+      account: Boolean (nameFieldErrors.name?.length),
+      display: (
+	  Boolean (settingsFieldErrors.theme?.length)
+	  || Boolean (settingsFieldErrors.displayDensity?.length)
+	  || Boolean (settingsFieldErrors.fontSize?.length)
+      ),
+      posts: (
+	  Boolean (settingsFieldErrors.postListLimit?.length)
+	  || Boolean (settingsFieldErrors.postListOrder?.length)
+	  || Boolean (settingsFieldErrors.viewedPostDisplay?.length)
+      ),
+      editing: (
+	  Boolean (settingsFieldErrors.tagAutocompleteNico?.length)
+	  || Boolean (settingsFieldErrors.autoFetchTitle?.length)
+	  || Boolean (settingsFieldErrors.autoFetchThumbnail?.length)
+      ),
+      wiki: Boolean (settingsFieldErrors.wikiEditorMode?.length),
+  }), [nameFieldErrors.name, settingsFieldErrors])
+
+  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    const currentIndex = tabs.findIndex (tab => tab.id === activeTab)
+
+    switch (event.key)
+    {
+    case 'ArrowRight':
+    case 'ArrowDown':
+      event.preventDefault ()
+      setActiveTab (tabs[(currentIndex + 1) % tabs.length].id)
+      break
+
+    case 'ArrowLeft':
+    case 'ArrowUp':
+      event.preventDefault ()
+      setActiveTab (tabs[(currentIndex - 1 + tabs.length) % tabs.length].id)
+      break
+
+    case 'Home':
+      event.preventDefault ()
+      setActiveTab (tabs[0].id)
+      break
+
+    case 'End':
+      event.preventDefault ()
+      setActiveTab (tabs[tabs.length - 1].id)
+      break
+    }
+  }
+
   const handleUserSubmit = async () => {
     if (!(user))
       return
@@ -130,9 +246,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
       setUser (currentUser => ({ ...currentUser, ...data }))
       toast ({ title: '表示名を更新しました．' })
     }
-    catch (error)
+    catch (submitError)
     {
-      applyNameValidationError (error)
+      applyNameValidationError (submitError)
       toast ({ title: '表示名を更新できませんでした．' })
     }
   }
@@ -158,9 +274,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
       setSettings (data)
       toast ({ title: '設定を保存しました．' })
     }
-    catch (error)
+    catch (submitError)
     {
-      applySettingsValidationError (error)
+      applySettingsValidationError (submitError)
       toast ({ title: '設定を保存できませんでした．' })
     }
   }
@@ -176,6 +292,19 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
     setDraftSettings (settings)
   }, [settings])
 
+  useEffect (() => {
+    if (nameFieldErrors.name?.length)
+      setActiveTab ('account')
+  }, [nameFieldErrors.name, setActiveTab])
+
+  useEffect (() => {
+    const fieldWithError = settingsFieldOrder.find (
+	field => (settingsFieldErrors[field]?.length ?? 0) > 0,
+    )
+    if (fieldWithError)
+      setActiveTab (settingsTabByField[fieldWithError])
+  }, [setActiveTab, settingsFieldErrors])
+
   return (
       <MainArea>
 	<Helmet>
@@ -185,17 +314,53 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 
 	<Form>
 	  <PageTitle>設定</PageTitle>
+	  <FieldError messages={error ? [error] : []}/>
 
 	  {user && loaded ? (
 	      <>
-		<section className={sectionClassName}>
+		<div
+		    role="tablist"
+		    aria-label="設定区分"
+		    className="mb-4 flex flex-wrap gap-2">
+		  {tabs.map (tab => (
+		      <button
+			  key={tab.id}
+			  id={tabButtonId (tab.id)}
+			  type="button"
+			  role="tab"
+			  aria-selected={activeTab === tab.id}
+			  aria-controls={tabPanelId (tab.id)}
+			  tabIndex={activeTab === tab.id ? 0 : -1}
+			  className={cn (
+			      'rounded-full border px-4 py-2 text-sm font-medium',
+			      activeTab === tab.id
+			      ? ['border-slate-900 bg-slate-900 text-white',
+				 'dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900']
+			      : ['border-slate-300 bg-white text-slate-700',
+				 'dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100'],
+			  )}
+			  onClick={() => setActiveTab (tab.id)}
+			  onKeyDown={handleTabKeyDown}>
+			{tab.label}
+			{settingsTabErrors[tab.id] ? ' ⚠' : ''}
+		      </button>))}
+		</div>
+
+		<section
+		    id={tabPanelId (activeTab)}
+		    role="tabpanel"
+		    aria-labelledby={tabButtonId (activeTab)}
+		    className={sectionClassName}>
+		  {activeTab === 'account' && (
+		      <>
 			<h2 className="text-xl font-bold">アカウント</h2>
 			<FieldError messages={nameBaseErrors}/>
 
 			<FormField label="表示名" messages={nameFieldErrors.name}>
 			  {({ describedBy, invalid }) => (
 			      <>
-			  <input type="text"
+				<input
+				    type="text"
 				    aria-describedby={describedBy}
 				    aria-invalid={invalid}
 				    className={inputClass (invalid)}
@@ -210,19 +375,23 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			</FormField>
 
 			<div className="flex flex-wrap gap-2">
-		    <Button onClick={handleUserSubmit}>表示名を更新</Button>
+			  <Button type="button" onClick={handleUserSubmit}>
+			    表示名を更新
+			  </Button>
 			</div>
 
 			<div className="space-y-2">
 			  <Label>引継ぎ</Label>
 			  <div className="flex flex-wrap gap-2">
 			    <Button
+				type="button"
 				onClick={() => setUserCodeVsbl (true)}
 				className="bg-gray-600 text-white"
 				disabled={!(user)}>
 			      引継ぎコードを表示
 			    </Button>
 			    <Button
+				type="button"
 				onClick={() => setInheritVsbl (true)}
 				className="bg-red-600 text-white"
 				disabled={!(user)}>
@@ -230,10 +399,12 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			    </Button>
 			  </div>
 			</div>
-		</section>
+		      </>)}
 
-		<section className={sectionClassName}>
+		  {activeTab === 'display' && (
+		      <>
 			<h2 className="text-xl font-bold">表示</h2>
+			<FieldError messages={settingsBaseErrors}/>
 
 			<FormField label="テーマ" messages={settingsFieldErrors.theme}>
 			  {() => (
@@ -254,11 +425,14 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			<FormField label="表示密度" messages={settingsFieldErrors.displayDensity}>
 			  {() => (
 			      <select
-			    className={inputClass (Boolean (settingsFieldErrors.displayDensity?.length))}
+				  className={inputClass (
+				      Boolean (settingsFieldErrors.displayDensity?.length),
+				  )}
 				  value={draftSettings.displayDensity}
 				  onChange={ev => setDraftSettings (current => ({
 				      ...current,
-				displayDensity: ev.target.value as UserSettings['displayDensity'],
+				      displayDensity:
+					  ev.target.value as UserSettings['displayDensity'],
 				  }))}>
 				{DISPLAY_DENSITY_OPTIONS.map (value => (
 				    <option key={value} value={value}>
@@ -270,7 +444,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			<FormField label="文字サイズ" messages={settingsFieldErrors.fontSize}>
 			  {() => (
 			      <select
-			    className={inputClass (Boolean (settingsFieldErrors.fontSize?.length))}
+				  className={inputClass (
+				      Boolean (settingsFieldErrors.fontSize?.length),
+				  )}
 				  value={draftSettings.fontSize}
 				  onChange={ev => setDraftSettings (current => ({
 				      ...current,
@@ -282,19 +458,28 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 				    </option>))}
 			      </select>)}
 			</FormField>
-		</section>
 
-		<section className={sectionClassName}>
+			<Button type="button" onClick={handleSettingsSubmit}>
-		  <h2 className="text-xl font-bold">投稿一覧</h2>
+			  設定を保存
+			</Button>
+		      </>)}
+
+		  {activeTab === 'posts' && (
+		      <>
+			<h2 className="text-xl font-bold">投稿</h2>
+			<FieldError messages={settingsBaseErrors}/>
 
 			<FormField label="既定の件数" messages={settingsFieldErrors.postListLimit}>
 			  {() => (
 			      <select
-			    className={inputClass (Boolean (settingsFieldErrors.postListLimit?.length))}
+				  className={inputClass (
+				      Boolean (settingsFieldErrors.postListLimit?.length),
+				  )}
 				  value={draftSettings.postListLimit}
 				  onChange={ev => setDraftSettings (current => ({
 				      ...current,
-				postListLimit: Number (ev.target.value) as UserSettings['postListLimit'],
+				      postListLimit:
+					  Number (ev.target.value) as UserSettings['postListLimit'],
 				  }))}>
 				{POST_LIST_LIMIT_OPTIONS.map (value => (
 				    <option key={value} value={value}>
@@ -306,11 +491,14 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			<FormField label="既定の並び順" messages={settingsFieldErrors.postListOrder}>
 			  {() => (
 			      <select
-			    className={inputClass (Boolean (settingsFieldErrors.postListOrder?.length))}
+				  className={inputClass (
+				      Boolean (settingsFieldErrors.postListOrder?.length),
+				  )}
 				  value={draftSettings.postListOrder}
 				  onChange={ev => setDraftSettings (current => ({
 				      ...current,
-				postListOrder: ev.target.value as UserSettings['postListOrder'],
+				      postListOrder:
+					  ev.target.value as UserSettings['postListOrder'],
 				  }))}>
 				{POST_LIST_ORDER_OPTIONS.map (value => (
 				    <option key={value} value={value}>
@@ -322,7 +510,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			<FormField label="既読投稿の表示" messages={settingsFieldErrors.viewedPostDisplay}>
 			  {() => (
 			      <select
-			    className={inputClass (Boolean (settingsFieldErrors.viewedPostDisplay?.length))}
+				  className={inputClass (
+				      Boolean (settingsFieldErrors.viewedPostDisplay?.length),
+				  )}
 				  value={draftSettings.viewedPostDisplay}
 				  onChange={ev => setDraftSettings (current => ({
 				      ...current,
@@ -335,12 +525,20 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 				    </option>))}
 			      </select>)}
 			</FormField>
-		</section>
 
-		<section className={sectionClassName}>
+			<Button type="button" onClick={handleSettingsSubmit}>
+			  設定を保存
+			</Button>
+		      </>)}
+
+		  {activeTab === 'editing' && (
+		      <>
 			<h2 className="text-xl font-bold">編輯支援</h2>
+			<FieldError messages={settingsBaseErrors}/>
 
-		  <FormField label="ニコニコタグを補完に含める" messages={settingsFieldErrors.tagAutocompleteNico}>
+			<FormField
+			    label="ニコニコタグを補完に含める"
+			    messages={settingsFieldErrors.tagAutocompleteNico}>
 			  {() => (
 			      <label className="flex items-center gap-2">
 				<input
@@ -357,11 +555,14 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			<FormField label="タイトル自動取得" messages={settingsFieldErrors.autoFetchTitle}>
 			  {() => (
 			      <select
-			    className={inputClass (Boolean (settingsFieldErrors.autoFetchTitle?.length))}
+				  className={inputClass (
+				      Boolean (settingsFieldErrors.autoFetchTitle?.length),
+				  )}
 				  value={draftSettings.autoFetchTitle}
 				  onChange={ev => setDraftSettings (current => ({
 				      ...current,
-				autoFetchTitle: ev.target.value as UserSettings['autoFetchTitle'],
+				      autoFetchTitle:
+					  ev.target.value as UserSettings['autoFetchTitle'],
 				  }))}>
 				{AUTO_FETCH_OPTIONS.map (value => (
 				    <option key={value} value={value}>
@@ -370,10 +571,14 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			      </select>)}
 			</FormField>
 
-		  <FormField label="サムネール自動取得" messages={settingsFieldErrors.autoFetchThumbnail}>
+			<FormField
+			    label="サムネール自動取得"
+			    messages={settingsFieldErrors.autoFetchThumbnail}>
 			  {() => (
 			      <select
-			    className={inputClass (Boolean (settingsFieldErrors.autoFetchThumbnail?.length))}
+				  className={inputClass (
+				      Boolean (settingsFieldErrors.autoFetchThumbnail?.length),
+				  )}
 				  value={draftSettings.autoFetchThumbnail}
 				  onChange={ev => setDraftSettings (current => ({
 				      ...current,
@@ -386,19 +591,28 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 				    </option>))}
 			      </select>)}
 			</FormField>
-		</section>
 
-		<section className={sectionClassName}>
+			<Button type="button" onClick={handleSettingsSubmit}>
+			  設定を保存
+			</Button>
+		      </>)}
+
+		  {activeTab === 'wiki' && (
+		      <>
 			<h2 className="text-xl font-bold">Wiki</h2>
+			<FieldError messages={settingsBaseErrors}/>
 
 			<FormField label="エディタ表示" messages={settingsFieldErrors.wikiEditorMode}>
 			  {() => (
 			      <select
-			    className={inputClass (Boolean (settingsFieldErrors.wikiEditorMode?.length))}
+				  className={inputClass (
+				      Boolean (settingsFieldErrors.wikiEditorMode?.length),
+				  )}
 				  value={draftSettings.wikiEditorMode}
 				  onChange={ev => setDraftSettings (current => ({
 				      ...current,
-				wikiEditorMode: ev.target.value as UserSettings['wikiEditorMode'],
+				      wikiEditorMode:
+					  ev.target.value as UserSettings['wikiEditorMode'],
 				  }))}>
 				{WIKI_EDITOR_MODE_OPTIONS.map (value => (
 				    <option key={value} value={value}>
@@ -406,23 +620,23 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 				    </option>))}
 			      </select>)}
 			</FormField>
-		</section>
 
-		<section className={sectionClassName}>
+			<Button type="button" onClick={handleSettingsSubmit}>
-		  <FieldError messages={settingsBaseErrors}/>
+			  設定を保存
-		  <div className="flex flex-wrap gap-2">
+			</Button>
-		    <Button onClick={handleSettingsSubmit}>設定を保存</Button>
+		      </>)}
-		  </div>
 		</section>
 	      </>) : 'Loading...'}
 	</Form>
 
-	<UserCodeDialogue visible={userCodeVsbl}
+	<UserCodeDialogue
+	    visible={userCodeVsbl}
 	    onVisibleChange={setUserCodeVsbl}
 	    user={user}
 	    setUser={setUser}/>
 
-	<InheritDialogue visible={inheritVsbl}
+	<InheritDialogue
+	    visible={inheritVsbl}
 	    onVisibleChange={setInheritVsbl}
 	    setUser={setUser}/>
       </MainArea>)