#34

backend/db/schema.rb

@@ -72,7 +72,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     t.index ["correct_post_id"], name: "index_gekanator_games_on_correct_post_id"
     t.index ["guessed_post_id"], name: "index_gekanator_games_on_guessed_post_id"
     t.index ["user_id"], name: "index_gekanator_games_on_user_id"
-    t.check_constraint "`question_count` >= 0", name: "chk_gekanator_games_question_count_nonnegative"
   end
 
   create_table "gekanator_question_examples", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -275,10 +274,9 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     t.datetime "created_at", null: false
     t.bigint "created_by_user_id"
     t.index ["created_at"], name: "index_nico_tag_versions_on_created_at"
-    t.index ["created_by_user_id", "created_at"], name: "index_nico_tag_versions_on_created_by_user_id_and_created_at", order: { created_at: :desc }
+    t.index ["created_by_user_id", "created_at"], name: "index_nico_tag_versions_on_created_by_user_id_and_created_at"
-    t.index ["tag_id", "created_at"], name: "index_nico_tag_versions_on_tag_id_and_created_at", order: { created_at: :desc }
+    t.index ["tag_id", "created_at"], name: "index_nico_tag_versions_on_tag_id_and_created_at"
     t.index ["tag_id", "version_no"], name: "index_nico_tag_versions_on_tag_id_and_version_no", unique: true
