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

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

AGENTS.md

@@ -106,10 +106,17 @@ 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 `)`.
 - Ruby: do not use `%w` or `%i`.
+- Ruby: TypeScript / TSX の associative syntax に近い感覚で読むこと。
+  Hash の `}` は block の `}` ではない。call の `)` も function 定義の
+  parameter-list `)` ではない。delimiter の役割を見誤らないこと。
 - In Ruby, when an `if` condition is split across multiple lines and combines
   clauses with `&&` or `||`, wrap the whole condition in parentheses.
 - Ruby hashes are not blocks; keep `}` on the same line as the final pair.
@@ -123,6 +130,152 @@ npm run preview
 - Keep the first element on the same line as `[` by default.
 - If an array would exceed the line limit, break after `[` and indent
   elements by 4 spaces.
+
+### Ruby delimiter and wrapping rules
+
+- Ruby でも、closing delimiter は glyph ではなく syntax role で判定する。
+  `}` が block close なのか hash close なのか、`)` が method call なのか
+  grouping なのかを区別してから配置すること。
+- Ruby の multi-line method call では、receiver / method と opening `(` を
+  同じ行に保ち、closing `)` を単独行へ落とさない。
+- Ruby の multi-line hash literal / keyword-like argument hash では、opening
+  `{` を最初の pair と同じ行に置き、closing `}` を最後の pair と同じ行に
+  置く。Prettier 的な縦開き・縦閉じをしない。
+- Ruby の `if` / `unless` / `case` 条件で、複数行に分けるだけで安易に
+  `if ... end` へ展開しない。局所の既存コードが modifier 形式ならそれに
+  そろえる。
+- Ruby の guard 条件は、1 行で収まるなら modifier 形式を優先する。2 行以上に
+  なるなら通常の block 形式へ切り替へてよい。
+- Ruby の method chain や call argument を折り返す際、call-site の `)`
+  直前で行を空けたり、closing delimiter を block のやうに独立させない。
+
+Bad:
+
+```rb
+source =
+  if params[:format] == 'google_sheets'
+    PostImportGoogleSheetsFetcher.fetch!(params[:source],
+                                         rate_key: current_user.id)
+  else
+    params[:source]
+  end
+parsed = PostImportSourceParser.new(
+  source:,
+  format:,
+  has_header: params[:has_header],
+  json_path: params[:json_path],
+).parse
+```
+
+Good:
+
+```rb
+source =
+    if params[:format] == 'google_sheets'
+      PostImportGoogleSheetsFetcher.fetch!(params[:source],
+                                           rate_key: current_user.id)
+    else
+      params[:source]
+    end
+parsed = PostImportSourceParser.new(
+    source:,
+    format:,
+    has_header: params[:has_header],
+    json_path: params[:json_path]).parse
+```
+
+Bad:
+
+```rb
+result[field] = {
+  'kind' => kind,
+  'value' => value['value'].to_s,
+  'columns' => Array(columns).map { Integer(_1) },
+}
+```
+
+Good:
+
+```rb
+result[field] = {
+    'kind' => kind,
+    'value' => value['value'].to_s,
+    'columns' => Array(columns).map { Integer(_1) } }
+```
+
+Bad:
+
+```rb
+unless rows.all? { |row|
+         values = Array(row['values'])
+         values.length <= columns.length &&
+           values.all? { |value|
+             value.is_a?(String) &&
+               value.bytesize <= PostImportSourceParser::MAX_CELL_BYTES
+           }
+       }
+  raise ArgumentError, '解析結果のセルが不正です．'
+end
+```
+
+Good:
+
+```rb
+raise ArgumentError, '解析結果のセルが不正です．' unless rows.all? { |row|
+  values = Array(row['values'])
+  values.length <= columns.length && values.all? { |value|
+    value.is_a?(String) && value.bytesize <= PostImportSourceParser::MAX_CELL_BYTES
+  }
+}
+```
+
+Bad:
+
+```rb
+if row['url'].to_s.bytesize > PostImportSourceParser::MAX_CELL_BYTES
+  raise ArgumentError, 'URL が長すぎます．'
+end
+```
+
+Good:
+
+```rb
+raise ArgumentError, 'URL が長すぎます．' if row['url'].to_s.bytesize > PostImportSourceParser::MAX_CELL_BYTES
+```
+
+Bad:
+
+```rb
+parameters = row.is_a?(ActionController::Parameters) ? row :
+  ActionController::Parameters.new(row)
+```
+
+Good:
+
+```rb
+parameters =
+    row.is_a?(ActionController::Parameters) ? row : ActionController::Parameters.new(row)
+```
+
+Bad:
+
+```rb
+PostTagSection.create!(
+  post_id: post.id,
+  tag_id:,
+  begin_ms:,
+  end_ms:,
+)
+```
+
+Good:
+
+```rb
+PostTagSection.create!(post_id: post.id,
+                       tag_id:,
+                       begin_ms:,
+                       end_ms:)
+```
 - TypeScript and Python: use GNU-style spacing before parentheses where
   syntactically valid.
 - Never write Ruby, TypeScript, or TSX lines longer than 99 characters.
@@ -200,7 +353,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 +364,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 +372,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.
+  wiki revisions, and restore/diff behaviour.
-- Be careful with tag names, tag normalization, implications, similarities, and discard behavior.
+- 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 +394,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,15 +408,52 @@ const value =
   `!==` over negating a comparison like `!(a === b)`.
 - In TypeScript and TSX, prefer `++i` or `--i` over `i += 1` or `i -= 1` for
   simple unit-step counter updates.
-- For user-facing Japanese text, prefer modern kana usage and natural current
+- For user-facing Japanese text, follow the 1986 Cabinet Notice
-  phrasing over historical spellings or awkward literal wording.
+  《現代仮名遣い》 and avoid historical kana spellings unless the task
+  explicitly requires them.
+- For user-facing Japanese kanji spelling, do not normalize to
+  《当用漢字による書きかえ》; prefer original forms such as `編輯`.
 - For user-facing Japanese ellipses, prefer `……` over ASCII `...`.
 
-### Frontend TSX style
+### Frontend TypeScript and TSX style
 
-- Preserve the local TSX formatting style.
+- The delimiter-placement and line-breaking rules in this section apply to
+  both plain TypeScript `.ts` and TSX `.tsx`, unless a bullet explicitly says
+  it is JSX- or React-specific.
+- Preserve the local TypeScript and TSX formatting style.
 - Do not normalize TSX to common Prettier-style React formatting unless
   explicitly asked.
+- Treat TypeScript and TSX formatting rules as hard constraints, not
+  preferences. Before finishing a TypeScript or TSX edit, inspect the edited
+  hunks for closing `)`, `]`, and `}` placement and fix violations instead of
+  relying on formatter defaults.
+- After every TypeScript or 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 TypeScript or TSX hunk violates these local
+  formatting rules.
+- The TypeScript/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-specific self-review must confirm there are no common Prettier-style
+  React component declarations with a multi-line destructured parameter.
+- The TypeScript/TSX self-review must confirm multi-line function declaration
+  parameter `)` placement follows the detailed parameter-list rules below.
+- The TypeScript/TSX self-review must confirm call-expression `)` is never at
+  the beginning of a line.
+- The TypeScript/TSX self-review must confirm
+  object/type/import/destructuring `}` is not at the beginning of a line.
+- The TypeScript/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 TypeScript/TSX self-review must confirm array `]` is not at the
+  beginning of a line.
+- The TSX-specific self-review must confirm JSX closing markers and closing
+  parentheses keep the surrounding compact style.
+- The TypeScript/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 +462,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
+  function declarations, classify the parameter list before placing the closing
-  put the closing parenthesis at the beginning of its own line before the return
+  `)`.
-  type or `=>`.
+- 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
+- For object literals, type literals, import/export named bindings, destructuring
-  the closing brace at the beginning of a line. Function, lambda, callback, and
+  patterns, and other associative-array-style braces, do not place the closing
-  block closing braces are exempt and should stay on their own line when that
+  brace at the beginning of a line. Keep `}` on the same line as the final
-  fits the local style.
+  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 +511,585 @@ 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`.
+- Do not insert `void` mechanically before ordinary event-handler or callback
+  calls merely because the callee returns a `Promise`. If the surrounding code
+  already uses a plain expression statement such as
+  `onClick={() => requestActiveTab ('theme')}`, preserve that style unless a
+  local rule or type requirement truly forces `void`. Adding unnecessary
+  `void` is a medium-severity style violation.
+- When fixing formatting, never change operator binding, evaluation order,
+  tuple/comma behaviour, or any other expression structure. A formatting pass
+  that changes how `!==`, `??`, `?:`, `&&`, `||`, or `,` binds is a capital
+  offence.
+- In TypeScript and TSX, do not mechanically verticalise short call tails,
+  short object literals, or short callback bodies that already fit the local
+  line-length and delimiter rules. Expanding compact local code without a
+  readability need is a minor style violation.
+- In TypeScript and TSX, treat short object literals, short returned objects,
+  short typed object shapes, and short function-call object arguments as
+  compact associative syntax by default. If they fit locally, keep the opening
+  `{` on the same line as the first property and keep the closing `}` on the
+  same line as the final property. Do not explode them into vertical
+  Prettier-style blocks without a concrete readability or line-length reason.
+- In TypeScript and TSX, when a compact associative form is broken across two
+  lines, keep the opening `{` with the first property and the closing `}` with
+  the final property. A shape like `{\n    key: value,\n}` is wrong even when
+  line length would permit it.
+- In TypeScript and TSX, when a short call such as `apiGet<...> (...)`,
+  `apiPatch<...> (...)`, `setState (...)`, `updateClientSettings (...)`, or
+  `window.dispatchEvent (...)` already fits within the local style, do not
+  add extra vertical layers around the object argument or callback body.
+- In TypeScript and TSX, after editing a file, inspect the file tail and
+  remove meaningless blank lines before `export default` or the end of file.
+  A stray empty line before `export default` is a minor style offence.
+- 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`.
+
+### Additional style offences and penalties
+
+Use this section for recurrent failure modes that are easy to miss when
+applying the delimiter rules mechanically.
+
+#### Unnecessary `void` before ordinary callbacks
+
+Bad:
+
+```ts
+onClick={() => void requestActiveTab ('theme')}
+```
+
+Good:
+
+```ts
+onClick={() => requestActiveTab ('theme')}
+```
+
+Penalty: medium-severity offence. The code still works, but it pollutes the
+local style and usually signals that the edit was made mechanically rather than
+by reading the surrounding code.
+
+#### Formatting that changes expression structure
+
+Bad:
+
+```ts
+const hasUnsavedChanges =
+    serialiseThemeDraft (draftThemeSlots)
+    !== (serialiseThemeDraft (savedThemeSlots),
+	 draftActiveThemeMode !== savedThemeMode)
+```
+
+Good:
+
+```ts
+const hasUnsavedChanges =
+    serialiseThemeDraft (draftThemeSlots)
+    !== serialiseThemeDraft (savedThemeSlots)
+    || draftThemeMode !== savedThemeMode
+```
+
+Penalty: capital offence. Formatting must never corrupt the meaning of an
+expression.
+
+#### Mechanical vertical expansion of compact local code
+
+Bad:
+
+```ts
+const nextState = {
+    open,
+    activeTab }
+
+setDirtyStates (
+    current => ({
+	current,
+	key:  value }),
+)
+```
+
+Good:
+
+```ts
+const nextState = { open, activeTab }
+
+setDirtyStates (
+    current => ({
+	current,
+	key:  value }))
+```
+
+Penalty: minor offence when semantics stay intact. It is not necessarily
+broken, but it ignores the repository's compact associative style.
+
+#### Prettier-style exploded object literals that should stay compact
+
+Bad:
+
+```ts
+const next = {
+    enabled: keyboard?.enabled !== false,
+    bindings: normaliseKeyboardBindings (keyboard?.bindings),
+}
+```
+
+Good:
+
+```ts
+const next = {
+    enabled: keyboard?.enabled !== false,
+    bindings: normaliseKeyboardBindings (keyboard?.bindings) }
+```
+
+Also good when short enough:
+
+```ts
+const next = { enabled: keyboard?.enabled !== false,
+	       bindings: normaliseKeyboardBindings (keyboard?.bindings) }
+```
+
+Rule: for compact associative syntax, keep `{` with the first property and `}`
+with the final property unless line length truly forces a different shape.
+Do not mechanically apply the common Prettier block form.
+Penalty: medium-severity offence. The code still runs, but it violates a core
+repository formatting habit that must be preserved consistently.
+
+#### Exploded object arguments inside short calls
+
+Bad:
+
+```ts
+updateClientSettings (settings => ({
+    ...settings,
+    keyboard: next,
+}))
+```
+
+Good:
+
+```ts
+updateClientSettings (settings => ({
+    ...settings,
+    keyboard: next }))
+```
+
+Rule: a call-expression closing `)` must not drift onto its own line, and a
+short object argument should not be exploded more than necessary. Keep the
+callback's returned object compact when it fits.
+Penalty: medium-severity offence. This usually means the edit was formatted
+mechanically instead of by reading the local style.
+
+#### Stray blank line before `export default`
+
+Bad:
+
+```ts
+const Component: FC = () => {
+  return <div/>
+}
+
+
+export default Component
+```
+
+Good:
+
+```ts
+const Component: FC = () => {
+  return <div/>
+}
+
+export default Component
+```
+
+Rule: do not leave an extra empty line between the last top-level declaration
+and `export default` unless some surrounding file structure genuinely requires
+visual separation.
+Penalty: minor offence. It is small, but it is easy to avoid and should not
+recur.
+
+### 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.
+Penalty: capital offence. This is one of the core associative-brace rules.
+
+#### 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.
+Penalty: capital offence. Mistaking a type-literal `}` for a block `}` is one
+of the recurring death-class errors.
+
+#### 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.
+Penalty: capital offence. Wrong object-literal `}` placement and wrong call
+`)` placement are both death-class violations here.
+
+#### 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.
+Penalty: capital offence. This pattern is a primary source of repeated TSX
+style regressions.
+
+#### 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.
+Penalty: capital offence. Misclassifying this case means the delimiter review
+has failed at the syntax-role level.
+
+#### 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.
+Penalty: capital offence. This is the main allowed exception for a leading `)`,
+so getting it wrong destroys the whole rule set.
+
+#### 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.
+Penalty: capital offence. Confusing block `}` with associative `}` is a
+death-class delimiter error.
+
+#### 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.
+Penalty: capital offence. A leading call `)` is one of the clearest death-class
+violations in this codebase.
+
+#### 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>)`.
+Penalty: medium-severity offence. It is usually not semantically broken, but it
+is a conspicuous TSX-style failure.
+
+#### 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.
+Penalty: capital offence. A leading `]` is forbidden by the same class of hard
+delimiter rule as leading associative `}` and leading call `)`.
+
+#### 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.
+Penalty: minor offence. This is not normally semantic breakage, but it still
+counts as a style miss.
+
+#### Final TypeScript/TSX self-review checklist
+
+Before reporting completion after a TypeScript or TSX edit, check the edited
+hunks line by line. Unless a step explicitly mentions JSX, it applies equally
+to `.ts` and `.tsx`:
+
+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 +1125,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 +1142,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/materials_controller.rb

@@ -89,15 +89,13 @@ class MaterialsController < ApplicationController
 
     begin
       Material.transaction do
-        tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
+        tag = resolve_material_tag!(tag_name_raw)
-        tag = tag_name.tag
-        tag = Tag.create!(tag_name:, category: :material) unless tag
-
         material = Material.new(tag:, url:,
                                 created_by_user: current_user,
                                 updated_by_user: current_user)
         material.file.attach(uploaded_blob) if uploaded_blob
         material.save!
+        TagVersioning.record_tag_snapshot!(tag, created_by_user: current_user)
         upsert_export_paths!(material)
         MaterialVersionRecorder.record!(material:, event_type: :create,
                                         created_by_user: current_user)
@@ -139,10 +137,7 @@ class MaterialsController < ApplicationController
     begin
       Material.transaction do
         MaterialVersionRecorder.ensure_snapshot!(material, created_by_user: current_user)
-        tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
+        tag = resolve_material_tag!(tag_name_raw)
-        tag = tag_name.tag
-        tag = Tag.create!(tag_name:, category: :material) unless tag
-
         material.assign_attributes(tag:, url:, updated_by_user: current_user)
         if uploaded_blob
           material.file.attach(uploaded_blob)
@@ -150,6 +145,7 @@ class MaterialsController < ApplicationController
           material.file.detach
         end
         material.save!
+        TagVersioning.record_tag_snapshot!(tag, created_by_user: current_user)
         upsert_export_paths!(material)
         MaterialVersionRecorder.record!(material:, event_type: :update,
                                         created_by_user: current_user)
@@ -240,6 +236,12 @@ class MaterialsController < ApplicationController
     nil
   end
 
+  def resolve_material_tag! tag_name_raw
+    tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
+    tag = tag_name.tag
+    tag || Tag.create!(tag_name:, category: :material)
+  end
+
   def material_index_needs_tag_name? filters
     filters[:q].present? || filters[:sort] == 'tag_name'
   end

backend/app/controllers/post_imports_controller.rb

@@ -0,0 +1,44 @@
+class PostImportsController < ApplicationController
+  before_action :require_member!
+
+  def preview
+    rows = PostImportPreviewer.new.preview_rows(
+        rows: PostImportUrlListParser.parse(params[:source]))
+    render json: { rows: }
+  rescue ArgumentError => e
+    render_bad_request(e.message)
+  end
+
+  def validate
+    rows = normalised_import_rows(allow_warning_fields: true)
+    changed_row = Integer(params[:changed_row], exception: false)
+    result =
+        PostImportPreviewer.new.preview_rows(rows:,
+                                             fetch_metadata: changed_row,
+                                             metadata_cache: { })
+    render json: { rows: result }
+  rescue ArgumentError => e
+    render_bad_request(e.message)
+  end
+
+  def create
+    result = PostImportRunner.new(actor: current_user,
+                                  rows: normalised_import_rows).run
+    render json: result, status: result[:created].positive? ? :created : :ok
+  rescue ArgumentError => e
+    render_bad_request(e.message)
+  end
+
+  private
+
+  def require_member!
+    return head :unauthorized unless current_user
+    return if current_user.gte_member?
+
+    head :forbidden
+  end
+
+  def normalised_import_rows allow_warning_fields: false
+    PostImportRowNormaliser.normalise!(params[:rows], allow_warning_fields:)
+  end
+end

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,41 +135,20 @@ 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
     return head :unauthorized unless current_user
     return head :forbidden unless current_user.gte_member?
 
-    # TODO: サイトに応じて thumbnail_base 設定
+    post = PostCreator.new(actor: current_user,
-    title = params[:title].presence
+                           attributes: { title: params[:title], url: params[:url],
-    url = params[:url]
+                                         thumbnail: params[:thumbnail], tags: params[:tags],
-    thumbnail = params[:thumbnail]
+                                         original_created_from: params[:original_created_from],
-    tag_names = params[:tags].to_s.split
+                                         original_created_before: params[:original_created_before],
-    original_created_from = params[:original_created_from]
+                                         parent_post_ids: parse_parent_post_ids,
-    original_created_before = params[:original_created_before]
+                                         video_ms: params[:video_ms], duration: params[:duration] }).create!
-    parent_post_ids = parse_parent_post_ids
-
-    post = Post.new(title:, url:, thumbnail_base: nil, uploaded_user: current_user,
-                    original_created_from:, original_created_before:)
-    post.thumbnail.attach(thumbnail) if thumbnail.present?
-
-    ApplicationRecord.transaction do
-      post.save!
-
-      tags = Tag.normalise_tags!(tag_names, deny_deprecated: true)
-      TagVersioning.record_tag_snapshots!(tags, created_by_user: current_user)
-
-      tags = Tag.expand_parent_tags(tags).reject(&:deprecated?)
-      sync_post_tags!(post, tags)
-
-      sync_parent_posts!(post, parent_post_ids)
-
-      post.resized_thumbnail!
-
-      PostVersionRecorder.record!(post:, event_type: :create, created_by_user: current_user)
-    end
 
     post.reload
     render json: PostRepr.base(post), status: :created
@@ -167,6 +156,12 @@ 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 PostCreator::VideoMsParseError
+    render_validation_error fields: { video_ms: ['動画時間の記法が不正です．'] }
+  rescue MiniMagick::Error
+    render_validation_error fields: { thumbnail: ['サムネイル画像の変換に失敗しました．'] }
   rescue ArgumentError => e
     render_validation_error fields: { parent_post_ids: [e.message] }
   rescue ActiveRecord::RecordInvalid => e
@@ -223,6 +218,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 =
@@ -253,12 +250,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
@@ -357,7 +358,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
@@ -376,13 +377,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
+  def build_tag_tree_for post
-    tags = tags.reject(&:deprecated?).to_a
+    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)
@@ -397,6 +406,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 = { }
 
@@ -404,8 +416,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)
@@ -417,7 +431,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, []) }
@@ -486,6 +500,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),
@@ -498,6 +513,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),
@@ -505,16 +521,41 @@ class PostsController < ApplicationController
   end
 
   def editable_tag_names_from_post post
-    post.tags.not_nico.where(deprecated_at: nil)
+    post
-        .joins(:tag_name).order('tag_names.name').pluck('tag_names.name')
+        .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
 
@@ -537,11 +578,8 @@ class PostsController < ApplicationController
     value.to_s
   end
 
-  def incoming_tag_names_for_snapshot raw_tag_names
+  def section_literal section
-    tags = Tag.normalise_tags!(raw_tag_names, with_tagme: false,
+    "[#{ Post.ms_to_time(section[0]) }-#{ section[1] ? Post.ms_to_time(section[1]) : '' }]"
-                                              deny_deprecated: true)
-
-    Tag.expand_parent_tags(tags).reject(&:deprecated?).map(&:name).uniq.sort
   end
 
   def post_conflict_json post:, base_version_no:, base_snapshot:,
@@ -562,6 +600,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, 'オリジナルの作成日時（より前）',
@@ -625,11 +665,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,
+    Tag.normalise_tags!(snapshot[:tag_names], with_tagme: false,
-                                                               deny_deprecated: true)
+                                               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
@@ -637,14 +680,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])]
@@ -688,4 +734,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/preview_controller.rb

@@ -1,50 +1,57 @@
 class PreviewController < ApplicationController
+  before_action :require_member!
+
   def title
-    # TODO: # 既知サイトなら決まったフォーマットで title 取得するやぅに．
+    return render_bad_request('URL は必須です．') if params[:url].blank?
-    return head :unauthorized unless current_user
 
-    url = params[:url]
+    render json: { title: Preview::ThumbnailFetcher.title(params[:url]) }
-    return render_bad_request('URL は必須です．') unless url.present?
+  rescue Preview::UrlSafety::UnsafeUrl => e
-
-    unless url.start_with?(/http(s)?:\/\//)
-      url = 'http://' + url
-    end
-
-    html = URI.open(url, open_timeout: 5, read_timeout: 5).read
-    doc = Nokogiri::HTML.parse(html)
-    title = doc.at('title')&.text&.strip
-
-    render json: { title: title }
-  rescue => e
     render_bad_request(e.message)
+  rescue Preview::HttpFetcher::FetchTimeout => e
+    render_preview_error(e.message, :gateway_timeout)
+  rescue Preview::HttpFetcher::ResponseTooLarge => e
+    render_preview_error(e.message, :payload_too_large)
+  rescue Preview::HttpFetcher::FetchFailed => e
+    render_preview_error(e.message, :bad_gateway)
   end
 
   def thumbnail
-    # TODO: 既知ドメインであれば指定のアドレスからサムネールを取得するやぅにする．
+    return render_bad_request('URL は必須です．') if params[:url].blank?
 
+    image = MiniMagick::Image.read(Preview::ThumbnailFetcher.fetch(params[:url]))
+    image.auto_orient
+    image.resize '180x180>'
+    image.format 'png'
+    width, height = image.dimensions
+    raise Preview::ThumbnailFetcher::GenerationFailed, 'サムネール画像の変換に失敗しました．' if width > 180 || height > 180
+
+    send_data image.to_blob, type: 'image/png', disposition: 'inline'
+  rescue Preview::UrlSafety::UnsafeUrl => e
+    render_bad_request(e.message)
+  rescue Preview::HttpFetcher::FetchTimeout => e
+    render_preview_error(e.message, :gateway_timeout)
+  rescue Preview::HttpFetcher::ResponseTooLarge => e
+    render_preview_error(e.message, :payload_too_large)
+  rescue Preview::HttpFetcher::FetchFailed => e
+    render_preview_error(e.message, :bad_gateway)
+  rescue Preview::ThumbnailFetcher::GenerationFailed, MiniMagick::Error => e
+    render_unprocessable_entity(e.message)
+  end
+
+  private
+
+  def require_member!
     return head :unauthorized unless current_user
+    return if current_user.gte_member?
 
-    url = params[:url]
+    head :forbidden
-    return render_bad_request('URL は必須です．') if url.blank?
+  end
 
-    unless url.start_with?(/http(s)?:\/\//)
+  def render_preview_error(message, status)
-      url = 'http://' + url
+    render json: { type: status.to_s,
-    end
+                   message:,
-
+                   errors: { },
-    path = Rails.root.join('tmp', "thumb_#{ SecureRandom.hex }.png")
+                   base_errors: [message] },
-    system("node #{ Rails.root }/lib/screenshot.js #{ Shellwords.escape(url) } #{ path }")
+           status:
-
-    if File.exist?(path)
-      image = MiniMagick::Image.open(path)
-      image.resize '180x180'
-      File.delete(path) rescue nil
-      send_file image.path, type: 'image/png', disposition: 'inline'
-    else
-      render json: { type: 'internal_server_error',
-                     message: 'サムネールを生成できませんでした．',
-                     errors: { },
-                     base_errors: ['サムネールを生成できませんでした．'] },
-             status: :internal_server_error
-    end
   end
 end

backend/app/controllers/tags_controller.rb

@@ -245,10 +245,7 @@ class TagsController < ApplicationController
     return render_unprocessable_entity('カテゴリは必須です．', field: :category) if category.blank?
     return render_unprocessable_entity '廃止状態は必須です．', field: :deprecated unless params.key?(:deprecated)
 
-    if (name != tag.name &&
+    return unless validate_tag_rename(tag, name)
-        tag.in?([Tag.tagme, Tag.bot, Tag.no_deerjikist, Tag.video, Tag.niconico]))
-      return render_unprocessable_entity 'システム・タグの名称は変更できません．', field: :name
-    end
 
     alias_names = params[:aliases].to_s.split.uniq
     parent_names = params[:parent_tags].to_s.split.uniq
@@ -274,7 +271,7 @@ class TagsController < ApplicationController
       else
         tag.update!(category:, deprecated_at: deprecated ? Time.current : nil)
       end
-      tag.tag_name.update!(name:)
+      rename_tag_name!(tag, name) if name_changed
 
       alias_names << old_name if name_changed
       alias_names.delete(name)
@@ -310,6 +307,8 @@ class TagsController < ApplicationController
       return render_unprocessable_entity 'ニコタグは廃止できません．', field: :deprecated
     end
 
+    return unless validate_tag_rename(tag, name)
+
     if tag.nico? || (category.present? && category == 'nico')
       return render_unprocessable_entity 'ニコタグは変更できません．', field: :category
     end
@@ -321,7 +320,7 @@ class TagsController < ApplicationController
       name_changed = name.present? && name != old_name
       wiki_page = tag.tag_name.wiki_page if name_changed
 
-      tag.tag_name.update!(name:) if name.present?
+      rename_tag_name!(tag, name) if name_changed
       tag.update!(category:) if category.present?
       if deprecated_given && tag.deprecated? != deprecated
         tag.update!(deprecated_at: deprecated ? Time.current : nil)
@@ -535,6 +534,67 @@ class TagsController < ApplicationController
         created_by_user:)
   end
 
+  def validate_tag_rename tag, name
+    return true if name.blank? || name == tag.name
+
+    if tag.in?([Tag.tagme, Tag.bot, Tag.no_deerjikist, Tag.video, Tag.niconico])
+      render_unprocessable_entity 'システム・タグの名称は変更できません．', field: :name
+      return false
+    end
+
+    target_tag_name = TagName.with_discarded.find_by(name:)
+    return true if target_tag_name.nil?
+    return true if target_tag_name.canonical_id?
+
+    render_unprocessable_entity 'その名前は既に使はれてゐます．', field: :name
+    false
+  end
+
+  def rename_tag_name! tag, name
+    return if name == tag.name
+
+    current_tag_name = tag.tag_name
+    target_tag_name = TagName.with_discarded.find_by(name:)
+
+    if target_tag_name.nil?
+      current_tag_name.update!(name:)
+      return
+    end
+
+    promote_tag_alias!(
+        tag,
+        current_tag_name:,
+        promoted_tag_name: target_tag_name)
+  end
+
+  def promote_tag_alias! tag, current_tag_name:, promoted_tag_name:
+    old_owner_tag = promoted_tag_name.canonical&.tag
+
+    if old_owner_tag && old_owner_tag != tag
+      TagVersioning.ensure_snapshot!(old_owner_tag, created_by_user: current_user)
+    end
+
+    promoted_tag_name.undiscard! if promoted_tag_name.discarded?
+    promoted_tag_name.update!(canonical: nil)
+
+    TagName.with_discarded
+           .where(canonical_id: current_tag_name.id)
+           .where.not(id: promoted_tag_name.id)
+           .find_each do |alias_tag_name|
+      alias_tag_name.update!(canonical: promoted_tag_name)
+    end
+
+    current_tag_name.wiki_page&.update!(tag_name: promoted_tag_name)
+    tag.update!(tag_name: promoted_tag_name)
+    current_tag_name.association(:wiki_page).reset
+    current_tag_name.association(:tag).reset
+    current_tag_name.reload.update!(canonical: promoted_tag_name)
+
+    return unless old_owner_tag && old_owner_tag != tag
+
+    record_tag_version!(old_owner_tag.reload, event_type: :update, created_by_user: current_user)
+  end
+
   def update_aliases! tag, alias_names
     alias_names = alias_names.uniq
 

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/controllers/user_theme_slots_controller.rb

@@ -0,0 +1,38 @@
+class UserThemeSlotsController < ApplicationController
+  wrap_parameters false
+
+  def index
+    return head :unauthorized unless current_user
+
+    render json: current_user
+                 .theme_slots
+                 .order(:base_theme, :slot_no)
+                 .map { |slot| slot.serializable_hash }
+  end
+
+  def update
+    return head :unauthorized unless current_user
+
+    base_theme = params[:base_theme].to_s
+    slot_no = params[:slot_no].to_i
+    tokens = params[:tokens]
+
+    unless UserThemeSlot::BASE_THEMES.include?(base_theme)
+      return render_validation_error fields: { base_theme: ['値が不正です．'] }
+    end
+    unless UserThemeSlot::SLOT_NOS.include?(slot_no)
+      return render_validation_error fields: { slot_no: ['値が不正です．'] }
+    end
+    unless tokens.is_a?(ActionController::Parameters) || tokens.is_a?(Hash)
+      return render_validation_error fields: { tokens: ['JSON object で指定してください．'] }
+    end
+
+    slot = UserThemeSlot.find_or_initialize_by(user: current_user,
+                                               base_theme:,
+                                               slot_no:)
+    slot.tokens = tokens.is_a?(ActionController::Parameters) ? tokens.to_unsafe_h : tokens
+    slot.save!
+
+    render json: slot.serializable_hash, status: :ok
+  end
+end

backend/app/models/post.rb

@@ -1,5 +1,19 @@
 class Post < ApplicationRecord
   require 'mini_magick'
+  require 'stringio'
+
+  def self.resized_thumbnail_attachment(upload)
+    upload.rewind
+    image = MiniMagick::Image.read(upload.read)
+    image.resize '180x180'
+    image.format 'jpg'
+
+    { io: StringIO.new(image.to_blob),
+      filename: 'resized_thumbnail.jpg',
+      content_type: 'image/jpeg' }
+  ensure
+    upload.rewind
+  end
 
   belongs_to :uploaded_user, class_name: 'User', optional: true
 
@@ -43,9 +57,10 @@ class Post < ApplicationRecord
 
   attribute :version_no, :integer, default: 1
 
-  before_validation :normalise_url
+  before_validation :normalise_url, if: :will_save_change_to_url?
 
-  validates :url, presence: true, uniqueness: true
+  validates :url, presence: true, uniqueness: true, length: { maximum: 768 }
+  validates :video_ms, numericality: { only_integer: true, greater_than: 0 }, allow_nil: true
 
   validate :validate_original_created_range
   validate :url_must_be_http_url
@@ -69,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)
 
