AGENTS.md

@@ -274,6 +274,30 @@ const value =
 - Treat TSX formatting rules as hard constraints, not preferences. Before
   finishing a TSX edit, inspect the edited hunks for closing `)`, `]`, and `}`
   placement and fix violations instead of relying on formatter defaults.
+- After every TSX edit, perform a style-only self-review of the edited hunks
+  before running verification or reporting completion. The task is not complete
+  while any edited TSX hunk violates these local formatting rules.
+- The TSX self-review must classify every edited leading or trailing `)`, `]`,
+  and `}` by syntax role before deciding whether it is valid. Do not apply a
+  rule by glyph alone. A closing `)` for a function parameter list is different
+  from a closing `)` for a function call. A closing `}` for a block is different
+  from a closing `}` for an object, type literal, import list, or destructuring
+  pattern.
+- The TSX self-review must confirm there are no common Prettier-style React
+  component declarations with a multi-line destructured parameter.
+- The TSX self-review must confirm multi-line function declaration parameter
+  `)` placement follows the detailed parameter-list rules below.
+- The TSX self-review must confirm call-expression `)` is never at the
+  beginning of a line.
+- The TSX self-review must confirm object/type/import/destructuring `}` is not
+  at the beginning of a line.
+- The TSX self-review must confirm multi-line function/lambda/callback/block
+  `}` is on its own line and never at the end of the previous line.
+- The TSX self-review must confirm array `]` is not at the beginning of a line.
+- The TSX self-review must confirm JSX closing markers and closing parentheses
+  keep the surrounding compact style.
+- The TSX self-review must confirm leading indentation follows 4-space logical
+  indentation with tabs only as leading 8-space compression.
 - Prefer `const` arrow functions for TypeScript/TSX component and helper declarations.
 - Put two blank lines before and after top-level `const` function
   declarations, unless imports, exports, or file boundaries make that awkward.
