#34

AGENTS.md

@@ -106,6 +106,10 @@ npm run preview
 - Explain risks directly.
 - Prefer single quotes for strings unless interpolation or escaping makes
   double quotes better.
+- For Japanese text, follow the 1986 Cabinet Notice
+  《現代仮名遣い》 as the default orthography.
+- For Japanese kanji spelling, do not apply
+  《当用漢字による書きかえ》; prefer the original spelling as the formal one.
 - Ruby: never put a space before method-call parentheses.
 - Ruby: `render` 系メソッド呼び出しでは、keyword 引数付きでも括弧を書かない。
 - Ruby: never put a line break immediately before `)`.
@@ -255,8 +259,11 @@ const value =
   `!==` over negating a comparison like `!(a === b)`.
 - In TypeScript and TSX, prefer `++i` or `--i` over `i += 1` or `i -= 1` for
   simple unit-step counter updates.
-- For user-facing Japanese text, prefer modern kana usage and natural current
+- For user-facing Japanese text, follow the 1986 Cabinet Notice
-  phrasing over historical spellings or awkward literal wording.
+  《現代仮名遣い》 and avoid historical kana spellings unless the task
+  explicitly requires them.
+- For user-facing Japanese kanji spelling, do not normalize to
+  《当用漢字による書きかえ》; prefer original forms such as `編輯`.
 - For user-facing Japanese ellipses, prefer `……` over ASCII `...`.
 
 ### Frontend TSX style

backend/app/controllers/user_settings_controller.rb

@@ -0,0 +1,61 @@
+class UserSettingsController < ApplicationController
+  wrap_parameters false
+
+  def show
+    return head :unauthorized unless current_user
+
+    render json: current_setting.serializable_hash
+  end
+
+  def update
+    return head :unauthorized unless current_user
+
+    raw_attributes = editable_raw_attributes
+    field_errors = validate_raw_attributes(raw_attributes)
+    return render_validation_error fields: field_errors if field_errors.present?
+
+    setting = current_setting
+    setting.assign_attributes(raw_attributes)
+
+    if setting.save
+      render json: setting.serializable_hash, status: :ok
+    else
+      render_validation_error setting
+    end
+  end
+
+  private
+
+  def current_setting
+    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 editable_raw_attributes
+    request.request_parameters.slice(*Setting::EDITABLE_ATTRIBUTES)
+  end
+
+  def validate_raw_attributes raw_attributes
+    raw_attributes.each_with_object({ }) do |(key, value), errors|
+      next if value_matches_type?(key, value)
+
+      errors[key.to_sym] = ['値の型が不正です．']
+    end
+  end
+
+  def value_matches_type? key, value
+    case Setting::TYPE_BY_ATTRIBUTE.fetch(key)
+    when :string
+      value.is_a?(String)
+    when :integer
+      value.is_a?(Integer)
+    when :boolean
+      value == true || value == false
+    else
+      false
+    end
+  end
+end

backend/app/models/setting.rb

@@ -1,7 +1,49 @@
 class Setting < ApplicationRecord
+  THEMES = ['system', 'light', 'dark'].freeze
+  AUTO_FETCH_MODES = ['auto', 'manual', 'off'].freeze
+  WIKI_EDITOR_MODES = ['split', 'write', 'preview'].freeze
+
+  STRING_ATTRIBUTES = [
+    'theme',
+    'auto_fetch_title',
+    'auto_fetch_thumbnail',
+    'wiki_editor_mode',
+  ].freeze
+  INTEGER_ATTRIBUTES = [].freeze
+  BOOLEAN_ATTRIBUTES = [].freeze
+  EDITABLE_ATTRIBUTES =
+      (STRING_ATTRIBUTES + INTEGER_ATTRIBUTES + BOOLEAN_ATTRIBUTES).freeze
+  TYPE_BY_ATTRIBUTE = {
+    'theme' => :string,
+    'auto_fetch_title' => :string,
+    'auto_fetch_thumbnail' => :string,
+    'wiki_editor_mode' => :string,
+  }.freeze
+
   belongs_to :user
 
   validates :user_id, presence: true
-  validates :key, presence: true, length: { maximum: 255 }
+  validates :user_id, uniqueness: true
-  validates :value, presence: true
+
+  validates :theme, inclusion: { in: THEMES }
+  validates :auto_fetch_title, inclusion: { in: AUTO_FETCH_MODES }
+  validates :auto_fetch_thumbnail, inclusion: { in: AUTO_FETCH_MODES }
+  validates :wiki_editor_mode, inclusion: { in: WIKI_EDITOR_MODES }
+
+  def self.defaults
+    {
+      theme: 'system',
+      auto_fetch_title: 'manual',
+      auto_fetch_thumbnail: 'manual',
+      wiki_editor_mode: 'split',
+    }
+  end
+
+  def self.serializable_attributes
+    EDITABLE_ATTRIBUTES.map(&:to_sym)
+  end
+
+  def serializable_hash(options = nil)
+    super({ only: self.class.serializable_attributes }.merge(options || { }))
+  end
 end

backend/app/models/user.rb

@@ -7,7 +7,7 @@ class User < ApplicationRecord
 
   has_many :created_posts,
            class_name: 'Post', foreign_key: :uploaded_user_id, dependent: :nullify
-  has_many :settings
+  has_one :setting, dependent: :destroy
   has_many :user_ips, dependent: :destroy
   has_many :ip_addresses, through: :user_ips
   has_many :user_post_views, dependent: :destroy

backend/config/routes.rb

@@ -81,6 +81,9 @@ Rails.application.routes.draw do
     end
   end
 
+  get 'users/settings', to: 'user_settings#show'
+  patch 'users/settings', to: 'user_settings#update'
+
   resources :users, only: [:create, :update] do
     collection do
       post :verify

backend/db/migrate/20260704000000_rebuild_settings_as_typed_user_settings.rb

@@ -0,0 +1,31 @@
+class RebuildSettingsAsTypedUserSettings < ActiveRecord::Migration[8.0]
+  def change
+    remove_foreign_key :settings, :users if foreign_key_exists?(:settings, :users)
+    remove_index :settings, :user_id if index_exists?(:settings, :user_id)
+
+    remove_column :settings, :key, :string if column_exists?(:settings, :key)
+    remove_column :settings, :value, :json if column_exists?(:settings, :value)
+
+    change_column_null :settings, :user_id, false
+
+    add_column :settings, :theme, :string, null: false, default: 'system'
+    add_column :settings,
+               :auto_fetch_title,
+               :string,
+               null: false,
+               default: 'manual'
+    add_column :settings,
+               :auto_fetch_thumbnail,
+               :string,
+               null: false,
+               default: 'manual'
+    add_column :settings,
+               :wiki_editor_mode,
+               :string,
+               null: false,
+               default: 'split'
+
+    add_index :settings, :user_id, unique: true
+    add_foreign_key :settings, :users
+  end
+end

backend/db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
+ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
   create_table "active_storage_attachments", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.string "name", null: false
     t.string "record_type", null: false
@@ -374,11 +374,13 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
 
   create_table "settings", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "user_id", null: false
-    t.string "key", null: false
-    t.json "value", null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
-    t.index ["user_id"], name: "index_settings_on_user_id"
+    t.string "theme", default: "system", null: false
+    t.string "auto_fetch_title", default: "manual", null: false
+    t.string "auto_fetch_thumbnail", default: "manual", null: false
+    t.string "wiki_editor_mode", default: "split", null: false
+    t.index ["user_id"], name: "index_settings_on_user_id", unique: true
   end
 
   create_table "tag_implications", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|

frontend/src/App.tsx

@@ -10,6 +10,7 @@ import DevModeWatermark from '@/components/DevModeWatermark'
 import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
+import { UserSettingsProvider } from '@/components/users/UserSettingsProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
 import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
@@ -145,6 +146,7 @@ const App: FC = () => {
 
   return (
       <>
+	<UserSettingsProvider user={user}>
 	  <RouteBlockerOverlay/>
 	  {import.meta.env.DEV && <DevModeWatermark/>}
 
@@ -163,6 +165,7 @@ const App: FC = () => {
 	      <Toaster/>
 	    </DialogueProvider>
 	  </BrowserRouter>
+	</UserSettingsProvider>
       </>)
 }
 

frontend/src/components/MaterialSidebar.tsx

@@ -488,7 +488,8 @@ const MaterialSidebar: FC = () => {
 	  </div>
 	</div>
 
-	<SidebarComponent sidebarKey="materials" className="hidden md:block">
+	<div className="hidden md:block">
+	  <SidebarComponent>
 	    <div className="space-y-4">
 	      <MaterialFilterButtons
 		  materialFilter={materialFilter}
@@ -505,6 +506,7 @@ const MaterialSidebar: FC = () => {
 		  </ul>)}
 	    </div>
 	  </SidebarComponent>
+	</div>
       </>)
 }
 

frontend/src/components/PostFormTagsArea.tsx

@@ -68,9 +68,12 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
 
     setBounds ({ start, end })
 
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q: token, nico: '0' } })
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
-    setSuggestions (data.filter (t => t.postCount > 0))
+	q: token,
-    setSuggestionsVsbl (suggestions.length > 0)
+	nico: '0' } })
+    const nextSuggestions = data.filter (t => t.postCount > 0)
+    setSuggestions (nextSuggestions)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   return (

frontend/src/components/TagDetailSidebar.tsx

@@ -146,13 +146,10 @@ const DropSlot = ({ cat }: { cat: Category }) => {
 }
 
 
-type Props = {
+type Props = { post: Post; sp?: boolean }
-    className?: string
-    post:       Post
-    sp?:        boolean }
 
 
-const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
+const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
   sp = Boolean (sp)
 
   const qc = useQueryClient ()
@@ -281,7 +278,7 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
   }, [baseTags])
 
   return (
-      <SidebarComponent sidebarKey="post-detail-tags" className={className}>
+      <SidebarComponent>
 	<TagSearch/>
 	<DndContext
 	    sensors={sensors}

frontend/src/components/TagSidebar.tsx

@@ -96,7 +96,7 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
       </>)
 
   return (
-      <SidebarComponent sidebarKey="posts-index-tags">
+      <SidebarComponent>
 	<TagSearch/>
 
 	<div className="hidden md:block mt-4">

frontend/src/components/common/TagInput.test.tsx

@@ -26,7 +26,7 @@ describe ('TagInput', () => {
     await waitFor (() => {
       expect (api.apiGet).toHaveBeenCalledWith (
           '/tags/autocomplete',
-          { params: { q: '虹夏' } },
+          { params: { q: '虹夏', nico: '0' } },
       )
     })
     expect (setValue).toHaveBeenCalledWith ('ぼっち 虹夏')
@@ -41,4 +41,20 @@ describe ('TagInput', () => {
     expect (api.apiGet).not.toHaveBeenCalled ()
     expect (setValue).toHaveBeenCalledWith (' ')
   })
+
+  it ('sends nico=1 only when includeNico is true', async () => {
+    const setValue = vi.fn ()
+    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 2 })])
+
+    render (<TagInput value="" setValue={setValue} includeNico={true}/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: '虹夏' } })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/autocomplete',
+          { params: { q: '虹夏', nico: '1' } },
+      )
+    })
+  })
 })