@@ -87,12 +137,7 @@ class Post < ApplicationRecord
   def resized_thumbnail!
     return unless thumbnail.attached?
 
-    image = MiniMagick::Image.read(thumbnail.download)
+    thumbnail.attach(self.class.resized_thumbnail_attachment(StringIO.new(thumbnail.download)))
-    image.resize '180x180'
-    thumbnail.purge
-    thumbnail.attach(io:            File.open(image.path),
-                     filename:      'resized_thumbnail.jpg',
-                     content_type:  'image/jpeg')
   end
 
   private
@@ -128,14 +173,14 @@ class Post < ApplicationRecord
   def normalise_url
     return if url.blank?
 
-    self.url = url.strip
+    self.url = PostUrlNormaliser.normalise(url) || url.strip
 
     u = URI.parse(url)
     return unless u in URI::HTTP
 
     u.host = u.host.downcase if u.host
     u.path = u.path.sub(/\/\Z/, '') if u.path.present?
-    self.url = u.to_s
+    self.url = PostUrlSanitisationRule.sanitise(u.to_s)
   rescue URI::InvalidURIError
     ;
   end

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_url_sanitisation_rule.rb

@@ -0,0 +1,163 @@
+class PostUrlSanitisationRule < ApplicationRecord
+  include Discard::Model
+
+  class InvalidUrlError < StandardError
+    attr_reader :invalid_rows
+
+    def initialize(invalid_rows)
+      @invalid_rows = invalid_rows
+      ids = invalid_rows.map { _1.fetch(:post_id) }.join(', ')
+      super("post URL sanitisation produced invalid URLs for posts #{ ids }")
+    end
+  end
+
+  class UrlConflictError < StandardError
+    attr_reader :conflicts
+
+    def initialize(conflicts)
+      @conflicts = conflicts
+      urls = conflicts.map { _1.fetch(:url) }.uniq.join(', ')
+      super("post URL sanitisation conflicts detected for #{ urls }")
+    end
+  end
+
+  self.primary_key = :priority
+
+  default_scope -> { kept }
+
+  validates :source_pattern, presence: true, uniqueness: true
+
+  validate :source_pattern_must_be_regexp
+
+  class << self
+    def sanitise(url) = sanitise_with_rules(url, rules)
+
+    def apply!
+      rewrites = nil
+
+      Post.transaction do
+        compiled_rules = rules
+
+        rewrites = Post.order(:id)
+                       .lock('FOR UPDATE')
+                       .pluck(:id, :url)
+                       .map do |post_id, original_url|
+          { post_id:,
+            original_url:,
+            sanitised_url: sanitise_with_rules(original_url, compiled_rules) }
+        end
+
+        invalid_rows = rewrites.filter { invalid_sanitised_url?(_1.fetch(:sanitised_url)) }
+                               .map { { post_id: _1.fetch(:post_id),
+                                        original_url: _1.fetch(:original_url),
+                                        sanitised_url: _1.fetch(:sanitised_url) } }
+        raise InvalidUrlError.new(invalid_rows) if invalid_rows.present?
+
+        conflicts = build_conflicts(rewrites)
+        raise UrlConflictError.new(conflicts) if conflicts.present?
+
+        changed = rewrites.filter { _1.fetch(:original_url) != _1.fetch(:sanitised_url) }
+        return if changed.empty?
+
+        token = SecureRandom.hex(6)
+
+        changed.each do |row|
+          Post.where(id: row.fetch(:post_id))
+              .update_all(url: temporary_url_for(row.fetch(:post_id), token))
+        end
+
+        changed.each do |row|
+          Post.where(id: row.fetch(:post_id))
+              .update_all(url: row.fetch(:sanitised_url))
+        end
+      end
+    rescue ActiveRecord::RecordNotUnique => error
+      conflicts = build_persisted_conflicts(rewrites)
+      raise error if conflicts.empty?
+
+      raise UrlConflictError.new(conflicts), cause: error
+    end
+
+    private
+
+    def rules = kept.order(:priority).map { |r| [Regexp.new(r.source_pattern), r.replacement] }
+
+    def sanitise_with_rules(url, compiled_rules)
+      compiled_rules.reduce(url.dup) do |value, (pattern, replacement)|
+        value.sub(pattern, replacement)
+      end
+    end
+
+    def temporary_url_for(post_id, token) =
+        "https://post-url-sanitising.invalid/#{ token }/#{ post_id }"
+
+    def invalid_sanitised_url?(url)
+      return true if url.blank?
+      return true if url.length > 768
+
+      parsed = URI.parse(url)
+      return true if !(parsed in URI::HTTP)
+      return true if parsed.host.blank?
+
+      false
+    rescue URI::InvalidURIError
+      true
+    end
+
+    def build_conflicts(rewrites)
+      rewrites
+          .group_by { _1.fetch(:sanitised_url).downcase }
+          .values
+          .filter { _1.size > 1 }
+          .flatten
+          .map { { url: _1.fetch(:sanitised_url),
+                   post_id: _1.fetch(:post_id),
+                   original_url: _1.fetch(:original_url) } }
+    end
+
+    def build_persisted_conflicts(rewrites)
+      return [] if rewrites.blank?
+
+      target_rows = rewrites.filter { _1.fetch(:original_url) != _1.fetch(:sanitised_url) }
+      target_keys = target_rows.map { _1.fetch(:sanitised_url).downcase }.uniq
+      return [] if target_keys.empty?
+
+      target_pairs = target_rows.to_h do |row|
+        [row.fetch(:post_id), row.fetch(:sanitised_url).downcase]
+      end
+
+      persisted_rows = Post.order(:id)
+                           .where('LOWER(url) IN (?)', target_keys)
+                           .pluck(:id, :url)
+                           .reject { |post_id, original_url| target_pairs[post_id] == original_url.downcase }
+                           .map { |post_id, original_url|
+        { url: original_url,
+          post_id:,
+          original_url:,
+          conflict_key: original_url.downcase }
+      }
+
+      target_conflicts = target_rows.map { { url: _1.fetch(:sanitised_url),
+                                             post_id: _1.fetch(:post_id),
+                                             original_url: _1.fetch(:original_url),
+                                             conflict_key: _1.fetch(:sanitised_url).downcase } }
+
+      (persisted_rows + target_conflicts)
+          .group_by { _1.fetch(:conflict_key) }
+          .values
+          .filter { _1.size > 1 }
+          .flatten
+          .map { _1.except(:conflict_key) }
+    end
+  end
+
+  private
+
+  def source_pattern_must_be_regexp
+    return if source_pattern.blank?
+
+    Regexp.new(source_pattern)
+  rescue RegexpError
+    errors.add :source_pattern, '変な正規表現だね〜（笑）'
+  end
+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 :user_id, uniqueness: true
-  validates :value, presence: true
+
+  validates :theme, inclusion: { in: THEMES }
+  validates :auto_fetch_title, inclusion: { in: AUTO_FETCH_MODES }
+  validates :auto_fetch_thumbnail, inclusion: { in: AUTO_FETCH_MODES }
+  validates :wiki_editor_mode, inclusion: { in: WIKI_EDITOR_MODES }
+
+  def self.defaults
+    {
+      theme: 'system',
+      auto_fetch_title: 'manual',
+      auto_fetch_thumbnail: 'manual',
+      wiki_editor_mode: 'split',
+    }
+  end
+
+  def self.serializable_attributes
+    EDITABLE_ATTRIBUTES.map(&:to_sym)
+  end
+
+  def serializable_hash(options = nil)
+    super({ only: self.class.serializable_attributes }.merge(options || { }))
+  end
 end

backend/app/models/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/tag_implication.rb

@@ -6,6 +6,7 @@ class TagImplication < ApplicationRecord
   validates :parent_tag_id, presence: true
 
   validate :parent_tag_mustnt_be_itself
+  validate :parent_tag_mustnt_create_cycle
 
   private
 
@@ -14,4 +15,27 @@ class TagImplication < ApplicationRecord
       errors.add :parent_tag_id, '親タグは子タグと同一であってはなりません．'
     end
   end
+
+  def parent_tag_mustnt_create_cycle
+    return if tag_id.blank? || parent_tag_id.blank?
+    return if errors[:parent_tag_id].present?
+
+    seen = { }
+    stack = [parent_tag_id]
+
+    until stack.empty?
+      current_id = stack.pop
+      next if seen[current_id]
+
+      seen[current_id] = true
+
+      if current_id == tag_id
+        errors.add :parent_tag_id, '親タグに子孫タグを指定すると循環します．'
+        errors.add :base, 'タグの親子関係が循環します．'
+        return
+      end
+
+      stack.concat(TagImplication.where(tag_id: current_id).pluck(:parent_tag_id))
+    end
+  end
 end

backend/app/models/user.rb

@@ -7,7 +7,8 @@ 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 :theme_slots, class_name: 'UserThemeSlot', dependent: :destroy
   has_many :user_ips, dependent: :destroy
   has_many :ip_addresses, through: :user_ips
   has_many :user_post_views, dependent: :destroy

backend/app/models/user_theme_slot.rb

@@ -0,0 +1,27 @@
+class UserThemeSlot < ApplicationRecord
+  BASE_THEMES = ['light', 'dark'].freeze
+  SLOT_NOS = [1, 2, 3].freeze
+
+  belongs_to :user
+
+  validates :user_id, presence: true
+  validates :base_theme, presence: true, inclusion: { in: BASE_THEMES }
+  validates :slot_no, presence: true, inclusion: { in: SLOT_NOS }
+  validates :tokens, presence: true
+  validates :user_id, uniqueness: { scope: [:base_theme, :slot_no] }
+
+  validate :tokens_must_be_object
+
+  def serializable_hash(options = nil)
+    hash = { only: [:base_theme, :slot_no, :tokens, :created_at, :updated_at] }
+    super(hash.merge(options || {}))
+  end
+
+  private
+
+  def tokens_must_be_object
+    return if tokens.is_a?(Hash)
+
+    errors.add(:tokens, 'は JSON object で指定してください．')
+  end
+end

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
+  def tag_json post
-    tags.reject(&:deprecated?).map { |tag| TagRepr.inline(tag) }
+    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_creator.rb

@@ -0,0 +1,118 @@
+class PostCreator
+  class VideoMsParseError < ArgumentError; end
+
+  def initialize actor:, attributes:
+    @actor = actor
+    @attributes = attributes.symbolize_keys
+  end
+
+  def create!
+    post = Post.new(title: @attributes[:title].presence,
+                    url: @attributes[:url],
+                    thumbnail_base: @attributes[:thumbnail_base].presence,
+                    uploaded_user: @actor,
+                    original_created_from: @attributes[:original_created_from].presence,
+                    original_created_before: @attributes[:original_created_before].presence)
+    thumbnail = @attributes[:thumbnail]
+    post.thumbnail.attach(Post.resized_thumbnail_attachment(thumbnail)) if thumbnail.present?
+
+    ApplicationRecord.transaction do
+      post.save!
+      Tag.normalise_tags!(tag_names, deny_deprecated: true, with_sections: true) =>
+          { tags:, sections: }
+      TagVersioning.record_tag_snapshots!(tags, created_by_user: @actor)
+      tags = Tag.expand_parent_tags(tags).reject(&:deprecated?)
+      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)
+      PostVersionRecorder.record!(post:, event_type: :create, created_by_user: @actor)
+    end
+    post
+  end
+
+  private
+
+  def tag_names = @attributes[:tags].to_s.split
+
+  def parent_post_ids
+    Array(@attributes[:parent_post_ids]).flat_map { _1.to_s.split }.map { |token|
+      id = Integer(token, exception: false)
+      raise ArgumentError, "親投稿 Id. が不正です: #{ token }" if id.nil? || id <= 0
+
+      id
+    }.uniq
+  end
+
+  def normalise_video_ms tags
+    return nil unless tags.any? { _1.id == Tag.video.id }
+
+    video_ms = @attributes[:video_ms]
+    if video_ms.present?
+      value = Integer(video_ms, exception: false)
+      raise VideoMsParseError unless value&.positive?
+
+      return value
+    end
+    duration = @attributes[:duration]
+    return nil if duration.blank?
+
+    return duration.to_i if duration.is_a?(Numeric) && duration.to_i.positive?
+
+    value = Tag.time_to_ms!(duration.to_s, tag_name: '動画時間')
+    raise VideoMsParseError unless value.positive?
+
+    value
+  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|
+        next if begin_ms < video_ms && (!end_ms || end_ms <= video_ms)
+
+        post = Post.new
+        post.errors.add :video_ms, 'タグ区間が動画時間の範囲外です．'
+        raise ActiveRecord::RecordInvalid, post
+      end
+    end
+  end
+
+  def sync_post_tags! post, desired_tags, sections
+    desired_ids = desired_tags.map(&:id).to_set
+    current_ids = post.tags.pluck(:id).to_set
+    Tag.where(id: desired_ids - current_ids).find_each do |tag|
+      PostTag.create_or_find_by!(post:, tag:, created_user: @actor)
+    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: (current_ids - desired_ids).to_a).kept.find_each do |post_tag|
+      post_tag.discard_by!(@actor)
+    end
+  end
+
+  def sync_parent_posts! post, ids
+    if ids.include?(post.id)
+      post.errors.add :parent_post_ids, '自分自身を親投稿にはできません．'
+      raise ActiveRecord::RecordInvalid, post
+    end
+    missing = ids - Post.where(id: ids).pluck(:id)
+    if missing.present?
+      post.errors.add :parent_post_ids, "存在しない親投稿 Id. があります: #{ missing.join(' ') }"
+      raise ActiveRecord::RecordInvalid, post
+    end
+    ids.each { |parent_post_id| PostImplication.create_or_find_by!(post:, parent_post_id:) }
+  end
+end

backend/app/services/post_import_previewer.rb

@@ -0,0 +1,265 @@
+class PostImportPreviewer
+  FIELDS = [
+    'title',
+    'thumbnail_base',
+    'original_created_from',
+    'original_created_before',
+    'duration',
+    'tags',
+    'parent_post_ids',
+  ].freeze
+  FETCH_WARNING_FIELDS = ['url', 'title', 'thumbnail_base'].freeze
+  EXISTING_SKIP_WARNING = '既存投稿のためスキップします．'.freeze
+  TITLE_FETCH_WARNING = 'タイトルを取得できませんでした．'.freeze
+  THUMBNAIL_FETCH_WARNING = 'サムネールを取得できませんでした．'.freeze
+  METADATA_FETCH_WARNING = 'メタデータを取得できませんでした．'.freeze
+
+  def preview_rows rows:, fetch_metadata: true, metadata_cache: { }
+    urls = {}
+    rows.map { |row|
+      preview_row(row, urls:, fetch_metadata:, metadata_cache:)
+    }
+  end
+
+  def normalised_url value
+    PostUrlNormaliser.normalise(value)
+  end
+
+  private
+
+  def preview_row row, urls:, fetch_metadata:, metadata_cache:
+    row = row.symbolize_keys
+    attributes = initial_attributes(row)
+    provenance = initial_provenance(row)
+    tag_sources = initial_tag_sources(row, attributes, provenance)
+    field_warnings = initial_field_warnings(row)
+    base_warnings = initial_base_warnings(row)
+    url = row[:url].to_s.strip
+    provenance['url'] = 'manual'
+    normal_url = normalised_url(url)
+    url_for_metadata = normal_url || url
+    existing_post = normal_url.present? && Post.exists?(url: normal_url)
+
+    validation_errors = {}
+    validation_errors[:url] = ['URL が不正です．'] if normal_url.blank?
+    validation_errors[:url] = ['URL が重複しています．'] if normal_url.present? && urls.key?(normal_url)
+    urls[normal_url] = true if normal_url.present?
+
+    if row[:metadata_url].present? && row[:metadata_url] != url_for_metadata
+      clear_automatic_values!(attributes, provenance, tag_sources)
+      clear_fetch_warnings!(field_warnings)
+    end
+
+    if normal_url.present? && existing_post
+      add_field_warning!(field_warnings, 'url', EXISTING_SKIP_WARNING)
+      attributes['tags'] = merged_tags(tag_sources, provenance['tags'])
+      warnings_present = field_warnings.values.any?(&:present?) || base_warnings.present?
+      return {
+        source_row: row[:source_row],
+        url: normal_url,
+        attributes:,
+        provenance:,
+        tag_sources:,
+        metadata_url: url_for_metadata,
+        field_warnings:,
+        base_warnings:,
+        validation_errors:,
+        status: validation_errors.present? ? 'error' : (warnings_present ? 'warning' : 'ready'),
+      }
+    end
+
+    should_fetch = should_fetch_metadata?(fetch_metadata, row[:source_row].to_i)
+    if should_fetch
+      clear_fetch_warnings!(field_warnings)
+      metadata = metadata_for(url_for_metadata, metadata_cache)
+      apply_metadata!(attributes, provenance, tag_sources, metadata[:data])
+      apply_fetch_warnings!(field_warnings, metadata[:warnings])
+    end
+
+    attributes['url'] = url
+    validate_basic_data(attributes, validation_errors)
+    validate_preview_tags(merged_tags(tag_sources, provenance['tags']),
+                          validation_errors,
+                          field_warnings)
+    validate_parents(attributes['parent_post_ids'], validation_errors)
+    attributes.delete('url')
+    attributes['tags'] = merged_tags(tag_sources, provenance['tags'])
+
+    warnings_present = field_warnings.values.any?(&:present?) || base_warnings.present?
+    {
+      source_row: row[:source_row],
+      url: normal_url || url,
+      attributes:,
+      provenance:,
+      tag_sources:,
+      metadata_url: url_for_metadata,
+      field_warnings:,
+      base_warnings:,
+      validation_errors:,
+      status: validation_errors.present? ? 'error' : (warnings_present ? 'warning' : 'ready'),
+    }
+  end
+
+  def should_fetch_metadata? fetch_metadata, source_row
+    case fetch_metadata
+    when true then true
+    when Integer then fetch_metadata == source_row
+    when false, nil then false
+    else raise ArgumentError, 'メタデータ取得対象が不正です．'
+    end
+  end
+
+  def initial_attributes row
+    attributes = row[:attributes]&.stringify_keys || { }
+    FIELDS.to_h { |field| [field, attributes[field].to_s] }
+  end
+
+  def initial_provenance row
+    provenance = row[:provenance]&.stringify_keys || { }
+    FIELDS.to_h { |field| [field, provenance[field].presence || 'automatic'] }
+      .merge('url' => 'manual')
+  end
+
+  def initial_tag_sources row, attributes, provenance
+    sources = row[:tag_sources]&.stringify_keys || { 'automatic' => '', 'manual' => '' }
+    sources['automatic'] = sources['automatic'].to_s
+    sources['manual'] =
+      provenance['tags'] == 'manual' ? attributes['tags'].to_s : sources['manual'].to_s
+    sources
+  end
+
+  def initial_field_warnings row
+    (row[:field_warnings] || { }).stringify_keys.transform_values { |value| Array(value).map(&:to_s) }
+  end
+
+  def initial_base_warnings row
+    Array(row[:base_warnings]).map(&:to_s)
+  end
+
+  def clear_automatic_values! attributes, provenance, tag_sources
+    ['title', 'thumbnail_base', 'original_created_from',
+     'original_created_before', 'duration'].each do |field|
+      attributes[field] = '' if provenance[field] == 'automatic'
+    end
+    tag_sources['automatic'] = ''
+    attributes['tags'] = merged_tags(tag_sources, provenance['tags'])
+  end
+
+  def clear_fetch_warnings! field_warnings
+    FETCH_WARNING_FIELDS.each do |field|
+      field_warnings.delete(field)
+    end
+  end
+
+  def metadata_for url, cache
+    cache[url] ||= fetch_metadata(url)
+  end
+
+  def fetch_metadata url
+    return { data: { }, warnings: { 'url' => ['URL が空です．'] } } if url.blank?
+
+    data = PostMetadataFetcher.fetch(url).stringify_keys.compact
+    warnings = { }
+    add_field_warning!(warnings, 'title', TITLE_FETCH_WARNING) if data['title'].blank?
+    add_field_warning!(warnings, 'thumbnail_base', THUMBNAIL_FETCH_WARNING) if data['thumbnail_base'].blank?
+    { data:, warnings: }
+  rescue Preview::UrlSafety::UnsafeUrl,
+         Preview::HttpFetcher::FetchFailed,
+         Preview::HttpFetcher::ResponseTooLarge => e
+    Rails.logger.info(
+      "post_import_metadata_fetch_failure "\
+      "#{ { error: e.class.name, message: e.message }.to_json }",
+    )
+    { data: { }, warnings: { 'url' => [METADATA_FETCH_WARNING] } }
+  end
+
+  def apply_metadata! attributes, provenance, tag_sources, metadata
+    metadata.each do |field, value|
+      if field == 'tags'
+        next if provenance['tags'] == 'manual'
+
+        tag_sources['automatic'] = value.to_s
+        attributes['tags'] = merged_tags(tag_sources)
+        next
+      end
+      next unless provenance[field] == 'automatic'
+
+      attributes[field] = value
+      provenance[field] = 'automatic'
+    end
+  end
+
+  def apply_fetch_warnings! field_warnings, warnings
+    warnings.each do |field, values|
+      values.each do |value|
+        add_field_warning!(field_warnings, field, value)
+      end
+    end
+  end
+
+  def add_field_warning! field_warnings, field, message
+    field_warnings[field] ||= []
+    field_warnings[field] << message unless field_warnings[field].include?(message)
+  end
+
+  def merged_tags sources, origin = nil
+    return sources['manual'].to_s if origin == 'manual'
+
+    sources['automatic'].to_s
+  end
+
+  def validate_preview_tags raw, errors, field_warnings
+    names = raw.to_s.split
+    return if names.empty?
+    if names.any? { _1.downcase.start_with?('nico:') }
+      errors[:tags] = ['ニコニコ・タグは直接指定できません．']
+      return
+    end
+
+    parsed = names.map { |name| TagName.canonicalise(name.sub(/\[.*\]\z/, '')).first }
+    existing = Tag.joins(:tag_name).where(tag_names: { name: parsed }).includes(:tag_name).to_a
+    deprecated = existing.select(&:deprecated?).map(&:name)
+    errors[:tags] = ["廃止済みタグがあります: #{ deprecated.join(' ') }"] if deprecated.present?
+    known = existing.reject(&:deprecated?).map(&:name)
+    new_tags = parsed.uniq - known
+    if new_tags.present?
+      add_field_warning!(field_warnings, 'tags', "新規タグを作成します: #{ new_tags.join(' ') }")
+    end
+  rescue Tag::SectionLiteralParseError
+    errors[:tags] = ['タグ区間の記法が不正です．']
+  end
+
+  def validate_basic_data attributes, errors
+    post = Post.new(title: attributes['title'].presence,
+                    url: attributes['url'],
+                    thumbnail_base: attributes['thumbnail_base'].presence,
+                    original_created_from: attributes['original_created_from'].presence,
+                    original_created_before: attributes['original_created_before'].presence,
+                    video_ms: parse_duration(attributes['duration'], errors))
+    post.valid?
+    post.errors.each do |error|
+      next if error.attribute == :url && error.type == :taken
+
+      (errors[error.attribute] ||= []) << error.message
+    end
+  end
+
+  def parse_duration value, errors
+    return nil if value.blank?
+
+    value.is_a?(Numeric) ? value.to_i : Tag.time_to_ms!(value.to_s, tag_name: '動画時間')
+  rescue Tag::SectionLiteralParseError
+    errors[:video_ms] = ['動画時間の記法が不正です．']
+    nil
+  end
+
+  def validate_parents raw, errors
+    ids = raw.to_s.split.map { Integer(_1, exception: false) }
+    return if ids.compact.empty? && raw.to_s.blank?
+
+    errors[:parent_post_ids] = ['親投稿 Id. が不正です．'] and return if ids.any? { _1.nil? || _1 <= 0 }
+    if Post.where(id: ids).count != ids.uniq.length
+      errors[:parent_post_ids] = ['存在しない親投稿 Id. があります．']
+    end
+  end
+end

backend/app/services/post_import_row_normaliser.rb