-    t.check_constraint "`version_no` > 0", name: "nico_tag_versions_version_no_positive"
   end
 
   create_table "post_implications", primary_key: ["post_id", "parent_post_id"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -287,14 +285,13 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.index ["parent_post_id"], name: "index_post_implications_on_parent_post_id"
-    t.check_constraint "`post_id` <> `parent_post_id`", name: "chk_post_implications_no_self"
   end
 
   create_table "post_similarities", primary_key: ["post_id", "target_post_id"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "post_id", null: false
     t.bigint "target_post_id", null: false
     t.float "cos", null: false
-    t.index ["post_id", "cos"], name: "index_post_similarities_on_post_id_and_cos", order: { cos: :desc }
+    t.index ["post_id", "cos"], name: "index_post_similarities_on_post_id_and_cos"
     t.index ["target_post_id"], name: "index_post_similarities_on_target_post_id"
   end
 
@@ -350,8 +347,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     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
 
   create_table "posts", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -369,7 +364,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     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|
@@ -383,19 +377,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     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|
     t.bigint "tag_id", null: false
     t.bigint "parent_tag_id", null: false
@@ -431,7 +412,7 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     t.bigint "tag_id", null: false
     t.bigint "target_tag_id", null: false
     t.float "cos", null: false
-    t.index ["tag_id", "cos"], name: "index_tag_similarities_on_tag_id_and_cos", order: { cos: :desc }
+    t.index ["tag_id", "cos"], name: "index_tag_similarities_on_tag_id_and_cos"
     t.index ["target_tag_id"], name: "index_tag_similarities_on_target_tag_id"
   end
 
@@ -447,10 +428,9 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     t.datetime "created_at", null: false
     t.bigint "created_by_user_id"
     t.index ["created_at"], name: "index_tag_versions_on_created_at"
-    t.index ["created_by_user_id", "created_at"], name: "index_tag_versions_on_created_by_user_id_and_created_at", order: { created_at: :desc }
+    t.index ["created_by_user_id", "created_at"], name: "index_tag_versions_on_created_by_user_id_and_created_at"
-    t.index ["tag_id", "created_at"], name: "index_tag_versions_on_tag_id_and_created_at", order: { created_at: :desc }
+    t.index ["tag_id", "created_at"], name: "index_tag_versions_on_tag_id_and_created_at"
     t.index ["tag_id", "version_no"], name: "index_tag_versions_on_tag_id_and_version_no", unique: true
-    t.check_constraint "`version_no` > 0", name: "tag_versions_version_no_positive"
   end
 
   create_table "tags", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -466,7 +446,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     t.index ["discarded_at"], name: "index_tags_on_discarded_at"
     t.index ["tag_name_id"], name: "index_tags_on_tag_name_id", unique: true
     t.check_constraint "(`deprecated_at` is null) or (`category` <> _utf8mb4'nico')", name: "chk_tags_deprecated_at_not_nico"
-    t.check_constraint "`version_no` > 0", name: "chk_tags_version_no_positive"
   end
 
   create_table "theatre_comments", primary_key: ["theatre_id", "no"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -620,13 +599,11 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.datetime "discarded_at"
-    t.integer "next_asset_no", default: 1, null: false
     t.integer "version_no", null: false
     t.index ["created_user_id"], name: "index_wiki_pages_on_created_user_id"
     t.index ["discarded_at"], name: "index_wiki_pages_on_discarded_at"
     t.index ["tag_name_id"], name: "index_wiki_pages_on_tag_name_id", unique: true
     t.index ["updated_user_id"], name: "index_wiki_pages_on_updated_user_id"
-    t.check_constraint "`version_no` > 0", name: "chk_wiki_pages_version_no_positive"
   end
 
   create_table "wiki_revision_lines", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
@@ -671,8 +648,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
     t.index ["created_by_user_id"], name: "index_wiki_versions_on_created_by_user_id"
     t.index ["wiki_page_id", "version_no"], name: "index_wiki_versions_on_wiki_page_id_and_version_no", unique: true
     t.index ["wiki_page_id"], name: "index_wiki_versions_on_wiki_page_id"
-    t.check_constraint "`event_type` in (_utf8mb4'create',_utf8mb4'update',_utf8mb4'discard',_utf8mb4'restore')", name: "wiki_versions_event_type_valid"
-    t.check_constraint "`version_no` > 0", name: "wiki_versions_version_no_positive"
   end
 
   add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
@@ -754,8 +729,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
   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"
   add_foreign_key "wiki_pages", "users", column: "created_user_id"
   add_foreign_key "wiki_pages", "users", column: "updated_user_id"

backend/spec/models/setting_spec.rb

@@ -1,34 +0,0 @@
-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/user_theme_slot_spec.rb

@@ -1,40 +0,0 @@
-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/user_settings_spec.rb

@@ -1,98 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
-import { Fragment, useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { BrowserRouter,
 	 Navigate,
 	 Route,
@@ -12,9 +12,7 @@ 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,
+import { applyClientAppearance,
-	 applyClientAppearance,
-	 type ClientAnimationMode,
 	 fetchUserThemeSlots,
 	 fetchUserSettings,
 	 getClientThemeMode,
@@ -62,51 +60,11 @@ import type { Dispatch, FC, SetStateAction } from 'react'
 import type { User } from '@/types'
 
 
-const RouteTransitionWrapper = ({ animationMode, user, setUser }: {
+const RouteTransitionWrapper = ({ 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/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}>
@@ -159,7 +117,6 @@ const App: FC = () => {
   const [status, setStatus] = useState (200)
   const behaviourSettings = useClientBehaviourSettings ()
   const animationMode = behaviourSettings.animation ?? 'normal'
-  const LayoutWrapper = animationMode === 'off' ? Fragment : LayoutGroup
 
   const appLayoutTransition = useMemo (
       () => (
@@ -185,10 +142,6 @@ const App: FC = () => {
     return () => mediaQuery.removeEventListener ('change', handleThemeChange)
   }, [])
 
-  useEffect (() => {
-    applyClientAnimationMode (animationMode)
-  }, [animationMode])
-
   useEffect (() => {
     const createUser = async () => {
       const data = await apiPost<{ code: string; user: User }> ('/users')
@@ -269,18 +222,15 @@ const App: FC = () => {
 			? 'user'
 			: 'always'
 		  }>
-		<LayoutWrapper>
+		<LayoutGroup>
 		  <motion.div
 		      layout={animationMode === 'off' ? false : 'position'}
 		      transition={{ layout: appLayoutTransition }}
 		      className="relative flex flex-col h-dvh w-full overflow-y-hidden">
 		    <TopNav user={user}/>
-		    <RouteTransitionWrapper
+		    <RouteTransitionWrapper user={user} setUser={setUser}/>
-			animationMode={animationMode}
-			user={user}
-			setUser={setUser}/>
 		  </motion.div>
-		</LayoutWrapper>
+		</LayoutGroup>
 	      </MotionConfig>
 
 	      <Toaster/>

frontend/src/components/DraggableDroppableTagRow.test.tsx

@@ -1,75 +0,0 @@
-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,8 +4,6 @@ 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'
@@ -13,7 +11,6 @@ import type { CSSProperties, FC, MutableRefObject } from 'react'
 import type { Tag } from '@/types'
 
 type Props = {
-    activeDndId?:      string
     tag:              Tag
     nestLevel:        number
     pathKey:          string
@@ -22,21 +19,7 @@ type Props = {
     sp?:              boolean }
 
 
-const DraggableDroppableTagRow: FC<Props> = ({
+const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }) => {
-    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)
@@ -62,23 +45,18 @@ const DraggableDroppableTagRow: FC<Props> = ({
   const { attributes,
 	  listeners,
 	  setNodeRef: setDragRef,
-	  transform } = useDraggable ({ id:    dndId,
+	  transform,
-					data:  { kind:   'tag',
+	  isDragging: dragging } = useDraggable ({ id:    dndId,
-						 dndId,
+						   data:  { kind:   'tag',
-						 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:  activeDragging ? 'hidden' : 'visible' }
+				 visibility:  dragging ? 'hidden' : 'visible' }
-  const innerClassName = cn (
-      'inline-flex min-w-0 max-w-full items-baseline overflow-hidden',
-      sp && 'touch-pan-y')
 
   return (
       <div
@@ -91,16 +69,12 @@ const DraggableDroppableTagRow: FC<Props> = ({
 	      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)
 	      {
@@ -108,35 +82,22 @@ const DraggableDroppableTagRow: FC<Props> = ({
 		e.stopPropagation ()
 	      }
 	  }}
-	  ref={setDropRef}
+	  ref={node => {
+	    setDragRef (node)
+	    setDropRef (node)
+	  }}
+	  style={style}
 	  className={cn (
 	      'min-w-0 max-w-full overflow-hidden rounded select-none',
-	      sp && 'touch-pan-y',
 	      over && 'ring-2 ring-offset-2')}
-	  >
+	  {...attributes}
-	{activeDragging
+	  {...listeners}>
-	 ? (
+	<motion.div
-	    <div
+	    className="flex min-w-0 max-w-full items-baseline overflow-hidden"
-		ref={setDragRef}
+	    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
-		style={style}
+	    layoutId={`tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
-		className={innerClassName}
+	  <TagLink tag={tag} nestLevel={nestLevel}/>
-		{...attributes}
+	</motion.div>
-		{...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>)
 }
 

frontend/src/components/ResponsiveMarqueeText.tsx

@@ -1,4 +1,3 @@
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
 import { useEffect, useRef, useState } from 'react'
 
@@ -21,8 +20,6 @@ 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)
@@ -101,7 +98,6 @@ const ResponsiveMarqueeText: FC<Props> = (
     const animated = animatedRef.current
     const canMarquee = (
         active
-        && animationMode !== 'off'
         && desktopMarqueeEnabled
         && overflowPx >= MIN_MARQUEE_OVERFLOW_PX
         && animated != null)
@@ -211,7 +207,7 @@ const ResponsiveMarqueeText: FC<Props> = (
       resetAnimated ()
       setMarqueeVisible (false)
     }
-  }, [active, animationMode, desktopMarqueeEnabled, overflowPx, text])
+  }, [active, desktopMarqueeEnabled, overflowPx, text])
 
   return (
       <span

frontend/src/components/TagDetailSidebar.tsx

@@ -1,13 +1,11 @@
 import { DndContext,
 	 DragOverlay,
-	 MeasuringStrategy,
 	 MouseSensor,
 	 TouchSensor,
-	 pointerWithin,
 	 useDroppable,
 	 useSensor,
 	 useSensors } from '@dnd-kit/core'
-import { restrictToWindowEdges, snapCenterToCursor } from '@dnd-kit/modifiers'
+import { restrictToWindowEdges } from '@dnd-kit/modifiers'
 import { useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -22,28 +20,22 @@ 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 { CollisionDetection, DragEndEvent } from '@dnd-kit/core'
+import type { DragEndEvent } from '@dnd-kit/core'
 import type { FC, MutableRefObject, ReactNode } from 'react'
 
 import type { Category, Post, TagWithSections } from '@/types'
 
 type TagByCategory = { [key in Category]: TagWithSections[] }
-
+type FlatTagRow = {
-const tagCollisionDetection: CollisionDetection = args => {
+    tag:          TagWithSections
-  return pointerWithin (args)
+    parentTagId?: number }
-}
-
-const alwaysMeasureDroppables = {
-    droppable: { strategy: MeasuringStrategy.Always } } as const
 
 
 const renderTagTree = (
-    activeDndId:       string | undefined,
     tag:              TagWithSections,
     nestLevel:        number,
     path:             string,
@@ -55,7 +47,6 @@ const renderTagTree = (
   const self = (
       <li key={key} className="mb-1">
 	<DraggableDroppableTagRow
-	    activeDndId={activeDndId}
 	    tag={tag}
 	    nestLevel={nestLevel}
 	    pathKey={key}
@@ -69,17 +60,38 @@ const renderTagTree = (
       ...((tag.children
 	   ?.sort ((a, b) => a.name < b.name ? -1 : 1)
 	   .flatMap (child =>
-	      renderTagTree (
+	      renderTagTree (child, nestLevel + 1, key, suppressClickRef, tag.id, sp)))
-		  activeDndId,
-		  child,
-		  nestLevel + 1,
-		  key,
-		  suppressClickRef,
-		  tag.id,
-		  sp)))
 	  ?? [])]
 }
 
+
+const flattenTagTree = (
+    tags: TagWithSections[],
+): FlatTagRow[] => {
+  const seen = new Set<number> ()
+  const rows: FlatTagRow[] = []
+
+  const visit = (
+      tag:           TagWithSections,
+      parentTagId?:  number,
+  ) => {
+    if (seen.has (tag.id))
+      return
+
+    seen.add (tag.id)
+    rows.push ({ tag, parentTagId })
+
+    for (const child of tag.children ?? [])
+      visit (child, tag.id)
+  }
+
+  for (const tag of tags)
+    visit (tag)
+
+  return rows.sort ((rowA, rowB) => rowA.tag.name < rowB.tag.name ? -1 : 1)
+}
+
+
 const isDescendant = (
     root:     TagWithSections,
     targetId: number,
@@ -146,37 +158,6 @@ 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> => {
@@ -195,35 +176,12 @@ 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 } })
-
-  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>)
-}
-
 
 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)
@@ -231,11 +189,6 @@ const TagDetailSidebar: FC<Props> = ({ className, post, 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
@@ -253,15 +206,10 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
     return tagsTmp
   }, [post])
 
-  const [activeTagDrag, setActiveTagDrag] = useState<ActiveTagDrag | null> (null)
+  const [activeTagId, setActiveTagId] = useState<number | 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)
 
@@ -370,19 +318,9 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 	<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'
@@ -393,80 +331,57 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 		suppressClickRef.current = false}, { capture: true, once: true })
 	    }}
 	    onDragCancel={() => {
-	      setActiveTagDrag (null)
+	      setActiveTagId (null)
 	      setDragging (false)
 	      document.body.style.userSelect = ''
 	      suppressClickRef.current = false
 	    }}
 	    onDragEnd={async e => {
-	      setActiveTagDrag (null)
+	      setActiveTagId (null)
 	      setDragging (false)
 	      await onDragEnd (e)
 	      document.body.style.userSelect = ''
 	    }}
 	    modifiers={[restrictToWindowEdges]}>
-	  {CATEGORIES.map ((cat: Category) => {
+	  {CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && (
-	    const categoryTags =
+	      <div className="my-3" key={cat}>
-		tagRelationDisplay === 'grouped'
-		? (tags[cat] ?? [])
-		: (flatTagsByCategory[cat] ?? [])
-
-	    if (!(categoryTags.length > 0 || dragging))
-	      return null
-
-	    const sectionTitle = (
 		<SubsectionTitle>
 		  <motion.div
-		      layoutId={animationMode === 'off'
+		      layoutId={`tag-${ sp ? 'sp-' : '' }${ cat }`}
-			  ? undefined
+		      transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
-			  : `tag-${ sp ? 'sp-' : '' }${ cat }`}
-		      transition={{ layout: layoutTransition }}>
 		    {CATEGORY_NAMES[cat]}
 		  </motion.div>
-		</SubsectionTitle>)
+		</SubsectionTitle>
 
-	    if (!(categoryTags.length > 0))
+		<ul>
-	      return (
+		  {(tagRelationDisplay === 'grouped'
-		  <EmptyCategoryDropSection cat={cat} key={cat}>
+		    ? (tags[cat] ?? []).flatMap (tag =>
-		    {sectionTitle}
+			  renderTagTree (
-		  </EmptyCategoryDropSection>)
+			      tag,
-
+			      0,
-	    return (
+			      `cat-${ cat }`,
-		<div className="my-3" key={cat}>
+			      suppressClickRef,
-		  {sectionTitle}
+			      undefined,
-		  <ul>
+			      sp,
-		    {(tagRelationDisplay === 'grouped'
+			  ),
-		      ? (tags[cat] ?? []).flatMap (tag =>
+		      )
-			    renderTagTree (
+		    : flattenTagTree (tags[cat] ?? []).map (row => (
-				activeDndId,
+			<li key={`flat-${ cat }-${ row.tag.id }`} className="mb-1">
-				tag,
+			  <DraggableDroppableTagRow
-				0,
+			      tag={row.tag}
-				`cat-${ cat }`,
+			      nestLevel={0}
-				suppressClickRef,
+			      pathKey={`flat-${ cat }-${ row.tag.id }`}
-				undefined,
+			      parentTagId={row.parentTagId}
-				sp,
+			      suppressClickRef={suppressClickRef}
-			    ),
+			      sp={sp}/>
-			)
+			</li>)))}
-		      : (flatTagsByCategory[cat] ?? []).map (tag => (
+		  <DropSlot cat={cat}/>
-			  <li key={`flat-${ cat }-${ tag.id }`} className="mb-1">
+		</ul>
-			    <DraggableDroppableTagRow
+	      </div>))}
-				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={animationMode === 'off'
+		  layoutId={`post-info-${ sp }`}
-		      ? undefined
+		  transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
-		      : `post-info-${ sp }`}
-		  transition={{ layout: layoutTransition }}>
 		<SectionTitle>情報</SectionTitle>
 		<ul>
 		  <li>Id.: {post.id}</li>
@@ -503,14 +418,11 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 		</ul>
 	      </motion.div>)}
 
-	  <DragOverlay
+	  <DragOverlay adjustScale={false}>
-	      adjustScale={false}
-	      modifiers={[snapCenterToCursor]}
-	      dropAnimation={animationMode === 'off' ? null : undefined}>
 	    <div className="pointer-events-none">
-	      {activeTagDrag != null && (() => {
+	      {activeTagId != null && (() => {
-		const tag = findTag (tags, activeTagDrag.tagId)
+		const tag = findTag (tags, activeTagId)
-		return tag && <TagLink tag={tag} nestLevel={activeTagDrag.nestLevel}/>
+		return tag && <TagLink tag={tag}/>
 	      }) ()}
 	    </div>
 	  </DragOverlay>

frontend/src/components/TagSidebar.tsx

@@ -8,8 +8,6 @@ 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'
 
@@ -23,13 +21,6 @@ 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> ({ })
@@ -74,18 +65,12 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
 	  {CATEGORIES.flatMap (cat => cat in tags ? (
 	      tags[cat].map (tag => (
 		  <li key={tag.id} className="mb-1 min-w-0 max-w-full overflow-hidden">
-		    {animationsOff
+		    <motion.div
-		     ? (
+			className="flex min-w-0 max-w-full items-baseline overflow-hidden"
-			 <div className="flex min-w-0 max-w-full items-baseline overflow-hidden">
+			transition={{ layout: { duration: .2, ease: 'easeOut' } }}
-			   <TagLink tag={tag} onClick={onClick}/>
+			layoutId={`tag-${ tag.id }`}>
-			 </div>)
+		      <TagLink tag={tag} onClick={onClick}/>
-		     : (
+		    </motion.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>
@@ -118,25 +103,18 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
 	  {posts.length > 0 && TagBlock}
 	</div>
 
-	{animationsOff
+	<AnimatePresence initial={false}>
-	 ? (
+	  {tagsVsbl && (
-	     tagsVsbl && (
+	      <motion.div
-		 <div className="md:hidden overflow-hidden">
+		  key="sptags"
-		   {posts.length > 0 && TagBlock}
+		  className="md:hidden overflow-hidden"
-		 </div>))
+		  initial={{ height: 0 }}
-	 : (
+		  animate={{ height: 'auto' }}
-	     <AnimatePresence initial={false}>
+		  exit={{ height: 0 }}
-	       {tagsVsbl && (
+		  transition={{ duration: .2, ease: 'easeOut' }}>
-		   <motion.div
+		{posts.length > 0 && TagBlock}
-		       key="sptags"
+	      </motion.div>)}
-		       className="md:hidden overflow-hidden"
+	</AnimatePresence>
-		       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

frontend/src/components/TopNav.tsx

@@ -161,17 +161,13 @@ const TopNav: FC<Props> = ({ user }) => {
       visibleMenu.findIndex (item => location.pathname.startsWith (item.base || item.to))
   const submenuHeight = moreVsbl ? 40 * moreMenu.length : (activeIdx < 0 ? 0 : 40)
   const topNavTransition =
-      animationsOff
+      reducedAnimations
-      ? { duration: 0 }
+      ? { duration: .08, ease: 'linear' as const }
-      : reducedAnimations
+      : { duration: .2, ease: 'easeOut' as const }
-	? { duration: .08, ease: 'linear' as const }
-	: { duration: .2, ease: 'easeOut' as const }
   const opacityTransition =
-      animationsOff
+      reducedAnimations
-      ? { duration: 0 }
+      ? { duration: .08 }
-      : reducedAnimations
+      : { duration: .12 }
-	? { duration: .08 }
-	: { duration: .12 }
   const highlightTransitionClass =
       animationsOff
       ? undefined

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

@@ -20,16 +20,4 @@ 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/layout/MainArea.tsx

@@ -1,7 +1,5 @@
 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'
@@ -11,21 +9,12 @@ type Props = {
     className?: string }
 
 
-const MainArea: FC<Props> = ({ children, className }) => {
+const MainArea: FC<Props> = ({ children, className }) => (
-  const behaviourSettings = useClientBehaviourSettings ()
+    <motion.main
-  const animationMode = behaviourSettings.animation ?? 'normal'
+	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
-  const layoutTransition = clientAnimationTransition (
+	className={cn ('flex-1 overflow-y-auto p-4', className)}
-      animationMode,
+	layout="position">
-      { normal: { duration: .2, ease: 'easeOut' as const } },
+      {children}
-  )
+    </motion.main>)
 
-  return (
+export default MainArea
-      <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.tsx

@@ -1,8 +1,6 @@
 import { motion } from 'framer-motion'
 import { Helmet } from 'react-helmet-async'
 
-import { clientAnimationTransition } from '@/lib/clientAnimation'
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
 
 import type { CSSProperties, FC, MouseEvent, PointerEvent, ReactNode } from 'react'
@@ -70,12 +68,6 @@ const SidebarComponent: FC<Props> = ({
     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 (() => {
@@ -313,8 +305,8 @@ const SidebarComponent: FC<Props> = ({
   return (
       <motion.div
 	  ref={rootRef}
-	  layout={animationMode === 'off' ? false : 'position'}
+	  layout="position"
-	  transition={{ layout: layoutTransition }}
+	  transition={{ layout: { duration: .2, ease: 'easeOut' } }}
 	  style={style}
 	  className={cn (
 	      'relative w-full md:w-[var(--sidebar-width)] md:shrink-0 md:h-full',

frontend/src/components/users/BehaviourSettingsSection.tsx

@@ -11,7 +11,8 @@ import type { ClientAnimationMode,
 	      ClientBehaviorSettings,
 	      ClientEmbedAutoLoadMode,
 	      ClientLinkPreloadMode,
-	      ClientTagRelationDisplayMode } from '@/lib/settings'
+	      ClientTagRelationDisplayMode,
+	      ClientThumbnailMode } from '@/lib/settings'
 
 type Props = {
     sectionClassName: string
@@ -30,9 +31,9 @@ type SegmentedControlProps<T extends string> = {
     onChange:  (value: T) => void }
 
 type SettingBlockProps = {
-    title:        string
+    title:       string
-    description?: string
+    description: string
-    children:     ReactNode }
+    children:    ReactNode }
 
 const animationOptions: SegmentedOption<ClientAnimationMode>[] = [
     { value: 'off', label: 'なし' },
@@ -46,12 +47,18 @@ const embedAutoLoadOptions: SegmentedOption<ClientEmbedAutoLoadMode>[] = [
 
 const linkPreloadOptions: SegmentedOption<ClientLinkPreloadMode>[] = [
     { value: 'off', label: 'しない' },
-    { value: 'intent', label: 'する' }]
+    { value: 'intent', label: 'マウスを置いたら' }]
 
 const tagRelationDisplayOptions: SegmentedOption<ClientTagRelationDisplayMode>[] = [
     { value: 'flat', label: 'まとめない' },
     { value: 'grouped', label: 'まとめる' }]
 
+const thumbnailModeOptions: SegmentedOption<ClientThumbnailMode>[] = [
+    { value: 'off', label: '非表示' },
+    { value: 'light', label: '軽量' },
+    { value: 'normal', label: '通常' }]
+
+
 const SegmentedControl = <T extends string,> (
     { value, options, onChange }: SegmentedControlProps<T>,
 ) => {
@@ -83,7 +90,7 @@ const SegmentedControl = <T extends string,> (
 const SettingBlock: FC<SettingBlockProps> = (
     { title, description, children },
 ) => (
-    <div className="space-y-3 rounded-xl px-4">
+    <div className="space-y-3 rounded-xl border border-border/70 bg-background/70 p-4">
       <div className="space-y-1">
 	<h3 className="text-sm font-semibold">{title}</h3>
 	<p className="text-sm text-muted-foreground">{description}</p>
@@ -142,6 +149,10 @@ const BehaviourSettingsSection: FC<Props> = (
 	<div className="flex flex-wrap items-start justify-between gap-3">
 	  <div className="space-y-1">
 	    <h2 className="text-xl font-bold">動作</h2>
+	    {hasUnsavedChanges && (
+		<p className="text-sm text-amber-700 dark:text-amber-300">
+		  未保存の変更があります
+		</p>)}
 	  </div>
 
 	  <div className="flex flex-wrap gap-2">
@@ -162,7 +173,9 @@ const BehaviourSettingsSection: FC<Props> = (
 	</div>
 
 	<div className="space-y-4">
-	  <SettingBlock title="アニメーション">
+	  <SettingBlock
+	      title="アニメーション"
+	      description="画面遷移やレイアウト移動の動きを調整します。">
 	    <SegmentedControl
 		value={draftSettings.animation ?? 'normal'}
 		options={animationOptions}
@@ -171,26 +184,39 @@ const BehaviourSettingsSection: FC<Props> = (
 
 	  <SettingBlock
 	      title="リンク先の先読み"
-	      description="マウスを置いた時点でリンク先のデータを取得します。">
+	      description="リンクにマウスを置いた時などに、移動先の情報を先に読みます。通信量や意図しない読込みが気になる場合は「しない」にできます。">
 	    <SegmentedControl
 		value={draftSettings.linkPreload ?? 'intent'}
 		options={linkPreloadOptions}
 		onChange={value => updateDraft ('linkPreload', value)}/>
 	  </SettingBlock>
 
-	  <SettingBlock title="タグの親子関係表示">
+	  <SettingBlock
+	      title="タグの親子関係表示"
+	      description="親子関係があるタグを、まとまりとして表示します。見た目を単純にしたい場合は「まとめない」にできます。">
 	    <SegmentedControl
 		value={draftSettings.tagRelationDisplay ?? 'grouped'}
 		options={tagRelationDisplayOptions}
 		onChange={value => updateDraft ('tagRelationDisplay', value)}/>
 	  </SettingBlock>
 
-	  <SettingBlock title="埋め込み自動読込">
+	  <SettingBlock
+	      title="埋め込み自動読込"
+	      description="外部埋め込みを自動で読み込むかを切り替えます。">
 	    <SegmentedControl
 		value={draftSettings.embedAutoLoad ?? 'auto'}
 		options={embedAutoLoadOptions}
 		onChange={value => updateDraft ('embedAutoLoad', value)}/>
 	  </SettingBlock>
+
+	  <SettingBlock
+	      title="サムネイル表示"
+	      description="投稿一覧や詳細の画像表示を軽量化します。">
+	    <SegmentedControl
+		value={draftSettings.thumbnailMode ?? 'normal'}
+		options={thumbnailModeOptions}
+		onChange={value => updateDraft ('thumbnailMode', value)}/>
+	  </SettingBlock>
 	</div>
       </section>)
 }

frontend/src/components/users/KeyboardSettingsSection.tsx

@@ -147,6 +147,10 @@ const KeyboardSettingsSection: FC<Props> = (
 	<div className="flex flex-wrap items-start justify-between gap-3">
 	  <div className="space-y-1">
 	    <h2 className="text-xl font-bold">キーボード</h2>
+	    {hasUnsavedChanges && (
+		<p className="text-sm text-amber-700 dark:text-amber-300">
+		  未保存の変更があります
+		</p>)}
 	  </div>
 
 	  <div className="flex flex-wrap gap-2">
@@ -202,8 +206,8 @@ const KeyboardSettingsSection: FC<Props> = (
 		<th className="p-2 text-left">操作</th>
 		<th className="p-2 text-left">適用範囲</th>
 		<th className="p-2 text-left">現在のキー</th>
-		<th className="p-2 text-left"></th>
+		<th className="p-2 text-left">変更</th>
-		<th className="p-2 text-left"></th>
+		<th className="p-2 text-left">既定に戻す</th>
 		<th className="p-2 text-left">競合状態</th>
 	      </tr>
 	    </thead>

frontend/src/index.css

@@ -137,11 +137,9 @@
 :root[data-animation='off'] *::before,
 :root[data-animation='off'] *::after
 {
-  animation-duration: 0ms !important;
+  animation-duration: 0.001ms !important;
-  animation-delay: 0ms !important;
   animation-iteration-count: 1 !important;
-  transition-duration: 0ms !important;
+  transition-duration: 0.001ms !important;
-  transition-delay: 0ms !important;
 }
 
 a

frontend/src/lib/clientAnimation.ts

@@ -1,34 +0,0 @@
-import type { Transition } from 'framer-motion'
-
-import type { ClientAnimationMode } from '@/lib/settings'
-
-type ClientAnimationTransitionOptions = {
-    normal:   Transition
-    reduced?: Transition
-    off?:     Transition }
-
-
-export const clientAnimationsOff = (
-    animationMode: ClientAnimationMode,
-): boolean =>
-    animationMode === 'off'
-
-
-export const clientAnimationTransition = (
-    animationMode: ClientAnimationMode,
-    { normal, reduced, off }: ClientAnimationTransitionOptions,
-): Transition => {
-  if (animationMode === 'off')
-    return off ?? { duration: 0 }
-
-  if (animationMode === 'reduced')
-    return reduced ?? { duration: .08, ease: 'linear' as const }
-
-  return normal
-}
-
-
-export const clientScrollBehaviour = (
-    animationMode: ClientAnimationMode,
-): ScrollBehavior =>
-    animationMode === 'off' ? 'auto' : 'smooth'

frontend/src/lib/keyboardShortcuts.test.ts

@@ -1,65 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { DEFAULT_KEY_BINDINGS,
-	 formatKeyBinding,
-	 getConflictingShortcutActionIds,
-	 isEditableEventTarget,
-	 keyBindingFromKeyboardEvent,
-	 resolveShortcutScope,
-	 SHORTCUT_DEFINITIONS_BY_ID } from '@/lib/keyboardShortcuts'
-
-describe ('keyboardShortcuts', () => {
-  it ('defines the default key bindings used by the settings screen', () => {
-    expect (SHORTCUT_DEFINITIONS_BY_ID['global.openShortcutHelp']).toMatchObject ({
-	label: 'ショートカット一覧を開く',
-	scope: 'global',
-	defaultBinding: { key: '?', shift: true } })
-    expect (DEFAULT_KEY_BINDINGS['global.focusSearch']).toEqual ({ key: '/' })
-    expect (DEFAULT_KEY_BINDINGS['navigation.posts']).toEqual ({ key: 'p' })
-    expect (DEFAULT_KEY_BINDINGS['pagination.next']).toEqual ({ key: 'ArrowRight' })
-    expect (DEFAULT_KEY_BINDINGS['settings.theme']).toEqual ({ key: '3' })
-  })
-
-  it ('formats key bindings for display', () => {
-    expect (formatKeyBinding ({ key: '?', shift: true })).toBe ('Shift + ?')
-    expect (formatKeyBinding ({ key: '/' })).toBe ('/')
-    expect (formatKeyBinding ({ key: 'p' })).toBe ('P')
-    expect (formatKeyBinding ({ key: 'ArrowRight' })).toBe ('ArrowRight')
-    expect (formatKeyBinding (null)).toBe ('未割当')
-  })
-
-  it ('normalises keyboard events without assigning space by default', () => {
-    const event = { key: 'P',
-		    ctrlKey: false,
-		    shiftKey: false,
-		    altKey: false,
-		    metaKey: false } as KeyboardEvent
-
-    expect (keyBindingFromKeyboardEvent (event)).toEqual ({ key: 'p' })
-    expect (DEFAULT_KEY_BINDINGS['pagination.next']).not.toEqual ({ key: ' ' })
-  })
-
-  it ('detects conflicting action bindings', () => {
-    const conflicts = getConflictingShortcutActionIds ({
-	...DEFAULT_KEY_BINDINGS,
-	'navigation.posts': { key: 'p' },
-	'navigation.tags': { key: 'p' } })
-
-    expect (conflicts.has ('navigation.posts')).toBe (true)
-    expect (conflicts.has ('navigation.tags')).toBe (true)
-    expect (conflicts.has ('navigation.wiki')).toBe (false)
-  })
-
-  it ('resolves route scopes and editable event targets', () => {
-    const input = document.createElement ('input')
-    const div = document.createElement ('div')
-    div.setAttribute ('role', 'textbox')
-
-    expect (resolveShortcutScope ('/posts/search')).toBe ('postSearch')
-    expect (resolveShortcutScope ('/users/settings')).toBe ('settings')
-    expect (resolveShortcutScope ('/materials/1')).toBe ('materials')
-    expect (isEditableEventTarget (input)).toBe (true)
-    expect (isEditableEventTarget (div)).toBe (true)
-    expect (isEditableEventTarget (document.createElement ('button'))).toBe (false)
-  })
-})

frontend/src/lib/settings.test.ts

@@ -1,108 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { applyClientAnimationMode,
-	 applyThemeTokens,
-	 buildThemeTokens,
-	 CLIENT_SETTINGS_STORAGE_KEY,
-	 DARK_THEME_TOKENS,
-	 DEFAULT_POST_LIST_ORDER,
-	 getClientListLimit,
-	 getClientListOrder,
-	 getClientThemeMode,
-	 LIGHT_THEME_TOKENS,
-	 loadClientSettings,
-	 setClientListSettings,
-	 setClientThemeAppearance } from '@/lib/settings'
-
-import type { FetchPostsOrder } from '@/types'
-
-const installMatchMedia = (matches: boolean) => {
-  Object.defineProperty (window, 'matchMedia', {
-      configurable: true,
-      value: vi.fn ().mockImplementation (() => ({
-	  matches,
-	  addEventListener: vi.fn (),
-	  removeEventListener: vi.fn () })) })
-}
-
-describe ('settings', () => {
-  beforeEach (() => {
-    localStorage.clear ()
-    document.documentElement.removeAttribute ('data-animation')
-    document.documentElement.removeAttribute ('style')
-    document.documentElement.className = ''
-    installMatchMedia (false)
-  })
-
-  it ('stores list settings under the shared client settings key', () => {
-    setClientListSettings ('postSearch', {
-	limit: 50,
-	order: 'title:asc' })
-
-    expect (getClientListLimit ('postSearch')).toBe (50)
-    expect (getClientListOrder<FetchPostsOrder> ('postSearch')).toBe ('title:asc')
-    expect (JSON.parse (localStorage.getItem (CLIENT_SETTINGS_STORAGE_KEY) ?? '{}'))
-	.toMatchObject ({ lists: { postSearch: { limit: 50, order: 'title:asc' } } })
-  })
-
-  it ('ignores invalid list limits and keeps stored order strings', () => {
-    localStorage.setItem (
-	CLIENT_SETTINGS_STORAGE_KEY,
-	JSON.stringify ({ lists: { postList: { limit: 30, order: DEFAULT_POST_LIST_ORDER } } }))
-
-    expect (getClientListLimit ('postList')).toBeNull ()
-    expect (getClientListOrder<FetchPostsOrder> ('postList')).toBe (
-	DEFAULT_POST_LIST_ORDER)
-  })
-
-  it ('stores theme mode and light/dark slot selections in client settings', () => {
-    setClientThemeAppearance ({
-	themeMode: 'dark',
-	activeLightThemeSlotNo: 2,
-	activeDarkThemeSlotNo: 3 })
-
-    expect (getClientThemeMode ()).toBe ('dark')
-    expect (loadClientSettings ().appearance).toMatchObject ({
-	themeMode: 'dark',
-	activeLightThemeSlotNo: 2,
-	activeDarkThemeSlotNo: 3 })
-  })
-
-  it ('applies animation mode to the document dataset', () => {
-    applyClientAnimationMode ('off')
-    expect (document.documentElement.dataset.animation).toBe ('off')
-
-    applyClientAnimationMode ('reduced')
-    expect (document.documentElement.dataset.animation).toBe ('reduced')
-
-    applyClientAnimationMode ('normal')
-    expect (document.documentElement.dataset.animation).toBeUndefined ()
-  })
-
-  it ('normalises TopNav menu link tokens to complete CSS colours', () => {
-    const tokens = buildThemeTokens ('light', {
-	link: '221.2 83.2% 53.3%',
-	topNavMenuLink: '221.2 83.2% 53.3%' })
-
-    expect (tokens.link).toBe ('221.2 83.2% 53.3%')
-    expect (tokens.topNavMenuLink).toBe ('hsl(221.2 83.2% 53.3%)')
-  })
-
-  it ('derives TopNav colours without mixing mobile active backgrounds', () => {
-    expect (buildThemeTokens ('light', { }).topNavMobileActiveBackground).toBe (
-	LIGHT_THEME_TOKENS.topNavRootBackgroundDesktop)
-    expect (buildThemeTokens ('dark', { }).topNavMobileActiveBackground).toBe (
-	DARK_THEME_TOKENS.topNavActiveBackground)
-  })
-
-  it ('sets shadcn tokens and TopNav tokens with their different value formats', () => {
-    const tokens = buildThemeTokens ('dark', { link: '213.1 93.9% 67.8%' })
-
-    applyThemeTokens (tokens)
-
-    expect (document.documentElement.style.getPropertyValue ('--theme-link')).toBe (
-	'213.1 93.9% 67.8%')
-    expect (document.documentElement.style.getPropertyValue ('--top-nav-menu-link')).toBe (
-	'hsl(213.1 93.9% 67.8%)')
-  })
-})

frontend/src/lib/useKeyboardShortcuts.tsx

@@ -291,27 +291,10 @@ export const useKeyboardShortcutSettings = (): KeyboardShortcutsContextValue =>
 
 export const useKeyboardShortcuts = (handlers: ShortcutHandlers): void => {
   const { registerHandlers } = useKeyboardShortcutSettings ()
-  const handlersRef = useRef (handlers)
-  const actionIdsKey = Object.keys (handlers).sort ().join ('|')
-
-  useEffect (() => {
-    handlersRef.current = handlers
-  }, [handlers])
-
-  const stableHandlers = useMemo<ShortcutHandlers> (() => {
-    return actionIdsKey.split ('|').filter (actionId => actionId !== '')
-	.reduce<ShortcutHandlers> ((nextHandlers, actionId) => {
-	  const key = actionId as ShortcutActionId
-	  nextHandlers[key] = () => {
-	    handlersRef.current[key]?.()
-	  }
-	  return nextHandlers
-	}, { })
-  }, [actionIdsKey])
 
   useEffect (
-      () => registerHandlers (stableHandlers),
+      () => registerHandlers (handlers),
-      [registerHandlers, stableHandlers],
+      [handlers, registerHandlers],
   )
 }
 

frontend/src/pages/GekanatorPage.tsx

@@ -28,7 +28,6 @@ import {
   getClientGekanatorBackgroundMotion,
   setClientGekanatorBackgroundMotion,
 } from '@/lib/settings'
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
 
 import type { FC } from 'react'
@@ -3678,8 +3677,6 @@ const expectedAnswerFor = (
 
 
 const GekanatorPage: FC<{ user: User | null }> = ({ user }) => {
-  const behaviourSettings = useClientBehaviourSettings ()
-  const animationMode = behaviourSettings.animation ?? 'normal'
   const storedGame = useMemo (loadStoredGame, [])
   const hasStoredRestore = storedGame != null && isStoredPhase (storedGame.phase)
   const queryClient = useQueryClient ()
@@ -4072,12 +4069,9 @@ const GekanatorPage: FC<{ user: User | null }> = ({ user }) => {
     return reviewGuessedPostId === reviewCorrectPostId
   }) ()
   const effectiveBackgroundMotionMode = (() => {
-    if (animationMode === 'off')
-      return 'off'
-
     if (backgroundMotionMode === 'off')
       return 'off'
-    if (animationMode === 'reduced' || prefersReducedMotion)
+    if (prefersReducedMotion)
       return 'calm'
 
     return backgroundMotionMode

frontend/src/pages/materials/MaterialHistoryPage.tsx

@@ -9,18 +9,14 @@ import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
-import { clientScrollBehaviour } from '@/lib/clientAnimation'
 import { fetchMaterialChanges } from '@/lib/materials'
 import { materialsKeys } from '@/lib/queryKeys'
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { dateString, inputClass } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
 
 const MaterialHistoryPage: FC = () => {
-  const behaviourSettings = useClientBehaviourSettings ()
-  const animationMode = behaviourSettings.animation ?? 'normal'
   const location = useLocation ()
   const navigate = useNavigate ()
   const query = new URLSearchParams (location.search)
@@ -59,9 +55,8 @@ const MaterialHistoryPage: FC = () => {
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
   useEffect (() => {
-    document.querySelector ('table')?.scrollIntoView ({
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
-	behavior: clientScrollBehaviour (animationMode) })
+  }, [location.search])
-  }, [animationMode, location.search])
 
   const handleSearch = (event: FormEvent) => {
     event.preventDefault ()

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -12,12 +12,9 @@ import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
-import { clientAnimationTransition,
-	 clientScrollBehaviour } from '@/lib/clientAnimation'
 import { fetchPostChanges, updatePost } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { fetchTag } from '@/lib/tags'
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn, dateString, originalCreatedAtString } from '@/lib/utils'
 
 import type { FC, MouseEvent } from 'react'
@@ -40,12 +37,6 @@ const renderDiff = (diff: { current: string | null; prev: string | null }) => (
 
 const PostHistoryPage: FC = () => {
   const dialogue = useDialogue ()
-  const behaviourSettings = useClientBehaviourSettings ()
-  const animationMode = behaviourSettings.animation ?? 'normal'
-  const layoutTransition = clientAnimationTransition (
-      animationMode,
-      { normal: { duration: .2, ease: 'easeOut' as const } },
-  )
 
   const location = useLocation ()
   const query = new URLSearchParams (location.search)
@@ -122,9 +113,8 @@ const PostHistoryPage: FC = () => {
   }
 
   useEffect (() => {
-    document.querySelector ('table')?.scrollIntoView ({
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
-	behavior: clientScrollBehaviour (animationMode) })
+  }, [location.search])
-  }, [animationMode, location.search])
 
   const layoutIds: string[] = []
 
@@ -208,8 +198,8 @@ const PostHistoryPage: FC = () => {
 				    rowSpan={rowsCnt}>
 				  <PrefetchLink to={`/posts/${ change.postId }`}>
 				    <motion.div
-					layoutId={animationMode === 'off' ? undefined : layoutId}
+					layoutId={layoutId}
-					transition={{ layout: layoutTransition }}>
+					transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
 				      <img src={change.thumbnail.current
 						|| change.thumbnailBase.current
 						|| undefined}

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

@@ -1,10 +1,9 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import PostListPage from '@/pages/posts/PostListPage'
 import { buildPost, buildTag, buildWikiPage } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
-import { CLIENT_SETTINGS_STORAGE_KEY } from '@/lib/settings'
 
 const postsApi = vi.hoisted (() => ({
   fetchPosts: vi.fn (),
@@ -19,11 +18,6 @@ vi.mock ('@/lib/posts', () => postsApi)
 vi.mock ('@/lib/wiki', () => wikiApi)
 
 describe ('PostListPage', () => {
-  beforeEach (() => {
-    localStorage.clear ()
-    vi.clearAllMocks ()
-  })
-
   it ('loads posts from the current query and renders the plaza tab', async () => {
     const tag = buildTag ({ name: '虹夏' })
     postsApi.fetchPosts.mockResolvedValueOnce ({
@@ -42,7 +36,6 @@ describe ('PostListPage', () => {
             match: 'all',
             page:  2,
             limit: 20,
-            order: 'original_created_at:desc',
           }),
       )
     })
@@ -78,36 +71,4 @@ describe ('PostListPage', () => {
         '/wiki/%E8%99%B9%E5%A4%8F',
     )
   })
-
-  it ('uses stored list limit but keeps the fixed plaza order', async () => {
-    localStorage.setItem (
-        CLIENT_SETTINGS_STORAGE_KEY,
-        JSON.stringify ({ lists: { postList: { limit: 50, order: 'title:asc' } } }))
-    postsApi.fetchPosts.mockResolvedValueOnce ({ posts: [], count: 0 })
-
-    renderWithProviders (<PostListPage/>, { route: '/posts' })
-
-    await waitFor (() => {
-      expect (postsApi.fetchPosts).toHaveBeenCalledWith (
-          expect.objectContaining ({
-            limit: 50,
-            order: 'original_created_at:desc',
-          }),
-      )
-    })
-  })
-
-  it ('updates the limit from the tab right addon and resets to page 1', async () => {
-    postsApi.fetchPosts.mockResolvedValue ({ posts: [], count: 0 })
-
-    renderWithProviders (<PostListPage/>, { route: '/posts?page=3' })
-
-    fireEvent.change (await screen.findByLabelText ('件数'), { target: { value: '100' } })
-
-    await waitFor (() => {
-      expect (postsApi.fetchPosts).toHaveBeenLastCalledWith (
-          expect.objectContaining ({ page: 1, limit: 100 }),
-      )
-    })
-  })
 })

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

@@ -30,12 +30,16 @@ describe ('PostNewPage', () => {
     expect (screen.getByText ('403')).toBeInTheDocument ()
   })
 
-  it ('submits a new post with manual title and thumbnail fetch UI', async () => {
+  it ('submits a new post with manual title and thumbnail settings', async () => {
     api.apiPost.mockResolvedValueOnce ({})
     api.apiGet.mockResolvedValue ([])
 
     renderWithProviders (<PostNewPage user={buildUser ({ role: 'member' })}/>)
 
+    const checkboxes = screen.getAllByRole ('checkbox', { name: '自動' })
+    fireEvent.click (checkboxes[0])
+    fireEvent.click (checkboxes[1])
+
     const textboxes = screen.getAllByRole ('textbox')
     fireEvent.change (textboxes[0], { target: { value: 'https://example.com/post' } })
     fireEvent.change (textboxes[1], { target: { value: '投稿タイトル' } })
@@ -93,6 +97,10 @@ describe ('PostNewPage', () => {
 
     renderWithProviders (<PostNewPage user={buildUser ({ role: 'member' })}/>)
 
+    const checkboxes = screen.getAllByRole ('checkbox', { name: '自動' })
+    fireEvent.click (checkboxes[0])
+    fireEvent.click (checkboxes[1])
+
     const textboxes = screen.getAllByRole ('textbox')
     fireEvent.change (textboxes[0], { target: { value: 'https://example.com/post' } })
     fireEvent.change (textboxes[1], { target: { value: '投稿タイトル' } })

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

@@ -4,7 +4,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import PostSearchPage from '@/pages/posts/PostSearchPage'
 import { buildPost, buildTag } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
-import { CLIENT_SETTINGS_STORAGE_KEY } from '@/lib/settings'
 
 const postsApi = vi.hoisted (() => ({
   fetchPosts: vi.fn (),
@@ -19,7 +18,6 @@ vi.mock ('@/lib/api', () => api)
 
 describe ('PostSearchPage', () => {
   beforeEach (() => {
-    localStorage.clear ()
     vi.clearAllMocks ()
     api.apiGet.mockResolvedValue ([])
   })
@@ -42,7 +40,6 @@ describe ('PostSearchPage', () => {
             tags:  'x',
             match: 'any',
             page:  2,
-            limit: 20,
           }),
       )
     })
@@ -84,41 +81,4 @@ describe ('PostSearchPage', () => {
 
     expect (await screen.findByText ('結果ないよ（笑）')).toBeInTheDocument ()
   })
-
-  it ('uses URL limit before localStorage and stores the active list settings', async () => {
-    localStorage.setItem (
-        CLIENT_SETTINGS_STORAGE_KEY,
-        JSON.stringify ({ lists: { postSearch: { limit: 100, order: 'title:asc' } } }))
-    postsApi.fetchPosts.mockResolvedValueOnce ({ posts: [], count: 0 })
-
-    renderWithProviders (
-        <PostSearchPage/>,
-        { route: '/posts/search?limit=50&order=created_at%3Adesc' },
-    )
-
-    await waitFor (() => {
-      expect (postsApi.fetchPosts).toHaveBeenCalledWith (
-          expect.objectContaining ({ limit: 50, order: 'created_at:desc' }),
-      )
-    })
-    expect (JSON.parse (localStorage.getItem (CLIENT_SETTINGS_STORAGE_KEY) ?? '{}'))
-        .toMatchObject ({ lists: { postSearch: { limit: 50, order: 'created_at:desc' } } })
-  })
-
-  it ('moves the compact limit control outside the search form and resets page on change', async () => {
-    postsApi.fetchPosts.mockResolvedValue ({ posts: [], count: 0 })
-
-    renderWithProviders (<PostSearchPage/>, { route: '/posts/search?page=4' })
-
-    const limitSelect = await screen.findByLabelText ('件数')
-    expect (limitSelect.closest ('form')).toBeNull ()
-
-    fireEvent.change (limitSelect, { target: { value: '100' } })
-
-    await waitFor (() => {
-      expect (postsApi.fetchPosts).toHaveBeenLastCalledWith (
-          expect.objectContaining ({ page: 1, limit: 100 }),
-      )
-    })
-  })
 })

frontend/src/pages/posts/PostSearchPage.tsx

@@ -14,8 +14,6 @@ import Pagination from '@/components/common/Pagination'
 import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
-import { clientAnimationTransition,
-	 clientScrollBehaviour } from '@/lib/clientAnimation'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
 import {
@@ -26,7 +24,6 @@ import {
     LIST_LIMIT_OPTIONS,
     setClientListSettings,
 } from '@/lib/settings'
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { useKeyboardShortcuts } from '@/lib/useKeyboardShortcuts'
 import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
 
@@ -70,13 +67,6 @@ const parseOrder = (value: string | null): FetchPostsOrder | null => {
 
 
 const PostSearchPage: FC = () => {
-  const behaviourSettings = useClientBehaviourSettings ()
-  const animationMode = behaviourSettings.animation ?? 'normal'
-  const thumbnailTransition = clientAnimationTransition (
-      animationMode,
-      { normal: { type: 'spring', stiffness: 500, damping: 40, mass: .5 },
-	reduced: { duration: .08, ease: 'linear' as const } },
-  )
   const location = useLocation ()
 
   const navigate = useNavigate ()
@@ -151,11 +141,9 @@ const PostSearchPage: FC = () => {
     setUpdatedFrom (qUpdatedFrom)
     setUpdatedTo (qUpdatedTo)
 
-    document.querySelector ('table')?.scrollIntoView ({
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
-	behavior: clientScrollBehaviour (animationMode) })
+  }, [location.search, qCreatedFrom, qCreatedTo, qMatch, qOriginalCreatedFrom,
-  }, [animationMode, location.search, qCreatedFrom, qCreatedTo, qMatch,
+      qOriginalCreatedTo, qTags, qTitle, qUpdatedFrom, qUpdatedTo, qURL])
-      qOriginalCreatedFrom, qOriginalCreatedTo, qTags, qTitle, qUpdatedFrom,
-      qUpdatedTo, qURL])
 
   const search = async () => {
     const qs = new URLSearchParams ()
@@ -412,10 +400,11 @@ const PostSearchPage: FC = () => {
 			  <td className="p-2">
 			    <PrefetchLink to={`/posts/${ row.id }`} title={row.title || undefined}>
 			      <motion.div
-				  layoutId={animationMode === 'off'
+				  layoutId={`page-${ row.id }`}
-				      ? undefined
+				  transition={{ type: 'spring',
-				      : `page-${ row.id }`}
+						stiffness: 500,
-				  transition={thumbnailTransition}>
+						damping: 40,
+						mass: .5 }}>
 				<img src={row.thumbnail || row.thumbnailBase || undefined}
 				     alt={row.title || row.url}
 				     title={row.title || row.url || undefined}

frontend/src/pages/tags/NicoTagListPage.test.tsx

@@ -6,7 +6,6 @@ import { dateString } from '@/lib/utils'
 import { buildTag, buildUser } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
 
-import type { ReactNode } from 'react'
 import type { NicoTag } from '@/types'
 
 const api = vi.hoisted (() => ({
@@ -28,7 +27,6 @@ const scrollIntoView = vi.fn ()
 vi.mock ('@/lib/api', () => api)
 vi.mock ('@/components/ui/use-toast', () => toastApi)
 vi.mock ('@/components/dialogues/DialogueProvider', () => ({
-  default: ({ children }: { children: ReactNode }) => <>{children}</>,
   useDialogue: () => dialogue,
 }))
 

frontend/src/pages/tags/NicoTagListPage.tsx

@@ -17,10 +17,8 @@ import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPut } from '@/lib/api'
 import { extractValidationError } from '@/lib/apiErrors'
-import { clientScrollBehaviour } from '@/lib/clientAnimation'
 import { tagsKeys } from '@/lib/queryKeys'
 import { fetchNicoTags } from '@/lib/tags'
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn, dateString, inputClass } from '@/lib/utils'
 import { canEditContent } from '@/lib/users'
 
@@ -40,8 +38,6 @@ const setIf = (qs: URLSearchParams, key: string, value: string) => {
 
 
 const NicoTagListPage: FC<Props> = ({ user }) => {
-  const behaviourSettings = useClientBehaviourSettings ()
-  const animationMode = behaviourSettings.animation ?? 'normal'
   const dialogue = useDialogue ()
   const location = useLocation ()
   const navigate = useNavigate ()
@@ -156,9 +152,8 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
     setLinkStatus (qLinkStatus)
     setEditingId (null)
 
-    document.querySelector ('table')?.scrollIntoView ({
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
-	behavior: clientScrollBehaviour (animationMode) })
+  }, [location.search, qLinkedTag, qLinkStatus, qName])
-  }, [animationMode, location.search, qLinkedTag, qLinkStatus, qName])
 
   useEffect (() => {
     if (!(data))

frontend/src/pages/tags/TagHistoryPage.tsx

@@ -11,10 +11,8 @@ import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { CATEGORY_NAMES } from '@/consts'
 import { apiPut } from '@/lib/api'
-import { clientScrollBehaviour } from '@/lib/clientAnimation'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { fetchTagChanges } from '@/lib/tags'
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn, dateString } from '@/lib/utils'
 
 import type { FC } from 'react'
@@ -45,8 +43,6 @@ const renderStateDiff = (diff: { current: string | null; prev: string | null })
 
 
 const TagHistoryPage: FC = () => {
-  const behaviourSettings = useClientBehaviourSettings ()
-  const animationMode = behaviourSettings.animation ?? 'normal'
   const location = useLocation ()
   const query = new URLSearchParams (location.search)
   const id = query.get ('id')
@@ -62,9 +58,8 @@ const TagHistoryPage: FC = () => {
   const qc = useQueryClient ()
 
   useEffect (() => {
-    document.querySelector ('table')?.scrollIntoView ({
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
-	behavior: clientScrollBehaviour (animationMode) })
+  }, [location.search])
-  }, [animationMode, location.search])
 
   return (
       <MainArea>

frontend/src/pages/tags/TagListPage.test.tsx

@@ -1,10 +1,9 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import TagListPage from '@/pages/tags/TagListPage'
 import { buildTag } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
-import { CLIENT_SETTINGS_STORAGE_KEY } from '@/lib/settings'
 
 const tagsApi = vi.hoisted (() => ({
   fetchTags: vi.fn (),
@@ -13,11 +12,6 @@ const tagsApi = vi.hoisted (() => ({
 vi.mock ('@/lib/tags', () => tagsApi)
 
 describe ('TagListPage', () => {
-  beforeEach (() => {
-    localStorage.clear ()
-    vi.clearAllMocks ()
-  })
-
   it ('loads tags from URL filters and renders the results table', async () => {
     tagsApi.fetchTags.mockResolvedValueOnce ({
       tags: [buildTag ({
@@ -44,8 +38,6 @@ describe ('TagListPage', () => {
             name:         '虹',
             category:     'character',
             page:         3,
-            limit:        20,
-            order:        'post_count:desc',
             postCountGTE: 5,
             deprecated:   true,
           }),
@@ -56,7 +48,7 @@ describe ('TagListPage', () => {
         '/tags/7',
     )
     expect (screen.getAllByText ('キャラクター').length).toBeGreaterThan (0)
-    expect (screen.getAllByRole ('combobox')[2]).toHaveValue ('1')
+    expect (screen.getAllByRole ('combobox')[1]).toHaveValue ('1')
     expect (screen.getAllByText ('廃止')).toHaveLength (2)
   })
 
@@ -66,7 +58,7 @@ describe ('TagListPage', () => {
     renderWithProviders (<TagListPage/>, { route: '/tags' })
 
     fireEvent.change (screen.getByRole ('textbox'), { target: { value: '虹夏' } })
-    fireEvent.change (screen.getAllByRole ('combobox')[1], {
+    fireEvent.change (screen.getAllByRole ('combobox')[0], {
       target: { value: 'character' },
     })
     fireEvent.submit (screen.getByRole ('button', { name: '検索' }).closest ('form')!)
@@ -90,41 +82,4 @@ describe ('TagListPage', () => {
 
     expect (await screen.findByText ('結果ないよ（笑）')).toBeInTheDocument ()
   })
-
-  it ('uses URL limit before localStorage and preserves the query order', async () => {
-    localStorage.setItem (
-        CLIENT_SETTINGS_STORAGE_KEY,
-        JSON.stringify ({ lists: { tagList: { limit: 100, order: 'name:asc' } } }))
-    tagsApi.fetchTags.mockResolvedValueOnce ({ tags: [], count: 0 })
-
-    renderWithProviders (
-        <TagListPage/>,
-        { route: '/tags?limit=50&order=updated_at%3Adesc' },
-    )
-
-    await waitFor (() => {
-      expect (tagsApi.fetchTags).toHaveBeenCalledWith (
-          expect.objectContaining ({ limit: 50, order: 'updated_at:desc' }),
-      )
-    })
-    expect (JSON.parse (localStorage.getItem (CLIENT_SETTINGS_STORAGE_KEY) ?? '{}'))
-        .toMatchObject ({ lists: { tagList: { limit: 50, order: 'updated_at:desc' } } })
-  })
-
-  it ('keeps the compact limit control outside the search form and resets page on change', async () => {
-    tagsApi.fetchTags.mockResolvedValue ({ tags: [], count: 0 })
-
-    renderWithProviders (<TagListPage/>, { route: '/tags?page=4' })
-
-    const limitSelect = await screen.findByLabelText ('件数')
-    expect (limitSelect.closest ('form')).toBeNull ()
-
-    fireEvent.change (limitSelect, { target: { value: '100' } })
-
-    await waitFor (() => {
-      expect (tagsApi.fetchTags).toHaveBeenLastCalledWith (
-          expect.objectContaining ({ page: 1, limit: 100 }),
-      )
-    })
-  })
 })

frontend/src/pages/tags/TagListPage.tsx

@@ -13,7 +13,6 @@ import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
-import { clientScrollBehaviour } from '@/lib/clientAnimation'
 import { tagsKeys } from '@/lib/queryKeys'
 import {
     DEFAULT_POST_LIST_LIMIT,
@@ -23,7 +22,6 @@ import {
     LIST_LIMIT_OPTIONS,
     setClientListSettings,
 } from '@/lib/settings'
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { useKeyboardShortcuts } from '@/lib/useKeyboardShortcuts'
 import { fetchTags } from '@/lib/tags'
 import { dateString, inputClass } from '@/lib/utils'
@@ -73,8 +71,6 @@ const parseOrder = (value: string | null): FetchTagsOrder | null => {
 
 
 const TagListPage: FC = () => {
-  const behaviourSettings = useClientBehaviourSettings ()
-  const animationMode = behaviourSettings.animation ?? 'normal'
   const location = useLocation ()
 
   const navigate = useNavigate ()
@@ -149,11 +145,9 @@ const TagListPage: FC = () => {
     setUpdatedTo (qUpdatedTo)
     setDeprecated (qDeprecated)
 
-    document.querySelector ('table')?.scrollIntoView ({
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
-	behavior: clientScrollBehaviour (animationMode) })
+  }, [location.search, qCategory, qCreatedFrom, qCreatedTo, qName, qPostCountGTE,
-  }, [animationMode, location.search, qCategory, qCreatedFrom, qCreatedTo,
+      qPostCountLTE, qUpdatedFrom, qUpdatedTo, qDeprecated])
-      qName, qPostCountGTE, qPostCountLTE, qUpdatedFrom, qUpdatedTo,
-      qDeprecated])
 
   const handleSearch = (e: FormEvent) => {
     e.preventDefault ()

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

@@ -41,7 +41,6 @@ const postEmbed = vi.hoisted (() => ({
 vi.mock ('@/lib/api', () => api)
 vi.mock ('@/lib/posts', () => postsApi)
 vi.mock ('@/components/dialogues/DialogueProvider', () => ({
-  default: ({ children }: { children: ReactNode }) => <>{children}</>,
   useDialogue: () => dialogue,
 }))
 vi.mock ('@/components/PostEmbed', () => ({

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -15,8 +15,6 @@ import { Button } from '@/components/ui/button'
 import { SITE_TITLE } from '@/config'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { apiDelete, apiGet, apiPatch, apiPost, apiPut, isApiError } from '@/lib/api'
-import { clientAnimationTransition,
-	 clientScrollBehaviour } from '@/lib/clientAnimation'
 import { fetchPost } from '@/lib/posts'
 import {
   getClientTheatreLayoutMode,
@@ -24,7 +22,6 @@ import {
   setClientTheatreLayoutMode,
   setClientTheatreTagFlow,
 } from '@/lib/settings'
-import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { canEditContent } from '@/lib/users'
 import { cn, dateString, inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
@@ -60,6 +57,8 @@ const INITIAL_THEATRE_INFO: TheatreInfo =
 const INITIAL_WEIGHTS: TheatrePostSelectionWeights =
     { tagPenalties: [], lightestPosts: [], heaviestPosts: [] }
 
+const LAYOUT_STORAGE_KEY = 'theatre-layout-mode'
+const TAG_FLOW_STORAGE_KEY = 'theatre-tag-flow'
 const MIN_MAIN_WIDTH = 360
 const SIDEBAR_GAP_WIDTH = 16
 
@@ -215,12 +214,6 @@ type Props = { user: User | null }
 
 
 const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
-  const behaviourSettings = useClientBehaviourSettings ()
-  const animationMode = behaviourSettings.animation ?? 'normal'
-  const layoutTransition = clientAnimationTransition (
-      animationMode,
-      { normal: { duration: .2, ease: 'easeOut' as const } },
-  )
   const { id } = useParams ()
   const dialogue = useDialogue ()
 
@@ -627,9 +620,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
       clearValidationErrors ()
       await apiPost (`/theatres/${ id }/comments`, { content })
       setContent ('')
-      commentsRef.current?.scrollTo ({
+      commentsRef.current?.scrollTo ({ top: 0, behavior: 'smooth' })
-	  top: 0,
-	  behavior: clientScrollBehaviour (animationMode) })
     }
     catch (error)
     {
@@ -846,8 +837,8 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 
   return (
       <motion.div
-	  layout={animationMode === 'off' ? false : 'position'}
+	  layout="position"
-	  transition={{ layout: layoutTransition }}
+	  transition={{ layout: { duration: .2, ease: 'easeOut' } }}
 	  className="min-h-0 flex-1 overflow-y-auto bg-zinc-50 text-zinc-950
 		     md:overflow-hidden dark:bg-zinc-950 dark:text-zinc-50">
 	<Helmet>
@@ -871,7 +862,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	      </SidebarComponent>)}
 
 	  <motion.main
-	      layout={animationMode === 'off' ? false : 'position'}
+	      layout="position"
 	      className="order-1 min-w-0 flex-1 space-y-4 md:order-none
 			 md:min-w-[360px] md:overflow-y-auto">
 	    <div className="space-y-4">

frontend/src/pages/users/SettingPage.test.tsx

@@ -6,7 +6,6 @@ import { buildUser } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
 
 const api = vi.hoisted (() => ({
-  apiGet:     vi.fn (),
   apiPut:     vi.fn (),
   isApiError: vi.fn (),
 }))
@@ -28,23 +27,12 @@ describe ('SettingPage', () => {
   beforeEach (() => {
     vi.clearAllMocks ()
     api.isApiError.mockReturnValue (false)
-    api.apiGet.mockImplementation ((path: string) => {
-      if (path === '/users/settings')
-	return Promise.resolve ({
-	    theme: 'system',
-	    auto_fetch_title: 'manual',
-	    auto_fetch_thumbnail: 'manual',
-	    wiki_editor_mode: 'split' })
-      if (path === '/users/theme_slots')
-	return Promise.resolve ([])
-      return Promise.resolve ({})
-    })
   })
 
   it ('shows loading when user is absent', () => {
     renderWithProviders (<SettingPage user={null} setUser={vi.fn ()}/>)
 
-    expect (screen.getAllByText ('Loading...').length).toBeGreaterThan (0)
+    expect (screen.getByText ('Loading...')).toBeInTheDocument ()
   })
 
   it ('updates the current user name', async () => {
@@ -54,9 +42,8 @@ describe ('SettingPage', () => {
 
     renderWithProviders (<SettingPage user={user} setUser={setUser}/>)
 
-    const nameInput = (await screen.findAllByRole ('textbox'))[0]
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: 'new' } })
-    fireEvent.change (nameInput, { target: { value: 'new' } })
+    fireEvent.click (screen.getByRole ('button', { name: '更新' }))
-    fireEvent.click (screen.getAllByRole ('button', { name: '表示名を更新' })[0])
 
     await waitFor (() => {
       expect (api.apiPut).toHaveBeenCalledWith (
@@ -68,7 +55,7 @@ describe ('SettingPage', () => {
     const formData = api.apiPut.mock.calls[0]?.[1] as FormData
     expect (formData.get ('name')).toBe ('new')
     expect (setUser).toHaveBeenCalled ()
-    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '表示名を更新しました．' })
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '設定を更新しました．' })
   })
 
   it ('shows validation errors returned for the name field', async () => {
@@ -88,11 +75,10 @@ describe ('SettingPage', () => {
 
     renderWithProviders (<SettingPage user={user} setUser={vi.fn ()}/>)
 
-    const nameInput = (await screen.findAllByRole ('textbox'))[0]
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: '' } })
-    fireEvent.change (nameInput, { target: { value: '' } })
+    fireEvent.click (screen.getByRole ('button', { name: '更新' }))
-    fireEvent.click (screen.getAllByRole ('button', { name: '表示名を更新' })[0])
 
-    expect ((await screen.findAllByText ('名前は必須です．')).length).toBeGreaterThan (0)
+    expect (await screen.findByText ('名前は必須です．')).toBeInTheDocument ()
-    expect (nameInput).toHaveAttribute ('aria-invalid', 'true')
+    expect (screen.getByRole ('textbox')).toHaveAttribute ('aria-invalid', 'true')
   })
 })

frontend/src/pages/users/SettingPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useBeforeUnload, useLocation, useNavigate } from 'react-router-dom'
 
@@ -152,7 +152,7 @@ const themeSlotNoSelections: ThemeSegmentedOption<UserThemeSlotNo>[] = [
     { value: 3, label: '3' } ]
 
 const sectionClassName =
-    'space-y-4 rounded-xl p-4'
+    'space-y-4 rounded-xl border border-border bg-background/80 p-4'
 
 const themeSelections: ThemeSelectionItem[] = [
     { id: 'user:light:1', label: 'ライト 1', baseTheme: 'light', slotNo: 1 },
@@ -168,7 +168,24 @@ const themeTokenGroups: ThemeTokenGroupSpec[] = [
       fields: [
 	  { key: 'background', label: '背景' },
 	  { key: 'foreground', label: '文字' },
-	  { key: 'link', label: 'リンク' }] }]
+	  { key: 'primary', label: '主色' },
+	  { key: 'accent', label: 'アクセント' },
+	  { key: 'link', label: 'リンク' },
+      ] },
+    { title: '面',
+      fields: [
+	  { key: 'card', label: 'カード' },
+	  { key: 'muted', label: '薄い背景' },
+	  { key: 'border', label: '境界線' },
+      ] },
+    { title: '上部ナビ',
+      fields: [
+	  { key: 'topNavRootBackgroundMobile', label: 'スマホ背景' },
+	  { key: 'topNavRootBackgroundDesktop', label: 'PC 背景' },
+	  { key: 'topNavActiveBackground', label: '選択中背景' },
+	  { key: 'topNavBrandLink', label: 'ロゴ色' },
+      ] },
+]
 
 
 const ThemeSegmentedControl = <T extends string | number,> (
@@ -481,6 +498,8 @@ const ThemeSection: FC<ThemeSectionProps> = (
       draftActiveDarkThemeSlotNo,
       currentDisplayedThemeSlot,
       selectedTheme,
+      displayedThemeLabel,
+      systemThemeLabel,
       hasUnsavedChanges,
       settingsBaseErrors,
       settingsFieldErrors,
@@ -498,6 +517,16 @@ const ThemeSection: FC<ThemeSectionProps> = (
 	<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">
+	      現在表示中: {displayedThemeLabel}
+	    </p>
+	    {draftThemeMode === 'system' && (
+		<p className="text-sm text-muted-foreground">
+		  システム設定: {systemThemeLabel}
+		</p>)}
+	    <p className="text-sm text-muted-foreground">
+	      保存先: {themeLabelBySelection (currentDisplayedThemeSlot)}
+	    </p>
 	    {hasUnsavedChanges && (
 		<p className="text-sm text-amber-700 dark:text-amber-300">
 		  未保存の変更があります
@@ -505,13 +534,6 @@ const ThemeSection: FC<ThemeSectionProps> = (
 	  </div>
 
 	  <div className="flex flex-wrap gap-2">
-	    <Button
-		type="button"
-		variant="outline"
-		onClick={onResetThemeSlot}>
-	      既定に戻す
-	    </Button>
-
 	    <Button
 		type="button"
 		variant="destructive"
@@ -531,7 +553,7 @@ const ThemeSection: FC<ThemeSectionProps> = (
 	<FieldError messages={settingsBaseErrors}/>
 	<FieldError messages={settingsFieldErrors.theme ?? []}/>
 
-	<div className="space-y-3 rounded-xl p-4">
+	<div className="space-y-3 rounded-xl border border-border/70 bg-background/70 p-4">
 	  <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
 	    <div className="shrink-0">
 	      <Label>表示モード</Label>
@@ -545,6 +567,14 @@ const ThemeSection: FC<ThemeSectionProps> = (
 	  </div>
 
 	  <div className="space-y-3">
+	    <div className="space-y-1">
+	      <h3 className="text-sm font-semibold">テーマの使い分け</h3>
+	      <p className="text-sm text-muted-foreground">
+		表示モードと使用テーマは，このブラウザにすぐ保存されます．
+		色の編輯だけが保存・破棄の対象です．
+	      </p>
+	    </div>
+
 	    <div className="grid gap-3 md:grid-cols-2">
 	      <div className="space-y-2">
 		<Label>ライト時</Label>
@@ -558,6 +588,9 @@ const ThemeSection: FC<ThemeSectionProps> = (
 			  {`ライト ${ selection.value }`}
 			</option>))}
 		</select>
+		<p className="text-sm text-muted-foreground">
+		  ライト表示の時に使うテーマを選びます．
+		</p>
 	      </div>
 
 	      <div className="space-y-2">
@@ -572,16 +605,36 @@ const ThemeSection: FC<ThemeSectionProps> = (
 			  {`ダーク ${ selection.value }`}
 			</option>))}
 		</select>
+		<p className="text-sm text-muted-foreground">
+		  ダーク表示の時に使うテーマを選びます．
+		</p>
 	      </div>
 	    </div>
 	  </div>
+
+	  <div className="flex flex-wrap items-center gap-2">
+	    <Button
+		type="button"
+		variant="outline"
+		onClick={onResetThemeSlot}>
+	      既定に戻す
+	    </Button>
+	  </div>
+
+	  <div style={themePreviewStyle (selectedTheme.tokens.tagColours)}>
+	    <TagLink
+		tag={previewTags.general}
+		linkFlg={false}
+		truncateOnMobile
+		withWiki={false}/>
+	  </div>
 	</div>
 
 	<div className="space-y-4">
 	  {themeTokenGroups.map (group => (
 	      <div
 		  key={group.title}
-		  className="space-y-3 rounded-xl p-4">
+		  className="space-y-3 rounded-xl border border-border/70 bg-background/70 p-4">
 		<h3 className="text-sm font-semibold">{group.title}</h3>
 		<div className="space-y-1">
 		  {group.fields.map (field => (
@@ -604,7 +657,7 @@ const ThemeSection: FC<ThemeSectionProps> = (
 		</div>
 	      </div>))}
 
-	  <div className="space-y-3 rounded-xl bg-background/70 p-4">
+	  <div className="space-y-3 rounded-xl border border-border/70 bg-background/70 p-4">
 	    <div className="flex flex-wrap items-center justify-between gap-2">
 	      <div>
 		<h3 className="font-medium">タグ</h3>
@@ -735,9 +788,6 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
       state:  SettingsTabDirtyState,
   ) => {
     setDirtyStates (current => {
-      if (!(state.dirty) && current[tab] == null)
-	return current
-
       const next = { ...current }
 
       if (!(state.dirty))
@@ -830,7 +880,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
     }, nextThemeSlots)
   }
 
-  const discardAllDirtyChanges = useCallback (async (): Promise<void> => {
+  const discardAllDirtyChanges = async (): Promise<void> => {
     const currentDirtyStates = Object.values (dirtyStates)
 
     for (const dirtyState of currentDirtyStates)
@@ -840,7 +890,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
       }
 
     setDirtyStates ({ })
-  }, [dirtyStates])
+  }
 
   const discardCurrentTabChanges = async (): Promise<void> => {
     const currentDirtyState = dirtyStates[activeTab]

frontend/src/test/render.tsx

@@ -3,10 +3,6 @@ import { render } from '@testing-library/react'
 import { HelmetProvider } from 'react-helmet-async'
 import { MemoryRouter } from 'react-router-dom'
 
-import DialogueProvider from '@/components/dialogues/DialogueProvider'
-import { KeyboardShortcutsProvider } from '@/lib/useKeyboardShortcuts'
-import { UnsavedChangesGuardProvider } from '@/lib/useUnsavedChangesGuard'
-
 import type { ReactElement, ReactNode } from 'react'
 
 type Options = {
@@ -19,25 +15,21 @@ export const renderWithProviders = (
 ) => {
   const queryClient = new QueryClient ({
     defaultOptions: {
-      queries: { retry: false } },
+      queries: { retry: false },
+    },
   })
 
   const Wrapper = ({ children }: { children: ReactNode }) => (
       <QueryClientProvider client={queryClient}>
         <HelmetProvider>
           <MemoryRouter initialEntries={[options.route ?? '/']}>
-            <DialogueProvider>
+            {children}
-              <UnsavedChangesGuardProvider>
-                <KeyboardShortcutsProvider>
-                  {children}
-                </KeyboardShortcutsProvider>
-              </UnsavedChangesGuardProvider>
-            </DialogueProvider>
           </MemoryRouter>
         </HelmetProvider>
       </QueryClientProvider>)
 
   return {
     queryClient,
-    ...render (ui, { wrapper: Wrapper }) }
+    ...render (ui, { wrapper: Wrapper }),
+  }
 }

frontend/src/test/setup.ts

@@ -20,10 +20,3 @@ window.requestAnimationFrame = callback => {
   callback (0)
   return 0
 }
-
-Object.defineProperty (window, 'matchMedia', {
-    configurable: true,
-    value: vi.fn ().mockImplementation (() => ({
-	addEventListener: vi.fn (),
-	removeEventListener: vi.fn (),
-	matches: false })) })