frontend/src/components/common/TagInput.tsx

@@ -10,13 +10,20 @@ import type { Tag } from '@/types'
 
 
 type Props = {
+    includeNico?:   boolean
     describedBy?:  string
     invalid?:      boolean
     value:         string
     setValue:      (value: string) => void }
 
 
-const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
+const TagInput: FC<Props> = ({
+    includeNico = false,
+    describedBy,
+    invalid,
+    value,
+    setValue,
+}) => {
   const [activeIndex, setActiveIndex] = useState (-1)
   const [suggestions, setSuggestions] = useState<Tag[]> ([])
   const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
@@ -32,10 +39,12 @@ const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
 	return
       }
 
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
-    setSuggestions (data.filter (t => t.postCount > 0))
+	q,
-    if (suggestions.length > 0)
+	nico: includeNico ? '1' : '0' } })
-      setSuggestionsVsbl (true)
+    const nextSuggestions = data.filter (t => t.postCount > 0)
+    setSuggestions (nextSuggestions)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   // TODO: TagSearch からのコピペのため，共通化を考へる．

frontend/src/components/layout/SidebarComponent.test.tsx

@@ -1,124 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { HelmetProvider } from 'react-helmet-async'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import SidebarComponent from '@/components/layout/SidebarComponent'
-
-
-const sidebarWidth = (element: Element | null): string =>
-    (element as HTMLElement).style.getPropertyValue ('--sidebar-width')
-
-
-const sidebarRoot = (container: HTMLElement): Element =>
-    container.querySelector ('[style*="--sidebar-width"]')!
-
-
-const sidebarTree = (props: Partial<Parameters<typeof SidebarComponent>[0]>) => (
-    <HelmetProvider>
-      <div data-sidebar-container>
-	<SidebarComponent sidebarKey="test-sidebar" {...props}>
-	  Sidebar body
-	</SidebarComponent>
-      </div>
-    </HelmetProvider>)
-
-
-const renderSidebar = (
-    props: Partial<Parameters<typeof SidebarComponent>[0]> = {},
-    containerWidth = 800,
-) => {
-  Object.defineProperty (HTMLElement.prototype, 'clientWidth', {
-      configurable: true,
-      get () {
-	return this.hasAttribute ('data-sidebar-container') ? containerWidth : 0
-      },
-  })
-
-  const rendered = render (sidebarTree (props))
-
-  return rendered
-}
-
-
-describe ('SidebarComponent', () => {
-  beforeEach (() => {
-    Object.defineProperty (window, 'innerWidth', {
-	configurable: true,
-	value:        1_000,
-    })
-
-    Object.defineProperty (HTMLElement.prototype, 'setPointerCapture', {
-	configurable: true,
-	value:        vi.fn (),
-    })
-    Object.defineProperty (HTMLElement.prototype, 'releasePointerCapture', {
-	configurable: true,
-	value:        vi.fn (),
-    })
-    Object.defineProperty (HTMLElement.prototype, 'hasPointerCapture', {
-	configurable: true,
-	value:        vi.fn (() => true),
-    })
-
-    vi.spyOn (HTMLElement.prototype, 'setPointerCapture').mockImplementation (() => {
-      ;
-    })
-    vi.spyOn (HTMLElement.prototype, 'releasePointerCapture').mockImplementation (() => {
-      ;
-    })
-    vi.spyOn (HTMLElement.prototype, 'hasPointerCapture').mockReturnValue (true)
-  })
-
-  it ('uses maxWidth without applying the container main-width reserve twice', async () => {
-    localStorage.setItem ('sidebar:test-sidebar:left:width', '700')
-    const onWidthChange = vi.fn ()
-
-    const { container } = renderSidebar ({ maxWidth: 700, onWidthChange }, 800)
-
-    await waitFor (() => {
-      expect (sidebarWidth (sidebarRoot (container))).toBe ('700px')
-    })
-    expect (onWidthChange).toHaveBeenLastCalledWith (700)
-  })
-
-  it ('resets width and removes only its storage key on double click', async () => {
-    localStorage.setItem ('sidebar:test-sidebar:right:width', '420')
-    localStorage.setItem ('sidebar:other-sidebar:right:width', '480')
-
-    const { container } = renderSidebar ({ side: 'right' }, 900)
-
-    await waitFor (() => {
-      expect (sidebarWidth (sidebarRoot (container))).toBe ('420px')
-    })
-
-    fireEvent.doubleClick (screen.getByRole ('separator', { name: 'サイドバー幅' }))
-
-    await waitFor (() => {
-      expect (sidebarWidth (sidebarRoot (container))).toBe ('256px')
-    })
-    expect (localStorage.getItem ('sidebar:test-sidebar:right:width')).toBeNull ()
-    expect (localStorage.getItem ('sidebar:other-sidebar:right:width')).toBe ('480')
-  })
-
-  it ('clamps current width on maxWidth changes without re-reading storage', async () => {
-    localStorage.setItem ('sidebar:test-sidebar:left:width', '420')
-
-    const { container, rerender } = renderSidebar ({ maxWidth: 420 }, 900)
-
-    await waitFor (() => {
-      expect (sidebarWidth (sidebarRoot (container))).toBe ('420px')
-    })
-
-    rerender (sidebarTree ({ maxWidth: 300 }))
-
-    await waitFor (() => {
-      expect (sidebarWidth (sidebarRoot (container))).toBe ('300px')
-    })
-
-    rerender (sidebarTree ({ maxWidth: 500 }))
-
-    await waitFor (() => {
-      expect (sidebarWidth (sidebarRoot (container))).toBe ('300px')
-    })
-  })
-})

frontend/src/components/layout/SidebarComponent.tsx

@@ -1,316 +1,16 @@
 import { motion } from 'framer-motion'
 import { Helmet } from 'react-helmet-async'
 
-import { cn } from '@/lib/utils'
+import type { FC, ReactNode } from 'react'
 