@@ -0,0 +1,172 @@
+class PostImportRowNormaliser
+  ORIGINS = ['automatic', 'manual'].freeze
+  STRING_FIELDS = [
+    'title',
+    'thumbnail_base',
+    'original_created_from',
+    'original_created_before',
+    'tags',
+    'parent_post_ids',
+  ].freeze
+  FLEXIBLE_FIELDS = ['duration', 'video_ms'].freeze
+  ATTRIBUTE_FIELDS = (STRING_FIELDS + FLEXIBLE_FIELDS).freeze
+
+  def self.normalise! rows, allow_warning_fields: false
+    raise ArgumentError, '取込行の形式が不正です．' unless rows.is_a?(Array)
+    raise ArgumentError, '取込件数が多すぎます．' if rows.length > PostImportUrlListParser::MAX_ROWS
+
+    normalised_rows = rows.map { normalise_row!(_1, allow_warning_fields:) }
+    source_rows = normalised_rows.map { _1['source_row'] }
+    raise ArgumentError, '元行番号が重複しています．' if source_rows.uniq.length != source_rows.length
+    if normalised_rows.sum { row_bytesize(_1) } > PostImportUrlListParser::MAX_BYTES
+      raise ArgumentError, '取込データが大きすぎます．'
+    end
+
+    normalised_rows
+  end
+
+  def self.normalise_row! row, allow_warning_fields:
+    unless row.is_a?(Hash) || row.is_a?(ActionController::Parameters)
+      raise ArgumentError, '取込行の形式が不正です．'
+    end
+
+    parameters =
+        row.is_a?(ActionController::Parameters) ? row : ActionController::Parameters.new(row)
+    permitted = parameters.permit(*permitted_keys(allow_warning_fields))
+    normalised = permitted.to_h.deep_transform_keys { _1.to_s.underscore }
+
+    normalised['source_row'] = normalise_source_row!(normalised['source_row'])
+    normalise_url!(normalised['url'])
+    normalise_metadata_url!(normalised['metadata_url'])
+    normalise_attributes!(normalised.fetch('attributes', { }))
+    normalise_provenance!(normalised.fetch('provenance', { }))
+    normalise_tag_sources!(normalised['tag_sources'])
+    normalise_warning_values!(normalised, allow_warning_fields:)
+    if row_bytesize(normalised) > PostImportUrlListParser::MAX_BYTES
+      raise ArgumentError, '取込行が大きすぎます．'
+    end
+
+    normalised
+  end
+
+  def self.permitted_keys allow_warning_fields
+    keys = [
+      :source_row,
+      :sourceRow,
+      :url,
+      :metadata_url,
+      :metadataUrl,
+      { attributes: {} },
+      { provenance: {} },
+      { tag_sources: {} },
+      { tagSources: {} },
+    ]
+    return keys unless allow_warning_fields
+
+    keys + [
+      { field_warnings: {} },
+      { fieldWarnings: {} },
+      { base_warnings: [] },
+      { baseWarnings: [] },
+    ]
+  end
+  private_class_method :permitted_keys
+
+  def self.normalise_source_row! value
+    source_row = Integer(value, exception: false)
+    raise ArgumentError, '元行番号が不正です．' if source_row.nil? || source_row <= 0
+
+    source_row
+  end
+  private_class_method :normalise_source_row!
+
+  def self.normalise_url! value
+    raise ArgumentError, 'URL の形式が不正です．' unless value.is_a?(String)
+    raise ArgumentError, 'URL が長すぎます．' if value.bytesize > PostImportUrlListParser::MAX_URL_BYTES
+  end
+  private_class_method :normalise_url!
+
+  def self.normalise_metadata_url! value
+    raise ArgumentError, 'metadata_url の形式が不正です．' unless value.nil? || value.is_a?(String)
+    if value.to_s.bytesize > PostImportUrlListParser::MAX_URL_BYTES
+      raise ArgumentError, 'metadata_url が長すぎます．'
+    end
+  end
+  private_class_method :normalise_metadata_url!
+
+  def self.normalise_attributes! attributes
+    raise ArgumentError, 'attributes の形式が不正です．' unless attributes.is_a?(Hash)
+    raise ArgumentError, '取込項目が不正です．' unless (attributes.keys - ATTRIBUTE_FIELDS).empty?
+
+    attributes.each do |key, value|
+      case key
+      when *STRING_FIELDS
+        raise ArgumentError, '取込項目の型が不正です．' unless value.nil? || value.is_a?(String)
+      when *FLEXIBLE_FIELDS
+        unless value.nil? || value.is_a?(String) || value.is_a?(Numeric)
+          raise ArgumentError, '取込項目の型が不正です．'
+        end
+      end
+      if value.to_s.bytesize > PostImportUrlListParser::MAX_URL_BYTES
+        raise ArgumentError, '取込項目が大きすぎます．'
+      end
+    end
+  end
+  private_class_method :normalise_attributes!
+
+  def self.normalise_provenance! provenance
+    raise ArgumentError, 'provenance の形式が不正です．' unless provenance.is_a?(Hash)
+
+    allowed = ATTRIBUTE_FIELDS + ['url']
+    raise ArgumentError, '値の由来が不正です．' unless (provenance.keys - allowed).empty?
+    raise ArgumentError, '値の由来が不正です．' unless provenance.values.all? { ORIGINS.include?(_1) }
+  end
+  private_class_method :normalise_provenance!
+
+  def self.normalise_tag_sources! tag_sources
+    return if tag_sources.nil?
+
+    raise ArgumentError, 'タグ由来の形式が不正です．' unless tag_sources.is_a?(Hash)
+    raise ArgumentError, 'タグ由来の形式が不正です．' unless (tag_sources.keys - ORIGINS).empty?
+    raise ArgumentError, 'タグ由来の形式が不正です．' unless tag_sources.values.all? { _1.is_a?(String) }
+    if tag_sources.values.any? { _1.bytesize > PostImportUrlListParser::MAX_URL_BYTES }
+      raise ArgumentError, 'タグ由来が大きすぎます．'
+    end
+    if tag_sources.values.sum(&:bytesize) > PostImportUrlListParser::MAX_URL_BYTES
+      raise ArgumentError, 'タグ由来が大きすぎます．'
+    end
+  end
+  private_class_method :normalise_tag_sources!
+
+  def self.normalise_warning_values! normalised, allow_warning_fields:
+    return unless allow_warning_fields
+
+    field_warnings = normalised['field_warnings']
+    unless field_warnings.nil? || field_warnings.is_a?(Hash)
+      raise ArgumentError, '警告の形式が不正です．'
+    end
+    field_warnings&.each do |key, values|
+      raise ArgumentError, '警告の形式が不正です．' unless ATTRIBUTE_FIELDS.include?(key) || key == 'url'
+      unless values.is_a?(Array) && values.all? { _1.is_a?(String) }
+        raise ArgumentError, '警告の形式が不正です．'
+      end
+      if values.any? { _1.bytesize > PostImportUrlListParser::MAX_URL_BYTES }
+        raise ArgumentError, '警告が大きすぎます．'
+      end
+    end
+
+    base_warnings = normalised['base_warnings']
+    return if base_warnings.nil?
+
+    unless base_warnings.is_a?(Array) && base_warnings.all? { _1.is_a?(String) }
+      raise ArgumentError, '警告の形式が不正です．'
+    end
+    raise ArgumentError, '警告が大きすぎます．' if base_warnings.any? { _1.bytesize > PostImportUrlListParser::MAX_URL_BYTES }
+  end
+  private_class_method :normalise_warning_values!
+
+  def self.row_bytesize row
+    row.to_json.bytesize
+  end
+  private_class_method :row_bytesize
+end

backend/app/services/post_import_runner.rb

@@ -0,0 +1,62 @@
+class PostImportRunner
+  def initialize actor:, rows:
+    @actor = actor
+    @rows = rows
+  end
+
+  def run
+    normalised_rows = PostImportRowNormaliser.normalise!(@rows)
+
+    results = normalised_rows.map { |row| run_row(row) }
+    {
+      created: results.count { _1[:status] == 'created' },
+      skipped: results.count { _1[:status] == 'skipped' },
+      failed: results.count { _1[:status] == 'failed' },
+      rows: results,
+    }
+  end
+
+  private
+
+  def run_row row
+    attributes = row.fetch('attributes', { }).transform_keys { _1.to_s.underscore }
+    preview = PostImportPreviewer.new.preview_rows(
+        rows: [{
+          source_row: row['source_row'],
+          url: row['url'],
+          attributes:,
+          provenance: row['provenance'],
+          tag_sources: row['tag_sources'],
+        }],
+        fetch_metadata: false).first
+    if Array(preview.dig(:field_warnings, 'url')).include?(PostImportPreviewer::EXISTING_SKIP_WARNING)
+      return row.slice('source_row').merge(status: 'skipped')
+    end
+
+    if preview[:validation_errors].present?
+      return {
+        source_row: row['source_row'],
+        status: 'failed',
+        errors: preview[:validation_errors],
+      }
+    end
+
+    attributes['tags'] = preview[:attributes]['tags']
+    attributes['url'] = row['url']
+    post = PostCreator.new(actor: @actor, attributes:).create!
+    { source_row: row['source_row'], status: 'created', post: PostRepr.base(post) }
+  rescue ActiveRecord::RecordInvalid => e
+    { source_row: row['source_row'], status: 'failed', errors: e.record.errors.to_hash }
+  rescue Tag::NicoTagNormalisationError
+    { source_row: row['source_row'], status: 'failed', errors: { tags: ['ニコニコ・タグは直接指定できません．'] } }
+  rescue Tag::DeprecatedTagNormalisationError
+    { source_row: row['source_row'], status: 'failed', errors: { tags: ['廃止済みタグは付与できません．'] } }
+  rescue ArgumentError, PostCreator::VideoMsParseError
+    { source_row: row['source_row'], status: 'failed', errors: { base: ['入力値が不正です．'] } }
+  rescue StandardError => e
+    Rails.logger.error(
+      "post_import_runner_failure #{ { error: e.class.name, message: e.message }.to_json }",
+    )
+    { source_row: row['source_row'], status: 'failed', errors: { base: ['登録中にエラーが発生しました．'] } }
+  end
+end

backend/app/services/post_import_url_list_parser.rb

@@ -0,0 +1,23 @@
+class PostImportUrlListParser
+  MAX_ROWS = 100
+  MAX_BYTES = 1.megabyte
+  MAX_URL_BYTES = 20.kilobytes
+
+  def self.parse source
+    raw = source.to_s
+    raise ArgumentError, '入力が大きすぎます．' if raw.bytesize > MAX_BYTES
+
+    rows = raw.split(/\r\n|\n|\r/).each_with_index.filter_map { |line, index|
+      url = line.strip
+      next if url.blank?
+
+      raise ArgumentError, "#{ index + 1 } 行目: URL が長すぎます．" if url.bytesize > MAX_URL_BYTES
+
+      { source_row: index + 1, url: }
+    }
+    raise ArgumentError, 'URL を入力してください．' if rows.empty?
+    raise ArgumentError, "取込件数は #{ MAX_ROWS } 件までです．" if rows.length > MAX_ROWS
+
+    rows
+  end
+end

backend/app/services/post_metadata_fetcher.rb

@@ -0,0 +1,60 @@
+class PostMetadataFetcher
+  def self.fetch raw_url
+    uri, = Preview::UrlSafety.validate(raw_url)
+    response = Preview::HttpFetcher.fetch(
+      uri.to_s,
+      max_bytes: Preview::ThumbnailFetcher::HTML_MAX_BYTES,
+    )
+    metadata = Preview::HtmlMetadataExtractor.extract(response)
+    document = Nokogiri::HTML.parse(response.body)
+    content = lambda { |name|
+      document
+        .at_css("meta[property='#{ name }'], meta[name='#{ name }']")
+        &.[]('content')
+        &.strip
+        &.presence
+    }
+    duration = content.call('og:video:duration') || content.call('video:duration')
+    published = content.call('article:published_time') || content.call('date')
+    created_range = original_created_range(published)
+    platform_tags = platform_tags(uri)
+    { title: metadata[:title],
+      thumbnail_base: Preview::KnownSiteExtractor.thumbnail_url(uri) || metadata[:image_url],
+      original_created_from: created_range&.first&.iso8601,
+      original_created_before: created_range&.last&.iso8601,
+      duration: duration&.to_f&.then { _1.positive? ? (_1 * 1_000).round : nil },
+      tags: platform_tags.join(' ') }
+  end
+
+  def self.platform_tags uri
+    return ['動画', 'YouTube'] if Preview::KnownSiteExtractor.youtube_video_id(uri)
+    return ['動画', 'ニコニコ'] if Preview::KnownSiteExtractor.niconico_video_id(uri)
+
+    []
+  end
+
+  def self.original_created_range value
+    return nil if value.blank?
+
+    raw = value.to_s.strip
+    from = Time.zone.parse(raw)
+    zone = '(?:Z|[+-]\d{2}:?\d{2})?'
+    before =
+      case raw
+      when /\A\d{4}\z/ then from + 1.year
+      when /\A\d{4}-\d{2}\z/ then from + 1.month
+      when /\A\d{4}-\d{2}-\d{2}\z/ then from + 1.day
+      when /\A\d{4}-\d{2}-\d{2}T\d{2}#{ zone }\z/ then from + 1.hour
+      when /\A\d{4}-\d{2}-\d{2}T\d{2}:\d{2}#{ zone }\z/ then from + 1.minute
+      when /\A\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}#{ zone }\z/ then from + 1.second
+      when /\A\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.(\d+)#{ zone }\z/
+        from + (10**(-Regexp.last_match(1).length))
+      else
+        return nil
+      end
+    [from, before]
+  rescue ArgumentError, TypeError
+    nil
+  end
+  private_class_method :platform_tags, :original_created_range
+end

backend/app/services/post_url_normaliser.rb

@@ -0,0 +1,13 @@
+class PostUrlNormaliser
+  def self.normalise raw_url
+    value = raw_url.to_s.strip
+    uri = URI.parse(value)
+    return nil unless uri.is_a?(URI::HTTP) && uri.host.present?
+
+    uri.host = uri.host.downcase
+    uri.path = uri.path.sub(/\/\z/, '') if uri.path.present?
+    uri.to_s
+  rescue URI::InvalidURIError
+    nil
+  end
+end

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/app/services/preview/html_metadata_extractor.rb

@@ -0,0 +1,21 @@
+module Preview
+  class HtmlMetadataExtractor
+    IMAGE_SELECTORS = [
+      'meta[property="og:image"]',
+      'meta[name="twitter:image"]',
+      'meta[name="thumbnail"]'
+    ].freeze
+
+    def self.extract(response)
+      document = Nokogiri::HTML.parse(response.body)
+      image_url = IMAGE_SELECTORS.filter_map {
+        document.at_css(_1)&.[]('content')&.strip.presence
+      }.first
+
+      { title: document.at_css('title')&.text&.strip,
+        image_url: image_url ? URI.join(response.url, image_url).to_s : nil }
+    rescue URI::InvalidURIError
+      { title: document.at_css('title')&.text&.strip, image_url: nil }
+    end
+  end
+end

backend/app/services/preview/http_fetcher.rb

@@ -0,0 +1,129 @@
+require 'net/http'
+require 'json'
+
+module Preview
+  class HttpFetcher
+    class FetchFailed < StandardError; end
+    class FetchTimeout < FetchFailed; end
+    class ResponseTooLarge < FetchFailed; end
+
+    MAX_REDIRECTS = 5
+    DEFAULT_MAX_BYTES = 5.megabytes
+
+    Response = Data.define(:body, :content_type, :url)
+
+    def self.fetch(raw_url, max_bytes: DEFAULT_MAX_BYTES, redirects: MAX_REDIRECTS,
+                   allowed_hosts: nil)
+      uri, addresses = UrlSafety.validate(raw_url)
+      if allowed_hosts && !allowed_hosts.include?(uri.host.downcase)
+        raise FetchFailed, '許可されてゐない redirect 先です．'
+      end
+      response = request(uri, addresses.first, max_bytes)
+
+      if response.is_a?(Net::HTTPRedirection)
+        location = response['location']
+        if redirects.zero?
+          log_failure(:redirect_limit,
+                      url: uri.to_s,
+                      redirects:,
+                      location:,
+                      content_type: response['content-type'],
+                      content_length: response['content-length'])
+          raise FetchFailed, 'redirect が多すぎます．'
+        end
+
+        if location.blank?
+          log_failure(:blank_redirect_location,
+                      url: uri.to_s,
+                      redirects:,
+                      content_type: response['content-type'],
+                      content_length: response['content-length'])
+          raise FetchFailed, 'redirect 先が不正です．'
+        end
+
+        redirect_url =
+            begin
+              URI.join(uri, location).to_s
+            rescue URI::InvalidURIError => e
+              log_failure(:invalid_redirect_location,
+                          url: uri.to_s,
+                          redirects:,
+                          location:,
+                          error: e.class.name,
+                          message: e.message)
+              raise FetchFailed, 'redirect 先が不正です．'
+            end
+
+        return fetch(redirect_url, max_bytes:, redirects: redirects - 1, allowed_hosts:)
+      end
+
+      unless response.is_a?(Net::HTTPSuccess)
+        log_failure(:http_status,
+                    url: uri.to_s,
+                    code: response.code,
+                    content_type: response['content-type'],
+                    content_length: response['content-length'])
+        raise FetchFailed, "外部サーバーが HTTP #{ response.code } を返しました．"
+      end
+
+      Response.new(response.body, response['content-type'].to_s, uri.to_s)
+    rescue Net::OpenTimeout, Net::ReadTimeout, Timeout::Error => e
+      log_failure(:timeout, url: uri&.to_s || raw_url, error: e.class.name, message: e.message)
+      raise FetchTimeout, e.message
+    rescue SocketError, SystemCallError, OpenSSL::SSL::SSLError, EOFError => e
+      log_failure(:network_error,
+                  url: uri&.to_s || raw_url,
+                  error: e.class.name,
+                  message: e.message)
+      raise FetchFailed, e.message
+    end
+
+    def self.request(uri, ip_address, max_bytes)
+      http = Net::HTTP.new(uri.host, uri.port)
+      http.ipaddr = ip_address
+      http.use_ssl = uri.scheme == 'https'
+      http.open_timeout = 5
+      http.read_timeout = 8
+      http.write_timeout = 5
+
+      request = Net::HTTP::Get.new(uri)
+      request['User-Agent'] = 'BTRC-Hub thumbnail preview'
+      request['Accept'] = 'text/html,image/*;q=0.9,*/*;q=0.1'
+
+      http.request(request) do |response|
+        length = response['content-length'].to_i
+        if length > max_bytes
+          log_failure(:response_too_large,
+                      url: uri.to_s,
+                      content_type: response['content-type'],
+                      content_length: response['content-length'],
+                      max_bytes:)
+          raise ResponseTooLarge, '外部データが大きすぎます．'
+        end
+
+        body = +''
+        response.read_body do |chunk|
+          body << chunk
+          next unless body.bytesize > max_bytes
+
+          log_failure(:response_too_large,
+                      url: uri.to_s,
+                      content_type: response['content-type'],
+                      content_length: response['content-length'],
+                      bytes_read: body.bytesize,
+                      max_bytes:)
+          raise ResponseTooLarge, '外部データが大きすぎます．'
+        end
+        response.instance_variable_set(:@body, body)
+        response.instance_variable_set(:@read, true)
+        return response
+      end
+    end
+
+    def self.log_failure(reason, **payload)
+      Rails.logger.warn("preview_http_fetcher_failure #{ { reason:, **payload }.to_json }")
+    end
+
+    private_class_method :request, :log_failure
+  end
+end

backend/app/services/preview/known_site_extractor.rb

@@ -0,0 +1,34 @@
+module Preview
+  class KnownSiteExtractor
+    def self.thumbnail_url(uri)
+      youtube_thumbnail(uri)
+    end
+
+    def self.youtube_video_id(uri)
+      case uri.host&.downcase
+      when 'youtu.be'
+        uri.path.split('/').reject(&:blank?).first
+      when 'www.youtube.com', 'youtube.com', 'm.youtube.com'
+        uri.path == '/watch' ? URI.decode_www_form(uri.query.to_s).to_h['v'] : nil
+      end&.then { _1 if _1.match?(/\A[A-Za-z0-9_-]{6,20}\z/) }
+    end
+
+    def self.niconico_video_id(uri)
+      case uri.host&.downcase
+      when 'www.nicovideo.jp', 'nicovideo.jp'
+        uri.path[%r{\A/watch/(sm\d+)\z}, 1]
+      when 'nico.ms'
+        uri.path[%r{\A/(sm\d+)\z}, 1]
+      end
+    end
+
+    def self.youtube_thumbnail(uri)
+      id = youtube_video_id(uri)
+      return unless id
+
+      "https://i.ytimg.com/vi/#{ id }/hqdefault.jpg"
+    end
+
+    private_class_method :youtube_thumbnail
+  end
+end

backend/app/services/preview/thumbnail_fetcher.rb

@@ -0,0 +1,95 @@
+module Preview
+  class ThumbnailFetcher
+    class GenerationFailed < StandardError; end
+    ALLOWED_IMAGE_CONTENT_TYPES = [
+      'image/jpeg', 'image/png', 'image/gif', 'image/webp'
+    ].freeze
+    HTML_MAX_BYTES = 1.megabyte
+    NICONICO_XML_MAX_BYTES = 256.kilobytes
+
+    def self.fetch(raw_url)
+      uri, = UrlSafety.validate(raw_url)
+
+      known_url = KnownSiteExtractor.thumbnail_url(uri)
+      image = fetch_image_or_nil(known_url) if known_url
+      return image if image
+
+      niconico_url = niconico_thumbnail_url(uri)
+      image = fetch_image_or_nil(niconico_url) if niconico_url
+      return image if image
+
+      page = HttpFetcher.fetch(uri.to_s, max_bytes: HTML_MAX_BYTES)
+      metadata = HtmlMetadataExtractor.extract(page)
+      raise GenerationFailed, 'サムネール画像が見つかりませんでした．' if metadata[:image_url].blank?
+
+      fetch_image!(metadata[:image_url])
+    end
+
+    def self.title(raw_url)
+      uri, = UrlSafety.validate(raw_url)
+      HtmlMetadataExtractor.extract(
+          HttpFetcher.fetch(uri.to_s, max_bytes: HTML_MAX_BYTES))[:title]
+    end
+
+    def self.fetch_image_or_nil(url)
+      return nil if url.blank?
+
+      response = HttpFetcher.fetch(url)
+      return nil unless allowed_image_content_type?(response.content_type)
+
+      response.body
+    rescue HttpFetcher::FetchTimeout
+      raise
+    rescue HttpFetcher::FetchFailed
+      nil
+    end
+
+    def self.fetch_image!(url)
+      response = HttpFetcher.fetch(url)
+      unless allowed_image_content_type?(response.content_type)
+        raise GenerationFailed, 'サムネール画像が見つかりませんでした．'
+      end
+
+      response.body
+    rescue HttpFetcher::FetchTimeout
+      raise
+    rescue HttpFetcher::ResponseTooLarge
+      raise
+    rescue HttpFetcher::FetchFailed
+      raise GenerationFailed, 'サムネール画像を取得できませんでした．'
+    end
+
+    def self.niconico_thumbnail_url(uri)
+      video_id = KnownSiteExtractor.niconico_video_id(uri)
+      return nil if video_id.blank?
+
+      response = HttpFetcher.fetch("https://ext.nicovideo.jp/api/getthumbinfo/#{ video_id }",
+                                   max_bytes: NICONICO_XML_MAX_BYTES)
+      xml = Nokogiri::XML(response.body)
+      return nil unless xml.at_xpath('/nicovideo_thumb_response/@status')&.value == 'ok'
+
+      xml.at_xpath('//thumbnail_url')&.text&.strip.presence
+    rescue HttpFetcher::FetchFailed, HttpFetcher::FetchTimeout => e
+      Rails.logger.info("preview_niconico_getthumbinfo_fallback #{ { url: uri.to_s,
+                                                                     video_id:,
+                                                                     error: e.class.name,
+                                                                     message: e.message }.to_json }")
+      nil
+    rescue Nokogiri::XML::SyntaxError => e
+      Rails.logger.info("preview_niconico_getthumbinfo_fallback #{ { url: uri.to_s,
+                                                                     video_id:,
+                                                                     error: e.class.name,
+                                                                     message: e.message }.to_json }")
+      nil
+    end
+
+    def self.allowed_image_content_type?(content_type)
+      mime_type = content_type.to_s.split(';', 2).first.downcase.strip
+      ALLOWED_IMAGE_CONTENT_TYPES.include?(mime_type)
+    end
+
+    private_class_method :fetch_image_or_nil, :fetch_image!,
+                         :niconico_thumbnail_url,
+                         :allowed_image_content_type?
+  end
+end

backend/app/services/preview/url_safety.rb

@@ -0,0 +1,55 @@
+require 'resolv'
+require 'ipaddr'
+require 'uri'
+
+module Preview
+  class UrlSafety
+    class UnsafeUrl < StandardError; end
+
+    FORBIDDEN_NETWORKS = [
+      '0.0.0.0/8', '10.0.0.0/8', '100.64.0.0/10', '127.0.0.0/8',
+      '169.254.0.0/16', '172.16.0.0/12', '192.0.0.0/24',
+      '192.0.2.0/24', '192.168.0.0/16', '198.18.0.0/15',
+      '198.51.100.0/24', '203.0.113.0/24', '224.0.0.0/4',
+      '240.0.0.0/4', '::/128', '::1/128', 'fc00::/7', 'fe80::/10',
+      'ff00::/8', '2001:db8::/32', '::ffff:0:0/96'
+    ].map { IPAddr.new(_1) }.freeze
+
+    def self.validate(raw_url)
+      value = raw_url.to_s.strip
+      if value.match?(/\A[a-z][a-z0-9+\-.]*:/i)
+        unless value.match?(/\Ahttps?:\/\//i)
+          raise UnsafeUrl, 'http または https の URL を指定してください．'
+        end
+      else
+        value = "http://#{ value }"
+      end
+      uri = URI.parse(value)
+
+      unless ['http', 'https'].include?(uri.scheme&.downcase) && uri.host.present?
+        raise UnsafeUrl, 'http または https の URL を指定してください．'
+      end
+      raise UnsafeUrl, 'userinfo つき URL は使用できません．' if uri.userinfo.present?
+
+      addresses = Resolv.getaddresses(uri.host)
+      raise UnsafeUrl, 'URL のホストを解決できません．' if addresses.empty?
+
+      parsed_addresses = addresses.map { IPAddr.new(_1) }
+      if parsed_addresses.any? { |address| forbidden?(address) }
+        raise UnsafeUrl, '安全でない接続先は使用できません．'
+      end
+
+      [uri, parsed_addresses.map(&:to_s)]
+    rescue Resolv::ResolvError
+      raise UnsafeUrl, 'URL のホストを解決できません．'
+    rescue URI::InvalidURIError, IPAddr::InvalidAddressError
+      raise UnsafeUrl, 'URL が不正です．'
+    end
+
+    def self.forbidden?(address)
+      FORBIDDEN_NETWORKS.any? { _1.include?(address) }
+    end
+
+    private_class_method :forbidden?
+  end
+end

backend/config/routes.rb

@@ -33,6 +33,12 @@ Rails.application.routes.draw do
     get :thumbnail
   end
 
+  scope 'posts/import', controller: :post_imports do
+    post :preview
+    post :validate
+    post '', action: :create
+  end
+
   resources :wiki_pages, path: 'wiki', only: [:index, :show, :create, :update] do
     collection do
       get :search
@@ -81,6 +87,11 @@ Rails.application.routes.draw do
     end
   end
 
+  get 'users/settings', to: 'user_settings#show'
+  patch 'users/settings', to: 'user_settings#update'
+  get 'users/theme_slots', to: 'user_theme_slots#index'
+  put 'users/theme_slots/:base_theme/:slot_no', to: 'user_theme_slots#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/migrate/20260705000000_create_user_theme_slots.rb

@@ -0,0 +1,22 @@
+class CreateUserThemeSlots < ActiveRecord::Migration[8.0]
+  def change
+    create_table :user_theme_slots do |t|
+      t.references :user, null: false, foreign_key: true
+      t.string :base_theme, null: false
+      t.integer :slot_no, null: false
+      t.json :tokens, null: false
+      t.timestamps
+    end
+
+    add_index :user_theme_slots,
+              [:user_id, :base_theme, :slot_no],
+              unique: true,
+              name: 'index_user_theme_slots_on_user_theme_and_slot'
+    add_check_constraint :user_theme_slots,
+                         "base_theme IN ('light', 'dark')",
+                         name: 'user_theme_slots_base_theme_valid'
+    add_check_constraint :user_theme_slots,
+                         'slot_no BETWEEN 1 AND 3',
+                         name: 'user_theme_slots_slot_no_valid'
+  end
+end

backend/db/migrate/20260713000000_create_post_url_sanitisation_rules.rb

@@ -0,0 +1,61 @@
+class CreatePostUrlSanitisationRules < ActiveRecord::Migration[8.0]
+  class PostUrlSanitisationRule < ActiveRecord::Base
+    self.table_name = 'post_url_sanitisation_rules'
+  end
+
+  def up
+    create_table :post_url_sanitisation_rules, id: :integer, primary_key: :priority do |t|
+      t.string :source_pattern, null: false
+      t.string :replacement, null: false
+      t.timestamps
+      t.datetime :discarded_at
+
+      t.index :source_pattern, unique: true
+      t.index :discarded_at
+    end
+
+    now = Time.current
+
+    PostUrlSanitisationRule.insert_all!([
+        { priority: 10,
+          source_pattern: '\Ahttps?://youtu\.be/([^/?#]+)(?:[?#].*)?\z',
+          replacement: 'https://www.youtube.com/watch?v=\1',
+          created_at: now,
+          updated_at: now },
+        { priority: 20,
+          source_pattern: '\Ahttps?://(?:www\.|m\.)?youtube\.com/live/([^/?#]+)(?:[?#].*)?\z',
+          replacement: 'https://www.youtube.com/watch?v=\1',
+          created_at: now,
+          updated_at: now },
+        { priority: 30,
+          source_pattern: '\Ahttps?://(?:www\.|m\.)?youtube\.com/shorts/([^/?#]+)(?:[?#].*)?\z',
+          replacement: 'https://www.youtube.com/watch?v=\1',
+          created_at: now,
+          updated_at: now },
+        { priority: 40,
+          source_pattern: '\Ahttps?://(?:www\.|m\.)?youtube\.com/embed/([^/?#]+)(?:[?#].*)?\z',
+          replacement: 'https://www.youtube.com/watch?v=\1',
+          created_at: now,
+          updated_at: now },
+        { priority: 50,
+          source_pattern:
+              '\Ahttps?://(?:www\.|m\.)?youtube\.com/watch\?(?:[^#&]+&)*v=([^&#]+)(?:[&#].*)?\z',
+          replacement: 'https://www.youtube.com/watch?v=\1',
+          created_at: now,
+          updated_at: now },
+        { priority: 60,
+          source_pattern: '\Ahttps?://nico\.ms/([^/?#]+)(?:[?#].*)?\z',
+          replacement: 'https://www.nicovideo.jp/watch/\1',
+          created_at: now,
+          updated_at: now },
+        { priority: 70,
+          source_pattern: '\Ahttps?://(?:www\.)?nicovideo\.jp/watch/([^?#/]+)(?:[?#].*)?\z',
+          replacement: 'https://www.nicovideo.jp/watch/\1',
+          created_at: now,
+          updated_at: now }])
+  end
+
+  def down
+    drop_table :post_url_sanitisation_rules
+  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_13_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
@@ -318,6 +331,16 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
     t.index ["tag_id"], name: "index_post_tags_on_tag_id"
   end
 
+  create_table "post_url_sanitisation_rules", primary_key: "priority", id: :integer, charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.string "source_pattern", null: false
+    t.string "replacement", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "discarded_at"
+    t.index ["discarded_at"], name: "index_post_url_sanitisation_rules_on_discarded_at"
+    t.index ["source_pattern"], name: "index_post_url_sanitisation_rules_on_source_pattern", unique: true
+  end
+
   create_table "post_versions", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "post_id", null: false
     t.integer "version_no", null: false
@@ -331,9 +354,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 +374,36 @@ 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 "wiki_assets", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.bigint "wiki_page_id", null: false
+    t.integer "no", null: false
+    t.string "alt_text"
+    t.binary "sha256", limit: 32, null: false
+    t.bigint "created_by_user_id", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["created_by_user_id"], name: "index_wiki_assets_on_created_by_user_id"
+    t.index ["wiki_page_id", "no"], name: "index_wiki_assets_on_wiki_page_id_and_no", unique: true
+    t.index ["wiki_page_id", "sha256"], name: "index_wiki_assets_on_wiki_page_id_and_sha256", unique: true
   end
 
   create_table "tag_implications", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -407,9 +451,9 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
     t.string "event_type", null: false
     t.string "name", null: false
     t.string "category", null: false
-    t.datetime "deprecated_at"
     t.text "aliases", null: false
     t.text "parent_tag_ids", null: false
+    t.datetime "deprecated_at"
     t.datetime "created_at", null: false
     t.bigint "created_by_user_id"
     t.index ["created_at"], name: "index_tag_versions_on_created_at"
@@ -422,10 +466,10 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
   create_table "tags", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "tag_name_id", null: false
     t.string "category", default: "general", null: false
+    t.datetime "deprecated_at"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.integer "post_count", default: 0, null: false
-    t.datetime "deprecated_at"
     t.datetime "discarded_at"
     t.integer "version_no", null: false
     t.index ["deprecated_at"], name: "index_tags_on_deprecated_at"
@@ -547,6 +591,19 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
     t.index ["post_id"], name: "index_user_post_views_on_post_id"
   end
 
+  create_table "user_theme_slots", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.bigint "user_id", null: false
+    t.string "base_theme", null: false
+    t.integer "slot_no", null: false
+    t.json "tokens", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["user_id", "base_theme", "slot_no"], name: "index_user_theme_slots_on_user_theme_and_slot", unique: true
+    t.index ["user_id"], name: "index_user_theme_slots_on_user_id"
+    t.check_constraint "`base_theme` in (_utf8mb4'light',_utf8mb4'dark')", name: "user_theme_slots_base_theme_valid"
+    t.check_constraint "`slot_no` between 1 and 3", name: "user_theme_slots_slot_no_valid"
+  end
+
   create_table "users", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.string "name"
     t.string "inheritance_code", limit: 64, null: false
@@ -557,19 +614,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
     t.index ["banned_at"], name: "index_users_on_banned_at"
   end
 
-  create_table "wiki_assets", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
-    t.bigint "wiki_page_id", null: false
-    t.integer "no", null: false
-    t.string "alt_text"
-    t.binary "sha256", limit: 32, null: false
-    t.bigint "created_by_user_id", null: false
-    t.datetime "created_at", null: false
-    t.datetime "updated_at", null: false
-    t.index ["created_by_user_id"], name: "index_wiki_assets_on_created_by_user_id"
-    t.index ["wiki_page_id", "no"], name: "index_wiki_assets_on_wiki_page_id_and_no", unique: true
-    t.index ["wiki_page_id", "sha256"], name: "index_wiki_assets_on_wiki_page_id_and_sha256", unique: true
-  end
-
   create_table "wiki_lines", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.string "sha256", limit: 64, null: false
     t.text "body", null: false
@@ -678,6 +722,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"
@@ -717,6 +763,7 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
   add_foreign_key "user_ips", "users"
   add_foreign_key "user_post_views", "posts"
   add_foreign_key "user_post_views", "users"
+  add_foreign_key "user_theme_slots", "users"
   add_foreign_key "wiki_assets", "users", column: "created_by_user_id"
   add_foreign_key "wiki_assets", "wiki_pages"
   add_foreign_key "wiki_pages", "tag_names"

backend/db/seeds.rb

@@ -8,6 +8,43 @@
 #     MovieGenre.find_or_create_by!(name: genre_name)
 #   end
 
+post_url_sanitisation_rules = [
+  { priority: 10,
+    source_pattern: '\Ahttps?://youtu\.be/([^/?#]+)(?:[?#].*)?\z',
+    replacement: 'https://www.youtube.com/watch?v=\1' },
+  { priority: 20,
+    source_pattern: '\Ahttps?://(?:www\.|m\.)?youtube\.com/live/([^/?#]+)(?:[?#].*)?\z',
+    replacement: 'https://www.youtube.com/watch?v=\1' },
+  { priority: 30,
+    source_pattern: '\Ahttps?://(?:www\.|m\.)?youtube\.com/shorts/([^/?#]+)(?:[?#].*)?\z',
+    replacement: 'https://www.youtube.com/watch?v=\1' },
+  { priority: 40,
+    source_pattern: '\Ahttps?://(?:www\.|m\.)?youtube\.com/embed/([^/?#]+)(?:[?#].*)?\z',
+    replacement: 'https://www.youtube.com/watch?v=\1' },
+  { priority: 50,
+    source_pattern:
+        '\Ahttps?://(?:www\.|m\.)?youtube\.com/watch\?(?:[^#&]+&)*v=([^&#]+)(?:[&#].*)?\z',
+    replacement: 'https://www.youtube.com/watch?v=\1' },
+  { priority: 60,
+    source_pattern: '\Ahttps?://nico\.ms/([^/?#]+)(?:[?#].*)?\z',
+    replacement: 'https://www.nicovideo.jp/watch/\1' },
+  { priority: 70,
+    source_pattern: '\Ahttps?://(?:www\.)?nicovideo\.jp/watch/([^?#/]+)(?:[?#].*)?\z',
+    replacement: 'https://www.nicovideo.jp/watch/\1' }
+]
+
+post_url_sanitisation_rule_scope = PostUrlSanitisationRule.unscoped
+
+post_url_sanitisation_rules.each do |attributes|
+  priority = attributes.fetch(:priority)
+  source_pattern = attributes.fetch(:source_pattern)
+
+  next if post_url_sanitisation_rule_scope.exists?(priority:)
+  next if post_url_sanitisation_rule_scope.exists?(source_pattern:)
+
+  post_url_sanitisation_rule_scope.create!(attributes)
+end
+
 material_sync_source_uri = ENV['MATERIAL_SYNC_SOURCE_URI']
 material_sync_source_file_id = ENV['MATERIAL_SYNC_SOURCE_FILE_ID']
 

backend/lib/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "lib",
-  "version": "1.0.0",
-  "main": "screenshot.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "puppeteer": "^24.10.0"
-  }
-}

