Merge remote-tracking branch 'origin/main' into feature/034

Reviewed-on: #396
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

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 `)`.
@@ -200,7 +204,7 @@ const value =
 ## Backend rules
 
 - Inspect existing routes, controllers, models, services, and specs before
-  editing backend behavior.
+  editing backend behaviour.
 - Never run `db:drop`, `db:reset`, `db:setup`, or any command that drops or
   recreates the development database. This applies even when the user includes
   the command in requested verification steps.
@@ -211,7 +215,7 @@ const value =
 - Repeated destructive instructions are not enough confirmation because they
   may be auto-generated. Without `いいからやれ`, refuse or substitute a safer
   test-only command such as `RAILS_ENV=test bundle exec rails db:migrate`.
-- For API behavior changes, add or update request specs under
+- For API behaviour changes, add or update request specs under
   `backend/spec/requests` only when the user explicitly asks for tests.
 - Prefer RSpec for new backend tests; existing minitest files under
   `backend/test` do not make minitest the default for new coverage.
@@ -219,8 +223,8 @@ const value =
 - Preserve the `X-Transfer-Code` user identification flow unless the task
   explicitly changes authentication.
 - Be careful with version tables, `version_no`, optimistic concurrency,
-  wiki revisions, and restore/diff behavior.
-- Be careful with tag names, tag normalization, implications, similarities, and discard behavior.
+  wiki revisions, and restore/diff behaviour.
+- Be careful with tag names, tag normalisation, implications, similarities, and discard behaviour.
 - Be sensitive to N+1 queries; avoid introducing them and proactively fix
   existing N+1 issues in the code path being edited.
 - Keep migration files and `backend/db/schema.rb` consistent when changing schema.
@@ -241,9 +245,9 @@ const value =
 - Internal links must use `PrefetchLink`.
 - External links must use `<a>` with `target="_blank"`.
 - When adding or changing Tailwind `bg-*` classes in TSX, pair them with an
-  explicit readable `text-*` color and dark-mode counterparts such as
+  explicit readable `text-*` colour and dark-mode counterparts such as
   `dark:bg-*`, `dark:text-*`, and `dark:border-*` where a border is present.
-- Do not rely on inherited text color for light backgrounds. This is especially
+- Do not rely on inherited text colour for light backgrounds. This is especially
   important for chips, cards, buttons, and panels that may inherit white text in
   dark mode.
 - Mobile UI must be checked as a first-class layout. Avoid wide fixed content,
@@ -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
-  phrasing over historical spellings or awkward literal wording.
+- For user-facing Japanese text, follow the 1986 Cabinet Notice
+  《現代仮名遣い》 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
@@ -264,6 +271,33 @@ const value =
 - Preserve the local TSX formatting style.
 - Do not normalize TSX to common Prettier-style React formatting unless
   explicitly asked.
+- Treat TSX formatting rules as hard constraints, not preferences. Before
+  finishing a TSX edit, inspect the edited hunks for closing `)`, `]`, and `}`
+  placement and fix violations instead of relying on formatter defaults.
+- After every TSX edit, perform a style-only self-review of the edited hunks
+  before running verification or reporting completion. The task is not complete
+  while any edited TSX hunk violates these local formatting rules.
+- The TSX self-review must classify every edited leading or trailing `)`, `]`,
+  and `}` by syntax role before deciding whether it is valid. Do not apply a
+  rule by glyph alone. A closing `)` for a function parameter list is different
+  from a closing `)` for a function call. A closing `}` for a block is different
+  from a closing `}` for an object, type literal, import list, or destructuring
+  pattern.
+- The TSX self-review must confirm there are no common Prettier-style React
+  component declarations with a multi-line destructured parameter.
+- The TSX self-review must confirm multi-line function declaration parameter
+  `)` placement follows the detailed parameter-list rules below.
+- The TSX self-review must confirm call-expression `)` is never at the
+  beginning of a line.
+- The TSX self-review must confirm object/type/import/destructuring `}` is not
+  at the beginning of a line.
+- The TSX self-review must confirm multi-line function/lambda/callback/block
+  `}` is on its own line and never at the end of the previous line.
+- The TSX self-review must confirm array `]` is not at the beginning of a line.
+- The TSX self-review must confirm JSX closing markers and closing parentheses
+  keep the surrounding compact style.
+- The TSX self-review must confirm leading indentation follows 4-space logical
+  indentation with tabs only as leading 8-space compression.
 - Prefer `const` arrow functions for TypeScript/TSX component and helper declarations.
 - Put two blank lines before and after top-level `const` function
   declarations, unless imports, exports, or file boundaries make that awkward.
@@ -272,16 +306,37 @@ const value =
   character.
 - A leading tab is exactly equivalent to 8 leading spaces.
 - In TypeScript and TSX function declarations, including `const` arrow
-  function declarations, when the parameter list spans multiple lines, always
-  put the closing parenthesis at the beginning of its own line before the return
-  type or `=>`.
+  function declarations, classify the parameter list before placing the closing
+  `)`.
+- If the parameter list itself is given its own multi-line block after the
+  function's opening `(`, put the closing parameter `)` at the beginning of its
+  own line before the return type or `=>`.
+- If the only line break is inside a parameter's inline type, object type, or
+  destructuring shape, and the parameter list itself is not split as a separate
+  block, keep the closing parameter `)` on the same line as that parameter's
+  final `}`. In this case, moving `)` to a new line is wrong.
+- Do not write React component declarations in the common Prettier form
+  `const Component = ({ ... }) => (` when the destructured parameter spans
+  multiple lines. Use the project form with the opening `(` after `=`, the
+  destructured object as the argument, and the closing parameter `)` on its own
+  line before `=>`.
 - In TypeScript and TSX, never place a closing parenthesis at the beginning of
   a line except for a multi-line function declaration parameter list.
 - Never place a closing square bracket at the beginning of a line.
-- For object literals and other associative-array-style braces, do not place
-  the closing brace at the beginning of a line. Function, lambda, callback, and
-  block closing braces are exempt and should stay on their own line when that
-  fits the local style.
+- For object literals, type literals, import/export named bindings, destructuring
+  patterns, and other associative-array-style braces, do not place the closing
+  brace at the beginning of a line. Keep `}` on the same line as the final
+  property, binding, or specifier unless that would violate the line limit.
+  Function, lambda, callback, and block closing braces are exempt and should
+  stay on their own line when that fits the local style. When a function,
+  lambda, callback, or block body spans multiple lines, do not put its closing
+  `}` at the end of the previous line.
+- For arrays and tuple-like lists, do not place the closing `]` at the
+  beginning of a line. Keep `]` on the same line as the final element unless
+  that would violate the line limit.
+- For function and method calls, do not place the closing `)` at the beginning
+  of a line. The only TypeScript/TSX exception is the closing parameter `)` of a
+  multi-line function declaration.
 - When writing braces on a single line in TypeScript or TSX JavaScript
   context, put exactly one space inside the braces, as in `{ value }` or
   `{ key: value }`.
@@ -300,6 +355,370 @@ const value =
 - Do not use a leading semicolon for expression statements such as
   `;([...]).forEach(...)`; rewrite the expression to avoid ASI hazards
   explicitly, for example with `void`.
+- Use correct British English spelling for new identifiers, filenames,
+  component names, helper names, comments, and developer-facing prose unless
+  editing an already established American-English API that must keep its
+  existing spelling for compatibility.
+- Prefer British English spellings such as `behaviour`, `colour`, `realise`,
+  `theatre`, `centre`, `favourite`, `optimise`, and `catalogue`.
+- Avoid American or Canadian spellings such as `behavior`, `color`, `realize`,
+  `theater`, `center`, `favorite`, `optimize`, and `catalog`.
+- Even when an external library or API uses the wrong spelling, prefer to
+  correct it at the local boundary and use proper British English names in this
+  codebase. For example, prefer `import { color: colour } from '@external-lib'`
+  over spreading `color` through local code.
+- Apply the same boundary correction to object destructuring, wrapper helpers,
+  adapter layers, and local variable names when doing so does not break the
+  external contract.
+- For this repository, prefer names such as `BehaviourSettingsSection.tsx`, not
+  `BehaviorSettingsSection.tsx`.
+
+### Frontend delimiter decision table
+
+Use this table before accepting any edited TypeScript or TSX hunk. The table is
+more authoritative than formatter habit.
+
+#### Import and export named bindings
+
+Bad:
+
+```ts
+import {
+    Button,
+    Card,
+} from '@/components/ui'
+```
+
+Good:
+
+```ts
+import { Button,
+	 Card } from '@/components/ui'
+```
+
+Also acceptable when short:
+
+```ts
+import { Button, Card } from '@/components/ui'
+```
+
+Rule: named-binding `}` is associative-array-style syntax. It must not be alone
+at the beginning of a line. Prefer keeping `{` with the first binding and `}`
+with the final binding when this fits the line limit.
+
+#### Type literals
+
+Bad:
+
+```ts
+type Props = {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+```
+
+Good:
+
+```ts
+type Props = {
+    open: boolean
+    onOpenChange: (open: boolean) => void }
+```
+
+Rule: type-literal `}` is not a block close. It must stay on the same line as
+the final property unless that would break the hard line limit.
+
+#### Object literals
+
+Bad:
+
+```ts
+const value = {
+    open,
+    activeScope,
+}
+```
+
+Good:
+
+```ts
+const value = {
+    open,
+    activeScope }
+```
+
+Bad:
+
+```ts
+const value = useMemo (() => ({
+    open,
+    activeScope,
+}), [open, activeScope])
+```
+
+Good:
+
+```ts
+const value = useMemo (() => ({
+    open,
+    activeScope }), [open, activeScope])
+```
+
+Rule: object-literal `}` is associative-array-style syntax. It must not be on a
+line by itself. Keep it with the final property, and keep call `)` off the
+beginning of a line.
+
+#### Destructuring parameters
+
+Bad:
+
+```tsx
+const Component: FC<Props> = ({
+    open,
+    onOpenChange,
+}) => {
+  return null
+}
+```
+
+Good:
+
+```tsx
+const Component: FC<Props> = (
+    { open,
+      onOpenChange },
+) => {
+  return null
+}
+```
+
+Rule: when a React component or helper takes a destructured object parameter
+that spans multiple lines, do not use the Prettier-style `= ({ ... }) =>`
+shape. Put the function parameter list on its own lines. The destructuring `}`
+stays with the final binding. The parameter-list `)` is then allowed and
+required at the beginning of its own line.
+
+#### Inline typed destructuring parameter
+
+Good:
+
+```ts
+const RouteTransitionWrapper = ({ user, setUser }: {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>> }) => {
+  return null
+}
+```
+
+Bad:
+
+```ts
+const RouteTransitionWrapper = ({ user, setUser }: {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>>
+}) => {
+  return null
+}
+```
+
+Rule: this is not a separately split parameter-list block. The line break is
+inside the inline type. Keep the type-literal `}` and parameter-list `)` on the
+same line as the final type property.
+
+#### Multi-line normal parameter list
+
+Bad:
+
+```ts
+const updateDraft = <Key extends keyof Settings,> (
+    key: Key,
+    value: Settings[Key]) => {
+  return null
+}
+```
+
+Good:
+
+```ts
+const updateDraft = <Key extends keyof Settings,> (
+    key:    Key,
+    value:  Settings[Key],
+) => {
+  return null
+}
+```
+
+Rule: when the parameter list itself is split across multiple parameter lines,
+the closing parameter `)` goes at the beginning of its own line before `=>` or
+the return type.
+
+#### Function and callback blocks
+
+Bad:
+
+```ts
+const handleSave = () => { save ()
+}
+```
+
+Bad:
+
+```ts
+const handleSave = () => {
+  save () }
+```
+
+Good:
+
+```ts
+const handleSave = () => {
+  save ()
+}
+```
+
+Rule: block `}` closes executable code, not associative data. Multi-line
+function, lambda, callback, `if`, `for`, `switch`, and similar block braces
+belong on their own line.
+
+#### Function and method calls
+
+Bad:
+
+```ts
+const value = compute (
+    first,
+    second
+)
+```
+
+Good:
+
+```ts
+const value = compute (
+    first,
+    second)
+```
+
+Rule: call-expression `)` must not be at the beginning of a line. The exception
+for leading `)` applies only to function declaration parameter lists, never to
+calls.
+
+#### JSX closing markers
+
+Bad:
+
+```tsx
+<Button
+    type="button"
+    onClick={handleSave}
+>
+  保存
+</Button>
+)
+```
+
+Good:
+
+```tsx
+<Button
+    type="button"
+    onClick={handleSave}>
+  保存
+</Button>)
+```
+
+Bad:
+
+```tsx
+<Input
+    value={value}
+    onChange={handleChange}
+/>
+```
+
+Good:
+
+```tsx
+<Input
+    value={value}
+    onChange={handleChange}/>
+```
+
+Rule: keep `>` or `/>` with the final prop, and keep JSX closing parentheses in
+the local compact form such as `</div>)`.
+
+#### Arrays and tuples
+
+Bad:
+
+```ts
+const items = [
+    first,
+    second,
+]
+```
+
+Good:
+
+```ts
+const items = [
+    first,
+    second]
+```
+
+Good when short:
+
+```ts
+const items = [first, second]
+```
+
+Rule: array and tuple `]` must not be at the beginning of a line. Keep it with
+the final element unless that would break the hard line limit.
+
+#### Single-line braces
+
+Good:
+
+```ts
+const next = { ...current, enabled: true }
+const tag = { id, name }
+```
+
+Bad:
+
+```tsx
+<Component prop={ value }/>
+```
+
+Good:
+
+```tsx
+<Component prop={value}/>
+```
+
+Rule: JavaScript object braces on one line get one inner space. JSX expression
+braces do not get inner spaces.
+
+#### Final TSX self-review checklist
+
+Before reporting completion after a TypeScript or TSX edit, check the edited
+hunks line by line:
+
+1. No import/export/type/object/destructuring `}` appears alone at the beginning
+   of a line.
+2. No call-expression `)` appears at the beginning of a line.
+3. Any leading `)` is definitely closing a function declaration parameter list,
+   not a call.
+4. Any parameter-list `)` at the end of a line is valid because the parameter
+   list itself was not split, only an inline type or destructuring shape was.
+5. No array or tuple `]` appears at the beginning of a line.
+6. Multi-line executable block `}` is on its own line.
+7. JSX `>` and `/>` stay with the final prop unless nearby code proves
+   otherwise.
+8. JSX closing parentheses keep the compact local style.
+9. Leading indentation is 4-space logical indentation with tabs used only as
+   leading 8-space compression.
+10. No line has trailing whitespace.
 
 Preferred:
 
@@ -335,7 +754,7 @@ function PostFormTagsArea ({ tags, setTags }: Props) {
 - Do not scan or summarize dependency/generated/runtime directories such as
   `node_modules`, `dist`, `tmp`, `log`, and `storage` unless explicitly needed.
 - Before touching wiki, tag, versioning, BAN, IP BAN, or authentication
-  behavior, inspect the related request specs and service objects.
+  behaviour, inspect the related request specs and service objects.
 - If frontend code changes, run only non-test verification commands that
   apply, such as `npm run build` and `npm run lint`. Run `npm run test:run`
   only when the user explicitly asks for tests.
@@ -352,4 +771,4 @@ A task is complete only when:
   explained,
 - unrelated files are not changed,
 - migrations and schema are consistent when schema changes are made,
-- user-facing behavior is documented when needed.
+- user-facing behaviour is documented when needed.

backend/app/controllers/post_versions_controller.rb

@@ -25,6 +25,7 @@ class PostVersionsController < ApplicationController
         SQL
         .select('post_versions.*', 'prev.title AS prev_title', 'prev.url AS prev_url',
                 'prev.thumbnail_base AS prev_thumbnail_base', 'prev.tags AS prev_tags',
+                'prev.video_ms AS prev_video_ms',
                 'prev.original_created_from AS prev_original_created_from',
                 'prev.original_created_before AS prev_original_created_before')
     q = q.where('post_versions.post_id = ?', post_id) if post_id
@@ -74,6 +75,10 @@ class PostVersionsController < ApplicationController
           current: row.thumbnail_base,
           prev: row.attributes['prev_thumbnail_base']
         },
+        video_ms: {
+          current: row.video_ms,
+          prev: row.attributes['prev_video_ms']
+        },
         tags: build_version_tags(cur_tags, prev_tags),
         original_created_from: {
           current: row.original_created_from&.iso8601,

backend/app/controllers/posts_controller.rb

@@ -1,6 +1,10 @@
 class PostsController < ApplicationController
   Event = Struct.new(:post, :tag, :user, :change_type, :timestamp, keyword_init: true)
 
+  class VideoMsParseError < ArgumentError
+    ;
+  end
+
   def index
     url = params[:url].presence
     title = params[:title].presence
@@ -45,7 +49,9 @@ class PostsController < ApplicationController
         .joins("LEFT JOIN (#{ pt_max_sql }) pt_max ON pt_max.post_id = posts.id")
         .reselect('posts.*', Arel.sql("#{ updated_at_all_sql } AS updated_at_all"))
         .preload(:uploaded_user, :parents, :children,
-                 tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+                 active_post_tags: [:sections,
+                                    { tag: [:deerjikists, :materials,
+                                            { tag_name: :wiki_page }] }])
         .with_attached_thumbnail
 
     q = q.where('posts.url LIKE ?', "%#{ url }%") if url
@@ -97,7 +103,9 @@ class PostsController < ApplicationController
 
   def random
     post = filtered_posts.preload(:uploaded_user, :parents, :children,
-                                  tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+                                  active_post_tags: [:sections,
+                                                     { tag: [:deerjikists, :materials,
+                                                             { tag_name: :wiki_page }] }])
                          .with_attached_thumbnail
                          .order('RAND()')
                          .first
@@ -110,7 +118,9 @@ class PostsController < ApplicationController
     post =
         Post
         .includes(:uploaded_user, :parents, :children,
-                  tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+                  active_post_tags: [:sections,
+                                     { tag: [:deerjikists, :materials,
+                                             { tag_name: :wiki_page }] }])
         .with_attached_thumbnail
         .find_by(id: params[:id])
     return head :not_found unless post
@@ -125,7 +135,7 @@ class PostsController < ApplicationController
                                  child_posts:,
                                  sibling_posts:,
                                  related:)
-                         .merge(tags: build_tag_tree_for(post.tags))
+                         .merge(tags: build_tag_tree_for(post))
   end
 
   def create
@@ -149,11 +159,15 @@ class PostsController < ApplicationController
     ApplicationRecord.transaction do
       post.save!
 
-      tags = Tag.normalise_tags!(tag_names, deny_deprecated: true)
+      Tag.normalise_tags!(tag_names, deny_deprecated: true, with_sections: true) =>
+          { tags:, sections: }
       TagVersioning.record_tag_snapshots!(tags, created_by_user: current_user)
 
       tags = Tag.expand_parent_tags(tags).reject(&:deprecated?)
-      sync_post_tags!(post, tags)
+      post.video_ms = normalise_video_ms(tags)
+      validate_video_sections!(post.video_ms, sections)
+      post.save!
+      sync_post_tags!(post, tags, sections)
 
       sync_parent_posts!(post, parent_post_ids)
 
@@ -166,6 +180,10 @@ class PostsController < ApplicationController
     render_validation_error fields: { tags: 'ニコニコ・タグは直接指定できません．' }
   rescue Tag::DeprecatedTagNormalisationError
     render_unprocessable_entity '廃止済みタグは付与できません．', field: :tags
+  rescue Tag::SectionLiteralParseError
+    render_validation_error fields: { tags: ['タグ区間の記法が不正です．'] }
+  rescue VideoMsParseError
+    render_validation_error fields: { video_ms: ['動画時間の記法が不正です．'] }
   rescue MiniMagick::Error
     render_validation_error fields: { thumbnail: ['サムネイル画像の変換に失敗しました．'] }
   rescue ArgumentError => e
@@ -224,6 +242,8 @@ class PostsController < ApplicationController
                                                  original_created_from:,
                                                  original_created_before:,
                                                  tag_names:,
+                                                 video_ms_param: params[:video_ms],
+                                                 duration_param: params[:duration],
                                                  parent_post_ids:)
 
       snapshot_to_apply =
@@ -254,12 +274,16 @@ class PostsController < ApplicationController
 
     post.reload
     json = PostRepr.base(post, current_user)
-    json['tags'] = build_tag_tree_for(post.tags)
+    json['tags'] = build_tag_tree_for(post)
     render json:, status: :ok
   rescue Tag::NicoTagNormalisationError
     render_validation_error fields: { tags: ['ニコニコ・タグは直接指定できません．'] }
   rescue Tag::DeprecatedTagNormalisationError
     render_unprocessable_entity '廃止済みタグは付与できません．', field: :tags
+  rescue Tag::SectionLiteralParseError
+    render_validation_error fields: { tags: ['タグ区間の記法が不正です．'] }
+  rescue VideoMsParseError
+    render_validation_error fields: { video_ms: ['動画時間の記法が不正です．'] }
   rescue ArgumentError => e
     render_validation_error fields: { parent_post_ids: [e.message] }
   rescue ActiveRecord::RecordInvalid => e
@@ -358,7 +382,7 @@ class PostsController < ApplicationController
   def tagged_post_ids_for(name) =
       Post.joins(tags: :tag_name).where(tag_names: { name: }).select(:id)
 
-  def sync_post_tags! post, desired_tags
+  def sync_post_tags! post, desired_tags, sections
     desired_tags.each do |t|
       t.save! if t.new_record?
     end
@@ -377,13 +401,21 @@ class PostsController < ApplicationController
       end
     end
 
+    PostTagSection.where(post_id: post.id).destroy_all
+    sections.each do |tag_id, ranges|
+      ranges.each do |begin_ms, end_ms|
+        PostTagSection.create!(post_id: post.id, tag_id:, begin_ms:, end_ms:)
+      end
+    end
+
     PostTag.where(post_id: post.id, tag_id: to_remove.to_a).kept.find_each do |pt|
       pt.discard_by!(current_user)
     end
   end
 
-  def build_tag_tree_for tags
-    tags = tags.reject(&:deprecated?).to_a
+  def build_tag_tree_for post
+    post_tags = post.active_post_tags.reject { |post_tag| post_tag.tag.deprecated? }
+    tags = post_tags.map(&:tag)
     tag_ids = tags.map(&:id)
 
     implications = TagImplication.where(parent_tag_id: tag_ids, tag_id: tag_ids)
@@ -398,6 +430,9 @@ class PostsController < ApplicationController
     root_ids = tag_ids - child_ids
 
     tags_by_id = tags.index_by(&:id)
+    sections_by_tag_id = post_tags.to_h { |post_tag|
+      [post_tag.tag_id, post_tag.sections.as_json(only: [:begin_ms, :end_ms])]
+    }
 
     memo = { }
 
@@ -405,8 +440,10 @@ class PostsController < ApplicationController
       tag = tags_by_id[tag_id]
       return nil unless tag
 
+      sections = sections_by_tag_id.fetch(tag_id, [])
+
       if path.include?(tag_id)
-        return TagRepr.inline(tag).merge(children: [])
+        return TagRepr.inline(tag).merge(children: [], sections:)
       end
 
       if memo.key?(tag_id)
@@ -418,7 +455,7 @@ class PostsController < ApplicationController
 
       children = child_ids.filter_map { |cid| build_node.(cid, new_path) }
 
-      memo[tag_id] = TagRepr.inline(tag).merge(children:)
+      memo[tag_id] = TagRepr.inline(tag).merge(children:, sections:)
     end
 
     root_ids.filter_map { |id| build_node.call(id, []) }