-import type { CSSProperties, FC, MouseEvent, PointerEvent, ReactNode } from 'react'
+type Props = { children: ReactNode }
-import { useCallback, useEffect, useRef, useState } from 'react'
-
-type SidebarSide = 'left' | 'right'
-
-type Props = {
-    children:      ReactNode
-    className?:    string
-    maxWidth?:     number
-    onWidthChange?: (width: number) => void
-    sidebarKey:    string
-    side?:         SidebarSide }
-
-type ResizeState = {
-    pointerId:  number
-    startWidth: number
-    startX:     number
-    side:       SidebarSide }
-
-type PendingPressState = ResizeState & { startY: number }
-
-const DEFAULT_SIDEBAR_WIDTH = 256
-const MIN_SIDEBAR_WIDTH = 192
-const MIN_MAIN_WIDTH = 360
-const MAX_VIEWPORT_WIDTH_RATIO = .8
-const LONG_PRESS_DELAY_MS = 350
-const TOUCH_MOVE_THRESHOLD_PX = 8
 
 
-const storageKeyForSidebar = (sidebarKey: string, side: SidebarSide): string =>
+const SidebarComponent: FC<Props> = ({ children }) => (
-    `sidebar:${ sidebarKey }:${ side }:width`
-
-
-const getSidebarMaxWidth = (containerWidth: number): number => {
-  const viewportWidth =
-      typeof window === 'undefined' ? containerWidth : window.innerWidth
-  const viewportMaxWidth = Math.floor (viewportWidth * MAX_VIEWPORT_WIDTH_RATIO)
-  const containerMaxWidth = Math.floor (containerWidth - MIN_MAIN_WIDTH)
-  const dynamicMaxWidth = Math.min (viewportMaxWidth, containerMaxWidth)
-
-  return Math.max (MIN_SIDEBAR_WIDTH, dynamicMaxWidth)
-}
-
-
-const readStoredSidebarWidth = (
-    sidebarKey: string,
-    side: SidebarSide): number => {
-  if (typeof window === 'undefined')
-    return DEFAULT_SIDEBAR_WIDTH
-
-  const value = window.localStorage.getItem (storageKeyForSidebar (sidebarKey, side))
-  const width = value == null ? Number.NaN : Number (value)
-
-  return Number.isFinite (width) ? width : DEFAULT_SIDEBAR_WIDTH
-}
-
-
-const SidebarComponent: FC<Props> = ({
-    children,
-    className,
-    maxWidth,
-    onWidthChange,
-    sidebarKey,
-    side = 'left',
-}) => {
-  const rootRef = useRef<HTMLDivElement | null> (null)
-  const maxWidthRef = useRef (maxWidth)
-  const getContainerWidth = useCallback (() => {
-    const containerWidth = rootRef.current
-	?.closest ('[data-sidebar-container]')
-	?.clientWidth
-    ?? window.innerWidth
-    return containerWidth
-  }, [])
-  const getClampedWidth = useCallback ((
-      nextWidth: number,
-      containerWidth: number): number => {
-    const viewportWidth =
-	typeof window === 'undefined' ? containerWidth : window.innerWidth
-    const viewportMaxWidth = Math.floor (viewportWidth * MAX_VIEWPORT_WIDTH_RATIO)
-    const maxAllowedWidth =
-	maxWidthRef.current == null
-	? getSidebarMaxWidth (containerWidth)
-	: Math.max (
-	    MIN_SIDEBAR_WIDTH,
-	    Math.min (viewportMaxWidth, maxWidthRef.current))
-
-    return Math.min (maxAllowedWidth, Math.max (MIN_SIDEBAR_WIDTH, nextWidth))
-  }, [])
-
-  const [width, setWidth] = useState (() => (
-      typeof window === 'undefined'
-      ? DEFAULT_SIDEBAR_WIDTH
-      : getClampedWidth (
-	  readStoredSidebarWidth (sidebarKey, side),
-	  window.innerWidth)))
-  const [resizing, setResizing] = useState (false)
-  const widthRef = useRef (width)
-  const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null> (null)
-  const pendingPressRef = useRef<PendingPressState | null> (null)
-  const resizeRef = useRef<ResizeState | null> (null)
-  const bodyStyleRef = useRef<{ cursor: string, userSelect: string } | null> (null)
-
-  const clearLongPressTimer = useCallback (() => {
-    if (longPressTimerRef.current == null)
-      return
-
-    clearTimeout (longPressTimerRef.current)
-    longPressTimerRef.current = null
-  }, [])
-
-  const restoreBodyStyle = useCallback (() => {
-    if (bodyStyleRef.current == null)
-      return
-
-    document.body.style.cursor = bodyStyleRef.current.cursor
-    document.body.style.userSelect = bodyStyleRef.current.userSelect
-    bodyStyleRef.current = null
-  }, [])
-
-  const startResize = useCallback ((state: ResizeState) => {
-    clearLongPressTimer ()
-    pendingPressRef.current = null
-    resizeRef.current = state
-    setResizing (true)
-
-    if (bodyStyleRef.current == null)
-    {
-      bodyStyleRef.current = {
-	  cursor: document.body.style.cursor,
-	  userSelect: document.body.style.userSelect }
-    }
-
-    document.body.style.cursor = 'col-resize'
-    document.body.style.userSelect = 'none'
-  }, [clearLongPressTimer])
-
-  const finishResize = useCallback (() => {
-    clearLongPressTimer ()
-    pendingPressRef.current = null
-
-    const state = resizeRef.current
-    resizeRef.current = null
-
-    if (state != null)
-      window.localStorage.setItem (
-	  storageKeyForSidebar (sidebarKey, state.side),
-	  String (widthRef.current))
-
-    setResizing (false)
-    restoreBodyStyle ()
-  }, [clearLongPressTimer, restoreBodyStyle, sidebarKey])
-
-  const applyWidth = useCallback ((nextWidth: number) => {
-    if (nextWidth === widthRef.current)
-      return
-
-    widthRef.current = nextWidth
-    setWidth (nextWidth)
-  }, [])
-
-  useEffect (() => {
-    maxWidthRef.current = maxWidth
-    const containerWidth = getContainerWidth ()
-    const nextWidth = getClampedWidth (widthRef.current, containerWidth)
-    applyWidth (nextWidth)
-  }, [applyWidth, getClampedWidth, getContainerWidth, maxWidth])
-
-  const updateWidth = useCallback ((clientX: number) => {
-    const state = resizeRef.current
-    if (state == null)
-      return
-
-    const containerWidth = getContainerWidth ()
-    const delta = state.side === 'left'
-		  ? clientX - state.startX
-		  : state.startX - clientX
-    const nextWidth = getClampedWidth (state.startWidth + delta, containerWidth)
-    applyWidth (nextWidth)
-  }, [applyWidth, getClampedWidth, getContainerWidth])
-
-  const handlePointerDown = (ev: PointerEvent<HTMLDivElement>) => {
-    if (ev.pointerType !== 'mouse' && ev.pointerType !== 'touch')
-      return
-
-    if (ev.pointerType === 'mouse' && ev.button !== 0)
-      return
-
-    ev.preventDefault ()
-    ev.stopPropagation ()
-    ev.currentTarget.setPointerCapture (ev.pointerId)
-
-    const state = {
-	pointerId: ev.pointerId,
-	side,
-	startWidth: widthRef.current,
-	startX: ev.clientX }
-
-    if (ev.pointerType === 'mouse')
-    {
-      startResize (state)
-      return
-    }
-
-    pendingPressRef.current = { ...state, startY: ev.clientY }
-    clearLongPressTimer ()
-    longPressTimerRef.current = setTimeout (() => {
-      if (pendingPressRef.current != null)
-	startResize (pendingPressRef.current)
-    }, LONG_PRESS_DELAY_MS)
-  }
-
-  const handlePointerMove = (ev: PointerEvent<HTMLDivElement>) => {
-    ev.stopPropagation ()
-
-    if (resizeRef.current != null)
-    {
-      ev.preventDefault ()
-      updateWidth (ev.clientX)
-      return
-    }
-
-    const pendingPress = pendingPressRef.current
-    if (pendingPress == null || pendingPress.pointerId !== ev.pointerId)
-      return
-
-    const deltaX = ev.clientX - pendingPress.startX
-    const deltaY = ev.clientY - pendingPress.startY
-    const distance = Math.hypot (deltaX, deltaY)
-
-    if (distance >= TOUCH_MOVE_THRESHOLD_PX)
-    {
-      clearLongPressTimer ()
-      pendingPressRef.current = null
-    }
-  }
-
-  const handlePointerEnd = (ev: PointerEvent<HTMLDivElement>) => {
-    ev.stopPropagation ()
-
-    if (ev.currentTarget.hasPointerCapture (ev.pointerId))
-      ev.currentTarget.releasePointerCapture (ev.pointerId)
-
-    finishResize ()
-  }
-
-  const resetWidth = useCallback (() => {
-    const containerWidth = getContainerWidth ()
-    const nextWidth = getClampedWidth (DEFAULT_SIDEBAR_WIDTH, containerWidth)
-    applyWidth (nextWidth)
-    window.localStorage.removeItem (storageKeyForSidebar (sidebarKey, side))
-  }, [applyWidth, getClampedWidth, getContainerWidth, sidebarKey, side])
-
-  const handleDoubleClick = (ev: MouseEvent<HTMLDivElement>) => {
-    ev.preventDefault ()
-    ev.stopPropagation ()
-    resetWidth ()
-  }
-
-  useEffect (() => {
-    const containerWidth = getContainerWidth ()
-    const nextWidth = getClampedWidth (
-	readStoredSidebarWidth (sidebarKey, side),
-	containerWidth)
-    applyWidth (nextWidth)
-  }, [applyWidth, getClampedWidth, getContainerWidth, sidebarKey, side])
-
-  useEffect (() => {
-    const containerWidth = getContainerWidth ()
-    const nextWidth = getClampedWidth (widthRef.current, containerWidth)
-    applyWidth (nextWidth)
-  }, [applyWidth, getClampedWidth, getContainerWidth])
-
-  useEffect (() => {
-    if (typeof window === 'undefined')
-      return
-
-    const handleResize = () => {
-      const containerWidth = getContainerWidth ()
-      const nextWidth = getClampedWidth (widthRef.current, containerWidth)
-      applyWidth (nextWidth)
-    }
-
-    window.addEventListener ('resize', handleResize)
-    return () => window.removeEventListener ('resize', handleResize)
-  }, [applyWidth, getClampedWidth, getContainerWidth])
-
-  useEffect (() => {
-    onWidthChange?.(width)
-  }, [onWidthChange, width])
-
-  useEffect (() => () => {
-    clearLongPressTimer ()
-    restoreBodyStyle ()
-  }, [clearLongPressTimer, restoreBodyStyle])
-
-  const style = {
-      '--sidebar-width': `${ width }px` } as CSSProperties
-
-  return (
     <motion.div
-	  ref={rootRef}
 	layout="position"
 	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
-	  style={style}
+	className="p-4 w-full md:w-64 md:h-full md:overflow-y-auto sidebar">
-	  className={cn (
-	      'relative w-full md:w-[var(--sidebar-width)] md:shrink-0 md:h-full',
-	      className)}>
       <Helmet>
 	<style>
 	  {`
@@ -326,31 +26,7 @@ const SidebarComponent: FC<Props> = ({
 	</style>
       </Helmet>
 
-	<div className="h-full overflow-y-auto p-4 sidebar">
       {children}
-	</div>
-
-	<div
-	    role="separator"
-	    aria-orientation="vertical"
-	    aria-label="サイドバー幅"
-	    onPointerDown={handlePointerDown}
-	    onPointerMove={handlePointerMove}
-	    onPointerUp={handlePointerEnd}
-	    onPointerCancel={handlePointerEnd}
-	    onDoubleClick={handleDoubleClick}
-	    className={cn (
-		'hidden md:block absolute top-0 bottom-0 z-20 w-4 cursor-col-resize',
-		'touch-none select-none',
-		side === 'left' ? '-right-2' : '-left-2',
-		'before:absolute before:top-0 before:bottom-0 before:w-px',
-		'before:bg-neutral-500/0 hover:before:bg-neutral-500/30',
-		'before:transition-colors before:duration-150',
-		side === 'left'
-		? 'before:left-1/2'
-		: 'before:right-1/2',
-		resizing && 'before:bg-neutral-500/40')}/>
     </motion.div>)
-}
 
 export default SidebarComponent

frontend/src/components/users/UserSettingsProvider.tsx

@@ -0,0 +1,113 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+
+import { DEFAULT_USER_SETTINGS, fetchUserSettings } from '@/lib/settings'
+
+import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
+
+import type { User } from '@/types'
+import type { UserSettings } from '@/lib/settings'
+
+type ContextValue = {
+    loaded:       boolean
+    error:        string | null
+    settings:     UserSettings
+    setSettings:  Dispatch<SetStateAction<UserSettings>> }
+
+const UserSettingsContext = createContext<ContextValue | null> (null)
+
+
+const applyTheme = (theme: UserSettings['theme']) => {
+  const root = document.documentElement
+  const media = window.matchMedia ('(prefers-color-scheme: dark)')
+
+  const sync = () => {
+    const dark = theme === 'dark' || (theme === 'system' && media.matches)
+    root.classList.toggle ('dark', dark)
+    root.style.colorScheme = dark ? 'dark' : 'light'
+  }
+
+  sync ()
+
+  if (theme !== 'system')
+    return () => { }
+
+  const onChange = () => sync ()
+  media.addEventListener ('change', onChange)
+  return () => {
+    media.removeEventListener ('change', onChange)
+  }
+}
+
+
+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)
+
+  useEffect (() => {
+    let cancelled = false
+
+    if (!(user))
+      {
+	setError (null)
+	setSettings (DEFAULT_USER_SETTINGS)
+	setLoaded (true)
+	return
+      }
+
+    setLoaded (false)
+    setError (null)
+
+    void (async () => {
+      try
+      {
+	const next = await fetchUserSettings ()
+	if (!(cancelled))
+	  {
+	    setError (null)
+	    setSettings (next)
+	    setLoaded (true)
+	  }
+      }
+      catch
+      {
+	if (!(cancelled))
+	  {
+	    setError ('設定を読み込めませんでした．既定値で表示しています．')
+	    setSettings (DEFAULT_USER_SETTINGS)
+	    setLoaded (true)
+	  }
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [user])
+
+  useEffect (() => applyTheme (settings.theme), [settings.theme])
+
+  const value = useMemo<ContextValue> (() => ({
+      error,
+      loaded,
+      settings,
+      setSettings,
+  }), [error, loaded, settings])
+
+  return (
+      <UserSettingsContext.Provider value={value}>
+	{children}
+      </UserSettingsContext.Provider>)
+}
+
+
+export const useUserSettings = (): ContextValue => {
+  const value = useContext (UserSettingsContext)
+
+  if (value == null)
+    throw new Error ('UserSettingsProvider is missing')
+
+  return value
+}

frontend/src/index.css

@@ -87,6 +87,29 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+:root[data-font-size='small']
+{
+  font-size: 14px;
+}
+
+:root[data-font-size='normal']
+{
+  font-size: 16px;
+}
+
+:root[data-font-size='large']
+{
+  font-size: 18px;
+}
+
+:root[data-display-density='compact'] input,
+:root[data-display-density='compact'] textarea,
+:root[data-display-density='compact'] select,
+:root[data-display-density='compact'] button
+{
+  line-height: 1.25;
+}
+
 a
 {
   font-weight: 500;

frontend/src/lib/settings.ts

@@ -0,0 +1,282 @@
+import { apiGet, apiPatch } from '@/lib/api'
+
+import type { FetchPostsOrder, FetchTagsOrder } from '@/types'
+
+// DB-backed user settings. These are worth sharing across browsers for one user.
+export type UserSettings = {
+    theme:               'system' | 'light' | 'dark'
+    autoFetchTitle:      'auto' | 'manual' | 'off'
+    autoFetchThumbnail:  'auto' | 'manual' | 'off'
+    wikiEditorMode:      'split' | 'write' | 'preview' }
+
+export type TheatreLayoutMode = 'threeColumns' | 'tagsBottom' | 'commentsBottom'
+export type TheatreTagFlow = 'vertical' | 'horizontal'
+export type GekanatorBackgroundMotionMode = 'on' | 'calm' | 'off'
+export type ClientPaneBreakpoint = 'desktop' | 'tablet'
+export type ClientListKey = 'postList' | 'postSearch' | 'tagList'
+export type ClientListLimit = 20 | 50 | 100
+
+type ClientPaneSettings = {
+    widthPxByBreakpoint?: Partial<Record<ClientPaneBreakpoint, number>>
+    collapsed?:           boolean }
+
+type ClientListSettings = {
+    limit?: ClientListLimit
+    order?: string }
+
+// Browser-local settings. These depend on device or screen context.
+export type ClientSettings = {
+    panes?:          Record<string, ClientPaneSettings>
+    lists?:          Partial<Record<ClientListKey, ClientListSettings>>
+    theatre?:        {
+	layoutMode?: TheatreLayoutMode
+	tagFlow?:    TheatreTagFlow
+    }
+    gekanator?:     {
+	backgroundMotion?: GekanatorBackgroundMotionMode
+    }
+    reducedMotion?: string
+    embedAutoLoad?: string
+    thumbnailMode?: string }
+
+export const CLIENT_SETTINGS_STORAGE_KEY = 'btrc_hub.client_settings'
+export const DEFAULT_USER_SETTINGS: UserSettings = {
+    theme:               'system',
+    autoFetchTitle:      'manual',
+    autoFetchThumbnail:  'manual',
+    wikiEditorMode:      'split' }
+
+export const THEME_OPTIONS = ['system', 'light', 'dark'] as const
+export const AUTO_FETCH_OPTIONS = ['auto', 'manual', 'off'] as const
+export const WIKI_EDITOR_MODE_OPTIONS = ['split', 'write', 'preview'] as const
+export const LIST_LIMIT_OPTIONS = [20, 50, 100] as const
+export const POST_LIST_ORDER_OPTIONS = [
+    'title:asc',
+    'title:desc',
+    'url:asc',
+    'url:desc',
+    'original_created_at:asc',
+    'original_created_at:desc',
+    'created_at:asc',
+    'created_at:desc',
+    'updated_at:asc',
+    'updated_at:desc',
+] as const satisfies readonly FetchPostsOrder[]
+export const TAG_LIST_ORDER_OPTIONS = [
+    'name:asc',
+    'name:desc',
+    'category:asc',
+    'category:desc',
+    'post_count:asc',
+    'post_count:desc',
+    'created_at:asc',
+    'created_at:desc',
+    'updated_at:asc',
+    'updated_at:desc',
+] as const satisfies readonly FetchTagsOrder[]
+export const DEFAULT_POST_LIST_LIMIT: ClientListLimit = 20
+export const DEFAULT_POST_LIST_ORDER: FetchPostsOrder = 'original_created_at:desc'
+export const DEFAULT_TAG_LIST_ORDER: FetchTagsOrder = 'name:asc'
+
+const LEGACY_THEATRE_LAYOUT_STORAGE_KEY = 'theatre-layout-mode'
+const LEGACY_THEATRE_TAG_FLOW_STORAGE_KEY = 'theatre-tag-flow'
+const LEGACY_GEKANATOR_BACKGROUND_MOTION_STORAGE_KEY =
+    'gekanator:background-motion:v1'
+
+
+export const fetchUserSettings = async (): Promise<UserSettings> =>
+    await apiGet<UserSettings> ('/users/settings')
+
+
+export const updateUserSettings = async (
+    settings: Partial<{
+	theme:                 UserSettings['theme']
+	auto_fetch_title:      UserSettings['autoFetchTitle']
+	auto_fetch_thumbnail:  UserSettings['autoFetchThumbnail']
+	wiki_editor_mode:      UserSettings['wikiEditorMode']
+    }>,
+): Promise<UserSettings> => await apiPatch<UserSettings> ('/users/settings', settings)
+
+
+const safeParseClientSettings = (raw: string | null): ClientSettings => {
+  if (!(raw))
+    return { }
+
+  try
+  {
+    const parsed = JSON.parse (raw)
+    return parsed && typeof parsed === 'object' ? parsed as ClientSettings : { }
+  }
+  catch
+  {
+    return { }
+  }
+}
+
+
+export const loadClientSettings = (): ClientSettings =>
+    safeParseClientSettings (localStorage.getItem (CLIENT_SETTINGS_STORAGE_KEY))
+
+
+export const saveClientSettings = (settings: ClientSettings): void => {
+  localStorage.setItem (CLIENT_SETTINGS_STORAGE_KEY, JSON.stringify (settings))
+}
+
+
+export const updateClientSettings = (
+    updater: (settings: ClientSettings) => ClientSettings,
+): ClientSettings => {
+  const next = updater (loadClientSettings ())
+  saveClientSettings (next)
+  return next
+}
+
+
+const validListLimit = (value: unknown): ClientListLimit | null =>
+    value === 20 || value === 50 || value === 100 ? value : null
+
+
+export const getClientListLimit = (
+    listKey: ClientListKey,
+): ClientListLimit | null => {
+  const value = loadClientSettings ().lists?.[listKey]?.limit
+  return validListLimit (value)
+}
+
+
+export const getClientListOrder = <T extends string>(
+    listKey: ClientListKey,
+): T | null => {
+  const value = loadClientSettings ().lists?.[listKey]?.order
+  return typeof value === 'string' ? value as T : null
+}
+
+
+export const setClientListSettings = (
+    listKey: ClientListKey,
+    { limit, order }: { limit?: ClientListLimit
+			order?: string },
+): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      lists: {
+	  ...(settings.lists ?? { }),
+	  [listKey]: {
+	      ...(settings.lists?.[listKey] ?? { }),
+	      ...(limit == null ? { } : { limit }),
+	      ...(order == null ? { } : { order }),
+	  },
+      },
+  }))
+}
+
+
+const legacyTheatreLayoutMode = (): TheatreLayoutMode | null => {
+  const value = localStorage.getItem (LEGACY_THEATRE_LAYOUT_STORAGE_KEY)
+  return (
+      value === 'threeColumns'
+      || value === 'tagsBottom'
+      || value === 'commentsBottom'
+  ) ? value : null
+}
+
+
+const legacyTheatreTagFlow = (): TheatreTagFlow | null => {
+  const value = localStorage.getItem (LEGACY_THEATRE_TAG_FLOW_STORAGE_KEY)
+  return (value === 'vertical' || value === 'horizontal') ? value : null
+}
+
+
+const legacyGekanatorBackgroundMotion = (): GekanatorBackgroundMotionMode | null => {
+  const value = localStorage.getItem (LEGACY_GEKANATOR_BACKGROUND_MOTION_STORAGE_KEY)
+  return (value === 'on' || value === 'calm' || value === 'off') ? value : null
+}
+
+
+export const getClientTheatreLayoutMode = (): TheatreLayoutMode =>
+    loadClientSettings ().theatre?.layoutMode
+    ?? legacyTheatreLayoutMode ()
+    ?? 'threeColumns'
+
+
+export const setClientTheatreLayoutMode = (layoutMode: TheatreLayoutMode): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      theatre: { ...(settings.theatre ?? { }), layoutMode } }))
+}
+
+
+export const getClientTheatreTagFlow = (): TheatreTagFlow =>
+    loadClientSettings ().theatre?.tagFlow
+    ?? legacyTheatreTagFlow ()
+    ?? 'vertical'
+
+
+export const setClientTheatreTagFlow = (tagFlow: TheatreTagFlow): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      theatre: { ...(settings.theatre ?? { }), tagFlow } }))
+}
+
+
+export const getClientGekanatorBackgroundMotion =
+    (): GekanatorBackgroundMotionMode =>
+	loadClientSettings ().gekanator?.backgroundMotion
+	?? legacyGekanatorBackgroundMotion ()
+	?? 'on'
+
+
+export const setClientGekanatorBackgroundMotion = (
+    backgroundMotion: GekanatorBackgroundMotionMode,
+): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      gekanator: { ...(settings.gekanator ?? { }), backgroundMotion } }))
+}
+
+
+export const getClientPaneWidthPx = (
+    paneKey:      string,
+    breakpoint:   ClientPaneBreakpoint,
+): number | null => {
+  const value = loadClientSettings ().panes?.[paneKey]?.widthPxByBreakpoint?.[breakpoint]
+  return typeof value === 'number' ? value : null
+}
+
+
+export const setClientPaneWidthPx = (
+    paneKey:      string,
+    breakpoint:   ClientPaneBreakpoint,
+    widthPx:      number,
+): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      panes: {
+	  ...(settings.panes ?? { }),
+	  [paneKey]: {
+	      ...(settings.panes?.[paneKey] ?? { }),
+	      widthPxByBreakpoint: {
+		  ...(settings.panes?.[paneKey]?.widthPxByBreakpoint ?? { }),
+		  [breakpoint]: widthPx,
+	      },
+	  },
+      },
+  }))
+}
+
+
+export const setClientPaneCollapsed = (
+    paneKey:      string,
+    collapsed:    boolean,
+): void => {
+  updateClientSettings (settings => ({
+      ...settings,
+      panes: {
+	  ...(settings.panes ?? { }),
+	  [paneKey]: {
+	      ...(settings.panes?.[paneKey] ?? { }),
+	      collapsed,
+	  },
+      },
+  }))
+}

frontend/src/pages/GekanatorPage.tsx

@@ -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)
+    return getClientGekanatorBackgroundMotion ()
-    if (raw === 'off' || raw === 'calm' || raw === 'on')
-      return raw
-
-    return fallbackMode
   }
   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
     {

frontend/src/pages/materials/MaterialBasePage.tsx

@@ -6,9 +6,7 @@ import type { FC } from 'react'
 
 
 const MaterialBasePage: FC = () => (
-    <div
+    <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
-	data-sidebar-container
-	className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
       <MaterialSidebar/>
       <Outlet/>
     </div>)

frontend/src/pages/posts/PostDetailPage.tsx

@@ -92,16 +92,16 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		       : 'bg-gray-500 hover:bg-gray-600')
 
   return (
-      <div
+      <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
-	  data-sidebar-container
-	  className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
 	<Helmet>
 	  {(post?.thumbnail || post?.thumbnailBase) && (
 	      <meta name="thumbnail" content={post.thumbnail! || post.thumbnailBase!}/>)}
 	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
 	</Helmet>
 
-	{post && <TagDetailSidebar post={post} className="hidden md:block"/>}
+	<div className="hidden md:block">
+	  {post && <TagDetailSidebar post={post}/>}
+	</div>
 
 	<MainArea className="relative">
 	  {post
@@ -179,7 +179,9 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 	   : 'Loading...'}
 	</MainArea>
 
-	{post && <TagDetailSidebar post={post} sp className="md:hidden"/>}
+	<div className="md:hidden">
+	  {post && <TagDetailSidebar post={post} sp/>}
+	</div>
       </div>)
 }
 

frontend/src/pages/posts/PostListPage.tsx

@@ -1,23 +1,57 @@
 import { useQuery } from '@tanstack/react-query'
-import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import PostList from '@/components/PostList'
 import PrefetchLink from '@/components/PrefetchLink'
 import TagSidebar from '@/components/TagSidebar'
 import WikiBody from '@/components/WikiBody'
+import FormField from '@/components/common/FormField'
 import Pagination from '@/components/common/Pagination'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
+import {
+    DEFAULT_POST_LIST_LIMIT,
+    DEFAULT_POST_LIST_ORDER,
+    getClientListLimit,
+    getClientListOrder,
+    LIST_LIMIT_OPTIONS,
+    POST_LIST_ORDER_OPTIONS,
+    setClientListSettings,
+} from '@/lib/settings'
+import { inputClass } from '@/lib/utils'
 import { fetchWikiPageByTitle } from '@/lib/wiki'
 
 import type { FC } from 'react'
 
-import type { WikiPage } from '@/types'
+import type { FetchPostsOrder, WikiPage } from '@/types'
+
+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 PostListPage: FC = () => {
@@ -26,6 +60,7 @@ const PostListPage: FC = () => {
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
 
   const location = useLocation ()
+  const navigate = useNavigate ()
   const query = new URLSearchParams (location.search)
   const tagsQuery = query.get ('tags') ?? ''
   const anyFlg = query.get ('match') === 'any'
@@ -33,13 +68,22 @@ 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 = (
+      parseLimit (query.get ('limit'))
+      ?? getClientListLimit ('postList')
+      ?? DEFAULT_POST_LIST_LIMIT
+  )
+  const order = (
+      parseOrder (query.get ('order'))
+      ?? getClientListOrder<FetchPostsOrder> ('postList')
+      ?? DEFAULT_POST_LIST_ORDER
+  )
 
   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) })
@@ -47,6 +91,19 @@ const PostListPage: FC = () => {
   const cursor = ''
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
+  useEffect (() => {
+    setClientListSettings ('postList', { limit, order })
+  }, [limit, order])
+
+  const updateListQuery = (next: { limit?: 20 | 50 | 100
+				   order?: FetchPostsOrder }) => {
+    const params = new URLSearchParams (location.search)
+    params.set ('limit', String (next.limit ?? limit))
+    params.set ('order', next.order ?? order)
+    params.set ('page', '1')
+    navigate (`${ location.pathname }?${ params.toString () }`)
+  }
+
   useLayoutEffect (() => {
     scroll (0, 0)
 
@@ -70,7 +127,6 @@ const PostListPage: FC = () => {
 
   return (
       <div
-	  data-sidebar-container
 	  className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden"
 	  ref={containerRef}>
 	<Helmet>
@@ -90,6 +146,38 @@ const PostListPage: FC = () => {
 	}}/>
 
 	<MainArea>
+	  <div className="mb-4 flex flex-wrap gap-4 rounded-xl border border-border bg-background/80 p-4">
+	    <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>
+
 	  <TabGroup>
 	    <Tab name="広場">
 	      {posts.length > 0

frontend/src/pages/posts/PostNewPage.tsx

@@ -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,17 +43,22 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const [parentPostIds, setParentPostIds] = useState ('')
   const [tags, setTags] = useState ('')
   const [duration, setDuration] = useState ('')
-  const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
   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 [titleLoading, setTitleLoading] = useState (false)
   const [url, setURL] = useState ('')
+  const [titleAutoFlg, setTitleAutoFlg] = useState (settings.autoFetchTitle === 'auto')
+  const [thumbnailAutoFlg, setThumbnailAutoFlg] =
+      useState (settings.autoFetchThumbnail === 'auto')
 
   const previousURLRef = useRef ('')
   const thumbnailPreviewRef = useRef ('')
+  const titleFetchMode = settings.autoFetchTitle
+  const thumbnailFetchMode = settings.autoFetchThumbnail
+  const titleFetchVisible = titleFetchMode !== 'off'
+  const thumbnailFetchVisible = thumbnailFetchMode !== 'off'
   const videoFlg =
       useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
                [tags])
@@ -100,9 +107,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 () => {
@@ -111,6 +124,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)
@@ -118,13 +133,25 @@ 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 ()
@@ -161,14 +188,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}
@@ -176,19 +198,68 @@ const PostNewPage: FC<Props> = ({ user }) => {
 			 value={title}
 			 placeholder={titleLoading ? 'Loading...' : ''}
 			 onChange={ev => setTitle (ev.target.value)}
-		       disabled={titleAutoFlg}/>)}
+			 disabled={titleLoading}/>
+		  <div className="flex flex-wrap items-center gap-2 text-sm">
+		    <span>
+		      {titleAutoFlg
+		       ? 'URL 入力時に自動取得します．'
+		       : titleFetchMode === 'manual'
+			 ? '自動取得しません．必要なら手動で取得できます．'
+		       : '取得機能は無効です．'}
+		    </span>
+		    {titleFetchVisible && (
+			<>
+			  <label className="flex items-center gap-1">
+			    <input
+				type="checkbox"
+				checked={titleAutoFlg}
+				onChange={ev => setTitleAutoFlg (ev.target.checked)}/>
+			    <span>自動</span>
+			  </label>
+			  {!(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 && (
+			<>
+			  <label className="flex items-center gap-1">
+			    <input
+				type="checkbox"
+				checked={thumbnailAutoFlg}
+				onChange={ev => setThumbnailAutoFlg (ev.target.checked)}/>
+			    <span>自動</span>
+			  </label>
+			  {!(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

@@ -16,6 +16,15 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
+import {
+    DEFAULT_POST_LIST_LIMIT,
+    DEFAULT_POST_LIST_ORDER,
+    getClientListLimit,
+    getClientListOrder,
+    LIST_LIMIT_OPTIONS,
+    POST_LIST_ORDER_OPTIONS,
+    setClientListSettings,
+} from '@/lib/settings'
 import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
@@ -31,6 +40,29 @@ 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 PostSearchPage: FC = () => {
   const location = useLocation ()
@@ -41,7 +73,11 @@ const PostSearchPage: FC = () => {
 			 [location.search])
 
   const page = Number (query.get ('page') ?? 1)
-  const limit = Number (query.get ('limit') ?? 20)
+  const limit = (
+      parseLimit (query.get ('limit'))
+      ?? getClientListLimit ('postSearch')
+      ?? DEFAULT_POST_LIST_LIMIT
+  )
 
   const qURL = query.get ('url') ?? ''
   const qTitle = query.get ('title') ?? ''
@@ -53,7 +89,11 @@ 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 = (
+      parseOrder (query.get ('order'))
+      ?? getClientListOrder<FetchPostsOrder> ('postSearch')
+      ?? DEFAULT_POST_LIST_ORDER
+  )
 
   const [createdFrom, setCreatedFrom] = useState<string | null> (null)
   const [createdTo, setCreatedTo] = useState<string | null> (null)
@@ -83,6 +123,10 @@ const PostSearchPage: FC = () => {
   const results = data?.posts ?? []
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
+  useEffect (() => {
+    setClientListSettings ('postSearch', { limit, order })
+  }, [limit, order])
+
   useEffect (() => {
     setURL (qURL ?? '')
     setTitle (qTitle ?? '')
@@ -113,6 +157,16 @@ const PostSearchPage: FC = () => {
     qs.set ('match', matchType)
     qs.set ('page', '1')
     qs.set ('order', order)
+    qs.set ('limit', String (limit))
+    navigate (`${ location.pathname }?${ qs.toString () }`)
+  }
+
+  const updateListQuery = (next: { limit?: 20 | 50 | 100
+				   order?: FetchPostsOrder }) => {
+    const qs = new URLSearchParams (location.search)
+    qs.set ('limit', String (next.limit ?? limit))
+    qs.set ('order', next.order ?? order)
+    qs.set ('page', '1')
     navigate (`${ location.pathname }?${ qs.toString () }`)
   }
 
@@ -137,6 +191,38 @@ const PostSearchPage: FC = () => {
 	  <PageTitle>広場検索</PageTitle>
 
 	  <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 }) => (
@@ -161,6 +247,7 @@ const PostSearchPage: FC = () => {
 	    <FormField label="タグ">
 	      {() => (
 		  <TagInput
+		      includeNico={true}
 		      value={tagsStr}
 		      setValue={setTagsStr}/>)}
 	    </FormField>
@@ -296,7 +383,9 @@ const PostSearchPage: FC = () => {
 		  </thead>
 		  <tbody>
 		    {results.map (row => (
-			<tr key={row.id} className="even:bg-gray-100 dark:even:bg-gray-700">
+			<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 || undefined}>
 			      <motion.div

frontend/src/pages/tags/TagListPage.tsx

@@ -14,6 +14,15 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { tagsKeys } from '@/lib/queryKeys'
+import {
+    DEFAULT_POST_LIST_LIMIT,
+    DEFAULT_TAG_LIST_ORDER,
+    getClientListLimit,
+    getClientListOrder,
+    LIST_LIMIT_OPTIONS,
+    setClientListSettings,
+    TAG_LIST_ORDER_OPTIONS,
+} from '@/lib/settings'
 import { fetchTags } from '@/lib/tags'
 import { dateString, inputClass } from '@/lib/utils'
 
@@ -35,6 +44,29 @@ const boolFromQuery = (value: string | null): boolean =>
 
 const tagStateLabel = (deprecatedAt: string | null) => deprecatedAt ? '廃止' : ''
 
+const tagOrderLabel: Record<FetchTagsOrder, string> = {
+    'name:asc': '名前昇順',
+    'name:desc': '名前降順',
+    'category:asc': 'カテゴリ昇順',
+    'category:desc': 'カテゴリ降順',
+    'post_count:asc': '件数昇順',
+    'post_count: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): FetchTagsOrder | null =>
+    TAG_LIST_ORDER_OPTIONS.some (option => option === value)
+    ? value as FetchTagsOrder
+    : null
+
 
 const TagListPage: FC = () => {
   const location = useLocation ()
@@ -44,7 +76,11 @@ const TagListPage: FC = () => {
   const query = useMemo (() => new URLSearchParams (location.search), [location.search])
 
   const page = Number (query.get ('page') ?? 1)
-  const limit = Number (query.get ('limit') ?? 20)
+  const limit = (
+      parseLimit (query.get ('limit'))
+      ?? getClientListLimit ('tagList')
+      ?? DEFAULT_POST_LIST_LIMIT
+  )
 
   const qName = query.get ('name') ?? ''
   const qCategory = (query.get ('category') || null) as Category | null
@@ -58,7 +94,11 @@ const TagListPage: FC = () => {
   const qDeprecated = query.has ('deprecated')
       ? boolFromQuery (query.get ('deprecated'))
       : null
-  const order = (query.get ('order') || 'post_count:desc') as FetchTagsOrder
+  const order = (
+      parseOrder (query.get ('order'))
+      ?? getClientListOrder<FetchTagsOrder> ('tagList')
+      ?? DEFAULT_TAG_LIST_ORDER
+  )
 
   const [name, setName] = useState ('')
   const [category, setCategory] = useState<Category | null> (null)
@@ -88,6 +128,10 @@ const TagListPage: FC = () => {
   const results = data?.tags ?? []
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
+  useEffect (() => {
+    setClientListSettings ('tagList', { limit, order })
+  }, [limit, order])
+
   useEffect (() => {
     setName (qName)
     setCategory (qCategory)
@@ -121,10 +165,20 @@ const TagListPage: FC = () => {
       qs.set ('deprecated', deprecated ? '1' : '0')
     qs.set ('page', '1')
     qs.set ('order', order)
+    qs.set ('limit', String (limit))
 
     navigate (`${ location.pathname }?${ qs.toString () }`)
   }
 
+  const updateListQuery = (next: { limit?: 20 | 50 | 100
+				   order?: FetchTagsOrder }) => {
+    const qs = new URLSearchParams (location.search)
+    qs.set ('limit', String (next.limit ?? limit))
+    qs.set ('order', next.order ?? order)
+    qs.set ('page', '1')
+    navigate (`${ location.pathname }?${ qs.toString () }`)
+  }
+
   const defaultDirection = { name: 'asc',
 			     category: 'asc',
 			     post_count: 'desc',
@@ -141,6 +195,38 @@ const TagListPage: FC = () => {
 	  <PageTitle>タグ</PageTitle>
 
 	  <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
+			value={limit}
+			onChange={ev => updateListQuery ({
+			    limit: Number (ev.target.value) as 20 | 50 | 100,
+			})}
+			className={inputClass (false)}>
+		      {LIST_LIMIT_OPTIONS.map (value => (
+			  <option key={value} value={value}>
+			    {value} 件
+			  </option>))}
+		    </select>)}
+	      </FormField>
+
+	      <FormField label="並び順">
+		{() => (
+		    <select
+			value={order}
+			onChange={ev => updateListQuery ({
+			    order: ev.target.value as FetchTagsOrder,
+			})}
+			className={inputClass (false)}>
+		      {TAG_LIST_ORDER_OPTIONS.map (value => (
+			  <option key={value} value={value}>
+			    {tagOrderLabel[value]}
+			  </option>))}
+		    </select>)}
+	      </FormField>
+	    </div>
+
 	    {/* 名前 */}
 	    <FormField label="名前">
 	      {({ invalid }) => (

frontend/src/pages/theatres/TheatreDetailPage.test.tsx

@@ -105,20 +105,6 @@ const tagSection = (): HTMLElement =>
   screen.getAllByRole ('heading', { name: 'タグ' })[0].closest ('section')!
 
 const mockDefaultApi = () => {
-  let commentsFetched = false
-  let currentTheatreInfo = buildTheatreInfo ({
-    postId:        currentPost.id,
-    postStartedAt: '2026-01-02T03:04:05.000Z',
-    postElapsedMs: 1_000,
-    watchingUsers,
-    skipVote:      {
-      votesCount:         0,
-      requiredCount:      2,
-      watchingUsersCount: watchingUsers.length,
-      voted:              false,
-    },
-  })
-
   api.apiGet.mockImplementation ((path: string) => {
     switch (path)
     {
@@ -126,10 +112,6 @@ const mockDefaultApi = () => {
       return Promise.resolve (theatre)
 
     case '/theatres/7/comments':
-      if (commentsFetched)
-	return Promise.resolve ([])
-
-      commentsFetched = true
       return Promise.resolve ([
         buildTheatreComment ({
           theatreId: 7,
@@ -154,10 +136,21 @@ const mockDefaultApi = () => {
     switch (path)
     {
     case '/theatres/7/watching':
-      return Promise.resolve (currentTheatreInfo)
+      return Promise.resolve (buildTheatreInfo ({
+        postId:        currentPost.id,
+        postStartedAt: '2026-01-02T03:04:05.000Z',
+        postElapsedMs: 1_000,
+        watchingUsers,
+        skipVote:      {
+          votesCount:         0,
+          requiredCount:      2,
+          watchingUsersCount: watchingUsers.length,
+          voted:              false,
+        },
+      }))
 
     case '/theatres/7/skip_vote':
-      currentTheatreInfo = buildTheatreInfo ({
+      return Promise.resolve (buildTheatreInfo ({
         postId:        currentPost.id,
         postStartedAt: '2026-01-02T03:04:05.000Z',
         postElapsedMs: 2_000,
@@ -168,8 +161,7 @@ const mockDefaultApi = () => {
           watchingUsersCount: watchingUsers.length,
           voted:              true,
         },
-      })
+      }))
-      return Promise.resolve (currentTheatreInfo)
 
     default:
       return Promise.reject (new Error (`Unexpected PUT ${ path }`))

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -10,12 +10,17 @@ import PrefetchLink from '@/components/PrefetchLink'
 import TagLink from '@/components/TagLink'
 import FieldError from '@/components/common/FieldError'
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
-import SidebarComponent from '@/components/layout/SidebarComponent'
 import { Button } from '@/components/ui/button'
 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'
@@ -51,11 +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 MIN_MAIN_WIDTH = 360
-const SIDEBAR_GAP_WIDTH = 16
-
 const LAYOUT_LABELS: Record<TheatreLayoutMode, string> = {
     threeColumns:   '3 列',
     tagsBottom:     '2 列 A 型',
@@ -214,16 +214,11 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
   const commentsRef = useRef<HTMLDivElement> (null)
   const embedRef = useRef<NiconicoViewerHandle> (null)
   const loadingRef = useRef (false)
-  const sidebarContainerRef = useRef<HTMLDivElement> (null)
   const theatreInfoRef = useRef<TheatreInfo> (INITIAL_THEATRE_INFO)
   const theatreInfoReceivedAtRef = useRef (performance.now ())
   const videoLengthRef = useRef (0)
   const lastCommentNoRef = useRef (0)
 
-  const [leftSidebarWidth, setLeftSidebarWidth] = useState (256)
-  const [rightSidebarWidth, setRightSidebarWidth] = useState (256)
-  const [sidebarContainerWidth, setSidebarContainerWidth] = useState (
-      () => typeof window === 'undefined' ? 0 : window.innerWidth)
   const [comments, setComments] = useState<TheatreComment[]> ([])
   const [content, setContent] = useState ('')
   const [editingPost, setEditingPost] = useState<Post | null> (null)
@@ -236,37 +231,24 @@ 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 [layoutMode, setLayoutMode] =
-    const stored = localStorage.getItem (LAYOUT_STORAGE_KEY)
+      useState<TheatreLayoutMode> (() => getClientTheatreLayoutMode ())
-    return (
+  const [tagFlow, setTagFlow] = useState<TagFlow> (() => getClientTheatreTagFlow ())
-	((['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 { 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) => {
     theatreInfoReceivedAtRef.current = performance.now ()
-    theatreInfoRef.current = nextInfo
     setTheatreInfo (nextInfo)
   }, [])
 
@@ -333,17 +315,6 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     lastCommentNoRef.current = comments[0]?.no ?? 0
   }, [comments])
 
-  useEffect (() => {
-    const updateSidebarContainerWidth = () => {
-      const nextWidth = sidebarContainerRef.current?.clientWidth ?? window.innerWidth
-      setSidebarContainerWidth (nextWidth)
-    }
-
-    updateSidebarContainerWidth ()
-    window.addEventListener ('resize', updateSidebarContainerWidth)
-    return () => window.removeEventListener ('resize', updateSidebarContainerWidth)
-  }, [])
-
   useEffect (() => {
     if (!(id))
       return
@@ -407,9 +378,6 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	    setComments (prev => [...newComments, ...prev])
 	  }
 
-	if (loadingRef.current)
-	  return
-
 	const currentInfo = theatreInfoRef.current
 	const ended =
 	    currentInfo.hostFlg
@@ -431,9 +399,8 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	    return
 	  }
 
-	const watchingRequestedAt = performance.now ()
 	const nextInfo = await apiPut<TheatreInfo> (`/theatres/${ id }/watching`)
-	if (!(cancelled) && watchingRequestedAt >= theatreInfoReceivedAtRef.current)
+	if (!(cancelled))
 	  applyTheatreInfo (nextInfo)
       }
       catch (error)
@@ -562,7 +529,6 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     if (!(id) || !(post))
       return
 
-    loadingRef.current = true
     setLoading (true)
     try
     {
@@ -591,7 +557,6 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     }
     finally
     {
-      loadingRef.current = false
       setLoading (false)
     }
   }
@@ -665,26 +630,6 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
   if (status >= 400)
     return <ErrorScreen status={status}/>
 
-  const singleSidebarMaxWidth = Math.max (
-      192,
-      sidebarContainerWidth - MIN_MAIN_WIDTH - SIDEBAR_GAP_WIDTH)
-  const leftSidebarMaxWidth = layoutMode === 'threeColumns'
-			      ? Math.max (
-				  192,
-				  sidebarContainerWidth
-				  - rightSidebarWidth
-				  - MIN_MAIN_WIDTH
-				  - SIDEBAR_GAP_WIDTH * 2)
-			      : singleSidebarMaxWidth
-  const rightSidebarMaxWidth = layoutMode === 'threeColumns'
-			       ? Math.max (
-				   192,
-				   sidebarContainerWidth
-				   - leftSidebarWidth
-				   - MIN_MAIN_WIDTH
-				   - SIDEBAR_GAP_WIDTH * 2)
-			       : singleSidebarMaxWidth
-
   const tagPanel = (
       <section className="rounded border-zinc-300 p-4 dark:border-zinc-800">
 	<div className="mb-3 flex items-center justify-between gap-3">
@@ -852,26 +797,30 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	  {theatre && <title>{`${ theatreTitle } | ${ SITE_TITLE }`}</title>}
 	</Helmet>
 
-	<div
+	<div className={cn (
-	    ref={sidebarContainerRef}
+	    'grid min-h-full gap-4 overflow-visible md:h-full md:overflow-hidden',
-	    data-sidebar-container
+	    (layoutMode === 'threeColumns'
-	    className="flex min-h-full flex-col gap-4 overflow-visible md:h-full md:flex-row
+	     && ['md:grid-cols-[16rem_minmax(0,1fr)_22rem]',
-		       md:overflow-hidden">
+		 'xl:grid-cols-[18rem_minmax(0,1fr)_24rem]']),
+	    (layoutMode === 'tagsBottom'
+	     && 'md:grid-cols-[minmax(0,1fr)_22rem] xl:grid-cols-[minmax(0,1fr)_24rem]'),
+	    (layoutMode === 'commentsBottom'
+	     && 'md:grid-cols-[16rem_minmax(0,1fr)] xl:grid-cols-[18rem_minmax(0,1fr)]'))}>
 	  {layoutMode !== 'tagsBottom' && (
-	      <SidebarComponent
+	      <motion.aside
-		  sidebarKey="theatre-tags"
+		  layout="position"
-		  side="left"
+		  className="hidden min-w-0 space-y-4 md:order-none md:block md:overflow-y-auto
-		  maxWidth={leftSidebarMaxWidth}
+			     md:[direction:rtl]">
-		  onWidthChange={setLeftSidebarWidth}
+		<div className="md:[direction:ltr]">
-		  className="hidden md:block">
 		  {tagPanel}
-	      </SidebarComponent>)}
+		</div>
+	      </motion.aside>)}
 
 	  <motion.main
 	      layout="position"
-	      className="order-1 min-w-0 flex-1 space-y-4 md:order-none
+	      className={cn ('order-1 min-w-0 space-y-4 md:order-none md:overflow-y-auto',
-			 md:min-w-[360px] md:overflow-y-auto">
+			     layoutMode === 'tagsBottom' && 'md:[direction:rtl]')}>
-	    <div className="space-y-4">
+	    <div className={cn ('space-y-4', layoutMode === 'tagsBottom' && 'md:[direction:ltr]')}>
 	      <section className="overflow-hidden rounded border-zinc-300
 				  dark:border-zinc-800">
 		<div className="flex flex-wrap items-center justify-between gap-3
@@ -1007,17 +956,12 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	  </motion.main>
 
 	  {layoutMode !== 'commentsBottom' && (
-	      <SidebarComponent
+	      <motion.aside
-		  sidebarKey="theatre-comments"
+		  layout="position"
-		  side="right"
+		  className="hidden min-w-0 space-y-4 md:order-none md:block md:overflow-y-auto">
-		  maxWidth={rightSidebarMaxWidth}
-		  onWidthChange={setRightSidebarWidth}
-		  className="hidden md:block">
-		<div className="space-y-4">
 		{commentsPanel}
 		{participantsPanel}
-		</div>
+	      </motion.aside>)}
-	      </SidebarComponent>)}
 	</div>
       </motion.div>)
 }

frontend/src/pages/users/SettingPage.tsx

@@ -1,43 +1,475 @@
-import type { FC } 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'
 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 { inputClass } from '@/lib/utils'
+import {
+    AUTO_FETCH_OPTIONS,
+    DEFAULT_USER_SETTINGS,
+    THEME_OPTIONS,
+    WIKI_EDITOR_MODE_OPTIONS,
+    updateUserSettings,
+} from '@/lib/settings'
+import { cn, 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'
+    | 'autoFetchTitle'
+    | 'autoFetchThumbnail'
+    | 'wikiEditorMode'
+
+type SettingsTab = 'account' | 'theme' | 'keyboard' | 'editing' | 'wiki'
+
+type TabSpec = {
+    id:     SettingsTab
+    label:  string }
+
+type NameFieldErrors = Partial<Record<UserFormField, string[]>>
+type SettingsFieldErrors = Partial<Record<SettingsFormField, string[]>>
+
+type SharedSectionProps = {
+    draftSettings:         UserSettings
+    name:                  string
+    nameBaseErrors:        string[]
+    nameFieldErrors:       NameFieldErrors
+    onDraftSettingsChange: Dispatch<SetStateAction<UserSettings>>
+    onInheritOpen:         () => void
+    onNameChange:          (value: string) => void
+    onSettingsSubmit:      () => void
+    onUserCodeOpen:        () => void
+    onUserSubmit:          () => void
+    settingsBaseErrors:    string[]
+    settingsFieldErrors:   SettingsFieldErrors
+    user:                  User }
+
+const sectionClassName =
+    'space-y-4 rounded-xl border border-border bg-background/80 p-4'
+
+const desktopTabRailClassName = [
+    'hidden md:flex md:justify-center',
+].join (' ')
+
+const desktopTabRailInnerClassName = [
+    'grid w-fit grid-cols-[12rem_minmax(0,36rem)] items-start gap-6',
+].join (' ')
+
+const tabs: TabSpec[] = [
+    { id: 'account', label: 'アカウント' },
+    { id: 'theme', label: 'テーマ' },
+    { id: 'keyboard', label: 'キーボード' },
+    { id: 'editing', label: '編輯支援' },
+    { id: 'wiki', label: 'Wiki' },
+]
+
+const settingsTabByField: Record<SettingsFormField, SettingsTab> = {
+    theme:               'theme',
+    autoFetchTitle:      'editing',
+    autoFetchThumbnail:  'editing',
+    wikiEditorMode:      'wiki',
+}
+
+const settingsFieldOrder: SettingsFormField[] = [
+    'theme',
+    'autoFetchTitle',
+    'autoFetchThumbnail',
+    'wikiEditorMode',
+]
+
+const themeLabel: Record<UserSettings['theme'], string> = {
+    system: 'システム設定に従う',
+    light:  'ライト・モード',
+    dark:   'ダーク・モード',
+}
+
+const autoFetchLabel: Record<UserSettings['autoFetchTitle'], string> = {
+    auto:   '自動',
+    manual: '手動',
+    off:    '無効',
+}
+
+const wikiEditorModeLabel: Record<UserSettings['wikiEditorMode'], string> = {
+    split:   '左右表示',
+    write:   '本文のみ',
+    preview: 'プレビューのみ',
+}
+
+const keyboardShortcutRows = [
+    { action: '投稿詳細を開く', key: 'Enter', scope: '一覧・検索結果', conflict: 'なし' },
+    { action: '候補タグを選ぶ', key: '↑ / ↓ / Enter', scope: 'タグ入力', conflict: 'なし' },
+    { action: '候補タグを閉ぢる', key: 'Escape', scope: 'タグ入力', conflict: 'なし' },
+]
+
+const themeColorTargets = [
+    '背景色',
+    '文字色',
+    '枠線色',
+    'リンク色',
+    '強調色',
+    '通常タグ',
+    'キャラタグ',
+    '素材タグ',
+    'Nico タグ',
+    '廃止タグ',
+    'Wiki ありタグ',
+    'Wiki 未作成タグ',
+    '選択中タグ',
+    'ホバー中タグ',
+]
+
+
+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 AccountSection: FC<SharedSectionProps> = ({
+    name,
+    nameBaseErrors,
+    nameFieldErrors,
+    onInheritOpen,
+    onNameChange,
+    onUserCodeOpen,
+    onUserSubmit,
+    user,
+}) => (
+    <section className={sectionClassName}>
+      <h2 className="text-xl font-bold">アカウント</h2>
+      <FieldError messages={nameBaseErrors}/>
+
+      <FormField label="表示名" messages={nameFieldErrors.name}>
+	{({ describedBy, invalid }) => (
+	    <>
+	      <input
+		  type="text"
+		  aria-describedby={describedBy}
+		  aria-invalid={invalid}
+		  className={inputClass (invalid)}
+		  value={name}
+		  placeholder="名もなきニジラー"
+		  onChange={ev => onNameChange (ev.target.value)}/>
+	      {!(user.name) && (
+		  <p className="mt-1 text-sm text-red-500">
+		    名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
+		  </p>)}
+	    </>)}
+      </FormField>
+
+      <div className="flex flex-wrap gap-2">
+	<Button type="button" onClick={onUserSubmit}>
+	  表示名を更新
+	</Button>
+      </div>
+
+      <div className="space-y-2">
+	<Label>引継ぎ</Label>
+	<div className="flex flex-wrap gap-2">
+	  <Button
+	      type="button"
+	      onClick={onUserCodeOpen}
+	      className="bg-gray-600 text-white"
+	      disabled={!(user)}>
+	    引継ぎコードを表示
+	  </Button>
+	  <Button
+	      type="button"
+	      onClick={onInheritOpen}
+	      className="bg-red-600 text-white"
+	      disabled={!(user)}>
+	    ほかのブラウザから引継ぐ
+	  </Button>
+	</div>
+      </div>
+    </section>)
+
+
+const ThemeSection: FC<SharedSectionProps> = ({
+    draftSettings,
+    onDraftSettingsChange,
+    onSettingsSubmit,
+    settingsBaseErrors,
+    settingsFieldErrors,
+}) => (
+    <section className={sectionClassName}>
+      <h2 className="text-xl font-bold">テーマ</h2>
+      <FieldError messages={settingsBaseErrors}/>
+
+      <FormField label="基本テーマ" messages={settingsFieldErrors.theme}>
+	{() => (
+	    <select
+		className={inputClass (Boolean (settingsFieldErrors.theme?.length))}
+		value={draftSettings.theme}
+		onChange={ev => onDraftSettingsChange (current => ({
+		    ...current,
+		    theme: ev.target.value as UserSettings['theme'],
+		}))}>
+	      {THEME_OPTIONS.map (value => (
+		  <option key={value} value={value}>
+		    {themeLabel[value]}
+		  </option>))}
+	    </select>)}
+      </FormField>
+
+      <div className="space-y-2 rounded-lg border border-border/70 bg-muted/30 p-3 text-sm">
+	<p className="font-medium">今後の拡張予定</p>
+	<p>
+	  将来は `themes` または `user_themes` を導入し，ユーザごとの
+	  カスタム・テーマを持てる構造にする前提です．
+	</p>
+	<p>その際は次の色を個別に設定できるようにします．</p>
+	<div className="flex flex-wrap gap-2">
+	  {themeColorTargets.map (target => (
+	      <span
+		  key={target}
+		  className="rounded-full border border-border/70 px-2 py-1">
+		{target}
+	      </span>))}
+	</div>
+      </div>
+
+      <Button type="button" onClick={onSettingsSubmit}>
+	設定を保存
+      </Button>
+    </section>)
+
+
+const KeyboardSection: FC = () => (
+    <section className={sectionClassName}>
+      <h2 className="text-xl font-bold">キーボード</h2>
+
+      <div className="space-y-2 rounded-lg border border-border/70 bg-muted/30 p-3 text-sm">
+	<p>
+	  初期実装では固定ショートカット一覧のみを表示します．
+	  将来は `action / key / scope / conflict` を持つ
+	  key bind 設定へ拡張する前提です．
+	</p>
+      </div>
+
+      <div className="overflow-x-auto">
+	<table className="w-full min-w-[28rem] table-fixed border-collapse text-sm">
+	  <thead className="border-b border-border">
+	    <tr>
+	      <th className="p-2 text-left">操作</th>
+	      <th className="p-2 text-left">キー</th>
+	      <th className="p-2 text-left">適用範囲</th>
+	      <th className="p-2 text-left">競合</th>
+	    </tr>
+	  </thead>
+	  <tbody>
+	    {keyboardShortcutRows.map (row => (
+		<tr key={row.action} className="border-b border-border/60 last:border-b-0">
+		  <td className="p-2">{row.action}</td>
+		  <td className="p-2 font-mono">{row.key}</td>
+		  <td className="p-2">{row.scope}</td>
+		  <td className="p-2">{row.conflict}</td>
+		</tr>))}
+	  </tbody>
+	</table>
+      </div>
+    </section>)
+
+
+const EditingSection: FC<SharedSectionProps> = ({
+    draftSettings,
+    onDraftSettingsChange,
+    onSettingsSubmit,
+    settingsBaseErrors,
+    settingsFieldErrors,
+}) => (
+    <section className={sectionClassName}>
+      <h2 className="text-xl font-bold">編輯支援</h2>
+      <FieldError messages={settingsBaseErrors}/>
+
+      <FormField label="タイトル自動取得" messages={settingsFieldErrors.autoFetchTitle}>
+	{() => (
+	    <select
+		className={inputClass (
+		    Boolean (settingsFieldErrors.autoFetchTitle?.length),
+		)}
+		value={draftSettings.autoFetchTitle}
+		onChange={ev => onDraftSettingsChange (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 => onDraftSettingsChange (current => ({
+		    ...current,
+		    autoFetchThumbnail:
+			ev.target.value as UserSettings['autoFetchThumbnail'],
+		}))}>
+	      {AUTO_FETCH_OPTIONS.map (value => (
+		  <option key={value} value={value}>
+		    {autoFetchLabel[value]}
+		  </option>))}
+	    </select>)}
+      </FormField>
+
+      <Button type="button" onClick={onSettingsSubmit}>
+	設定を保存
+      </Button>
+    </section>)
+
+
+const WikiSection: FC<SharedSectionProps> = ({
+    draftSettings,
+    onDraftSettingsChange,
+    onSettingsSubmit,
+    settingsBaseErrors,
+    settingsFieldErrors,
+}) => (
+    <section className={sectionClassName}>
+      <h2 className="text-xl font-bold">Wiki</h2>
+      <FieldError messages={settingsBaseErrors}/>
+
+      <FormField label="エディタ表示" messages={settingsFieldErrors.wikiEditorMode}>
+	{() => (
+	    <select
+		className={inputClass (
+		    Boolean (settingsFieldErrors.wikiEditorMode?.length),
+		)}
+		value={draftSettings.wikiEditorMode}
+		onChange={ev => onDraftSettingsChange (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>
+
+      <Button type="button" onClick={onSettingsSubmit}>
+	設定を保存
+      </Button>
+    </section>)
 
 
 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 { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+  const { error, loaded, settings, setSettings } = useUserSettings ()
-      useValidationErrors<UserFormField> ()
+  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 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),
+      theme: Boolean (settingsFieldErrors.theme?.length),
+      keyboard: false,
+      editing: (
+	  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
 
-    clearValidationErrors ()
+    clearNameValidationErrors ()
 
     const formData = new FormData
     formData.append ('name', name)
@@ -47,13 +479,35 @@ 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 }))
+      setUser (currentUser => ({ ...currentUser, ...data }))
-      toast ({ title: '設定を更新しました．' })
+      toast ({ title: '表示名を更新しました．' })
     }
-    catch (e)
+    catch (submitError)
     {
-      applyValidationError (e)
+      applyNameValidationError (submitError)
-      toast ({ title: 'しっぱい……' })
+      toast ({ title: '表示名を更新できませんでした．' })
+    }
+  }
+
+  const handleSettingsSubmit = async () => {
+    clearSettingsValidationErrors ()
+
+    try
+    {
+      const data = await updateUserSettings ({
+	  theme: draftSettings.theme,
+	  auto_fetch_title: draftSettings.autoFetchTitle,
+	  auto_fetch_thumbnail: draftSettings.autoFetchThumbnail,
+	  wiki_editor_mode: draftSettings.wikiEditorMode,
+      })
+      setDraftSettings (data)
+      setSettings (data)
+      toast ({ title: '設定を保存しました．' })
+    }
+    catch (submitError)
+    {
+      applySettingsValidationError (submitError)
+      toast ({ title: '設定を保存できませんでした．' })
     }
   }
 
@@ -64,6 +518,39 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
     setName (user.name ?? '')
   }, [user])
 
+  useEffect (() => {
+    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])
+
+  const sectionProps: SharedSectionProps | null = user ? {
+      draftSettings,
+      name,
+      nameBaseErrors,
+      nameFieldErrors,
+      onDraftSettingsChange: setDraftSettings,
+      onInheritOpen: () => setInheritVsbl (true),
+      onNameChange: setName,
+      onSettingsSubmit: handleSettingsSubmit,
+      onUserCodeOpen: () => setUserCodeVsbl (true),
+      onUserSubmit: handleUserSubmit,
+      settingsBaseErrors,
+      settingsFieldErrors,
+      user,
+  } : null
+
   return (
       <MainArea>
 	<Helmet>
@@ -71,60 +558,82 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 	  <title>設定 | {SITE_TITLE}</title>
 	</Helmet>
 
-	<Form>
+	<div className="space-y-4 p-4">
+	  <div className="mx-auto max-w-xl space-y-4">
 	    <PageTitle>設定</PageTitle>
+	    <FieldError messages={error ? [error] : []}/>
+	  </div>
 
-	  {user ? (
+	  {user && loaded ? (
 	      <>
-		<FieldError messages={baseErrors}/>
+		<div className="mx-auto max-w-xl space-y-6 md:hidden">
-
+		  {sectionProps && (
-		{/* 名前 */}
-		<FormField label="表示名" messages={fieldErrors.name}>
-		  {({ describedBy, invalid }) => (
 		      <>
-		  <input type="text"
+			<AccountSection {...sectionProps}/>
-			 aria-describedby={describedBy}
+			<ThemeSection {...sectionProps}/>
-			 aria-invalid={invalid}
+			<KeyboardSection/>
-			 className={inputClass (invalid)}
+			<EditingSection {...sectionProps}/>
-			 value={name}
+			<WikiSection {...sectionProps}/>
-			 placeholder="名もなきニジラー"
-			 onChange={ev => setName (ev.target.value)}/>
-		  {(user && !(user.name)) && (
-		      <p className="mt-1 text-sm text-red-500">
-			名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
-		      </p>)}
 		      </>)}
-		</FormField>
+		</div>
 
-		{/* 送信 */}
+		<div className={desktopTabRailClassName}>
-		<Button onClick={handleSubmit}
+		  <div className={desktopTabRailInnerClassName}>
-			className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
+		    <div
-		  更新
+			role="tablist"
-		</Button>
+			aria-label="設定区分"
+			aria-orientation="vertical"
+			className="sticky top-4 flex h-fit flex-col 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-xl border px-4 py-3 text-left 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>
 
-		{/* 引継ぎ */}
+		    <div className="w-[36rem] max-w-full">
-		<div>
+		      {sectionProps && (
-		  <Label>引継ぎ</Label>
+			  <div
-		  <Button onClick={() => setUserCodeVsbl (true)}
+			      id={tabPanelId (activeTab)}
-			  className="px-4 py-2 bg-gray-600 text-white rounded disabled:bg-gray-400"
+			      role="tabpanel"
-			  disabled={!(user)}>
+			      aria-labelledby={tabButtonId (activeTab)}>
-		    引継ぎコードを表示
+			    {activeTab === 'account' && <AccountSection {...sectionProps}/>}
-		  </Button>
+			    {activeTab === 'theme' && <ThemeSection {...sectionProps}/>}
-		  <Button onClick={() => setInheritVsbl (true)}
+			    {activeTab === 'keyboard' && <KeyboardSection/>}
-			  className="ml-2 px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400"
+			    {activeTab === 'editing' && <EditingSection {...sectionProps}/>}
-			  disabled={!(user)}>
+			    {activeTab === 'wiki' && <WikiSection {...sectionProps}/>}
-		    ほかのブラウザから引継ぐ
+			  </div>)}
-		  </Button>
+		    </div>
+		  </div>
 		</div>
 	      </>) : 'Loading...'}
-	</Form>
+	</div>
 
-	<UserCodeDialogue visible={userCodeVsbl}
+	<UserCodeDialogue
+	    visible={userCodeVsbl}
 	    onVisibleChange={setUserCodeVsbl}
 	    user={user}
 	    setUser={setUser}/>
 
-	<InheritDialogue visible={inheritVsbl}
+	<InheritDialogue
+	    visible={inheritVsbl}
 	    onVisibleChange={setInheritVsbl}
 	    setUser={setUser}/>
       </MainArea>)

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -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>

frontend/src/pages/wiki/WikiNewPage.tsx

@@ -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>