backend/lib/screenshot.js

@@ -1,18 +0,0 @@
-const puppeteer = require ('puppeteer')
-const fs = require ('fs')
-
-
-void (async () => {
-  const url = process.argv[2]
-  const output = process.argv[3]
-
-  const browser = await puppeteer.launch ({
-      args: ['--no-sandbox', '--disable-setuid-sandbox'] })
-
-  const page = await browser.newPage ()
-  await page.setViewport ({ width: 960, height: 960 })
-  await page.goto (url, { waitUntil: 'networkidle2', timeout: 15000 })
-
-  await page.screenshot ({ path: output })
-  await browser.close ()
-}) ()

backend/spec/db/seeds_spec.rb

@@ -0,0 +1,65 @@
+require 'rails_helper'
+
+RSpec.describe 'database seeds' do
+  before do
+    PostUrlSanitisationRule.unscoped.delete_all
+  end
+
+  it 'registers the initial post URL sanitisation rules' do
+    load_seeds
+
+    urls = {
+      'https://youtu.be/abc123?si=share' => youtube_url('abc123'),
+      'https://www.youtube.com/live/abc123?t=10' => youtube_url('abc123'),
+      'https://youtube.com/shorts/abc123?feature=share' => youtube_url('abc123'),
+      'https://m.youtube.com/embed/abc123' => youtube_url('abc123'),
+      'https://youtube.com/watch?feature=share&v=abc123&t=10' => youtube_url('abc123'),
+      'https://nico.ms/sm123?from=share#fragment' => nico_url('sm123'),
+      'https://www.nicovideo.jp/watch/sm123?ref=share#fragment' => nico_url('sm123')
+    }
+
+    expect(PostUrlSanitisationRule.count).to eq(7)
+    urls.each do |url, canonical_url|
+      expect(PostUrlSanitisationRule.sanitise(url)).to eq(canonical_url)
+    end
+  end
+
+  it 'does not overwrite or restore an existing rule' do
+    rule = PostUrlSanitisationRule.create!(
+      priority: 10,
+      source_pattern: '\Ahttps://example\.com/custom\z',
+      replacement: 'https://example.com/replacement'
+    )
+    rule.discard!
+    original_attributes = rule.reload.attributes
+
+    2.times { load_seeds }
+
+    persisted_rule = PostUrlSanitisationRule.unscoped.find(10)
+    expect(persisted_rule.attributes).to eq(original_attributes)
+    expect(PostUrlSanitisationRule.unscoped.count).to eq(7)
+  end
+
+  it 'does not duplicate a rule moved to another priority' do
+    source_pattern = '\Ahttps?://youtu\.be/([^/?#]+)(?:[?#].*)?\z'
+    PostUrlSanitisationRule.create!(
+      priority: 80,
+      source_pattern:,
+      replacement: 'https://example.com/custom/\1'
+    )
+
+    load_seeds
+
+    rules = PostUrlSanitisationRule.unscoped
+    expect(rules.where(source_pattern:).count).to eq(1)
+    expect(rules.find(80).replacement).to eq('https://example.com/custom/\1')
+  end
+
+  def load_seeds
+    load Rails.root.join('db/seeds.rb')
+  end
+
+  def youtube_url(video_id) = "https://www.youtube.com/watch?v=#{ video_id }"
+
+  def nico_url(video_id) = "https://www.nicovideo.jp/watch/#{ video_id }"
+end

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_spec.rb

@@ -0,0 +1,68 @@
+require 'rails_helper'
+
+RSpec.describe Post, type: :model do
+  before do
+    PostUrlSanitisationRule.unscoped.delete_all
+  end
+
+  describe 'URL normalisation' do
+    it 'normalises the HTTP URL before applying sanitisation rules' do
+      PostUrlSanitisationRule.create!(
+        priority: 10,
+        source_pattern: '\\Ahttps://example\\.com/videos/([^/]+)\\z',
+        replacement: 'https://example.com/watch/\\1'
+      )
+
+      post = described_class.create!(
+        title: 'normalised URL',
+        url: '  https://EXAMPLE.com/videos/123/  '
+      )
+
+      expect(post.url).to eq('https://example.com/watch/123')
+    end
+
+    it 'does not normalise an unchanged URL when another attribute changes' do
+      post = create(:post)
+      post.update_column(:url, 'https://EXAMPLE.com/unchanged/')
+
+      post.update!(title: 'updated title')
+
+      expect(post.reload.url).to eq('https://EXAMPLE.com/unchanged/')
+    end
+
+    it 'validates the sanitised URL length' do
+      path = 'a' * 375
+
+      PostUrlSanitisationRule.create!(
+        priority: 10,
+        source_pattern: '\\Ahttps://example\\.com/(a+)\\z',
+        replacement: 'https://example.com/\\1\\1'
+      )
+
+      post = described_class.new(
+        title: 'long URL',
+        url: "https://example.com/#{ path }"
+      )
+
+      expect(post).to be_invalid
+      expect(post.errors.details.fetch(:url)).to include(
+        error: :too_long,
+        count: 768
+      )
+    end
+
+    it 'validates uniqueness after sanitisation' do
+      PostUrlSanitisationRule.create!(
+        priority: 10,
+        source_pattern: '\\Ahttps://example\\.com/alias\\z',
+        replacement: 'https://example.com/canonical'
+      )
+      create(:post, url: 'https://example.com/canonical')
+
+      post = described_class.new(title: 'duplicate URL', url: 'https://example.com/alias')
+
+      expect(post).to be_invalid
+      expect(post.errors.details.fetch(:url)).to include(error: :taken, value: post.url)
+    end
+  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/post_url_sanitisation_rule_spec.rb

@@ -0,0 +1,265 @@
+require 'rails_helper'
+
+RSpec.describe PostUrlSanitisationRule, type: :model do
+  before do
+    described_class.unscoped.delete_all
+  end
+
+  describe 'validations' do
+    it 'requires a source pattern' do
+      rule = described_class.new(priority: 10, source_pattern: nil, replacement: '')
+
+      expect(rule).to be_invalid
+      expect(rule.errors.details.fetch(:source_pattern)).to eq([{ error: :blank }])
+    end
+
+    it 'requires a unique source pattern' do
+      described_class.create!(priority: 10, source_pattern: 'source', replacement: 'first')
+      rule = described_class.new(
+        priority: 20,
+        source_pattern: 'source',
+        replacement: 'second'
+      )
+
+      expect(rule).to be_invalid
+      expect(rule.errors.details.fetch(:source_pattern)).to include(
+        error: :taken,
+        value: 'source'
+      )
+    end
+
+    it 'rejects an invalid regexp' do
+      rule = described_class.new(priority: 10, source_pattern: '[', replacement: '')
+
+      expect(rule).to be_invalid
+      expect(rule.errors[:source_pattern]).to include('変な正規表現だね〜（笑）')
+    end
+  end
+
+  describe '.sanitise' do
+    it 'applies each active rule once in priority order' do
+      described_class.create!(priority: 30, source_pattern: 'c', replacement: 'd')
+      described_class.create!(priority: 10, source_pattern: 'a', replacement: 'aa')
+      described_class.create!(priority: 20, source_pattern: 'aa', replacement: 'c')
+      discarded = described_class.create!(
+        priority: 5,
+        source_pattern: '.',
+        replacement: 'discarded'
+      )
+      discarded.discard!
+
+      expect(described_class.sanitise('a')).to eq('d')
+    end
+
+    it 'canonicalises the initial YouTube and Nico URL forms' do
+      create_initial_rules
+
+      urls = {
+        'https://youtu.be/abc123?si=share' => youtube_url('abc123'),
+        'https://www.youtube.com/live/abc123?t=10' => youtube_url('abc123'),
+        'https://youtube.com/shorts/abc123?feature=share' => youtube_url('abc123'),
+        'https://m.youtube.com/embed/abc123' => youtube_url('abc123'),
+        'https://youtube.com/watch?feature=share&v=abc123&t=10' => youtube_url('abc123'),
+        'https://nico.ms/sm123?from=share#fragment' => nico_url('sm123'),
+        'https://www.nicovideo.jp/watch/sm123?ref=share#fragment' => nico_url('sm123')
+      }
+
+      urls.each do |url, canonical_url|
+        expect(described_class.sanitise(url)).to eq(canonical_url)
+      end
+    end
+  end
+
+  describe '.apply!' do
+    it 'locks posts in ID order and updates through temporary URLs' do
+      first = create(:post, url: 'https://example.com/source/1')
+      second = create(:post, url: 'https://example.com/source/2')
+      create_source_rule
+      sql = capture_sql { described_class.apply! }
+
+      lock_sql = sql.find { _1.match?(/SELECT .*posts.*FOR UPDATE/i) }
+      expect(lock_sql).to match(/ORDER BY .*posts.*id.* ASC/i)
+      expect(sql.grep(/post-url-sanitising\.invalid/).size).to eq(2)
+      expect(first.reload.url).to eq('https://example.com/canonical/1')
+      expect(second.reload.url).to eq('https://example.com/canonical/2')
+    end
+
+    it 'loads and compiles rules only once' do
+      create(:post, url: 'https://example.com/source/1')
+      create(:post, url: 'https://example.com/source/2')
+      create_source_rule
+
+      expect(described_class).to receive(:rules).once.and_call_original
+
+      described_class.apply!
+    end
+
+    it 'does not change post versions, version_no, or updated_at' do
+      post = create(:post, url: 'https://example.com/source/1')
+      post.update_columns(version_no: 7, updated_at: 1.day.ago)
+      original_updated_at = post.reload.updated_at
+      create_source_rule
+
+      expect { described_class.apply! }.not_to change(PostVersion, :count)
+
+      post.reload
+      expect(post.url).to eq('https://example.com/canonical/1')
+      expect(post.version_no).to eq(7)
+      expect(post.updated_at).to eq(original_updated_at)
+    end
+
+    invalid_urls = {
+      'a blank URL' => '',
+      'an unparseable URL' => 'https://[',
+      'a non-HTTP URL' => 'ftp://example.com/file',
+      'an HTTP URL without a host' => 'https:/path'
+    }
+
+    invalid_urls.each do |description, sanitised_url|
+      it "rolls back every update when sanitisation produces #{ description }" do
+        valid_post = create(:post, url: 'https://example.com/source/1')
+        invalid_post = create(:post, url: 'https://example.com/invalid')
+        create_source_rule
+        described_class.create!(
+          priority: 20,
+          source_pattern: '\\Ahttps://example\\.com/invalid\\z',
+          replacement: sanitised_url
+        )
+
+        expect { described_class.apply! }
+            .to raise_error(described_class::InvalidUrlError) { |error|
+          expect(error.invalid_rows).to eq([
+            { post_id: invalid_post.id,
+              original_url: 'https://example.com/invalid',
+              sanitised_url: }
+          ])
+        }
+        expect(valid_post.reload.url).to eq('https://example.com/source/1')
+        expect(invalid_post.reload.url).to eq('https://example.com/invalid')
+      end
+    end
+
+    it 'rolls back every update when sanitisation produces a URL longer than 768 characters' do
+      path = 'a' * 375
+      original_url = "https://example.com/#{ path }"
+      sanitised_url = "https://example.com/#{ path }#{ path }"
+      valid_post = create(:post, url: 'https://example.com/source/1')
+      invalid_post = create(:post, url: original_url)
+      create_source_rule
+      described_class.create!(
+        priority: 20,
+        source_pattern: '\\Ahttps://example\\.com/(a+)\\z',
+        replacement: 'https://example.com/\\1\\1'
+      )
+
+      expect { described_class.apply! }
+          .to raise_error(described_class::InvalidUrlError) { |error|
+        expect(error.invalid_rows).to eq([
+          { post_id: invalid_post.id,
+            original_url:,
+            sanitised_url: }
+        ])
+      }
+      expect(valid_post.reload.url).to eq('https://example.com/source/1')
+      expect(invalid_post.reload.url).to eq(original_url)
+    end
+
+    it 'rejects sanitised URL collisions case-insensitively without changing posts' do
+      source = create(:post, url: 'https://example.com/source/Foo')
+      canonical = create(:post, url: 'https://example.com/canonical/foo')
+      create_source_rule
+
+      expect { described_class.apply! }
+          .to raise_error(described_class::UrlConflictError) { |error|
+        expect(error.conflicts).to contain_exactly(
+          { url: 'https://example.com/canonical/Foo',
+            post_id: source.id,
+            original_url: 'https://example.com/source/Foo' },
+          { url: 'https://example.com/canonical/foo',
+            post_id: canonical.id,
+            original_url: 'https://example.com/canonical/foo' }
+        )
+      }
+      expect(source.reload.url).to eq('https://example.com/source/Foo')
+      expect(canonical.reload.url).to eq('https://example.com/canonical/foo')
+      expect(Post.count).to eq(2)
+    end
+
+    it 'converts a persisted URL constraint race into UrlConflictError' do
+      post = create(:post, url: 'https://example.com/source/1')
+      create_source_rule
+      conflict = { url: 'https://example.com/canonical/1',
+                   post_id: post.id,
+                   original_url: post.url }
+      database_error = ActiveRecord::RecordNotUnique.new('duplicate URL')
+      allow_any_instance_of(ActiveRecord::Relation)
+          .to receive(:update_all).and_raise(database_error)
+      allow(described_class).to receive(:build_persisted_conflicts).and_return([conflict])
+
+      expect { described_class.apply! }
+          .to raise_error(described_class::UrlConflictError) { |error|
+        expect(error.conflicts).to eq([conflict])
+        expect(error.cause).to equal(database_error)
+      }
+      expect(post.reload.url).to eq('https://example.com/source/1')
+    end
+
+    it 're-raises an unidentified RecordNotUnique error' do
+      post = create(:post, url: 'https://example.com/source/1')
+      create_source_rule
+      database_error = ActiveRecord::RecordNotUnique.new('another unique constraint')
+      allow_any_instance_of(ActiveRecord::Relation)
+          .to receive(:update_all).and_raise(database_error)
+      allow(described_class).to receive(:build_persisted_conflicts).and_return([])
+
+      expect { described_class.apply! }.to raise_error(database_error)
+      expect(post.reload.url).to eq('https://example.com/source/1')
+    end
+  end
+
+  def capture_sql
+    statements = []
+    subscriber = lambda do |_name, _start, _finish, _id, payload|
+      binds = payload.fetch(:binds, []).map { _1.value_for_database.to_s }
+      statements << ([payload.fetch(:sql)] + binds).join(' ')
+    end
+    ActiveSupport::Notifications.subscribed(subscriber, 'sql.active_record') { yield }
+    statements
+  end
+
+  def create_source_rule
+    described_class.create!(
+      priority: 10,
+      source_pattern: '\\Ahttps://example\\.com/source/(.+)\\z',
+      replacement: 'https://example.com/canonical/\\1'
+    )
+  end
+
+  def create_initial_rules
+    rules = [
+      ['\\Ahttps?://youtu\\.be/([^/?#]+)(?:[?#].*)?\\z', youtube_url('\\1')],
+      ['\\Ahttps?://(?:www\\.|m\\.)?youtube\\.com/live/([^/?#]+)(?:[?#].*)?\\z',
+       youtube_url('\\1')],
+      ['\\Ahttps?://(?:www\\.|m\\.)?youtube\\.com/shorts/([^/?#]+)(?:[?#].*)?\\z',
+       youtube_url('\\1')],
+      ['\\Ahttps?://(?:www\\.|m\\.)?youtube\\.com/embed/([^/?#]+)(?:[?#].*)?\\z',
+       youtube_url('\\1')],
+      ['\\Ahttps?://(?:www\\.|m\\.)?youtube\\.com/watch\\?(?:[^#&]+&)*' \
+       'v=([^&#]+)(?:[&#].*)?\\z', youtube_url('\\1')],
+      ['\\Ahttps?://nico\\.ms/([^/?#]+)(?:[?#].*)?\\z', nico_url('\\1')],
+      ['\\Ahttps?://(?:www\\.)?nicovideo\\.jp/watch/([^?#/]+)(?:[?#].*)?\\z',
+       nico_url('\\1')]
+    ]
+    rules.each_with_index do |(source_pattern, replacement), index|
+      described_class.create!(
+        priority: (index + 1) * 10,
+        source_pattern:,
+        replacement:
+      )
+    end
+  end
+
+  def youtube_url(video_id) = "https://www.youtube.com/watch?v=#{ video_id }"
+
+  def nico_url(video_id) = "https://www.nicovideo.jp/watch/#{ video_id }"
+end

backend/spec/models/setting_spec.rb

@@ -0,0 +1,34 @@
+require 'rails_helper'
+
+RSpec.describe Setting, type: :model do
+  it 'accepts the default typed user settings' do
+    setting = described_class.new({ user: create(:user) }.merge(described_class.defaults))
+
+    expect(setting).to be_valid
+  end
+
+  it 'requires one settings row per user' do
+    user = create(:user)
+    described_class.create!({ user: }.merge(described_class.defaults))
+
+    duplicate = described_class.new({ user: }.merge(described_class.defaults))
+
+    expect(duplicate).not_to be_valid
+    expect(duplicate.errors[:user_id]).to be_present
+  end
+
+  it 'validates enum-like settings columns' do
+    setting = described_class.new(
+        { user: create(:user),
+          theme: 'neon',
+          auto_fetch_title: 'sometimes',
+          auto_fetch_thumbnail: 'sometimes',
+          wiki_editor_mode: 'sideways' })
+
+    expect(setting).not_to be_valid
+    expect(setting.errors[:theme]).to be_present
+    expect(setting.errors[:auto_fetch_title]).to be_present
+    expect(setting.errors[:auto_fetch_thumbnail]).to be_present
+    expect(setting.errors[:wiki_editor_mode]).to be_present
+  end
+end

backend/spec/models/tag_implication_spec.rb

@@ -0,0 +1,36 @@
+require 'rails_helper'
+
+RSpec.describe TagImplication, type: :model do
+  it 'rejects a parent tag that would create a cycle' do
+    child = create(:tag, name: 'tag_implication_cycle_child')
+    parent = create(:tag, name: 'tag_implication_cycle_parent')
+
+    described_class.create!(tag: child, parent_tag: parent)
+
+    implication = described_class.new(tag: parent, parent_tag: child)
+
+    expect(implication).not_to be_valid
+    expect(implication.errors[:parent_tag_id]).to include(
+      '親タグに子孫タグを指定すると循環します．'
+    )
+    expect(implication.errors[:base]).to be_present
+  end
+
+  it 'terminates even when existing data already contains a cycle' do
+    child = create(:tag, name: 'tag_implication_existing_cycle_child')
+    parent = create(:tag, name: 'tag_implication_existing_cycle_parent')
+    ancestor = create(:tag, name: 'tag_implication_existing_cycle_ancestor')
+
+    described_class.create!(tag: parent, parent_tag: ancestor)
+    described_class.insert_all!(
+      [
+        { tag_id: ancestor.id, parent_tag_id: parent.id,
+          created_at: Time.current, updated_at: Time.current }
+      ]
+    )
+
+    implication = described_class.new(tag: child, parent_tag: parent)
+
+    expect(implication).to be_valid
+  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
@@ -54,7 +143,17 @@ RSpec.describe Tag, type: :model do
       first = create(:tag, name: 'expand_cycle_first')
       second = create(:tag, name: 'expand_cycle_second')
       TagImplication.create!(tag: first, parent_tag: second)
-      TagImplication.create!(tag: second, parent_tag: first)
+      now = Time.current
+      TagImplication.insert_all!(
+        [
+          {
+            tag_id: second.id,
+            parent_tag_id: first.id,
+            created_at: now,
+            updated_at: now
+          }
+        ]
+      )
 
       expect(described_class.expand_parent_tags([first])).to contain_exactly(first, second)
     end

backend/spec/models/user_theme_slot_spec.rb

@@ -0,0 +1,40 @@
+require 'rails_helper'
+
+RSpec.describe UserThemeSlot, type: :model do
+  it 'accepts a theme slot for one user, base theme, and slot number' do
+    slot = described_class.new(user: create(:user),
+                               base_theme: 'light',
+                               slot_no: 1,
+                               tokens: { 'background' => '0 0% 100%' })
+
+    expect(slot).to be_valid
+  end
+
+  it 'requires unique slot numbers per user and base theme' do
+    user = create(:user)
+    described_class.create!(user:,
+                            base_theme: 'dark',
+                            slot_no: 2,
+                            tokens: { 'background' => '222.2 84% 4.9%' })
+
+    duplicate = described_class.new(user:,
+                                    base_theme: 'dark',
+                                    slot_no: 2,
+                                    tokens: { 'background' => '0 0% 100%' })
+
+    expect(duplicate).not_to be_valid
+    expect(duplicate.errors[:user_id]).to be_present
+  end
+
+  it 'validates base theme, slot number, and token object shape' do
+    slot = described_class.new(user: create(:user),
+                               base_theme: 'system',
+                               slot_no: 4,
+                               tokens: 'not-object')
+
+    expect(slot).not_to be_valid
+    expect(slot.errors[:base_theme]).to be_present
+    expect(slot.errors[:slot_no]).to be_present
+    expect(slot.errors[:tokens]).to be_present
+  end
+end

backend/spec/requests/materials_spec.rb

@@ -287,6 +287,25 @@ RSpec.describe 'Materials API', type: :request do
         expect(json.dig('export_paths', 'legacy_drive')).to eq('伊地知ニジカ/created.png')
       end
 