@@ -487,6 +524,7 @@ class PostsController < ApplicationController
 
   def post_snapshot_from_version version
     { title: version.title,
+      video_ms: version.respond_to?(:video_ms) ? version.video_ms : nil,
       original_created_from: snapshot_time(version.original_created_from),
       original_created_before: snapshot_time(version.original_created_before),
       tag_names: editable_tag_names_from_version(version),
@@ -499,6 +537,7 @@ class PostsController < ApplicationController
 
   def post_snapshot_from_record post
     { title: post.title,
+      video_ms: post.video_ms,
       original_created_from: snapshot_time(post.original_created_from),
       original_created_before: snapshot_time(post.original_created_before),
       tag_names: editable_tag_names_from_post(post),
@@ -506,16 +545,41 @@ class PostsController < ApplicationController
   end
 
   def editable_tag_names_from_post post
-    post.tags.not_nico.where(deprecated_at: nil)
-        .joins(:tag_name).order('tag_names.name').pluck('tag_names.name')
+    post
+        .post_tags
+        .kept
+        .joins(tag: :tag_name)
+        .merge(Tag.not_nico)
+        .merge(Tag.where(deprecated_at: nil))
+        .includes(:sections, tag: :tag_name)
+        .order('tag_names.name')
+        .map do |post_tag|
+      name = post_tag.tag.tag_name.name
+      sections = post_tag.sections.sort_by(&:begin_ms)
+
+      next name if sections.empty?
+
+      "#{ name }#{ sections.map { Post.section_literal(_1) }.join }"
+    end
   end
 
   def post_incoming_snapshot title:, original_created_from:, original_created_before:,
-                             tag_names:, parent_post_ids:
+                             tag_names:, video_ms_param:, duration_param:, parent_post_ids:
+    Tag.normalise_tags!(tag_names, with_tagme: false, deny_deprecated: true,
+                                        with_sections: true) =>
+        { tags:, sections: }
+
+    tags = Tag.expand_parent_tags(tags).reject(&:deprecated?)
+    video_ms = normalise_video_ms(tags, video_ms_param:, duration_param:)
+    validate_video_sections!(video_ms, sections)
+
     { title:,
+      video_ms:,
       original_created_from: snapshot_time(original_created_from),
       original_created_before: snapshot_time(original_created_before),
-      tag_names: incoming_tag_names_for_snapshot(tag_names),
+      tag_names: tags.uniq(&:id).map { |tag|
+        "#{ tag.name }#{ sections[tag.id].to_a.map { section_literal(_1) }.join }"
+      }.sort,
       parent_post_ids: parent_post_ids.sort }
   end
 
@@ -538,11 +602,8 @@ class PostsController < ApplicationController
     value.to_s
   end
 
-  def incoming_tag_names_for_snapshot raw_tag_names
-    tags = Tag.normalise_tags!(raw_tag_names, with_tagme: false,
-                                              deny_deprecated: true)
-
-    Tag.expand_parent_tags(tags).reject(&:deprecated?).map(&:name).uniq.sort
+  def section_literal section
+    "[#{ Post.ms_to_time(section[0]) }-#{ section[1] ? Post.ms_to_time(section[1]) : '' }]"
   end
 
   def post_conflict_json post:, base_version_no:, base_snapshot:,
@@ -563,6 +624,8 @@ class PostsController < ApplicationController
   def post_snapshot_changes base_snapshot, current_snapshot, incoming_snapshot
     [scalar_snapshot_change(:title, 'タイトル',
                             base_snapshot, current_snapshot, incoming_snapshot),
+     scalar_snapshot_change(:video_ms, '動画時間',
+                            base_snapshot, current_snapshot, incoming_snapshot),
      scalar_snapshot_change(:original_created_from, 'オリジナルの作成日時（以降）',
                             base_snapshot, current_snapshot, incoming_snapshot),
      scalar_snapshot_change(:original_created_before, 'オリジナルの作成日時（より前）',
@@ -626,11 +689,14 @@ class PostsController < ApplicationController
     PostVersionRecorder.ensure_snapshot!(post, created_by_user: current_user)
 
     post.update!(title: snapshot[:title],
+                 video_ms: snapshot[:video_ms],
                  original_created_from: snapshot[:original_created_from],
                  original_created_before: snapshot[:original_created_before])
 
-    editable_tags = Tag.normalise_tags!(snapshot[:tag_names], with_tagme: false,
-                                                               deny_deprecated: true)
+    Tag.normalise_tags!(snapshot[:tag_names], with_tagme: false,
+                                               deny_deprecated: true,
+                                               with_sections: true) =>
+        { tags: editable_tags, sections: }
     TagVersioning.record_tag_snapshots!(editable_tags, created_by_user: current_user)
 
     readonly_tags = post.tags.nico.to_a
@@ -638,14 +704,17 @@ class PostsController < ApplicationController
     tags = readonly_tags + editable_tags
     tags = Tag.expand_parent_tags(tags).reject(&:deprecated?)
 
-    sync_post_tags!(post, tags)
+    post.video_ms = tags.any? { _1.id == Tag.video.id } ? snapshot[:video_ms] : nil
+    validate_video_sections!(post.video_ms, sections)
+    post.save!
+    sync_post_tags!(post, tags, sections)
     sync_parent_posts!(post, snapshot[:parent_post_ids])
 
     PostVersionRecorder.record!(post:, event_type: :update, created_by_user: current_user)
   end
 
   def merge_post_snapshots base_snapshot, current_snapshot, incoming_snapshot
-    [:title, :original_created_from, :original_created_before].map {
+    [:title, :video_ms, :original_created_from, :original_created_before].map {
       [_1, merge_scalar_snapshot_value(base_snapshot[_1],
                                        current_snapshot[_1],
                                        incoming_snapshot[_1])]
@@ -689,4 +758,44 @@ class PostsController < ApplicationController
       render_validation_error record
     end
   end
+
+  def normalise_video_ms tags, video_ms_param: params[:video_ms], duration_param: params[:duration]
+    return nil unless tags.any? { _1.id == Tag.video.id }
+
+    if video_ms_param.present?
+      video_ms = Integer(video_ms_param, exception: false)
+      raise VideoMsParseError unless video_ms&.positive?
+
+      return video_ms
+    end
+
+    return nil if duration_param.blank?
+
+    video_ms = Tag.time_to_ms!(duration_param.to_s, tag_name: '動画時間')
+    raise VideoMsParseError unless video_ms.positive?
+
+    video_ms
+  rescue Tag::SectionLiteralParseError
+    raise VideoMsParseError
+  end
+
+  def validate_video_sections! video_ms, sections
+    return unless video_ms
+
+    sections.each_value do |ranges|
+      ranges.each do |begin_ms, end_ms|
+        if begin_ms >= video_ms
+          post = Post.new
+          post.errors.add :video_ms, 'タグ区間の開始が動画時間以上です．'
+          raise ActiveRecord::RecordInvalid, post
+        end
+
+        if end_ms && end_ms > video_ms
+          post = Post.new
+          post.errors.add :video_ms, 'タグ区間の終端が動画時間を超えてゐます．'
+          raise ActiveRecord::RecordInvalid, post
+        end
+      end
+    end
+  end
 end

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/post.rb

@@ -60,6 +60,7 @@ class Post < ApplicationRecord
   before_validation :normalise_url
 
   validates :url, presence: true, uniqueness: true
+  validates :video_ms, numericality: { only_integer: true, greater_than: 0 }, allow_nil: true
 
   validate :validate_original_created_range
   validate :url_must_be_http_url
@@ -83,7 +84,42 @@ class Post < ApplicationRecord
     super(options).merge(thumbnail: nil)
   end
 
-  def snapshot_tag_names = tags.joins(:tag_name).order('tag_names.name').pluck('tag_names.name')
+  def snapshot_tag_names
+    post_tags
+        .kept
+        .joins(tag: :tag_name)
+        .includes(:sections, tag: :tag_name)
+        .order('tag_names.name')
+        .map do |post_tag|
+      name = post_tag.tag.tag_name.name
+      sections = post_tag.sections.sort_by(&:begin_ms)
+
+      next name if sections.empty?
+
+      "#{ name }#{ sections.map { Post.section_literal(_1) }.join }"
+    end
+  end
+
+  def self.section_literal section
+    "[#{ Post.ms_to_time(section.begin_ms) }-#{ section.end_ms ? Post.ms_to_time(section.end_ms) : '' }]"
+  end
+
+  def self.ms_to_time ms
+    total_s = ms / 1_000
+    s = total_s % 60
+    min = (total_s / 60) % 60
+    h = total_s / 3_600
+    remainder_ms = ms % 1_000
+
+    base =
+        if h.positive?
+          '%d:%02d:%02d' % [h, min, s]
+        else
+          '%d:%02d' % [min, s]
+        end
+
+    remainder_ms.positive? ? "#{ base }.#{ remainder_ms.to_s.rjust(3, '0') }" : base
+  end
 
   def snapshot_parent_post_ids = parents.order(:id).pluck(:id)
 

backend/app/models/post_tag.rb

@@ -10,6 +10,12 @@ class PostTag < ApplicationRecord
   belongs_to :created_user, class_name: 'User', optional: true
   belongs_to :deleted_user, class_name: 'User', optional: true
 
+  has_many :sections, -> { order(:begin_ms) }, class_name: 'PostTagSection',
+                                               foreign_key: [:post_id, :tag_id],
+                                               primary_key: [:post_id, :tag_id],
+                                               dependent: :delete_all,
+                                               inverse_of: :post_tag
+
   validates :post_id, presence: true
   validates :tag_id, presence: true
   validates :post_id, uniqueness: {

backend/app/models/post_tag_section.rb

@@ -0,0 +1,20 @@
+class PostTagSection < ApplicationRecord
+  self.primary_key = :post_id, :tag_id, :begin_ms
+
+  belongs_to :post
+  belongs_to :tag
+
+  belongs_to :post_tag, -> { kept }, foreign_key: [:post_id, :tag_id],
+                                     primary_key: [:post_id, :tag_id],
+                                     inverse_of: :sections,
+                                     optional: true
+
+  validates :post_id, presence: true
+  validates :tag_id, presence: true
+
+  validates :begin_ms, presence: true,
+                       numericality: { only_integer: true, greater_than_or_equal_to: 0 }
+
+  validates :end_ms, numericality: { only_integer: true, greater_than: :begin_ms },
+                     allow_nil: true
+end

backend/app/models/post_version.rb

@@ -5,6 +5,7 @@ class PostVersion < ApplicationRecord
   belongs_to :parent, class_name: 'Post', optional: true
 
   validates :url, presence: true
+  validates :video_ms, numericality: { only_integer: true, greater_than: 0 }, allow_nil: true
 
   validate :validate_original_created_range
 

backend/app/models/setting.rb

@@ -1,7 +1,52 @@
 class Setting < ApplicationRecord
+  THEMES = ['system', 'light', 'dark'].freeze
+
+  # These remain in the typed settings schema to preserve existing backend
+  # work. The common `/users/settings` page currently surfaces only `theme`.
+  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 :value, presence: true
+  validates :user_id, uniqueness: 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/tag.rb

@@ -17,6 +17,16 @@ class Tag < ApplicationRecord
     end
   end
 
+  class SectionLiteralParseError < ArgumentError
+    attr_reader :tag_name, :literal
+
+    def initialize tag_name, literal
+      @tag_name = tag_name
+      @literal = literal
+      super("invalid section literal for tag #{ tag_name }: #{ literal }")
+    end
+  end
+
   has_many :post_tags, inverse_of: :tag
   has_many :active_post_tags, -> { kept }, class_name: 'PostTag', inverse_of: :tag
   has_many :post_tags_with_discarded, -> { with_discarded }, class_name: 'PostTag'
@@ -105,26 +115,60 @@ class Tag < ApplicationRecord
   def self.normalise_tags! tag_names, with_tagme: true,
                                       with_no_deerjikist: true,
                                       deny_nico: true,
-                                      deny_deprecated: false
+                                      deny_deprecated: false,
+                                      with_sections: false
     if deny_nico && tag_names.any? { |n| n.downcase.start_with?('nico:') }
       raise NicoTagNormalisationError
     end
 
+    sections = { }
     tags = tag_names.map do |name|
+      raw_name = name
       pf, cat = CATEGORY_PREFIXES.find { |p, _| name.downcase.start_with?(p) } || ['', nil]
-      name = TagName.canonicalise(name.sub(/\A#{ pf }/i, '')).first
+
+      name = name.sub(/\A#{ pf }/i, '')
+
+      sections_by_tag = []
+      while (match = name.match(/\A(\S*?)\[([^\[\]\s]*)-([^\[\]\s]*)\](\S*)\z/))
+        name = "#{ match[1] }#{ match[4] }"
+        next if match[2].empty? && match[3].empty?
+
+        sections_by_tag << normalise_section_range!(
+            begin_raw: match[2],
+            end_raw: match[3],
+            tag_name: name)
+      end
+
+      if name.include?('[') || name.include?(']')
+        raise SectionLiteralParseError.new(raw_name, raw_name)
+      end
+
+      name = TagName.canonicalise(name).first
+
       find_or_create_by_tag_name!(name, category: (cat || :general)).tap do |tag|
         if deny_deprecated && tag.deprecated?
           raise DeprecatedTagNormalisationError, [tag.name]
         end
 
         tag.update!(category: cat) if cat && tag.category != cat
+        next if sections_by_tag.empty?
+
+        sections[tag.id] ||= []
+        sections[tag.id].concat(sections_by_tag)
+        sections[tag.id] = merge_section_ranges(sections[tag.id])
+        sections.delete(tag.id) if sections[tag.id] == [[0, nil]]
       end
     end
 
     tags << Tag.tagme if with_tagme && tags.size < 10 && tags.none?(Tag.tagme)
     tags << Tag.no_deerjikist if with_no_deerjikist && tags.all? { |t| !(t.deerjikist?) }
-    tags.uniq(&:id)
+    tags.uniq!(&:id)
+
+    if with_sections
+      { tags:, sections: }
+    else
+      tags
+    end
   end
 
   def self.expand_parent_tags tags
@@ -150,6 +194,45 @@ class Tag < ApplicationRecord
     (result + tags).uniq { |t| t.id }
   end
 
+  def self.normalise_section_range! begin_raw:, end_raw:, tag_name:
+    begin_ms = begin_raw.empty? ? 0 : time_to_ms!(begin_raw, tag_name:)
+    end_ms = end_raw.empty? ? nil : time_to_ms!(end_raw, tag_name:)
+
+    if end_ms
+      begin_ms, end_ms = end_ms, begin_ms if begin_ms > end_ms
+      end_ms = begin_ms + 1 if begin_ms == end_ms
+    end
+
+    [begin_ms, end_ms]
+  end
+
+  def self.merge_section_ranges ranges
+    sorted_ranges = ranges.sort_by { |begin_ms, end_ms| [begin_ms, end_ms || Float::INFINITY] }
+    merged = []
+
+    sorted_ranges.each do |begin_ms, end_ms|
+      if merged.empty?
+        merged << [begin_ms, end_ms]
+        next
+      end
+
+      last_begin_ms, last_end_ms = merged[-1]
+      if last_end_ms.nil? || begin_ms <= last_end_ms
+        merged[-1] = [last_begin_ms, merge_section_end(last_end_ms, end_ms)]
+      else
+        merged << [begin_ms, end_ms]
+      end
+    end
+
+    merged
+  end
+
+  def self.merge_section_end left_end_ms, right_end_ms
+    return nil if left_end_ms.nil? || right_end_ms.nil?
+
+    [left_end_ms, right_end_ms].max
+  end
+
   def self.find_or_create_by_tag_name! name, category:
     tn = TagName.find_undiscard_or_create_by!(name: name.to_s.strip)
     tn = tn.canonical if tn.canonical_id?
@@ -246,6 +329,32 @@ class Tag < ApplicationRecord
     end
   end
 
+  def self.time_to_ms! str, tag_name:
+    match =
+        case str
+        when /\A(?<seconds>\d+)(?:\.(?<ms>\d{1,3}))?\z/
+          { hours: nil, minutes: nil, seconds: Regexp.last_match[:seconds],
+            ms: Regexp.last_match[:ms] }
+        when /\A(?<minutes>\d+):(?<seconds>[0-5]?\d)(?:\.(?<ms>\d{1,3}))?\z/
+          { hours: nil, minutes: Regexp.last_match[:minutes],
+            seconds: Regexp.last_match[:seconds],
+            ms: Regexp.last_match[:ms] }
+        when /\A(?<hours>\d+):(?<minutes>[0-5]?\d):(?<seconds>[0-5]?\d)(?:\.(?<ms>\d{1,3}))?\z/
+          { hours: Regexp.last_match[:hours],
+            minutes: Regexp.last_match[:minutes],
+            seconds: Regexp.last_match[:seconds],
+            ms: Regexp.last_match[:ms] }
+        end
+
+    raise SectionLiteralParseError.new(tag_name, str) unless match
+
+    total_s = match[:seconds].to_i
+    total_s += match[:minutes].to_i * 60 if match[:minutes]
+    total_s += match[:hours].to_i * 3_600 if match[:hours]
+
+    total_s * 1_000 + match[:ms].to_s.ljust(3, '0')[0, 3].to_i
+  end
+
   def nico_tags_cannot_be_deprecated
     if nico? && deprecated_at.present?
       errors.add :deprecated_at, 'ニコタグは廃止できません．'

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/app/representations/post_repr.rb

@@ -8,6 +8,7 @@ module PostRepr
       :url,
       :title,
       :thumbnail_base,
+      :video_ms,
       :original_created_from,
       :original_created_before,
       :created_at,
@@ -18,7 +19,7 @@ module PostRepr
 
   def base post, current_user = nil
     json = common(post)
-    json['tags'] = tag_json(post.tags)
+    json['tags'] = tag_json(post)
     json['uploaded_user'] = post.uploaded_user && UserRepr.base(post.uploaded_user)
     json['viewed'] = current_user ? current_user.viewed?(post) : false
     json
@@ -52,8 +53,16 @@ module PostRepr
                .merge('thumbnail' => thumbnail_url(post))
   end
 
-  def tag_json tags
-    tags.reject(&:deprecated?).map { |tag| TagRepr.inline(tag) }
+  def tag_json post
+    post
+        .active_post_tags
+        .reject { _1.tag.deprecated? }
+        .sort_by { _1.tag.name }
+        .map { |post_tag|
+      TagRepr.inline(post_tag.tag).merge(
+          'children' => [],
+          'sections' => post_tag.sections.as_json(only: [:begin_ms, :end_ms]))
+    }
   end
 
   def thumbnail_url post

backend/app/services/post_version_recorder.rb

@@ -23,6 +23,7 @@ class PostVersionRecorder < VersionRecorder
     { title: @record.title,
       url: @record.url,
       thumbnail_base: @record.thumbnail_base,
+      video_ms: @record.video_ms,
       tags: @record.snapshot_tag_names.join(' '),
       parent_post_ids: @record.snapshot_parent_post_ids.join(' '),
       original_created_from: @record.original_created_from,

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/20260519013100_add_video_ms_to_posts.rb

@@ -0,0 +1,9 @@
+class AddVideoMsToPosts < ActiveRecord::Migration[8.0]
+  def change
+    add_column :posts, :video_ms, :integer
+    add_index :posts, [:video_ms, :id], name: 'idx_posts_video_ms_id'
+
+    add_check_constraint :posts, 'video_ms IS NULL OR video_ms > 0',
+                         name: 'chk_posts_video_ms_positive'
+  end
+end

backend/db/migrate/20260622010000_create_post_tag_sections.rb

@@ -0,0 +1,19 @@
+class CreatePostTagSections < ActiveRecord::Migration[8.0]
+  def change
+    create_table :post_tag_sections, primary_key: [:post_id, :tag_id, :begin_ms] do |t|
+      t.references :post, null: false, foreign_key: true, index: false
+      t.references :tag, null: false, foreign_key: true, index: false
+      t.integer :begin_ms, null: false
+      t.integer :end_ms, null: true
+      t.timestamps
+
+      t.index [:post_id, :begin_ms], name: 'idx_post_tag_sections_post_id_begin_ms'
+
+      t.check_constraint 'begin_ms >= 0',
+                         name: 'chk_post_tag_sections_begin_ms_natural'
+
+      t.check_constraint 'end_ms IS NULL OR begin_ms < end_ms',
+                         name: 'chk_post_tag_sections_end_ms_after_begin_ms'
+    end
+  end
+end

backend/db/migrate/20260622020000_add_video_ms_to_post_versions.rb

@@ -0,0 +1,9 @@
+class AddVideoMsToPostVersions < ActiveRecord::Migration[8.0]
+  def change
+    add_column :post_versions, :video_ms, :integer
+    add_index :post_versions, [:video_ms, :post_id], name: 'idx_post_versions_video_ms_post_id'
+
+    add_check_constraint :post_versions, 'video_ms IS NULL OR video_ms > 0',
+                         name: 'chk_post_versions_video_ms_positive'
+  end
+end

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
@@ -298,6 +298,19 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
     t.index ["target_post_id"], name: "index_post_similarities_on_target_post_id"
   end
 
+  create_table "post_tag_sections", primary_key: ["post_id", "tag_id", "begin_ms"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.bigint "post_id", null: false
+    t.bigint "tag_id", null: false
+    t.integer "begin_ms", null: false
+    t.integer "end_ms"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["post_id", "begin_ms"], name: "idx_post_tag_sections_post_id_begin_ms"
+    t.index ["tag_id"], name: "fk_rails_8be3847903"
+    t.check_constraint "(`end_ms` is null) or (`begin_ms` < `end_ms`)", name: "chk_post_tag_sections_end_ms_after_begin_ms"
+    t.check_constraint "`begin_ms` >= 0", name: "chk_post_tag_sections_begin_ms_natural"
+  end
+
   create_table "post_tags", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "post_id", null: false
     t.bigint "tag_id", null: false
@@ -331,9 +344,12 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
     t.datetime "original_created_before"
     t.datetime "created_at", null: false
     t.bigint "created_by_user_id"
+    t.integer "video_ms"
     t.index ["created_by_user_id"], name: "index_post_versions_on_created_by_user_id"
     t.index ["post_id", "version_no"], name: "index_post_versions_on_post_id_and_version_no", unique: true
     t.index ["post_id"], name: "index_post_versions_on_post_id"
+    t.index ["video_ms", "post_id"], name: "idx_post_versions_video_ms_post_id"
+    t.check_constraint "(`video_ms` is null) or (`video_ms` > 0)", name: "chk_post_versions_video_ms_positive"
     t.check_constraint "`event_type` in (_utf8mb4'create',_utf8mb4'update',_utf8mb4'discard',_utf8mb4'restore')", name: "post_versions_event_type_valid"
     t.check_constraint "`version_no` > 0", name: "post_versions_version_no_positive"
   end
@@ -348,18 +364,23 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
     t.datetime "original_created_before"
     t.datetime "updated_at", null: false
     t.integer "version_no", null: false
+    t.integer "video_ms"
     t.index ["uploaded_user_id"], name: "index_posts_on_uploaded_user_id"
     t.index ["url"], name: "index_posts_on_url", unique: true
+    t.index ["video_ms", "id"], name: "idx_posts_video_ms_id"
+    t.check_constraint "(`video_ms` is null) or (`video_ms` > 0)", name: "chk_posts_video_ms_positive"
     t.check_constraint "`version_no` > 0", name: "chk_posts_version_no_positive"
   end
 
   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|
@@ -678,6 +699,8 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
   add_foreign_key "post_implications", "posts", column: "parent_post_id"
   add_foreign_key "post_similarities", "posts"
   add_foreign_key "post_similarities", "posts", column: "target_post_id"
+  add_foreign_key "post_tag_sections", "posts"
+  add_foreign_key "post_tag_sections", "tags"
   add_foreign_key "post_tags", "posts"
   add_foreign_key "post_tags", "tags"
   add_foreign_key "post_tags", "users", column: "created_user_id"

backend/spec/factories/post_tag_sections.rb

@@ -0,0 +1,8 @@
+FactoryBot.define do
+  factory :post_tag_section do
+    association :post
+    association :tag
+    begin_ms { 1_000 }
+    end_ms { 2_000 }
+  end
+end

backend/spec/factories/post_tags.rb

@@ -0,0 +1,6 @@
+FactoryBot.define do
+  factory :post_tag do
+    association :post
+    association :tag
+  end
+end

backend/spec/factories/posts.rb

@@ -0,0 +1,8 @@
+FactoryBot.define do
+  factory :post do
+    sequence(:url) { |n| "https://example.com/factory-post-#{ n }" }
+    title { 'factory post' }
+    thumbnail_base { nil }
+    uploaded_user { nil }
+  end
+end

backend/spec/models/post_tag_spec.rb

@@ -0,0 +1,41 @@
+RSpec.describe PostTag, type: :model do
+  describe '#sections' do
+    it 'loads sections by post_id and tag_id' do
+      post_tag = create(:post_tag)
+      section = create(:post_tag_section,
+                       post: post_tag.post,
+                       tag: post_tag.tag,
+                       begin_ms: 1000,
+                       end_ms: 2000)
+
+      expect(post_tag.sections).to contain_exactly(section)
+    end
+
+    it 'does not load sections for another tag on the same post' do
+      post = create(:post)
+      tag = create(:tag)
+      other_tag = create(:tag)
+
+      post_tag = create(:post_tag, post:, tag:)
+      create(:post_tag_section,
+             post:,
+             tag: other_tag,
+             begin_ms: 1000,
+             end_ms: 2000)
+
+      expect(post_tag.sections).to be_empty
+    end
+
+    it 'allows open-ended sections' do
+      post_tag = create(:post_tag)
+      section = create(:post_tag_section,
+                       post: post_tag.post,
+                       tag: post_tag.tag,
+                       begin_ms: 1000,
+                       end_ms: nil)
+
+      expect(section).to be_valid
+      expect(post_tag.sections).to contain_exactly(section)
+    end
+  end
+end

backend/spec/models/tag_spec.rb

@@ -19,6 +19,95 @@ RSpec.describe Tag, type: :model do
         expect(error.tag_names).to eq([deprecated_tag.name])
       }
     end
+
+    it 'rejects invalid section literals instead of treating them as zero' do
+      expect {
+        described_class.normalise_tags!(
+          ['normalise_invalid_section[1:aa-2:00]'],
+          with_sections: true
+        )
+      }.to raise_error(Tag::SectionLiteralParseError)
+    end
+
+    it 'parses open-ended section literals' do
+      result = described_class.normalise_tags!(
+        ['伊地知ニジカ[1:00-]'],
+        with_sections: true
+      )
+
+      tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
+      expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, nil]])
+    end
+
+    it 'parses omitted begin as zero' do
+      result = described_class.normalise_tags!(
+        ['伊地知ニジカ[-1:00]'],
+        with_sections: true
+      )
+
+      tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
+      expect(result.fetch(:sections).fetch(tag.id)).to eq([[0, 60_000]])
+    end
+
+    it 'treats fully open section literals as plain tags' do
+      result = described_class.normalise_tags!(
+        ['伊地知ニジカ[-]'],
+        with_sections: true
+      )
+
+      tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
+      expect(result.fetch(:sections)[tag.id]).to be_nil
+    end
+
+    it 'treats [0:00-] as a plain tag' do
+      result = described_class.normalise_tags!(
+        ['伊地知ニジカ[0:00-]'],
+        with_sections: true
+      )
+
+      tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
+      expect(result.fetch(:sections)[tag.id]).to be_nil
+    end
+
+    it 'expands zero-width sections to one millisecond' do
+      result = described_class.normalise_tags!(
+        ['伊地知ニジカ[1:00-1:00]'],
+        with_sections: true
+      )
+
+      tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
+      expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, 60_001]])
+    end
+
+    it 'swaps reversed section boundaries' do
+      result = described_class.normalise_tags!(
+        ['伊地知ニジカ[2:00-1:00]'],
+        with_sections: true
+      )
+
+      tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
+      expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, 120_000]])
+    end
+
+    it 'merges open-ended sections over later bounded sections' do
+      result = described_class.normalise_tags!(
+        ['伊地知ニジカ[1:00-][2:00-3:00]'],
+        with_sections: true
+      )
+
+      tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
+      expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, nil]])
+    end
+
+    it 'merges adjacent bounded and open-ended sections' do
+      result = described_class.normalise_tags!(
+        ['伊地知ニジカ[1:00-3:00][3:00-]'],
+        with_sections: true
+      )
+
+      tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
+      expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, nil]])
+    end
   end
 
   describe '.expand_parent_tags' do

backend/spec/requests/posts_spec.rb

@@ -54,6 +54,7 @@ RSpec.describe 'Posts API', type: :request do
             title: post.title,
             url: post.url,
             thumbnail_base: post.thumbnail_base,
+            video_ms: post.video_ms,
             tags: post.snapshot_tag_names.join(' '),
             parent_post_ids: post.snapshot_parent_post_ids.join(' '),
             original_created_from: post.original_created_from,
@@ -145,6 +146,22 @@ RSpec.describe 'Posts API', type: :request do
       expect(all_tag_names).to include("spec_tag")
     end
 
+    it 'keeps children and sections keys in non-detail tag responses' do
+      PostTagSection.create!(post: hit_post, tag:, begin_ms: 1_000, end_ms: nil)
+
+      get '/posts'
+
+      expect(response).to have_http_status(:ok)
+
+      hit_json = json.fetch('posts').find { |post| post['id'] == hit_post.id }
+      tag_json = hit_json.fetch('tags').find { |item| item['name'] == 'spec_tag' }
+
+      expect(tag_json.fetch('children')).to eq([])
+      expect(tag_json.fetch('sections')).to eq([
+        { 'begin_ms' => 1_000, 'end_ms' => nil }
+      ])
+    end
+
     context "when q is provided" do
       it "filters posts by q (hit case)" do
         get "/posts", params: { tags: "spec_tag" }
@@ -845,6 +862,198 @@ RSpec.describe 'Posts API', type: :request do
       expect(saved_names).not_to include('deprecated_parent', 'deprecated_grandparent')
     end
 