@@ -282,9 +306,15 @@ 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 `=>`. Do not put that closing `)` at the end of the previous line.
+- 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
@@ -325,6 +355,356 @@ 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`.
+- Spell British English identifiers correctly when the feature name uses
+  British English. Use `Behaviour`, not `Behavior`, for new component and file
+  names unless editing an already established American-English API.
+
+### Frontend delimiter decision table
+
+Use this table before accepting any edited TypeScript or TSX hunk. The table is
+more authoritative than formatter habit.
+
+#### Import and export named bindings
+
+Bad:
+
+```ts
+import {
+    Button,
+    Card,
+} from '@/components/ui'
+```
+
+Good:
+
+```ts
+import { Button,
+	 Card } from '@/components/ui'
+```
+
+Also acceptable when short:
+
+```ts
+import { Button, Card } from '@/components/ui'
+```
+
+Rule: named-binding `}` is associative-array-style syntax. It must not be alone
+at the beginning of a line. Prefer keeping `{` with the first binding and `}`
+with the final binding when this fits the line limit.
+
+#### Type literals
+
+Bad:
+
+```ts
+type Props = {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+```
+
+Good:
+
+```ts
+type Props = {
+    open: boolean
+    onOpenChange: (open: boolean) => void }
+```
+
+Rule: type-literal `}` is not a block close. It must stay on the same line as
+the final property unless that would break the hard line limit.
+
+#### Object literals
+
+Bad:
+
+```ts
+const value = {
+    open,
+    activeScope,
+}
+```
+
+Good:
+
+```ts
+const value = {
+    open,
+    activeScope }
+```
+
+Bad:
+
+```ts
+const value = useMemo (() => ({
+    open,
+    activeScope,
+}), [open, activeScope])
+```
+
+Good:
+
+```ts
+const value = useMemo (() => ({
+    open,
+    activeScope }), [open, activeScope])
+```
+
+Rule: object-literal `}` is associative-array-style syntax. It must not be on a
+line by itself. Keep it with the final property, and keep call `)` off the
+beginning of a line.
+
+#### Destructuring parameters
+
+Bad:
+
+```tsx
+const Component: FC<Props> = ({
+    open,
+    onOpenChange,
+}) => {
+  return null
+}
+```
+
+Good:
+
+```tsx
+const Component: FC<Props> = (
+    { open,
+      onOpenChange },
+) => {
+  return null
+}
+```
+
+Rule: when a React component or helper takes a destructured object parameter
+that spans multiple lines, do not use the Prettier-style `= ({ ... }) =>`
+shape. Put the function parameter list on its own lines. The destructuring `}`
+stays with the final binding. The parameter-list `)` is then allowed and
+required at the beginning of its own line.
+
+#### Inline typed destructuring parameter
+
+Good:
+
+```ts
+const RouteTransitionWrapper = ({ user, setUser }: {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>> }) => {
+  return null
+}
+```
+
+Bad:
+
+```ts
+const RouteTransitionWrapper = ({ user, setUser }: {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>>
+}) => {
+  return null
+}
+```
+
+Rule: this is not a separately split parameter-list block. The line break is
+inside the inline type. Keep the type-literal `}` and parameter-list `)` on the
+same line as the final type property.
+
+#### Multi-line normal parameter list
+
+Bad:
+
+```ts
+const updateDraft = <Key extends keyof Settings,> (
+    key: Key,
+    value: Settings[Key]) => {
+  return null
+}
+```
+
+Good:
+
+```ts
+const updateDraft = <Key extends keyof Settings,> (
+    key:    Key,
+    value:  Settings[Key],
+) => {
+  return null
+}
+```
+
+Rule: when the parameter list itself is split across multiple parameter lines,
+the closing parameter `)` goes at the beginning of its own line before `=>` or
+the return type.
+
+#### Function and callback blocks
+
+Bad:
+
+```ts
+const handleSave = () => { save ()
+}
+```
+
+Bad:
+
+```ts
+const handleSave = () => {
+  save () }
+```
+
+Good:
+
+```ts
+const handleSave = () => {
+  save ()
+}
+```
+
+Rule: block `}` closes executable code, not associative data. Multi-line
+function, lambda, callback, `if`, `for`, `switch`, and similar block braces
+belong on their own line.
+
+#### Function and method calls
+
+Bad:
+
+```ts
+const value = compute (
+    first,
+    second
+)
+```
+
+Good:
+
+```ts
+const value = compute (
+    first,
+    second)
+```
+
+Rule: call-expression `)` must not be at the beginning of a line. The exception
+for leading `)` applies only to function declaration parameter lists, never to
+calls.
+
+#### JSX closing markers
+
+Bad:
+
+```tsx
+<Button
+    type="button"
+    onClick={handleSave}
+>
+  保存
+</Button>
+)
+```
+
+Good:
+
+```tsx
+<Button
+    type="button"
+    onClick={handleSave}>
+  保存
+</Button>)
+```
+
+Bad:
+
+```tsx
+<Input
+    value={value}
+    onChange={handleChange}
+/>
+```
+
+Good:
+
+```tsx
+<Input
+    value={value}
+    onChange={handleChange}/>
+```
+
+Rule: keep `>` or `/>` with the final prop, and keep JSX closing parentheses in
+the local compact form such as `</div>)`.
+
+#### Arrays and tuples
+
+Bad:
+
+```ts
+const items = [
+    first,
+    second,
+]
+```
+
+Good:
+
+```ts
+const items = [
+    first,
+    second]
+```
+
+Good when short:
+
+```ts
+const items = [first, second]
+```
+
+Rule: array and tuple `]` must not be at the beginning of a line. Keep it with
+the final element unless that would break the hard line limit.
+
+#### Single-line braces
+
+Good:
+
+```ts
+const next = { ...current, enabled: true }
+const tag = { id, name }
+```
+
+Bad:
+
+```tsx
+<Component prop={ value }/>
+```
+
+Good:
+
+```tsx
+<Component prop={value}/>
+```
+
+Rule: JavaScript object braces on one line get one inner space. JSX expression
+braces do not get inner spaces.
+
+#### Final TSX self-review checklist
+
+Before reporting completion after a TypeScript or TSX edit, check the edited
+hunks line by line:
+
+1. No import/export/type/object/destructuring `}` appears alone at the beginning
+   of a line.
+2. No call-expression `)` appears at the beginning of a line.
+3. Any leading `)` is definitely closing a function declaration parameter list,
+   not a call.
+4. Any parameter-list `)` at the end of a line is valid because the parameter
+   list itself was not split, only an inline type or destructuring shape was.
+5. No array or tuple `]` appears at the beginning of a line.
+6. Multi-line executable block `}` is on its own line.
+7. JSX `>` and `/>` stay with the final prop unless nearby code proves
+   otherwise.
+8. JSX closing parentheses keep the compact local style.
+9. Leading indentation is 4-space logical indentation with tabs used only as
+   leading 8-space compression.
+10. No line has trailing whitespace.
 
 Preferred:
 

frontend/AGENTS.md

@@ -129,13 +129,43 @@ pass or the remaining failure is clearly blocked.
 - Treat TSX formatting rules as hard constraints, not preferences. Before
   finishing a TSX edit, inspect the edited hunks for closing `)`, `]`, and `}`
   placement and fix violations instead of relying on formatter defaults.
+- After every TSX edit, perform a style-only self-review of the edited hunks
+  before running verification or reporting completion. The task is not complete
+  while any edited TSX hunk violates these local formatting rules.
+- The TSX self-review must classify every edited leading or trailing `)`, `]`,
+  and `}` by syntax role before deciding whether it is valid. Do not apply a
+  rule by glyph alone. A closing `)` for a function parameter list is different
+  from a closing `)` for a function call. A closing `}` for a block is different
+  from a closing `}` for an object, type literal, import list, or destructuring
+  pattern.
+- The TSX self-review must confirm there are no common Prettier-style React
+  component declarations with a multi-line destructured parameter.
+- The TSX self-review must confirm multi-line function declaration parameter
+  `)` placement follows the detailed parameter-list rules below.
+- The TSX self-review must confirm call-expression `)` is never at the
+  beginning of a line.
+- The TSX self-review must confirm object/type/import/destructuring `}` is not
+  at the beginning of a line.
+- The TSX self-review must confirm multi-line function/lambda/callback/block
+  `}` is on its own line and never at the end of the previous line.
+- The TSX self-review must confirm array `]` is not at the beginning of a line.
+- The TSX self-review must confirm JSX closing markers and closing parentheses
+  keep the surrounding compact style.
+- The TSX self-review must confirm leading indentation follows 4-space logical
+  indentation with tabs only as leading 8-space compression.
 - For long Tailwind `className` strings, wrap across lines only when needed.
 - Keep continuation indentation aligned with the 4-space logical indentation
   rule, using tabs only as leading 8-space compression.
 - In TypeScript and TSX function declarations, including `const` arrow
-  function declarations, 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 `=>`. Do not put that closing `)` at the end of the previous line.
+- 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
@@ -162,8 +192,358 @@ pass or the remaining failure is clearly blocked.
   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.
+- Spell British English identifiers correctly when the feature name uses
+  British English. Use `Behaviour`, not `Behavior`, for new component and file
+  names unless editing an already established American-English API.
 - Avoid reformatting unrelated JSX.
 
+### Delimiter decision table
+
+Use this table before accepting any edited TypeScript or TSX hunk. The table is
+more authoritative than formatter habit.
+
+#### Import and export named bindings
+
+Bad:
+
+```ts
+import {
+    Button,
+    Card,
+} from '@/components/ui'
+```
+
+Good:
+
+```ts
+import { Button,
+	 Card } from '@/components/ui'
+```
+
+Also acceptable when short:
+
+```ts
+import { Button, Card } from '@/components/ui'
+```
+
+Rule: named-binding `}` is associative-array-style syntax. It must not be alone
+at the beginning of a line. Prefer keeping `{` with the first binding and `}`
+with the final binding when this fits the line limit.
+
+#### Type literals
+
+Bad:
+
+```ts
+type Props = {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+```
+
+Good:
+
+```ts
+type Props = {
+    open: boolean
+    onOpenChange: (open: boolean) => void }
+```
+
+Rule: type-literal `}` is not a block close. It must stay on the same line as
+the final property unless that would break the hard line limit.
+
+#### Object literals
+
+Bad:
+
+```ts
+const value = {
+    open,
+    activeScope,
+}
+```
+
+Good:
+
+```ts
+const value = {
+    open,
+    activeScope }
+```
+
+Bad:
+
+```ts
+const value = useMemo (() => ({
+    open,
+    activeScope,
+}), [open, activeScope])
+```
+
+Good:
+
+```ts
+const value = useMemo (() => ({
+    open,
+    activeScope }), [open, activeScope])
+```
+
+Rule: object-literal `}` is associative-array-style syntax. It must not be on a
+line by itself. Keep it with the final property, and keep call `)` off the
+beginning of a line.
+
+#### Destructuring parameters
+
+Bad:
+
+```tsx
+const Component: FC<Props> = ({
+    open,
+    onOpenChange,
+}) => {
+  return null
+}
+```
+
+Good:
+
+```tsx
+const Component: FC<Props> = (
+    { open,
+      onOpenChange },
+) => {
+  return null
+}
+```
+
+Rule: when a React component or helper takes a destructured object parameter
+that spans multiple lines, do not use the Prettier-style `= ({ ... }) =>`
+shape. Put the function parameter list on its own lines. The destructuring `}`
+stays with the final binding. The parameter-list `)` is then allowed and
+required at the beginning of its own line.
+
+#### Inline typed destructuring parameter
+
+Good:
+
+```ts
+const RouteTransitionWrapper = ({ user, setUser }: {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>> }) => {
+  return null
+}
+```
+
+Bad:
+
+```ts
+const RouteTransitionWrapper = ({ user, setUser }: {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>>
+}) => {
+  return null
+}
+```
+
+Rule: this is not a separately split parameter-list block. The line break is
+inside the inline type. Keep the type-literal `}` and parameter-list `)` on the
+same line as the final type property.
+
+#### Multi-line normal parameter list
+
+Bad:
+
+```ts
+const updateDraft = <Key extends keyof Settings,> (
+    key: Key,
+    value: Settings[Key]) => {
+  return null
+}
+```
+
+Good:
+
+```ts
+const updateDraft = <Key extends keyof Settings,> (
+    key:    Key,
+    value:  Settings[Key],
+) => {
+  return null
+}
+```
+
+Rule: when the parameter list itself is split across multiple parameter lines,
+the closing parameter `)` goes at the beginning of its own line before `=>` or
+the return type.
+
+#### Function and callback blocks
+
+Bad:
+
+```ts
+const handleSave = () => { save ()
+}
+```
+
+Bad:
+
+```ts
+const handleSave = () => {
+  save () }
+```
+
+Good:
+
+```ts
+const handleSave = () => {
+  save ()
+}
+```
+
+Rule: block `}` closes executable code, not associative data. Multi-line
+function, lambda, callback, `if`, `for`, `switch`, and similar block braces
+belong on their own line.
+
+#### Function and method calls
+
+Bad:
+
+```ts
+const value = compute (
+    first,
+    second
+)
+```
+
+Good:
+
+```ts
+const value = compute (
+    first,
+    second)
+```
+
+Rule: call-expression `)` must not be at the beginning of a line. The exception
+for leading `)` applies only to function declaration parameter lists, never to
+calls.
+
+#### JSX closing markers
+
+Bad:
+
+```tsx
+<Button
+    type="button"
+    onClick={handleSave}
+>
+  保存
+</Button>
+)
+```
+
+Good:
+
+```tsx
+<Button
+    type="button"
+    onClick={handleSave}>
+  保存
+</Button>)
+```
+
+Bad:
+
+```tsx
+<Input
+    value={value}
+    onChange={handleChange}
+/>
+```
+
+Good:
+
+```tsx
+<Input
+    value={value}
+    onChange={handleChange}/>
+```
+
+Rule: keep `>` or `/>` with the final prop, and keep JSX closing parentheses in
+the local compact form such as `</div>)`.
+
+#### Arrays and tuples
+
+Bad:
+
+```ts
+const items = [
+    first,
+    second,
+]
+```
+
+Good:
+
+```ts
+const items = [
+    first,
+    second]
+```
+
+Good when short:
+
+```ts
+const items = [first, second]
+```
+
+Rule: array and tuple `]` must not be at the beginning of a line. Keep it with
+the final element unless that would break the hard line limit.
+
+#### Single-line braces
+
+Good:
+
+```ts
+const next = { ...current, enabled: true }
+const tag = { id, name }
+```
+
+Bad:
+
+```tsx
+<Component prop={ value }/>
+```
+
+Good:
+
+```tsx
+<Component prop={value}/>
+```
+
+Rule: JavaScript object braces on one line get one inner space. JSX expression
+braces do not get inner spaces.
+
+#### Final TSX self-review checklist
+
+Before reporting completion after a TypeScript or TSX edit, check the edited
+hunks line by line:
+
+1. No import/export/type/object/destructuring `}` appears alone at the beginning
+   of a line.
+2. No call-expression `)` appears at the beginning of a line.
+3. Any leading `)` is definitely closing a function declaration parameter list,
+   not a call.
+4. Any parameter-list `)` at the end of a line is valid because the parameter
+   list itself was not split, only an inline type or destructuring shape was.
+5. No array or tuple `]` appears at the beginning of a line.
+6. Multi-line executable block `}` is on its own line.
+7. JSX `>` and `/>` stay with the final prop unless nearby code proves
+   otherwise.
+8. JSX closing parentheses keep the compact local style.
+9. Leading indentation is 4-space logical indentation with tabs used only as
+   leading 8-space compression.
+10. No line has trailing whitespace.
+
 ## Lint and build constraints
 
 - ESLint uses `@eslint/js`, `typescript-eslint`, `eslint-plugin-react-hooks`,

frontend/src/components/PrefetchLink.tsx

@@ -7,7 +7,7 @@ import { useOverlayStore } from '@/components/RouteBlockerOverlay'
 import { prefetchForURL } from '@/lib/prefetchers'
 import { cn } from '@/lib/utils'
 
-import type { AnchorHTMLAttributes, KeyboardEvent, MouseEvent, TouchEvent } from 'react'
+import type { AnchorHTMLAttributes, MouseEvent, TouchEvent } from 'react'
 import type { To } from 'react-router-dom'
 
 type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
@@ -25,7 +25,6 @@ export default forwardRef<HTMLAnchorElement, Props> (({
     state,
     onMouseEnter,
     onTouchStart,
-    onKeyDown,
     onClick,
     cancelOnError = false,
     ...rest }, ref) => {
@@ -98,22 +97,11 @@ export default forwardRef<HTMLAnchorElement, Props> (({
     }
   }
 
-  const handleKeyDown = (ev: KeyboardEvent<HTMLAnchorElement>) => {
-    onKeyDown?.(ev)
-
-    if (ev.defaultPrevented)
-      return
-
-    if (ev.key === ' ' || ev.key === 'Spacebar')
-      ev.preventDefault ()
-  }
-
   return (
       <a ref={ref}
 	 href={typeof to === 'string' ? to : createPath (to)}
 	 onMouseEnter={handleMouseEnter}
 	 onTouchStart={handleTouchStart}
-	 onKeyDown={handleKeyDown}
 	 onClick={handleClick}
 	 className={cn ('cursor-pointer', className)}
 	 {...rest}/>)

frontend/src/components/users/BehaviorSettingsSection.tsx

@@ -0,0 +1,143 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import FormField from '@/components/common/FormField'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import {
+    getClientBehaviorSettings,
+    setClientBehaviorSettings,
+} from '@/lib/settings'
+import { inputClass } from '@/lib/utils'
+
+import type {
+    ClientAnimationMode,
+    ClientBehaviorSettings,
+    ClientEmbedAutoLoadMode,
+    ClientThumbnailMode,
+} from '@/lib/settings'
+import type { FC } from 'react'
+
+type Props = {
+    sectionClassName: string
+}
+
+
+const BehaviorSettingsSection: FC<Props> = ({ sectionClassName }) => {
+  const [savedSettings, setSavedSettings] =
+      useState<ClientBehaviorSettings> (() => getClientBehaviorSettings ())
+  const [draftSettings, setDraftSettings] =
+      useState<ClientBehaviorSettings> (() => getClientBehaviorSettings ())
+
+  useEffect (() => {
+    const current = getClientBehaviorSettings ()
+    setSavedSettings (current)
+    setDraftSettings (current)
+  }, [])
+
+  const hasUnsavedChanges = useMemo (
+      () => JSON.stringify (draftSettings) !== JSON.stringify (savedSettings),
+      [draftSettings, savedSettings],
+  )
+
+  const updateDraft = <Key extends keyof ClientBehaviorSettings,> (
+      key:    Key,
+      value:  ClientBehaviorSettings[Key],
+  ) => {
+    setDraftSettings (current => ({ ...current, [key]: value }))
+  }
+
+  const handleSave = () => {
+    const next = setClientBehaviorSettings (draftSettings)
+    setSavedSettings (next)
+    setDraftSettings (next)
+    toast ({ title: '動作設定を保存しました' })
+  }
+
+  const handleDiscard = () => {
+    setDraftSettings (savedSettings)
+  }
+
+  return (
+      <section className={sectionClassName}>
+	<div className="flex flex-wrap items-start justify-between gap-3">
+	  <div className="space-y-1">
+	    <h2 className="text-xl font-bold">動作</h2>
+	    <p className="text-sm text-muted-foreground">
+	      この設定は現在のブラウザに保存されます。
+	    </p>
+	    <p className="text-sm text-muted-foreground">
+	      重い端末や通信量を抑えたい場合に調整します。
+	    </p>
+	    {hasUnsavedChanges && (
+		<p className="text-sm text-amber-700 dark:text-amber-300">
+		  未保存の変更があります
+		</p>)}
+	  </div>
+
+	  <div className="flex flex-wrap gap-2">
+	    <Button
+		type="button"
+		variant="outline"
+		disabled={!(hasUnsavedChanges)}
+		onClick={handleDiscard}>
+	      変更を破棄
+	    </Button>
+	    <Button
+		type="button"
+		disabled={!(hasUnsavedChanges)}
+		onClick={handleSave}>
+	      保存
+	    </Button>
+	  </div>
+	</div>
+
+	<div className="grid gap-4 md:grid-cols-2">
+	  <FormField label="アニメーション">
+	    {() => (
+		<select
+		    className={inputClass (false)}
+		    value={draftSettings.animation ?? 'normal'}
+		    onChange={ev => updateDraft (
+			'animation',
+			ev.target.value as ClientAnimationMode,
+		    )}>
+		  <option value="normal">通常</option>
+		  <option value="reduced">控えめ</option>
+		  <option value="off">なし</option>
+		</select>)}
+	  </FormField>
+
+	  <FormField label="埋め込み自動読込">
+	    {() => (
+		<select
+		    className={inputClass (false)}
+		    value={draftSettings.embedAutoLoad ?? 'auto'}
+		    onChange={ev => updateDraft (
+			'embedAutoLoad',
+			ev.target.value as ClientEmbedAutoLoadMode,
+		    )}>
+		  <option value="auto">自動</option>
+		  <option value="manual">クリック時</option>
+		  <option value="off">読み込まない</option>
+		</select>)}
+	  </FormField>
+
+	  <FormField label="サムネイル表示">
+	    {() => (
+		<select
+		    className={inputClass (false)}
+		    value={draftSettings.thumbnailMode ?? 'normal'}
+		    onChange={ev => updateDraft (
+			'thumbnailMode',
+			ev.target.value as ClientThumbnailMode,
+		    )}>
+		  <option value="normal">通常</option>
+		  <option value="light">軽量</option>
+		  <option value="off">非表示</option>
+		</select>)}
+	  </FormField>
+	</div>
+      </section>)
+}
+
+export default BehaviorSettingsSection

frontend/src/components/users/ShortcutHelpDialog.tsx

@@ -24,14 +24,24 @@ type Props = {
     activeScope:        ShortcutScope
     effectiveBindings:  Record<ShortcutActionId, KeyBinding | null>
     conflictActionIds:  Set<ShortcutActionId>
+    availableActionIds: Set<ShortcutActionId>
 }
 
 
 const ShortcutHelpDialog: FC<Props> = (
-    { open, onOpenChange, activeScope, effectiveBindings, conflictActionIds },
+    {
+	open,
+	onOpenChange,
+	activeScope,
+	effectiveBindings,
+	conflictActionIds,
+	availableActionIds,
+    },
 ) => {
-  const rows = SHORTCUT_DEFINITIONS.filter (definition =>
+  const rows = SHORTCUT_DEFINITIONS
+      .filter (definition =>
 	  definition.scope === 'global' || definition.scope === activeScope)
+      .filter (definition => availableActionIds.has (definition.id))
 
   return (
       <Dialog open={open} onOpenChange={onOpenChange}>

frontend/src/index.css

@@ -134,6 +134,21 @@
   line-height: 1.25;
 }
 
+:root[data-animation='reduced'] *,
+:root[data-animation='off'] *
+{
+  scroll-behavior: auto !important;
+}
+
+:root[data-animation='off'] *,
+:root[data-animation='off'] *::before,
+:root[data-animation='off'] *::after
+{
+  animation-duration: 0.001ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.001ms !important;
+}
+
 a
 {
   font-weight: 500;

frontend/src/lib/keyboardShortcuts.ts

@@ -19,6 +19,7 @@ export type ShortcutActionId =
     | 'settings.account'
     | 'settings.theme'
     | 'settings.keyboard'
+    | 'settings.behavior'
 
 export type KeyBinding = {
     key:    string
@@ -112,6 +113,12 @@ export const SHORTCUT_DEFINITIONS: ShortcutDefinition[] = [
 	scope:           'settings',
 	defaultBinding:  { key: '3' },
     },
+    {
+	id:              'settings.behavior',
+	label:           '設定: 動作',
+	scope:           'settings',
+	defaultBinding:  { key: '4' },
+    },
 ]
 
 export const SHORTCUT_DEFINITIONS_BY_ID =
@@ -132,6 +139,7 @@ export const SHORTCUT_DEFINITIONS_BY_ID =
 	    'settings.account': SHORTCUT_DEFINITIONS[8],
 	    'settings.theme': SHORTCUT_DEFINITIONS[9],
 	    'settings.keyboard': SHORTCUT_DEFINITIONS[10],
+	    'settings.behavior': SHORTCUT_DEFINITIONS[11],
 	},
     )
 
@@ -153,6 +161,7 @@ export const DEFAULT_KEY_BINDINGS =
 	    'settings.account': null,
 	    'settings.theme': null,
 	    'settings.keyboard': null,
+	    'settings.behavior': null,
 	},
     )
 

frontend/src/lib/settings.ts

@@ -51,6 +51,9 @@ export type CustomClientTheme =
 export type TheatreLayoutMode = 'threeColumns' | 'tagsBottom' | 'commentsBottom'
 export type TheatreTagFlow = 'vertical' | 'horizontal'
 export type GekanatorBackgroundMotionMode = 'on' | 'calm' | 'off'
+export type ClientAnimationMode = 'normal' | 'reduced' | 'off'
+export type ClientEmbedAutoLoadMode = 'auto' | 'manual' | 'off'
+export type ClientThumbnailMode = 'normal' | 'light' | 'off'
 export type ClientPaneBreakpoint = 'desktop' | 'tablet'
 export type ClientListKey = 'postList' | 'postSearch' | 'tagList'
 export type ClientListLimit = 20 | 50 | 100
@@ -75,6 +78,12 @@ export type ClientAppearanceSettings = {
     theme?:         UserSettings['theme']
     tagColours?:    Partial<ThemeTagColours> }
 
+export type ClientBehaviorSettings = {
+    animation?:        ClientAnimationMode
+    embedAutoLoad?:    ClientEmbedAutoLoadMode
+    thumbnailMode?:    ClientThumbnailMode
+}
+
 // DB-backed settings. At present only `theme` is surfaced in `/users/settings`.
 // The remaining fields are retained for existing backend work and are not wired
 // to the common settings UI yet.
@@ -87,6 +96,7 @@ export const DEFAULT_USER_SETTINGS: UserSettings = {
 // Browser-local settings only. These are device or screen specific.
 export type ClientSettings = {
     appearance?:    ClientAppearanceSettings
+    behavior?:      ClientBehaviorSettings
     keyboard?:      ClientKeyboardSettings
     panes?:         Record<string, ClientPaneSettings>
     lists?:         Partial<Record<ClientListKey, ClientListSettings>>
@@ -303,6 +313,25 @@ const validListLimit = (value: unknown): ClientListLimit | null =>
     value === 20 || value === 50 || value === 100 ? value : null
 
 
+const normaliseAnimationMode = (value: unknown): ClientAnimationMode | null => {
+  if (value === 'normal' || value === 'reduced' || value === 'off')
+    return value
+  if (value === 'true')
+    return 'reduced'
+  if (value === 'false')
+    return 'normal'
+  return null
+}
+
+
+const normaliseEmbedAutoLoadMode = (value: unknown): ClientEmbedAutoLoadMode | null =>
+    value === 'auto' || value === 'manual' || value === 'off' ? value : null
+
+
+const normaliseThumbnailMode = (value: unknown): ClientThumbnailMode | null =>
+    value === 'normal' || value === 'light' || value === 'off' ? value : null
+
+
 const normaliseKeyboardBindings = (
     bindings: unknown,
 ): Partial<Record<ShortcutActionId, KeyBinding | null>> => {
@@ -341,6 +370,110 @@ export const getClientKeyboardSettings = (): ClientKeyboardSettings => {
 }
 
 
+const legacyAnimationMode = (): ClientAnimationMode | null =>
+    normaliseAnimationMode (loadClientSettings ().reducedMotion)
+
+
+const legacyEmbedAutoLoadMode = (): ClientEmbedAutoLoadMode | null =>
+    normaliseEmbedAutoLoadMode (loadClientSettings ().embedAutoLoad)
+
+
+const legacyThumbnailMode = (): ClientThumbnailMode | null =>
+    normaliseThumbnailMode (loadClientSettings ().thumbnailMode)
+
+
+export const getClientAnimationMode = (): ClientAnimationMode =>
+    loadClientSettings ().behavior?.animation
+    ?? legacyAnimationMode ()
+    ?? 'normal'
+
+
+export const applyClientAnimationMode = (mode: ClientAnimationMode): void => {
+  if (typeof document === 'undefined')
+    return
+
+  if (mode === 'normal')
+    {
+      delete document.documentElement.dataset.animation
+      return
+    }
+
+  document.documentElement.dataset.animation = mode
+}
+
+
+export const setClientAnimationMode = (
+    animation: ClientAnimationMode,
+): ClientBehaviorSettings =>
+    setClientBehaviorSettings ({
+	...getClientBehaviorSettings (),
+	animation,
+    })
+
+export const getClientEmbedAutoLoadMode = (): ClientEmbedAutoLoadMode =>
+    loadClientSettings ().behavior?.embedAutoLoad
+    ?? legacyEmbedAutoLoadMode ()
+    ?? 'auto'
+
+
+export const setClientEmbedAutoLoadMode = (
+    embedAutoLoad: ClientEmbedAutoLoadMode,
+): ClientBehaviorSettings =>
+    setClientBehaviorSettings ({
+	...getClientBehaviorSettings (),
+	embedAutoLoad,
+    })
+
+
+export const getClientThumbnailMode = (): ClientThumbnailMode =>
+    loadClientSettings ().behavior?.thumbnailMode
+    ?? legacyThumbnailMode ()
+    ?? 'normal'
+
+
+export const setClientThumbnailMode = (
+    thumbnailMode: ClientThumbnailMode,
+): ClientBehaviorSettings =>
+    setClientBehaviorSettings ({
+	...getClientBehaviorSettings (),
+	thumbnailMode,
+    })
+
+
+export const getClientBehaviorSettings = (): ClientBehaviorSettings => ({
+    animation:        getClientAnimationMode (),
+    embedAutoLoad:    getClientEmbedAutoLoadMode (),
+    thumbnailMode:    getClientThumbnailMode (),
+})
+
+
+export const setClientBehaviorSettings = (
+    behavior: ClientBehaviorSettings,
+): ClientBehaviorSettings => {
+  const next: ClientBehaviorSettings = {
+      animation: (
+	  normaliseAnimationMode (behavior.animation)
+	  ?? getClientAnimationMode ()
+      ),
+      embedAutoLoad: (
+	  normaliseEmbedAutoLoadMode (behavior.embedAutoLoad)
+	  ?? getClientEmbedAutoLoadMode ()
+      ),
+      thumbnailMode: (
+	  normaliseThumbnailMode (behavior.thumbnailMode)
+	  ?? getClientThumbnailMode ()
+      ),
+  }
+
+  updateClientSettings (settings => ({
+      ...settings,
+      behavior: next,
+  }))
+  applyClientAnimationMode (next.animation ?? 'normal')
+  return next
+}
+
+
 export const setClientKeyboardSettings = (
     keyboard: ClientKeyboardSettings,
 ): ClientKeyboardSettings => {
@@ -921,7 +1054,8 @@ export const setClientGekanatorBackgroundMotion = (
 ): void => {
   updateClientSettings (settings => ({
       ...settings,
-      gekanator: { ...(settings.gekanator ?? { }), backgroundMotion } }))
+      gekanator: { ...(settings.gekanator ?? { }), backgroundMotion },
+  }))
 }
 
 

frontend/src/lib/useKeyboardShortcuts.tsx

@@ -23,9 +23,6 @@ import {
 import {
     getClientKeyboardSettings,
     getEffectiveKeyBindings,
-    resetAllClientKeyBindings,
-    resetClientKeyBinding,
-    setClientKeyBinding,
     setClientKeyboardSettings,
 } from '@/lib/settings'
 
@@ -46,10 +43,6 @@ type KeyboardShortcutsContextValue = {
     effectiveBindings:     Record<ShortcutActionId, KeyBinding | null>
     conflictActionIds:     Set<ShortcutActionId>
     saveKeyboardSettings: (settings: ClientKeyboardSettings) => void
-    setEnabled:         (enabled: boolean) => void
-    setBinding:         (actionId: ShortcutActionId, binding: KeyBinding | null) => void
-    resetBinding:       (actionId: ShortcutActionId) => void
-    resetAllBindings:   () => void
     registerHandlers:      (handlers: ShortcutHandlers) => () => void
 }
 
@@ -131,37 +124,11 @@ export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
       [registeredHandlers],
   )
 
-  const setEnabled = useCallback ((enabled: boolean) => {
-    const next = setClientKeyboardSettings ({
-	...keyboardSettings,
-	enabled,
-    })
-    setKeyboardSettingsState (next)
-  }, [keyboardSettings])
-
   const saveKeyboardSettings = useCallback ((settings: ClientKeyboardSettings) => {
     const next = setClientKeyboardSettings (settings)
     setKeyboardSettingsState (next)
   }, [])
 
-  const setBinding = useCallback ((
-      actionId: ShortcutActionId,
-      binding:  KeyBinding | null,
-  ) => {
-    const next = setClientKeyBinding (actionId, binding)
-    setKeyboardSettingsState (next)
-  }, [])
-
-  const resetBinding = useCallback ((actionId: ShortcutActionId) => {
-    const next = resetClientKeyBinding (actionId)
-    setKeyboardSettingsState (next)
-  }, [])
-
-  const resetAllBindings = useCallback (() => {
-    const next = resetAllClientKeyBindings ()
-    setKeyboardSettingsState (next)
-  }, [])
-
   const registerHandlers = useCallback ((handlers: ShortcutHandlers) => {
     const registrationId = ++registrationIdRef.current
 
@@ -179,6 +146,39 @@ export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
     }
   }, [])
 
+  const builtinHandlers = useMemo<ShortcutHandlers> (
+      () => ({
+	  'global.openShortcutHelp': () => {
+	    setShortcutHelpOpen (true)
+	  },
+	  'global.focusSearch': () => {
+	    focusSearchTarget ()
+	  },
+	  'navigation.posts': () => navigate ('/posts'),
+	  'navigation.tags': () => navigate ('/tags'),
+	  'navigation.materials': () => navigate ('/materials'),
+	  'navigation.wiki': () => navigate ('/wiki'),
+	  'settings.account': () => navigate ('/users/settings?tab=account'),
+	  'settings.theme': () => navigate ('/users/settings?tab=theme'),
+	  'settings.keyboard': () => navigate ('/users/settings?tab=keyboard'),
+	  'settings.behavior': () => navigate ('/users/settings?tab=behavior'),
+      }),
+      [navigate],
+  )
+
+  const availableActionIds = useMemo<Set<ShortcutActionId>> (
+      () => new Set (
+	  SHORTCUT_DEFINITIONS
+	      .filter (definition =>
+		  definition.scope === 'global' || definition.scope === activeScope)
+	      .filter (definition =>
+		  builtinHandlers[definition.id] != null
+		  || mergedRegisteredHandlers[definition.id] != null)
+	      .map (definition => definition.id),
+      ),
+      [activeScope, builtinHandlers, mergedRegisteredHandlers],
+  )
+
   useEffect (() => {
     const onKeyDown = (event: KeyboardEvent) => {
       if (
@@ -219,24 +219,7 @@ export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
 	return
 
       const actionId = candidates[0].id
-      const builtinHandler = (
+      const handler = builtinHandlers[actionId] ?? mergedRegisteredHandlers[actionId]
-	  {
-	      'global.openShortcutHelp': () => {
-		  setShortcutHelpOpen (true)
-	      },
-	      'global.focusSearch': () => {
-		  focusSearchTarget ()
-	      },
-	      'navigation.posts': () => navigate ('/posts'),
-	      'navigation.tags': () => navigate ('/tags'),
-	      'navigation.materials': () => navigate ('/materials'),
-	      'navigation.wiki': () => navigate ('/wiki'),
-	      'settings.account': () => navigate ('/users/settings?tab=account'),
-	      'settings.theme': () => navigate ('/users/settings?tab=theme'),
-	      'settings.keyboard': () => navigate ('/users/settings?tab=keyboard'),
-	  } as ShortcutHandlers
-      )[actionId]
-      const handler = builtinHandler ?? mergedRegisteredHandlers[actionId]
 
       if (handler == null)
 	return
@@ -251,9 +234,9 @@ export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
       activeScope,
       conflictActionIds,
       effectiveBindings,
+      builtinHandlers,
       keyboardSettings.enabled,
       mergedRegisteredHandlers,
-      navigate,
       shortcutHelpOpen,
   ])
 
@@ -262,11 +245,7 @@ export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
       keyboardSettings,
       effectiveBindings,
       conflictActionIds,
-      setEnabled,
       saveKeyboardSettings,
-      setBinding,
-      resetBinding,
-      resetAllBindings,
       registerHandlers,
   }), [
       activeScope,
@@ -274,11 +253,7 @@ export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
       effectiveBindings,
       keyboardSettings,
       registerHandlers,
-      resetAllBindings,
-      resetBinding,
       saveKeyboardSettings,
-      setBinding,
-      setEnabled,
   ])
 
   return (
@@ -289,7 +264,8 @@ export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
 	    onOpenChange={setShortcutHelpOpen}
 	    activeScope={activeScope}
 	    effectiveBindings={effectiveBindings}
-	    conflictActionIds={conflictActionIds}/>
+	    conflictActionIds={conflictActionIds}
+	    availableActionIds={availableActionIds}/>
       </KeyboardShortcutsContext.Provider>)
 }
 

frontend/src/main.tsx

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

frontend/src/pages/users/SettingPage.tsx

@@ -8,6 +8,7 @@ import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import TagLink from '@/components/TagLink'
+import BehaviorSettingsSection from '@/components/users/BehaviorSettingsSection'
 import KeyboardSettingsSection from '@/components/users/KeyboardSettingsSection'
 import InheritDialogue from '@/components/users/InheritDialogue'
 import UserCodeDialogue from '@/components/users/UserCodeDialogue'
@@ -48,7 +49,7 @@ type Props = {
 
 type UserFormField = 'name'
 type SettingsFormField = 'theme'
-type SettingsTab = 'account' | 'theme' | 'keyboard'
+type SettingsTab = 'account' | 'theme' | 'keyboard' | 'behavior'
 
 type TabSpec = {
     id:     SettingsTab
@@ -79,7 +80,8 @@ type SharedSectionProps = {
 const tabs: TabSpec[] = [
     { id: 'account', label: 'アカウント' },
     { id: 'theme', label: 'テーマ' },
-    { id: 'keyboard', label: 'キーボード' } ]
+    { id: 'keyboard', label: 'キーボード' },
+    { id: 'behavior', label: '動作' } ]
 
 const sectionClassName =
     'space-y-4 rounded-xl border border-border bg-background/80 p-4'
@@ -379,7 +381,8 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
       () => (
 	  { account: Boolean (userFieldErrors.name?.length),
 	    theme: Boolean (settingsFieldErrors.theme?.length),
-	    keyboard: conflictActionIds.size > 0 }),
+	    keyboard: conflictActionIds.size > 0,
+	    behavior: false }),
       [conflictActionIds.size, settingsFieldErrors.theme, userFieldErrors.name])
 
   const applyDraftThemeSelection = (
@@ -689,6 +692,8 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 		{sectionProps && activeTab === 'theme' && <ThemeSection {...sectionProps}/>}
 		{activeTab === 'keyboard' && (
 		    <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
+		{activeTab === 'behavior' && (
+		    <BehaviorSettingsSection sectionClassName={sectionClassName}/>)}
 	      </div>)}
 	</div>
 
@@ -736,6 +741,8 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			  {activeTab === 'theme' && <ThemeSection {...sectionProps}/>}
 			  {activeTab === 'keyboard' && (
 			      <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
+			  {activeTab === 'behavior' && (
+			      <BehaviorSettingsSection sectionClassName={sectionClassName}/>)}
 			</>)}
 		  </div>)}
 	    </div>