+      it 'creates a create tag_version for a newly created material tag' do
+        expect do
+          post '/materials', params: {
+            tag: 'material_create_versioned_tag',
+            file: dummy_upload(filename: 'created.png')
+          }
+        end.to change(TagVersion, :count).by(1)
+
+        expect(response).to have_http_status(:created)
+
+        tag = Tag.joins(:tag_name).find_by!(tag_names: { name: 'material_create_versioned_tag' })
+        version = tag.tag_versions.order(:version_no).last
+
+        expect(version.event_type).to eq('create')
+        expect(version.name).to eq('material_create_versioned_tag')
+        expect(version.category).to eq('material')
+        expect(version.created_by_user).to eq(member_user)
+      end
+
       it 'snapshots attached file metadata and sha256' do
         post '/materials', params: {
           tag: 'material_create_file_version',
@@ -466,6 +485,73 @@ RSpec.describe 'Materials API', type: :request do
         expect(json.dig('tag', 'name')).to eq('material_update_new')
       end
 
+      it 'creates a create tag_version when update creates a new tag' do
+        expect do
+          put "/materials/#{ material.id }", params: {
+            tag: 'material_update_versioned_tag',
+            file: dummy_upload(filename: 'updated.png')
+          }
+        end.to change(Tag, :count).by(1)
+          .and change(TagName, :count).by(1)
+          .and change(TagVersion, :count).by(1)
+
+        expect(response).to have_http_status(:ok)
+
+        tag = Tag.joins(:tag_name).find_by!(tag_names: { name: 'material_update_versioned_tag' })
+        version = tag.tag_versions.order(:version_no).last
+
+        expect(version.event_type).to eq('create')
+        expect(version.name).to eq('material_update_versioned_tag')
+        expect(version.category).to eq('material')
+        expect(version.created_by_user).to eq(member_user)
+      end
+
+      it 'backfills a create tag_version for an existing material tag without history' do
+        existing_tag =
+            Tag.create!(tag_name: TagName.create!(name: 'material_update_existing_no_history'),
+                        category: :material)
+
+        expect(existing_tag.tag_versions).to be_empty
+
+        expect do
+          put "/materials/#{ material.id }", params: {
+            tag: 'material_update_existing_no_history',
+            file: dummy_upload(filename: 'updated.png')
+          }
+        end.to change(TagVersion, :count).by(1)
+
+        expect(response).to have_http_status(:ok)
+
+        version = existing_tag.reload.tag_versions.order(:version_no).last
+        expect(version.event_type).to eq('create')
+        expect(version.name).to eq('material_update_existing_no_history')
+        expect(version.category).to eq('material')
+        expect(version.created_by_user).to eq(member_user)
+      end
+
+      it 'backfills a create tag_version for an existing character tag without history' do
+        existing_tag =
+            Tag.create!(tag_name: TagName.create!(name: 'material_update_character_no_history'),
+                        category: :character)
+
+        expect(existing_tag.tag_versions).to be_empty
+
+        expect do
+          put "/materials/#{ material.id }", params: {
+            tag: 'material_update_character_no_history',
+            file: dummy_upload(filename: 'updated.png')
+          }
+        end.to change(TagVersion, :count).by(1)
+
+        expect(response).to have_http_status(:ok)
+
+        version = existing_tag.reload.tag_versions.order(:version_no).last
+        expect(version.event_type).to eq('create')
+        expect(version.name).to eq('material_update_character_no_history')
+        expect(version.category).to eq('character')
+        expect(version.created_by_user).to eq(member_user)
+      end
+
       it 'detaches the existing file without purging blob when url replaces file' do
         old_blob_id = material.file.blob.id
 
@@ -494,6 +580,7 @@ RSpec.describe 'Materials API', type: :request do
       it 'does not increase version for the same snapshot update' do
         MaterialVersionRecorder.record!(material:, event_type: :create,
                                         created_by_user: member_user)
+        TagVersioning.ensure_snapshot!(tag, created_by_user: member_user)
 
         expect do
           put "/materials/#{ material.id }", params: {
@@ -501,6 +588,8 @@ RSpec.describe 'Materials API', type: :request do
           }
         end.not_to change(MaterialVersion, :count)
 
+        expect(tag.reload.tag_versions.count).to eq(1)
+
         expect(response).to have_http_status(:ok)
         expect(material.reload.version_no).to eq(1)
       end

backend/spec/requests/posts_spec.rb

@@ -1,4 +1,5 @@
 require 'rails_helper'
+require 'base64'
 require 'set'
 
 include ActiveSupport::Testing::TimeHelpers
@@ -8,6 +9,11 @@ RSpec.describe 'Posts API', type: :request do
   # resized_thumbnail! が MiniMagick 依存でコケやすいので request spec ではスタブしとくのが無難。
   before do
     allow_any_instance_of(Post).to receive(:resized_thumbnail!).and_return(true)
+    allow(Post).to receive(:resized_thumbnail_attachment).and_return(
+      io: StringIO.new('dummy'),
+      filename: 'resized_thumbnail.jpg',
+      content_type: 'image/jpeg'
+    )
   end
 
   def create_nico_tag!(name)
@@ -19,6 +25,18 @@ RSpec.describe 'Posts API', type: :request do
     Rack::Test::UploadedFile.new(StringIO.new('dummy'), 'image/jpeg', original_filename: 'dummy.jpg')
   end
 
+  def real_thumbnail_upload
+    gif =
+        Base64.decode64(
+            'R0lGODdhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=')
+
+    Rack::Test::UploadedFile.new(
+      StringIO.new(gif),
+      'image/gif',
+      original_filename: 'thumbnail.gif'
+    )
+  end
+
   def post_write_params params = { }
     { parent_post_ids: '' }.merge(params)
   end
@@ -36,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,
@@ -127,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" }
@@ -696,6 +731,66 @@ RSpec.describe 'Posts API', type: :request do
       expect(json['tags'][0]).to have_key('name')
     end
 
+    it '201 when posting manually with a thumbnail' do
+      sign_in_as(member)
+      allow(Post).to receive(:resized_thumbnail_attachment).and_call_original
+
+      post '/posts', params: post_write_params(
+        title: 'thumbnail post',
+        url: 'https://example.com/thumbnail-post',
+        tags: 'spec_tag',
+        thumbnail: real_thumbnail_upload
+      )
+
+      expect(response).to have_http_status(:created)
+      post_record = Post.find(json.fetch('id'))
+      expect(post_record.thumbnail).to be_attached
+      expect(post_record.thumbnail.blob.content_type).to eq('image/jpeg')
+      expect { post_record.thumbnail.download }.not_to raise_error
+    end
+
+    it 'resizes the thumbnail before the create transaction begins' do
+      sign_in_as(member)
+
+      open_transactions = []
+      baseline_open_transactions = Post.connection.open_transactions
+      allow(Post).to receive(:resized_thumbnail_attachment) do |_upload|
+        open_transactions << Post.connection.open_transactions
+        { io: StringIO.new('dummy'),
+          filename: 'resized_thumbnail.jpg',
+          content_type: 'image/jpeg' }
+      end
+
+      post '/posts', params: post_write_params(
+        title: 'transaction post',
+        url: 'https://example.com/transaction-post',
+        tags: 'spec_tag',
+        thumbnail: dummy_upload
+      )
+
+      expect(response).to have_http_status(:created)
+      expect(open_transactions).to eq([baseline_open_transactions])
+    end
+
+    it 'returns 422 and does not create a post when thumbnail resize fails' do
+      sign_in_as(member)
+      allow(Post).to receive(:resized_thumbnail_attachment).and_raise(MiniMagick::Error)
+
+      expect {
+        post '/posts', params: post_write_params(
+          title: 'broken thumbnail post',
+          url: 'https://example.com/broken-thumbnail-post',
+          tags: 'spec_tag',
+          thumbnail: dummy_upload
+        )
+      }.not_to change(Post, :count)
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to include(
+        'thumbnail' => ['サムネイル画像の変換に失敗しました．']
+      )
+    end
+
     it '201 and creates post + tags when member and tags have aliases' do
       sign_in_as(member)
 
@@ -767,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!(

backend/spec/requests/preview_spec.rb

@@ -1,28 +1,46 @@
-require "rails_helper"
+require 'rails_helper'
 
 
-RSpec.describe "Preview", type: :request do
+RSpec.describe 'Preview', type: :request do
-  describe "GET /preview/title" do
+  describe 'GET /preview/title' do
-    it "401 unless logged in" do
+    it '401 unless logged in' do
       sign_out
-      get "/preview/title", params: { url: "example.com" }
+      get '/preview/title', params: { url: 'example.com' }
       expect(response).to have_http_status(:unauthorized)
     end
 
-    it "400 when url blank" do
+    it '403 when logged in as guest' do
-      sign_in_as(create(:user))
+      sign_in_as(create(:user, :guest))
-      get "/preview/title", params: { url: "" }
+      get '/preview/title', params: { url: 'example.com' }
+      expect(response).to have_http_status(:forbidden)
+    end
+
+    it '400 when url blank' do
+      sign_in_as(create(:user, :member))
+      get '/preview/title', params: { url: '' }
       expect(response).to have_http_status(:bad_request)
     end
 
-    it "returns parsed title (stubbing URI.open)" do
+    it 'returns parsed title' do
-      sign_in_as(create(:user))
+      sign_in_as(create(:user, :member))
-      fake_html = "<html><head><title>  Hello  </title></head></html>"
+      allow(Preview::ThumbnailFetcher)
-      allow(URI).to receive(:open).and_return(StringIO.new(fake_html))
+          .to receive(:title)
+          .with('example.com')
+          .and_return('Hello')
 
-      get "/preview/title", params: { url: "example.com" }
+      get '/preview/title', params: { url: 'example.com' }
       expect(response).to have_http_status(:ok)
-      expect(json["title"]).to eq("Hello")
+      expect(json['title']).to eq('Hello')
+    end
+
+    it '413 when fetched response is too large' do
+      sign_in_as(create(:user, :member))
+      allow(Preview::ThumbnailFetcher)
+          .to receive(:title)
+          .and_raise(Preview::HttpFetcher::ResponseTooLarge, '外部データが大きすぎます．')
+
+      get '/preview/title', params: { url: 'example.com' }
+      expect(response).to have_http_status(:payload_too_large)
     end
   end
 end

backend/spec/requests/tag_children_spec.rb

@@ -56,6 +56,17 @@ RSpec.describe "TagChildren", type: :request do
 
         expect(response).to have_http_status(:no_content)
       end
+
+      it 'returns 422 and does not create relation when the new link makes a cycle' do
+        TagImplication.create!(tag: parent, parent_tag: child)
+
+        expect {
+          do_request
+        }.not_to change(TagImplication, :count)
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(TagImplication.where(tag: child, parent_tag: parent)).not_to exist
+      end
     end
 
     context "when Tag.find raises (invalid ids)" do

backend/spec/requests/tags_spec.rb

@@ -581,6 +581,58 @@ RSpec.describe 'Tags API', type: :request do
         expect(response).to have_http_status(:ok)
         expect(wiki_page.reload.wiki_versions.count).to eq(before_wiki_version_count)
       end
+
+      it 'full update で旧名 alias が残った tag を PATCH で旧名へ戻せる' do
+        put "/tags/#{ tag.id }", params: {
+          name: 'patch_roundtrip_target',
+          category: 'general',
+          aliases: 'unko',
+          parent_tags: '',
+          deprecated: '0',
+        }
+
+        expect(response).to have_http_status(:ok)
+        expect(TagName.find_by!(name: 'spec_tag').canonical).to eq(tag.reload.tag_name)
+
+        patch "/tags/#{ tag.id }", params: { name: 'spec_tag' }
+
+        expect(response).to have_http_status(:ok)
+
+        tag.reload
+
+        expect(tag.name).to eq('spec_tag')
+        expect(tag.tag_name.canonical_id).to be_nil
+        expect(TagName.find_by!(name: 'patch_roundtrip_target').canonical).to eq(tag.tag_name)
+      end
+
+      it '別 tag の正規名には変更できない' do
+        wiki_page =
+            Wiki::Commit.create_content!(
+                tag_name: tag.tag_name,
+                body: 'patch collision wiki',
+                created_by_user: member_user,
+                message: 'init')
+
+        patch "/tags/#{ tag.id }", params: { name: 'unknown' }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(json.fetch('errors')).to include(
+          'name' => ['その名前は既に使はれてゐます．']
+        )
+
+        expect(tag.reload.name).to eq('spec_tag')
+        expect(tag.tag_name.aliases.map(&:name)).to contain_exactly('unko')
+        expect(wiki_page.reload.tag_name).to eq(tag.tag_name)
+      end
+
+      it 'system tag の name は変更できない' do
+        system_tag = Tag.bot
+
+        patch "/tags/#{ system_tag.id }", params: { name: 'patch_system_tag_renamed' }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(system_tag.reload.name).to eq('bot操作')
+      end
     end
   end
 
@@ -745,7 +797,17 @@ RSpec.describe 'Tags API', type: :request do
       )
       TagImplication.create!(tag: first, parent_tag: root_material)
       TagImplication.create!(tag: second, parent_tag: first)
-      TagImplication.create!(tag: first, parent_tag: second)
+      now = Time.current
+      TagImplication.insert_all!(
+        [
+          {
+            tag_id: first.id,
+            parent_tag_id: second.id,
+            created_at: now,
+            updated_at: now
+          }
+        ]
+      )
 
       get '/tags/with-depth', params: { parent: root_material.id }
 
@@ -1029,6 +1091,42 @@ RSpec.describe 'Tags API', type: :request do
         expect(versions.second.created_by_user_id).to eq(member_user.id)
       end
 
+      it '同じ tag の旧 alias へ戻しても rename できる' do
+        put "/tags/#{ tag.id }", params: {
+          name: 'put_roundtrip_b',
+          category: 'general',
+          aliases: 'unko',
+          parent_tags: '',
+          deprecated: '0',
+        }
+
+        expect(response).to have_http_status(:ok)
+
+        put "/tags/#{ tag.id }", params: {
+          name: 'spec_tag',
+          category: 'general',
+          aliases: 'unko',
+          parent_tags: '',
+          deprecated: '0',
+        }
+
+        expect(response).to have_http_status(:ok)
+
+        tag.reload
+
+        expect(tag.name).to eq('spec_tag')
+        expect(TagName.find_by!(name: 'put_roundtrip_b').canonical).to eq(tag.tag_name)
+        expect(tag.tag_name.aliases.map(&:name)).to contain_exactly('put_roundtrip_b', 'unko')
+        expect(tag.tag_name.aliases.map(&:name)).not_to include('spec_tag')
+        expect(alias_tn.reload.canonical).to eq(tag.tag_name)
+
+        version = tag.tag_versions.order(:version_no).last
+
+        expect(version.event_type).to eq('update')
+        expect(version.name).to eq('spec_tag')
+        expect(version.aliases.split).to contain_exactly('put_roundtrip_b', 'unko')
+      end
+
       it 'parent tag の snapshot も作成する' do
         old_parent = Tag.create!(
           tag_name: TagName.create!(name: 'put_snapshot_old_parent'),
@@ -1153,6 +1251,48 @@ RSpec.describe 'Tags API', type: :request do
         )
       end
 
+      it 'wiki を持つ tag を旧 alias へ戻しても wiki を新 canonical へ移す' do
+        wiki_page =
+            Wiki::Commit.create_content!(
+                tag_name: tag.tag_name,
+                body: 'wiki body before',
+                created_by_user: member_user,
+                message: 'init')
+
+        expect {
+          put "/tags/#{ tag.id }", params: {
+            name: 'put_wiki_roundtrip_b',
+            category: 'general',
+            aliases: 'unko',
+            parent_tags: '',
+            deprecated: '0',
+          }
+
+          put "/tags/#{ tag.id }", params: {
+            name: 'spec_tag',
+            category: 'general',
+            aliases: 'unko',
+            parent_tags: '',
+            deprecated: '0',
+          }
+        }
+            .to change(TagVersion, :count).by(3)
+            .and change(WikiVersion, :count).by(2)
+
+        expect(response).to have_http_status(:ok)
+
+        tag.reload
+
+        expect(wiki_page.reload.tag_name).to eq(tag.tag_name)
+        expect(TagName.find_by!(name: 'put_wiki_roundtrip_b').wiki_page).to be_nil
+        expect(TagName.find_by!(name: 'put_wiki_roundtrip_b').canonical).to eq(tag.tag_name)
+
+        versions = wiki_page.wiki_versions.order(:version_no).last(2)
+
+        expect(versions.map(&:event_type)).to eq(['update', 'update'])
+        expect(versions.map(&:title)).to eq(['put_wiki_roundtrip_b', 'spec_tag'])
+      end
+
       it '別名を他 tag から奪った場合、奪はれた側の tag version も作成する' do
         old_owner = Tag.create!(
           tag_name: TagName.create!(name: 'put_alias_old_owner'),
@@ -1191,9 +1331,49 @@ RSpec.describe 'Tags API', type: :request do
         expect(old_owner_versions.second.aliases.split).not_to include('put_stolen_alias')
       end
 
-      it 'parent_tags に指定すると循環する tag は 422 にする' do
+      it '別 tag の alias 名を rename で奪へる' do
-        pending '#332 で対応予定'
+        old_owner = Tag.create!(
+          tag_name: TagName.create!(name: 'put_alias_collision_owner'),
+          category: :general
+        )
+        stolen_alias = TagName.create!(
+          name: 'put_alias_collision_name',
+          canonical: old_owner.tag_name
+        )
+        wiki_page =
+            Wiki::Commit.create_content!(
+                tag_name: tag.tag_name,
+                body: 'put collision wiki',
+                created_by_user: member_user,
+                message: 'init')
 
+        put "/tags/#{ tag.id }", params: {
+          name: 'put_alias_collision_name',
+          category: 'general',
+          aliases: 'unko',
+          parent_tags: '',
+          deprecated: '0',
+        }
+
+        expect(response).to have_http_status(:ok)
+
+        tag.reload
+        old_owner.reload
+        stolen_alias.reload
+
+        expect(tag.name).to eq('put_alias_collision_name')
+        expect(stolen_alias.canonical_id).to be_nil
+        expect(TagName.find_by!(name: 'spec_tag').canonical).to eq(tag.tag_name)
+        expect(old_owner.tag_name.aliases.map(&:name)).not_to include('put_alias_collision_name')
+
+        old_owner_versions = old_owner.tag_versions.order(:version_no)
+
+        expect(old_owner_versions.last.event_type).to eq('update')
+        expect(old_owner_versions.last.aliases.split).not_to include('put_alias_collision_name')
+        expect(wiki_page.reload.tag_name).to eq(tag.tag_name)
+      end
+
+      it 'parent_tags に指定すると循環する tag は 422 にする' do
         child = Tag.create!(
           tag_name: TagName.create!(name: 'put_cycle_child'),
           category: :general

backend/spec/requests/user_settings_spec.rb

@@ -0,0 +1,98 @@
+require 'rails_helper'
+
+RSpec.describe 'user settings', type: :request do
+  describe 'GET /users/settings' do
+    it 'requires a current user' do
+      sign_out
+
+      get '/users/settings'
+
+      expect(response).to have_http_status(:unauthorized)
+    end
+
+    it 'returns defaults and creates a missing settings row' do
+      user = create(:user)
+      sign_in_as(user)
+
+      expect {
+        get '/users/settings'
+      }.to change(Setting, :count).by(1)
+
+      expect(response).to have_http_status(:ok)
+      expect(json).to eq(
+          'theme' => 'system',
+          'auto_fetch_title' => 'manual',
+          'auto_fetch_thumbnail' => 'manual',
+          'wiki_editor_mode' => 'split')
+      expect(user.reload.setting).to be_present
+    end
+  end
+
+  describe 'PATCH /users/settings' do
+    it 'requires a current user' do
+      sign_out
+
+      patch '/users/settings', params: { theme: 'dark' }, as: :json
+
+      expect(response).to have_http_status(:unauthorized)
+    end
+
+    it 'updates multiple typed settings at once' do
+      user = create(:user)
+      sign_in_as(user)
+
+      patch '/users/settings',
+            params: {
+              theme: 'dark',
+              auto_fetch_title: 'auto',
+              auto_fetch_thumbnail: 'off',
+              wiki_editor_mode: 'preview' },
+            as: :json
+
+      expect(response).to have_http_status(:ok)
+      expect(json).to include(
+          'theme' => 'dark',
+          'auto_fetch_title' => 'auto',
+          'auto_fetch_thumbnail' => 'off',
+          'wiki_editor_mode' => 'preview')
+      expect(user.reload.setting).to have_attributes(
+          theme: 'dark',
+          auto_fetch_title: 'auto',
+          auto_fetch_thumbnail: 'off',
+          wiki_editor_mode: 'preview')
+    end
+
+    it 'does not treat Rails parameter wrapping as an editable setting' do
+      user = create(:user)
+      sign_in_as(user)
+
+      patch '/users/settings',
+            params: { theme: 'light', user_setting: { theme: 'dark' } },
+            as: :json
+
+      expect(response).to have_http_status(:ok)
+      expect(user.reload.setting.theme).to eq('light')
+    end
+
+    it 'returns validation_error for type mismatches' do
+      sign_in_as(create(:user))
+
+      patch '/users/settings', params: { theme: 1 }, as: :json
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json).to include('type' => 'validation_error')
+      expect(json.fetch('errors')).to include(
+          'theme' => ['値の型が不正です．'])
+    end
+
+    it 'returns validation_error for invalid enum values' do
+      sign_in_as(create(:user))
+
+      patch '/users/settings', params: { theme: 'neon' }, as: :json
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json).to include('type' => 'validation_error')
+      expect(json.fetch('errors').fetch('theme')).to be_present
+    end
+  end
+end

backend/spec/requests/user_theme_slots_spec.rb

@@ -0,0 +1,104 @@
+require 'rails_helper'
+
+RSpec.describe 'user theme slots', type: :request do
+  describe 'GET /users/theme_slots' do
+    it 'requires a current user' do
+      sign_out
+
+      get '/users/theme_slots'
+
+      expect(response).to have_http_status(:unauthorized)
+    end
+
+    it 'returns only the current user slots in stable order' do
+      user = create(:user)
+      other_user = create(:user)
+      sign_in_as(user)
+      UserThemeSlot.create!(user:, base_theme: 'light', slot_no: 2, tokens: { 'a' => 1 })
+      UserThemeSlot.create!(user:, base_theme: 'dark', slot_no: 1, tokens: { 'b' => 2 })
+      UserThemeSlot.create!(user: other_user,
+                            base_theme: 'dark',
+                            slot_no: 3,
+                            tokens: { 'c' => 3 })
+
+      get '/users/theme_slots'
+
+      expect(response).to have_http_status(:ok)
+      expect(json.map { |slot| [slot.fetch('base_theme'), slot.fetch('slot_no')] }).to eq(
+          [['dark', 1], ['light', 2]])
+      expect(json.map { |slot| slot.fetch('tokens') }).to eq(
+          [{ 'b' => 2 }, { 'a' => 1 }])
+    end
+  end
+
+  describe 'PUT /users/theme_slots/:base_theme/:slot_no' do
+    it 'requires a current user' do
+      sign_out
+
+      put '/users/theme_slots/light/1',
+          params: { tokens: { background: '0 0% 100%' } },
+          as: :json
+
+      expect(response).to have_http_status(:unauthorized)
+    end
+
+    it 'creates a theme slot' do
+      user = create(:user)
+      sign_in_as(user)
+
+      expect {
+        put '/users/theme_slots/light/1',
+            params: { tokens: { background: '0 0% 100%', tagColours: { nico: '#ffffff' } } },
+            as: :json
+      }.to change(UserThemeSlot, :count).by(1)
+
+      expect(response).to have_http_status(:ok)
+      expect(json).to include('base_theme' => 'light', 'slot_no' => 1)
+      expect(json.fetch('tokens')).to include(
+          'background' => '0 0% 100%',
+          'tagColours' => { 'nico' => '#ffffff' })
+      expect(user.theme_slots.find_by!(base_theme: 'light', slot_no: 1).tokens).to include(
+          'background' => '0 0% 100%')
+    end
+
+    it 'updates an existing theme slot instead of creating a duplicate' do
+      user = create(:user)
+      sign_in_as(user)
+      UserThemeSlot.create!(user:, base_theme: 'dark', slot_no: 2, tokens: { 'old' => true })
+
+      expect {
+        put '/users/theme_slots/dark/2',
+            params: { tokens: { background: '222.2 84% 4.9%' } },
+            as: :json
+      }.not_to change(UserThemeSlot, :count)
+
+      expect(response).to have_http_status(:ok)
+      expect(user.theme_slots.find_by!(base_theme: 'dark', slot_no: 2).tokens).to eq(
+          'background' => '222.2 84% 4.9%')
+    end
+
+    it 'rejects invalid path parameters and token shapes' do
+      sign_in_as(create(:user))
+
+      put '/users/theme_slots/system/4',
+          params: { tokens: 'not-object' },
+          as: :json
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to include(
+          'base_theme' => ['値が不正です．'])
+    end
+
+    it 'rejects non-object tokens for valid slots' do
+      sign_in_as(create(:user))
+
+      put '/users/theme_slots/light/1',
+          params: { tokens: 'not-object' },
+          as: :json
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to include(
+          'tokens' => ['JSON object で指定してください．'])
+    end
+  end
+end

backend/spec/services/preview/http_fetcher_spec.rb

@@ -0,0 +1,23 @@
+require 'rails_helper'
+
+RSpec.describe Preview::HttpFetcher do
+  describe '.fetch' do
+    it 'raises FetchFailed when redirect location is invalid' do
+      redirect = Net::HTTPFound.new('1.1', '302', 'Found')
+      redirect['location'] = 'http://[invalid'
+
+      allow(Preview::UrlSafety).to receive(:validate)
+          .with('https://example.com/page')
+          .and_return([URI.parse('https://example.com/page'), ['203.0.113.10']])
+      allow(described_class).to receive(:request)
+          .and_return(redirect)
+      allow(Rails.logger).to receive(:warn)
+
+      expect {
+        described_class.fetch('https://example.com/page')
+      }.to raise_error(Preview::HttpFetcher::FetchFailed)
+      expect(Rails.logger).to have_received(:warn)
+          .with(/invalid_redirect_location/)
+    end
+  end
+end

backend/spec/services/preview/thumbnail_fetcher_spec.rb

@@ -0,0 +1,51 @@
+require 'rails_helper'
+
+RSpec.describe Preview::ThumbnailFetcher do
+  describe '.fetch' do
+    it 'rejects svg thumbnails' do
+      page = Preview::HttpFetcher::Response.new(
+          '<meta property="og:image" content="https://example.com/thumb.svg">',
+          'text/html',
+          'https://example.com/page')
+      svg = Preview::HttpFetcher::Response.new(
+          '<svg></svg>',
+          'image/svg+xml',
+          'https://example.com/thumb.svg')
+
+      allow(Preview::UrlSafety).to receive(:validate)
+          .and_return([URI.parse('https://example.com/page'), ['203.0.113.10']])
+      allow(Preview::HttpFetcher).to receive(:fetch)
+          .with('https://example.com/page', max_bytes: described_class::HTML_MAX_BYTES)
+          .and_return(page)
+      allow(Preview::HttpFetcher).to receive(:fetch)
+          .with('https://example.com/thumb.svg')
+          .and_return(svg)
+
+      expect {
+        described_class.fetch('https://example.com/page')
+      }.to raise_error(Preview::ThumbnailFetcher::GenerationFailed)
+    end
+
+    it 'accepts allowed image content type with parameters' do
+      page = Preview::HttpFetcher::Response.new(
+          '<meta property="og:image" content="https://example.com/thumb.jpg">',
+          'text/html',
+          'https://example.com/page')
+      image = Preview::HttpFetcher::Response.new(
+          'jpeg-bytes',
+          'image/jpeg; charset=binary',
+          'https://example.com/thumb.jpg')
+
+      allow(Preview::UrlSafety).to receive(:validate)
+          .and_return([URI.parse('https://example.com/page'), ['203.0.113.10']])
+      allow(Preview::HttpFetcher).to receive(:fetch)
+          .with('https://example.com/page', max_bytes: described_class::HTML_MAX_BYTES)
+          .and_return(page)
+      allow(Preview::HttpFetcher).to receive(:fetch)
+          .with('https://example.com/thumb.jpg')
+          .and_return(image)
+
+      expect(described_class.fetch('https://example.com/page')).to eq('jpeg-bytes')
+    end
+  end
+end

backend/spec/services/preview/url_safety_spec.rb

@@ -0,0 +1,15 @@
+require 'rails_helper'
+
+RSpec.describe Preview::UrlSafety do
+  describe '.validate' do
+    it 'raises UnsafeUrl when DNS resolution fails' do
+      allow(Resolv).to receive(:getaddresses)
+          .with('missing.example')
+          .and_raise(Resolv::ResolvError)
+
+      expect {
+        described_class.validate('https://missing.example')
+      }.to raise_error(Preview::UrlSafety::UnsafeUrl)
+    end
+  end
+end

backend/spec/tasks/nico_export_spec.rb

@@ -62,7 +62,7 @@ RSpec.describe 'nico:export' do
 
     it 'deduplicates video ids' do
       create_post('https://www.nicovideo.jp/watch/sm12345')
-      create_post('https://www.nicovideo.jp/watch/sm12345?from=1')
+      create_post('https://sp.nicovideo.jp/watch/sm12345')
 
       expect(Open3).to receive(:capture3) do |_env, *args, **_kwargs|
         expect(args.drop(3)).to eq(['sm12345'])

frontend/AGENTS.md

@@ -118,23 +118,455 @@ 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.
 
-## TSX formatting
+## TypeScript and TSX formatting
 
+- The delimiter-placement and line-breaking rules in this section apply to
+  both plain TypeScript `.ts` and TSX `.tsx`, unless a bullet explicitly says
+  it is JSX- or React-specific.
 - Preserve compact TSX expression shapes such as inline ternary branches and
   closing `</div>)` forms when nearby code uses them.
+- Treat TypeScript and TSX formatting rules as hard constraints, not
+  preferences. Before finishing a TypeScript or TSX edit, inspect the edited
+  hunks for closing `)`, `]`, and `}` placement and fix violations instead of
+  relying on formatter defaults.
+- After every TypeScript or 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 TypeScript or TSX hunk violates these local
+  formatting rules.
+- The TypeScript/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-specific self-review must confirm there are no common Prettier-style
+  React component declarations with a multi-line destructured parameter.
+- The TypeScript/TSX self-review must confirm multi-line function declaration
+  parameter `)` placement follows the detailed parameter-list rules below.
+- The TypeScript/TSX self-review must confirm call-expression `)` is never at
+  the beginning of a line.
+- The TypeScript/TSX self-review must confirm
+  object/type/import/destructuring `}` is not at the beginning of a line.
+- The TypeScript/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 TypeScript/TSX self-review must confirm array `]` is not at the
+  beginning of a line.
+- The TSX-specific self-review must confirm JSX closing markers and closing
+  parentheses keep the surrounding compact style.
+- The TypeScript/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. Unless a subsection explicitly
+mentions JSX, it applies equally to `.ts` and `.tsx`.
+
+#### 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,16 +1,31 @@
-import { AnimatePresence, LayoutGroup, motion } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
+import { Fragment, useEffect, useMemo, useState } from 'react'
 import { BrowserRouter,
 	 Navigate,
 	 Route,
 	 Routes,
 	 useLocation } from 'react-router-dom'
 
+import DevModeWatermark from '@/components/DevModeWatermark'
 import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
+import { applyClientAnimationMode,
+	 applyClientAppearance,
+	 type ClientAnimationMode,
+	 fetchUserThemeSlots,
+	 fetchUserSettings,
+	 getClientThemeMode,
+	 hasStoredClientThemeSelection,
+	 normaliseUserThemeSlots,
+	 setCachedUserThemeSlots,
+	 seedClientThemeMode } from '@/lib/settings'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
+import { UnsavedChangesGuardProvider } from '@/lib/useUnsavedChangesGuard'
+
+import { KeyboardShortcutsProvider } from '@/lib/useKeyboardShortcuts'
 import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
 import MaterialBasePage from '@/pages/materials/MaterialBasePage'
 import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
@@ -26,6 +41,9 @@ import NotFound from '@/pages/NotFound'
 import TOSPage from '@/pages/TOSPage.mdx'
 import PostDetailPage from '@/pages/posts/PostDetailPage'
 import PostHistoryPage from '@/pages/posts/PostHistoryPage'
+import PostImportResultPage from '@/pages/posts/PostImportResultPage'
+import PostImportReviewPage from '@/pages/posts/PostImportReviewPage'
+import PostImportSourcePage from '@/pages/posts/PostImportSourcePage'
 import PostListPage from '@/pages/posts/PostListPage'
 import PostNewPage from '@/pages/posts/PostNewPage'
 import PostSearchPage from '@/pages/posts/PostSearchPage'
@@ -47,17 +65,63 @@ import type { Dispatch, FC, SetStateAction } from 'react'
 import type { User } from '@/types'
 
 
-const RouteTransitionWrapper = ({ user, setUser }: {
+const RouteTransitionWrapper = ({ animationMode, user, setUser }: {
+    animationMode: ClientAnimationMode
     user:     User | null
     setUser:  Dispatch<SetStateAction<User | null>> }) => {
   const location = useLocation ()
 
+  if (animationMode === 'off')
+    {
+      return (
+	  <Routes location={location}>
+	    <Route path="/" element={<Navigate to="/posts" replace/>}/>
+	    <Route path="/posts" element={<PostListPage/>}/>
+	    <Route path="/posts/new" element={<PostNewPage user={user}/>}/>
+	    <Route path="/posts/import" element={<PostImportSourcePage user={user}/>}/>
+	    <Route path="/posts/import/:sessionId/review" element={<PostImportReviewPage user={user}/>}/>
+	    <Route path="/posts/import/:sessionId/result" element={<PostImportResultPage user={user}/>}/>
+	    <Route path="/posts/search" element={<PostSearchPage/>}/>
+	    <Route path="/posts/:id" element={<PostDetailRoute user={user}/>}/>
+	    <Route path="/posts/changes" element={<PostHistoryPage/>}/>
+	    <Route path="/tags" element={<TagListPage/>}/>
+	    <Route path="/tags/:id" element={<TagDetailPage/>}/>
+	    <Route path="/tags/:id/deerjikists" element={<DeerjikistDetailPage/>}/>
+	    <Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
+	    <Route path="/nico/tags" element={<NicoTagListPage user={user}/>}/>
+	    <Route path="/tags/changes" element={<TagHistoryPage/>}/>
+	    <Route path="/theatres/:id" element={<TheatreDetailPage user={user}/>}/>
+	    <Route path="/materials" element={<MaterialBasePage/>}>
+	      <Route index element={<MaterialListPage/>}/>
+	      <Route path="changes" element={<MaterialHistoryPage/>}/>
+	      <Route path="new" element={<MaterialNewPage/>}/>
+	      <Route path="suppressions" element={<MaterialSyncSuppressionsPage/>}/>
+	      <Route path=":id" element ={<MaterialDetailPage/>}/>
+	    </Route>
+	    <Route path="/wiki" element={<WikiSearchPage/>}/>
+	    <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
+	    <Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>
+	    <Route path="/wiki/:id/edit" element={<WikiEditPage user={user}/>}/>
+	    <Route path="/wiki/:id/diff" element={<WikiDiffPage/>}/>
+	    <Route path="/wiki/changes" element={<WikiHistoryPage/>}/>
+	    <Route path="/users/settings" element={<SettingPage user={user} setUser={setUser}/>}/>
+	    <Route path="/settings" element={<Navigate to="/users/settings" replace/>}/>
+	    <Route path="/tos" element={<TOSPage/>}/>
+	    <Route path="/gekanator" element={<GekanatorPage user={user}/>}/>
+	    <Route path="/more" element={<MorePage/>}/>
+	    <Route path="*" element={<NotFound/>}/>
+	  </Routes>)
+    }
+
   return (
       <AnimatePresence mode="wait">
 	<Routes location={location}>
 	  <Route path="/" element={<Navigate to="/posts" replace/>}/>
 	  <Route path="/posts" element={<PostListPage/>}/>
 	  <Route path="/posts/new" element={<PostNewPage user={user}/>}/>
+	  <Route path="/posts/import" element={<PostImportSourcePage user={user}/>}/>
+	  <Route path="/posts/import/:sessionId/review" element={<PostImportReviewPage user={user}/>}/>
+	  <Route path="/posts/import/:sessionId/result" element={<PostImportResultPage user={user}/>}/>
 	  <Route path="/posts/search" element={<PostSearchPage/>}/>
 	  <Route path="/posts/:id" element={<PostDetailRoute user={user}/>}/>
 	  <Route path="/posts/changes" element={<PostHistoryPage/>}/>
@@ -102,6 +166,37 @@ const PostDetailRoute = ({ user }: { user: User | null }) => {
 const App: FC = () => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
+  const behaviourSettings = useClientBehaviourSettings ()
+  const animationMode = behaviourSettings.animation ?? 'normal'
+  const LayoutWrapper = animationMode === 'off' ? Fragment : LayoutGroup
+
+  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 (() => {
+    applyClientAnimationMode (animationMode)
+  }, [animationMode])
 
   useEffect (() => {
     const createUser = async () => {
@@ -136,6 +231,30 @@ const App: FC = () => {
       createUser ()
   }, [])
 
+  useEffect (() => {
+    if (!(user))
+      return
+
+    void (async () => {
+	try
+	{
+	  const [settings, themeSlots] = await Promise.all ([
+	      fetchUserSettings (),
+	      fetchUserThemeSlots (),
+	  ])
+	  const storedThemeSlots = normaliseUserThemeSlots (themeSlots)
+	  setCachedUserThemeSlots (storedThemeSlots)
+	  if (!(hasStoredClientThemeSelection ()))
+	    seedClientThemeMode (settings.theme)
+	  applyClientAppearance ()
+	}
+      catch
+      {
+	return
+      }
+    }) ()
+  }, [user])
+
   switch (status)
   {
   case 503:
@@ -145,20 +264,37 @@ const App: FC = () => {
   return (
       <>
 	<RouteBlockerOverlay/>
+	{import.meta.env.DEV && <DevModeWatermark/>}
 
 	<BrowserRouter>
 	  <DialogueProvider>
-	    <LayoutGroup>
+	    <UnsavedChangesGuardProvider>
-	      <motion.div
+	      <KeyboardShortcutsProvider>
-		  layout="position"
+	      <MotionConfig
-		  transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+		  reducedMotion={
-		  className="flex flex-col h-dvh w-full overflow-y-hidden">
+		      animationMode === 'normal'
-		<TopNav user={user}/>
+		      ? 'never'
-		<RouteTransitionWrapper user={user} setUser={setUser}/>
+		      : animationMode === 'reduced'
-	      </motion.div>
+			? 'user'
-	    </LayoutGroup>
+			: 'always'
+		  }>
+		<LayoutWrapper>
+		  <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
+			animationMode={animationMode}
+			user={user}
+			setUser={setUser}/>
+		  </motion.div>
+		</LayoutWrapper>
+	      </MotionConfig>
 
-	    <Toaster/>
+	      <Toaster/>
+	      </KeyboardShortcutsProvider>
+	    </UnsavedChangesGuardProvider>
 	  </DialogueProvider>
 	</BrowserRouter>
       </>)

frontend/src/components/DevModeWatermark.tsx

@@ -0,0 +1,46 @@
+import nikumaru from '@/assets/fonts/nikumaru.otf'
+
+import type { FC } from 'react'
+
+
+const ROW_COUNT = 8
+const COLUMN_COUNT = 12
+
+
+const DevModeWatermark: FC = () => {
+  return (
+      <div
+	  aria-hidden="true"
+	  className="pointer-events-none select-none fixed inset-0 overflow-hidden z-0">
+	<style>{`
+	  @font-face {
+	    font-family: 'Nikumaru';
+	    src: url(${nikumaru}) format('opentype');
+	  }
+	`}</style>
+	<div className="absolute -inset-32 flex flex-col justify-center gap-12 py-48">
+	  {Array.from ({ length: ROW_COUNT }, (_, rowIndex) => (
+	      <div
+		  key={rowIndex}
+		  className={
+		      'flex min-h-32 items-center gap-12 '
+		      + (rowIndex % 2 === 0 ? 'translate-x-0' : 'translate-x-32')
+		  }>
+		{Array.from ({ length: COLUMN_COUNT }, (_, columnIndex) => (
+		    <span
+			key={columnIndex}
+			className={
+			    'whitespace-nowrap text-3xl font-bold '
+			    + 'tracking-[0.3em] text-neutral-950/5 '
+			    + 'dark:text-white/10'
+			}
+			style={{ fontFamily: 'Nikumaru' }}>
+		      開発モード
+		    </span>))}
+	      </div>))}
+	</div>
+      </div>)
+}
+
+
+export default DevModeWatermark

frontend/src/components/DraggableDroppableTagRow.test.tsx

@@ -0,0 +1,75 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import DraggableDroppableTagRow from '@/components/DraggableDroppableTagRow'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const dndKit = vi.hoisted (() => ({
+  useDraggable: vi.fn (),
+  useDroppable: vi.fn (),
+}))
+
+vi.mock ('@dnd-kit/core', () => dndKit)
+
+const tag = buildTag ({ id: 7, name: 'ドラッグ元', postCount: 3 })
+
+const renderRow = (activeDndId?: string) => {
+  renderWithProviders (
+      <DraggableDroppableTagRow
+          activeDndId={activeDndId}
+          tag={tag}
+          nestLevel={2}
+          pathKey="cat-general-7"
+          suppressClickRef={{ current: false }}/>,
+  )
+}
+
+const tagBody = (): HTMLElement => {
+  const link = document.querySelector<HTMLElement> ('a[title="ドラッグ元"]')
+
+  if (link == null)
+    throw new Error ('tag link not found')
+
+  const body = link.closest ('div')
+
+  if (body == null)
+    throw new Error ('tag body not found')
+
+  return body
+}
+
+describe ('DraggableDroppableTagRow', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    dndKit.useDraggable.mockReturnValue ({
+        attributes: { 'aria-describedby': 'drag-source' },
+        listeners:  { onPointerDown: vi.fn () },
+        setNodeRef: vi.fn (),
+        transform:  null })
+    dndKit.useDroppable.mockReturnValue ({
+        isOver:     false,
+        setNodeRef: vi.fn () })
+  })
+
+  it ('passes dndId through draggable data for active-row tracking', () => {
+    renderRow ()
+
+    expect (dndKit.useDraggable).toHaveBeenCalledWith (
+        expect.objectContaining ({
+            id:   'tag-node:cat-general-7',
+            data: expect.objectContaining ({
+                dndId:     'tag-node:cat-general-7',
+                nestLevel: 2,
+                tagId:     7 }) }))
+  })
+
+  it ('hides only the active drag source from the explicit active dnd id', () => {
+    renderRow ('tag-node:cat-general-7')
+    expect (tagBody ()).toHaveStyle ({ visibility: 'hidden' })
+  })
+
+  it ('keeps inactive tag rows visible while another tag is dragged', () => {
+    renderRow ('tag-node:other')
+    expect (tagBody ()).toHaveStyle ({ visibility: 'visible' })
+  })
+})

frontend/src/components/DraggableDroppableTagRow.tsx

@@ -4,6 +4,8 @@ import { motion } from 'framer-motion'
 import { useRef } from 'react'
 
 import TagLink from '@/components/TagLink'
+import { clientAnimationTransition } from '@/lib/clientAnimation'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
 
 import type { CSSProperties, FC, MutableRefObject } from 'react'
@@ -11,6 +13,7 @@ import type { CSSProperties, FC, MutableRefObject } from 'react'
 import type { Tag } from '@/types'
 
 type Props = {
+    activeDndId?:      string
     tag:              Tag
     nestLevel:        number
     pathKey:          string
@@ -19,7 +22,21 @@ type Props = {
     sp?:              boolean }
 
 
-const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }) => {
+const DraggableDroppableTagRow: FC<Props> = ({
+    activeDndId,
+    tag,
+    nestLevel,
+    pathKey,
+    parentTagId,
+    suppressClickRef,
+    sp,
+}) => {
+  const behaviourSettings = useClientBehaviourSettings ()
+  const animationMode = behaviourSettings.animation ?? 'normal'
+  const layoutTransition = clientAnimationTransition (
+      animationMode,
+      { normal: { duration: .2, ease: 'easeOut' as const } },
+  )
   const dndId = `tag-node:${ pathKey }`
 
   const downPosRef = useRef<{ x: number; y: number } | null> (null)
@@ -45,18 +62,23 @@ const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTa
   const { attributes,
 	  listeners,
 	  setNodeRef: setDragRef,
-	  transform,
+	  transform } = useDraggable ({ id:    dndId,
-	  isDragging: dragging } = useDraggable ({ id:    dndId,
+					data:  { kind:   'tag',
-						   data:  { kind:   'tag',
+						 dndId,
-							    tagId:  tag.id,
+						 tagId:  tag.id,
-							    parentTagId } })
+						 parentTagId,
+						 nestLevel } })
 
   const { setNodeRef: setDropRef, isOver: over } = useDroppable ({
       id:   dndId,
       data: { kind: 'tag', tagId: tag.id } })
 
+  const activeDragging = activeDndId === dndId
   const style: CSSProperties = { transform:   CSS.Translate.toString (transform),
-				 visibility:  dragging ? 'hidden' : 'visible' }
+				 visibility:  activeDragging ? 'hidden' : 'visible' }
+  const innerClassName = cn (
+      'inline-flex min-w-0 max-w-full items-baseline overflow-hidden',
+      sp && 'touch-pan-y')
 
   return (
       <div
@@ -69,12 +91,16 @@ const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTa
 	      return
 	    const dx = e.clientX - p.x
 	    const dy = e.clientY - p.y
+
 	    if (dx * dx + dy * dy >= 9)
 	      armEatNextClick ()
 	  }}
 	  onPointerUpCapture={() => {
 	    downPosRef.current = null
 	  }}
+	  onPointerCancelCapture={() => {
+	    downPosRef.current = null
+	  }}
 	  onClickCapture={e => {
 	    if (suppressClickRef.current)
 	      {
@@ -82,20 +108,36 @@ const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTa
 		e.stopPropagation ()
 	      }
 	  }}
-	  ref={node => {
+	  ref={setDropRef}
-	    setDragRef (node)
+	  className={cn (
-	    setDropRef (node)
+	      'min-w-0 max-w-full overflow-hidden rounded select-none',
-	  }}
+	      sp && 'touch-pan-y',
-	  style={style}
+	      over && 'ring-2 ring-offset-2')}
-	  className={cn ('rounded select-none', over && 'ring-2 ring-offset-2')}
+	  >
-	  {...attributes}
+	{activeDragging
-	  {...listeners}>
+	 ? (
-	<motion.div
+	    <div
-	    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+		ref={setDragRef}
-	    layoutId={`tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
+		style={style}
-	  <TagLink tag={tag} nestLevel={nestLevel}/>
+		className={innerClassName}
-	</motion.div>
+		{...attributes}
+		{...listeners}>
+	      <TagLink tag={tag} nestLevel={nestLevel}/>
+	    </div>)
+	 : (
+	    <motion.div
+		ref={setDragRef}
+		style={style}
+		className={innerClassName}
+		{...attributes}
+		{...listeners}
+		transition={{ layout: layoutTransition }}
+		layoutId={animationMode === 'off'
+		    ? undefined
+		    : `tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
+	      <TagLink tag={tag} nestLevel={nestLevel}/>
+	    </motion.div>)}
       </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 sidebarKey="materials" className="hidden md:block">
-	  <SidebarComponent>
+	  <div className="space-y-4">
-	    <div className="space-y-4">
+	    <MaterialFilterButtons
-	      <MaterialFilterButtons
+		materialFilter={materialFilter}
-		  materialFilter={materialFilter}
+		onChange={handleFilterChange}/>
-		  onChange={handleFilterChange}/>
+	    {isLoading && (
-	      {isLoading && (
+		<p className="text-sm text-neutral-500 dark:text-stone-400">読込中……</p>)}
-		  <p className="text-sm text-neutral-500 dark:text-stone-400">読込中……</p>)}
+	    {isError && (
-	      {isError && (
+		<p className="text-sm text-red-600 dark:text-red-300">
-		  <p className="text-sm text-red-600 dark:text-red-300">
+		  タグ一覧の取得に失敗しました．
-		    タグ一覧の取得に失敗しました．
+		</p>)}
-		  </p>)}
+	    {(!isLoading && !isError) && (
-	      {(!isLoading && !isError) && (
+		<ul>
-		  <ul>
+		  {renderDesktopTree (visibleRootTags)}
-		    {renderDesktopTree (visibleRootTags)}
+		</ul>)}
-		  </ul>)}
+	  </div>
-	    </div>
+	</SidebarComponent>
-	  </SidebarComponent>
-	</div>
       </>)
 }
 

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 tagsToStr = (tags: TagWithSections[]): string => {
-  const result: Tag[] = []
+  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 { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 
 import type { FC, RefObject } from 'react'
 
@@ -24,16 +26,19 @@ type Props = {
     onError?:           (data: unknown) => void }
 
 
-const PostEmbed: FC<Props> = ({
+const PostEmbed: FC<Props> = (
-    ref,
+    { ref,
-    post,
+      post,
-    onLoadComplete,
+      onLoadComplete,
-    onMetadataChange,
+      onMetadataChange,
-    onVideoReady,
+      onVideoReady,
-    onPlaybackChange,
+      onPlaybackChange,
-    onError,
+      onError },
-}) => {
+) => {
   const dialogue = useDialogue ()
+  const behaviourSettings = useClientBehaviourSettings ()
+  const embedAutoLoadMode = behaviourSettings.embedAutoLoad ?? 'auto'
+  const [manualLoadRequested, setManualLoadRequested] = useState (false)
   const [framed, setFramed] = useState (false)
   const [youtubePlayer, setYoutubePlayer] = useState<YouTubePlayer | null> (null)
   const niconicoVideoReadyRef = useRef (false)
@@ -105,6 +110,10 @@ const PostEmbed: FC<Props> = ({
     niconicoVideoReadyRef.current = false
   }, [post.url])
 
+  useEffect (() => {
+    setManualLoadRequested (false)
+  }, [embedAutoLoadMode, post.url])
+
   useEffect (() => {
     if (!(youtubePlayer) || !(onPlaybackChange))
       return
@@ -117,6 +126,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 +159,11 @@ const PostEmbed: FC<Props> = ({
 
       const [videoId] = mVideoId
 
+      if (embedAutoLoadMode === 'off')
+	return externalLink
+      if (shouldLoadEmbed === false)
+	return manualLoadControl
+
       return (
 	  <NicoViewer
 	      ref={ref}
@@ -150,6 +186,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 +200,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 +230,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 +248,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' } })
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
-    setSuggestions (data.filter (t => t.postCount > 0))
+	q: token,
-    setSuggestionsVsbl (suggestions.length > 0)
+	nico: '0' } })
+    const nextSuggestions = data.filter (t => t.postCount > 0)
+    setSuggestions (nextSuggestions)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   return (

frontend/src/components/PostList.tsx

@@ -3,6 +3,7 @@ import { useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
 import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'
 
@@ -16,6 +17,15 @@ type Props = { posts:     Post[]
 
 const PostList: FC<Props> = ({ posts, onClick }) => {
   const location = useLocation ()
+  const behaviourSettings = useClientBehaviourSettings ()
+  const thumbnailMode = behaviourSettings.thumbnailMode ?? 'normal'
+  const animationMode = behaviourSettings.animation ?? 'normal'
+  const cardLayoutTransition =
+      animationMode === 'off'
+      ? { duration: 0 }
+      : animationMode === 'reduced'
+	? { duration: .08, ease: 'linear' as const }
+	: { duration: .2, ease: 'easeOut' as const }
 
   const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)
 
@@ -39,7 +49,8 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
 		  }}>
 		<motion.div
 		    ref={cardRef}
-		    layoutId={layoutId}
+		    layout={animationMode === 'off' ? false : true}
+		    layoutId={animationMode === 'off' ? undefined : layoutId}
 		    className={cn ('w-full h-full overflow-hidden rounded-xl shadow',
 				   'transform-gpu will-change-transform',
 				   (post.childPosts ?? []).length > 0 && 'ring-4 ring-green-500',
@@ -54,22 +65,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' } }}>
+		    transition={{ layout: cardLayoutTransition }}>
-		  <img src={post.thumbnail || post.thumbnailBase || undefined}
+		  {thumbnailMode === 'off'
-		       alt={post.title || post.url}
+		   ? (
-		       title={post.title || post.url || undefined}
+		      <div className="flex h-full w-full items-center justify-center
-		       loading={i < 12 ? 'eager' : 'lazy'}
+				      bg-muted text-center text-xs text-muted-foreground">
-		       decoding="async"
+			サムネイルなし
-		       className="object-cover w-full h-full"/>
+		      </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/PostOriginalCreatedTimeField.tsx

@@ -2,10 +2,11 @@ import DateTimeField from '@/components/common/DateTimeField'
 import FormField from '@/components/common/FormField'
 import { Button } from '@/components/ui/button'
 
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 
 type Props = {
     disabled?:                boolean
+    labelAddon?:              ReactNode
     originalCreatedFrom:      string | null
     setOriginalCreatedFrom:   (x: string | null) => void
     originalCreatedBefore:    string | null
@@ -15,18 +16,25 @@ type Props = {
 
 const PostOriginalCreatedTimeField: FC<Props> = (
     { disabled,
+      labelAddon,
       originalCreatedFrom,
       setOriginalCreatedFrom,
       originalCreatedBefore,
       setOriginalCreatedBefore,
       errors }: Props) => (
-    <FormField label="オリジナルの作成日時" messages={errors}>
+    <FormField
+	label={
+	    <span className="flex items-center gap-2">
+	      <span>オリジナルの作成日時</span>
+	      {labelAddon}
+	    </span>}
+	messages={errors}>
       {({ describedBy, invalid }) => (
 	  <>
-	    <div className="my-1 flex">
+	    <div className="my-1 flex flex-col gap-2 sm:flex-row sm:items-start">
-	      <div className="w-80">
+	      <div className="min-w-0 flex-1">
 		<DateTimeField
-		    className="mr-2"
+		    className="w-full"
 		    disabled={disabled ?? false}
 		    aria-describedby={describedBy}
 		    aria-invalid={invalid}
@@ -49,6 +57,7 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 	      </div>
 	      <div>
 		<Button
+		    type="button"
 		    className="bg-gray-600 text-white rounded"
 		    disabled={disabled}
 		    onClick={() => {
@@ -59,10 +68,10 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 	      </div>
 	    </div>
 
-	    <div className="my-1 flex">
+	    <div className="my-1 flex flex-col gap-2 sm:flex-row sm:items-start">
-	      <div className="w-80">
+	      <div className="min-w-0 flex-1">
 		<DateTimeField
-		    className="mr-2"
+		    className="w-full"
 		    disabled={disabled}
 		    aria-describedby={describedBy}
 		    aria-invalid={invalid}
@@ -73,6 +82,7 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 	      </div>
 	      <div>
 		<Button
+		    type="button"
 		    className="bg-gray-600 text-white rounded"
 		    disabled={disabled}
 		    onClick={() => {

frontend/src/components/PrefetchLink.tsx

@@ -5,6 +5,8 @@ import { createPath, useNavigate } from 'react-router-dom'
 
 import { useOverlayStore } from '@/components/RouteBlockerOverlay'
 import { prefetchForURL } from '@/lib/prefetchers'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
+import { useUnsavedChangesGuard } from '@/lib/useUnsavedChangesGuard'
 import { cn } from '@/lib/utils'
 
 import type { AnchorHTMLAttributes, MouseEvent, TouchEvent } from 'react'
@@ -33,10 +35,20 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 
   const navigate = useNavigate ()
   const qc = useQueryClient ()
+  const behaviourSettings = useClientBehaviourSettings ()
+  const { confirmDiscardNavigation } = useUnsavedChangesGuard ()
+  const linkPreloadMode = behaviourSettings.linkPreload ?? 'intent'
+  const path = useMemo (
+      () => typeof to === 'string' ? to : createPath (to),
+      [to],
+  )
   const url = useMemo (() => {
-    const path = (typeof to === 'string') ? to : createPath (to)
+    return (new URL (path, window.location.origin)).toString ()
-    return (new URL (path, location.origin)).toString ()
+  }, [path])
-  }, [to])
+  const nextPathname = useMemo (
+      () => (new URL (path, window.location.origin)).pathname,
+      [path],
+  )
   const setOverlay = useOverlayStore (s => s.setActive)
 
   const doPrefetch = async () => {
@@ -54,11 +66,15 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 
   const handleMouseEnter = async (ev: MouseEvent<HTMLAnchorElement>) => {
     onMouseEnter?.(ev)
+    if (ev.defaultPrevented || linkPreloadMode !== 'intent')
+      return
     await doPrefetch ()
   }
 
   const handleTouchStart = async (ev: TouchEvent<HTMLAnchorElement>) => {
     onTouchStart?.(ev)
+    if (ev.defaultPrevented || linkPreloadMode !== 'intent')
+      return
     await doPrefetch ()
   }
 
@@ -77,6 +93,13 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 
       ev.preventDefault ()
 
+      if (nextPathname !== window.location.pathname)
+	{
+	  const confirmed = await confirmDiscardNavigation ()
+	  if (!(confirmed))
+	    return
+	}
+
       flushSync (() => {
 	setOverlay (true)
       })
@@ -99,7 +122,7 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 
   return (
       <a ref={ref}
-	 href={typeof to === 'string' ? to : createPath (to)}
+	 href={path}
 	 onMouseEnter={handleMouseEnter}
 	 onTouchStart={handleTouchStart}
 	 onClick={handleClick}

frontend/src/components/ResponsiveMarqueeText.tsx

@@ -0,0 +1,254 @@
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
+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 behaviourSettings = useClientBehaviourSettings ()
+  const animationMode = behaviourSettings.animation ?? 'normal'
+  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
+        && animationMode !== 'off'
+        && 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, animationMode, 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

@@ -1,11 +1,13 @@
 import { DndContext,
 	 DragOverlay,
+	 MeasuringStrategy,
 	 MouseSensor,
 	 TouchSensor,
+	 pointerWithin,
 	 useDroppable,
 	 useSensor,
 	 useSensors } from '@dnd-kit/core'
-import { restrictToWindowEdges } from '@dnd-kit/modifiers'
+import { restrictToWindowEdges, snapCenterToCursor } from '@dnd-kit/modifiers'
 import { useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -20,19 +22,29 @@ import SidebarComponent from '@/components/layout/SidebarComponent'
 import { toast } from '@/components/ui/use-toast'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { apiDelete, apiGet, apiPatch, apiPost } from '@/lib/api'
+import { clientAnimationTransition } from '@/lib/clientAnimation'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { dateString, originalCreatedAtString } from '@/lib/utils'
 
-import type { DragEndEvent } from '@dnd-kit/core'
+import type { CollisionDetection, 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 tagCollisionDetection: CollisionDetection = args => {
+  return pointerWithin (args)
+}
+
+const alwaysMeasureDroppables = {
+    droppable: { strategy: MeasuringStrategy.Always } } as const
 
 
 const renderTagTree = (
-    tag:              Tag,
+    activeDndId:       string | undefined,
+    tag:              TagWithSections,
     nestLevel:        number,
     path:             string,
     suppressClickRef: MutableRefObject<boolean>,
@@ -43,6 +55,7 @@ const renderTagTree = (
   const self = (
       <li key={key} className="mb-1">
 	<DraggableDroppableTagRow
+	    activeDndId={activeDndId}
 	    tag={tag}
 	    nestLevel={nestLevel}
 	    pathKey={key}
@@ -56,14 +69,21 @@ const renderTagTree = (
       ...((tag.children
 	   ?.sort ((a, b) => a.name < b.name ? -1 : 1)
 	   .flatMap (child =>
-	      renderTagTree (child, nestLevel + 1, key, suppressClickRef, tag.id, sp)))
+	      renderTagTree (
+		  activeDndId,
+		  child,
+		  nestLevel + 1,
+		  key,
+		  suppressClickRef,
+		  tag.id,
+		  sp)))
 	  ?? [])]
 }
 
-
 const isDescendant = (
-    root:     Tag,
+    root:     TagWithSections,
-    targetId: number): boolean => {
+    targetId: number,
+): boolean => {
   if (!(root.children))
     return false
 
@@ -81,8 +101,9 @@ const isDescendant = (
 
 const findTag = (
     byCat:  TagByCategory,
-    id:     number): Tag | undefined => {
+    id:     number,
-  const walk = (nodes: Tag[]): Tag | undefined => {
+): TagWithSections | undefined => {
+  const walk = (nodes: TagWithSections[]): TagWithSections | undefined => {
     for (const t of nodes)
       {
 	if (t.id === id)
@@ -125,6 +146,37 @@ const buildTagByCategory = (post: Post): TagByCategory => {
 }
 
 
+const buildFlatTagByCategory = (
+    byCategory: TagByCategory,
+): TagByCategory => {
+  const tagsTmp = { } as TagByCategory
+  const seen = new Set<number> ()
+
+  for (const category of CATEGORIES)
+    tagsTmp[category] = []
+
+  const visit = (tag: TagWithSections) => {
+    if (seen.has (tag.id))
+      return
+
+    seen.add (tag.id)
+    tagsTmp[tag.category].push ({ ...tag, children: [] })
+
+    for (const child of tag.children ?? [])
+      visit (child)
+  }
+
+  for (const category of CATEGORIES)
+    for (const tag of byCategory[category] ?? [])
+      visit (tag)
+
+  for (const category of CATEGORIES)
+    tagsTmp[category].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1)
+
+  return tagsTmp
+}
+
+
 const changeCategory = async (
     tagId:    number,
     category: Category): Promise<void> => {
@@ -143,14 +195,47 @@ const DropSlot = ({ cat }: { cat: Category }) => {
       </li>)
 }
 
+const EmptyCategoryDropSection = (
+    { cat, children }: { cat: Category
+			 children: ReactNode }) => {
+  const { setNodeRef, isOver: over } = useDroppable ({
+      id:   `slot:${ cat }`,
+      data: { kind: 'slot', cat } })
 
-type Props = { post: Post; sp?: boolean }
+  return (
+      <div ref={setNodeRef} className="my-3">
+	{children}
+	<ul>
+	  <li className="h-1">
+	    {over && <div className="h-0.5 w-full rounded bg-sky-400"/>}
+	  </li>
+	</ul>
+      </div>)
+}
 
 
-const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
+type Props = {
+    className?: string
+    post:       Post
+    sp?:        boolean }
+
+type ActiveTagDrag = {
+    dndId:       string
+    tagId:      number
+    nestLevel:  number }
+
+
+const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
   sp = Boolean (sp)
 
   const qc = useQueryClient ()
+  const behaviourSettings = useClientBehaviourSettings ()
+  const tagRelationDisplay = behaviourSettings.tagRelationDisplay ?? 'grouped'
+  const animationMode = behaviourSettings.animation ?? 'normal'
+  const layoutTransition = clientAnimationTransition (
+      animationMode,
+      { normal: { duration: .2, ease: 'easeOut' as const } },
+  )
 
   const baseTags = useMemo<TagByCategory> (() => {
     const tagsTmp = { } as TagByCategory
@@ -163,15 +248,20 @@ 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])
 
-  const [activeTagId, setActiveTagId] = useState<number | null> (null)
+  const [activeTagDrag, setActiveTagDrag] = useState<ActiveTagDrag | null> (null)
   const [dragging, setDragging] = useState (false)
   const [saving, setSaving] = useState (false)
   const [tags, setTags] = useState (baseTags)
+  const flatTagsByCategory = useMemo<TagByCategory> (
+      () => buildFlatTagByCategory (tags),
+      [tags],
+  )
+  const activeDndId = activeTagDrag?.dndId
 
   const suppressClickRef = useRef (false)
 
@@ -276,13 +366,23 @@ const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
   }, [baseTags])
 
   return (
-      <SidebarComponent>
+      <SidebarComponent sidebarKey="post-detail-tags" className={className}>
 	<TagSearch/>
 	<DndContext
 	    sensors={sensors}
+	    collisionDetection={tagCollisionDetection}
+	    measuring={alwaysMeasureDroppables}
 	    onDragStart={e => {
 	      if (e.active.data.current?.kind === 'tag')
-		setActiveTagId (e.active.data.current?.tagId ?? null)
+		{
+		  const tagId = e.active.data.current?.tagId
+		  const nestLevel = e.active.data.current?.nestLevel
+		  const dndId = e.active.data.current?.dndId
+		  setActiveTagDrag (
+		      tagId == null || nestLevel == null || dndId == null
+		      ? null
+		      : { dndId, tagId, nestLevel })
+		}
 	      setDragging (true)
 	      suppressClickRef.current = true
 	      document.body.style.userSelect = 'none'
@@ -293,38 +393,80 @@ const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
 		suppressClickRef.current = false}, { capture: true, once: true })
 	    }}
 	    onDragCancel={() => {
-	      setActiveTagId (null)
+	      setActiveTagDrag (null)
 	      setDragging (false)
 	      document.body.style.userSelect = ''
 	      suppressClickRef.current = false
 	    }}
 	    onDragEnd={async e => {
-	      setActiveTagId (null)
+	      setActiveTagDrag (null)
 	      setDragging (false)
 	      await onDragEnd (e)
 	      document.body.style.userSelect = ''
 	    }}
 	    modifiers={[restrictToWindowEdges]}>
-	  {CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && (
+	  {CATEGORIES.map ((cat: Category) => {
-	      <div className="my-3" key={cat}>
+	    const categoryTags =
+		tagRelationDisplay === 'grouped'
+		? (tags[cat] ?? [])
+		: (flatTagsByCategory[cat] ?? [])
+
+	    if (!(categoryTags.length > 0 || dragging))
+	      return null
+
+	    const sectionTitle = (
 		<SubsectionTitle>
 		  <motion.div
-		      layoutId={`tag-${ sp ? 'sp-' : '' }${ cat }`}
+		      layoutId={animationMode === 'off'
-		      transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
+			  ? undefined
+			  : `tag-${ sp ? 'sp-' : '' }${ cat }`}
+		      transition={{ layout: layoutTransition }}>
 		    {CATEGORY_NAMES[cat]}
 		  </motion.div>
-		</SubsectionTitle>
+		</SubsectionTitle>)
 
-		<ul>
+	    if (!(categoryTags.length > 0))
-		  {(tags[cat] ?? []).flatMap (tag => (
+	      return (
-		      renderTagTree (tag, 0, `cat-${ cat }`, suppressClickRef, undefined, sp)))}
+		  <EmptyCategoryDropSection cat={cat} key={cat}>
-		  <DropSlot cat={cat}/>
+		    {sectionTitle}
-		</ul>
+		  </EmptyCategoryDropSection>)
-	      </div>))}
+
+	    return (
+		<div className="my-3" key={cat}>
+		  {sectionTitle}
+		  <ul>
+		    {(tagRelationDisplay === 'grouped'
+		      ? (tags[cat] ?? []).flatMap (tag =>
+			    renderTagTree (
+				activeDndId,
+				tag,
+				0,
+				`cat-${ cat }`,
+				suppressClickRef,
+				undefined,
+				sp,
+			    ),
+			)
+		      : (flatTagsByCategory[cat] ?? []).map (tag => (
+			  <li key={`flat-${ cat }-${ tag.id }`} className="mb-1">
+			    <DraggableDroppableTagRow
+				activeDndId={activeDndId}
+				tag={tag}
+				nestLevel={0}
+				pathKey={`flat-${ cat }-${ tag.id }`}
+				suppressClickRef={suppressClickRef}
+				sp={sp}/>
+			  </li>)))}
+		    <DropSlot cat={cat}/>
+		  </ul>
+		</div>)
+	  })}
 	  {post && (
 	      <motion.div
-		  layoutId={`post-info-${ sp }`}
+		  layoutId={animationMode === 'off'
-		  transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
+		      ? undefined
+		      : `post-info-${ sp }`}
+		  transition={{ layout: layoutTransition }}>
 		<SectionTitle>情報</SectionTitle>
 		<ul>
 		  <li>Id.: {post.id}</li>
@@ -361,11 +503,14 @@ const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
 		</ul>
 	      </motion.div>)}
 
-	  <DragOverlay adjustScale={false}>
+	  <DragOverlay
+	      adjustScale={false}
+	      modifiers={[snapCenterToCursor]}
+	      dropAnimation={animationMode === 'off' ? null : undefined}>
 	    <div className="pointer-events-none">
-	      {activeTagId != null && (() => {
+	      {activeTagDrag != null && (() => {
-		const tag = findTag (tags, activeTagId)
+		const tag = findTag (tags, activeTagDrag.tagId)
-		return tag && <TagLink tag={tag}/>
+		return tag && <TagLink tag={tag} nestLevel={activeTagDrag.nestLevel}/>
 	      }) ()}
 	    </div>
 	  </DragOverlay>
@@ -373,4 +518,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 (
+  const colourStyle = {
-      `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
+      '--tag-link-colour': `var(--tag-colour-${ tag.category })`,
-      `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
+      '--tag-link-hover-colour': `var(--tag-colour-${ tag.category }-hover)`,
-  const linkClass = cn (
+      ...style,
-      spanClass,
+  } as CSSProperties
-      `hover:text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE - 200 }`,
+  const spanClass = 'tag-link-colour'
-      `dark:hover:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE - 200 }`)
+  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}>
+	      <span
-		{tag.matchedAlias}
+		  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

@@ -8,6 +8,8 @@ import SectionTitle from '@/components/common/SectionTitle'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { CATEGORIES } from '@/consts'
 import { apiGet } from '@/lib/api'
+import { clientAnimationTransition } from '@/lib/clientAnimation'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 
 import type { FC, MouseEvent } from 'react'
 
@@ -21,6 +23,13 @@ type Props = { posts:     Post[]
 
 const TagSidebar: FC<Props> = ({ posts, onClick }) => {
   const navigate = useNavigate ()
+  const behaviourSettings = useClientBehaviourSettings ()
+  const animationMode = behaviourSettings.animation ?? 'normal'
+  const animationsOff = animationMode === 'off'
+  const layoutTransition = clientAnimationTransition (
+      animationMode,
+      { normal: { duration: .2, ease: 'easeOut' as const } },
+  )
 
   const [tagsVsbl, setTagsVsbl] = useState (false)
   const [tags, setTags] = useState<TagByCategory> ({ })
@@ -64,12 +73,19 @@ 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
+		    {animationsOff
-			transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+		     ? (
-			layoutId={`tag-${ tag.id }`}>
+			 <div className="flex min-w-0 max-w-full items-baseline overflow-hidden">
-		      <TagLink tag={tag} onClick={onClick}/>
+			   <TagLink tag={tag} onClick={onClick}/>
-		    </motion.div>
+			 </div>)
+		     : (
+			 <motion.div
+			     className="flex min-w-0 max-w-full items-baseline overflow-hidden"
+			     transition={{ layout: layoutTransition }}
+			     layoutId={`tag-${ tag.id }`}>
+			   <TagLink tag={tag} onClick={onClick}/>
+			 </motion.div>)}
 		  </li>))) : [])}
 	</ul>
 	<SectionTitle>関聯</SectionTitle>
@@ -95,25 +111,32 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
       </>)
 
   return (
-      <SidebarComponent>
+      <SidebarComponent sidebarKey="posts-index-tags">
 	<TagSearch/>
 
 	<div className="hidden md:block mt-4">
 	  {posts.length > 0 && TagBlock}
 	</div>
 
-	<AnimatePresence initial={false}>
+	{animationsOff
-	  {tagsVsbl && (
+	 ? (
-	      <motion.div
+	     tagsVsbl && (
-		  key="sptags"
+		 <div className="md:hidden overflow-hidden">
-		  className="md:hidden overflow-hidden"
+		   {posts.length > 0 && TagBlock}
-		  initial={{ height: 0 }}
+		 </div>))
-		  animate={{ height: 'auto' }}
+	 : (
-		  exit={{ height: 0 }}
+	     <AnimatePresence initial={false}>
-		  transition={{ duration: .2, ease: 'easeOut' }}>
+	       {tagsVsbl && (
-		{posts.length > 0 && TagBlock}
+		   <motion.div
-	      </motion.div>)}
+		       key="sptags"
-	</AnimatePresence>
+		       className="md:hidden overflow-hidden"
+		       initial={{ height: 0 }}
+		       animate={{ height: 'auto' }}
+		       exit={{ height: 0 }}
+		       transition={layoutTransition}>
+		     {posts.length > 0 && TagBlock}
+		   </motion.div>)}
+	     </AnimatePresence>)}
 
 	<a href="#"
 	   className="md:hidden block my-2 text-center text-sm
@@ -128,4 +151,4 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
       </SidebarComponent>)
 }
 
-export default TagSidebar
+export default TagSidebar

frontend/src/components/TopNav.tsx

@@ -8,6 +8,7 @@ import PrefetchLink from '@/components/PrefetchLink'
 import TopNavUser from '@/components/TopNavUser'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { materialsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { fetchTag, fetchTagByName } from '@/lib/tags'
 import { fetchMaterial } from '@/lib/materials'
 import { cn } from '@/lib/utils'
@@ -25,7 +26,7 @@ export const menuOutline = (
 	tag?: Tag | null
 	material?: Material | null
 	wikiId: number | null
-	user: User | null,
+	user: User | null
 	pathName: string },
 ): Menu => {
   const postCount = tag?.postCount ?? material?.tag?.postCount ?? 0
@@ -42,6 +43,7 @@ export const menuOutline = (
 	  { name: '一覧', to: '/posts' },
 	  { name: '検索', to: '/posts/search' },
 	  { name: '追加', to: '/posts/new' },
+	  { name: '取込', to: '/posts/import' },
 	  { name: '全体履歴', to: '/posts/changes' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
       { name: 'タグ', to: '/tags', subMenu: [
@@ -91,6 +93,10 @@ export const menuOutline = (
 
 const TopNav: FC<Props> = ({ user }) => {
   const location = useLocation ()
+  const behaviourSettings = useClientBehaviourSettings ()
+  const animationMode = behaviourSettings.animation ?? 'normal'
+  const animationsOff = animationMode === 'off'
+  const reducedAnimations = animationMode === 'reduced'
 
   const dirRef = useRef<(-1) | 1> (1)
   const itemsRef = useRef<(HTMLAnchorElement | null)[]> ([])
@@ -155,6 +161,24 @@ const TopNav: FC<Props> = ({ user }) => {
   const activeIdx =
       visibleMenu.findIndex (item => location.pathname.startsWith (item.base || item.to))
   const submenuHeight = moreVsbl ? 40 * moreMenu.length : (activeIdx < 0 ? 0 : 40)
+  const topNavTransition =
+      animationsOff
+      ? { duration: 0 }
+      : reducedAnimations
+	? { duration: .08, ease: 'linear' as const }
+	: { duration: .2, ease: 'easeOut' as const }
+  const opacityTransition =
+      animationsOff
+      ? { duration: 0 }
+      : reducedAnimations
+	? { duration: .08 }
+	: { duration: .12 }
+  const highlightTransitionClass =
+      animationsOff
+      ? undefined
+      : reducedAnimations
+	? 'transition-[transform,width] duration-75 ease-linear'
+	: 'transition-[transform,width] duration-200 ease-out'
 
   const prevActiveIdxRef = useRef<number> (activeIdx)
 
@@ -189,13 +213,11 @@ const TopNav: FC<Props> = ({ user }) => {
 
   return (
       <>
-	<nav className="px-3 flex justify-between items-center w-full
+	<nav className="top-nav-root px-3 flex justify-between items-center w-full">
-			bg-yellow-200 dark:bg-red-975 md:bg-yellow-50">
 	  <div className="flex items-center gap-2 h-12">
 	    <PrefetchLink
 		to="/posts"
-		className="mx-4 text-xl font-bold text-pink-600 hover:text-pink-400
+		className="top-nav-brand-link mx-4 text-xl font-bold"
-			   dark:text-pink-300 dark:hover:text-pink-100"
 		onClick={() => {
 		  scroll (0, 0)
 		}}>
@@ -205,8 +227,8 @@ const TopNav: FC<Props> = ({ user }) => {
 	    <div ref={navRef} className="relative hidden md:flex h-12 items-center">
 	      <div aria-hidden
 		   className={cn ('absolute inset-y-0 h-12',
-				  'bg-yellow-200 dark:bg-red-950',
+				  'top-nav-highlight',
-				  'transition-[transform,width] duration-200 ease-out')}
+				  highlightTransitionClass)}
 		   style={{ width:      hl.width,
 			    transform:  `translateX(${ hl.left }px)`,
 			    opacity:    hl.visible ? 1 : 0 }}/>
@@ -214,10 +236,12 @@ const TopNav: FC<Props> = ({ user }) => {
 	      {visibleMenu.map ((item, i) => (
 		  <motion.div
 		      key={item.to}
-		      layoutId={`menu-${ item.name }`}
+		      {...(animationsOff
+			   ? { }
+			   : { layoutId: `menu-${ item.name }` })}
 		      animate={{ opacity: moreVsbl ? 0 : 1 }}
-		      transition={{ opacity: { duration: .12 },
+		      transition={{ opacity: opacityTransition,
-				    layout: { duration: .2, ease: 'easeOut' } }}
+				    layout: topNavTransition }}
 		      style={{ pointerEvents: moreVsbl ? 'none' : 'auto' }}
 		      onMouseEnter={() => setMoreVsbl (false)}>
 		    <PrefetchLink
@@ -225,7 +249,7 @@ const TopNav: FC<Props> = ({ user }) => {
 			ref={(el: (HTMLAnchorElement | null)) => {
 			  itemsRef.current[i] = el
 			}}
-			className={cn ('relative z-10 flex h-full items-center px-5',
+			className={cn ('top-nav-menu-link relative z-10 flex h-full items-center px-5',
 				       (i === openItemIdx) && 'font-bold')}>
 		      {item.name}
 		    </PrefetchLink>
@@ -240,7 +264,7 @@ const TopNav: FC<Props> = ({ user }) => {
 		    setMoreVsbl (true)
 		    measure (-1)
 		  }}
-		  className={cn ('relative z-10 flex h-full items-center px-5',
+		  className={cn ('top-nav-menu-link relative z-10 flex h-full items-center px-5',
 				 (openItemIdx < 0 || moreVsbl) && 'font-bold')}>
 		その他 &raquo;
 	      </PrefetchLink>
@@ -249,30 +273,28 @@ const TopNav: FC<Props> = ({ user }) => {
 
 	  <TopNavUser user={user}/>
 
-	  <a href="#"
+	  <button
-	     className="md:hidden ml-auto pr-4
+	     type="button"
-			text-pink-600 hover:text-pink-400
+	     className="top-nav-mobile-toggle md:hidden ml-auto border-0 bg-transparent pr-4"
-			dark:text-pink-300 dark:hover:text-pink-100"
+	     onClick={() => {
-	     onClick={ev => {
-	       ev.preventDefault ()
 	       setMenuOpen (!(menuOpen))
 	     }}>
 	    {menuOpen ? '×' : 'Menu'}
-	  </a>
+	  </button>
 	</nav>
 
 	<AnimatePresence initial={false}>
 	  <motion.div
 	      key="submenu-shell"
-	      layout
+	      {...(animationsOff ? { }
-	      className="relative z-20 hidden md:block overflow-hidden
+		   : { layout: true })}
-			 bg-yellow-200 dark:bg-red-950"
+	      className="relative z-20 hidden md:block overflow-hidden top-nav-submenu"
 	      animate={{ height: submenuHeight }}
 	      onMouseLeave={() => {
 		if (moreVsbl)
 		  setMoreVsbl (false)
 	      }}
-	      transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+	      transition={{ layout: topNavTransition }}
 	      onAnimationComplete={() => {
 		measure (moreVsbl ? -1 : activeIdx)
 	      }}>
@@ -282,12 +304,14 @@ const TopNav: FC<Props> = ({ user }) => {
 		  <div key={i} className="relative h-[40px]">
 		    <div className="absolute inset-0 flex items-center px-3">
 		      <motion.div
-			  transition={{ duration: .2, ease: 'easeOut' }}
+			  transition={topNavTransition}
-			  {...((item.visible ?? true)
+			  {...(animationsOff
+			       ? { }
+			       : ((item.visible ?? true)
 			       ? { layoutId: `menu-${ item.name }` }
 			       : { initial: { x: 40, y: -40, opacity: 0 },
 				   animate: { x: 0, y: 0, opacity: 1 },
-				   exit: { x: 40, y: -40, opacity: 0 } })}
+				   exit: { x: 40, y: -40, opacity: 0 } }))}
 			  className="z-10 h-full flex items-center px-3 font-bold w-28">
 			<h2>{item.name}</h2>
 		      </motion.div>
@@ -298,30 +322,34 @@ const TopNav: FC<Props> = ({ user }) => {
 			  ? (
 			      <motion.div
 				  key={`c-${ i }-${ j }`}
-				  transition={{ duration: .2, ease: 'easeOut' }}
+				  transition={topNavTransition}
-				  {...((visibleMenu[activeIdx]?.name
+				  {...(animationsOff
+				       ? { }
+				       : ((visibleMenu[activeIdx]?.name
 					=== item.name)
 				       ? { layoutId: `submenu-${ item.name }-${ j }` }
 				       : { initial: { y: -40, opacity: 0 },
 					   animate: { y: 0, opacity: 1 },
-					   exit: { y: -40, opacity: 0 } })}>
+					   exit: { y: -40, opacity: 0 } }))}>
 				{subItem.component}
 			      </motion.div>)
 			  : (
 			      <motion.div
 				  key={`l-${ i }-${ j }`}
-				  transition={{ duration: .2, ease: 'easeOut' }}
+				  transition={topNavTransition}
-				  {...((visibleMenu[activeIdx]?.name
+				  {...(animationsOff
+				       ? { }
+				       : ((visibleMenu[activeIdx]?.name
 					=== item.name)
 				       ? { layoutId: `submenu-${ item.name }-${ j }` }
 				       : { initial: { y: -40, opacity: 0 },
 					   animate: { y: 0, opacity: 1 },
-					   exit: { y: -40, opacity: 0 } })}>
+					   exit: { y: -40, opacity: 0 } }))}>
 				<PrefetchLink
 				    to={subItem.to}
 				    target={subItem.to.slice (0, 2) === '//' ? '_blank' : undefined}
 				    onClick={() => setMoreVsbl (false)}
-				    className="h-full flex items-center px-3">
+				    className="top-nav-menu-link h-full flex items-center px-3">
 				  {subItem.name}
 				</PrefetchLink>
 			      </motion.div>)))}
@@ -330,129 +358,215 @@ const TopNav: FC<Props> = ({ user }) => {
 	   : ((visibleMenu[activeIdx]?.subMenu ?? []).length > 0
 	      && (
 		  <div className="relative h-[40px]">
-		    <AnimatePresence initial={false} custom={dir}>
+		    {animationsOff
-		      <motion.div
+		     ? (
-			  key={activeIdx}
+			 <div className="absolute inset-0 flex items-center px-3">
-			  custom={dir}
+			   {(visibleMenu[activeIdx]?.subMenu ?? [])
-			  variants={{ enter: (d: -1 | 1) => ({ y: d * 24, opacity: 0 }),
+			    .filter (item => item.visible ?? true)
-				      centre: { y: 0, opacity: 1 },
+			    .map ((item, i) => (
-				      exit: (d: -1 | 1) => ({ y: (-d) * 24, opacity: 0 }) }}
+			       'component' in item
-			  className="absolute inset-0 flex items-center px-3"
+			       ? (
-			  initial="enter"
+				   <div key={`c-${ i }`}>
-			  animate="centre"
+				     {item.component}
-			  exit="exit"
+				   </div>)
-			  transition={{ duration: .2, ease: 'easeOut' }}>
+			       : (
-			{(visibleMenu[activeIdx]?.subMenu ?? [])
+				   <div key={`l-${ i }`}>
-			 .filter (item => item.visible ?? true)
+				     <PrefetchLink
-			 .map ((item, i) => (
+					 to={item.to}
-			    'component' in item
+					 target={item.to.slice (0, 2) === '//'
-			    ? (
+						 ? '_blank'
-				<motion.div
+						 : undefined}
-				    key={`c-${ i }`}
+					 className="top-nav-menu-link h-full flex items-center px-3">
-				    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+				       {item.name}
-				    layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
+				     </PrefetchLink>
-				  {item.component}
+				   </div>)))}
-				</motion.div>)
+			 </div>)
-			    : (
+		     : (
-				<motion.div
+			 <AnimatePresence initial={false} custom={dir}>
-				    key={`l-${ i }`}
+			   <motion.div
-				    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+			       key={activeIdx}
-				    layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
+			       custom={dir}
-				  <PrefetchLink
+			       variants={{ enter: (d: -1 | 1) => ({ y: d * 24, opacity: 0 }),
-				      to={item.to}
+					   centre: { y: 0, opacity: 1 },
-				      target={item.to.slice (0, 2) === '//' ? '_blank' : undefined}
+					   exit: (d: -1 | 1) => ({ y: (-d) * 24, opacity: 0 }) }}
-				      className="h-full flex items-center px-3">
+			       className="absolute inset-0 flex items-center px-3"
-				    {item.name}
+			       initial="enter"
-				  </PrefetchLink>
+			       animate="centre"
-				</motion.div>)))}
+			       exit="exit"
-		      </motion.div>
+			       transition={topNavTransition}>
-		    </AnimatePresence>
+			     {(visibleMenu[activeIdx]?.subMenu ?? [])
+			      .filter (item => item.visible ?? true)
+			      .map ((item, i) => (
+				 'component' in item
+				 ? (
+				     <motion.div
+					 key={`c-${ i }`}
+					 transition={{ layout: topNavTransition }}
+					 layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
+				       {item.component}
+				     </motion.div>)
+				 : (
+				     <motion.div
+					 key={`l-${ i }`}
+					 transition={{ layout: topNavTransition }}
+					 layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
+				       <PrefetchLink
+					   to={item.to}
+					   target={item.to.slice (0, 2) === '//'
+						   ? '_blank'
+						   : undefined}
+					   className="top-nav-menu-link h-full flex items-center px-3">
+					 {item.name}
+				       </PrefetchLink>
+				     </motion.div>)))}
+			   </motion.div>
+			 </AnimatePresence>)}
 		  </div>))}
 	  </motion.div>
 	</AnimatePresence>
 
-	<AnimatePresence initial={false}>
+	{animationsOff
-	  {menuOpen && (
+	 ? (
-	      <motion.div
+	     menuOpen && (
-		  key="spmenu"
+		 <div
-		  className={cn ('flex flex-col md:hidden',
+		     className={cn ('top-nav-root top-nav-mobile-menu flex flex-col md:hidden',
-				 'bg-yellow-200 dark:bg-red-975 items-start')}
+				    'items-start')}>
-		  variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
+		   <Separator/>
-					height:   0 },
+		   {visibleMenu.map ((item, i) => (
-			      open:   { clipPath: 'inset(0 0 0% 0)',
+		       <Fragment key={i}>
-					height:   'auto' } }}
+			 <PrefetchLink
-		  initial="closed"
+			     to={i === openItemIdx ? item.to : '#'}
-		  animate="open"
+			     className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
-		  exit="closed"
+					((i === openItemIdx)
-		  transition={{ duration: .2, ease: 'easeOut' }}>
+					 && 'top-nav-mobile-active font-bold'))}
-		<Separator/>
+			     onClick={(ev: MouseEvent<HTMLAnchorElement>) => {
-		{visibleMenu.map ((item, i) => (
+			       if (i !== openItemIdx)
-		    <Fragment key={i}>
+				 {
-		      <PrefetchLink
+				   ev.preventDefault ()
-			  to={i === openItemIdx ? item.to : '#'}
+				   setOpenItemIdx (i)
-			  className={cn ('w-full min-h-[40px] flex items-center pl-8',
+				 }
-				     ((i === openItemIdx)
+			     }}>
-				      && 'font-bold bg-yellow-50 dark:bg-red-950'))}
+			   {item.name}
-			  onClick={(ev: MouseEvent<HTMLAnchorElement>) => {
+			 </PrefetchLink>
-			    if (i !== openItemIdx)
-			      {
-				ev.preventDefault ()
-				setOpenItemIdx (i)
-			      }
-			  }}>
-			{item.name}
-		      </PrefetchLink>
 
-		      <AnimatePresence initial={false}>
+			 {i === openItemIdx && (
-			{i === openItemIdx && (
+			     <div className="top-nav-submenu w-full">
-			    <motion.div
+			       {item.subMenu
-				key={`sp-sub-${ i }`}
+				.filter (subItem => subItem.visible ?? true)
-				className="w-full bg-yellow-50 dark:bg-red-950"
+				.map ((subItem, j) => (
-				variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
+				   'component' in subItem
-						      height:   0,
+				   ? (
-						      opacity:  0 },
+				       <Fragment key={`sp-c-${ i }-${ j }`}>
-					    open:   { clipPath: 'inset(0 0 0% 0)',
+					 {subItem.component}
-						      height:   'auto',
+				       </Fragment>)
-						      opacity:  1 } }}
+				   : (
-				initial="closed"
+				       <PrefetchLink
-				animate="open"
+					   key={`sp-l-${ i }-${ j }`}
-				exit="closed"
+					   to={subItem.to}
-				transition={{ duration: .2, ease: 'easeOut' }}>
+					   target={subItem.to.slice (0, 2) === '//'
-			      {item.subMenu
+						   ? '_blank'
-			       .filter (subItem => subItem.visible ?? true)
+						   : undefined}
-			       .map ((subItem, j) => (
+					   className="top-nav-mobile-row w-full min-h-[36px] flex items-center pl-12">
-				  'component' in subItem
+					 {subItem.name}
-				  ? (
+				       </PrefetchLink>)))}
-				      <Fragment key={`sp-c-${ i }-${ j }`}>
+			     </div>)}
-					{subItem.component}
+		       </Fragment>))}
-				      </Fragment>)
+		   <PrefetchLink
-				  : (
+		       to="/more"
-				      <PrefetchLink
+		       ref={(el: (HTMLAnchorElement | null)) => {
-					  key={`sp-l-${ i }-${ j }`}
+			 itemsRef.current[visibleMenu.length] = el
-					  to={subItem.to}
+		       }}
-					  target={subItem.to.slice (0, 2) === '//'
+		       className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
-						  ? '_blank'
+				      ((openItemIdx < 0)
-						  : undefined}
+				       && 'top-nav-mobile-active font-bold'))}>
-					  className="w-full min-h-[36px] flex items-center pl-12">
+		     その他 &raquo;
-					{subItem.name}
+		   </PrefetchLink>
-				      </PrefetchLink>)))}
+		   <TopNavUser user={user} sp/>
-			    </motion.div>)}
+		   <Separator/>
-		      </AnimatePresence>
+		 </div>))
-		    </Fragment>))}
+	 : (
-		<PrefetchLink
+	     <AnimatePresence initial={false}>
-		    to="/more"
+	       {menuOpen && (
-		    ref={(el: (HTMLAnchorElement | null)) => {
+		   <motion.div
-		      itemsRef.current[visibleMenu.length] = el
+		       key="spmenu"
-		    }}
+		       className={cn ('top-nav-root top-nav-mobile-menu flex flex-col md:hidden',
-		    className={cn ('w-full min-h-[40px] flex items-center pl-8',
+				      'items-start')}
-				   ((openItemIdx < 0)
+		       variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
-				    && 'font-bold bg-yellow-50 dark:bg-red-950'))}>
+					     height:   0 },
-		  その他 &raquo;
+				   open:   { clipPath: 'inset(0 0 0% 0)',
-		</PrefetchLink>
+					     height:   'auto' } }}
-		<TopNavUser user={user} sp/>
+		       initial="closed"
-		<Separator/>
+		       animate="open"
-	      </motion.div>)}
+		       exit="closed"
-	</AnimatePresence>
+		       transition={topNavTransition}>
+		     <Separator/>
+		     {visibleMenu.map ((item, i) => (
+			 <Fragment key={i}>
+			   <PrefetchLink
+			       to={i === openItemIdx ? item.to : '#'}
+			       className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
+					  ((i === openItemIdx)
+					   && 'top-nav-mobile-active font-bold'))}
+			       onClick={(ev: MouseEvent<HTMLAnchorElement>) => {
+				 if (i !== openItemIdx)
+				   {
+				     ev.preventDefault ()
+				     setOpenItemIdx (i)
+				   }
+			       }}>
+			     {item.name}
+			   </PrefetchLink>
+
+			   <AnimatePresence initial={false}>
+			     {i === openItemIdx && (
+				 <motion.div
+				     key={`sp-sub-${ i }`}
+				     className="top-nav-submenu w-full"
+				     variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
+							   height:   0,
+							   opacity:  0 },
+						 open:   { clipPath: 'inset(0 0 0% 0)',
+							   height:   'auto',
+							   opacity:  1 } }}
+				     initial="closed"
+				     animate="open"
+				     exit="closed"
+				     transition={topNavTransition}>
+				   {item.subMenu
+				    .filter (subItem => subItem.visible ?? true)
+				    .map ((subItem, j) => (
+				       'component' in subItem
+				       ? (
+					   <Fragment key={`sp-c-${ i }-${ j }`}>
+					     {subItem.component}
+					   </Fragment>)
+				       : (
+					   <PrefetchLink
+					       key={`sp-l-${ i }-${ j }`}
+					       to={subItem.to}
+					       target={subItem.to.slice (0, 2) === '//'
+						       ? '_blank'
+						       : undefined}
+					       className="top-nav-mobile-row w-full min-h-[36px] flex items-center pl-12">
+					     {subItem.name}
+					   </PrefetchLink>)))}
+				 </motion.div>)}
+			   </AnimatePresence>
+			 </Fragment>))}
+		     <PrefetchLink
+			 to="/more"
+			 ref={(el: (HTMLAnchorElement | null)) => {
+			   itemsRef.current[visibleMenu.length] = el
+			 }}
+			 className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
+					((openItemIdx < 0)
+					 && 'top-nav-mobile-active font-bold'))}>
+		       その他 &raquo;
+		     </PrefetchLink>
+		     <TopNavUser user={user} sp/>
+		     <Separator/>
+		   </motion.div>)}
+	     </AnimatePresence>)}
       </>)
 }
 

frontend/src/components/common/FieldWarning.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react'
+
+type Props = { id?:        string
+	       messages?:  string[] }
+
+
+export const FieldWarning: FC<Props> = ({ id, messages }: Props) => {
+  if (!(messages) || messages.length === 0)
+    return null
+
+  return (
+      <ul id={id} className="mt-1 space-y-1 text-amber-700 dark:text-amber-200">
+	{messages.map ((message, i) => <li key={i}>{message}</li>)}
+      </ul>)
+}
+
+
+export default FieldWarning

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

@@ -20,4 +20,16 @@ describe ('TabGroup', () => {
     expect (screen.getByText ('Alpha')).toBeInTheDocument ()
     expect (screen.queryByText ('Beta')).not.toBeInTheDocument ()
   })
+
+  it ('renders tabs as buttons and shows the right addon', () => {
+    render (
+        <TabGroup rightAddon={<span>件数 20</span>}>
+          <Tab name="広場">Plaza</Tab>
+        </TabGroup>,
+    )
+
+    expect (screen.getByRole ('button', { name: '広場' })).toBeInTheDocument ()
+    expect (screen.queryByRole ('link', { name: '広場' })).not.toBeInTheDocument ()
+    expect (screen.getByText ('件数 20')).toBeInTheDocument ()
+  })
 })

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">
+	<div className="flex items-center justify-between gap-4">
-	  {tabs.map ((tab, i) => (
+	  <div className="flex min-w-0 gap-4">
-	      <a key={i}
+	    {tabs.map ((tab, i) => (
-		 href="#"
+		<button
-		 className={cn (i === current && 'font-bold')}
+		   key={i}
-		 onClick={ev => {
+		   type="button"
-		   ev.preventDefault ()
+		   className={cn (
-		   setCurrent (i)
+		       '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',
-		{tab.props.name}
+		       i === current && 'font-bold',
-	      </a>))}
+		   )}
+		   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 } })
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
-    setSuggestions (data.filter (t => t.postCount > 0))
+	q,
-    if (suggestions.length > 0)
+	nico: includeNico ? '1' : '0' } })
-      setSuggestionsVsbl (true)
+    const nextSuggestions = data.filter (t => t.postCount > 0)
+    setSuggestions (nextSuggestions)
+    setSuggestionsVsbl (nextSuggestions.length > 0)
   }
 
   // TODO: TagSearch からのコピペのため，共通化を考へる．

frontend/src/components/layout/MainArea.tsx

@@ -1,5 +1,7 @@
 import { motion } from 'framer-motion'
 
+import { clientAnimationTransition } from '@/lib/clientAnimation'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
 
 import type { FC, ReactNode } from 'react'
@@ -9,12 +11,21 @@ type Props = {
     className?: string }
 
 
-const MainArea: FC<Props> = ({ children, className }) => (
+const MainArea: FC<Props> = ({ children, className }) => {
-    <motion.main
+  const behaviourSettings = useClientBehaviourSettings ()
-	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+  const animationMode = behaviourSettings.animation ?? 'normal'
-	className={cn ('flex-1 overflow-y-auto p-4', className)}
+  const layoutTransition = clientAnimationTransition (
-	layout="position">
+      animationMode,
-      {children}
+      { normal: { duration: .2, ease: 'easeOut' as const } },
-    </motion.main>)
+  )
 
-export default MainArea
+  return (
+      <motion.main
+	  transition={{ layout: layoutTransition }}
+	  className={cn ('flex-1 overflow-y-auto p-4', className)}
+	  layout={animationMode === 'off' ? false : 'position'}>
+	{children}
+      </motion.main>)
+}
+
+export default MainArea

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,327 @@
 import { motion } from 'framer-motion'
 import { Helmet } from 'react-helmet-async'
 
-import type { FC, ReactNode } from 'react'
+import { clientAnimationTransition } from '@/lib/clientAnimation'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
+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 }) => (
+const storageKeyForSidebar = (sidebarKey: string, side: SidebarSide): string =>
-    <motion.div
+    `sidebar:${ sidebarKey }:${ side }:width`
-	layout="position"
+
-	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+
-	className="p-4 w-full md:w-64 md:h-full md:overflow-y-auto sidebar">
+const getSidebarMaxWidth = (containerWidth: number): number => {
-      <Helmet>
+  const viewportWidth =
-	<style>
+      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 behaviourSettings = useClientBehaviourSettings ()
+  const animationMode = behaviourSettings.animation ?? 'normal'
+  const layoutTransition = clientAnimationTransition (
+      animationMode,
+      { normal: { duration: .2, ease: 'easeOut' as const } },
+  )
+  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={animationMode === 'off' ? false : 'position'}
+	  transition={{ layout: layoutTransition }}
+	  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 +331,34 @@ const SidebarComponent: FC<Props> = ({ children }) => (
 	      {
 		direction: ltr;
 	      }`}
-	</style>
+	  </style>
-      </Helmet>
+	</Helmet>
 
-      {children}
+	<div className="h-full overflow-y-auto p-4 sidebar">
-    </motion.div>)
+	  {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/posts/import/PostImportRowDialog.tsx

@@ -0,0 +1,262 @@
+import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
+import FieldError from '@/components/common/FieldError'
+import FieldWarning from '@/components/common/FieldWarning'
+import FormField from '@/components/common/FormField'
+import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
+import ThumbnailPreview from '@/components/posts/import/ThumbnailPreview'
+import { effectivePostImportStatus } from '@/components/posts/import/postImportRowStatus'
+import { Button } from '@/components/ui/button'
+import { Dialog,
+	 DialogContent,
+	 DialogDescription,
+	 DialogFooter,
+	 DialogHeader,
+	 DialogTitle } from '@/components/ui/dialog'
+import { inputClass } from '@/lib/utils'
+
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+
+import type { PostImportOrigin,
+	      PostImportRow } from '@/lib/postImportSession'
+
+type Draft = {
+    url:                   string
+    title:                 string
+    thumbnailBase:         string
+    originalCreatedFrom:   string
+    originalCreatedBefore: string
+    duration:              string
+    tags:                  string
+    parentPostIds:         string }
+
+type Props = {
+    open:         boolean
+    row:          PostImportRow | null
+    saving:       boolean
+    onOpenChange: (open: boolean) => void
+    onSave:       (draft: Draft) => Promise<boolean> }
+
+const originOf = (
+    row:   PostImportRow,
+    field: string,
+): PostImportOrigin =>
+    row.provenance[field] ?? 'automatic'
+
+const originalCreatedOrigin = (row: PostImportRow): PostImportOrigin =>
+    originOf (row, 'originalCreatedFrom') === 'manual'
+    || originOf (row, 'originalCreatedBefore') === 'manual'
+    ? 'manual'
+    : 'automatic'
+
+const buildDraft = (row: PostImportRow): Draft => ({
+    url: row.url,
+    title: String (row.attributes.title ?? ''),
+    thumbnailBase: String (row.attributes.thumbnailBase ?? ''),
+    originalCreatedFrom: String (row.attributes.originalCreatedFrom ?? ''),
+    originalCreatedBefore: String (row.attributes.originalCreatedBefore ?? ''),
+    duration: String (row.attributes.duration ?? ''),
+    tags: String (row.attributes.tags ?? ''),
+    parentPostIds: String (row.attributes.parentPostIds ?? '') })
+
+const groupedMessages = (
+    ...values: Array<string[] | undefined>
+): string[] =>
+    values.flatMap (value => value ?? [])
+
+
+const PostImportRowDialog: FC<Props> = (
+    { open, row, saving, onOpenChange, onSave },
+) => {
+    const [draft, setDraft] = useState<Draft | null> (null)
+
+    useEffect (() => {
+	if (open && row)
+	  setDraft (buildDraft (row))
+    }, [open, row])
+
+    if (!(row) || !(draft))
+      return null
+
+    const update = <Key extends keyof Draft,> (
+	key:   Key,
+	value: Draft[Key],
+    ) => {
+	setDraft (current =>
+	    current ? { ...current, [key]: value } : current)
+    }
+
+    const save = async () => {
+	if (await onSave (draft))
+	  onOpenChange (false)
+    }
+
+    return (
+	<Dialog open={open} onOpenChange={onOpenChange}>
+	  <DialogContent className="flex max-h-[calc(100dvh-1rem)] max-w-3xl flex-col
+				   overflow-hidden p-0">
+	    <DialogHeader className="shrink-0 px-6 pb-4 pt-7">
+	      <DialogTitle>投稿を編輯</DialogTitle>
+	      <DialogDescription>
+		投稿 {row.sourceRow} の内容を確認し、必要な項目を編輯してください．
+	      </DialogDescription>
+	    </DialogHeader>
+
+	    <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6">
+	      <div className="grid gap-6 md:grid-cols-[7rem_minmax(0,1fr)]">
+		<div className="space-y-3">
+		  <ThumbnailPreview
+		      url={draft.thumbnailBase}
+		      className="h-28 w-28"/>
+		  <div className="flex flex-wrap gap-2">
+		    <PostImportStatusBadge value={effectivePostImportStatus (row)}/>
+		  </div>
+		</div>
+
+		<div className="space-y-4">
+		  <DialogTextField
+		      label="URL"
+		      value={draft.url}
+		      origin={originOf (row, 'url')}
+		      warnings={row.fieldWarnings.url}
+		      errors={groupedMessages (row.validationErrors.url, row.importErrors?.url)}
+		      onChange={value => update ('url', value)}/>
+		  <DialogTextField
+		      label="タイトル"
+		      value={draft.title}
+		      origin={originOf (row, 'title')}
+		      warnings={row.fieldWarnings.title}
+		      errors={groupedMessages (row.validationErrors.title, row.importErrors?.title)}
+		      onChange={value => update ('title', value)}/>
+		  <DialogTextField
+		      label="サムネール基底 URL"
+		      value={draft.thumbnailBase}
+		      origin={originOf (row, 'thumbnailBase')}
+		      warnings={row.fieldWarnings.thumbnailBase}
+		      errors={groupedMessages (
+			  row.validationErrors.thumbnailBase,
+			  row.importErrors?.thumbnailBase,
+		      )}
+		      onChange={value => update ('thumbnailBase', value)}/>
+		  <PostOriginalCreatedTimeField
+		      labelAddon={<PostImportStatusBadge value={originalCreatedOrigin (row)}/>}
+		      originalCreatedFrom={draft.originalCreatedFrom || null}
+		      setOriginalCreatedFrom={value => update ('originalCreatedFrom', value ?? '')}
+		      originalCreatedBefore={draft.originalCreatedBefore || null}
+		      setOriginalCreatedBefore={value => update ('originalCreatedBefore', value ?? '')}
+		      errors={groupedMessages (
+			  row.validationErrors.originalCreatedAt,
+			  row.validationErrors.originalCreatedFrom,
+			  row.validationErrors.originalCreatedBefore,
+			  row.importErrors?.originalCreatedAt,
+			  row.importErrors?.originalCreatedFrom,
+			  row.importErrors?.originalCreatedBefore,
+		      )}/>
+		  <DialogTextField
+		      label="動画時間"
+		      value={draft.duration}
+		      origin={originOf (row, 'duration')}
+		      errors={groupedMessages (
+			  row.validationErrors.duration,
+			  row.validationErrors.videoMs,
+			  row.importErrors?.duration,
+			  row.importErrors?.videoMs,
+		      )}
+		      onChange={value => update ('duration', value)}/>
+		  <DialogAreaField
+		      label="タグ"
+		      value={draft.tags}
+		      origin={originOf (row, 'tags')}
+		      warnings={row.fieldWarnings.tags}
+		      errors={groupedMessages (row.validationErrors.tags, row.importErrors?.tags)}
+		      onChange={value => update ('tags', value)}/>
+		  <DialogTextField
+		      label="親投稿"
+		      value={draft.parentPostIds}
+		      origin={originOf (row, 'parentPostIds')}
+		      errors={groupedMessages (
+			  row.validationErrors.parentPostIds,
+			  row.importErrors?.parentPostIds,
+		      )}
+		      onChange={value => update ('parentPostIds', value)}/>
+		  <FieldWarning messages={row.baseWarnings}/>
+		  <FieldError messages={row.validationErrors.base}/>
+		  <FieldError messages={row.importErrors?.base}/>
+		</div>
+	      </div>
+	    </div>
+
+	    <DialogFooter className="shrink-0 px-6 pb-6 pt-4">
+	      <Button
+		  type="button"
+		  variant="outline"
+		  onClick={() => onOpenChange (false)}>
+		取消し
+	      </Button>
+	      <Button
+		  type="button"
+		  onClick={save}
+		  disabled={saving}>
+		編輯内容を保存
+	      </Button>
+	    </DialogFooter>
+	  </DialogContent>
+	</Dialog>)
+}
+
+const DialogTextField = (
+    { label, value, origin, warnings, errors, onChange }: {
+	label:    string
+	value:    string
+	origin:   PostImportOrigin
+	warnings?: string[]
+	errors?:   string[]
+	onChange: (value: string) => void },
+) => (
+    <FormField label={<DialogLabel label={label} origin={origin}/>} messages={errors}>
+      {({ describedBy, invalid }) => (
+	  <>
+	    <input
+		value={value}
+		onChange={ev => onChange (ev.target.value)}
+		aria-describedby={describedBy}
+		aria-invalid={invalid}
+		className={inputClass (invalid)}/>
+	    <FieldWarning messages={warnings}/>
+	  </>)}
+    </FormField>)
+
+const DialogAreaField = (
+    { label, value, origin, warnings, errors, onChange }: {
+	label:    string
+	value:    string
+	origin:   PostImportOrigin
+	warnings?: string[]
+	errors?:   string[]
+	onChange: (value: string) => void },
+) => (
+    <FormField label={<DialogLabel label={label} origin={origin}/>} messages={errors}>
+      {({ describedBy, invalid }) => (
+	  <>
+	    <textarea
+		value={value}
+		rows={4}
+		onChange={ev => onChange (ev.target.value)}
+		aria-describedby={describedBy}
+		aria-invalid={invalid}
+		className={inputClass (invalid)}/>
+	    <FieldWarning messages={warnings}/>
+	  </>)}
+    </FormField>)
+
+const DialogLabel = (
+    { label, origin }: {
+	label:   string
+	origin:  PostImportOrigin },
+) => (
+    <span className="flex items-center gap-2">
+      <span>{label}</span>
+      <PostImportStatusBadge value={origin}/>
+    </span>)
+
+export default PostImportRowDialog

frontend/src/components/posts/import/PostImportRowSummary.tsx

@@ -0,0 +1,176 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+import PrefetchLink from '@/components/PrefetchLink'
+import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
+import ThumbnailPreview from '@/components/posts/import/ThumbnailPreview'
+import { effectivePostImportStatus } from '@/components/posts/import/postImportRowStatus'
+
+import type { FC } from 'react'
+
+import type { PostImportRow } from '@/lib/postImportSession'
+
+type Props = {
+    row:     PostImportRow
+    onEdit:  () => void }
+
+const toneClass = (row: PostImportRow): string[] => {
+    const value = effectivePostImportStatus (row)
+    switch (value)
+      {
+      case 'created':
+	return [
+	    'border-sky-200 bg-sky-50',
+	    'dark:border-sky-900 dark:bg-sky-950/30']
+      case 'skipped':
+	return [
+	    'border-stone-200 bg-stone-50',
+	    'dark:border-stone-800 dark:bg-stone-900/60']
+      case 'failed':
+      case 'error':
+	return [
+	    'border-rose-200 bg-rose-50',
+	    'dark:border-rose-900 dark:bg-rose-950/30']
+      case 'warning':
+	return [
+	    'border-amber-200 bg-amber-50',
+	    'dark:border-amber-900 dark:bg-amber-950/30']
+      default:
+	return [
+	    'border-border bg-white',
+	    'dark:border-neutral-700 dark:bg-neutral-900']
+      }
+}
+
+const summaryError = (row: PostImportRow): string | null => {
+    const validation = Object.values (row.validationErrors ?? { }).flat ()[0]
+    if (validation)
+      return validation
+
+    return Object.values (row.importErrors ?? { }).flat ()[0] ?? null
+}
+
+const summaryWarning = (row: PostImportRow): string | null =>
+    Object.values (row.fieldWarnings ?? { }).flat ()[0]
+    ?? row.baseWarnings?.[0]
+    ?? null
+
+const summaryDate = (row: PostImportRow): string =>
+    [row.attributes.originalCreatedFrom, row.attributes.originalCreatedBefore]
+	.filter (_1 => typeof _1 === 'string' && _1 !== '')
+	.join (' ～ ')
+
+
+const PostImportRowSummary: FC<Props> = ({ row, onEdit }) => {
+    const error = summaryError (row)
+    const warning = error == null ? summaryWarning (row) : null
+    const effectiveStatus = effectivePostImportStatus (row)
+
+    return (
+	<>
+	  <div
+	      className={cn (
+		  'hidden items-center gap-4 rounded-lg border p-4 md:grid',
+		  'md:grid-cols-[4rem_5rem_minmax(0,1fr)_auto_auto_auto]',
+		  toneClass (row),
+		  'hover:bg-slate-50',
+		  'dark:hover:bg-neutral-800',
+	      )}>
+	    <div className="space-y-1">
+	      <div className="text-sm font-medium">#{row.sourceRow}</div>
+	    </div>
+	    <ThumbnailPreview
+		url={String (row.attributes.thumbnailBase ?? '')}
+		className="h-16 w-16"/>
+	    <div className="min-w-0 space-y-1">
+	      <div className="line-clamp-2 text-sm font-medium">
+		{String (row.attributes.title ?? '') || '（タイトル未取得）'}
+	      </div>
+	      <div className="truncate text-xs text-neutral-600 dark:text-neutral-300">
+		{row.url}
+	      </div>
+	      <div className="truncate text-xs text-neutral-500 dark:text-neutral-400">
+		{String (row.attributes.tags ?? '') || 'タグなし'}
+	      </div>
+	      <div className="text-xs text-neutral-500 dark:text-neutral-400">
+		{summaryDate (row) || '日時未取得'}
+		{row.attributes.duration ? ` / ${ row.attributes.duration }` : ''}
+	      </div>
+	      {row.createdPostId && (
+		  <PrefetchLink
+		      to={`/posts/${ row.createdPostId }`}
+		      className="inline-block text-xs text-sky-700 underline
+				 dark:text-sky-300">
+		    投稿 #{row.createdPostId}
+		  </PrefetchLink>)}
+	      {warning && (
+		  <div className="text-xs text-amber-700 dark:text-amber-200">
+		    {warning}
+		  </div>)}
+	      {error && (
+		  <div className="text-xs text-red-700 dark:text-red-200">
+		    {error}
+		  </div>)}
+	    </div>
+	    <div className="space-y-1">
+	      <PostImportStatusBadge value={effectiveStatus}/>
+	    </div>
+	    <div className="flex justify-end">
+	      <Button
+		  type="button"
+		  variant="outline"
+		  onClick={onEdit}
+		  disabled={row.importStatus === 'created'}>
+		編輯
+	      </Button>
+	    </div>
+	  </div>
+
+	  <div
+	      className={cn (
+		  'space-y-3 rounded-lg border p-4 md:hidden',
+		  toneClass (row),
+	      )}>
+	    <div className="flex items-start gap-3">
+	      <ThumbnailPreview
+		  url={String (row.attributes.thumbnailBase ?? '')}
+		  className="h-20 w-20 shrink-0"/>
+	      <div className="min-w-0 flex-1 space-y-2">
+		<div className="line-clamp-2 text-sm font-medium">
+		  {String (row.attributes.title ?? '') || '（タイトル未取得）'}
+		</div>
+		<div className="truncate text-xs text-neutral-600 dark:text-neutral-300">
+		  {row.url}
+		</div>
+		<div className="flex flex-wrap gap-2">
+		  <PostImportStatusBadge value={effectiveStatus}/>
+		</div>
+		{row.createdPostId && (
+		    <PrefetchLink
+			to={`/posts/${ row.createdPostId }`}
+			className="inline-block text-xs text-sky-700 underline
+				   dark:text-sky-300">
+		      投稿 #{row.createdPostId}
+		    </PrefetchLink>)}
+		{error && (
+		    <div className="text-xs text-red-700 dark:text-red-200">
+		      {error}
+		    </div>)}
+		{warning && (
+		    <div className="text-xs text-amber-700 dark:text-amber-200">
+		      {warning}
+		    </div>)}
+	      </div>
+	    </div>
+	    <Button
+		type="button"
+		variant="outline"
+		onClick={onEdit}
+		disabled={row.importStatus === 'created'}>
+	      編輯
+	    </Button>
+	  </div>
+	</>)
+}
+
+export default PostImportRowSummary

frontend/src/components/posts/import/PostImportStatusBadge.tsx

@@ -0,0 +1,70 @@
+import { cn } from '@/lib/utils'
+
+import type { FC } from 'react'
+
+import type { PostImportOrigin } from '@/lib/postImportSession'
+
+type BadgeValue =
+    'ready'
+    | 'warning'
+    | 'error'
+    | 'pending'
+    | 'created'
+    | 'skipped'
+    | 'failed'
+    | PostImportOrigin
+
+type Props = {
+    value: BadgeValue }
+
+const LABELS: Record<BadgeValue, string> = {
+    ready:     '登録可能',
+    warning:   '警告',
+    error:     '要修正',
+    pending:   '未登録',
+    created:   '登録済み',
+    skipped:   'スキップ',
+    failed:    '失敗',
+    automatic: '自動取得',
+    manual:    '手修正' }
+
+const STYLES: Record<BadgeValue, string[]> = {
+    ready: [
+	'border-emerald-300 bg-emerald-50 text-emerald-700',
+	'dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200'],
+    warning: [
+	'border-amber-300 bg-amber-50 text-amber-700',
+	'dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200'],
+    error: [
+	'border-red-300 bg-red-50 text-red-700',
+	'dark:border-red-900 dark:bg-red-950 dark:text-red-200'],
+    pending: [
+	'border-slate-300 bg-slate-50 text-slate-700',
+	'dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200'],
+    created: [
+	'border-sky-300 bg-sky-50 text-sky-700',
+	'dark:border-sky-900 dark:bg-sky-950 dark:text-sky-200'],
+    skipped: [
+	'border-stone-300 bg-stone-50 text-stone-700',
+	'dark:border-stone-700 dark:bg-stone-900 dark:text-stone-200'],
+    failed: [
+	'border-rose-300 bg-rose-50 text-rose-700',
+	'dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200'],
+    automatic: [
+	'border-slate-300 bg-slate-50 text-slate-700',
+	'dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200'],
+    manual: [
+	'border-purple-300 bg-purple-50 text-purple-700',
+	'dark:border-purple-900 dark:bg-purple-950 dark:text-purple-200'] }
+
+
+const PostImportStatusBadge: FC<Props> = ({ value }) => (
+    <span
+	className={cn (
+	    'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium',
+	    STYLES[value],
+	)}>
+      {LABELS[value]}
+    </span>)
+
+export default PostImportStatusBadge

frontend/src/components/posts/import/ThumbnailPreview.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+
+import type { FC } from 'react'
+
+
+type Props = {
+    url:       string
+    alt?:      string
+    className?: string }
+
+
+const ThumbnailPreview: FC<Props> = ({ url, alt = 'サムネール', className = 'h-16 w-16' }) => {
+    const [failed, setFailed] = useState (false)
+
+    useEffect (() => {
+	setFailed (false)
+    }, [url])
+
+    if (!(url))
+      {
+	return (
+	    <div
+		className={`${ className } flex items-center justify-center rounded border
+			    border-border bg-muted text-xs text-muted-foreground`}>
+	      なし
+	    </div>)
+      }
+
+    if (failed)
+      {
+	return (
+	    <div
+		className={`${ className } flex items-center justify-center rounded border
+			    border-amber-300 bg-amber-50 p-2 text-center text-xs
+			    text-amber-700 dark:border-amber-900 dark:bg-amber-950
+			    dark:text-amber-200`}>
+	      サムネールを表示できません
+	    </div>)
+      }
+
+    return (
+	<img
+	    src={url}
+	    alt={alt}
+	    className={`${ className } rounded border border-border object-cover`}
+	    onError={() => setFailed (true)}/>)
+}
+
+export default ThumbnailPreview

frontend/src/components/posts/import/postImportRowStatus.ts

@@ -0,0 +1,24 @@
+import type { PostImportRow } from '@/lib/postImportSession'
+
+export type PostImportEffectiveStatus =
+    'created'
+    | 'skipped'
+    | 'failed'
+    | 'error'
+    | 'warning'
+    | 'ready'
+
+
+export const effectivePostImportStatus = (
+    row: PostImportRow,
+): PostImportEffectiveStatus => {
+    switch (row.importStatus)
+      {
+      case 'created':
+      case 'skipped':
+      case 'failed':
+	return row.importStatus
+      default:
+	return row.status
+      }
+}