+    it 'returns validation error for an invalid section literal' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'invalid section literal',
+        url: 'https://example.com/invalid-section-literal',
+        tags: 'spec_tag[1:aa-2:00]',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json).to include(
+        'type' => 'validation_error',
+        'message' => '入力内容を確認してください．'
+      )
+      expect(json.fetch('errors')).to include(
+        'tags' => ['タグ区間の記法が不正です．']
+      )
+    end
+
+    it 'creates a video post with duration' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'video post',
+        url: 'https://example.com/video-post',
+        tags: '動画 spec_tag',
+        duration: '3:00.500',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:created)
+      expect(Post.find(json.fetch('id')).video_ms).to eq(180_500)
+      expect(json.fetch('video_ms')).to eq(180_500)
+    end
+
+    it 'creates a video post with number input duration seconds' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'video post seconds',
+        url: 'https://example.com/video-post-seconds',
+        tags: '動画 spec_tag',
+        duration: '180.5',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:created)
+      expect(Post.find(json.fetch('id')).video_ms).to eq(180_500)
+      expect(json.fetch('video_ms')).to eq(180_500)
+    end
+
+    it 'clears video_ms when the saved tags do not include 動画' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'non video post',
+        url: 'https://example.com/non-video-post',
+        tags: 'spec_tag',
+        duration: '3:00',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:created)
+      expect(Post.find(json.fetch('id')).video_ms).to be_nil
+    end
+
+    it 'returns validation error when a bounded section exceeds duration' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'too long section',
+        url: 'https://example.com/too-long-section',
+        tags: '動画 伊地知ニジカ[2:50-3:10]',
+        duration: '3:00',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to include(
+        'video_ms' => ['タグ区間の終端が動画時間を超えてゐます．']
+      )
+    end
+
+    it 'saves open-ended sections with end_ms NULL' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'open ended section literal',
+        url: 'https://example.com/open-ended-section-literal',
+        tags: '動画 伊地知ニジカ[1:00-]',
+        duration: '3:00',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:created)
+
+      created_post = Post.find(json.fetch('id'))
+      tag = Tag.joins(:tag_name).find_by!(tag_names: { name: '伊地知ニジカ' })
+      section = PostTagSection.find_by!(post: created_post, tag:)
+
+      expect(section.begin_ms).to eq(60_000)
+      expect(section.end_ms).to be_nil
+    end
+
+    it 'does not save sections for [-]' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'fully open section literal',
+        url: 'https://example.com/fully-open-section-literal',
+        tags: '伊地知ニジカ[-]',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:created)
+
+      created_post = Post.find(json.fetch('id'))
+      tag = Tag.joins(:tag_name).find_by!(tag_names: { name: '伊地知ニジカ' })
+      expect(PostTagSection.find_by(post: created_post, tag:)).to be_nil
+    end
+
+    it 'does not save sections for [0:00-]' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'zero open ended section literal',
+        url: 'https://example.com/zero-open-ended-section-literal',
+        tags: '伊地知ニジカ[0:00-]',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:created)
+
+      created_post = Post.find(json.fetch('id'))
+      tag = Tag.joins(:tag_name).find_by!(tag_names: { name: '伊地知ニジカ' })
+      expect(PostTagSection.find_by(post: created_post, tag:)).to be_nil
+    end
+
+    it 'returns end_ms null for open-ended sections in show response' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'show open ended section literal',
+        url: 'https://example.com/show-open-ended-section-literal',
+        tags: '動画 伊地知ニジカ[1:00-]',
+        duration: '3:00',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:created)
+
+      get "/posts/#{ json.fetch('id') }"
+
+      expect(response).to have_http_status(:ok)
+      tag_json = json.fetch('tags').find { |item| item['name'] == '伊地知ニジカ' }
+      expect(tag_json.fetch('sections')).to eq([
+        { 'begin_ms' => 60_000, 'end_ms' => nil }
+      ])
+    end
+
+    it 'allows open-ended sections when begin is within duration' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'valid open ended section literal',
+        url: 'https://example.com/valid-open-ended-section-literal',
+        tags: '動画 伊地知ニジカ[1:00-]',
+        duration: '3:00',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:created)
+    end
+
+    it 'rejects open-ended sections when begin equals duration' do
+      sign_in_as(member)
+
+      post '/posts', params: post_write_params(
+        title: 'invalid open ended section literal',
+        url: 'https://example.com/invalid-open-ended-section-literal',
+        tags: '動画 伊地知ニジカ[3:00-]',
+        duration: '3:00',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to include(
+        'video_ms' => ['タグ区間の開始が動画時間以上です．']
+      )
+    end
+
     context "when nico tag already exists in tags" do
       before do
         Tag.find_undiscard_or_create_by!(

frontend/AGENTS.md

@@ -118,7 +118,7 @@ pass or the remaining failure is clearly blocked.
   short Japanese labels that fit the control.
 - Preserve existing Japanese tone and orthography in nearby UI text, including
   old-kana wording where the file already uses it.
-- When adding dynamic tag color classes, update `tailwind.config.js` safelist
+- When adding dynamic tag colour classes, update `tailwind.config.js` safelist
   if the class cannot be statically detected.
 - Do not introduce new UI libraries or production dependencies without approval.
 
@@ -126,15 +126,439 @@ pass or the remaining failure is clearly blocked.
 
 - Preserve compact TSX expression shapes such as inline ternary branches and
   closing `</div>)` forms when nearby code uses them.
+- Treat TSX formatting rules as hard constraints, not preferences. Before
+  finishing a TSX edit, inspect the edited hunks for closing `)`, `]`, and `}`
+  placement and fix violations instead of relying on formatter defaults.
+- After every TSX edit, perform a style-only self-review of the edited hunks
+  before running verification or reporting completion. The task is not complete
+  while any edited TSX hunk violates these local formatting rules.
+- The TSX self-review must classify every edited leading or trailing `)`, `]`,
+  and `}` by syntax role before deciding whether it is valid. Do not apply a
+  rule by glyph alone. A closing `)` for a function parameter list is different
+  from a closing `)` for a function call. A closing `}` for a block is different
+  from a closing `}` for an object, type literal, import list, or destructuring
+  pattern.
+- The TSX self-review must confirm there are no common Prettier-style React
+  component declarations with a multi-line destructured parameter.
+- The TSX self-review must confirm multi-line function declaration parameter
+  `)` placement follows the detailed parameter-list rules below.
+- The TSX self-review must confirm call-expression `)` is never at the
+  beginning of a line.
+- The TSX self-review must confirm object/type/import/destructuring `}` is not
+  at the beginning of a line.
+- The TSX self-review must confirm multi-line function/lambda/callback/block
+  `}` is on its own line and never at the end of the previous line.
+- The TSX self-review must confirm array `]` is not at the beginning of a line.
+- The TSX self-review must confirm JSX closing markers and closing parentheses
+  keep the surrounding compact style.
+- The TSX self-review must confirm leading indentation follows 4-space logical
+  indentation with tabs only as leading 8-space compression.
 - For long Tailwind `className` strings, wrap across lines only when needed.
 - Keep continuation indentation aligned with the 4-space logical indentation
   rule, using tabs only as leading 8-space compression.
+- In TypeScript and TSX function declarations, including `const` arrow
+  function declarations, classify the parameter list before placing the closing
+  `)`.
+- If the parameter list itself is given its own multi-line block after the
+  function's opening `(`, put the closing parameter `)` at the beginning of its
+  own line before the return type or `=>`.
+- If the only line break is inside a parameter's inline type, object type, or
+  destructuring shape, and the parameter list itself is not split as a separate
+  block, keep the closing parameter `)` on the same line as that parameter's
+  final `}`. In this case, moving `)` to a new line is wrong.
+- Do not write React component declarations in the common Prettier form
+  `const Component = ({ ... }) => (` when the destructured parameter spans
+  multiple lines. Use the project form with the opening `(` after `=`, the
+  destructured object as the argument, and the closing parameter `)` on its own
+  line before `=>`.
+- In TypeScript and TSX, never place a closing parenthesis at the beginning of
+  a line except for a multi-line function declaration parameter list.
+- Never place a closing square bracket at the beginning of a line.
+- For object literals, type literals, import/export named bindings, destructuring
+  patterns, and other associative-array-style braces, do not place the closing
+  brace at the beginning of a line. Keep `}` on the same line as the final
+  property, binding, or specifier unless that would violate the line limit.
+  Function, lambda, callback, and block closing braces are exempt and should
+  stay on their own line when that fits the local style. When a function,
+  lambda, callback, or block body spans multiple lines, do not put its closing
+  `}` at the end of the previous line.
+- For arrays and tuple-like lists, do not place the closing `]` at the
+  beginning of a line. Keep `]` on the same line as the final element unless
+  that would violate the line limit.
+- For function and method calls, do not place the closing `)` at the beginning
+  of a line. The only TypeScript/TSX exception is the closing parameter `)` of a
+  multi-line function declaration.
 - Do not add braces around `if`, `else`, or `for` bodies when the body is a
   single physical line.
 - Always add braces around `if`, `else`, or `for` bodies when the body spans
   two or more physical lines, even if it is one statement.
+- Use correct British English spelling for new identifiers, filenames,
+  component names, helper names, comments, and developer-facing prose unless
+  editing an already established American-English API that must keep its
+  existing spelling for compatibility.
+- Prefer British English spellings such as `behaviour`, `colour`, `realise`,
+  `theatre`, `centre`, `favourite`, `optimise`, and `catalogue`.
+- Avoid American or Canadian spellings such as `behavior`, `color`, `realize`,
+  `theater`, `center`, `favorite`, `optimize`, and `catalog`.
+- Even when an external library or API uses the wrong spelling, prefer to
+  correct it at the local boundary and use proper British English names in this
+  frontend codebase. For example, prefer
+  `import { color: colour } from '@external-lib'` over spreading `color`
+  through local code.
+- Apply the same boundary correction to object destructuring, wrapper helpers,
+  adapter layers, and local variable names when doing so does not break the
+  external contract.
+- In this frontend, prefer names such as `BehaviourSettingsSection.tsx`, not
+  `BehaviorSettingsSection.tsx`.
 - Avoid reformatting unrelated JSX.
 
+### Delimiter decision table
+
+Use this table before accepting any edited TypeScript or TSX hunk. The table is
+more authoritative than formatter habit.
+
+#### Import and export named bindings
+
+Bad:
+
+```ts
+import {
+    Button,
+    Card,
+} from '@/components/ui'
+```
+
+Good:
+
+```ts
+import { Button,
+	 Card } from '@/components/ui'
+```
+
+Also acceptable when short:
+
+```ts
+import { Button, Card } from '@/components/ui'
+```
+
+Rule: named-binding `}` is associative-array-style syntax. It must not be alone
+at the beginning of a line. Prefer keeping `{` with the first binding and `}`
+with the final binding when this fits the line limit.
+
+#### Type literals
+
+Bad:
+
+```ts
+type Props = {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+```
+
+Good:
+
+```ts
+type Props = {
+    open: boolean
+    onOpenChange: (open: boolean) => void }
+```
+
+Rule: type-literal `}` is not a block close. It must stay on the same line as
+the final property unless that would break the hard line limit.
+
+#### Object literals
+
+Bad:
+
+```ts
+const value = {
+    open,
+    activeScope,
+}
+```
+
+Good:
+
+```ts
+const value = {
+    open,
+    activeScope }
+```
+
+Bad:
+
+```ts
+const value = useMemo (() => ({
+    open,
+    activeScope,
+}), [open, activeScope])
+```
+
+Good:
+
+```ts
+const value = useMemo (() => ({
+    open,
+    activeScope }), [open, activeScope])
+```
+
+Rule: object-literal `}` is associative-array-style syntax. It must not be on a
+line by itself. Keep it with the final property, and keep call `)` off the
+beginning of a line.
+
+#### Destructuring parameters
+
+Bad:
+
+```tsx
+const Component: FC<Props> = ({
+    open,
+    onOpenChange,
+}) => {
+  return null
+}
+```
+
+Good:
+
+```tsx
+const Component: FC<Props> = (
+    { open,
+      onOpenChange },
+) => {
+  return null
+}
+```
+
+Rule: when a React component or helper takes a destructured object parameter
+that spans multiple lines, do not use the Prettier-style `= ({ ... }) =>`
+shape. Put the function parameter list on its own lines. The destructuring `}`
+stays with the final binding. The parameter-list `)` is then allowed and
+required at the beginning of its own line.
+
+#### Inline typed destructuring parameter
+
+Good:
+
+```ts
+const RouteTransitionWrapper = ({ user, setUser }: {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>> }) => {
+  return null
+}
+```
+
+Bad:
+
+```ts
+const RouteTransitionWrapper = ({ user, setUser }: {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>>
+}) => {
+  return null
+}
+```
+
+Rule: this is not a separately split parameter-list block. The line break is
+inside the inline type. Keep the type-literal `}` and parameter-list `)` on the
+same line as the final type property.
+
+#### Multi-line normal parameter list
+
+Bad:
+
+```ts
+const updateDraft = <Key extends keyof Settings,> (
+    key: Key,
+    value: Settings[Key]) => {
+  return null
+}
+```
+
+Good:
+
+```ts
+const updateDraft = <Key extends keyof Settings,> (
+    key:    Key,
+    value:  Settings[Key],
+) => {
+  return null
+}
+```
+
+Rule: when the parameter list itself is split across multiple parameter lines,
+the closing parameter `)` goes at the beginning of its own line before `=>` or
+the return type.
+
+#### Function and callback blocks
+
+Bad:
+
+```ts
+const handleSave = () => { save ()
+}
+```
+
+Bad:
+
+```ts
+const handleSave = () => {
+  save () }
+```
+
+Good:
+
+```ts
+const handleSave = () => {
+  save ()
+}
+```
+
+Rule: block `}` closes executable code, not associative data. Multi-line
+function, lambda, callback, `if`, `for`, `switch`, and similar block braces
+belong on their own line.
+
+#### Function and method calls
+
+Bad:
+
+```ts
+const value = compute (
+    first,
+    second
+)
+```
+
+Good:
+
+```ts
+const value = compute (
+    first,
+    second)
+```
+
+Rule: call-expression `)` must not be at the beginning of a line. The exception
+for leading `)` applies only to function declaration parameter lists, never to
+calls.
+
+#### JSX closing markers
+
+Bad:
+
+```tsx
+<Button
+    type="button"
+    onClick={handleSave}
+>
+  保存
+</Button>
+)
+```
+
+Good:
+
+```tsx
+<Button
+    type="button"
+    onClick={handleSave}>
+  保存
+</Button>)
+```
+
+Bad:
+
+```tsx
+<Input
+    value={value}
+    onChange={handleChange}
+/>
+```
+
+Good:
+
+```tsx
+<Input
+    value={value}
+    onChange={handleChange}/>
+```
+
+Rule: keep `>` or `/>` with the final prop, and keep JSX closing parentheses in
+the local compact form such as `</div>)`.
+
+#### Arrays and tuples
+
+Bad:
+
+```ts
+const items = [
+    first,
+    second,
+]
+```
+
+Good:
+
+```ts
+const items = [
+    first,
+    second]
+```
+
+Good when short:
+
+```ts
+const items = [first, second]
+```
+
+Rule: array and tuple `]` must not be at the beginning of a line. Keep it with
+the final element unless that would break the hard line limit.
+
+#### Single-line braces
+
+Good:
+
+```ts
+const next = { ...current, enabled: true }
+const tag = { id, name }
+```
+
+Bad:
+
+```tsx
+<Component prop={ value }/>
+```
+
+Good:
+
+```tsx
+<Component prop={value}/>
+```
+
+Rule: JavaScript object braces on one line get one inner space. JSX expression
+braces do not get inner spaces.
+
+#### Final TSX self-review checklist
+
+Before reporting completion after a TypeScript or TSX edit, check the edited
+hunks line by line:
+
+1. No import/export/type/object/destructuring `}` appears alone at the beginning
+   of a line.
+2. No call-expression `)` appears at the beginning of a line.
+3. Any leading `)` is definitely closing a function declaration parameter list,
+   not a call.
+4. Any parameter-list `)` at the end of a line is valid because the parameter
+   list itself was not split, only an inline type or destructuring shape was.
+5. No array or tuple `]` appears at the beginning of a line.
+6. Multi-line executable block `}` is on its own line.
+7. JSX `>` and `/>` stay with the final prop unless nearby code proves
+   otherwise.
+8. JSX closing parentheses keep the compact local style.
+9. Leading indentation is 4-space logical indentation with tabs used only as
+   leading 8-space compression.
+10. No line has trailing whitespace.
+
 ## Lint and build constraints
 
 - ESLint uses `@eslint/js`, `typescript-eslint`, `eslint-plugin-react-hooks`,

frontend/src/App.tsx

@@ -1,5 +1,5 @@
-import { AnimatePresence, LayoutGroup, motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
+import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
+import { useEffect, useMemo, useState } from 'react'
 import { BrowserRouter,
 	 Navigate,
 	 Route,
@@ -12,6 +12,15 @@ import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
+import { applyClientAppearance,
+	 CLIENT_SETTINGS_EVENT,
+	 fetchUserSettings,
+	 getClientAnimationMode,
+	 getClientThemeMode,
+	 seedClientThemeMode } from '@/lib/settings'
+
+import type { ClientAnimationMode } from '@/lib/settings'
+import { KeyboardShortcutsProvider } from '@/lib/useKeyboardShortcuts'
 import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
 import MaterialBasePage from '@/pages/materials/MaterialBasePage'
 import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
@@ -103,6 +112,42 @@ const PostDetailRoute = ({ user }: { user: User | null }) => {
 const App: FC = () => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
+  const [animationMode, setAnimationMode] =
+      useState<ClientAnimationMode> (() => getClientAnimationMode ())
+
+  const appLayoutTransition = useMemo (
+      () => (
+	  animationMode === 'off'
+	  ? { duration: 0 }
+	  : animationMode === 'reduced'
+	    ? { duration: .08, ease: 'linear' as const }
+	    : { duration: .2, ease: 'easeOut' as const }
+      ),
+      [animationMode],
+  )
+
+  useEffect (() => {
+    applyClientAppearance ()
+
+    const mediaQuery = window.matchMedia ('(prefers-color-scheme: dark)')
+    const handleThemeChange = () => {
+      if (getClientThemeMode () === 'system')
+	applyClientAppearance ()
+    }
+
+    mediaQuery.addEventListener ('change', handleThemeChange)
+    return () => mediaQuery.removeEventListener ('change', handleThemeChange)
+  }, [])
+
+  useEffect (() => {
+    const handleClientSettingsChange = () => {
+      setAnimationMode (getClientAnimationMode ())
+    }
+
+    window.addEventListener (CLIENT_SETTINGS_EVENT, handleClientSettingsChange)
+    return () =>
+	window.removeEventListener (CLIENT_SETTINGS_EVENT, handleClientSettingsChange)
+  }, [])
 
   useEffect (() => {
     const createUser = async () => {
@@ -137,6 +182,24 @@ const App: FC = () => {
       createUser ()
   }, [])
 
+  useEffect (() => {
+    if (!(user))
+      return
+
+    void (async () => {
+      try
+      {
+	const settings = await fetchUserSettings ()
+	seedClientThemeMode (settings.theme)
+	applyClientAppearance ()
+      }
+      catch
+      {
+	return
+      }
+    }) ()
+  }, [user])
+
   switch (status)
   {
   case 503:
@@ -149,19 +212,30 @@ const App: FC = () => {
 	{import.meta.env.DEV && <DevModeWatermark/>}
 
 	<BrowserRouter>
-	  <DialogueProvider>
-	    <LayoutGroup>
-	      <motion.div
-		  layout="position"
-		  transition={{ layout: { duration: .2, ease: 'easeOut' } }}
-		  className="relative flex flex-col h-dvh w-full overflow-y-hidden">
-		<TopNav user={user}/>
-		<RouteTransitionWrapper user={user} setUser={setUser}/>
-	      </motion.div>
-	    </LayoutGroup>
+	  <KeyboardShortcutsProvider>
+	    <DialogueProvider>
+	      <MotionConfig
+		  reducedMotion={
+		      animationMode === 'normal'
+		      ? 'never'
+		      : animationMode === 'reduced'
+			? 'user'
+			: 'always'
+		  }>
+		<LayoutGroup>
+		  <motion.div
+		      layout={animationMode === 'off' ? false : 'position'}
+		      transition={{ layout: appLayoutTransition }}
+		      className="relative flex flex-col h-dvh w-full overflow-y-hidden">
+		    <TopNav user={user}/>
+		    <RouteTransitionWrapper user={user} setUser={setUser}/>
+		  </motion.div>
+		</LayoutGroup>
+	      </MotionConfig>
 
-	    <Toaster/>
-	  </DialogueProvider>
+	      <Toaster/>
+	    </DialogueProvider>
+	  </KeyboardShortcutsProvider>
 	</BrowserRouter>
       </>)
 }

frontend/src/components/DraggableDroppableTagRow.tsx

@@ -87,10 +87,13 @@ const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTa
 	    setDropRef (node)
 	  }}
 	  style={style}
-	  className={cn ('rounded select-none', over && 'ring-2 ring-offset-2')}
+	  className={cn (
+	      'min-w-0 max-w-full overflow-hidden rounded select-none',
+	      over && 'ring-2 ring-offset-2')}
 	  {...attributes}
 	  {...listeners}>
 	<motion.div
+	    className="flex min-w-0 max-w-full items-baseline overflow-hidden"
 	    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
 	    layoutId={`tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
 	  <TagLink tag={tag} nestLevel={nestLevel}/>
@@ -98,4 +101,4 @@ const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTa
       </div>)
 }
 
-export default DraggableDroppableTagRow
+export default DraggableDroppableTagRow

frontend/src/components/MaterialSidebar.tsx

@@ -318,12 +318,20 @@ const MobileMaterialTreeNode: FC<{ depth?: number
 	    <TagLink
 		tag={sidebarTagToTag (tag)}
 		title={tag.name}
+		truncateOnMobile
 		withCount={false}
 		withWiki={false}
 		to={materialPath (tag.id, materialFilter)}
 		className="block overflow-hidden text-ellipsis whitespace-nowrap
 			   [max-inline-size:var(--tag-link-inline-size)]
-			   [max-height:var(--tag-link-inline-size)]"/>
+			   [max-height:var(--tag-link-inline-size)]
+			   [&_.tag-marquee]:block
+			   [&_.tag-marquee]:h-full
+			   [&_.tag-marquee]:overflow-hidden
+			   [&_.tag-marquee__static]:h-full
+			   [&_.tag-marquee__static]:overflow-hidden
+			   [&_.tag-marquee__static]:text-ellipsis
+			   [&_.tag-marquee__static]:[text-overflow:ellipsis]"/>
 	  </div>
 	  {tag.hasChildren && (
 	      <button
@@ -480,25 +488,23 @@ const MaterialSidebar: FC = () => {
 	  </div>
 	</div>
 
-	<div className="hidden md:block">
-	  <SidebarComponent>
-	    <div className="space-y-4">
-	      <MaterialFilterButtons
-		  materialFilter={materialFilter}
-		  onChange={handleFilterChange}/>
-	      {isLoading && (
-		  <p className="text-sm text-neutral-500 dark:text-stone-400">読込中……</p>)}
-	      {isError && (
-		  <p className="text-sm text-red-600 dark:text-red-300">
-		    タグ一覧の取得に失敗しました．
-		  </p>)}
-	      {(!isLoading && !isError) && (
-		  <ul>
-		    {renderDesktopTree (visibleRootTags)}
-		  </ul>)}
-	    </div>
-	  </SidebarComponent>
-	</div>
+	<SidebarComponent sidebarKey="materials" className="hidden md:block">
+	  <div className="space-y-4">
+	    <MaterialFilterButtons
+		materialFilter={materialFilter}
+		onChange={handleFilterChange}/>
+	    {isLoading && (
+		<p className="text-sm text-neutral-500 dark:text-stone-400">読込中……</p>)}
+	    {isError && (
+		<p className="text-sm text-red-600 dark:text-red-300">
+		  タグ一覧の取得に失敗しました．
+		</p>)}
+	    {(!isLoading && !isError) && (
+		<ul>
+		  {renderDesktopTree (visibleRootTags)}
+		</ul>)}
+	  </div>
+	</SidebarComponent>
       </>)
 }
 

frontend/src/components/PostEditForm.test.tsx

@@ -66,4 +66,27 @@ describe ('PostEditForm', () => {
     expect (onSave).toHaveBeenCalledWith (expect.objectContaining ({ versionNo: 5 }))
     expect (toastApi.toast).toHaveBeenCalledWith ({ description: '更新しました．' })
   })
+
+  it ('preserves duration while the video tag is temporarily removed', () => {
+    const post = buildPost ({
+      videoMs: 180_500,
+      tags:    [
+        buildTag ({ id: 1, name: '動画', category: 'general' }),
+        buildTag ({ id: 2, name: 'general-tag', category: 'general' }),
+      ],
+    })
+
+    render (<PostEditForm post={post} onSave={vi.fn ()}/>)
+
+    expect (screen.getByRole ('spinbutton')).toHaveValue (180.5)
+
+    const tags = screen.getAllByRole ('textbox')[2]
+    fireEvent.change (tags, { target: { value: 'general-tag' } })
+    expect (screen.queryByRole ('spinbutton')).not.toBeInTheDocument ()
+
+    fireEvent.change (tags, {
+      target: { value: '動画 general-tag' },
+    })
+    expect (screen.getByRole ('spinbutton')).toHaveValue (180.5)
+  })
 })

frontend/src/components/PostEditForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
@@ -9,29 +9,35 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { isApiError } from '@/lib/api'
 import { updatePost } from '@/lib/posts'
-import { inputClass } from '@/lib/utils'
+import { inputClass, msToTime } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC, FormEvent } from 'react'
 
-import type { Post, Tag } from '@/types'
+import type { Post, TagWithSections } from '@/types'
 
 type PostFormField =
-    'parentPostIds' | 'tags' | 'originalCreatedAt'
+    'parentPostIds' | 'tags' | 'videoMs' | 'originalCreatedAt'
+
+const videoMsToDurationValue = (videoMs: number | null): string =>
+    videoMs == null ? '' : String (videoMs / 1_000)
 
 
-const tagsToStr = (tags: Tag[]): string => {
-  const result: Tag[] = []
+const tagsToStr = (tags: TagWithSections[]): string => {
+  const result: Omit<TagWithSections, 'children'>[] = []
 
-  const walk = (tag: Tag) => {
+  const walk = (tag: TagWithSections) => {
     const { children, ...rest } = tag
     result.push (rest)
-    children?.forEach (walk)
+    children.forEach (walk)
   }
 
   tags.filter (t => t.category !== 'nico').forEach (walk)
 
-  return [...(new Set (result.map (t => t.name)))].join (' ')
+  return [...(new Set (result.map (t =>
+      `${ t.name }${ t.sections
+		     .map (s => `[${ msToTime (s.beginMs) }-${ s.endMs == null ? '' : msToTime (s.endMs) }]`)
+		     .join ('') }`)))].join (' ')
 }
 
 
@@ -41,6 +47,7 @@ type Props = { post:    Post
 
 const PostEditForm: FC<Props> = ({ post, onSave }) => {
   const [disabled, setDisabled] = useState (false)
+  const [duration, setDuration] = useState<string> (videoMsToDurationValue (post.videoMs))
   const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
       useValidationErrors<PostFormField> ()
   const [originalCreatedBefore, setOriginalCreatedBefore] =
@@ -52,6 +59,10 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
   const [tags, setTags] = useState<string> ('')
   const [title, setTitle] = useState (post.title)
 
+  const videoFlg =
+      useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
+	       [tags])
+
   const dialogue = useDialogue ()
 
   const update = async (...args: Parameters<typeof updatePost>) => {
@@ -63,6 +74,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
       onSave ({ ...post,
 		versionNo:              data.versionNo,
 		title:                  data.title,
+		videoMs:                data.videoMs,
 		tags:                   data.tags,
 		parentPosts:            data.parentPosts,
 		childPosts:             data.childPosts,
@@ -102,6 +114,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	{
 	  // TODO: 差分 UI
 	  await update ({ id: post.id, title, tags, parentPostIds,
+			  duration: videoFlg ? duration : null,
 			  originalCreatedFrom, originalCreatedBefore },
 			{ baseVersionNo: post.versionNo, merge: true })
 	  return
@@ -110,6 +123,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
       if (action === 'overwrite')
 	{
 	  await update ({ id: post.id, title, tags, parentPostIds,
+			  duration: videoFlg ? duration : null,
 			  originalCreatedFrom, originalCreatedBefore },
 			{ baseVersionNo: post.versionNo, force: true })
 	  return
@@ -124,6 +138,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
     try
     {
       await update ({ id: post.id, title, tags, parentPostIds,
+		      duration: videoFlg ? duration : null,
 		      originalCreatedFrom, originalCreatedBefore },
 		    { baseVersionNo: post.versionNo })
     }
@@ -134,7 +149,8 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
   }
 
   useEffect (() => {
-    setTags(tagsToStr (post.tags))
+    setTags (tagsToStr (post.tags))
+    setDuration (videoMsToDurationValue (post.videoMs))
   }, [post])
 
   return (
@@ -149,7 +165,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 		  disabled={disabled}
 		  className={inputClass (invalid)}
 		  value={title ?? ''}
-		  onChange={ev => setTitle (ev.target.value)}/>)}
+		  onChange={e => setTitle (e.target.value)}/>)}
 	</FormField>
 
 	{/* 親投稿 */}
@@ -181,6 +197,20 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    setOriginalCreatedBefore={setOriginalCreatedBefore}
 	    errors={fieldErrors.originalCreatedAt}/>
 
+	{/* 動画時間 */}
+	{videoFlg && (
+	    <FormField label="動画時間" messages={fieldErrors.videoMs}>
+	      {({ invalid }) => (
+		  <input
+		      type="number"
+		      min="0.001"
+		      step="0.001"
+		      disabled={disabled}
+		      className={inputClass (invalid)}
+		      value={duration}
+		      onChange={e => setDuration (e.target.value)}/>)}
+	    </FormField>)}
+
 	{/* 送信 */}
 	<Button type="submit" disabled={disabled}>
 	  更新
@@ -188,4 +218,5 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
       </form>)
 }
 
+
 export default PostEditForm

frontend/src/components/PostEmbed.tsx

@@ -4,6 +4,8 @@ import YoutubeEmbed from 'react-youtube'
 import NicoViewer from '@/components/NicoViewer'
 import TwitterEmbed from '@/components/TwitterEmbed'
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
+import { Button } from '@/components/ui/button'
+import { getClientEmbedAutoLoadMode } from '@/lib/settings'
 
 import type { FC, RefObject } from 'react'
 
@@ -24,16 +26,18 @@ type Props = {
     onError?:           (data: unknown) => void }
 
 
-const PostEmbed: FC<Props> = ({
-    ref,
-    post,
-    onLoadComplete,
-    onMetadataChange,
-    onVideoReady,
-    onPlaybackChange,
-    onError,
-}) => {
+const PostEmbed: FC<Props> = (
+    { ref,
+      post,
+      onLoadComplete,
+      onMetadataChange,
+      onVideoReady,
+      onPlaybackChange,
+      onError },
+) => {
   const dialogue = useDialogue ()
+  const embedAutoLoadMode = getClientEmbedAutoLoadMode ()
+  const [manualLoadRequested, setManualLoadRequested] = useState (false)
   const [framed, setFramed] = useState (false)
   const [youtubePlayer, setYoutubePlayer] = useState<YouTubePlayer | null> (null)
   const niconicoVideoReadyRef = useRef (false)
@@ -105,6 +109,10 @@ const PostEmbed: FC<Props> = ({
     niconicoVideoReadyRef.current = false
   }, [post.url])
 
+  useEffect (() => {
+    setManualLoadRequested (false)
+  }, [embedAutoLoadMode, post.url])
+
   useEffect (() => {
     if (!(youtubePlayer) || !(onPlaybackChange))
       return
@@ -117,6 +125,28 @@ const PostEmbed: FC<Props> = ({
   }, [onPlaybackChange, reportYoutubePlayback, youtubePlayer])
 
   const url = new URL (post.url)
+  const shouldLoadEmbed =
+      embedAutoLoadMode === 'auto'
+      || (
+	  embedAutoLoadMode === 'manual'
+	  && manualLoadRequested
+      )
+
+  const externalLink = (
+      <a href={post.url} target="_blank" rel="noreferrer">
+	外部ページを開く
+      </a>)
+
+  const manualLoadControl = (
+      <div className="flex flex-wrap items-center gap-3">
+	<Button
+	    type="button"
+	    variant="outline"
+	    onClick={() => setManualLoadRequested (true)}>
+	  埋め込みを読込
+	</Button>
+	{externalLink}
+      </div>)
 
   switch (url.hostname.split ('.').slice (-2).join ('.'))
   {
@@ -128,6 +158,11 @@ const PostEmbed: FC<Props> = ({
 
       const [videoId] = mVideoId
 
+      if (embedAutoLoadMode === 'off')
+	return externalLink
+      if (shouldLoadEmbed === false)
+	return manualLoadControl
+
       return (
 	  <NicoViewer
 	      ref={ref}
@@ -150,6 +185,11 @@ const PostEmbed: FC<Props> = ({
       const [userId] = mUserId
       const [statusId] = mStatusId
 
+      if (embedAutoLoadMode === 'off')
+	return externalLink
+      if (shouldLoadEmbed === false)
+	return manualLoadControl
+
       return <TwitterEmbed userId={userId} statusId={statusId}/>
     }
 
@@ -159,6 +199,11 @@ const PostEmbed: FC<Props> = ({
       if (!(videoId))
 	break
 
+      if (embedAutoLoadMode === 'off')
+	return externalLink
+      if (shouldLoadEmbed === false)
+	return manualLoadControl
+
       return (
 	  <YoutubeEmbed videoId={videoId} opts={{ playerVars: {
 	      playsinline:  1,
@@ -184,6 +229,11 @@ const PostEmbed: FC<Props> = ({
 		height={360}/>)
 	 : (
 	    <div>
+	      {embedAutoLoadMode === 'off'
+	       ? externalLink
+	       : embedAutoLoadMode === 'manual' && shouldLoadEmbed === false
+		 ? manualLoadControl
+		 : (
 	      <a href="#" onClick={async e => {
 		e.preventDefault ()
 
@@ -197,7 +247,7 @@ const PostEmbed: FC<Props> = ({
 		    confirmText: '表示' }))
 	      }}>
 		外部ページを表示
-	      </a>
+	      </a>)}
 	    </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' } })
-    setSuggestions (data.filter (t => t.postCount > 0))
-    setSuggestionsVsbl (suggestions.length > 0)
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
+	q: token,
+	nico: '0' } })
+    const nextSuggestions = data.filter (t => t.postCount > 0)
+    setSuggestions (nextSuggestions)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   return (

frontend/src/components/PostList.tsx

@@ -3,6 +3,7 @@ import { useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
+import { getClientThumbnailMode } from '@/lib/settings'
 import { cn } from '@/lib/utils'
 import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'
 
@@ -16,6 +17,7 @@ type Props = { posts:     Post[]
 
 const PostList: FC<Props> = ({ posts, onClick }) => {
   const location = useLocation ()
+  const thumbnailMode = getClientThumbnailMode ()
 
   const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)
 
@@ -54,22 +56,36 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
 		    }}
 		    onLayoutAnimationComplete={() => {
 		      if (!(cardRef.current))
-			return 
+			return
 
 		      cardRef.current.style.zIndex = ''
 		      cardRef.current.style.position = ''
 		    }}
 		    transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
-		  <img src={post.thumbnail || post.thumbnailBase || undefined}
-		       alt={post.title || post.url}
-		       title={post.title || post.url || undefined}
-		       loading={i < 12 ? 'eager' : 'lazy'}
-		       decoding="async"
-		       className="object-cover w-full h-full"/>
+		  {thumbnailMode === 'off'
+		   ? (
+		      <div className="flex h-full w-full items-center justify-center
+				      bg-muted text-center text-xs text-muted-foreground">
+			サムネイルなし
+		      </div>)
+		   : (
+		      <img
+			  src={post.thumbnail || post.thumbnailBase || undefined}
+			  alt={post.title || post.url}
+			  title={post.title || post.url || undefined}
+			  loading={
+			      thumbnailMode === 'light'
+			      ? 'lazy'
+			      : i < 12
+				? 'eager'
+				: 'lazy'
+			  }
+			  decoding="async"
+			  className="object-cover w-full h-full"/>)}
 		</motion.div>
 	      </PrefetchLink>)
 	})}
       </div>)
 }
 
-export default PostList
+export default PostList

frontend/src/components/ResponsiveMarqueeText.tsx

@@ -0,0 +1,250 @@
+import { cn } from '@/lib/utils'
+import { useEffect, useRef, useState } from 'react'
+
+import type { FC } from 'react'
+
+type Props = {
+    text:      string
+    className?: string
+    truncateOnMobile?: boolean
+    title?:    string }
+
+const DESKTOP_MARQUEE_MEDIA =
+    '(min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)'
+const MARQUEE_START_DELAY_MS = 1600
+const MARQUEE_END_HOLD_MS = 2400
+const MARQUEE_SCROLL_PX_PER_SECOND = 43
+const MIN_MARQUEE_OVERFLOW_PX = 1
+
+
+const ResponsiveMarqueeText: FC<Props> = (
+    { text, className, truncateOnMobile = false, title },
+) => {
+  const outerRef = useRef<HTMLSpanElement | null> (null)
+  const staticRef = useRef<HTMLSpanElement | null> (null)
+  const animatedRef = useRef<HTMLSpanElement | null> (null)
+  const animationRef = useRef<Animation | null> (null)
+  const timeoutRef = useRef<number | null> (null)
+  const rafRef = useRef<number | null> (null)
+  const [overflowPx, setOverflowPx] = useState (0)
+  const [desktopMarqueeEnabled, setDesktopMarqueeEnabled] = useState (false)
+  const [active, setActive] = useState (false)
+  const [marqueeVisible, setMarqueeVisible] = useState (false)
+
+  useEffect (() => {
+    const outer = outerRef.current
+    const inner = staticRef.current
+
+    if (!(outer) || !(inner))
+      return
+
+    const measure = () => {
+      const nextOverflow = Math.max (0, Math.ceil (inner.scrollWidth - outer.clientWidth))
+      setOverflowPx (prev => Math.abs (prev - nextOverflow) <= 1 ? prev : nextOverflow)
+    }
+
+    measure ()
+
+    const resizeObserver =
+	typeof ResizeObserver === 'undefined'
+	? null
+	: new ResizeObserver (() => {
+	    measure ()
+	  })
+
+    resizeObserver?.observe (outer)
+    resizeObserver?.observe (inner)
+    addEventListener ('resize', measure)
+
+    return () => {
+      resizeObserver?.disconnect ()
+      removeEventListener ('resize', measure)
+    }
+  }, [text])
+
+  useEffect (() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+      return
+
+    const media = window.matchMedia (DESKTOP_MARQUEE_MEDIA)
+    const update = () => {
+      setDesktopMarqueeEnabled (media.matches)
+    }
+
+    update ()
+    media.addEventListener ('change', update)
+
+    return () => {
+      media.removeEventListener ('change', update)
+    }
+  }, [])
+
+  useEffect (() => {
+    const clearScheduled = () => {
+      if (timeoutRef.current != null)
+        {
+          clearTimeout (timeoutRef.current)
+          timeoutRef.current = null
+        }
+      if (rafRef.current != null)
+        {
+          cancelAnimationFrame (rafRef.current)
+          rafRef.current = null
+        }
+      animationRef.current?.cancel ()
+      animationRef.current = null
+    }
+
+    const animated = animatedRef.current
+    const canMarquee = (
+        active
+        && desktopMarqueeEnabled
+        && overflowPx >= MIN_MARQUEE_OVERFLOW_PX
+        && animated != null)
+
+    const resetAnimated = () => {
+      const node = animatedRef.current
+
+      animationRef.current?.cancel ()
+      animationRef.current = null
+      node?.getAnimations?.().forEach (animation => {
+        animation.cancel ()
+      })
+
+      if (!(node))
+        return
+
+      node.style.transition = 'none'
+      node.style.transform = 'translateX(0)'
+    }
+
+    if (!canMarquee)
+      {
+        clearScheduled ()
+        resetAnimated ()
+        setMarqueeVisible (false)
+        return
+      }
+
+    let cancelled = false
+
+    const sleep = (ms: number) =>
+	new Promise<void> (resolve => {
+	  timeoutRef.current = window.setTimeout (() => {
+	    timeoutRef.current = null
+	    resolve ()
+	  }, ms)
+	})
+
+    const runLoop = async () => {
+      while (!cancelled)
+        {
+          resetAnimated ()
+          setMarqueeVisible (true)
+
+          await sleep (MARQUEE_START_DELAY_MS)
+          if (cancelled || !(animatedRef.current))
+            break
+
+          const moveDurationMs =
+	      overflowPx / MARQUEE_SCROLL_PX_PER_SECOND * 1000
+          const node = animatedRef.current
+
+          if (typeof node.animate === 'function')
+            {
+              const animation = node.animate (
+		  [
+		    { transform: 'translateX(0)' },
+		    { transform: `translateX(-${ overflowPx }px)` },
+		  ],
+		  { duration: moveDurationMs, easing: 'linear', fill: 'forwards' })
+              animationRef.current = animation
+              try
+              {
+                await animation.finished
+              }
+              catch
+              {
+                break
+              }
+
+              node.style.transform = `translateX(-${ overflowPx }px)`
+              animation.cancel ()
+              if (animationRef.current === animation)
+                animationRef.current = null
+            }
+          else
+            {
+              node.style.transition = `transform ${ moveDurationMs }ms linear`
+              await new Promise<void> (resolve => {
+                rafRef.current = requestAnimationFrame (() => {
+                  rafRef.current = null
+                  node.style.transform = `translateX(-${ overflowPx }px)`
+                  resolve ()
+                })
+              })
+              await sleep (moveDurationMs)
+              node.style.transition = 'none'
+              node.style.transform = `translateX(-${ overflowPx }px)`
+            }
+
+          if (cancelled)
+            break
+
+          await sleep (MARQUEE_END_HOLD_MS)
+          if (cancelled)
+            break
+
+          resetAnimated ()
+        }
+    }
+
+    void runLoop ()
+
+    return () => {
+      cancelled = true
+      clearScheduled ()
+      resetAnimated ()
+      setMarqueeVisible (false)
+    }
+  }, [active, desktopMarqueeEnabled, overflowPx, text])
+
+  return (
+      <span
+	  ref={outerRef}
+	  title={title ?? text}
+	  onMouseEnter={() => setActive (true)}
+	  onMouseLeave={() => setActive (false)}
+	  onFocus={() => setActive (true)}
+	  onBlur={() => setActive (false)}
+	  className={cn (
+	      'tag-marquee inline-block max-w-full min-w-0 align-bottom',
+	      (truncateOnMobile
+	       ? 'overflow-hidden text-ellipsis whitespace-nowrap'
+	       : 'whitespace-normal [overflow-wrap:anywhere]'),
+	      'md:overflow-hidden md:whitespace-nowrap',
+	      className)}>
+	<span
+	    ref={staticRef}
+	    className={cn (
+		'tag-marquee__static block max-w-full',
+		(truncateOnMobile
+		 ? 'overflow-hidden text-ellipsis whitespace-nowrap'
+		 : 'whitespace-normal [overflow-wrap:anywhere]'),
+		'md:overflow-hidden md:text-ellipsis md:whitespace-nowrap',
+		marqueeVisible && 'md:opacity-0')}>
+	  {text}
+	</span>
+	{overflowPx >= MIN_MARQUEE_OVERFLOW_PX && (
+	    <span
+		ref={animatedRef}
+		aria-hidden="true"
+		className={cn (
+		    'tag-marquee__animated hidden md:block',
+		    marqueeVisible ? 'md:opacity-100' : 'md:opacity-0')}>
+	      {text}
+	    </span>)}
+      </span>)
+}
+
+export default ResponsiveMarqueeText

frontend/src/components/TagDetailSidebar.tsx

@@ -26,13 +26,13 @@ import { dateString, originalCreatedAtString } from '@/lib/utils'
 import type { DragEndEvent } from '@dnd-kit/core'
 import type { FC, MutableRefObject, ReactNode } from 'react'
 
-import type { Category, Post, Tag } from '@/types'
+import type { Category, Post, TagWithSections } from '@/types'
 
-type TagByCategory = { [key in Category]: Tag[] }
+type TagByCategory = { [key in Category]: TagWithSections[] }
 
 
 const renderTagTree = (
-    tag:              Tag,
+    tag:              TagWithSections,
     nestLevel:        number,
     path:             string,
     suppressClickRef: MutableRefObject<boolean>,
@@ -62,8 +62,9 @@ const renderTagTree = (
 
 
 const isDescendant = (
-    root:     Tag,
-    targetId: number): boolean => {
+    root:     TagWithSections,
+    targetId: number,
+): boolean => {
   if (!(root.children))
     return false
 
@@ -81,8 +82,9 @@ const isDescendant = (
 
 const findTag = (
     byCat:  TagByCategory,
-    id:     number): Tag | undefined => {
-  const walk = (nodes: Tag[]): Tag | undefined => {
+    id:     number,
+): TagWithSections | undefined => {
+  const walk = (nodes: TagWithSections[]): TagWithSections | undefined => {
     for (const t of nodes)
       {
 	if (t.id === id)
@@ -144,10 +146,13 @@ const DropSlot = ({ cat }: { cat: Category }) => {
 }
 
 
-type Props = { post: Post; sp?: boolean }
+type Props = {
+    className?: string
+    post:       Post
+    sp?:        boolean }
 
 
-const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
+const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
   sp = Boolean (sp)
 
   const qc = useQueryClient ()
@@ -163,7 +168,7 @@ const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
       }
 
     for (const cat of Object.keys (tagsTmp) as (keyof typeof tagsTmp)[])
-      tagsTmp[cat].sort ((tagA: Tag, tagB: Tag) => tagA.name < tagB.name ? -1 : 1)
+      tagsTmp[cat].sort ((tagA: TagWithSections, tagB: TagWithSections) => tagA.name < tagB.name ? -1 : 1)
 
     return tagsTmp
   }, [post])
@@ -276,7 +281,7 @@ const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
   }, [baseTags])
 
   return (
-      <SidebarComponent>
+      <SidebarComponent sidebarKey="post-detail-tags" className={className}>
 	<TagSearch/>
 	<DndContext
 	    sensors={sensors}
@@ -373,4 +378,4 @@ const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
       </SidebarComponent>)
 }
 
-export default TagDetailSidebar
+export default TagDetailSidebar

frontend/src/components/TagLink.tsx

@@ -1,14 +1,15 @@
 import PrefetchLink from '@/components/PrefetchLink'
-import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts'
+import ResponsiveMarqueeText from '@/components/ResponsiveMarqueeText'
 import { cn } from '@/lib/utils'
 
-import type { ComponentProps, FC, HTMLAttributes } from 'react'
+import type { ComponentProps, CSSProperties, FC, HTMLAttributes } from 'react'
 
 import type { Tag } from '@/types'
 
 type CommonProps = { 
     tag:        Tag
     nestLevel?: number
+    truncateOnMobile?: boolean
     withWiki?:  boolean
     withCount?: boolean }
 
@@ -30,29 +31,40 @@ type Props =
 const TagLink: FC<Props> = ({ tag,
 			      nestLevel = 0,
 			      linkFlg   = true,
+			      truncateOnMobile = false,
 			      withWiki  = true,
 			      withCount = true,
 			      className,
+			      style,
+			      title,
 			      ...props }) => {
-  const spanClass = cn (
-      `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
-      `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
-  const linkClass = cn (
-      spanClass,
-      `hover:text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE - 200 }`,
-      `dark:hover:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE - 200 }`)
+  const colourStyle = {
+      '--tag-link-colour': `var(--tag-colour-${ tag.category })`,
+      '--tag-link-hover-colour': `var(--tag-colour-${ tag.category }-hover)`,
+      ...style,
+  } as CSSProperties
+  const spanClass = 'tag-link-colour'
+  const linkClass = 'tag-link-colour tag-link-hover-colour'
+  const textClass = 'group min-w-0 max-w-full overflow-hidden align-bottom'
+  const rootClass =
+      'inline-flex min-w-0 max-w-full flex-nowrap items-stretch align-baseline gap-x-1 md:items-baseline'
+  const markerWrapClass = 'shrink-0 self-start md:self-auto'
+  const countClass = 'shrink-0 self-end md:self-auto'
+  const textTitle = title
+      ?? (tag.matchedAlias == null ? tag.name : `${ tag.matchedAlias } → ${ tag.name }`)
 
   return (
-      <>
+      <span className={rootClass}>
 	{(linkFlg && withWiki) && (
-	    <span className="mr-1">
+	    <span className={markerWrapClass}>
 	      {(tag.materialId != null || tag.hasWiki || tag.hasDeerjikists)
 	       ? (
 		  tag.materialId == null && !(tag.hasDeerjikists)
 		  ? (
 		      <PrefetchLink
 			  to={`/wiki/${ encodeURIComponent (tag.name) }`}
-			  className={linkClass}>
+			  className={linkClass}
+			  style={colourStyle}>
 			?
 		      </PrefetchLink>)
 		  : (
@@ -60,13 +72,15 @@ const TagLink: FC<Props> = ({ tag,
 		      ? (
 			  <PrefetchLink
 			      to={`/materials/${ tag.materialId }`}
-			      className={linkClass}>
+			      className={linkClass}
+			      style={colourStyle}>
 			    ?
 			  </PrefetchLink>)
 		      : (
 			  <PrefetchLink
 			      to={`/tags/${ tag.id }/deerjikists`}
-			      className={linkClass}>
+			      className={linkClass}
+			      style={colourStyle}>
 			    ?
 			  </PrefetchLink>)))
 	       : (
@@ -100,33 +114,51 @@ const TagLink: FC<Props> = ({ tag,
 	    </span>)}
 	{nestLevel > 0 && (
 	    <span
-		className="ml-1 mr-1"
+		className="ml-1 mr-1 shrink-0"
 		style={{ paddingLeft: `${ (nestLevel - 1) }rem` }}>
 	      ↳
 	    </span>)}
 	{tag.matchedAlias != null && (
 	    <>
-	      <span className={cn (spanClass, className)} {...props}>
-		{tag.matchedAlias}
+	      <span
+		  title={textTitle}
+		  className={cn (spanClass, textClass, className)}
+		  style={colourStyle}
+		  {...props}>
+		<ResponsiveMarqueeText
+		    text={tag.matchedAlias}
+		    title={textTitle}
+		    truncateOnMobile={truncateOnMobile}/>
 	      </span>
-	      <> → </>
+	      <span className="shrink-0"> → </span>
 	    </>)}
 	{linkFlg
 	 ? (
 	    <PrefetchLink
 		to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-		className={cn (linkClass, className)}
+		title={textTitle}
+		className={cn (linkClass, textClass, className)}
+		style={colourStyle}
 		{...props}>
-	      {tag.name}
+	      <ResponsiveMarqueeText
+		  text={tag.name}
+		  title={textTitle}
+		  truncateOnMobile={truncateOnMobile}/>
 	    </PrefetchLink>)
 	 : (
-	    <span className={cn (spanClass, className)}
+	    <span
+		  title={textTitle}
+		  className={cn (spanClass, textClass, className)}
+		  style={colourStyle}
 		  {...props}>
-	      {tag.name}
+	      <ResponsiveMarqueeText
+		  text={tag.name}
+		  title={textTitle}
+		  truncateOnMobile={truncateOnMobile}/>
 	    </span>)}
 	{withCount && (
-	    <span className="ml-1">{tag.postCount}</span>)}
-      </>)
+	    <span className={countClass}>{tag.postCount}</span>)}
+      </span>)
 }
 
 export default TagLink

frontend/src/components/TagSearch.tsx

@@ -105,6 +105,7 @@ const TagSearch: FC = () => {
   return (
       <div className="relative w-full">
 	<input type="text"
+	       data-shortcut-focus-search="true"
 	       placeholder="タグ検索..."
 	       value={search}
 	       onChange={whenChanged}

frontend/src/components/TagSearchBox.tsx

@@ -20,12 +20,14 @@ const TagSearchBox: FC<Props> = ({ suggestions, activeIndex, onSelect }) => {
 		     rounded shadow">
 	{suggestions.map ((tag, i) => (
 	    <li key={tag.id}
-		className={cn ('px-3 py-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700', 
+		className={cn ('min-w-0 overflow-hidden px-3 py-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700',
 			       i === activeIndex && 'bg-gray-300 dark:bg-gray-700')}
 		onMouseDown={() => onSelect (tag)}>
-	      <TagLink tag={tag} linkFlg={false} withWiki={false}/>
+	      <div className="flex min-w-0 max-w-full items-baseline overflow-hidden">
+		<TagLink tag={tag} linkFlg={false} withWiki={false}/>
+	      </div>
 	    </li>))}
       </ul>)
 }
 
-export default TagSearchBox
+export default TagSearchBox

frontend/src/components/TagSidebar.tsx

@@ -64,8 +64,9 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
 	<ul>
 	  {CATEGORIES.flatMap (cat => cat in tags ? (
 	      tags[cat].map (tag => (
-		  <li key={tag.id} className="mb-1">
+		  <li key={tag.id} className="mb-1 min-w-0 max-w-full overflow-hidden">
 		    <motion.div
+			className="flex min-w-0 max-w-full items-baseline overflow-hidden"
 			transition={{ layout: { duration: .2, ease: 'easeOut' } }}
 			layoutId={`tag-${ tag.id }`}>
 		      <TagLink tag={tag} onClick={onClick}/>
@@ -95,7 +96,7 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
       </>)
 
   return (
-      <SidebarComponent>
+      <SidebarComponent sidebarKey="posts-index-tags">
 	<TagSearch/>
 
 	<div className="hidden md:block mt-4">
@@ -128,4 +129,4 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
       </SidebarComponent>)
 }
 
-export default TagSidebar
+export default TagSidebar

frontend/src/components/TopNav.tsx

@@ -249,16 +249,16 @@ const TopNav: FC<Props> = ({ user }) => {
 
 	  <TopNavUser user={user}/>
 
-	  <a href="#"
-	     className="md:hidden ml-auto pr-4
+	  <button
+	     type="button"
+	     className="md:hidden ml-auto border-0 bg-transparent pr-4
 			text-pink-600 hover:text-pink-400
 			dark:text-pink-300 dark:hover:text-pink-100"
-	     onClick={ev => {
-	       ev.preventDefault ()
+	     onClick={() => {
 	       setMenuOpen (!(menuOpen))
 	     }}>
 	    {menuOpen ? '×' : 'Menu'}
-	  </a>
+	  </button>
 	</nav>
 
 	<AnimatePresence initial={false}>

frontend/src/components/common/TabGroup.tsx

@@ -7,12 +7,15 @@ type TabProps = { name:     string
 		  init?:    boolean
 		  children: React.ReactNode }
 
-type Props = { children: React.ReactNode }
+type Props = {
+    children:    React.ReactNode
+    rightAddon?: React.ReactNode
+}
 
 export const Tab = ({ children }: TabProps) => <>{children}</>
 
 
-const TabGroup: FC<Props> = ({ children }) => {
+const TabGroup: FC<Props> = ({ children, rightAddon }) => {
   const tabs = React.Children.toArray (children) as React.ReactElement<TabProps>[]
 
   const [current, setCurrent] = useState<number> (() => {
@@ -22,17 +25,27 @@ const TabGroup: FC<Props> = ({ children }) => {
 
   return (
       <div className="mt-4">
-	<div className="flex gap-4">
-	  {tabs.map ((tab, i) => (
-	      <a key={i}
-		 href="#"
-		 className={cn (i === current && 'font-bold')}
-		 onClick={ev => {
-		   ev.preventDefault ()
-		   setCurrent (i)
-		 }}>
-		{tab.props.name}
-	      </a>))}
+	<div className="flex items-center justify-between gap-4">
+	  <div className="flex min-w-0 gap-4">
+	    {tabs.map ((tab, i) => (
+		<button
+		   key={i}
+		   type="button"
+		   className={cn (
+		       'bg-transparent p-0 text-left text-[hsl(var(--theme-link))] hover:opacity-85',
+		       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+		       i === current && 'font-bold',
+		   )}
+		   onClick={() => {
+		     setCurrent (i)
+		   }}>
+		  {tab.props.name}
+		</button>))}
+	  </div>
+	  {rightAddon && (
+	      <div className="shrink-0">
+		{rightAddon}
+	      </div>)}
 	</div>
 	<div className="mt-2">
 	  {tabs[current]}

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 } })
-    setSuggestions (data.filter (t => t.postCount > 0))
-    if (suggestions.length > 0)
-      setSuggestionsVsbl (true)
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
+	q,
+	nico: includeNico ? '1' : '0' } })
+    const nextSuggestions = data.filter (t => t.postCount > 0)
+    setSuggestions (nextSuggestions)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   // TODO: TagSearch からのコピペのため，共通化を考へる．

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

@@ -0,0 +1,124 @@
+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,19 +1,319 @@
 import { motion } from 'framer-motion'
 import { Helmet } from 'react-helmet-async'
 
-import type { FC, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
 
-type Props = { children: ReactNode }
+import type { CSSProperties, FC, MouseEvent, PointerEvent, ReactNode } from 'react'
+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 SidebarComponent: FC<Props> = ({ children }) => (
-    <motion.div
-	layout="position"
-	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
-	className="p-4 w-full md:w-64 md:h-full md:overflow-y-auto sidebar">
-      <Helmet>
-	<style>
-	  {`
+const storageKeyForSidebar = (sidebarKey: string, side: SidebarSide): string =>
+    `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={cn (
+	      'relative w-full md:w-[var(--sidebar-width)] md:shrink-0 md:h-full',
+	      className)}>
+	<Helmet>
+	  <style>
+	    {`
 	      .sidebar
 	      {
 		direction: rtl;
@@ -23,10 +323,34 @@ const SidebarComponent: FC<Props> = ({ children }) => (
 	      {
 		direction: ltr;
 	      }`}
-	</style>
-      </Helmet>
+	  </style>
+	</Helmet>
 
-      {children}
-    </motion.div>)
+	<div className="h-full overflow-y-auto p-4 sidebar">
+	  {children}
+	</div>
 
-export default SidebarComponent
+	<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/BehaviourSettingsSection.tsx

@@ -0,0 +1,192 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { getClientBehaviorSettings,
+	 setClientBehaviorSettings } from '@/lib/settings'
+import { cn } from '@/lib/utils'
+
+import type {
+    ClientAnimationMode,
+    ClientBehaviorSettings,
+    ClientEmbedAutoLoadMode,
+    ClientThumbnailMode } from '@/lib/settings'
+import type { FC, ReactNode } from 'react'
+
+type Props = {
+    sectionClassName: string }
+
+type SegmentedOption<T extends string> = {
+    value: T
+    label: string }
+
+type SegmentedControlProps<T extends string> = {
+    value:     T
+    options:   SegmentedOption<T>[]
+    onChange:  (value: T) => void }
+
+type SettingBlockProps = {
+    title:       string
+    description: string
+    children:    ReactNode }
+
+const animationOptions: SegmentedOption<ClientAnimationMode>[] = [
+    { value: 'normal', label: '通常' },
+    { value: 'reduced', label: '控えめ' },
+    { value: 'off', label: 'なし' },
+]
+
+const embedAutoLoadOptions: SegmentedOption<ClientEmbedAutoLoadMode>[] = [
+    { value: 'auto', label: '自動' },
+    { value: 'manual', label: 'クリック時' },
+    { value: 'off', label: '読み込まない' },
+]
+
+const thumbnailModeOptions: SegmentedOption<ClientThumbnailMode>[] = [
+    { value: 'normal', label: '通常' },
+    { value: 'light', label: '軽量' },
+    { value: 'off', label: '非表示' },
+]
+
+
+const SegmentedControl = <T extends string,>(
+    { value, options, onChange }: SegmentedControlProps<T>,
+) => {
+  return (
+      <div
+	  role="radiogroup"
+	  className="flex flex-wrap gap-2 rounded-xl border border-border bg-muted/40 p-1">
+	{options.map (option => (
+	    <button
+		key={option.value}
+		type="button"
+		role="radio"
+		aria-checked={value === option.value}
+		className={cn (
+		    'min-w-0 flex-1 rounded-lg px-3 py-2 text-sm font-medium',
+		    'transition-colors focus-visible:outline-none focus-visible:ring-2',
+		    'focus-visible:ring-ring focus-visible:ring-offset-2',
+		    value === option.value
+		    ? 'bg-background text-foreground shadow-sm'
+		    : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',
+		)}
+		onClick={() => onChange (option.value)}>
+	      {option.label}
+	    </button>))}
+      </div>)
+}
+
+
+const SettingBlock: FC<SettingBlockProps> = (
+    { title, description, children },
+) => (
+    <div className="space-y-3 rounded-xl border border-border/70 bg-background/70 p-4">
+      <div className="space-y-1">
+	<h3 className="text-sm font-semibold">{title}</h3>
+	<p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+      {children}
+    </div>)
+
+
+const BehaviourSettingsSection: FC<Props> = ({ sectionClassName }) => {
+  const [savedSettings, setSavedSettings] =
+      useState<ClientBehaviorSettings> (() => getClientBehaviorSettings ())
+  const [draftSettings, setDraftSettings] =
+      useState<ClientBehaviorSettings> (() => getClientBehaviorSettings ())
+
+  useEffect (() => {
+    const current = getClientBehaviorSettings ()
+    setSavedSettings (current)
+    setDraftSettings (current)
+  }, [])
+
+  const hasUnsavedChanges = useMemo (
+      () => JSON.stringify (draftSettings) !== JSON.stringify (savedSettings),
+      [draftSettings, savedSettings],
+  )
+
+  const updateDraft = <Key extends keyof ClientBehaviorSettings,> (
+      key:    Key,
+      value:  ClientBehaviorSettings[Key],
+  ) => {
+    setDraftSettings (current => ({ ...current, [key]: value }))
+  }
+
+  const handleSave = () => {
+    const next = setClientBehaviorSettings (draftSettings)
+    setSavedSettings (next)
+    setDraftSettings (next)
+    toast ({ title: '動作設定を保存しました' })
+  }
+
+  const handleDiscard = () => {
+    setDraftSettings (savedSettings)
+  }
+
+  return (
+      <section className={sectionClassName}>
+	<div className="flex flex-wrap items-start justify-between gap-3">
+	  <div className="space-y-1">
+	    <h2 className="text-xl font-bold">動作</h2>
+	    <p className="text-sm text-muted-foreground">
+	      この設定は現在のブラウザに保存されます。
+	    </p>
+	    <p className="text-sm text-muted-foreground">
+	      重い端末や通信量を抑えたい場合に調整します。
+	    </p>
+	    {hasUnsavedChanges && (
+		<p className="text-sm text-amber-700 dark:text-amber-300">
+		  未保存の変更があります
+		</p>)}
+	  </div>
+
+	  <div className="flex flex-wrap gap-2">
+	    <Button
+		type="button"
+		variant="outline"
+		disabled={hasUnsavedChanges === false}
+		onClick={handleDiscard}>
+	      変更を破棄
+	    </Button>
+	    <Button
+		type="button"
+		disabled={hasUnsavedChanges === false}
+		onClick={handleSave}>
+	      保存
+	    </Button>
+	  </div>
+	</div>
+
+	<div className="space-y-4">
+	  <SettingBlock
+	      title="アニメーション"
+	      description="画面遷移やレイアウト移動の動きを調整します。">
+	    <SegmentedControl
+		value={draftSettings.animation ?? 'normal'}
+		options={animationOptions}
+		onChange={value => updateDraft ('animation', value)}/>
+	  </SettingBlock>
+
+	  <SettingBlock
+	      title="埋め込み自動読込"
+	      description="外部埋め込みを自動で読み込むかを切り替えます。">
+	    <SegmentedControl
+		value={draftSettings.embedAutoLoad ?? 'auto'}
+		options={embedAutoLoadOptions}
+		onChange={value => updateDraft ('embedAutoLoad', value)}/>
+	  </SettingBlock>
+
+	  <SettingBlock
+	      title="サムネイル表示"
+	      description="投稿一覧や詳細の画像表示を軽量化します。">
+	    <SegmentedControl
+		value={draftSettings.thumbnailMode ?? 'normal'}
+		options={thumbnailModeOptions}
+		onChange={value => updateDraft ('thumbnailMode', value)}/>
+	  </SettingBlock>
+	</div>
+      </section>)
+}
+
+export default BehaviourSettingsSection

frontend/src/components/users/KeyboardSettingsSection.tsx

@@ -0,0 +1,251 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import {
+    getConflictingShortcutActionIds,
+    formatKeyBinding,
+    isSpaceBinding,
+    keyBindingFromKeyboardEvent,
+    SHORTCUT_DEFINITIONS,
+    SHORTCUT_SCOPE_LABELS,
+} from '@/lib/keyboardShortcuts'
+import { getEffectiveKeyBindings } from '@/lib/settings'
+import { useKeyboardShortcutSettings } from '@/lib/useKeyboardShortcuts'
+
+import type { ShortcutActionId } from '@/lib/keyboardShortcuts'
+import type { ClientKeyboardSettings } from '@/lib/settings'
+import type { FC } from 'react'
+
+type Props = {
+    sectionClassName: string
+}
+
+
+const KeyboardSettingsSection: FC<Props> = ({ sectionClassName }) => {
+  const {
+      keyboardSettings,
+      saveKeyboardSettings,
+  } = useKeyboardShortcutSettings ()
+  const [capturingActionId, setCapturingActionId] =
+      useState<ShortcutActionId | null> (null)
+  const [draftKeyboardSettings, setDraftKeyboardSettings] =
+      useState<ClientKeyboardSettings> (keyboardSettings)
+
+  useEffect (() => {
+    setDraftKeyboardSettings (keyboardSettings)
+  }, [keyboardSettings])
+
+  const draftEffectiveBindings = useMemo (
+      () => getEffectiveKeyBindings (draftKeyboardSettings.bindings),
+      [draftKeyboardSettings.bindings],
+  )
+  const draftConflictActionIds = useMemo (
+      () => getConflictingShortcutActionIds (draftEffectiveBindings),
+      [draftEffectiveBindings],
+  )
+  const hasUnsavedChanges = useMemo (
+      () => JSON.stringify (draftKeyboardSettings) !== JSON.stringify (keyboardSettings),
+      [draftKeyboardSettings, keyboardSettings],
+  )
+
+  useEffect (() => {
+    if (capturingActionId == null)
+      return
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.isComposing || event.key === 'Process')
+	return
+
+      event.preventDefault ()
+      event.stopPropagation ()
+
+      if (event.key === 'Escape')
+	{
+	  setCapturingActionId (null)
+	  return
+	}
+
+      if (event.key === 'Backspace' || event.key === 'Delete')
+	{
+	  setDraftKeyboardSettings (current => ({
+	      ...current,
+	      bindings: {
+		  ...(current.bindings ?? { }),
+		  [capturingActionId]: null,
+	      },
+	  }))
+	  setCapturingActionId (null)
+	  return
+	}
+
+      const binding = keyBindingFromKeyboardEvent (event)
+      if (binding == null)
+	return
+
+      if (isSpaceBinding (binding))
+	{
+	  toast ({ title: 'Space は今は割り当てられません．' })
+	  return
+	}
+
+      setDraftKeyboardSettings (current => ({
+	  ...current,
+	  bindings: {
+	      ...(current.bindings ?? { }),
+	      [capturingActionId]: binding,
+	  },
+      }))
+      setCapturingActionId (null)
+    }
+
+    document.addEventListener ('keydown', onKeyDown, true)
+    return () => document.removeEventListener ('keydown', onKeyDown, true)
+  }, [capturingActionId])
+
+  const rows = useMemo (() => SHORTCUT_DEFINITIONS.map (definition => ({
+      ...definition,
+      currentBinding:    draftEffectiveBindings[definition.id],
+      hasConflict:       draftConflictActionIds.has (definition.id),
+      hasCustomBinding:  Object.prototype.hasOwnProperty.call (
+	  draftKeyboardSettings.bindings ?? { },
+	  definition.id,
+      ),
+  })), [
+      draftConflictActionIds,
+      draftEffectiveBindings,
+      draftKeyboardSettings.bindings,
+  ])
+
+  const handleSave = () => {
+    saveKeyboardSettings (draftKeyboardSettings)
+    toast ({ title: 'キーボード設定を保存しました' })
+  }
+
+  const handleDiscard = () => {
+    setDraftKeyboardSettings (keyboardSettings)
+    setCapturingActionId (null)
+  }
+
+  return (
+      <section className={sectionClassName}>
+	<div className="flex flex-wrap items-start justify-between gap-3">
+	  <div className="space-y-1">
+	    <h2 className="text-xl font-bold">キーボード</h2>
+	    {hasUnsavedChanges && (
+		<p className="text-sm text-amber-700 dark:text-amber-300">
+		  未保存の変更があります
+		</p>)}
+	  </div>
+
+	  <div className="flex flex-wrap gap-2">
+	    <Button
+		type="button"
+		variant="outline"
+		onClick={() => {
+		  setDraftKeyboardSettings (current => ({
+		      ...current,
+		      bindings: { },
+		  }))
+		}}>
+	      すべて既定に戻す
+	    </Button>
+	    <Button
+		type="button"
+		variant="outline"
+		disabled={!(hasUnsavedChanges)}
+		onClick={handleDiscard}>
+	      変更を破棄
+	    </Button>
+	    <Button
+		type="button"
+		disabled={!(hasUnsavedChanges) || draftConflictActionIds.size > 0}
+		onClick={handleSave}>
+	      保存
+	    </Button>
+	  </div>
+	</div>
+
+	<label className="flex items-center gap-2 text-sm">
+	  <input
+	      type="checkbox"
+	      checked={draftKeyboardSettings.enabled !== false}
+	      onChange={event => {
+		setDraftKeyboardSettings (current => ({
+		    ...current,
+		    enabled: event.target.checked,
+		}))
+	      }}/>
+	  <span>キーボード・ショートカットを有効にする</span>
+	</label>
+
+	{capturingActionId != null && (
+	    <p className="text-sm text-muted-foreground">
+	      キー入力待ちです．Escape で取消し，Backspace / Delete で未割当にできます．
+	    </p>)}
+
+	<div className="overflow-x-auto">
+	  <table className="w-full min-w-[52rem] 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>
+		<th className="p-2 text-left">既定に戻す</th>
+		<th className="p-2 text-left">競合状態</th>
+	      </tr>
+	    </thead>
+	    <tbody>
+	      {rows.map (row => (
+		  <tr key={row.id} className="border-b border-border/60 last:border-b-0">
+		    <td className="p-2">{row.label}</td>
+		    <td className="p-2">{SHORTCUT_SCOPE_LABELS[row.scope]}</td>
+		    <td className="p-2 font-mono">
+		      {formatKeyBinding (row.currentBinding)}
+		    </td>
+		    <td className="p-2">
+		      <Button
+			  type="button"
+			  variant={capturingActionId === row.id ? 'default' : 'outline'}
+			  className="h-8"
+			  onClick={() => {
+			    setCapturingActionId (
+				capturingActionId === row.id ? null : row.id,
+			    )
+			  }}>
+			{capturingActionId === row.id ? '入力待ち…' : '変更'}
+		      </Button>
+		    </td>
+		    <td className="p-2">
+		      <Button
+			  type="button"
+			  variant="ghost"
+			  className="h-8"
+			  disabled={!(row.hasCustomBinding)}
+			  onClick={() => {
+			    setDraftKeyboardSettings (current => {
+				const nextBindings = { ...(current.bindings ?? { }) }
+				delete nextBindings[row.id]
+				return {
+				    ...current,
+				    bindings: nextBindings,
+				}
+			    })
+			  }}>
+			既定に戻す
+		      </Button>
+		    </td>
+		    <td className="p-2">
+		      {row.hasConflict
+		       ? <span className="text-red-600 dark:text-red-400">競合あり</span>
+		       : 'なし'}
+		    </td>
+		  </tr>))}
+	    </tbody>
+	  </table>
+	</div>
+      </section>)
+}
+
+export default KeyboardSettingsSection

frontend/src/components/users/ShortcutHelpDialog.tsx

@@ -0,0 +1,87 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog'
+import {
+    formatKeyBinding,
+    SHORTCUT_DEFINITIONS,
+    SHORTCUT_SCOPE_LABELS,
+} from '@/lib/keyboardShortcuts'
+
+import type {
+    KeyBinding,
+    ShortcutActionId,
+    ShortcutScope,
+} from '@/lib/keyboardShortcuts'
+import type { FC } from 'react'
+
+type Props = {
+    open:               boolean
+    onOpenChange:       (open: boolean) => void
+    activeScope:        ShortcutScope
+    effectiveBindings:  Record<ShortcutActionId, KeyBinding | null>
+    conflictActionIds:  Set<ShortcutActionId>
+    availableActionIds: Set<ShortcutActionId>
+}
+
+
+const ShortcutHelpDialog: FC<Props> = (
+    {
+	open,
+	onOpenChange,
+	activeScope,
+	effectiveBindings,
+	conflictActionIds,
+	availableActionIds,
+    },
+) => {
+  const rows = SHORTCUT_DEFINITIONS
+      .filter (definition =>
+	  definition.scope === 'global' || definition.scope === activeScope)
+      .filter (definition => availableActionIds.has (definition.id))
+
+  return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+	<DialogContent className="max-w-3xl px-6 pb-6 pt-7">
+	  <DialogHeader className="pl-8">
+	    <DialogTitle>キーボード・ショートカット</DialogTitle>
+	    <DialogDescription>
+	      この画面で利用できるショートカットを表示します。
+	    </DialogDescription>
+	  </DialogHeader>
+
+	  <div className="overflow-x-auto">
+	    <table className="w-full min-w-[40rem] 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>
+		{rows.map (row => (
+		    <tr key={row.id} className="border-b border-border/60 last:border-b-0">
+		      <td className="p-2">{row.label}</td>
+		      <td className="p-2">{SHORTCUT_SCOPE_LABELS[row.scope]}</td>
+		      <td className="p-2 font-mono">
+			{formatKeyBinding (effectiveBindings[row.id])}
+		      </td>
+		      <td className="p-2">
+			{conflictActionIds.has (row.id)
+			 ? <span className="text-red-600 dark:text-red-400">競合あり</span>
+			 : 'なし'}
+		      </td>
+		    </tr>))}
+	      </tbody>
+	    </table>
+	  </div>
+	</DialogContent>
+      </Dialog>)
+}
+
+export default ShortcutHelpDialog

frontend/src/components/users/UserSettingsProvider.tsx

@@ -0,0 +1,97 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+
+import {
+    applyClientAppearance,
+    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)
+
+
+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 (() => {
+    void settings.theme
+    applyClientAppearance ()
+  }, [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

@@ -10,6 +10,10 @@
   {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
 
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
@@ -29,12 +33,32 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
+    --theme-link: 221.2 83.2% 53.3%;
+
+    --tag-colour-deerjikist: #9f1239;
+    --tag-colour-deerjikist-hover: #b62a51;
+    --tag-colour-meme: #6b21a8;
+    --tag-colour-meme-hover: #8238bf;
+    --tag-colour-character: #4d7c0f;
+    --tag-colour-character-hover: #649326;
+    --tag-colour-general: #155e75;
+    --tag-colour-general-hover: #2c758c;
+    --tag-colour-material: #c2410c;
+    --tag-colour-material-hover: #d95823;
+    --tag-colour-meta: #a16207;
+    --tag-colour-meta-hover: #b8791e;
+    --tag-colour-nico: #4b5563;
+    --tag-colour-nico-hover: #626c7a;
   }
 
   .dark
   {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
@@ -58,16 +82,16 @@
 
   body
   {
-    @apply overflow-x-clip;
+    @apply overflow-x-clip bg-background text-foreground;
   }
 
   a
   {
-    @apply text-blue-700 dark:text-blue-300;
+    color: hsl(var(--theme-link));
   }
   a:hover
   {
-    @apply text-blue-500 dark:text-blue-100;
+    opacity: .85;
   }
 }
 
@@ -78,8 +102,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: hsl(var(--foreground));
+  background-color: hsl(var(--background));
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -87,6 +111,44 @@
   -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;
+}
+
+:root[data-animation='reduced'] *,
+:root[data-animation='off'] *
+{
+  scroll-behavior: auto !important;
+}
+
+:root[data-animation='off'] *,
+:root[data-animation='off'] *::before,
+:root[data-animation='off'] *::after
+{
+  animation-duration: 0.001ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.001ms !important;
+}
+
 a
 {
   font-weight: 500;
@@ -97,28 +159,15 @@ body
 {
   margin: 0;
   min-width: 320px;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
 }
 
 #root
 {
   min-height: 100dvh;
-}
-
-@media (prefers-color-scheme: light)
-{
-  :root
-  {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover
-  {
-    color: #747bff;
-  }
-  button
-  {
-    background-color: #f9f9f9;
-  }
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
 }
 
 @keyframes wiki-blink
@@ -132,3 +181,30 @@ body
   0%, 100% { color: #f87171; }
   50% { color: #60a5fa; }
 }
+
+.tag-marquee
+{
+  position: relative;
+}
+
+.tag-link-colour
+{
+  color: var(--tag-link-colour);
+}
+
+.tag-link-hover-colour:hover
+{
+  color: var(--tag-link-hover-colour) !important;
+}
+
+.tag-marquee__animated
+{
+  position: absolute;
+  inset: 0 auto 0 0;
+  min-width: 100%;
+  width: max-content;
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+  will-change: transform;
+}

frontend/src/lib/keyboardShortcuts.ts

@@ -0,0 +1,328 @@
+export type ShortcutScope =
+    | 'global'
+    | 'posts'
+    | 'postSearch'
+    | 'tags'
+    | 'settings'
+    | 'wiki'
+    | 'materials'
+
+export type ShortcutActionId =
+    | 'global.openShortcutHelp'
+    | 'global.focusSearch'
+    | 'navigation.posts'
+    | 'navigation.tags'
+    | 'navigation.materials'
+    | 'navigation.wiki'
+    | 'pagination.next'
+    | 'pagination.previous'
+    | 'settings.account'
+    | 'settings.theme'
+    | 'settings.keyboard'
+    | 'settings.behavior'
+
+export type KeyBinding = {
+    key:    string
+    ctrl?:  boolean
+    shift?: boolean
+    alt?:   boolean
+    meta?:  boolean
+}
+
+export type ShortcutDefinition = {
+    id:              ShortcutActionId
+    label:           string
+    scope:           ShortcutScope
+    defaultBinding:  KeyBinding | null
+}
+
+export const SHORTCUT_SCOPE_LABELS: Record<ShortcutScope, string> = {
+    global:     '全画面',
+    posts:      '広場',
+    postSearch: '広場検索',
+    tags:       'タグ',
+    settings:   '設定',
+    wiki:       'Wiki',
+    materials:  '素材',
+}
+
+export const SHORTCUT_DEFINITIONS: ShortcutDefinition[] = [
+    {
+	id:              'global.openShortcutHelp',
+	label:           'ショートカット一覧を開く',
+	scope:           'global',
+	defaultBinding:  { key: '?', shift: true },
+    },
+    {
+	id:              'global.focusSearch',
+	label:           '検索欄へ移動',
+	scope:           'global',
+	defaultBinding:  { key: '/' },
+    },
+    {
+	id:              'navigation.posts',
+	label:           '広場へ移動',
+	scope:           'global',
+	defaultBinding:  { key: 'p' },
+    },
+    {
+	id:              'navigation.tags',
+	label:           'タグへ移動',
+	scope:           'global',
+	defaultBinding:  { key: 't' },
+    },
+    {
+	id:              'navigation.materials',
+	label:           '素材へ移動',
+	scope:           'global',
+	defaultBinding:  { key: 'm' },
+    },
+    {
+	id:              'navigation.wiki',
+	label:           'Wiki へ移動',
+	scope:           'global',
+	defaultBinding:  { key: 'w' },
+    },
+    {
+	id:              'pagination.next',
+	label:           '次のページへ移動',
+	scope:           'global',
+	defaultBinding:  { key: 'ArrowRight' },
+    },
+    {
+	id:              'pagination.previous',
+	label:           '前のページへ移動',
+	scope:           'global',
+	defaultBinding:  { key: 'ArrowLeft' },
+    },
+    {
+	id:              'settings.account',
+	label:           '設定: アカウント',
+	scope:           'settings',
+	defaultBinding:  { key: '1' },
+    },
+    {
+	id:              'settings.theme',
+	label:           '設定: テーマ',
+	scope:           'settings',
+	defaultBinding:  { key: '2' },
+    },
+    {
+	id:              'settings.keyboard',
+	label:           '設定: キーボード',
+	scope:           'settings',
+	defaultBinding:  { key: '3' },
+    },
+    {
+	id:              'settings.behavior',
+	label:           '設定: 動作',
+	scope:           'settings',
+	defaultBinding:  { key: '4' },
+    },
+]
+
+export const SHORTCUT_DEFINITIONS_BY_ID =
+    SHORTCUT_DEFINITIONS.reduce<Record<ShortcutActionId, ShortcutDefinition>> (
+	(definitions, definition) => {
+	    definitions[definition.id] = definition
+	    return definitions
+	},
+	{
+	    'global.openShortcutHelp': SHORTCUT_DEFINITIONS[0],
+	    'global.focusSearch': SHORTCUT_DEFINITIONS[1],
+	    'navigation.posts': SHORTCUT_DEFINITIONS[2],
+	    'navigation.tags': SHORTCUT_DEFINITIONS[3],
+	    'navigation.materials': SHORTCUT_DEFINITIONS[4],
+	    'navigation.wiki': SHORTCUT_DEFINITIONS[5],
+	    'pagination.next': SHORTCUT_DEFINITIONS[6],
+	    'pagination.previous': SHORTCUT_DEFINITIONS[7],
+	    'settings.account': SHORTCUT_DEFINITIONS[8],
+	    'settings.theme': SHORTCUT_DEFINITIONS[9],
+	    'settings.keyboard': SHORTCUT_DEFINITIONS[10],
+	    'settings.behavior': SHORTCUT_DEFINITIONS[11],
+	},
+    )
+
+export const DEFAULT_KEY_BINDINGS =
+    SHORTCUT_DEFINITIONS.reduce<Record<ShortcutActionId, KeyBinding | null>> (
+	(bindings, definition) => {
+	    bindings[definition.id] = definition.defaultBinding
+	    return bindings
+	},
+	{
+	    'global.openShortcutHelp': null,
+	    'global.focusSearch': null,
+	    'navigation.posts': null,
+	    'navigation.tags': null,
+	    'navigation.materials': null,
+	    'navigation.wiki': null,
+	    'pagination.next': null,
+	    'pagination.previous': null,
+	    'settings.account': null,
+	    'settings.theme': null,
+	    'settings.keyboard': null,
+	    'settings.behavior': null,
+	},
+    )
+
+const normaliseKey = (key: string): string => {
+  if (key === 'Spacebar')
+    return ' '
+  if (key.length === 1 && key !== ' ')
+    return key.toLowerCase ()
+  return key
+}
+
+const isModifierKey = (key: string): boolean =>
+    key === 'Shift'
+    || key === 'Control'
+    || key === 'Alt'
+    || key === 'Meta'
+
+export const normaliseKeyBinding = (value: unknown): KeyBinding | null => {
+  if (!(value) || typeof value !== 'object')
+    return null
+
+  const binding = value as Partial<KeyBinding>
+  if (typeof binding.key !== 'string')
+    return null
+
+  const key = normaliseKey (binding.key)
+  if (key.length === 0 || isModifierKey (key))
+    return null
+
+  return {
+      key,
+      ...(binding.ctrl ? { ctrl: true } : { }),
+      ...(binding.shift ? { shift: true } : { }),
+      ...(binding.alt ? { alt: true } : { }),
+      ...(binding.meta ? { meta: true } : { }),
+  }
+}
+
+export const serialiseKeyBinding = (binding: KeyBinding | null): string | null => {
+  if (binding == null)
+    return null
+
+  const parts = [
+      binding.ctrl ? 'Ctrl' : null,
+      binding.shift ? 'Shift' : null,
+      binding.alt ? 'Alt' : null,
+      binding.meta ? 'Meta' : null,
+      binding.key,
+  ].filter ((part): part is string => part != null)
+
+  return parts.join ('+')
+}
+
+const keyLabel = (key: string): string => {
+  switch (key)
+  {
+  case ' ':
+    return 'Space'
+
+  case 'ArrowLeft':
+    return 'ArrowLeft'
+
+  case 'ArrowRight':
+    return 'ArrowRight'
+
+  case 'ArrowUp':
+    return 'ArrowUp'
+
+  case 'ArrowDown':
+    return 'ArrowDown'
+
+  case 'Escape':
+    return 'Escape'
+
+  case 'Backspace':
+    return 'Backspace'
+
+  case 'Delete':
+    return 'Delete'
+
+  default:
+    return key.length === 1 ? key.toUpperCase () : key
+  }
+}
+
+export const formatKeyBinding = (binding: KeyBinding | null): string => {
+  if (binding == null)
+    return '未割当'
+
+  return [
+      binding.ctrl ? 'Ctrl' : null,
+      binding.shift ? 'Shift' : null,
+      binding.alt ? 'Alt' : null,
+      binding.meta ? 'Meta' : null,
+      keyLabel (binding.key),
+  ].filter ((part): part is string => part != null)
+      .join (' + ')
+}
+
+export const keyBindingFromKeyboardEvent = (
+    event: Pick<KeyboardEvent, 'key' | 'ctrlKey' | 'shiftKey' | 'altKey' | 'metaKey'>,
+): KeyBinding | null => {
+  const key = normaliseKey (event.key)
+  if (key.length === 0 || isModifierKey (key))
+    return null
+
+  return {
+      key,
+      ...(event.ctrlKey ? { ctrl: true } : { }),
+      ...(event.shiftKey ? { shift: true } : { }),
+      ...(event.altKey ? { alt: true } : { }),
+      ...(event.metaKey ? { meta: true } : { }),
+  }
+}
+
+export const isEditableEventTarget = (target: EventTarget | null): boolean => {
+  if (!(target instanceof Element))
+    return false
+
+  return target.closest (
+      'input, textarea, select, [contenteditable="true"], [role="textbox"]',
+  ) != null
+}
+
+export const getConflictingShortcutActionIds = (
+    bindings: Record<ShortcutActionId, KeyBinding | null>,
+): Set<ShortcutActionId> => {
+  const grouped = new Map<string, ShortcutActionId[]> ()
+
+  Object.entries (bindings).forEach (([actionId, binding]) => {
+      const serialised = serialiseKeyBinding (binding)
+      if (serialised == null)
+	return
+
+      const ids = grouped.get (serialised) ?? []
+      ids.push (actionId as ShortcutActionId)
+      grouped.set (serialised, ids)
+  })
+
+  return new Set (
+      [...grouped.values ()]
+	  .filter (actionIds => actionIds.length > 1)
+	  .flat (),
+  )
+}
+
+export const resolveShortcutScope = (pathname: string): ShortcutScope => {
+  if (pathname.startsWith ('/posts/search'))
+    return 'postSearch'
+  if (pathname.startsWith ('/posts'))
+    return 'posts'
+  if (pathname.startsWith ('/tags'))
+    return 'tags'
+  if (pathname.startsWith ('/users/settings'))
+    return 'settings'
+  if (pathname.startsWith ('/wiki'))
+    return 'wiki'
+  if (pathname.startsWith ('/materials'))
+    return 'materials'
+  return 'global'
+}
+
+export const isSpaceBinding = (binding: KeyBinding | null): boolean =>
+    binding?.key === ' '

frontend/src/lib/posts.test.ts

@@ -70,6 +70,7 @@ describe ('posts API functions', () => {
           id:                    5,
           title:                 'new title',
           tags:                  'tag',
+          duration:              null,
           parentPostIds:         '1 2',
           originalCreatedFrom:   null,
           originalCreatedBefore: '2026-01-02T00:00:00Z',
@@ -82,6 +83,7 @@ describe ('posts API functions', () => {
         {
           title:                   'new title',
           tags:                    'tag',
+          duration:                null,
           parent_post_ids:         '1 2',
           original_created_from:   null,
           original_created_before: '2026-01-02T00:00:00Z',

frontend/src/lib/posts.ts

@@ -44,6 +44,7 @@ export const updatePost = async (
     post: { id:                     number
 	    title:                  string | null
 	    tags:                   string
+	    duration:               string | null
 	    parentPostIds:          string
 	    originalCreatedFrom:    string | null
 	    originalCreatedBefore:  string | null },
@@ -55,6 +56,7 @@ export const updatePost = async (
 	`/posts/${ post.id }`,
 	{ title: post.title,
 	  tags: post.tags,
+	  duration: post.duration,
 	  parent_post_ids: post.parentPostIds,
 	  original_created_from: post.originalCreatedFrom,
 	  original_created_before: post.originalCreatedBefore },

frontend/src/lib/useKeyboardShortcuts.tsx

@@ -0,0 +1,296 @@
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import ShortcutHelpDialog from '@/components/users/ShortcutHelpDialog'
+import {
+    DEFAULT_KEY_BINDINGS,
+    getConflictingShortcutActionIds,
+    isEditableEventTarget,
+    keyBindingFromKeyboardEvent,
+    resolveShortcutScope,
+    serialiseKeyBinding,
+    SHORTCUT_DEFINITIONS,
+    SHORTCUT_SCOPE_LABELS,
+} from '@/lib/keyboardShortcuts'
+import {
+    getClientKeyboardSettings,
+    getEffectiveKeyBindings,
+    setClientKeyboardSettings,
+} from '@/lib/settings'
+
+import type {
+    KeyBinding,
+    ShortcutActionId,
+    ShortcutScope,
+} from '@/lib/keyboardShortcuts'
+import type { ClientKeyboardSettings } from '@/lib/settings'
+import type { PropsWithChildren } from 'react'
+
+type ShortcutHandler = () => void
+type ShortcutHandlers = Partial<Record<ShortcutActionId, ShortcutHandler>>
+
+type KeyboardShortcutsContextValue = {
+    activeScope:           ShortcutScope
+    keyboardSettings:      ClientKeyboardSettings
+    effectiveBindings:     Record<ShortcutActionId, KeyBinding | null>
+    conflictActionIds:     Set<ShortcutActionId>
+    saveKeyboardSettings: (settings: ClientKeyboardSettings) => void
+    registerHandlers:      (handlers: ShortcutHandlers) => () => void
+}
+
+const KeyboardShortcutsContext =
+    createContext<KeyboardShortcutsContextValue | null> (null)
+
+
+const isFocusableShortcutTarget = (element: HTMLElement): boolean => {
+  if (element.closest ('[hidden], [aria-hidden="true"]') != null)
+    return false
+
+  if (
+      (element instanceof HTMLInputElement
+       || element instanceof HTMLButtonElement
+       || element instanceof HTMLSelectElement
+       || element instanceof HTMLTextAreaElement)
+      && element.disabled
+  )
+    return false
+
+  const style = window.getComputedStyle (element)
+  if (
+      style.display === 'none'
+      || style.visibility === 'hidden'
+      || style.pointerEvents === 'none'
+  )
+    return false
+
+  return element.getClientRects ().length > 0
+}
+
+
+const focusSearchTarget = (): void => {
+  const targets = [
+      ...document.querySelectorAll<HTMLElement> (
+	  '[data-shortcut-focus-search="true"]',
+      ),
+  ]
+  const target = targets.find (isFocusableShortcutTarget)
+
+  if (target == null)
+    return
+
+  target.focus ()
+
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)
+    target.select ()
+}
+
+
+export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
+  const location = useLocation ()
+  const navigate = useNavigate ()
+
+  const [keyboardSettings, setKeyboardSettingsState] =
+      useState<ClientKeyboardSettings> (() => getClientKeyboardSettings ())
+  const [registeredHandlers, setRegisteredHandlers] =
+      useState<Record<number, ShortcutHandlers>> ({ })
+  const [shortcutHelpOpen, setShortcutHelpOpen] = useState (false)
+  const registrationIdRef = useRef (0)
+
+  const activeScope = useMemo<ShortcutScope> (
+      () => resolveShortcutScope (location.pathname),
+      [location.pathname],
+  )
+  const effectiveBindings = useMemo (
+      () => getEffectiveKeyBindings (keyboardSettings.bindings),
+      [keyboardSettings.bindings],
+  )
+  const conflictActionIds = useMemo (
+      () => getConflictingShortcutActionIds (effectiveBindings),
+      [effectiveBindings],
+  )
+  const mergedRegisteredHandlers = useMemo<ShortcutHandlers> (
+      () => Object.values (registeredHandlers).reduce<ShortcutHandlers> (
+	  (handlers, currentHandlers) => ({ ...handlers, ...currentHandlers }),
+	  { },
+      ),
+      [registeredHandlers],
+  )
+
+  const saveKeyboardSettings = useCallback ((settings: ClientKeyboardSettings) => {
+    const next = setClientKeyboardSettings (settings)
+    setKeyboardSettingsState (next)
+  }, [])
+
+  const registerHandlers = useCallback ((handlers: ShortcutHandlers) => {
+    const registrationId = ++registrationIdRef.current
+
+    setRegisteredHandlers (current => ({
+	...current,
+	[registrationId]: handlers,
+    }))
+
+    return () => {
+      setRegisteredHandlers (current => {
+	  const next = { ...current }
+	  delete next[registrationId]
+	  return next
+      })
+    }
+  }, [])
+
+  const builtinHandlers = useMemo<ShortcutHandlers> (
+      () => ({
+	  'global.openShortcutHelp': () => {
+	    setShortcutHelpOpen (true)
+	  },
+	  'global.focusSearch': () => {
+	    focusSearchTarget ()
+	  },
+	  'navigation.posts': () => navigate ('/posts'),
+	  'navigation.tags': () => navigate ('/tags'),
+	  'navigation.materials': () => navigate ('/materials'),
+	  'navigation.wiki': () => navigate ('/wiki'),
+	  'settings.account': () => navigate ('/users/settings?tab=account'),
+	  'settings.theme': () => navigate ('/users/settings?tab=theme'),
+	  'settings.keyboard': () => navigate ('/users/settings?tab=keyboard'),
+	  'settings.behavior': () => navigate ('/users/settings?tab=behavior'),
+      }),
+      [navigate],
+  )
+
+  const availableActionIds = useMemo<Set<ShortcutActionId>> (
+      () => new Set (
+	  SHORTCUT_DEFINITIONS
+	      .filter (definition =>
+		  definition.scope === 'global' || definition.scope === activeScope)
+	      .filter (definition =>
+		  builtinHandlers[definition.id] != null
+		  || mergedRegisteredHandlers[definition.id] != null)
+	      .map (definition => definition.id),
+      ),
+      [activeScope, builtinHandlers, mergedRegisteredHandlers],
+  )
+
+  useEffect (() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (
+	  keyboardSettings.enabled === false
+	  || event.defaultPrevented
+	  || event.isComposing
+	  || event.key === 'Process'
+	  || event.repeat
+      )
+	return
+
+      if (isEditableEventTarget (event.target))
+	return
+
+      if (shortcutHelpOpen)
+	return
+
+      const binding = keyBindingFromKeyboardEvent (event)
+      if (binding == null)
+	return
+
+      const serialisedBinding = serialiseKeyBinding (binding)
+      if (serialisedBinding == null)
+	return
+
+      const candidates = SHORTCUT_DEFINITIONS.filter (definition => (
+	  definition.scope === 'global'
+	  || definition.scope === activeScope
+      )).filter (definition => {
+	  const currentBinding = effectiveBindings[definition.id]
+	  return (
+	      currentBinding != null
+	      && serialiseKeyBinding (currentBinding) === serialisedBinding
+	  )
+      }).filter (definition => !(conflictActionIds.has (definition.id)))
+
+      if (candidates.length !== 1)
+	return
+
+      const actionId = candidates[0].id
+      const handler = builtinHandlers[actionId] ?? mergedRegisteredHandlers[actionId]
+
+      if (handler == null)
+	return
+
+      event.preventDefault ()
+      handler ()
+    }
+
+    document.addEventListener ('keydown', onKeyDown)
+    return () => document.removeEventListener ('keydown', onKeyDown)
+  }, [
+      activeScope,
+      conflictActionIds,
+      effectiveBindings,
+      builtinHandlers,
+      keyboardSettings.enabled,
+      mergedRegisteredHandlers,
+      shortcutHelpOpen,
+  ])
+
+  const value = useMemo<KeyboardShortcutsContextValue> (() => ({
+      activeScope,
+      keyboardSettings,
+      effectiveBindings,
+      conflictActionIds,
+      saveKeyboardSettings,
+      registerHandlers,
+  }), [
+      activeScope,
+      conflictActionIds,
+      effectiveBindings,
+      keyboardSettings,
+      registerHandlers,
+      saveKeyboardSettings,
+  ])
+
+  return (
+      <KeyboardShortcutsContext.Provider value={value}>
+	{children}
+	<ShortcutHelpDialog
+	    open={shortcutHelpOpen}
+	    onOpenChange={setShortcutHelpOpen}
+	    activeScope={activeScope}
+	    effectiveBindings={effectiveBindings}
+	    conflictActionIds={conflictActionIds}
+	    availableActionIds={availableActionIds}/>
+      </KeyboardShortcutsContext.Provider>)
+}
+
+
+export const useKeyboardShortcutSettings = (): KeyboardShortcutsContextValue => {
+  const context = useContext (KeyboardShortcutsContext)
+
+  if (context == null)
+    throw new Error ('KeyboardShortcutsProvider が必要です．')
+
+  return context
+}
+
+
+export const useKeyboardShortcuts = (handlers: ShortcutHandlers): void => {
+  const { registerHandlers } = useKeyboardShortcutSettings ()
+
+  useEffect (
+      () => registerHandlers (handlers),
+      [handlers, registerHandlers],
+  )
+}
+
+export {
+    DEFAULT_KEY_BINDINGS,
+    SHORTCUT_DEFINITIONS,
+    SHORTCUT_SCOPE_LABELS,
+}

frontend/src/lib/utils.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { cn, originalCreatedAtString, toDate } from '@/lib/utils'
+import { cn, msToTime, originalCreatedAtString, toDate } from '@/lib/utils'
 
 describe ('utils', () => {
   it ('converts strings to dates and leaves date instances intact', () => {
@@ -26,3 +26,14 @@ describe ('utils', () => {
     ).toContain ('時刻不詳')
   })
 })
+
+describe ('msToTime', () => {
+  it ('keeps milliseconds when present', () => {
+    expect (msToTime (60_500)).toBe ('1:00.500')
+    expect (msToTime (60_001)).toBe ('1:00.001')
+  })
+
+  it ('omits milliseconds when they are zero', () => {
+    expect (msToTime (60_000)).toBe ('1:00')
+  })
+})

frontend/src/lib/utils.ts

@@ -71,6 +71,22 @@ export const originalCreatedAtString = (
 }
 
 
+export const msToTime = (ms: number): string => {
+  const totalS = Math.trunc (ms / 1_000)
+  const s = String (totalS % 60)
+  const min = String (Math.trunc (totalS / 60) % 60)
+  const h = Math.trunc (totalS / 3_600)
+  const remainderMs = ms % 1_000
+
+  const base =
+      (h > 0
+       ? `${ h }:${ min.padStart (2, '0') }:${ s.padStart (2, '0') }`
+       : `${ min }:${ s.padStart (2, '0') }`)
+
+  return remainderMs > 0 ? `${ base }.${ remainderMs.toString ().padStart (3, '0') }` : base
+}
+
+
 export const inputClass = (invalid?: boolean, className?: string): string =>
     cn ('w-full rounded border p-2',
 	(invalid

frontend/src/main.tsx

@@ -4,6 +4,7 @@ import { HelmetProvider } from 'react-helmet-async'
 
 import '@/index.css'
 import App from '@/App'
+import { applyClientAnimationMode, getClientAnimationMode } from '@/lib/settings'
 
 const helmetContext = { }
 
@@ -13,6 +14,8 @@ const client = new QueryClient ({
 		   gcTime:    30 * 60 * 1000,
 		   retry:     1 } } })
 
+applyClientAnimationMode (getClientAnimationMode ())
+
 createRoot (document.getElementById ('root')!).render (
     <HelmetProvider context={helmetContext}>
       <QueryClientProvider client={client}>

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)
-    if (raw === 'off' || raw === 'calm' || raw === 'on')
-      return raw
-
-    return fallbackMode
+    return getClientGekanatorBackgroundMotion ()
   }
   catch
   {
-    return fallbackMode
+    return 'on'
   }
 }
 
@@ -3916,7 +3914,7 @@ const GekanatorPage: FC<{ user: User | null }> = ({ user }) => {
   useEffect (() => {
     try
     {
-      localStorage.setItem (backgroundMotionStorageKey, backgroundMotionMode)
+      setClientGekanatorBackgroundMotion (backgroundMotionMode)
     }
     catch
     {

frontend/src/pages/materials/MaterialBasePage.tsx

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

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -79,7 +79,7 @@ const MaterialNewPage: FC = () => {
 	  <FieldError messages={baseErrors}/>
 
 	  {/* タグ */}
-	  <FormField label="タグ" messages={fieldErrors.tag}>
+	   <FormField label="タグ" messages={fieldErrors.tag}>
 	    {({ describedBy, invalid }) => (
 		<TagInput
 		    describedBy={describedBy}

frontend/src/pages/posts/PostDetailPage.tsx

@@ -15,6 +15,7 @@ import { SITE_TITLE } from '@/config'
 import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { getClientThumbnailMode } from '@/lib/settings'
 import { canEditContent } from '@/lib/users'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
@@ -29,6 +30,7 @@ type Props = { user: User | null }
 
 const PostDetailPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
+  const thumbnailMode = getClientThumbnailMode ()
   const { id } = useParams ()
   const postId = String (id ?? '')
   const postKey = postsKeys.show (postId)
@@ -92,16 +94,16 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		       : 'bg-gray-500 hover:bg-gray-600')
 
   return (
-      <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
+      <div
+	  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>
 
-	<div className="hidden md:block">
-	  {post && <TagDetailSidebar post={post}/>}
-	</div>
+	{post && <TagDetailSidebar post={post} className="hidden md:block"/>}
 
 	<MainArea className="relative">
 	  {post
@@ -134,7 +136,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		      </div>)
 		})}
 
-		{(post.thumbnail || post.thumbnailBase) && (
+		{thumbnailMode !== 'off' && (post.thumbnail || post.thumbnailBase) && (
 		    <motion.div
 			layoutId={`page-${ id }`}
 			className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
@@ -145,6 +147,8 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		      <img src={post.thumbnail || post.thumbnailBase || undefined}
 			   alt={post.title || post.url}
 			   title={post.title || post.url || undefined}
+			   loading={thumbnailMode === 'light' ? 'lazy' : 'eager'}
+			   decoding="async"
 			   className="object-cover w-full h-full"/>
 		    </motion.div>)}
 
@@ -179,9 +183,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 	   : 'Loading...'}
 	</MainArea>
 
-	<div className="md:hidden">
-	  {post && <TagDetailSidebar post={post} sp/>}
-	</div>
+	{post && <TagDetailSidebar post={post} sp className="md:hidden"/>}
       </div>)
 }
 

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -91,9 +91,13 @@ const PostHistoryPage: FC = () => {
 	  .filter (p => p.type !== 'removed')
 	  .map (p => p.id)
 	  .join (' ')
+      const duration =
+	  change.videoMs.current == null
+	  ? null
+	  : String (change.videoMs.current / 1_000)
       const originalCreatedFrom = change.originalCreatedFrom.current
       const originalCreatedBefore = change.originalCreatedBefore.current
-      await updatePost ({ id, title, tags, parentPostIds,
+      await updatePost ({ id, title, tags, duration, parentPostIds,
 			  originalCreatedFrom, originalCreatedBefore },
 		        { force: true })
 

frontend/src/pages/posts/PostListPage.tsx

@@ -1,7 +1,7 @@
 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'
@@ -13,12 +13,24 @@ 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,
+    getClientListLimit,
+    LIST_LIMIT_OPTIONS,
+    setClientListSettings,
+} from '@/lib/settings'
+import { useKeyboardShortcuts } from '@/lib/useKeyboardShortcuts'
 import { fetchWikiPageByTitle } from '@/lib/wiki'
 
 import type { FC } from 'react'
 
 import type { WikiPage } from '@/types'
 
+const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
+  const n = Number (value)
+  return n === 20 || n === 50 || n === 100 ? n : null
+}
+
 
 const PostListPage: FC = () => {
   const containerRef = useRef<HTMLDivElement | null> (null)
@@ -26,6 +38,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 +46,18 @@ 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 = 'original_created_at:desc' as const
 
   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 +65,40 @@ const PostListPage: FC = () => {
   const cursor = ''
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
+  useEffect (() => {
+    setClientListSettings ('postList', { limit })
+  }, [limit])
+
+  const updatePage = (nextPage: number) => {
+    const params = new URLSearchParams (location.search)
+    params.set ('page', String (Math.max (1, nextPage)))
+    navigate (`${ location.pathname }?${ params.toString () }`)
+  }
+
+  const updateListQuery = (next: { limit?: 20 | 50 | 100 }) => {
+    const params = new URLSearchParams (location.search)
+    params.set ('limit', String (next.limit ?? limit))
+    params.set ('page', '1')
+    navigate (`${ location.pathname }?${ params.toString () }`)
+  }
+
+  useKeyboardShortcuts (useMemo (() => ({
+      ...(page > 1
+	  ? {
+	      'pagination.previous': () => {
+		  updatePage (page - 1)
+	      },
+	  }
+	  : { }),
+      ...(totalPages > 0 && page < totalPages
+	  ? {
+	      'pagination.next': () => {
+		  updatePage (Math.min (page + 1, totalPages))
+	      },
+	  }
+	  : { }),
+  }), [page, totalPages, location.search]))
+
   useLayoutEffect (() => {
     scroll (0, 0)
 
@@ -70,6 +122,7 @@ const PostListPage: FC = () => {
 
   return (
       <div
+	  data-sidebar-container
 	  className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden"
 	  ref={containerRef}>
 	<Helmet>
@@ -89,7 +142,24 @@ const PostListPage: FC = () => {
 	}}/>
 
 	<MainArea>
-	  <TabGroup>
+	  <TabGroup
+	      rightAddon={
+		  <label className="flex items-center gap-2 text-xs text-muted-foreground">
+		    <span>件数</span>
+		    <select
+			className="rounded border border-border bg-background px-2 py-1 text-sm
+				   text-foreground"
+			value={limit}
+			onChange={ev => updateListQuery ({
+			    limit: Number (ev.target.value) as 20 | 50 | 100,
+			})}>
+		      {LIST_LIMIT_OPTIONS.map (value => (
+			  <option key={value} value={value}>
+			    {value}
+			  </option>))}
+		    </select>
+		  </label>
+	      }>
 	    <Tab name="広場">
 	      {posts.length > 0
 	       ? (

frontend/src/pages/posts/PostNewPage.test.tsx

@@ -62,6 +62,24 @@ describe ('PostNewPage', () => {
     expect (toastApi.toast).toHaveBeenCalledWith ({ title: '投稿成功!' })
   })
 
+  it ('preserves duration while the video tag is temporarily removed', () => {
+    api.apiGet.mockResolvedValue ([])
+
+    renderWithProviders (<PostNewPage user={buildUser ({ role: 'member' })}/>)
+
+    const tags = screen.getAllByRole ('textbox')[3]
+    fireEvent.change (tags, { target: { value: '動画' } })
+    fireEvent.change (screen.getByRole ('spinbutton'), { target: { value: '180.5' } })
+
+    fireEvent.change (tags, { target: { value: 'general-tag' } })
+    expect (screen.queryByRole ('spinbutton')).not.toBeInTheDocument ()
+
+    fireEvent.change (tags, {
+      target: { value: '動画 general-tag' },
+    })
+    expect (screen.getByRole ('spinbutton')).toHaveValue (180.5)
+  })
+
   it ('shows 422 validation errors for post fields', async () => {
     api.apiGet.mockResolvedValue ([])
     api.isApiError.mockReturnValue (true)

frontend/src/pages/posts/PostNewPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useNavigate } from 'react-router-dom'
 
@@ -25,7 +25,7 @@ import type { User } from '@/types'
 type Props = { user: User | null }
 
 type PostFormField =
-    'url' | 'title' | 'tags' | 'parentPostIds' | 'originalCreatedAt' | 'thumbnail'
+    'url' | 'title' | 'tags' | 'parentPostIds' | 'videoMs' | 'originalCreatedAt' | 'thumbnail'
 
 
 const PostNewPage: FC<Props> = ({ user }) => {
@@ -40,17 +40,18 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const [originalCreatedFrom, setOriginalCreatedFrom] = useState<string | null> (null)
   const [parentPostIds, setParentPostIds] = useState ('')
   const [tags, setTags] = useState ('')
-  const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
+  const [duration, setDuration] = useState ('')
   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 previousURLRef = useRef ('')
   const thumbnailPreviewRef = useRef ('')
+  const videoFlg =
+      useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
+               [tags])
 
   const handleSubmit = async () => {
     clearValidationErrors ()
@@ -60,6 +61,8 @@ const PostNewPage: FC<Props> = ({ user }) => {
     formData.append ('url', url)
     formData.append ('tags', tags)
     formData.append ('parent_post_ids', parentPostIds)
+    if (videoFlg && duration !== '')
+      formData.append ('duration', duration)
     if (thumbnailFile)
       formData.append ('thumbnail', thumbnailFile)
     if (originalCreatedFrom)
@@ -80,23 +83,17 @@ const PostNewPage: FC<Props> = ({ user }) => {
     }
   }
 
-  const handleURLBlur = () => {
-    if (!(url) || url === previousURLRef.current)
-      return
-
-    if (titleAutoFlg)
-      fetchTitle ()
-    if (thumbnailAutoFlg)
-      fetchThumbnail ()
-    previousURLRef.current = url
-  }
-
   const fetchTitle = useCallback (async () => {
-    setTitle ('')
     setTitleLoading (true)
-    const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
-    setTitle (data.title || '')
-    setTitleLoading (false)
+    try
+    {
+      const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
+      setTitle (data.title || '')
+    }
+    finally
+    {
+      setTitleLoading (false)
+    }
   }, [url])
 
   const fetchThumbnail = useCallback (async () => {
@@ -105,30 +102,26 @@ const PostNewPage: FC<Props> = ({ user }) => {
     setThumbnailLoading (true)
     if (thumbnailPreviewRef.current)
       URL.revokeObjectURL (thumbnailPreviewRef.current)
-    const data = await apiGet<Blob> ('/preview/thumbnail',
-				     { params: { url }, responseType: 'blob' })
-    const imageURL = URL.createObjectURL (data)
-    setThumbnailPreview (imageURL)
-    setThumbnailFile (new File ([data],
-				'thumbnail.png',
-				{ type: data.type || 'image/png' }))
-    setThumbnailLoading (false)
+    try
+    {
+      const data = await apiGet<Blob> ('/preview/thumbnail',
+				       { params: { url }, responseType: 'blob' })
+      const imageURL = URL.createObjectURL (data)
+      setThumbnailPreview (imageURL)
+      setThumbnailFile (new File ([data],
+				  'thumbnail.png',
+				  { type: data.type || 'image/png' }))
+    }
+    finally
+    {
+      setThumbnailLoading (false)
+    }
   }, [url])
 
   useEffect (() => {
     thumbnailPreviewRef.current = thumbnailPreview
   }, [thumbnailPreview])
 
-  useEffect (() => {
-    if (titleAutoFlg && url)
-      fetchTitle ()
-  }, [fetchTitle, titleAutoFlg, url])
-
-  useEffect (() => {
-    if (thumbnailAutoFlg && url)
-      fetchThumbnail ()
-  }, [fetchThumbnail, thumbnailAutoFlg, url])
-
   if (!(editable))
     return <Forbidden/>
 
@@ -150,59 +143,62 @@ const PostNewPage: FC<Props> = ({ user }) => {
 		       onChange={e => setURL (e.target.value)}
 		       aria-describedby={describedBy}
 		       aria-invalid={invalid}
-		       className={inputClass (invalid)}
-		       onBlur={handleURLBlur}/>)}
+		       className={inputClass (invalid)}/>)}
 	  </FormField>
 
 	  {/* タイトル */}
-	  <FormField
-	      checkBox={{
-		  label:    '自動',
-		  checked:  titleAutoFlg,
-		  onChange: ev => setTitleAutoFlg (ev.target.checked)}}
-	      label="タイトル"
-	      messages={fieldErrors.title}>
+	  <FormField label="タイトル" messages={fieldErrors.title}>
 	    {({ describedBy, invalid }) => (
-		<input type="text"
-		       aria-describedby={describedBy}
-		       aria-invalid={invalid}
-		       className={inputClass (invalid)}
-		       value={title}
-		       placeholder={titleLoading ? 'Loading...' : ''}
-		       onChange={ev => setTitle (ev.target.value)}
-		       disabled={titleAutoFlg}/>)}
+		<div className="space-y-2">
+		  <input type="text"
+			 aria-describedby={describedBy}
+			 aria-invalid={invalid}
+			 className={inputClass (invalid)}
+			 value={title}
+			 placeholder={titleLoading ? 'Loading...' : ''}
+			 onChange={ev => setTitle (ev.target.value)}
+			 disabled={titleLoading}/>
+		  <div className="flex flex-wrap items-center gap-2 text-sm">
+		    <span>必要なタイミングで URL から取得できます．</span>
+		    <Button
+			type="button"
+			variant="outline"
+			onClick={() => void fetchTitle ()}
+			disabled={!(url) || titleLoading}>
+		      取得
+		    </Button>
+		  </div>
+		</div>)}
 	  </FormField>
 
 	  {/* サムネール */}
-	  <FormField
-	      checkBox={{
-		  label:    '自動',
-		  checked:  thumbnailAutoFlg,
-		  onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
-	      label="サムネール"
-	      messages={fieldErrors.thumbnail}>
+	  <FormField label="サムネール" messages={fieldErrors.thumbnail}>
 	    {({ describedBy, invalid }) => (
 		<>
-		  {thumbnailAutoFlg
-		   ? (thumbnailLoading
-		      ? <p className="text-gray-500 text-sm">Loading...</p>
-		      : !(thumbnailPreview) && (
-			  <p className="text-gray-500 text-sm">
-			    URL から自動取得されます。
-			  </p>))
-		   : (
-		      <input type="file"
-			     accept="image/*"
-			     aria-describedby={describedBy}
-			     aria-invalid={invalid}
-			     onChange={e => {
-			       const file = e.target.files?.[0]
-			       if (file)
-				 {
-				   setThumbnailFile (file)
-				   setThumbnailPreview (URL.createObjectURL (file))
-				 }
-			     }}/>)}
+		  <div className="mb-2 flex flex-wrap items-center gap-2 text-sm">
+		    <span>必要なタイミングで URL から取得できます．</span>
+		    <Button
+			type="button"
+			variant="outline"
+			onClick={() => void fetchThumbnail ()}
+			disabled={!(url) || thumbnailLoading}>
+		      取得
+		    </Button>
+		  </div>
+		  {thumbnailLoading && (
+		      <p className="text-gray-500 text-sm">Loading...</p>)}
+		  <input type="file"
+			 accept="image/*"
+			 aria-describedby={describedBy}
+			 aria-invalid={invalid}
+			 onChange={e => {
+			   const file = e.target.files?.[0]
+			   if (file)
+			     {
+			       setThumbnailFile (file)
+			       setThumbnailPreview (URL.createObjectURL (file))
+			     }
+			 }}/>
 		  {thumbnailPreview && (
 		      <img src={thumbnailPreview}
 			   alt="preview"
@@ -233,6 +229,20 @@ const PostNewPage: FC<Props> = ({ user }) => {
 	      setOriginalCreatedBefore={setOriginalCreatedBefore}
 	      errors={fieldErrors.originalCreatedAt}/>
 
+	  {/* 動画時間 */}
+	  {(videoFlg &&
+	      <FormField label="動画時間" messages={fieldErrors.videoMs}>
+		{({ invalid }) => (
+		    <input
+			type="number"
+			min="0.001"
+			step="0.001"
+			value={duration}
+			onChange={e => setDuration (e.target.value)}
+			aria-invalid={invalid}
+			className={inputClass (invalid)}/>)}
+	      </FormField>)}
+
 	  {/* 送信 */}
 	  <Button onClick={handleSubmit}
 		  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"

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,
+    setClientListSettings,
+} from '@/lib/settings'
+import { useKeyboardShortcuts } from '@/lib/useKeyboardShortcuts'
 import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
@@ -31,6 +40,31 @@ const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
     qs.set (k, t)
 }
 
+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 => {
+  switch (value)
+  {
+  case 'title:asc':
+  case 'title:desc':
+  case 'url:asc':
+  case 'url:desc':
+  case 'original_created_at:asc':
+  case 'original_created_at:desc':
+  case 'created_at:asc':
+  case 'created_at:desc':
+  case 'updated_at:asc':
+  case 'updated_at:desc':
+    return value
+
+  default:
+    return null
+  }
+}
+
 
 const PostSearchPage: FC = () => {
   const location = useLocation ()
@@ -41,7 +75,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 +91,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 +125,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 +159,22 @@ 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 () }`)
+  }
+
+  const updatePage = (nextPage: number) => {
+    const qs = new URLSearchParams (location.search)
+    qs.set ('page', String (Math.max (1, nextPage)))
     navigate (`${ location.pathname }?${ qs.toString () }`)
   }
 
@@ -121,6 +183,23 @@ const PostSearchPage: FC = () => {
     search ()
   }
 
+  useKeyboardShortcuts (useMemo (() => ({
+      ...(page > 1
+	  ? {
+	      'pagination.previous': () => {
+		  updatePage (page - 1)
+	      },
+	  }
+	  : { }),
+      ...(totalPages > 0 && page < totalPages
+	  ? {
+	      'pagination.next': () => {
+		  updatePage (Math.min (page + 1, totalPages))
+	      },
+	  }
+	  : { }),
+  }), [page, totalPages, location.search]))
+
   const defaultDirection = { title: 'asc',
 			     url: 'asc',
 			     original_created_at: 'desc',
@@ -134,7 +213,24 @@ const PostSearchPage: FC = () => {
 	</Helmet>
 
 	<div className="max-w-xl">
-	  <PageTitle>広場検索</PageTitle>
+	  <div className="flex flex-wrap items-center justify-between gap-3">
+	    <PageTitle>広場検索</PageTitle>
+	    <label className="flex items-center gap-2 text-xs text-muted-foreground">
+	      <span>件数</span>
+	      <select
+		  className="rounded border border-border bg-background px-2 py-1 text-sm
+			     text-foreground"
+		  value={limit}
+		  onChange={ev => updateListQuery ({
+		      limit: Number (ev.target.value) as 20 | 50 | 100,
+		  })}>
+		{LIST_LIMIT_OPTIONS.map (value => (
+		    <option key={value} value={value}>
+		      {value}
+		    </option>))}
+	      </select>
+	    </label>
+	  </div>
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* タイトル */}
@@ -142,6 +238,7 @@ const PostSearchPage: FC = () => {
 	      {({ invalid }) => (
 		  <input
 		      type="text"
+		      data-shortcut-focus-search="true"
 		      value={title}
 		      onChange={e => setTitle (e.target.value)}
 		      className={inputClass (invalid)}/>)}
@@ -161,6 +258,7 @@ const PostSearchPage: FC = () => {
 	    <FormField label="タグ">
 	      {() => (
 		  <TagInput
+		      includeNico={true}
 		      value={tagsStr}
 		      setValue={setTagsStr}/>)}
 	    </FormField>
@@ -296,7 +394,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,
+} from '@/lib/settings'
+import { useKeyboardShortcuts } from '@/lib/useKeyboardShortcuts'
 import { fetchTags } from '@/lib/tags'
 import { dateString, inputClass } from '@/lib/utils'
 
@@ -35,6 +44,31 @@ const boolFromQuery = (value: string | null): boolean =>
 
 const tagStateLabel = (deprecatedAt: string | null) => deprecatedAt ? '廃止' : ''
 
+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 => {
+  switch (value)
+  {
+  case 'name:asc':
+  case 'name:desc':
+  case 'category:asc':
+  case 'category:desc':
+  case 'post_count:asc':
+  case 'post_count:desc':
+  case 'created_at:asc':
+  case 'created_at:desc':
+  case 'updated_at:asc':
+  case 'updated_at:desc':
+    return value
+
+  default:
+    return null
+  }
+}
+
 
 const TagListPage: FC = () => {
   const location = useLocation ()
@@ -44,7 +78,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 +96,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 +130,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,16 +167,49 @@ 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 updatePage = (nextPage: number) => {
+    const qs = new URLSearchParams (location.search)
+    qs.set ('page', String (Math.max (1, nextPage)))
+    navigate (`${ location.pathname }?${ qs.toString () }`)
+  }
+
   const defaultDirection = { name: 'asc',
 			     category: 'asc',
 			     post_count: 'desc',
 			     created_at: 'desc',
 			     updated_at: 'desc' } as const
 
+  useKeyboardShortcuts (useMemo (() => ({
+      ...(page > 1
+	  ? {
+	      'pagination.previous': () => {
+		  updatePage (page - 1)
+	      },
+	  }
+	  : { }),
+      ...(totalPages > 0 && page < totalPages
+	  ? {
+	      'pagination.next': () => {
+		  updatePage (Math.min (page + 1, totalPages))
+	      },
+	  }
+	  : { }),
+  }), [page, totalPages, location.search]))
+
   return (
       <MainArea>
 	<Helmet>
@@ -138,7 +217,24 @@ const TagListPage: FC = () => {
 	</Helmet>
 
 	<div className="max-w-xl">
-	  <PageTitle>タグ</PageTitle>
+	  <div className="flex flex-wrap items-center justify-between gap-3">
+	    <PageTitle>タグ</PageTitle>
+	    <label className="flex items-center gap-2 text-xs text-muted-foreground">
+	      <span>件数</span>
+	      <select
+		  value={limit}
+		  onChange={ev => updateListQuery ({
+		      limit: Number (ev.target.value) as 20 | 50 | 100,
+		  })}
+		  className="rounded border border-border bg-background px-2 py-1 text-sm
+			     text-foreground">
+		{LIST_LIMIT_OPTIONS.map (value => (
+		    <option key={value} value={value}>
+		      {value}
+		    </option>))}
+	      </select>
+	    </label>
+	  </div>
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* 名前 */}
@@ -146,6 +242,7 @@ const TagListPage: FC = () => {
 	      {({ invalid }) => (
 		  <input
 		      type="text"
+		      data-shortcut-focus-search="true"
 		      value={name}
 		      onChange={e => setName (e.target.value)}
 		      className={inputClass (invalid)}/>)}

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

@@ -88,6 +88,10 @@ const weights = buildTheatrePostSelectionWeights ({
     tags:    [],
   }],
 })
+const watchingUsers = [
+  { id: 1, name: 'tester' },
+  { id: 2, name: 'another' },
+]
 
 const renderPage = (user = buildUser ({ id: 1, role: 'member' })) =>
   renderWithProviders (
@@ -101,6 +105,20 @@ 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)
     {
@@ -108,13 +126,17 @@ const mockDefaultApi = () => {
       return Promise.resolve (theatre)
 
     case '/theatres/7/comments':
+      if (commentsFetched)
+	return Promise.resolve ([])
+
+      commentsFetched = true
       return Promise.resolve ([
-        buildTheatreComment ({
-          theatreId: 7,
-          no:        2,
-          user:      { id: 1, name: 'tester' },
-          content:   '視聴コメント',
-        }),
+	  buildTheatreComment ({
+	    theatreId: 7,
+	    no:        2,
+	    user:      { id: 1, name: 'tester' },
+	    content:   '視聴コメント',
+	  }),
       ])
 
     case '/theatres/7/programmes':
@@ -132,32 +154,22 @@ const mockDefaultApi = () => {
     switch (path)
     {
     case '/theatres/7/watching':
-      return Promise.resolve (buildTheatreInfo ({
-        postId:        currentPost.id,
-        postStartedAt: '2026-01-02T03:04:05.000Z',
-        postElapsedMs: 1_000,
-        watchingUsers: [{ id: 1, name: 'tester' }],
-        skipVote:      {
-          votesCount:         0,
-          requiredCount:      2,
-          watchingUsersCount: 1,
-          voted:              false,
-        },
-      }))
+      return Promise.resolve (currentTheatreInfo)
 
     case '/theatres/7/skip_vote':
-      return Promise.resolve (buildTheatreInfo ({
-        postId:        currentPost.id,
-        postStartedAt: '2026-01-02T03:04:05.000Z',
-        postElapsedMs: 2_000,
-        watchingUsers: [{ id: 1, name: 'tester' }],
-        skipVote:      {
-          votesCount:         1,
-          requiredCount:      2,
-          watchingUsersCount: 1,
-          voted:              true,
-        },
-      }))
+      currentTheatreInfo = buildTheatreInfo ({
+	postId:        currentPost.id,
+	postStartedAt: '2026-01-02T03:04:05.000Z',
+	postElapsedMs: 2_000,
+	watchingUsers,
+	skipVote:      {
+	  votesCount:         1,
+	  requiredCount:      2,
+	  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,11 +10,18 @@ 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'
@@ -52,6 +59,8 @@ const INITIAL_WEIGHTS: TheatrePostSelectionWeights =
 
 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 列',
@@ -211,11 +220,16 @@ 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)
@@ -228,36 +242,25 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
   const [post, setPost] = useState<Post | null> (null)
   const [videoLength, setVideoLength] = useState (0)
   const [weights, setWeights] = useState<TheatrePostSelectionWeights> (INITIAL_WEIGHTS)
-  const [layoutMode, setLayoutMode] = useState<TheatreLayoutMode> (() => {
-    const stored = localStorage.getItem (LAYOUT_STORAGE_KEY)
-    return (
-	((['threeColumns', 'tagsBottom', 'commentsBottom'] as TheatreLayoutMode[])
-	 .includes (stored as TheatreLayoutMode))
-	? (stored as TheatreLayoutMode)
-	: 'threeColumns')
-  })
-  const [tagFlow, setTagFlow] = useState<TagFlow> (() => {
-    const stored = localStorage.getItem (TAG_FLOW_STORAGE_KEY)
-    return (
-	(['vertical', 'horizontal'] as TagFlow[]).includes (stored as TagFlow)
-	? (stored as TagFlow)
-	: 'vertical')
-  })
+  const [layoutMode, setLayoutMode] =
+      useState<TheatreLayoutMode> (() => getClientTheatreLayoutMode ())
+  const [tagFlow, setTagFlow] = useState<TagFlow> (() => getClientTheatreTagFlow ())
   const { fieldErrors, clearValidationErrors, applyValidationError } =
       useValidationErrors<TheatreCommentField> ()
 
   const changeLayoutMode = (mode: TheatreLayoutMode) => {
     setLayoutMode (mode)
-    localStorage.setItem (LAYOUT_STORAGE_KEY, mode)
+    setClientTheatreLayoutMode (mode)
   }
 
   const changeTagFlow = (flow: TagFlow) => {
     setTagFlow (flow)
-    localStorage.setItem (TAG_FLOW_STORAGE_KEY, flow)
+    setClientTheatreTagFlow (flow)
   }
 
   const applyTheatreInfo = useCallback ((nextInfo: TheatreInfo) => {
     theatreInfoReceivedAtRef.current = performance.now ()
+    theatreInfoRef.current = nextInfo
     setTheatreInfo (nextInfo)
   }, [])
 
@@ -324,6 +327,17 @@ 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
@@ -387,6 +401,9 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	    setComments (prev => [...newComments, ...prev])
 	  }
 
+	if (loadingRef.current)
+	  return
+
 	const currentInfo = theatreInfoRef.current
 	const ended =
 	    currentInfo.hostFlg
@@ -408,8 +425,9 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	    return
 	  }
 
+	const watchingRequestedAt = performance.now ()
 	const nextInfo = await apiPut<TheatreInfo> (`/theatres/${ id }/watching`)
-	if (!(cancelled))
+	if (!(cancelled) && watchingRequestedAt >= theatreInfoReceivedAtRef.current)
 	  applyTheatreInfo (nextInfo)
       }
       catch (error)
@@ -538,6 +556,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     if (!(id) || !(post))
       return
 
+    loadingRef.current = true
     setLoading (true)
     try
     {
@@ -566,6 +585,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     }
     finally
     {
+      loadingRef.current = false
       setLoading (false)
     }
   }
@@ -639,6 +659,26 @@ 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">
@@ -806,30 +846,26 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	  {theatre && <title>{`${ theatreTitle } | ${ SITE_TITLE }`}</title>}
 	</Helmet>
 
-	<div className={cn (
-	    'grid min-h-full gap-4 overflow-visible md:h-full md:overflow-hidden',
-	    (layoutMode === 'threeColumns'
-	     && ['md:grid-cols-[16rem_minmax(0,1fr)_22rem]',
-		 '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)]'))}>
+	<div
+	    ref={sidebarContainerRef}
+	    data-sidebar-container
+	    className="flex min-h-full flex-col gap-4 overflow-visible md:h-full md:flex-row
+		       md:overflow-hidden">
 	  {layoutMode !== 'tagsBottom' && (
-	      <motion.aside
-		  layout="position"
-		  className="hidden min-w-0 space-y-4 md:order-none md:block md:overflow-y-auto
-			     md:[direction:rtl]">
-		<div className="md:[direction:ltr]">
-		  {tagPanel}
-		</div>
-	      </motion.aside>)}
+	      <SidebarComponent
+		  sidebarKey="theatre-tags"
+		  side="left"
+		  maxWidth={leftSidebarMaxWidth}
+		  onWidthChange={setLeftSidebarWidth}
+		  className="hidden md:block">
+		{tagPanel}
+	      </SidebarComponent>)}
 
 	  <motion.main
 	      layout="position"
-	      className={cn ('order-1 min-w-0 space-y-4 md:order-none md:overflow-y-auto',
-			     layoutMode === 'tagsBottom' && 'md:[direction:rtl]')}>
-	    <div className={cn ('space-y-4', layoutMode === 'tagsBottom' && 'md:[direction:ltr]')}>
+	      className="order-1 min-w-0 flex-1 space-y-4 md:order-none
+			 md:min-w-[360px] md:overflow-y-auto">
+	    <div className="space-y-4">
 	      <section className="overflow-hidden rounded border-zinc-300
 				  dark:border-zinc-800">
 		<div className="flex flex-wrap items-center justify-between gap-3
@@ -965,12 +1001,17 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	  </motion.main>
 
 	  {layoutMode !== 'commentsBottom' && (
-	      <motion.aside
-		  layout="position"
-		  className="hidden min-w-0 space-y-4 md:order-none md:block md:overflow-y-auto">
-		{commentsPanel}
-		{participantsPanel}
-	      </motion.aside>)}
+	      <SidebarComponent
+		  sidebarKey="theatre-comments"
+		  side="right"
+		  maxWidth={rightSidebarMaxWidth}
+		  onWidthChange={setRightSidebarWidth}
+		  className="hidden md:block">
+		<div className="space-y-4">
+		  {commentsPanel}
+		  {participantsPanel}
+		</div>
+	      </SidebarComponent>)}
 	</div>
       </motion.div>)
 }

frontend/src/pages/users/SettingPage.tsx

@@ -1,43 +1,478 @@
-import type { FC } from 'react'
-
-import { useEffect, useState } from 'react'
+import { 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 TagLink from '@/components/TagLink'
+import BehaviourSettingsSection from '@/components/users/BehaviourSettingsSection'
+import KeyboardSettingsSection from '@/components/users/KeyboardSettingsSection'
 import InheritDialogue from '@/components/users/InheritDialogue'
 import UserCodeDialogue from '@/components/users/UserCodeDialogue'
+import { CATEGORY_NAMES, CATEGORIES } from '@/consts'
 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 { applyThemeSelection,
+	 BUILTIN_THEMES,
+	 createCustomThemeFromBase,
+	 defaultThemeTagColoursFor,
+	 DEFAULT_USER_SETTINGS,
+	 deriveUserThemeModeFromSelection,
+	 fetchUserSettings,
+	 hasStoredClientThemeSelection,
+	 getClientActiveThemeId,
+	 getClientCustomThemes,
+	 getResolvedThemeFromSelection,
+	 setClientAppearanceThemes,
+	 updateUserSettings } from '@/lib/settings'
+import { useKeyboardShortcutSettings } from '@/lib/useKeyboardShortcuts'
+import { cn, inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 
-import type { User } from '@/types'
+import type { CSSProperties, Dispatch, FC, KeyboardEvent, SetStateAction } from 'react'
 
-type Props = { user:    User | null
-	       setUser: React.Dispatch<React.SetStateAction<User | null>> }
+import type { Category, Tag, User } from '@/types'
+import type { ActiveThemeId,
+	      ClientTheme,
+	      CustomClientTheme,
+	      ThemeTagColours,
+	      UserSettings } from '@/lib/settings'
+
+type Props = {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>> }
 
 type UserFormField = 'name'
+type SettingsFormField = 'theme'
+type SettingsTab = 'account' | 'theme' | 'keyboard' | 'behavior'
+
+type TabSpec = {
+    id:     SettingsTab
+    label:  string }
+
+type SharedSectionProps = {
+    user:                  User
+    name:                  string
+    onNameChange:          (value: string) => void
+    onInheritOpen:         () => void
+    onUserCodeOpen:        () => void
+    onUserSubmit:          () => void
+    userBaseErrors:        string[]
+    userFieldErrors:       Partial<Record<UserFormField, string[]>>
+    draftActiveThemeId:    ActiveThemeId
+    draftCustomThemes:     Record<string, CustomClientTheme>
+    selectedTheme:         ClientTheme
+    draftTagColours:       ThemeTagColours
+    onThemeChange:         (themeId: ActiveThemeId) => void
+    onEnsureEditableTheme: () => void
+    onTagColourChange:     (category: Category, colour: string) => void
+    onResetAllTagColours:  () => void
+    onResetTagColour:      (category: Category) => void
+    onThemeSubmit:         () => void
+    settingsBaseErrors:    string[]
+    settingsFieldErrors:   Partial<Record<SettingsFormField, string[]>> }
+
+const tabs: TabSpec[] = [
+    { id: 'account', label: 'アカウント' },
+    { id: 'theme', label: 'テーマ' },
+    { id: 'keyboard', label: 'キーボード' },
+    { id: 'behavior', label: '動作' } ]
+
+const sectionClassName =
+    'space-y-4 rounded-xl border border-border bg-background/80 p-4'
+
+const themeLabel: Record<UserSettings['theme'], string> = {
+    system: 'システム設定に従う',
+    light:  'ライト・モード',
+    dark:   'ダーク・モード' }
+
+const builtinThemeLabel: Record<'light' | 'dark', string> = {
+    light: 'ライト・モード',
+    dark:  'ダーク・モード' }
+
+
+const previewTag = (
+    id:         number,
+    name:       string,
+    category:   Category,
+    postCount:  number,
+    hasWiki:    boolean,
+    options?:   { hasDeerjikists?: boolean },
+): Tag => ({
+    id,
+    name,
+    category,
+    deprecatedAt: null,
+    aliases: [],
+    parents: [],
+    postCount,
+    createdAt: '',
+    updatedAt: '',
+    hasWiki,
+    materialId: null,
+    hasDeerjikists: options?.hasDeerjikists ?? false,
+    children: [] })
+
+const previewTags: Record<Category, Tag> = {
+    deerjikist: previewTag (1, 'にじらー', 'deerjikist', 12, true, { hasDeerjikists: true }),
+    meme: previewTag (2, 'ミーム', 'meme', 34, true),
+    character: previewTag (3, 'キャラクター', 'character', 56, false),
+    general: previewTag (4, '一般', 'general', 78, true),
+    material: previewTag (5, '素材', 'material', 90, false),
+    meta: previewTag (6, 'メタ', 'meta', 21, true),
+    nico: previewTag (7, 'nico:sm9', 'nico', 43, false) }
+
+
+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 themePreviewStyle = (tagColours: ThemeTagColours): CSSProperties =>
+    Object.fromEntries (
+	CATEGORIES.flatMap (category => [
+	    [`--tag-colour-${ category }`, tagColours[category]],
+	    [`--tag-colour-${ category }-hover`, tagColours[category]]])) as CSSProperties
+
+
+const themeLabelById = (
+    themeId:       ActiveThemeId,
+    customThemes:  Record<string, CustomClientTheme>,
+): string => {
+  if (themeId === 'system')
+    return themeLabel.system
+  if (themeId === 'light' || themeId === 'dark')
+    return builtinThemeLabel[themeId]
+  return (customThemes[themeId] ?? BUILTIN_THEMES.light).name
+}
+
+
+const AccountSection: FC<SharedSectionProps> = (
+    { name,
+      onInheritOpen,
+      onNameChange,
+      onUserCodeOpen,
+      onUserSubmit,
+      user,
+      userBaseErrors,
+      userFieldErrors },
+) => (
+    <section className={sectionClassName}>
+      <h2 className="text-xl font-bold">アカウント</h2>
+      <FieldError messages={userBaseErrors}/>
+
+      <FormField label="表示名" messages={userFieldErrors.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> = (
+    { draftActiveThemeId,
+      draftCustomThemes,
+      selectedTheme,
+      draftTagColours,
+      onEnsureEditableTheme,
+      onResetAllTagColours,
+      onResetTagColour,
+      onTagColourChange,
+      onThemeChange,
+      onThemeSubmit,
+      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={draftActiveThemeId}
+		onChange={ev => onThemeChange (ev.target.value as ActiveThemeId)}>
+	      <option value="system">{themeLabel.system}</option>
+	      <option value="light">{builtinThemeLabel.light}</option>
+	      <option value="dark">{builtinThemeLabel.dark}</option>
+	      {Object.values (draftCustomThemes).length > 0 && (
+		  <optgroup label="カスタムテーマ">
+		    {Object.values (draftCustomThemes).map (theme => (
+			<option key={theme.id} value={theme.id}>
+			  {theme.name}
+			</option>))}
+		  </optgroup>)}
+	    </select>)}
+      </FormField>
+
+      <div className="space-y-3">
+	<div className="flex flex-wrap items-center justify-between gap-2">
+	  <div>
+	    <h3 className="font-medium">タグカテゴリ色</h3>
+	  </div>
+	  <Button
+	      type="button"
+	      variant="outline"
+	      onClick={onResetAllTagColours}
+	      disabled={selectedTheme.builtin || draftActiveThemeId === 'system'}>
+	    すべてのタグ色を既定に戻す
+	  </Button>
+	</div>
+
+	<div className="space-y-3">
+	  {CATEGORIES.map (category => {
+	      const resolvedDefaults =
+		  defaultThemeTagColoursFor (selectedTheme.baseTheme)
+	      const isDefault =
+		  draftTagColours[category] === resolvedDefaults[category]
+
+	      return (
+		  <div
+		      key={category}
+		      className="flex flex-col gap-3 rounded-lg border border-border/70 px-3 py-3
+				 sm:flex-row sm:items-center sm:justify-between">
+		    <div className="space-y-2">
+		      <p className="text-sm font-medium">{CATEGORY_NAMES[category]}</p>
+		      <div style={themePreviewStyle (draftTagColours)}>
+			<TagLink
+			    tag={previewTags[category]}
+			    linkFlg={false}
+			    truncateOnMobile
+			    withWiki={false}/>
+		      </div>
+		    </div>
+		    <div className="flex flex-wrap items-center gap-3">
+		      <input
+			  type="color"
+			  value={draftTagColours[category]}
+			  onPointerDown={onEnsureEditableTheme}
+			  onFocus={onEnsureEditableTheme}
+			  onChange={ev => onTagColourChange (category, ev.target.value)}
+			  className="h-10 w-16 cursor-pointer rounded border border-border
+				     bg-transparent p-1"/>
+		      <Button
+			  type="button"
+			  variant="ghost"
+			  className="h-auto px-0 py-0 text-xs"
+			  onClick={() => onResetTagColour (category)}
+			  disabled={
+			      isDefault
+			      || selectedTheme.builtin
+			      || draftActiveThemeId === 'system'
+			  }>
+			既定に戻す
+		      </Button>
+		    </div>
+		  </div>)
+	  })}
+	</div>
+      </div>
+
+      <div className="space-y-2 rounded-lg border border-border bg-background p-3
+		      text-foreground shadow-sm transition-colors">
+	<p className="text-sm font-medium">プレビュー</p>
+	<p className="text-xs text-muted-foreground">
+	  現在の表示テーマ: {themeLabelById (draftActiveThemeId, draftCustomThemes)}
+	</p>
+	<div className="flex flex-wrap gap-3" style={themePreviewStyle (draftTagColours)}>
+	  {CATEGORIES.map (category => (
+	      <TagLink
+		  key={category}
+		  tag={previewTags[category]}
+		  linkFlg={false}
+		  truncateOnMobile
+		  withWiki={false}/>))}
+	</div>
+      </div>
+
+      <Button type="button" onClick={onThemeSubmit}>
+	テーマを保存
+      </Button>
+    </section>)
 
 
 const SettingPage: FC<Props> = ({ user, setUser }) => {
-  const [name, setName] = useState ('')
-  const [userCodeVsbl, setUserCodeVsbl] = useState (false)
-  const [inheritVsbl, setInheritVsbl] = useState (false)
-  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
-      useValidationErrors<UserFormField> ()
+  const location = useLocation ()
+  const navigate = useNavigate ()
 
-  const handleSubmit = async () => {
+  const [inheritVsbl, setInheritVsbl] = useState (false)
+  const [loading, setLoading] = useState (true)
+  const [name, setName] = useState ('')
+  const [settingsError, setSettingsError] = useState<string | null> (null)
+  const [, setDraftSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
+  const [savedActiveThemeId, setSavedActiveThemeId] =
+      useState<ActiveThemeId> (getClientActiveThemeId ())
+  const [savedCustomThemes, setSavedCustomThemes] =
+      useState<Record<string, CustomClientTheme>> (getClientCustomThemes ())
+  const [draftActiveThemeId, setDraftActiveThemeId] =
+      useState<ActiveThemeId> (getClientActiveThemeId ())
+  const [draftCustomThemes, setDraftCustomThemes] =
+      useState<Record<string, CustomClientTheme>> (getClientCustomThemes ())
+  const [userCodeVsbl, setUserCodeVsbl] = useState (false)
+  const { conflictActionIds } = useKeyboardShortcutSettings ()
+  const { baseErrors: userBaseErrors,
+	  fieldErrors: userFieldErrors,
+	  clearValidationErrors: clearUserValidationErrors,
+	  applyValidationError: applyUserValidationError } = useValidationErrors<UserFormField> ()
+  const { baseErrors: settingsBaseErrors,
+	  fieldErrors: settingsFieldErrors,
+	  clearValidationErrors: clearSettingsValidationErrors,
+	  applyValidationError: applySettingsValidationError } =
+      useValidationErrors<SettingsFormField> ()
+
+  const activeTab = useMemo<SettingsTab> (() => parseTab (location.search), [location.search])
+  const selectedTheme = useMemo<ClientTheme> (
+      () => getResolvedThemeFromSelection (draftActiveThemeId, draftCustomThemes),
+      [draftActiveThemeId, draftCustomThemes])
+  const draftTagColours = selectedTheme.tokens.tagColours
+
+  const setActiveTab = (tab: SettingsTab) => {
+    const params = new URLSearchParams (location.search)
+    params.set ('tab', tab)
+    navigate (
+	`${ location.pathname }?${ params.toString () }`,
+	{ replace: true })
+  }
+
+  const settingsTabErrors = useMemo<Record<SettingsTab, boolean>> (
+      () => (
+	  { account: Boolean (userFieldErrors.name?.length),
+	    theme: Boolean (settingsFieldErrors.theme?.length),
+	    keyboard: conflictActionIds.size > 0,
+	    behavior: false }),
+      [conflictActionIds.size, settingsFieldErrors.theme, userFieldErrors.name])
+
+  const applyDraftThemeSelection = (
+      activeThemeId: ActiveThemeId,
+      customThemes:  Record<string, CustomClientTheme>,
+  ) => {
+    setDraftActiveThemeId (activeThemeId)
+    setDraftCustomThemes (customThemes)
+    setDraftSettings (current => ({
+	...current,
+	theme: deriveUserThemeModeFromSelection (activeThemeId, customThemes) }))
+    applyThemeSelection (activeThemeId, customThemes)
+  }
+
+  const ensureEditableCustomTheme = (): {
+      activeThemeId: ActiveThemeId
+      customThemes:  Record<string, CustomClientTheme> } => {
+    if (draftActiveThemeId !== 'system' && draftCustomThemes[draftActiveThemeId] != null)
+      {
+	return { activeThemeId: draftActiveThemeId,
+		 customThemes: draftCustomThemes }
+      }
+
+    const customTheme = createCustomThemeFromBase (
+	selectedTheme.baseTheme,
+	{ ...selectedTheme.tokens,
+	  tagColours: { ...selectedTheme.tokens.tagColours } })
+    const nextCustomThemes = {
+	...draftCustomThemes,
+	[customTheme.id]: customTheme }
+
+    return {
+	activeThemeId: customTheme.id,
+	customThemes: nextCustomThemes }
+  }
+
+  const handleEnsureEditableTheme = (): {
+      activeThemeId: ActiveThemeId
+      customThemes:  Record<string, CustomClientTheme> } => {
+    const editable = ensureEditableCustomTheme ()
+
+    if (editable.activeThemeId !== draftActiveThemeId
+	|| editable.customThemes !== draftCustomThemes)
+      applyDraftThemeSelection (editable.activeThemeId, editable.customThemes)
+
+    return editable
+  }
+
+  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    const currentIndex = tabs.findIndex (tab => tab.id === activeTab)
+
+    switch (event.key)
+    {
+    case 'ArrowDown':
+    case 'ArrowRight':
+      event.preventDefault ()
+      setActiveTab (tabs[(currentIndex + 1) % tabs.length].id)
+      break
+
+    case 'ArrowUp':
+    case 'ArrowLeft':
+      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 ()
+    clearUserValidationErrors ()
 
     const formData = new FormData
     formData.append ('name', name)
@@ -47,13 +482,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 }))
-      toast ({ title: '設定を更新しました．' })
+      setUser (currentUser => ({ ...currentUser, ...data }))
+      toast ({ title: '表示名を更新しました．' })
     }
-    catch (e)
+    catch (submitError)
     {
-      applyValidationError (e)
-      toast ({ title: 'しっぱい……' })
+      applyUserValidationError (submitError)
+      toast ({ title: '表示名を更新できませんでした．' })
+    }
+  }
+
+  const handleThemeSubmit = async () => {
+    clearSettingsValidationErrors ()
+
+    try
+    {
+      const themeMode =
+	  deriveUserThemeModeFromSelection (draftActiveThemeId, draftCustomThemes)
+      const data = await updateUserSettings ({ theme: themeMode })
+      setDraftSettings ({ ...data, theme: themeMode })
+      setSavedActiveThemeId (draftActiveThemeId)
+      setSavedCustomThemes (draftCustomThemes)
+      setClientAppearanceThemes (draftActiveThemeId, draftCustomThemes)
+      applyThemeSelection (draftActiveThemeId, draftCustomThemes)
+      toast ({ title: 'テーマ設定を保存しました．' })
+    }
+    catch (submitError)
+    {
+      applySettingsValidationError (submitError)
+      toast ({ title: 'テーマ設定を保存できませんでした．' })
     }
   }
 
@@ -64,6 +521,142 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
     setName (user.name ?? '')
   }, [user])
 
+  useEffect (() => {
+    if (!(user))
+      return
+
+    let cancelled = false
+
+    void (async () => {
+      setLoading (true)
+
+      try
+      {
+	const data = await fetchUserSettings ()
+	if (cancelled)
+	  return
+
+	const customThemes = getClientCustomThemes ()
+	const activeThemeId = (hasStoredClientThemeSelection ()
+			       ? getClientActiveThemeId ()
+			       : data.theme)
+	const themeMode = deriveUserThemeModeFromSelection (activeThemeId, customThemes)
+
+	setDraftSettings ({ ...data, theme: themeMode })
+	setSavedActiveThemeId (activeThemeId)
+	setSavedCustomThemes (customThemes)
+	setDraftActiveThemeId (activeThemeId)
+	setDraftCustomThemes (customThemes)
+	setSettingsError (null)
+      }
+      catch
+      {
+	if (cancelled)
+	  return
+
+	setSettingsError ('設定の読込みに失敗しました．')
+      }
+      finally
+      {
+	if (!(cancelled))
+	  setLoading (false)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [user])
+
+  useEffect (() => {
+    if (userFieldErrors.name?.length)
+      setActiveTab ('account')
+  }, [location.pathname, location.search, userFieldErrors.name])
+
+  useEffect (() => {
+    if (settingsFieldErrors.theme?.length)
+      setActiveTab ('theme')
+  }, [location.pathname, location.search, settingsFieldErrors.theme])
+
+  useEffect (() => {
+    applyThemeSelection (draftActiveThemeId, draftCustomThemes)
+
+    return () => {
+      applyThemeSelection (savedActiveThemeId, savedCustomThemes)
+    }
+  }, [draftActiveThemeId, draftCustomThemes, savedActiveThemeId, savedCustomThemes])
+
+  const sectionProps: SharedSectionProps | null =
+      user
+      ? { user,
+	  name,
+	  onNameChange: setName,
+	  onInheritOpen: () => setInheritVsbl (true),
+	  onUserCodeOpen: () => setUserCodeVsbl (true),
+	  onUserSubmit: handleUserSubmit,
+	  userBaseErrors,
+	  userFieldErrors,
+	  draftActiveThemeId,
+	  draftCustomThemes,
+	  selectedTheme,
+	  draftTagColours,
+	  onThemeChange: themeId => {
+	    applyDraftThemeSelection (themeId, draftCustomThemes)
+	  },
+	  onEnsureEditableTheme: () => {
+	    handleEnsureEditableTheme ()
+	  },
+	  onTagColourChange: (category, colour) => {
+	    const editable = handleEnsureEditableTheme ()
+	    const editableTheme = editable.customThemes[editable.activeThemeId]
+	    const nextCustomThemes = {
+		...editable.customThemes,
+		[editable.activeThemeId]: {
+		    ...editableTheme,
+		    tokens: {
+			...editableTheme.tokens,
+			tagColours: {
+			    ...editableTheme.tokens.tagColours,
+			    [category]: colour } } } }
+	    applyDraftThemeSelection (editable.activeThemeId, nextCustomThemes)
+	  },
+	  onResetAllTagColours: () => {
+	    if (selectedTheme.builtin || draftActiveThemeId === 'system')
+	      return
+
+	    applyDraftThemeSelection (
+		draftActiveThemeId,
+		{
+		    ...draftCustomThemes,
+		    [draftActiveThemeId]: {
+			...draftCustomThemes[draftActiveThemeId],
+			tokens: {
+			    ...draftCustomThemes[draftActiveThemeId].tokens,
+			    tagColours: {
+				...defaultThemeTagColoursFor (selectedTheme.baseTheme) } } } })
+	  },
+	  onResetTagColour: category => {
+	    if (selectedTheme.builtin || draftActiveThemeId === 'system')
+	      return
+
+	    applyDraftThemeSelection (
+		draftActiveThemeId,
+		{ ...draftCustomThemes,
+		  [draftActiveThemeId]: {
+		      ...draftCustomThemes[draftActiveThemeId],
+		      tokens: {
+			  ...draftCustomThemes[draftActiveThemeId].tokens,
+			  tagColours: {
+			      ...draftCustomThemes[draftActiveThemeId].tokens.tagColours,
+			      [category]:
+				  defaultThemeTagColoursFor (
+				      selectedTheme.baseTheme)[category] } } } })
+	  },
+	  onThemeSubmit: handleThemeSubmit,
+	  settingsBaseErrors,
+	  settingsFieldErrors }
+      : null
+
   return (
       <MainArea>
 	<Helmet>
@@ -71,63 +664,111 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 	  <title>設定 | {SITE_TITLE}</title>
 	</Helmet>
 
-	<Form>
+	<div className="mx-auto max-w-xl space-y-4 p-4 md:hidden">
 	  <PageTitle>設定</PageTitle>
+	  <FieldError messages={settingsError ? [settingsError] : []}/>
+	  <div
+	      role="tablist"
+	      aria-label="設定区分"
+	      aria-orientation="horizontal"
+	      className="-mx-4 flex gap-2 overflow-x-auto px-4 pb-1">
+	    {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)}
+		    className={cn (
+			'shrink-0 rounded-full border px-3 py-2 text-sm font-medium',
+			(activeTab === tab.id
+			 ? ['border-slate-900 bg-slate-900 text-white',
+			    'dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900']
+			 : ['border-border bg-background text-foreground']))}
+		    onClick={() => setActiveTab (tab.id)}>
+		  {tab.label}
+		  {settingsTabErrors[tab.id] ? ' !' : ''}
+		</button>))}
+	  </div>
+	  {loading ? 'Loading...' : (
+	      <div
+		  id={tabPanelId (activeTab)}
+		  role="tabpanel"
+		  aria-labelledby={tabButtonId (activeTab)}>
+		{sectionProps && activeTab === 'account' && <AccountSection {...sectionProps}/>}
+		{sectionProps && activeTab === 'theme' && <ThemeSection {...sectionProps}/>}
+		{activeTab === 'keyboard' && (
+		    <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
+		{activeTab === 'behavior' && (
+		    <BehaviourSettingsSection sectionClassName={sectionClassName}/>)}
+	      </div>)}
+	</div>
 
-	  {user ? (
-	      <>
-		<FieldError messages={baseErrors}/>
+	<div className="hidden md:flex md:justify-center md:px-4">
+	  <div className="grid w-full max-w-[58rem] grid-cols-[12rem_minmax(0,1fr)] gap-6">
+	    <div
+		role="tablist"
+		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>
 
-		{/* 名前 */}
-		<FormField label="表示名" messages={fieldErrors.name}>
-		  {({ describedBy, invalid }) => (
-		      <>
-		  <input type="text"
-			 aria-describedby={describedBy}
-			 aria-invalid={invalid}
-			 className={inputClass (invalid)}
-			 value={name}
-			 placeholder="名もなきニジラー"
-			 onChange={ev => setName (ev.target.value)}/>
-		  {(user && !(user.name)) && (
-		      <p className="mt-1 text-sm text-red-500">
-			名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
-		      </p>)}
-		      </>)}
-		</FormField>
+	    <div className="w-full max-w-xl justify-self-center space-y-4">
+	      <PageTitle>設定</PageTitle>
+	      <FieldError messages={settingsError ? [settingsError] : []}/>
+	      {loading ? 'Loading...' : (
+		  <div
+		      id={tabPanelId (activeTab)}
+		      role="tabpanel"
+		      aria-labelledby={tabButtonId (activeTab)}>
+		    {sectionProps && (
+			<>
+			  {activeTab === 'account' && <AccountSection {...sectionProps}/>}
+			  {activeTab === 'theme' && <ThemeSection {...sectionProps}/>}
+			  {activeTab === 'keyboard' && (
+			      <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
+			  {activeTab === 'behavior' && (
+			      <BehaviourSettingsSection sectionClassName={sectionClassName}/>)}
+			</>)}
+		  </div>)}
+	    </div>
+	  </div>
+	</div>
 
-		{/* 送信 */}
-		<Button onClick={handleSubmit}
-			className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
-		  更新
-		</Button>
+	<UserCodeDialogue
+	    visible={userCodeVsbl}
+	    onVisibleChange={setUserCodeVsbl}
+	    user={user}
+	    setUser={setUser}/>
 
-		{/* 引継ぎ */}
-		<div>
-		  <Label>引継ぎ</Label>
-		  <Button onClick={() => setUserCodeVsbl (true)}
-			  className="px-4 py-2 bg-gray-600 text-white rounded disabled:bg-gray-400"
-			  disabled={!(user)}>
-		    引継ぎコードを表示
-		  </Button>
-		  <Button onClick={() => setInheritVsbl (true)}
-			  className="ml-2 px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400"
-			  disabled={!(user)}>
-		    ほかのブラウザから引継ぐ
-		  </Button>
-		</div>
-	      </>) : 'Loading...'}
-	</Form>
-
-	<UserCodeDialogue visible={userCodeVsbl}
-			  onVisibleChange={setUserCodeVsbl}
-			  user={user}
-			  setUser={setUser}/>
-
-	<InheritDialogue visible={inheritVsbl}
-			 onVisibleChange={setInheritVsbl}
-			 setUser={setUser}/>
+	<InheritDialogue
+	    visible={inheritVsbl}
+	    onVisibleChange={setInheritVsbl}
+	    setUser={setUser}/>
       </MainArea>)
 }
 
+
 export default SettingPage

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -24,6 +24,11 @@ import type { FC } from 'react'
 import type { User, WikiPage } from '@/types'
 
 const mdParser = new MarkdownIt
+const FIXED_WIKI_EDITOR_VIEW = { menu: true, md: true, html: true } as const
+
+// `wiki_editor_mode` is still kept in backend settings, but the common
+// settings screen does not expose it at present. Until that UI returns, the
+// editor stays on the fixed split view here.
 
 type Props = { user: User | null }
 
@@ -114,6 +119,7 @@ const WikiEditPage: FC<Props> = ({ user }) => {
 		  {() => (
 		      <MdEditor value={body}
 				style={{ height: '500px' }}
+				config={{ view: FIXED_WIKI_EDITOR_VIEW }}
 				renderHTML={text => mdParser.render (text)}
 				onChange={({ text }) => setBody (text)}/>)}
 		</FormField>

frontend/src/pages/wiki/WikiNewPage.tsx

@@ -22,6 +22,11 @@ import 'react-markdown-editor-lite/lib/index.css'
 import type { User, WikiPage } from '@/types'
 
 const mdParser = new MarkdownIt
+const FIXED_WIKI_EDITOR_VIEW = { menu: true, md: true, html: true } as const
+
+// `wiki_editor_mode` is still kept in backend settings, but the common
+// settings screen does not expose it at present. Until that UI returns, the
+// editor stays on the fixed split view here.
 
 type Props = { user: User | null }
 
@@ -92,6 +97,7 @@ const WikiNewPage: FC<Props> = ({ user }) => {
 	    {() => (
 		<MdEditor value={body}
 			  style={{ height: '500px' }}
+			  config={{ view: FIXED_WIKI_EDITOR_VIEW }}
 			  renderHTML={text => mdParser.render (text)}
 			  onChange={({ text }) => setBody (text)}/>)}
 	  </FormField>

frontend/src/test/factories.ts

@@ -1,6 +1,6 @@
 import type { Material,
 	      Post,
-	      Tag,
+	      TagWithSections,
 	      Theatre,
 	      TheatreComment,
 	      TheatreInfo,
@@ -9,7 +9,7 @@ import type { Material,
 	      User,
 	      WikiPage } from '@/types'
 
-export const buildTag = (overrides: Partial<Tag> = {}): Tag => ({
+export const buildTag = (overrides: Partial<TagWithSections> = {}): TagWithSections => ({
   id:             1,
   name:           'テストタグ',
   category:       'general',
@@ -23,6 +23,8 @@ export const buildTag = (overrides: Partial<Tag> = {}): Tag => ({
   materialId:     null,
   hasDeerjikists: false,
   matchedAlias:   null,
+  sections:       [],
+  children:       [],
   ...overrides,
 })
 
@@ -33,6 +35,7 @@ export const buildPost = (overrides: Partial<Post> = {}): Post => ({
   title:                 'テスト投稿',
   thumbnail:             'https://example.com/thumb.jpg',
   thumbnailBase:         null,
+  videoMs:               null,
   tags:                  [buildTag ()],
   parentPosts:           [],
   childPosts:            [],

frontend/src/types.ts

@@ -288,11 +288,12 @@ export type Post = {
     title:                  string | null
     thumbnail:              string | null
     thumbnailBase:          string | null
+    videoMs:                number | null
     postSimilarityEdges?:   {
 			      targetPostId: number
 			      cos:          number
 			  }[]
-    tags:                   Tag[]
+    tags:                   TagWithSections[]
     parentPosts?:           Post[]
     childPosts?:            Post[]
     siblingPosts?:          Record<`${ number }`, Post[]>
@@ -320,6 +321,7 @@ export type PostVersion = {
     url:                    { current: string; prev: string | null }
     thumbnail:              { current: string | null; prev: string | null }
     thumbnailBase:          { current: string | null; prev: string | null }
+    videoMs:                { current: number | null; prev: number | null }
     tags:                   { name: string
 			      type: 'context' | 'added' | 'removed' }[]
     parentPosts:            { id: number
@@ -369,6 +371,10 @@ export type TagVersion = {
     createdAt:              string
     createdByUser:          { id: number; name: string | null } | null }
 
+export type TagWithSections = Omit<Tag, 'children'> & { sections: { beginMs:  number
+								    endMs:    number | null }[]
+					              children: TagWithSections[] }
+
 export type Theatre = {
     id:             number
     name:           string | null

frontend/tailwind.config.js

@@ -8,6 +8,7 @@ import { DARK_COLOUR_SHADE,
 const colours = Object.values (TAG_COLOUR)
 
 export default {
+    darkMode: 'class',
     content: ['./src/**/*.{html,js,ts,jsx,tsx,mdx}'],
     safelist: [...colours.map (c => `text-${ c }-${ LIGHT_COLOUR_SHADE }`),
 	       ...colours.map (c => `hover:text-${ c }-${ LIGHT_COLOUR_SHADE - 200 }`),