#304

#99

#99

#99

#99

#99

#99

#99

#99

#99

#99

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

backend/Gemfile

@@ -50,8 +50,6 @@ group :development, :test do
   gem 'factory_bot_rails'
 end
 
-
-
 gem "mysql2", "~> 0.5.6"
 
 gem "image_processing", "~> 1.14"
@@ -69,3 +67,5 @@ gem 'whenever', require: false
 gem 'discard'
 
 gem "rspec-rails", "~> 8.0", :groups => [:development, :test]
+
+gem 'aws-sdk-s3', require: false

backend/Gemfile.lock

@@ -73,6 +73,25 @@ GEM
       tzinfo (~> 2.0, >= 2.0.5)
       uri (>= 0.13.1)
     ast (2.4.3)
+    aws-eventstream (1.4.0)
+    aws-partitions (1.1231.0)
+    aws-sdk-core (3.244.0)
+      aws-eventstream (~> 1, >= 1.3.0)
+      aws-partitions (~> 1, >= 1.992.0)
+      aws-sigv4 (~> 1.9)
+      base64
+      bigdecimal
+      jmespath (~> 1, >= 1.6.1)
+      logger
+    aws-sdk-kms (1.123.0)
+      aws-sdk-core (~> 3, >= 3.244.0)
+      aws-sigv4 (~> 1.5)
+    aws-sdk-s3 (1.217.0)
+      aws-sdk-core (~> 3, >= 3.244.0)
+      aws-sdk-kms (~> 1)
+      aws-sigv4 (~> 1.5)
+    aws-sigv4 (1.12.1)
+      aws-eventstream (~> 1, >= 1.0.2)
     base64 (0.2.0)
     bcrypt_pbkdf (1.1.1)
     bcrypt_pbkdf (1.1.1-arm64-darwin)
@@ -157,6 +176,7 @@ GEM
       pp (>= 0.6.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
+    jmespath (1.6.2)
     json (2.12.0)
     jwt (2.10.1)
       base64
@@ -441,6 +461,7 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
+  aws-sdk-s3
   bootsnap
   brakeman
   diff-lcs

backend/app/controllers/materials_controller.rb

@@ -0,0 +1,101 @@
+class MaterialsController < ApplicationController
+  def index
+    page = (params[:page].presence || 1).to_i
+    limit = (params[:limit].presence || 20).to_i
+
+    page = 1 if page < 1
+    limit = 1 if limit < 1
+
+    offset = (page - 1) * limit
+
+    tag_id = params[:tag_id].presence
+    parent_id = params[:parent_id].presence
+
+    q = Material.includes(:tag, :created_by_user).with_attached_file
+    q = q.where(tag_id:) if tag_id
+    q = q.where(parent_id:) if parent_id
+
+    count = q.count
+    materials = q.order(created_at: :desc, id: :desc).limit(limit).offset(offset)
+
+    render json: { materials: MaterialRepr.many(materials, host: request.base_url), count: count }
+  end
+
+  def show
+    material =
+        Material
+        .includes(:tag)
+        .with_attached_file
+        .find_by(id: params[:id])
+    return head :not_found unless material
+
+    wiki_page_body = material.tag.tag_name.wiki_page&.current_revision&.body
+
+    render json: MaterialRepr.base(material, host: request.base_url).merge(wiki_page_body:)
+  end
+
+  def create
+    return head :unauthorized unless current_user
+
+    tag_name_raw = params[:tag].to_s.strip
+    file = params[:file]
+    url = params[:url].to_s.strip.presence
+    return head :bad_request if tag_name_raw.blank? || (file.blank? && url.blank?)
+
+    tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
+    tag = tag_name.tag
+    tag = Tag.create!(tag_name:, category: :material) unless tag
+
+    material = Material.new(tag:, url:,
+                            created_by_user: current_user,
+                            updated_by_user: current_user)
+    material.file.attach(file)
+
+    if material.save
+      render json: MaterialRepr.base(material, host: request.base_url), status: :created
+    else
+      render json: { errors: material.errors.full_messages }, status: :unprocessable_entity
+    end
+  end
+
+  def update
+    return head :unauthorized unless current_user
+    return head :forbidden unless current_user.gte_member?
+
+    material = Material.with_attached_file.find_by(id: params[:id])
+    return head :not_found unless material
+
+    tag_name_raw = params[:tag].to_s.strip
+    file = params[:file]
+    url = params[:url].to_s.strip.presence
+    return head :bad_request if tag_name_raw.blank? || (file.blank? && url.blank?)
+
+    tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
+    tag = tag_name.tag
+    tag = Tag.create!(tag_name:, category: :material) unless tag
+
+    material.update!(tag:, url:, updated_by_user: current_user)
+    if file
+      material.file.attach(file)
+    else
+      material.file.purge
+    end
+
+    if material.save
+      render json: MaterialRepr.base(material, host: request.base_url)
+    else
+      render json: { errors: material.errors.full_messages }, status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    return head :unauthorized unless current_user
+    return head :forbidden unless current_user.gte_member?
+
+    material = Material.find_by(id: params[:id])
+    return head :not_found unless material
+
+    material.discard
+    head :no_content
+  end
+end

backend/app/controllers/posts_controller.rb

@@ -75,7 +75,7 @@ class PostsController < ApplicationController
         else
           "posts.#{ order[0] }"
         end
-    posts = q.order(Arel.sql("#{ sort_sql } #{ order[1] }, id #{ order[1] }"))
+    posts = q.order(Arel.sql("#{ sort_sql } #{ order[1] }, posts.id #{ order[1] }"))
              .limit(limit)
              .offset(offset)
              .to_a
@@ -100,23 +100,16 @@ class PostsController < ApplicationController
                          .first
     return head :not_found unless post
 
-    viewed = current_user&.viewed?(post) || false
+    render json: PostRepr.base(post, current_user)
-
-    render json: PostRepr.base(post).merge(viewed:)
   end
 
   def show
     post = Post.includes(tags: { tag_name: :wiki_page }).find_by(id: params[:id])
     return head :not_found unless post
 
-    viewed = current_user&.viewed?(post) || false
+    render json: PostRepr.base(post, current_user)
-
+                         .merge(tags: build_tag_tree_for(post.tags),
-    json = post.as_json
+                                related: post.related(limit: 20))
-    json['tags'] = build_tag_tree_for(post.tags)
-    json['related'] = post.related(limit: 20)
-    json['viewed'] = viewed
-
-    render json:
   end
 
   def create
@@ -192,6 +185,7 @@ class PostsController < ApplicationController
 
   def changes
     id = params[:id].presence
+    tag_id = params[:tag].presence
     page = (params[:page].presence || 1).to_i
     limit = (params[:limit].presence || 20).to_i
 
@@ -202,6 +196,7 @@ class PostsController < ApplicationController
 
     pts = PostTag.with_discarded
     pts = pts.where(post_id: id) if id.present?
+    pts = pts.where(tag_id:) if tag_id.present?
     pts = pts.includes(:post, :created_user, :deleted_user,
                        tag: { tag_name: :wiki_page })
 
@@ -245,19 +240,41 @@ class PostsController < ApplicationController
   end
 
   def filter_posts_by_tags tag_names, match_type
-    tag_names = TagName.canonicalise(tag_names)
+    literals = tag_names.map do |raw_name|
+      { name: TagName.canonicalise(raw_name.sub(/\Anot:/i, '')).first,
+        negative: raw_name.downcase.start_with?('not:') }
+    end
 
-    posts = Post.joins(tags: :tag_name)
+    return Post.all if literals.empty?
 
     if match_type == 'any'
-      posts.where(tag_names: { name: tag_names }).distinct
+      literals.reduce(Post.none) do |posts, literal|
+        posts.or(tag_literal_relation(literal[:name], negative: literal[:negative]))
+      end
     else
-      posts.where(tag_names: { name: tag_names })
+      literals.reduce(Post.all) do |posts, literal|
-           .group('posts.id')
+        ids = tagged_post_ids_for(literal[:name])
-           .having('COUNT(DISTINCT tag_names.id) = ?', tag_names.uniq.size)
+        if literal[:negative]
+          posts.where.not(id: ids)
+        else
+          posts.where(id: ids)
+        end
+      end
     end
   end
 
+  def tag_literal_relation name, negative:
+    ids = tagged_post_ids_for(name)
+    if negative
+      Post.where.not(id: ids)
+    else
+      Post.where(id: ids)
+    end
+  end
+
+  def tagged_post_ids_for(name) =
+      Post.joins(tags: :tag_name).where(tag_names: { name: }).select(:id)
+
   def sync_post_tags! post, desired_tags
     desired_tags.each do |t|
       t.save! if t.new_record?

backend/app/controllers/tags_controller.rb

@@ -2,23 +2,113 @@ class TagsController < ApplicationController
   def index
     post_id = params[:post]
 
-    tags =
+    name = params[:name].presence
+    category = params[:category].presence
+    post_count_between = (params[:post_count_gte].presence || -1).to_i,
+                         (params[:post_count_lte].presence || -1).to_i
+    post_count_between[0] = nil if post_count_between[0] < 0
+    post_count_between[1] = nil if post_count_between[1] < 0
+    created_between = params[:created_from].presence, params[:created_to].presence
+    updated_between = params[:updated_from].presence, params[:updated_to].presence
+
+    order = params[:order].to_s.split(':', 2).map(&:strip)
+    unless order[0].in?(['name', 'category', 'post_count', 'created_at', 'updated_at'])
+      order[0] = 'post_count'
+    end
+    unless order[1].in?(['asc', 'desc'])
+      order[1] = order[0].in?(['name', 'category']) ? 'asc' : 'desc'
+    end
+
+    page = (params[:page].presence || 1).to_i
+    limit = (params[:limit].presence || 20).to_i
+
+    page = 1 if page < 1
+    limit = 1 if limit < 1
+
+    offset = (page - 1) * limit
+
+    q =
         if post_id.present?
           Tag.joins(:posts, :tag_name)
         else
           Tag.joins(:tag_name)
         end
-        .includes(:tag_name, tag_name: :wiki_page)
+        .includes(:tag_name, :materials, tag_name: :wiki_page)
-    if post_id.present?
+    q = q.where(posts: { id: post_id }) if post_id.present?
-      tags = tags.where(posts: { id: post_id })
-    end
 
-    render json: TagRepr.base(tags)
+    q = q.where('tag_names.name LIKE ?', "%#{ name }%") if name
+    q = q.where(category:) if category
+    q = q.where('tags.post_count >= ?', post_count_between[0]) if post_count_between[0]
+    q = q.where('tags.post_count <= ?', post_count_between[1]) if post_count_between[1]
+    q = q.where('tags.created_at >= ?', created_between[0]) if created_between[0]
+    q = q.where('tags.created_at <= ?', created_between[1]) if created_between[1]
+    q = q.where('tags.updated_at >= ?', updated_between[0]) if updated_between[0]
+    q = q.where('tags.updated_at <= ?', updated_between[1]) if updated_between[1]
+
+    sort_sql =
+        case order[0]
+        when 'name'
+          'tag_names.name'
+        when 'category'
+          'CASE tags.category ' +
+          "WHEN 'deerjikist' THEN 0 " +
+          "WHEN 'meme' THEN 1 " +
+          "WHEN 'character' THEN 2 " +
+          "WHEN 'general' THEN 3 " +
+          "WHEN 'material' THEN 4 " +
+          "WHEN 'meta' THEN 5 " +
+          "WHEN 'nico' THEN 6 END"
+        else
+          "tags.#{ order[0] }"
+        end
+    tags = q.order(Arel.sql("#{ sort_sql } #{ order[1] }, tags.id #{ order[1] }"))
+            .limit(limit)
+            .offset(offset)
+            .to_a
+
+    render json: { tags: TagRepr.base(tags), count: q.size }
+  end
+
+  def with_depth
+    parent_tag_id = params[:parent].to_i
+    parent_tag_id = nil if parent_tag_id <= 0
+
+    tag_ids =
+        if parent_tag_id
+          TagImplication.where(parent_tag_id:).select(:tag_id)
+        else
+          Tag.where.not(id: TagImplication.select(:tag_id)).select(:id)
+        end
+
+    tags =
+        Tag
+        .joins(:tag_name)
+        .includes(:tag_name, :materials, tag_name: :wiki_page)
+        .where(category: [:meme, :character, :material])
+        .where(id: tag_ids)
+        .order('tag_names.name')
+        .distinct
+        .to_a
+
+    has_children_tag_ids =
+        if tags.empty?
+          []
+        else
+          TagImplication
+              .joins(:tag)
+              .where(parent_tag_id: tags.map(&:id),
+                     tags: { category: [:meme, :character, :material] })
+              .distinct
+              .pluck(:parent_tag_id)
+        end
+
+    render json: tags.map { |tag|
+      TagRepr.base(tag).merge(has_children: has_children_tag_ids.include?(tag.id), children: [])
+    }
   end
 
   def autocomplete
-    q = params[:q].to_s.strip
+    q = params[:q].to_s.strip.sub(/\Anot:/i, '')
-    return render json: [] if q.blank?
 
     with_nico = bool?(:nico, default: true)
     present_only = bool?(:present, default: true)
@@ -38,7 +128,7 @@ class TagsController < ApplicationController
     end
 
     base = Tag.joins(:tag_name)
-              .includes(:tag_name, tag_name: :wiki_page)
+              .includes(:tag_name, :materials, tag_name: :wiki_page)
     base = base.where('tags.post_count > 0') if present_only
 
     canonical_hit =
@@ -63,7 +153,7 @@ class TagsController < ApplicationController
 
   def show
     tag = Tag.joins(:tag_name)
-             .includes(:tag_name, tag_name: :wiki_page)
+             .includes(:tag_name, :materials, tag_name: :wiki_page)
              .find_by(id: params[:id])
     if tag
       render json: TagRepr.base(tag)
@@ -77,7 +167,7 @@ class TagsController < ApplicationController
     return head :bad_request if name.blank?
 
     tag = Tag.joins(:tag_name)
-             .includes(:tag_name, tag_name: :wiki_page)
+             .includes(:tag_name, :materials, tag_name: :wiki_page)
              .find_by(tag_names: { name: })
     if tag
       render json: TagRepr.base(tag)
@@ -107,6 +197,18 @@ class TagsController < ApplicationController
     render json: DeerjikistRepr.many(tag.deerjikists)
   end
 
+  def materials_by_name
+    name = params[:name].to_s.strip
+    return head :bad_request if name.blank?
+
+    tag = Tag.joins(:tag_name)
+             .includes(:tag_name, :materials, tag_name: :wiki_page)
+             .find_by(tag_names: { name: })
+    return head :not_found unless tag
+
+    render json: build_tag_children(tag)
+  end
+
   def update
     return head :unauthorized unless current_user
     return head :forbidden unless current_user.gte_member?
@@ -126,4 +228,20 @@ class TagsController < ApplicationController
 
     render json: TagRepr.base(tag)
   end
+
+  private
+
+  def build_tag_children(tag)
+    material = tag.materials.first
+    file = nil
+    content_type = nil
+    if material&.file&.attached?
+      file = rails_storage_proxy_url(material.file, only_path: false)
+      content_type = material.file.blob.content_type
+    end
+
+    TagRepr.base(tag).merge(
+        children: tag.children.sort_by { _1.name }.map { build_tag_children(_1) },
+        material: material.as_json&.merge(file:, content_type:))
+  end
 end

backend/app/controllers/theatre_comments_controller.rb

@@ -0,0 +1,32 @@
+class TheatreCommentsController < ApplicationController
+  def index
+    no_gt = params[:no_gt].to_i
+    no_gt = 0 if no_gt.negative?
+
+    comments = TheatreComment
+               .where(theatre_id: params[:theatre_id])
+               .where('no > ?', no_gt)
+               .order(no: :desc)
+
+    render json: comments.as_json(include: { user: { only: [:id, :name] } })
+  end
+
+  def create
+    return head :unauthorized unless current_user
+
+    content = params[:content]
+    return head :unprocessable_entity if content.blank?
+
+    theatre = Theatre.find_by(id: params[:theatre_id])
+    return head :not_found unless theatre
+
+    comment = nil
+    theatre.with_lock do
+      no = theatre.next_comment_no
+      comment = TheatreComment.create!(theatre:, no:, user: current_user, content:)
+      theatre.update!(next_comment_no: no + 1)
+    end
+
+    render json: comment, status: :created
+  end
+end

backend/app/controllers/theatres_controller.rb

@@ -0,0 +1,54 @@
+class TheatresController < ApplicationController
+  def show
+    theatre = Theatre.find_by(id: params[:id])
+    return head :not_found unless theatre
+
+    render json: TheatreRepr.base(theatre)
+  end
+
+  def watching
+    return head :unauthorized unless current_user
+
+    theatre = Theatre.find_by(id: params[:id])
+    return head :not_found unless theatre
+
+    host_flg = false
+    post_id = nil
+    post_started_at = nil
+
+    theatre.with_lock do
+      TheatreWatchingUser.find_or_initialize_by(theatre:, user: current_user).tap {
+        _1.expires_at = 30.seconds.from_now
+      }.save!
+
+      if (!(theatre.host_user_id?) ||
+          !(theatre.watching_users.exists?(id: theatre.host_user_id)))
+        theatre.update!(host_user_id: current_user.id)
+      end
+
+      host_flg = theatre.host_user_id == current_user.id
+      post_id = theatre.current_post_id
+      post_started_at = theatre.current_post_started_at
+    end
+
+    render json: {
+        host_flg:, post_id:, post_started_at:,
+        watching_users: theatre.watching_users.as_json(only: [:id, :name]) }
+  end
+
+  def next_post
+    return head :unauthorized unless current_user
+
+    theatre = Theatre.find_by(id: params[:id])
+    return head :not_found unless theatre
+    return head :forbidden if theatre.host_user != current_user
+
+    post = Post.where("url LIKE '%nicovideo.jp%'")
+           .or(Post.where("url LIKE '%youtube.com%'"))
+           .order('RAND()')
+           .first
+    theatre.update!(current_post: post, current_post_started_at: Time.current)
+
+    head :no_content
+  end
+end

backend/app/controllers/wiki_pages_controller.rb

@@ -90,7 +90,7 @@ class WikiPagesController < ApplicationController
 
     return head :unprocessable_entity if name.blank? || body.blank?
 
-    tag_name = TagName.find_or_create_by!(name:)
+    tag_name = TagName.find_undiscard_or_create_by!(name:)
     page = WikiPage.new(tag_name:, created_user: current_user, updated_user: current_user)
     if page.save
       message = params[:message].presence

backend/app/models/material.rb

@@ -0,0 +1,39 @@
+class Material < ApplicationRecord
+  include MyDiscard
+
+  default_scope -> { kept }
+
+  belongs_to :parent, class_name: 'Material', optional: true
+  has_many :children, class_name: 'Material', foreign_key: :parent_id, dependent: :nullify
+
+  belongs_to :tag, optional: true
+  belongs_to :created_by_user, class_name: 'User', optional: true
+  belongs_to :updated_by_user, class_name: 'User', optional: true
+
+  has_one_attached :file, dependent: :purge
+
+  validates :tag_id, presence: true, uniqueness: true
+
+  validate :file_must_be_attached
+  validate :tag_must_be_material_category
+
+  def content_type
+    return nil unless file&.attached?
+
+    file.blob.content_type
+  end
+
+  private
+
+  def file_must_be_attached
+    return if url.present? || file.attached?
+
+    errors.add(:url, 'URL かファイルのどちらかは必須です．')
+  end
+
+  def tag_must_be_material_category
+    return if tag.blank? || tag.character? || tag.material?
+
+    errors.add(:tag, '素材カテゴリのタグを指定してください．')
+  end
+end

backend/app/models/my_discard.rb

@@ -0,0 +1,20 @@
+module MyDiscard
+  extend ActiveSupport::Concern
+
+  included { include Discard::Model }
+
+  class_methods do
+    def find_undiscard_or_create_by! attrs, &block
+      record = with_discarded.find_by(attrs)
+
+      if record&.discarded?
+        record.undiscard!
+        record.update_columns(created_at: record.reload.updated_at)
+      end
+
+      record or create!(attrs, &block)
+    rescue ActiveRecord::RecordNotUnique
+      retry
+    end
+  end
+end

backend/app/models/tag.rb

@@ -1,8 +1,12 @@
 class Tag < ApplicationRecord
+  include MyDiscard
+
   class NicoTagNormalisationError < ArgumentError
     ;
   end
 
+  default_scope -> { kept }
+
   has_many :post_tags, inverse_of: :tag
   has_many :active_post_tags, -> { kept }, class_name: 'PostTag', inverse_of: :tag
   has_many :post_tags_with_discarded, -> { with_discarded }, class_name: 'PostTag'
@@ -27,6 +31,7 @@ class Tag < ApplicationRecord
            class_name: 'TagSimilarity', foreign_key: :target_tag_id, dependent: :delete_all
 
   has_many :deerjikists, dependent: :delete_all
+  has_many :materials
 
   belongs_to :tag_name
   delegate :wiki_page, to: :tag_name
@@ -68,6 +73,8 @@ class Tag < ApplicationRecord
 
   def has_wiki = wiki_page.present?
 
+  def material_id = materials.first&.id
+
   def self.tagme
     @tagme ||= find_or_create_by_tag_name!('タグ希望', category: :meta)
   end
@@ -130,10 +137,10 @@ class Tag < ApplicationRecord
   end
 
   def self.find_or_create_by_tag_name! name, category:
-    tn = TagName.find_or_create_by!(name: name.to_s.strip)
+    tn = TagName.find_undiscard_or_create_by!(name: name.to_s.strip)
     tn = tn.canonical if tn.canonical_id?
 
-    Tag.find_or_create_by!(tag_name_id: tn.id) do |t|
+    Tag.find_undiscard_or_create_by!(tag_name_id: tn.id) do |t|
       t.category = category
     end
   rescue ActiveRecord::RecordNotUnique
@@ -144,25 +151,33 @@ class Tag < ApplicationRecord
     target_tag => Tag
 
     Tag.transaction do
-      Array(source_tags).compact.uniq.each do |st|
+      Array(source_tags).compact.uniq.each do |source_tag|
-        st => Tag
+        source_tag => Tag
 
-        next if st == target_tag
+        next if source_tag == target_tag
 
-        st.post_tags.find_each do |pt|
+        source_tag.post_tags.kept.find_each do |source_pt|
-          if PostTag.kept.exists?(post_id: pt.post_id, tag_id: target_tag.id)
+          post_id = source_pt.post_id
-            pt.discard_by!(nil)
+          source_pt.discard_by!(nil)
-            # discard 後の update! は禁止なので DB を直に更新
+          unless PostTag.kept.exists?(post_id:, tag: target_tag)
-            pt.update_columns(tag_id: target_tag.id, updated_at: Time.current)
+            PostTag.create!(post_id:, tag: target_tag)
-          else
-            pt.update!(tag: target_tag)
           end
         end
 
-        tag_name = st.tag_name
+        source_tag_name = source_tag.tag_name
-        st.destroy!
+
-        tag_name.reload
+        if source_tag_name.wiki_page.present?
-        tag_name.update!(canonical: target_tag.tag_name)
+          raise ActiveRecord::RecordInvalid.new(source_tag_name)
+        end
+
+        source_tag.discard!
+
+        if source_tag.nico?
+          source_tag_name.discard!
+        else
+          source_tag_name.update_columns(canonical_id: target_tag.tag_name_id,
+                                         updated_at: Time.current)
+        end
       end
 
       # 投稿件数を再集計

backend/app/models/tag_name.rb

@@ -1,4 +1,8 @@
 class TagName < ApplicationRecord
+  include MyDiscard
+
+  default_scope -> { kept }
+
   has_one :tag
   has_one :wiki_page
 
@@ -10,6 +14,7 @@ class TagName < ApplicationRecord
   validate :canonical_must_be_canonical
   validate :alias_name_must_not_have_prefix
   validate :canonical_must_not_be_present_with_tag_or_wiki_page
+  validate :name_must_be_sanitised
 
   def self.canonicalise names
     names = Array(names).map { |n| n.to_s.strip }.reject(&:blank?)
@@ -39,4 +44,10 @@ class TagName < ApplicationRecord
       errors.add :canonical, 'タグもしくは Wiki の参照がある名前はエーリアスになれません．'
     end
   end
+
+  def name_must_be_sanitised
+    if name? && name != TagNameSanitisationRule.sanitise(name)
+      errors.add :name, '名前に使用できない文字が含まれてゐます．'
+    end
+  end
 end

backend/app/models/tag_name_sanitisation_rule.rb

@@ -0,0 +1,58 @@
+class TagNameSanitisationRule < ApplicationRecord
+  include Discard::Model
+
+  self.primary_key = :priority
+
+  default_scope -> { kept }
+
+  validates :source_pattern, presence: true, uniqueness: true
+
+  validate :source_pattern_must_be_regexp
+
+  class << self
+    def sanitise(name) =
+        rules.reduce(name.dup) { |name, (pattern, replacement)| name.gsub(pattern, replacement) }
+
+    def apply!
+      TagName.find_each do |tn|
+        name = sanitise(tn.name)
+        next if name == tn.name
+
+        TagName.transaction do
+          existing_tn = TagName.find_by(name:)
+          if existing_tn
+            existing_tn = existing_tn.canonical || existing_tn
+            next if existing_tn.id == tn.id
+
+            existing_tag = Tag.find_by(tag_name_id: existing_tn.id)
+            source_tag = Tag.find_by(tag_name_id: tn.id)
+
+            if existing_tag
+              Tag.merge_tags!(existing_tag, source_tag) if tn.tag
+            elsif source_tag
+              source_tag.update_columns(tag_name_id: existing_tn.id, updated_at: Time.current)
+            end
+            tn.discard!
+
+            next
+          end
+
+          # TagName 側の自動サニタイズを回避
+          tn.update_columns(name:, updated_at: Time.current)
+        end
+      end
+    end
+
+    private
+
+    def rules = kept.order(:priority).map { |r| [Regexp.new(r.source_pattern), r.replacement] }
+  end
+
+  private
+
+  def source_pattern_must_be_regexp
+    Regexp.new(source_pattern)
+  rescue RegexpError
+    errors.add :source_pattern, '変な正規表現だね〜（笑）'
+  end
+end

backend/app/models/theatre.rb

@@ -0,0 +1,13 @@
+class Theatre < ApplicationRecord
+  include MyDiscard
+
+  has_many :comments, class_name: 'TheatreComment'
+  has_many :theatre_watching_users, dependent: :delete_all
+  has_many :active_theatre_watching_users, -> { active },
+           class_name: 'TheatreWatchingUser', inverse_of: :theatre
+  has_many :watching_users, through: :active_theatre_watching_users, source: :user
+
+  belongs_to :host_user, class_name: 'User', optional: true
+  belongs_to :current_post, class_name: 'Post', optional: true
+  belongs_to :created_by_user, class_name: 'User'
+end

backend/app/models/theatre_comment.rb

@@ -0,0 +1,8 @@
+class TheatreComment < ApplicationRecord
+  include Discard::Model
+
+  self.primary_key = :theatre_id, :no
+
+  belongs_to :theatre
+  belongs_to :user
+end

backend/app/models/theatre_watching_user.rb

@@ -0,0 +1,13 @@
+class TheatreWatchingUser < ApplicationRecord
+  self.primary_key = :theatre_id, :user_id
+
+  belongs_to :theatre
+  belongs_to :user
+
+  scope :active, -> { where('expires_at >= ?', Time.current) }
+  scope :expired, -> { where('expires_at < ?', Time.current) }
+
+  def active? = expires_at >= Time.current
+
+  def refresh! = update!(expires_at: 30.seconds.from_now)
+end

backend/app/models/wiki_page.rb

@@ -2,6 +2,10 @@ require 'set'
 
 
 class WikiPage < ApplicationRecord
+  include MyDiscard
+
+  default_scope -> { kept }
+
   has_many :wiki_revisions, dependent: :destroy
   belongs_to :created_user, class_name: 'User'
   belongs_to :updated_user, class_name: 'User'

backend/app/representations/material_repr.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+
+module MaterialRepr
+  BASE = { only: [:id, :url, :created_at, :updated_at],
+           methods: [:content_type],
+           include: { tag: TagRepr::BASE,
+                      created_by_user: UserRepr::BASE,
+                      updated_by_user: UserRepr::BASE } }.freeze
+
+  module_function
+
+  def base material, host:
+    material.as_json(BASE).merge(
+        file: if material.file.attached?
+                Rails.application.routes.url_helpers.rails_storage_proxy_url(
+                    material.file, host:)
+              end)
+  end
+
+  def many materials, host:
+    materials.map { |m| base(m, host:) }
+  end
+end

backend/app/representations/post_repr.rb

@@ -2,15 +2,19 @@
 
 
 module PostRepr
-  BASE = { include: { tags: TagRepr::BASE } }.freeze
+  BASE = { include: { tags: TagRepr::BASE, uploaded_user: UserRepr::BASE } }.freeze
 
   module_function
 
-  def base post
+  def base post, current_user = nil
-    post.as_json(BASE)
+    json = post.as_json(BASE)
+    return json.merge(viewed: false) unless current_user
+
+    viewed = current_user.viewed?(post)
+    json.merge(viewed:)
   end
 
-  def many posts
+  def many posts, current_user = nil
-    posts.map { |p| base(p) }
+    posts.map { |p| base(p, current_user) }
   end
 end

backend/app/representations/tag_repr.rb

@@ -2,7 +2,8 @@
 
 
 module TagRepr
-  BASE = { only: [:id, :category, :post_count], methods: [:name, :has_wiki] }.freeze
+  BASE = { only: [:id, :category, :post_count, :created_at, :updated_at],
+           methods: [:name, :has_wiki, :material_id] }.freeze
 
   module_function
 

backend/app/representations/theatre_repr.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+
+module TheatreRepr
+  BASE = { only: [:id, :name, :opens_at, :closes_at, :created_at, :updated_at],
+           include: { created_by_user: { only: [:id, :name] } } }.freeze
+
+  module_function
+
+  def base theatre
+    theatre.as_json(BASE)
+  end
+
+  def many theatre
+    theatre.map { |t| base(t) }
+  end
+end

backend/app/representations/user_repr.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+
+module UserRepr
+  BASE = { only: [:id, :name] }.freeze
+
+  module_function
+
+  def base user
+    user.as_json(BASE)
+  end
+
+  def many users
+    users.map { |u| base(u) }
+  end
+end

backend/config/environments/production.rb

@@ -18,8 +18,7 @@ Rails.application.configure do
   # Enable serving of images, stylesheets, and JavaScripts from an asset server.
   # config.asset_host = "http://assets.example.com"
 
-  # Store uploaded files on the local file system (see config/storage.yml for options).
+  config.active_storage.service = :r2
-  config.active_storage.service = :local
 
   # Assume all access to the app is happening through a SSL-terminating reverse proxy.
   config.assume_ssl = true

backend/config/environments/test.rb

@@ -50,4 +50,6 @@ Rails.application.configure do
 
   # Raise error when a before_action's only/except options reference missing actions.
   config.action_controller.raise_on_missing_callback_actions = true
+
+  Rails.application.routes.default_url_options[:host] = 'www.example.com'
 end

backend/config/routes.rb

@@ -9,9 +9,11 @@ Rails.application.routes.draw do
   resources :tags, only: [:index, :show, :update] do
     collection do
       get :autocomplete
+      get :'with-depth', action: :with_depth
 
       scope :name do
         get ':name/deerjikists', action: :deerjikists_by_name
+        get ':name/materials', action: :materials_by_name
         get ':name', action: :show_by_name
       end
     end
@@ -72,4 +74,15 @@ Rails.application.routes.draw do
       end
     end
   end
+
+  resources :theatres, only: [:show] do
+    member do
+      put :watching
+      patch :next_post
+    end
+
+    resources :comments, controller: :theatre_comments, only: [:index, :create]
+  end
+
+  resources :materials, only: [:index, :show, :create, :update, :destroy]
 end

backend/config/storage.yml

@@ -6,29 +6,10 @@ local:
   service: Disk
   root: <%= Rails.root.join("storage") %>
 
-# Use bin/rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
+r2:
-# amazon:
+  service: S3
-#   service: S3
+  endpoint: <%= ENV['R2_ENDPOINT'] %>
-#   access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
+  access_key_id: <%= ENV['R2_ACCESS_KEY_ID'] %>
-#   secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
+  secret_access_key: <%= ENV['R2_SECRET_ACCESS_KEY'] %>
-#   region: us-east-1
+  bucket: <%= ENV['R2_BUCKET'] %>
-#   bucket: your_own_bucket-<%= Rails.env %>
+  region: auto
-
-# Remember not to checkin your GCS keyfile to a repository
-# google:
-#   service: GCS
-#   project: your_project
-#   credentials: <%= Rails.root.join("path/to/gcs.keyfile") %>
-#   bucket: your_own_bucket-<%= Rails.env %>
-
-# Use bin/rails credentials:edit to set the Azure Storage secret (as azure_storage:storage_access_key)
-# microsoft:
-#   service: AzureStorage
-#   storage_account_name: your_account_name
-#   storage_access_key: <%= Rails.application.credentials.dig(:azure_storage, :storage_access_key) %>
-#   container: your_container_name-<%= Rails.env %>
-
-# mirror:
-#   service: Mirror
-#   primary: local
-#   mirrors: [ amazon, google, microsoft ]

backend/db/migrate/20260309123200_create_tag_name_sanitisation_rules.rb

@@ -0,0 +1,31 @@
+class CreateTagNameSanitisationRules < ActiveRecord::Migration[8.0]
+  def up
+    create_table :tag_name_sanitisation_rules, id: :integer, primary_key: :priority do |t|
+      t.string :source_pattern, null: false
+      t.string :replacement, null: false
+      t.timestamps
+      t.datetime :discarded_at
+      t.index :source_pattern, unique: true
+      t.index :discarded_at
+    end
+
+    now = ActiveRecord::Base.connection.quote(Time.current)
+    execute <<~SQL
+      INSERT INTO
+        tag_name_sanitisation_rules(priority, source_pattern, replacement, created_at, updated_at)
+      VALUES
+        (10, '\\\\*',           '_',         #{ now }, #{ now })
+      , (20, '\\\\?',           '_',         #{ now }, #{ now })
+      , (25, '\\\\/',           '_',         #{ now }, #{ now })
+      , (30, '_+',              '_',         #{ now }, #{ now })
+      , (40, '_$',              '',          #{ now }, #{ now })
+      , (45, '^([^:]+\\\\:)?_', '\\\\1',     #{ now }, #{ now })
+      , (50, '^([^:]+\\\\:)?$', '\\\\1null', #{ now }, #{ now })
+      ;
+    SQL
+  end
+
+  def down
+    drop_table :tag_name_sanitisation_rules
+  end
+end

backend/db/migrate/20260311123100_add_discarded_at_to_tags.rb

@@ -0,0 +1,6 @@
+class AddDiscardedAtToTags < ActiveRecord::Migration[8.0]
+  def change
+    add_column :tags, :discarded_at, :datetime
+    add_index :tags, :discarded_at
+  end
+end

backend/db/migrate/20260311232100_add_discarded_at_to_tag_names.rb

@@ -0,0 +1,6 @@
+class AddDiscardedAtToTagNames < ActiveRecord::Migration[8.0]
+  def change
+    add_column :tag_names, :discarded_at, :datetime
+    add_index :tag_names, :discarded_at
+  end
+end

backend/db/migrate/20260311232300_add_discarded_at_to_wiki_pages.rb

@@ -0,0 +1,6 @@
+class AddDiscardedAtToWikiPages < ActiveRecord::Migration[8.0]
+  def change
+    add_column :wiki_pages, :discarded_at, :datetime
+    add_index :wiki_pages, :discarded_at
+  end
+end

backend/db/migrate/20260316082500_create_theatres.rb

@@ -0,0 +1,17 @@
+class CreateTheatres < ActiveRecord::Migration[8.0]
+  def change
+    create_table :theatres do |t|
+      t.string :name
+      t.datetime :opens_at, null: false, index: true
+      t.datetime :closes_at, index: true
+      t.integer :kind, null: false, index: true
+      t.references :current_post, foreign_key: { to_table: :posts }, index: true
+      t.datetime :current_post_started_at
+      t.integer :next_comment_no, null: false, default: 1
+      t.references :host_user, foreign_key: { to_table: :users }
+      t.references :created_by_user, null: false, foreign_key: { to_table: :users }, index: true
+      t.timestamps
+      t.datetime :discarded_at, index: true
+    end
+  end
+end

backend/db/migrate/20260316083500_create_theatre_comments.rb

@@ -0,0 +1,12 @@
+class CreateTheatreComments < ActiveRecord::Migration[8.0]
+  def change
+    create_table :theatre_comments, primary_key: [:theatre_id, :no] do |t|
+      t.references :theatre, null: false, foreign_key: { to_table: :theatres }
+      t.integer :no, null: false
+      t.references :user, foreign_key: { to_table: :users }
+      t.text :content, null: false
+      t.timestamps
+      t.datetime :discarded_at, index: true
+    end
+  end
+end

backend/db/migrate/20260317015000_create_theatre_watching_users.rb

@@ -0,0 +1,12 @@
+class CreateTheatreWatchingUsers < ActiveRecord::Migration[8.0]
+  def change
+    create_table :theatre_watching_users, primary_key: [:theatre_id, :user_id] do |t|
+      t.references :theatre, null: false, foreign_key: { to_table: :theatres }
+      t.references :user, null: false, foreign_key: { to_table: :users }, index: true
+      t.datetime :expires_at, null: false, index: true
+      t.timestamps
+
+      t.index [:theatre_id, :expires_at]
+    end
+  end
+end

backend/db/migrate/20260329034700_create_materials.rb

@@ -0,0 +1,34 @@
+class CreateMaterials < ActiveRecord::Migration[8.0]
+  def change
+    create_table :materials do |t|
+      t.string :url
+      t.references :parent, index: true, foreign_key: { to_table: :materials }
+      t.references :tag, index: true, foreign_key: true
+      t.references :created_by_user, foreign_key: { to_table: :users }
+      t.references :updated_by_user, foreign_key: { to_table: :users }
+      t.timestamps
+      t.datetime :discarded_at, index: true
+      t.virtual :active_url, type: :string,
+                             as: 'IF(discarded_at IS NULL, url, NULL)',
+                             stored: false
+
+      t.index :active_url, unique: true
+    end
+
+    create_table :material_versions do |t|
+      t.references :material, null: false, foreign_key: true
+      t.integer :version_no, null: false
+      t.string :url, index: true
+      t.references :parent, index: true, foreign_key: { to_table: :materials }
+      t.references :tag, index: true, foreign_key: true
+      t.references :created_by_user, foreign_key: { to_table: :users }
+      t.references :updated_by_user, foreign_key: { to_table: :users }
+      t.timestamps
+      t.datetime :discarded_at, index: true
+
+      t.index [:material_id, :version_no],
+              unique: true,
+              name: 'index_material_versions_on_material_id_and_version_no'
+    end
+  end
+end

backend/db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[8.0].define(version: 2026_03_03_122700) do
+ActiveRecord::Schema[8.0].define(version: 2026_03_29_034700) do
   create_table "active_storage_attachments", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.string "name", null: false
     t.string "record_type", null: false
@@ -56,6 +56,45 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_03_122700) do
     t.index ["ip_address"], name: "index_ip_addresses_on_ip_address", unique: true
   end
 
+  create_table "material_versions", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.bigint "material_id", null: false
+    t.integer "version_no", null: false
+    t.string "url"
+    t.bigint "parent_id"
+    t.bigint "tag_id"
+    t.bigint "created_by_user_id"
+    t.bigint "updated_by_user_id"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "discarded_at"
+    t.index ["created_by_user_id"], name: "index_material_versions_on_created_by_user_id"
+    t.index ["discarded_at"], name: "index_material_versions_on_discarded_at"
+    t.index ["material_id", "version_no"], name: "index_material_versions_on_material_id_and_version_no", unique: true
+    t.index ["material_id"], name: "index_material_versions_on_material_id"
+    t.index ["parent_id"], name: "index_material_versions_on_parent_id"
+    t.index ["tag_id"], name: "index_material_versions_on_tag_id"
+    t.index ["updated_by_user_id"], name: "index_material_versions_on_updated_by_user_id"
+    t.index ["url"], name: "index_material_versions_on_url"
+  end
+
+  create_table "materials", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.string "url"
+    t.bigint "parent_id"
+    t.bigint "tag_id"
+    t.bigint "created_by_user_id"
+    t.bigint "updated_by_user_id"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "discarded_at"
+    t.virtual "active_url", type: :string, as: "if((`discarded_at` is null),`url`,NULL)"
+    t.index ["active_url"], name: "index_materials_on_active_url", unique: true
+    t.index ["created_by_user_id"], name: "index_materials_on_created_by_user_id"
+    t.index ["discarded_at"], name: "index_materials_on_discarded_at"
+    t.index ["parent_id"], name: "index_materials_on_parent_id"
+    t.index ["tag_id"], name: "index_materials_on_tag_id"
+    t.index ["updated_by_user_id"], name: "index_materials_on_updated_by_user_id"
+  end
+
   create_table "nico_tag_relations", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "nico_tag_id", null: false
     t.bigint "tag_id", null: false
@@ -127,12 +166,24 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_03_122700) do
     t.index ["tag_id"], name: "index_tag_implications_on_tag_id"
   end
 
+  create_table "tag_name_sanitisation_rules", primary_key: "priority", id: :integer, charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.string "source_pattern", null: false
+    t.string "replacement", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "discarded_at"
+    t.index ["discarded_at"], name: "index_tag_name_sanitisation_rules_on_discarded_at"
+    t.index ["source_pattern"], name: "index_tag_name_sanitisation_rules_on_source_pattern", unique: true
+  end
+
   create_table "tag_names", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.string "name", null: false
     t.bigint "canonical_id"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.datetime "discarded_at"
     t.index ["canonical_id"], name: "index_tag_names_on_canonical_id"
+    t.index ["discarded_at"], name: "index_tag_names_on_discarded_at"
     t.index ["name"], name: "index_tag_names_on_name", unique: true
   end
 
@@ -150,9 +201,58 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_03_122700) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.integer "post_count", default: 0, null: false
+    t.datetime "discarded_at"
+    t.index ["discarded_at"], name: "index_tags_on_discarded_at"
     t.index ["tag_name_id"], name: "index_tags_on_tag_name_id", unique: true
   end
 
+  create_table "theatre_comments", primary_key: ["theatre_id", "no"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.bigint "theatre_id", null: false
+    t.integer "no", null: false
+    t.bigint "user_id"
+    t.text "content", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "discarded_at"
+    t.index ["discarded_at"], name: "index_theatre_comments_on_discarded_at"
+    t.index ["theatre_id"], name: "index_theatre_comments_on_theatre_id"
+    t.index ["user_id"], name: "index_theatre_comments_on_user_id"
+  end
+
+  create_table "theatre_watching_users", primary_key: ["theatre_id", "user_id"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.bigint "theatre_id", null: false
+    t.bigint "user_id", null: false
+    t.datetime "expires_at", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["expires_at"], name: "index_theatre_watching_users_on_expires_at"
+    t.index ["theatre_id", "expires_at"], name: "index_theatre_watching_users_on_theatre_id_and_expires_at"
+    t.index ["theatre_id"], name: "index_theatre_watching_users_on_theatre_id"
+    t.index ["user_id"], name: "index_theatre_watching_users_on_user_id"
+  end
+
+  create_table "theatres", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.string "name"
+    t.datetime "opens_at", null: false
+    t.datetime "closes_at"
+    t.integer "kind", null: false
+    t.bigint "current_post_id"
+    t.datetime "current_post_started_at"
+    t.integer "next_comment_no", default: 1, null: false
+    t.bigint "host_user_id"
+    t.bigint "created_by_user_id", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "discarded_at"
+    t.index ["closes_at"], name: "index_theatres_on_closes_at"
+    t.index ["created_by_user_id"], name: "index_theatres_on_created_by_user_id"
+    t.index ["current_post_id"], name: "index_theatres_on_current_post_id"
+    t.index ["discarded_at"], name: "index_theatres_on_discarded_at"
+    t.index ["host_user_id"], name: "index_theatres_on_host_user_id"
+    t.index ["kind"], name: "index_theatres_on_kind"
+    t.index ["opens_at"], name: "index_theatres_on_opens_at"
+  end
+
   create_table "user_ips", primary_key: ["user_id", "ip_address_id"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.bigint "user_id", null: false
     t.bigint "ip_address_id", null: false
@@ -178,6 +278,19 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_03_122700) do
     t.datetime "updated_at", null: false
   end
 
+  create_table "wiki_assets", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
+    t.bigint "wiki_page_id", null: false
+    t.integer "no", null: false
+    t.string "alt_text"
+    t.binary "sha256", limit: 32, null: false
+    t.bigint "created_by_user_id", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["created_by_user_id"], name: "index_wiki_assets_on_created_by_user_id"
+    t.index ["wiki_page_id", "no"], name: "index_wiki_assets_on_wiki_page_id_and_no", unique: true
+    t.index ["wiki_page_id", "sha256"], name: "index_wiki_assets_on_wiki_page_id_and_sha256", unique: true
+  end
+
   create_table "wiki_lines", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
     t.string "sha256", limit: 64, null: false
     t.text "body", null: false
@@ -192,7 +305,10 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_03_122700) do
     t.bigint "updated_user_id", null: false
     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.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"
   end
@@ -229,6 +345,15 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_03_122700) do
 
   add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
   add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id"
+  add_foreign_key "material_versions", "materials"
+  add_foreign_key "material_versions", "materials", column: "parent_id"
+  add_foreign_key "material_versions", "tags"
+  add_foreign_key "material_versions", "users", column: "created_by_user_id"
+  add_foreign_key "material_versions", "users", column: "updated_by_user_id"
+  add_foreign_key "materials", "materials", column: "parent_id"
+  add_foreign_key "materials", "tags"
+  add_foreign_key "materials", "users", column: "created_by_user_id"
+  add_foreign_key "materials", "users", column: "updated_by_user_id"
   add_foreign_key "nico_tag_relations", "tags"
   add_foreign_key "nico_tag_relations", "tags", column: "nico_tag_id"
   add_foreign_key "post_similarities", "posts"
@@ -246,10 +371,19 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_03_122700) do
   add_foreign_key "tag_similarities", "tags"
   add_foreign_key "tag_similarities", "tags", column: "target_tag_id"
   add_foreign_key "tags", "tag_names"
+  add_foreign_key "theatre_comments", "theatres"
+  add_foreign_key "theatre_comments", "users"
+  add_foreign_key "theatre_watching_users", "theatres"
+  add_foreign_key "theatre_watching_users", "users"
+  add_foreign_key "theatres", "posts", column: "current_post_id"
+  add_foreign_key "theatres", "users", column: "created_by_user_id"
+  add_foreign_key "theatres", "users", column: "host_user_id"
   add_foreign_key "user_ips", "ip_addresses"
   add_foreign_key "user_ips", "users"
   add_foreign_key "user_post_views", "posts"
   add_foreign_key "user_post_views", "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/lib/tasks/sync_nico.rake

@@ -108,7 +108,7 @@ namespace :nico do
       desired_non_nico_tag_ids = []
 
       datum['tags'].each do |raw|
-        name = "nico:#{ raw }"
+        name = TagNameSanitisationRule.sanitise("nico:#{ raw }")
         tag = Tag.find_or_create_by_tag_name!(name, category: :nico)
         desired_nico_tag_based_ids << tag.id
 

backend/spec/factories/tags.rb

@@ -1,12 +1,22 @@
 FactoryBot.define do
   factory :tag do
+    transient do
+      name { nil }
+    end
+
     category { :general }
     post_count { 0 }
     association :tag_name
 
+    after(:build) do |tag, evaluator|
+      tag.name = evaluator.name if evaluator.name.present?
+    end
+
     trait :nico do
       category { :nico }
-      tag_name { association(:tag_name, name: "nico:#{ SecureRandom.hex(4) }") }
+      transient do
+        name { "nico:#{ SecureRandom.hex(4) }" }
+      end
     end
   end
 end

backend/spec/factories/theatre_comments.rb

@@ -0,0 +1,8 @@
+FactoryBot.define do
+  factory :theatre_comment do
+    association :theatre
+    association :user
+    sequence (:no) { |n| n }
+    content { 'test comment' }
+  end
+end

backend/spec/factories/theatres.rb

@@ -0,0 +1,11 @@
+FactoryBot.define do
+  factory :theatre do
+    name { 'Test Theatre' }
+    kind { 1 }
+    opens_at { Time.current }
+    closes_at { 1.day.from_now }
+    next_comment_no { 1 }
+
+    association :created_by_user, factory: :user
+  end
+end

backend/spec/models/tag_name_sanitisation_rule_spec.rb

@@ -0,0 +1,101 @@
+require 'rails_helper'
+
+RSpec.describe TagNameSanitisationRule, type: :model do
+  describe '.sanitise' do
+    before do
+      described_class.create!(priority: 10, source_pattern: '_', replacement: '')
+      described_class.create!(priority: 20, source_pattern: 'ABC', replacement: 'abc')
+    end
+
+    it 'applies sanitisation rules sequentially in priority order' do
+      expect(described_class.sanitise('A_B_C')).to eq('abc')
+    end
+
+    it 'does not fail when a rule does not match' do
+      expect { described_class.sanitise('xyz') }.not_to raise_error
+      expect(described_class.sanitise('xyz')).to eq('xyz')
+    end
+  end
+
+  describe 'validations' do
+    it 'is invalid when source_pattern is not a valid regexp' do
+      rule = described_class.new(priority: 10, source_pattern: '[', replacement: '')
+      expect(rule).to be_invalid
+      expect(rule.errors[:source_pattern]).to be_present
+    end
+  end
+
+  describe '.apply!' do
+    before do
+      described_class.create!(priority: 10, source_pattern: '_', replacement: '')
+    end
+
+    context 'when no conflicting tag_name exists' do
+      let!(:tag_name) do
+        TagName.create!(name: 'tmp').tap do |tn|
+          tn.update_columns(name: 'foo_bar', updated_at: Time.current)
+        end
+      end
+
+      it 'renames the tag_name' do
+        described_class.apply!
+        expect(tag_name.reload.name).to eq('foobar')
+      end
+    end
+
+    context 'when a conflicting canonical tag_name exists' do
+      let!(:existing) { TagName.create!(name: 'foobar') }
+      let!(:source) do
+        TagName.create!(name: 'tmp').tap do |tn|
+          tn.update_columns(name: 'foo_bar', updated_at: Time.current)
+        end
+      end
+
+      it 'deletes the source tag_name' do
+        described_class.apply!
+        expect(TagName.exists?(source.id)).to be(false)
+        expect(existing.reload.name).to eq('foobar')
+      end
+    end
+
+    context 'when the source tag_name has a tag and the existing one has no tag' do
+      let!(:existing) { TagName.create!(name: 'foobar') }
+      let!(:source_tag) { create(:tag, name: 'tmp', category: :general) }
+      let!(:source_tag_name_id) { source_tag.tag_name_id }
+
+      before do
+        source_tag.tag_name.update_columns(name: 'foo_bar', updated_at: Time.current)
+      end
+
+      it 'moves the tag to the existing tag_name' do
+        described_class.apply!
+        expected_tag_name_id = existing.canonical_id || existing.id
+        expect(source_tag.reload.tag_name_id).to eq(expected_tag_name_id)
+        expect(TagName.exists?(source_tag_name_id)).to be(false)
+      end
+    end
+
+    context 'when both source and existing tag_names have tags' do
+      let!(:existing_tn) { TagName.create!(name: 'foobar') }
+      let!(:existing_tag) { Tag.create!(tag_name: existing_tn, category: :general) }
+
+      let!(:source_tn) { TagName.create!(name: 'tmp') }
+      let!(:source_tag) { Tag.create!(tag_name: source_tn, category: :general) }
+      let!(:source_tag_name_id) { source_tn.id }
+
+      before do
+        source_tn.update_columns(name: 'foo_bar', updated_at: Time.current)
+      end
+
+      it 'merges the source tag into the existing tag and deletes the source tag_name' do
+        expect(TagName.find_by(name: 'foobar')&.tag&.id).to eq(existing_tag.id)
+        expect(TagName.find_by(name: 'foo_bar')&.tag&.id).to eq(source_tag.id)
+
+        described_class.apply!
+
+        expect(Tag.exists?(source_tag.id)).to be(false)
+        expect(TagName.exists?(source_tag.tag_name_id)).to be(false)
+      end
+    end
+  end
+end

backend/spec/models/tag_spec.rb

@@ -2,20 +2,31 @@ require 'rails_helper'
 
 RSpec.describe Tag, type: :model do
   describe '.merge_tags!' do
-    let!(:target_tag) { create(:tag) }
+    let!(:target_tag) { create(:tag, category: :general) }
-    let!(:source_tag) { create(:tag) }
+    let!(:source_tag) { create(:tag, category: :general) }
+    let!(:source_tag_name) { source_tag.tag_name }
 
-    let!(:post_record) { Post.create!(url: 'https://example.com/posts/1', title: 'test post') }
+    let!(:post_record) do
+      Post.create!(url: 'https://example.com/posts/1', title: 'test post')
+    end
 
     context 'when merging a simple source tag' do
       let!(:source_post_tag) { PostTag.create!(post: post_record, tag: source_tag) }
 
-      it 'moves the post_tag, deletes the source tag, and aliases the source tag_name' do
+      it 'discards the source post_tag, creates an active target post_tag, discards the source tag, and aliases the source tag_name' do
         described_class.merge_tags!(target_tag, [source_tag])
 
-        expect(source_post_tag.reload.tag_id).to eq(target_tag.id)
+        source_pt = PostTag.with_discarded.find(source_post_tag.id)
-        expect(Tag.exists?(source_tag.id)).to be(false)
+        active_target = PostTag.kept.find_by(post_id: post_record.id, tag_id: target_tag.id)
-        expect(source_tag.tag_name.reload.canonical_id).to eq(target_tag.tag_name_id)
+
+        expect(source_pt.discarded_at).to be_present
+        expect(source_pt.tag_id).to eq(source_tag.id)
+        expect(active_target).to be_present
+
+        expect(Tag.with_discarded.find(source_tag.id)).to be_discarded
+        expect(TagName.with_discarded.find(source_tag_name.id)).not_to be_discarded
+        expect(source_tag_name.reload.canonical_id).to eq(target_tag.tag_name_id)
+        expect(target_tag.reload.post_count).to eq(1)
       end
     end
 
@@ -23,38 +34,84 @@ RSpec.describe Tag, type: :model do
       let!(:target_post_tag) { PostTag.create!(post: post_record, tag: target_tag) }
       let!(:source_post_tag) { PostTag.create!(post: post_record, tag: source_tag) }
 
-      it 'discards the duplicate source post_tag and keeps one active target post_tag' do
+      it 'discards the source post_tag, keeps one active target post_tag, discards the source tag, and aliases the source tag_name' do
         described_class.merge_tags!(target_tag, [source_tag])
 
+        source_pt = PostTag.with_discarded.find(source_post_tag.id)
         active = PostTag.kept.where(post_id: post_record.id, tag_id: target_tag.id)
-        discarded_source = PostTag.with_discarded.find(source_post_tag.id)
 
+        expect(source_pt.discarded_at).to be_present
+        expect(source_pt.tag_id).to eq(source_tag.id)
         expect(active.count).to eq(1)
-        expect(discarded_source.discarded_at).to be_present
+        expect(active.first.id).to eq(target_post_tag.id)
-        expect(Tag.exists?(source_tag.id)).to be(false)
+
-        expect(source_tag.tag_name.reload.canonical_id).to eq(target_tag.tag_name_id)
+        expect(Tag.with_discarded.find(source_tag.id)).to be_discarded
+        expect(TagName.with_discarded.find(source_tag_name.id)).not_to be_discarded
+        expect(source_tag_name.reload.canonical_id).to eq(target_tag.tag_name_id)
+        expect(target_tag.reload.post_count).to eq(1)
       end
     end
 
     context 'when source_tags includes the target itself' do
       let!(:source_post_tag) { PostTag.create!(post: post_record, tag: source_tag) }
 
-      it 'ignores the target tag in source_tags' do
+      it 'ignores the target in source_tags while still merging the source tag' do
         described_class.merge_tags!(target_tag, [source_tag, target_tag])
 
-        expect(Tag.exists?(target_tag.id)).to be(true)
+        source_pt = PostTag.with_discarded.find(source_post_tag.id)
-        expect(Tag.exists?(source_tag.id)).to be(false)
+        active_target = PostTag.kept.find_by(post_id: post_record.id, tag_id: target_tag.id)
-        expect(source_post_tag.reload.tag_id).to eq(target_tag.id)
+
+        expect(Tag.find(target_tag.id)).to be_present
+        expect(Tag.with_discarded.find(source_tag.id)).to be_discarded
+        expect(source_pt.discarded_at).to be_present
+        expect(source_pt.tag_id).to eq(source_tag.id)
+        expect(active_target).to be_present
+        expect(source_tag_name.reload.canonical_id).to eq(target_tag.tag_name_id)
+        expect(target_tag.reload.post_count).to eq(1)
       end
     end
 
-    context 'when aliasing the source tag_name is invalid' do
+    context 'when the source tag_name is invalid under sanitisation rules' do
+      let!(:source_post_tag) { PostTag.create!(post: post_record, tag: source_tag) }
+      let!(:sanitisation_rule) do
+        TagNameSanitisationRule.create!(
+          priority: 99_999,
+          source_pattern: 'INVALIDTOKEN',
+          replacement: ''
+        )
+      end
+
+      before do
+        source_tag_name.update_columns(
+          name: "#{ source_tag_name.name }INVALIDTOKEN",
+          updated_at: Time.current
+        )
+      end
+
+      it 'still merges, but discards the source tag_name instead of aliasing it' do
+        described_class.merge_tags!(target_tag, [source_tag])
+
+        source_pt = PostTag.with_discarded.find(source_post_tag.id)
+        active_target = PostTag.kept.find_by(post_id: post_record.id, tag_id: target_tag.id)
+        discarded_source_tag_name = TagName.with_discarded.find(source_tag_name.id)
+
+        expect(source_pt.discarded_at).to be_present
+        expect(source_pt.tag_id).to eq(source_tag.id)
+        expect(active_target).to be_present
+
+        expect(Tag.with_discarded.find(source_tag.id)).to be_discarded
+        expect(target_tag.reload.post_count).to eq(1)
+      end
+    end
+
+    context 'when the source tag_name has a wiki_page' do
       let!(:source_post_tag) { PostTag.create!(post: post_record, tag: source_tag) }
       let!(:wiki_page) do
         WikiPage.create!(
-            tag_name: source_tag.tag_name,
+          tag_name: source_tag_name,
-            created_user: create_admin_user!,
+          created_user: create_admin_user!,
-            updated_user: create_admin_user!)
+          updated_user: create_admin_user!
+        )
       end
 
       it 'rolls back the transaction' do
@@ -62,9 +119,30 @@ RSpec.describe Tag, type: :model do
           described_class.merge_tags!(target_tag, [source_tag])
         }.to raise_error(ActiveRecord::RecordInvalid)
 
-        expect(Tag.exists?(source_tag.id)).to be(true)
+        expect(Tag.with_discarded.find(source_tag.id)).not_to be_discarded
-        expect(source_post_tag.reload.tag_id).to eq(source_tag.id)
+        expect(TagName.with_discarded.find(source_tag_name.id)).not_to be_discarded
-        expect(source_tag.tag_name.reload.canonical_id).to be_nil
+        expect(PostTag.kept.find(source_post_tag.id).tag_id).to eq(source_tag.id)
+        expect(PostTag.kept.find_by(post_id: post_record.id, tag_id: target_tag.id)).to be_nil
+        expect(source_tag_name.reload.canonical_id).to be_nil
+        expect(target_tag.reload.post_count).to eq(0)
+      end
+    end
+
+    context 'when merging a nico source tag' do
+      let!(:target_tag) { create(:tag, category: :nico, name: 'nico:foo') }
+      let!(:source_tag) { create(:tag, category: :nico, name: 'nico:bar') }
+      let!(:source_tag_name_id) { source_tag.tag_name_id }
+
+      it 'discards the source tag_name instead of aliasing it' do
+        described_class.merge_tags!(target_tag, [source_tag])
+
+        discarded_source_tag = Tag.with_discarded.find(source_tag.id)
+        discarded_source_tag_name = TagName.with_discarded.find(source_tag_name_id)
+
+        expect(discarded_source_tag).to be_discarded
+        expect(discarded_source_tag_name).to be_discarded
+        expect(discarded_source_tag_name.canonical_id).to be_nil
+        expect(target_tag.reload.post_count).to eq(0)
       end
     end
   end

backend/spec/requests/materials_spec.rb

@@ -0,0 +1,378 @@
+require 'rails_helper'
+
+RSpec.describe 'Materials API', type: :request do
+  let!(:member_user) { create(:user, :member) }
+  let!(:guest_user)  { create(:user) }
+
+  def dummy_upload(filename: 'dummy.png', type: 'image/png', body: 'dummy')
+    Rack::Test::UploadedFile.new(StringIO.new(body), type, original_filename: filename)
+  end
+
+  def response_materials
+    json.fetch('materials')
+  end
+
+  def build_material(tag:, user:, parent: nil, file: dummy_upload, url: nil)
+    Material.new(tag:, parent:, url:, created_by_user: user, updated_by_user: user).tap do |material|
+      material.file.attach(file) if file
+      material.save!
+    end
+  end
+
+  describe 'GET /materials' do
+    let!(:tag_a) { Tag.create!(tag_name: TagName.create!(name: 'material_index_a'), category: :material) }
+    let!(:tag_b) { Tag.create!(tag_name: TagName.create!(name: 'material_index_b'), category: :material) }
+
+    let!(:material_a) do
+      build_material(tag: tag_a, user: member_user, file: dummy_upload(filename: 'a.png'))
+    end
+
+    let!(:material_b) do
+      build_material(tag: tag_b, user: member_user, parent: material_a, file: dummy_upload(filename: 'b.png'))
+    end
+
+    before do
+      old_time = Time.zone.local(2026, 3, 29, 1, 0, 0)
+      new_time = Time.zone.local(2026, 3, 29, 2, 0, 0)
+
+      material_a.update_columns(created_at: old_time, updated_at: old_time)
+      material_b.update_columns(created_at: new_time, updated_at: new_time)
+    end
+
+    it 'returns materials with count and metadata' do
+      get '/materials'
+
+      expect(response).to have_http_status(:ok)
+      expect(json).to include('materials', 'count')
+      expect(response_materials).to be_an(Array)
+      expect(json['count']).to eq(2)
+
+      row = response_materials.find { |m| m['id'] == material_b.id }
+      expect(row).to be_present
+      expect(row['tag']).to include(
+        'id' => tag_b.id,
+        'name' => 'material_index_b',
+        'category' => 'material'
+      )
+      expect(row['created_by_user']).to include(
+        'id' => member_user.id,
+        'name' => member_user.name
+      )
+      expect(row['content_type']).to eq('image/png')
+    end
+
+    it 'filters materials by tag_id' do
+      get '/materials', params: { tag_id: material_a.tag_id }
+
+      expect(response).to have_http_status(:ok)
+      expect(json['count']).to eq(1)
+      expect(response_materials.map { |m| m['id'] }).to eq([material_a.id])
+    end
+
+    it 'filters materials by parent_id' do
+      get '/materials', params: { parent_id: material_a.id }
+
+      expect(response).to have_http_status(:ok)
+      expect(json['count']).to eq(1)
+      expect(response_materials.map { |m| m['id'] }).to eq([material_b.id])
+    end
+
+    it 'paginates and keeps total count' do
+      get '/materials', params: { page: 2, limit: 1 }
+
+      expect(response).to have_http_status(:ok)
+      expect(json['count']).to eq(2)
+      expect(response_materials.size).to eq(1)
+      expect(response_materials.first['id']).to eq(material_a.id)
+    end
+
+    it 'normalises invalid page and limit' do
+      get '/materials', params: { page: 0, limit: 0 }
+
+      expect(response).to have_http_status(:ok)
+      expect(json['count']).to eq(2)
+      expect(response_materials.size).to eq(1)
+      expect(response_materials.first['id']).to eq(material_b.id)
+    end
+  end
+
+  describe 'GET /materials/:id' do
+    let!(:tag) { Tag.create!(tag_name: TagName.create!(name: 'material_show'), category: :material) }
+    let!(:material) do
+      build_material(tag:, user: member_user, file: dummy_upload(filename: 'show.png'))
+    end
+
+    it 'returns a material with file, tag, and content_type' do
+      get "/materials/#{ material.id }"
+
+      expect(response).to have_http_status(:ok)
+      expect(json).to include(
+        'id' => material.id,
+        'content_type' => 'image/png'
+      )
+      expect(json['file']).to be_present
+      expect(json['tag']).to include(
+        'id' => tag.id,
+        'name' => 'material_show',
+        'category' => 'material'
+      )
+    end
+
+    it 'returns 404 when material does not exist' do
+      get '/materials/999999999'
+      expect(response).to have_http_status(:not_found)
+    end
+  end
+
+  describe 'POST /materials' do
+    context 'when not logged in' do
+      before { sign_out }
+
+      it 'returns 401' do
+        post '/materials', params: {
+          tag: 'material_create_unauthorized',
+          file: dummy_upload
+        }
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when logged in' do
+      before { sign_in_as(guest_user) }
+
+      it 'returns 400 when tag is blank' do
+        post '/materials', params: { tag: '   ', file: dummy_upload }
+
+        expect(response).to have_http_status(:bad_request)
+      end
+
+      it 'returns 400 when both file and url are blank' do
+        post '/materials', params: { tag: 'material_create_blank' }
+
+        expect(response).to have_http_status(:bad_request)
+      end
+
+      it 'creates a material with an attached file' do
+        expect do
+          post '/materials', params: {
+            tag: 'material_create_new',
+            file: dummy_upload(filename: 'created.png')
+          }
+        end.to change(Material, :count).by(1)
+          .and change(Tag, :count).by(1)
+          .and change(TagName, :count).by(1)
+
+        expect(response).to have_http_status(:created)
+
+        material = Material.order(:id).last
+        expect(material.tag.name).to eq('material_create_new')
+        expect(material.tag.category).to eq('material')
+        expect(material.created_by_user).to eq(guest_user)
+        expect(material.updated_by_user).to eq(guest_user)
+        expect(material.file.attached?).to be(true)
+
+        expect(json['id']).to eq(material.id)
+        expect(json.dig('tag', 'name')).to eq('material_create_new')
+        expect(json['content_type']).to eq('image/png')
+      end
+
+      it 'returns 422 when the existing tag is not material/character' do
+        general_tag_name = TagName.create!(name: 'material_create_general_tag')
+        Tag.create!(tag_name: general_tag_name, category: :general)
+
+        post '/materials', params: {
+          tag: 'material_create_general_tag',
+          file: dummy_upload
+        }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+
+      it 'persists url-only material' do
+        expect do
+          post '/materials', params: {
+            tag: 'material_create_url_only',
+            url: 'https://example.com/material-source'
+          }
+        end.to change(Material, :count).by(1)
+
+        expect(response).to have_http_status(:created)
+
+        material = Material.order(:id).last
+        expect(material.tag.name).to eq('material_create_url_only')
+        expect(material.url).to eq('https://example.com/material-source')
+        expect(material.file.attached?).to be(false)
+      end
+
+      it 'returns the original url for url-only material' do
+        post '/materials', params: {
+          tag: 'material_create_url_only_response',
+          url: 'https://example.com/material-source'
+        }
+
+        expect(response).to have_http_status(:created)
+        expect(json['url']).to eq('https://example.com/material-source')
+      end
+    end
+  end
+
+  describe 'PUT /materials/:id' do
+    let!(:tag) { Tag.create!(tag_name: TagName.create!(name: 'material_update_old'), category: :material) }
+    let!(:material) do
+      build_material(tag:, user: member_user, file: dummy_upload(filename: 'old.png'))
+    end
+
+    context 'when not logged in' do
+      before { sign_out }
+
+      it 'returns 401' do
+        put "/materials/#{ material.id }", params: {
+          tag: 'material_update_new',
+          file: dummy_upload(filename: 'new.png')
+        }
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when logged in but not member' do
+      before { sign_in_as(guest_user) }
+
+      it 'returns 403' do
+        put "/materials/#{ material.id }", params: {
+          tag: 'material_update_new',
+          file: dummy_upload(filename: 'new.png')
+        }
+
+        expect(response).to have_http_status(:forbidden)
+      end
+    end
+
+    context 'when member' do
+      before { sign_in_as(member_user) }
+
+      it 'returns 404 when material does not exist' do
+        put '/materials/999999999', params: {
+          tag: 'material_update_missing',
+          file: dummy_upload
+        }
+
+        expect(response).to have_http_status(:not_found)
+      end
+
+      it 'returns 400 when tag is blank' do
+        put "/materials/#{ material.id }", params: {
+          tag: '   ',
+          file: dummy_upload
+        }
+
+        expect(response).to have_http_status(:bad_request)
+      end
+
+      it 'returns 400 when both file and url are blank' do
+        put "/materials/#{ material.id }", params: {
+          tag: 'material_update_no_payload'
+        }
+
+        expect(response).to have_http_status(:bad_request)
+      end
+
+      it 'updates tag, url, file, and updated_by_user' do
+        old_blob_id = material.file.blob.id
+
+        put "/materials/#{ material.id }", params: {
+          tag: 'material_update_new',
+          url: 'https://example.com/updated-source',
+          file: dummy_upload(filename: 'updated.jpg', type: 'image/jpeg')
+        }
+
+        expect(response).to have_http_status(:ok)
+
+        material.reload
+        expect(material.tag.name).to eq('material_update_new')
+        expect(material.tag.category).to eq('material')
+        expect(material.url).to eq('https://example.com/updated-source')
+        expect(material.updated_by_user).to eq(member_user)
+        expect(material.file.attached?).to be(true)
+        expect(material.file.blob.id).not_to eq(old_blob_id)
+        expect(material.file.blob.filename.to_s).to eq('updated.jpg')
+        expect(material.file.blob.content_type).to eq('image/jpeg')
+
+        expect(json['id']).to eq(material.id)
+        expect(json['file']).to be_present
+        expect(json['content_type']).to eq('image/jpeg')
+        expect(json.dig('tag', 'name')).to eq('material_update_new')
+      end
+
+      it 'purges the existing file when file is omitted and url is provided' do
+        old_blob_id = material.file.blob.id
+
+        put "/materials/#{ material.id }", params: {
+          tag: 'material_update_remove_file',
+          url: 'https://example.com/updated-source'
+        }
+
+        expect(response).to have_http_status(:ok)
+
+        material.reload
+        expect(material.tag.name).to eq('material_update_remove_file')
+        expect(material.url).to eq('https://example.com/updated-source')
+        expect(material.updated_by_user).to eq(member_user)
+        expect(material.file.attached?).to be(false)
+
+        expect(
+          ActiveStorage::Blob.where(id: old_blob_id).exists?
+        ).to be(false)
+
+        expect(json['id']).to eq(material.id)
+        expect(json['file']).to be_nil
+        expect(json['content_type']).to be_nil
+        expect(json.dig('tag', 'name')).to eq('material_update_remove_file')
+        expect(json['url']).to eq('https://example.com/updated-source')
+      end
+    end
+  end
+
+  describe 'DELETE /materials/:id' do
+    let!(:tag) { Tag.create!(tag_name: TagName.create!(name: 'material_destroy'), category: :material) }
+    let!(:material) do
+      build_material(tag:, user: member_user, file: dummy_upload(filename: 'destroy.png'))
+    end
+
+    context 'when not logged in' do
+      before { sign_out }
+
+      it 'returns 401' do
+        delete "/materials/#{ material.id }"
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when logged in but not member' do
+      before { sign_in_as(guest_user) }
+
+      it 'returns 403' do
+        delete "/materials/#{ material.id }"
+        expect(response).to have_http_status(:forbidden)
+      end
+    end
+
+    context 'when member' do
+      before { sign_in_as(member_user) }
+
+      it 'returns 404 when material does not exist' do
+        delete '/materials/999999999'
+        expect(response).to have_http_status(:not_found)
+      end
+
+      it 'discards the material and returns 204' do
+        delete "/materials/#{ material.id }"
+
+        expect(response).to have_http_status(:no_content)
+        expect(Material.find_by(id: material.id)).to be_nil
+        expect(Material.with_discarded.find(material.id)).to be_discarded
+      end
+    end
+  end
+end

backend/spec/requests/posts_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe 'Posts API', type: :request do
   end
 
   let!(:tag_name) { TagName.create!(name: 'spec_tag') }
-  let!(:tag)      { Tag.create!(tag_name: tag_name, category: 'general') }
+  let!(:tag)      { Tag.create!(tag_name: tag_name, category: :general) }
 
   let!(:post_record) do
     Post.create!(title: 'spec post', url: 'https://example.com/spec').tap do |p|
@@ -28,9 +28,9 @@ RSpec.describe 'Posts API', type: :request do
     let!(:user) { create_member_user! }
 
     let!(:tag_name) { TagName.create!(name: "spec_tag") }
-    let!(:tag) { Tag.create!(tag_name:, category: "general") }
+    let!(:tag) { Tag.create!(tag_name:, category: :general) }
     let!(:tag_name2) { TagName.create!(name: 'unko') }
-    let!(:tag2) { Tag.create!(tag_name: tag_name2, category: 'deerjikist') }
+    let!(:tag2) { Tag.create!(tag_name: tag_name2, category: :deerjikist) }
     let!(:alias_tag_name) { TagName.create!(name: 'manko', canonical: tag_name) }
 
     let!(:hit_post) do
@@ -116,6 +116,123 @@ RSpec.describe 'Posts API', type: :request do
       end
     end
 
+    context 'when tags contain not:' do
+      let!(:foo_tag_name) { TagName.create!(name: 'not_spec_foo') }
+      let!(:foo_tag) { Tag.create!(tag_name: foo_tag_name, category: :general) }
+
+      let!(:bar_tag_name) { TagName.create!(name: 'not_spec_bar') }
+      let!(:bar_tag) { Tag.create!(tag_name: bar_tag_name, category: :general) }
+
+      let!(:baz_tag_name) { TagName.create!(name: 'not_spec_baz') }
+      let!(:baz_tag) { Tag.create!(tag_name: baz_tag_name, category: :general) }
+
+      let!(:foo_alias_tag_name) do
+        TagName.create!(name: 'not_spec_foo_alias', canonical: foo_tag_name)
+      end
+
+      let!(:foo_only_post) do
+        Post.create!(uploaded_user: user, title: 'foo only',
+                     url: 'https://example.com/not-spec-foo').tap do |p|
+          PostTag.create!(post: p, tag: foo_tag)
+        end
+      end
+
+      let!(:bar_only_post) do
+        Post.create!(uploaded_user: user, title: 'bar only',
+                     url: 'https://example.com/not-spec-bar').tap do |p|
+          PostTag.create!(post: p, tag: bar_tag)
+        end
+      end
+
+      let!(:baz_only_post) do
+        Post.create!(uploaded_user: user, title: 'baz only',
+                     url: 'https://example.com/not-spec-baz').tap do |p|
+          PostTag.create!(post: p, tag: baz_tag)
+        end
+      end
+
+      let!(:foo_bar_post) do
+        Post.create!(uploaded_user: user, title: 'foo bar',
+                     url: 'https://example.com/not-spec-foo-bar').tap do |p|
+          PostTag.create!(post: p, tag: foo_tag)
+          PostTag.create!(post: p, tag: bar_tag)
+        end
+      end
+
+      let!(:foo_baz_post) do
+        Post.create!(uploaded_user: user, title: 'foo baz',
+                     url: 'https://example.com/not-spec-foo-baz').tap do |p|
+          PostTag.create!(post: p, tag: foo_tag)
+          PostTag.create!(post: p, tag: baz_tag)
+        end
+      end
+
+      let(:controlled_ids) do
+        [foo_only_post.id, bar_only_post.id, baz_only_post.id,
+         foo_bar_post.id, foo_baz_post.id]
+      end
+
+      it 'supports not search' do
+        get '/posts', params: { tags: 'not:not_spec_foo' }
+
+        expect(response).to have_http_status(:ok)
+
+        expect(json.fetch('posts').map { |p| p['id'] } & controlled_ids).to match_array(
+          [bar_only_post.id, baz_only_post.id]
+        )
+      end
+
+      it 'supports alias in not search' do
+        get '/posts', params: { tags: 'not:not_spec_foo_alias' }
+
+        expect(response).to have_http_status(:ok)
+
+        expect(json.fetch('posts').map { |p| p['id'] } & controlled_ids).to match_array(
+          [bar_only_post.id, baz_only_post.id]
+        )
+      end
+
+      it 'treats multiple not terms as AND when match is omitted' do
+        get '/posts', params: { tags: 'not:not_spec_foo not:not_spec_bar' }
+
+        expect(response).to have_http_status(:ok)
+
+        expect(json.fetch('posts').map { |p| p['id'] } & controlled_ids).to match_array(
+          [baz_only_post.id]
+        )
+      end
+
+      it 'treats multiple not terms as OR when match=any' do
+        get '/posts', params: { tags: 'not:not_spec_foo not:not_spec_bar', match: 'any' }
+
+        expect(response).to have_http_status(:ok)
+
+        expect(json.fetch('posts').map { |p| p['id'] } & controlled_ids).to match_array(
+          [foo_only_post.id, bar_only_post.id, baz_only_post.id, foo_baz_post.id]
+        )
+      end
+
+      it 'supports mixed positive and negative search with AND' do
+        get '/posts', params: { tags: 'not_spec_foo not:not_spec_bar' }
+
+        expect(response).to have_http_status(:ok)
+
+        expect(json.fetch('posts').map { |p| p['id'] } & controlled_ids).to match_array(
+          [foo_only_post.id, foo_baz_post.id]
+        )
+      end
+
+      it 'supports mixed positive and negative search with OR when match=any' do
+        get '/posts', params: { tags: 'not_spec_foo not:not_spec_bar', match: 'any' }
+
+        expect(response).to have_http_status(:ok)
+
+        expect(json.fetch('posts').map { |p| p['id'] } & controlled_ids).to match_array(
+          [foo_only_post.id, baz_only_post.id, foo_bar_post.id, foo_baz_post.id]
+        )
+      end
+    end
+
     context 'when url is provided' do
       let!(:url_hit_post) do
         Post.create!(uploaded_user: user, title: 'url hit',
@@ -408,8 +525,9 @@ RSpec.describe 'Posts API', type: :request do
 
     context "when nico tag already exists in tags" do
       before do
-        Tag.find_or_create_by!(tag_name: TagName.find_or_create_by!(name: 'nico:nico_tag'),
+        Tag.find_undiscard_or_create_by!(
-                               category: 'nico')
+            tag_name: TagName.find_undiscard_or_create_by!(name: 'nico:nico_tag'),
+            category: :nico)
       end
 
       it 'return 400' do
@@ -475,7 +593,7 @@ RSpec.describe 'Posts API', type: :request do
 
       # 追加で別タグも作って、更新時に入れ替わることを見る
       tn2 = TagName.create!(name: 'spec_tag_2')
-      Tag.create!(tag_name: tn2, category: 'general')
+      Tag.create!(tag_name: tn2, category: :general)
 
       put "/posts/#{post_record.id}", params: {
         title: 'updated title',
@@ -493,8 +611,9 @@ RSpec.describe 'Posts API', type: :request do
 
     context "when nico tag already exists in tags" do
       before do
-        Tag.find_or_create_by!(tag_name: TagName.find_or_create_by!(name: 'nico:nico_tag'),
+        Tag.find_undiscard_or_create_by!(
-                               category: 'nico')
+            tag_name: TagName.find_undiscard_or_create_by!(name: 'nico:nico_tag'),
+            category: :nico)
       end
 
       it 'return 400' do
@@ -531,7 +650,7 @@ RSpec.describe 'Posts API', type: :request do
     it 'returns add/remove events (history) for a post' do
       # add
       tn2 = TagName.create!(name: 'spec_tag2')
-      tag2 = Tag.create!(tag_name: tn2, category: 'general')
+      tag2 = Tag.create!(tag_name: tn2, category: :general)
       pt = PostTag.create!(post: post_record, tag: tag2, created_user: member)
 
       # remove (discard)
@@ -548,6 +667,93 @@ RSpec.describe 'Posts API', type: :request do
       expect(types).to include('add')
       expect(types).to include('remove')
     end
+
+    it 'filters history by tag' do
+      tn2 = TagName.create!(name: 'history_tag_hit')
+      tag2 = Tag.create!(tag_name: tn2, category: :general)
+
+      tn3 = TagName.create!(name: 'history_tag_miss')
+      tag3 = Tag.create!(tag_name: tn3, category: :general)
+
+      other_post = Post.create!(
+        title: 'other post',
+        url: 'https://example.com/history-other'
+      )
+
+      # hit: add
+      PostTag.create!(post: post_record, tag: tag2, created_user: member)
+
+      # hit: add + remove
+      pt2 = PostTag.create!(post: other_post, tag: tag2, created_user: member)
+      pt2.discard_by!(member)
+
+      # miss: add + remove
+      pt3 = PostTag.create!(post: post_record, tag: tag3, created_user: member)
+      pt3.discard_by!(member)
+
+      get '/posts/changes', params: { tag: tag2.id }
+
+      expect(response).to have_http_status(:ok)
+      expect(json).to include('changes', 'count')
+      expect(json['count']).to eq(3)
+
+      changes = json.fetch('changes')
+
+      expect(changes.map { |e| e.dig('tag', 'id') }.uniq).to eq([tag2.id])
+      expect(changes.map { |e| e['change_type'] }).to match_array(%w[add add remove])
+      expect(changes.map { |e| e.dig('post', 'id') }).to match_array([
+        post_record.id,
+        other_post.id,
+        other_post.id
+      ])
+    end
+
+    it 'filters history by post and tag together' do
+      tn2 = TagName.create!(name: 'history_tag_combo_hit')
+      tag2 = Tag.create!(tag_name: tn2, category: :general)
+
+      tn3 = TagName.create!(name: 'history_tag_combo_miss')
+      tag3 = Tag.create!(tag_name: tn3, category: :general)
+
+      other_post = Post.create!(
+        title: 'other combo post',
+        url: 'https://example.com/history-combo-other'
+      )
+
+      # hit
+      PostTag.create!(post: post_record, tag: tag2, created_user: member)
+
+      # miss by post
+      pt2 = PostTag.create!(post: other_post, tag: tag2, created_user: member)
+      pt2.discard_by!(member)
+
+      # miss by tag
+      pt3 = PostTag.create!(post: post_record, tag: tag3, created_user: member)
+      pt3.discard_by!(member)
+
+      get '/posts/changes', params: { id: post_record.id, tag: tag2.id }
+
+      expect(response).to have_http_status(:ok)
+      expect(json).to include('changes', 'count')
+      expect(json['count']).to eq(1)
+
+      changes = json.fetch('changes')
+      expect(changes.size).to eq(1)
+      expect(changes[0]['change_type']).to eq('add')
+      expect(changes[0].dig('post', 'id')).to eq(post_record.id)
+      expect(changes[0].dig('tag', 'id')).to eq(tag2.id)
+    end
+
+    it 'returns empty history when tag does not match' do
+      tn2 = TagName.create!(name: 'history_tag_no_hit')
+      tag2 = Tag.create!(tag_name: tn2, category: :general)
+
+      get '/posts/changes', params: { tag: tag2.id }
+
+      expect(response).to have_http_status(:ok)
+      expect(json.fetch('changes')).to eq([])
+      expect(json.fetch('count')).to eq(0)
+    end
   end
 
   describe 'POST /posts/:id/viewed' do

backend/spec/requests/tags_spec.rb

@@ -11,16 +11,191 @@ RSpec.describe 'Tags API', type: :request do
   let!(:tn2) { TagName.create!(name: 'unknown') }
   let!(:tag2) { Tag.create!(tag_name: tn2, category: :general) }
 
+  def response_tags
+    json.fetch('tags')
+  end
+
+  def response_names
+    response_tags.map { |t| t.fetch('name') }
+  end
+
+  def dummy_material_upload(filename: 'dummy.png', type: 'image/png', body: 'dummy')
+    Rack::Test::UploadedFile.new(StringIO.new(body), type, original_filename: filename)
+  end
+
+  def create_material(tag, user:, filename: 'dummy.png', type: 'image/png', url: nil)
+    Material.new(tag:, url:, created_by_user: user, updated_by_user: user).tap do |material|
+      material.file.attach(dummy_material_upload(filename:, type:)) if filename
+      material.save!
+    end
+  end
+
   describe 'GET /tags' do
-    it 'returns tags with name' do
+    it 'returns tags with count and metadata' do
       get '/tags'
 
       expect(response).to have_http_status(:ok)
+      expect(json).to include('tags', 'count')
+      expect(response_tags).to be_an(Array)
+      expect(json['count']).to be_an(Integer)
+      expect(json['count']).to be >= response_tags.size
 
-      expect(json).to be_an(Array)
+      row = response_tags.find { |t| t['name'] == 'spec_tag' }
-      expect(json).not_to be_empty
+      expect(row).to include(
-      expect(json[0]).to have_key('name')
+          'id' => tag.id,
-      expect(json.map { |t| t['name'] }).to include('spec_tag')
+          'name' => 'spec_tag',
+          'category' => 'general',
+          'post_count' => 1,
+          'has_wiki' => false)
+      expect(row).to have_key('created_at')
+      expect(row).to have_key('updated_at')
+    end
+
+    it 'filters tags by post id' do
+      get '/tags', params: { post: post.id }
+
+      expect(response).to have_http_status(:ok)
+      expect(json['count']).to eq(1)
+      expect(response_names).to eq(['spec_tag'])
+    end
+
+    it 'filters tags by partial name' do
+      get '/tags', params: { name: 'spec' }
+
+      expect(response).to have_http_status(:ok)
+      expect(response_names).to include('spec_tag')
+      expect(response_names).not_to include('unknown')
+    end
+
+    it 'filters tags by category' do
+      meme = Tag.create!(tag_name: TagName.create!(name: 'meme_only'), category: :meme)
+
+      get '/tags', params: { category: 'meme' }
+
+      expect(response).to have_http_status(:ok)
+      expect(response_names).to eq(['meme_only'])
+      expect(response_tags.first['id']).to eq(meme.id)
+    end
+
+    it 'filters tags by post_count range' do
+      low = Tag.create!(tag_name: TagName.create!(name: 'pc_low'), category: :general)
+      mid = Tag.create!(tag_name: TagName.create!(name: 'pc_mid'), category: :general)
+      high = Tag.create!(tag_name: TagName.create!(name: 'pc_high'), category: :general)
+
+      low.update_columns(post_count: 1)
+      mid.update_columns(post_count: 3)
+      high.update_columns(post_count: 5)
+
+      get '/tags', params: {
+          name: 'pc_',
+          post_count_gte: 2,
+          post_count_lte: 4,
+          order: 'post_count:asc',
+      }
+
+      expect(response).to have_http_status(:ok)
+      expect(response_names).to eq(['pc_mid'])
+    end
+
+    it 'filters tags by created_at range' do
+      old_tag = Tag.create!(tag_name: TagName.create!(name: 'created_old'), category: :general)
+      new_tag = Tag.create!(tag_name: TagName.create!(name: 'created_new'), category: :general)
+
+      old_time = Time.zone.local(2024, 1, 1, 0, 0, 0)
+      new_time = Time.zone.local(2024, 2, 1, 0, 0, 0)
+
+      old_tag.update_columns(created_at: old_time, updated_at: old_time)
+      new_tag.update_columns(created_at: new_time, updated_at: new_time)
+
+      get '/tags', params: {
+          name: 'created_',
+          created_from: Time.zone.local(2024, 1, 15, 0, 0, 0).iso8601,
+          order: 'created_at:asc',
+      }
+
+      expect(response).to have_http_status(:ok)
+      expect(response_names).to eq(['created_new'])
+    end
+
+    it 'filters tags by updated_at range' do
+      old_tag = Tag.create!(tag_name: TagName.create!(name: 'updated_old'), category: :general)
+      new_tag = Tag.create!(tag_name: TagName.create!(name: 'updated_new'), category: :general)
+
+      old_time = Time.zone.local(2024, 3, 1, 0, 0, 0)
+      new_time = Time.zone.local(2024, 4, 1, 0, 0, 0)
+
+      old_tag.update_columns(created_at: old_time, updated_at: old_time)
+      new_tag.update_columns(created_at: new_time, updated_at: new_time)
+
+      get '/tags', params: {
+          name: 'updated_',
+          updated_to: Time.zone.local(2024, 3, 15, 0, 0, 0).iso8601,
+          order: 'updated_at:asc',
+      }
+
+      expect(response).to have_http_status(:ok)
+      expect(response_names).to eq(['updated_old'])
+    end
+
+    it 'orders tags by custom category order' do
+      Tag.create!(tag_name: TagName.create!(name: 'cat_deerjikist'), category: :deerjikist)
+      Tag.create!(tag_name: TagName.create!(name: 'cat_meme'), category: :meme)
+      Tag.create!(tag_name: TagName.create!(name: 'cat_character'), category: :character)
+      Tag.create!(tag_name: TagName.create!(name: 'cat_general'), category: :general)
+      Tag.create!(tag_name: TagName.create!(name: 'cat_material'), category: :material)
+      Tag.create!(tag_name: TagName.create!(name: 'cat_meta'), category: :meta)
+      Tag.create!(tag_name: TagName.create!(name: 'nico:cat_nico'), category: :nico)
+
+      get '/tags', params: { name: 'cat_', order: 'category:asc', limit: 20 }
+
+      expect(response).to have_http_status(:ok)
+      expect(response_names).to eq(%w[
+          cat_deerjikist
+          cat_meme
+          cat_character
+          cat_general
+          cat_material
+          cat_meta
+          nico:cat_nico
+      ])
+    end
+
+    it 'paginates and keeps total count' do
+      %w[pag_a pag_b pag_c].each do |name|
+        Tag.create!(tag_name: TagName.create!(name:), category: :general)
+      end
+
+      get '/tags', params: { name: 'pag_', order: 'name:asc', page: 2, limit: 2 }
+
+      expect(response).to have_http_status(:ok)
+      expect(json['count']).to eq(3)
+      expect(response_names).to eq(%w[pag_c])
+    end
+
+    it 'falls back to default ordering when order is invalid' do
+      low = Tag.create!(tag_name: TagName.create!(name: 'fallback_low'), category: :general)
+      high = Tag.create!(tag_name: TagName.create!(name: 'fallback_high'), category: :general)
+
+      low.update_columns(post_count: 1)
+      high.update_columns(post_count: 9)
+
+      get '/tags', params: { name: 'fallback_', order: 'nope:sideways' }
+
+      expect(response).to have_http_status(:ok)
+      expect(response_names.first).to eq('fallback_high')
+    end
+
+    it 'normalises invalid page and limit' do
+      %w[norm_a norm_b].each do |name|
+        Tag.create!(tag_name: TagName.create!(name:), category: :general)
+      end
+
+      get '/tags', params: { name: 'norm_', order: 'name:asc', page: 0, limit: 0 }
+
+      expect(response).to have_http_status(:ok)
+      expect(json['count']).to eq(2)
+      expect(response_tags.size).to eq(1)
+      expect(response_names).to eq(['norm_a'])
     end
   end
 
@@ -37,9 +212,13 @@ RSpec.describe 'Tags API', type: :request do
         expect(response).to have_http_status(:ok)
 
         expect(json).to include(
-            'id'        => tag.id,
+            'id' => tag.id,
-            'name'      => 'spec_tag',
+            'name' => 'spec_tag',
-            'category'  => 'general')
+            'category' => 'general',
+            'post_count' => 1,
+            'has_wiki' => false)
+        expect(json).to have_key('created_at')
+        expect(json).to have_key('updated_at')
       end
     end
 
@@ -61,7 +240,7 @@ RSpec.describe 'Tags API', type: :request do
 
       expect(json).to be_an(Array)
       expect(json.map { |t| t['name'] }).to include('spec_tag')
-      t = json.find { |t| t['name'] == 'spec_tag' }
+      t = json.find { |x| x['name'] == 'spec_tag' }
       expect(t).to have_key('matched_alias')
       expect(t['matched_alias']).to be(nil)
     end
@@ -73,9 +252,9 @@ RSpec.describe 'Tags API', type: :request do
 
       expect(json).to be_an(Array)
       expect(json.map { |t| t['name'] }).to include('spec_tag')
-      t = json.find { |t| t['name'] == 'spec_tag' }
+      t = json.find { |x| x['name'] == 'spec_tag' }
       expect(t['matched_alias']).to eq('unko')
-      expect(json.map { |t| t['name'] }).not_to include('unknown')
+      expect(json.map { |x| x['name'] }).not_to include('unknown')
     end
   end
 
@@ -85,10 +264,14 @@ RSpec.describe 'Tags API', type: :request do
 
       expect(response).to have_http_status(:ok)
 
-      expect(json).to have_key('id')
+      expect(json).to include(
-      expect(json).to have_key('name')
+          'id' => tag.id,
-      expect(json['id']).to eq(tag.id)
+          'name' => 'spec_tag',
-      expect(json['name']).to eq('spec_tag')
+          'category' => 'general',
+          'post_count' => 1,
+          'has_wiki' => false)
+      expect(json).to have_key('created_at')
+      expect(json).to have_key('updated_at')
     end
 
     it 'returns 404 when not found' do
@@ -97,7 +280,6 @@ RSpec.describe 'Tags API', type: :request do
     end
   end
 
-  # member? を持つ user を想定（Factory 側で trait 作ってもOK）
   let(:member_user) { create(:user) }
   let(:non_member_user) { create(:user) }
 
@@ -110,89 +292,222 @@ RSpec.describe 'Tags API', type: :request do
     allow(non_member_user).to receive(:gte_member?).and_return(false)
   end
 
-  describe "PATCH /tags/:id" do
+  describe 'PATCH /tags/:id' do
-    context "未ログイン" do
+    context '未ログイン' do
       before { stub_current_user(nil) }
 
-      it "401 を返す" do
+      it '401 を返す' do
-        patch "/tags/#{tag.id}", params: { name: "new" }
+        patch "/tags/#{ tag.id }", params: { name: 'new' }
         expect(response).to have_http_status(:unauthorized)
       end
     end
 
-    context "ログインしてゐるが member でない" do
+    context 'ログインしてゐるが member でない' do
       before { stub_current_user(non_member_user) }
 
-      it "403 を返す" do
+      it '403 を返す' do
-        patch "/tags/#{tag.id}", params: { name: "new" }
+        patch "/tags/#{ tag.id }", params: { name: 'new' }
         expect(response).to have_http_status(:forbidden)
       end
     end
 
-    context "member" do
+    context 'member' do
       before { stub_current_user(member_user) }
 
-      it "name だけ更新できる" do
+      it 'name だけ更新できる' do
-        patch "/tags/#{tag.id}", params: { name: "new" }
+        patch "/tags/#{ tag.id }", params: { name: 'new' }
 
         expect(response).to have_http_status(:ok)
 
         tag.reload
-        expect(tag.name).to eq("new")
+        expect(tag.name).to eq('new')
-        expect(tag.category).to eq("general")
+        expect(tag.category).to eq('general')
 
-        json = JSON.parse(response.body)
+        body = JSON.parse(response.body)
-        expect(json["id"]).to eq(tag.id)
+        expect(body['id']).to eq(tag.id)
-        expect(json["name"]).to eq("new")
+        expect(body['name']).to eq('new')
-        expect(json["category"]).to eq("general")
+        expect(body['category']).to eq('general')
       end
 
-      it "category だけ更新できる" do
+      it 'category だけ更新できる' do
-        patch "/tags/#{tag.id}", params: { category: "meme" }
+        patch "/tags/#{ tag.id }", params: { category: 'meme' }
 
         expect(response).to have_http_status(:ok)
 
         tag.reload
-        expect(tag.name).to eq("spec_tag")
+        expect(tag.name).to eq('spec_tag')
-        expect(tag.category).to eq("meme")
+        expect(tag.category).to eq('meme')
       end
 
-      it "空文字は presence により無視され、更新は走らない（値が変わらない）" do
+      it '空文字は presence により無視され、更新は走らない（値が変わらない）' do
-        patch "/tags/#{tag.id}", params: { name: "", category: "   " }
+        patch "/tags/#{ tag.id }", params: { name: '', category: '   ' }
 
         expect(response).to have_http_status(:ok)
 
         tag.reload
-        expect(tag.name).to eq("spec_tag")
+        expect(tag.name).to eq('spec_tag')
-        expect(tag.category).to eq("general")
+        expect(tag.category).to eq('general')
       end
 
-      it "両方更新できる" do
+      it '両方更新できる' do
-        patch "/tags/#{tag.id}", params: { name: "n", category: "meta" }
+        patch "/tags/#{ tag.id }", params: { name: 'n', category: 'meta' }
 
         expect(response).to have_http_status(:ok)
 
         tag.reload
-        expect(tag.name).to eq("n")
+        expect(tag.name).to eq('n')
-        expect(tag.category).to eq("meta")
+        expect(tag.category).to eq('meta')
       end
 
-      it "存在しない id だと RecordNotFound になる（通常は 404）" do
+      it '存在しない id だと RecordNotFound になる（通常は 404）' do
-        # Rails 設定次第で例外がそのまま上がる/404になる
+        patch '/tags/999999999', params: { name: 'x' }
-        # APIなら rescue_from で 404 にしてることが多いので、その場合は 404 を期待。
-        patch "/tags/999999999", params: { name: "x" }
-
         expect(response.status).to be_in([404, 500])
       end
 
-      it "バリデーションで update! が失敗したら（通常は 422 か 500）" do
+      it 'バリデーションで update! が失敗したら（通常は 422 か 500）' do
-        patch "/tags/#{tag.id}", params: { name: 'new', category: 'nico' }
+        patch "/tags/#{ tag.id }", params: { name: 'new', category: 'nico' }
-
-        # rescue_from の実装次第で変はる:
-        # - RecordInvalid を 422 にしてるなら 422
-        # - 未処理なら 500
         expect(response.status).to be_in([422, 500])
       end
     end
   end
+
+  describe 'GET /tags/with-depth' do
+    let!(:root_meme) do
+      Tag.create!(tag_name: TagName.create!(name: 'depth_a_root_meme'), category: :meme)
+    end
+
+    let!(:root_material) do
+      Tag.create!(tag_name: TagName.create!(name: 'depth_b_root_material'), category: :material)
+    end
+
+    let!(:hidden_general_root) do
+      Tag.create!(tag_name: TagName.create!(name: 'depth_hidden_general_root'), category: :general)
+    end
+
+    let!(:child_character) do
+      Tag.create!(tag_name: TagName.create!(name: 'depth_child_character'), category: :character)
+    end
+
+    let!(:grandchild_material) do
+      Tag.create!(tag_name: TagName.create!(name: 'depth_grandchild_material'), category: :material)
+    end
+
+    let!(:child_general) do
+      Tag.create!(tag_name: TagName.create!(name: 'depth_child_general'), category: :general)
+    end
+
+    before do
+      TagImplication.create!(parent_tag: root_meme, tag: child_character)
+      TagImplication.create!(parent_tag: child_character, tag: grandchild_material)
+      TagImplication.create!(parent_tag: root_material, tag: child_general)
+    end
+
+    it 'returns only visible root tags and visible has_children flags' do
+      get '/tags/with-depth'
+
+      expect(response).to have_http_status(:ok)
+      expect(json.map { |t| t['name'] }).to eq([
+        'depth_a_root_meme',
+        'depth_b_root_material'
+      ])
+
+      meme_row = json.find { |t| t['name'] == 'depth_a_root_meme' }
+      material_row = json.find { |t| t['name'] == 'depth_b_root_material' }
+
+      expect(meme_row['has_children']).to eq(true)
+      expect(meme_row['children']).to eq([])
+
+      expect(material_row['has_children']).to eq(false)
+      expect(material_row['children']).to eq([])
+
+      expect(json.map { |t| t['name'] }).not_to include('depth_hidden_general_root')
+    end
+
+    it 'returns children of the specified parent' do
+      get '/tags/with-depth', params: { parent: root_meme.id }
+
+      expect(response).to have_http_status(:ok)
+      expect(json.map { |t| t['name'] }).to eq(['depth_child_character'])
+
+      row = json.first
+      expect(row['category']).to eq('character')
+      expect(row['has_children']).to eq(true)
+      expect(row['children']).to eq([])
+    end
+  end
+
+  describe 'GET /tags/name/:name/materials' do
+    let!(:material_user) { create_member_user! }
+
+    let!(:root_tag) do
+      Tag.create!(tag_name: TagName.create!(name: 'materials_root'), category: :material)
+    end
+
+    let!(:child_a_tag) do
+      Tag.create!(tag_name: TagName.create!(name: 'materials_child_a'), category: :material)
+    end
+
+    let!(:child_b_tag) do
+      Tag.create!(tag_name: TagName.create!(name: 'materials_child_b'), category: :character)
+    end
+
+    let!(:grandchild_tag) do
+      Tag.create!(tag_name: TagName.create!(name: 'materials_grandchild'), category: :material)
+    end
+
+    let!(:root_material) do
+      create_material(root_tag, user: material_user, filename: 'root.png')
+    end
+
+    let!(:child_a_material) do
+      create_material(child_a_tag, user: material_user, filename: 'child_a.png')
+    end
+
+    let!(:grandchild_material) do
+      create_material(grandchild_tag, user: material_user, filename: 'grandchild.png')
+    end
+
+    before do
+      TagImplication.create!(parent_tag: root_tag, tag: child_b_tag)
+      TagImplication.create!(parent_tag: root_tag, tag: child_a_tag)
+      TagImplication.create!(parent_tag: child_a_tag, tag: grandchild_tag)
+    end
+
+    it 'returns a tag tree with nested materials sorted by child name' do
+      get "/tags/name/#{ CGI.escape(root_tag.name) }/materials"
+
+      expect(response).to have_http_status(:ok)
+
+      expect(json).to include(
+        'id' => root_tag.id,
+        'name' => 'materials_root',
+        'category' => 'material'
+      )
+
+      expect(json['material']).to be_present
+      expect(json.dig('material', 'id')).to eq(root_material.id)
+      expect(json.dig('material', 'file')).to be_present
+      expect(json.dig('material', 'content_type')).to eq('image/png')
+
+      expect(json['children'].map { |t| t['name'] }).to eq([
+        'materials_child_a',
+        'materials_child_b'
+      ])
+
+      child_a = json['children'].find { |t| t['name'] == 'materials_child_a' }
+      child_b = json['children'].find { |t| t['name'] == 'materials_child_b' }
+
+      expect(child_a.dig('material', 'id')).to eq(child_a_material.id)
+      expect(child_a['children'].map { |t| t['name'] }).to eq(['materials_grandchild'])
+      expect(child_a.dig('children', 0, 'material', 'id')).to eq(grandchild_material.id)
+
+      expect(child_b['material']).to be_nil
+      expect(child_b['children']).to eq([])
+    end
+
+    it 'returns 404 when the tag does not exist' do
+      get '/tags/name/no_such_tag_12345/materials'
+      expect(response).to have_http_status(:not_found)
+    end
+  end
 end

backend/spec/requests/theatre_comments_spec.rb

@@ -0,0 +1,150 @@
+require 'rails_helper'
+
+RSpec.describe 'TheatreComments', type: :request do
+  def sign_in_as(user)
+    allow_any_instance_of(ApplicationController).to receive(:current_user).and_return(user)
+  end
+
+  describe 'GET /theatres/:theatre_id/comments' do
+    let(:theatre) { create(:theatre) }
+    let(:other_theatre) { create(:theatre) }
+    let(:alice) { create(:user, name: 'Alice') }
+    let(:bob) { create(:user, name: 'Bob') }
+
+    let!(:comment_3) do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 3,
+        user: alice,
+        content: 'third comment'
+      )
+    end
+
+    let!(:comment_1) do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 1,
+        user: alice,
+        content: 'first comment'
+      )
+    end
+
+    let!(:comment_2) do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 2,
+        user: bob,
+        content: 'second comment'
+      )
+    end
+
+    let!(:other_comment) do
+      create(
+        :theatre_comment,
+        theatre: other_theatre,
+        no: 1,
+        user: bob,
+        content: 'other theatre comment'
+      )
+    end
+
+    it 'theatre_id で絞り込み、no_gt より大きいものを no 降順で返す' do
+      get "/theatres/#{theatre.id}/comments", params: { no_gt: 1 }
+
+      expect(response).to have_http_status(:ok)
+      expect(response.parsed_body.map { |row| row['no'] }).to eq([3, 2])
+      expect(response.parsed_body.map { |row| row['content'] }).to eq([
+        'third comment',
+        'second comment'
+      ])
+    end
+
+    it 'user は id と name だけを含む' do
+      get "/theatres/#{theatre.id}/comments", params: { no_gt: 1 }
+
+      expect(response).to have_http_status(:ok)
+
+      expect(response.parsed_body.first['user']).to eq({
+        'id' => alice.id,
+        'name' => 'Alice'
+      })
+      expect(response.parsed_body.first['user'].keys).to contain_exactly('id', 'name')
+    end
+
+    it 'no_gt が負数なら 0 として扱う' do
+      get "/theatres/#{theatre.id}/comments", params: { no_gt: -100 }
+
+      expect(response).to have_http_status(:ok)
+      expect(response.parsed_body.map { |row| row['no'] }).to eq([3, 2, 1])
+    end
+  end
+
+  describe 'POST /theatres/:theatre_id/comments' do
+    let(:user) { create(:user, name: 'Alice') }
+    let(:theatre) { create(:theatre, next_comment_no: 2) }
+
+    before do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 1,
+        user: user,
+        content: 'existing comment'
+      )
+    end
+
+    it '未ログインなら 401 を返す' do
+      expect {
+        post "/theatres/#{theatre.id}/comments", params: { content: 'hello' }
+      }.not_to change(TheatreComment, :count)
+
+      expect(response).to have_http_status(:unauthorized)
+    end
+
+    it 'content が blank なら 422 を返す' do
+      sign_in_as(user)
+
+      expect {
+        post "/theatres/#{theatre.id}/comments", params: { content: '   ' }
+      }.not_to change(TheatreComment, :count)
+
+      expect(response).to have_http_status(:unprocessable_entity)
+    end
+
+    it 'theatre が存在しなければ 404 を返す' do
+      sign_in_as(user)
+
+      expect {
+        post '/theatres/999999/comments', params: { content: 'hello' }
+      }.not_to change(TheatreComment, :count)
+
+      expect(response).to have_http_status(:not_found)
+    end
+
+    it 'コメントを作成し、user を紐づけ、next_comment_no を進める' do
+      sign_in_as(user)
+
+      expect {
+        post "/theatres/#{theatre.id}/comments", params: { content: 'new comment' }
+      }.to change(TheatreComment, :count).by(1)
+
+      expect(response).to have_http_status(:created)
+
+      comment = TheatreComment.find_by!(theatre: theatre, no: 2)
+
+      expect(comment.user).to eq(user)
+      expect(comment.content).to eq('new comment')
+      expect(theatre.reload.next_comment_no).to eq(3)
+
+      expect(response.parsed_body.slice('theatre_id', 'no', 'user_id', 'content')).to eq({
+        'theatre_id' => theatre.id,
+        'no' => 2,
+        'user_id' => user.id,
+        'content' => 'new comment'
+      })
+    end
+  end
+end

backend/spec/requests/theatres_spec.rb

@@ -0,0 +1,307 @@
+require 'rails_helper'
+require 'active_support/testing/time_helpers'
+
+
+RSpec.describe 'Theatres API', type: :request do
+  include ActiveSupport::Testing::TimeHelpers
+
+  around do |example|
+    travel_to(Time.zone.parse('2026-03-18 21:00:00')) do
+      example.run
+    end
+  end
+
+  let(:member) { create(:user, :member, name: 'member user') }
+  let(:other_user) { create(:user, :member, name: 'other user') }
+
+  let!(:youtube_post) do
+    Post.create!(
+      title: 'youtube post',
+      url: 'https://www.youtube.com/watch?v=spec123'
+    )
+  end
+
+  let!(:other_post) do
+    Post.create!(
+      title: 'other post',
+      url: 'https://example.com/posts/1'
+    )
+  end
+
+  let!(:theatre) do
+    Theatre.create!(
+      name: 'spec theatre',
+      opens_at: Time.zone.parse('2026-03-18 20:00:00'),
+      kind: 0,
+      created_by_user: member
+    )
+  end
+
+  describe 'GET /theatres/:id' do
+    subject(:do_request) do
+      get "/theatres/#{theatre_id}"
+    end
+
+    context 'when theatre exists' do
+      let(:theatre_id) { theatre.id }
+
+      it 'returns theatre json' do
+        do_request
+
+        expect(response).to have_http_status(:ok)
+        expect(json).to include(
+          'id' => theatre.id,
+          'name' => 'spec theatre'
+        )
+        expect(json).to have_key('opens_at')
+        expect(json).to have_key('closes_at')
+        expect(json).to have_key('created_at')
+        expect(json).to have_key('updated_at')
+
+        expect(json['created_by_user']).to include(
+          'id' => member.id,
+          'name' => 'member user'
+        )
+      end
+    end
+
+    context 'when theatre does not exist' do
+      let(:theatre_id) { 999_999_999 }
+
+      it 'returns 404' do
+        do_request
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+  end
+
+  describe 'PUT /theatres/:id/watching' do
+    subject(:do_request) do
+      put "/theatres/#{theatre_id}/watching"
+    end
+
+    let(:theatre_id) { theatre.id }
+
+    context 'when not logged in' do
+      it 'returns 401' do
+        sign_out
+        do_request
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when theatre does not exist' do
+      let(:theatre_id) { 999_999_999 }
+
+      it 'returns 404' do
+        sign_in_as(member)
+        do_request
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+
+    context 'when theatre has no host yet' do
+      before do
+        sign_in_as(member)
+      end
+
+      it 'creates watching row, assigns current user as host, and returns current theatre info' do
+        expect { do_request }
+          .to change { TheatreWatchingUser.count }.by(1)
+
+        expect(response).to have_http_status(:ok)
+
+        theatre.reload
+        watch = TheatreWatchingUser.find_by!(theatre: theatre, user: member)
+
+        expect(theatre.host_user_id).to eq(member.id)
+        expect(watch.expires_at).to be_within(1.second).of(30.seconds.from_now)
+
+        expect(json).to include(
+          'host_flg' => true,
+          'post_id' => nil,
+          'post_started_at' => nil
+        )
+
+        expect(json.fetch('watching_users')).to contain_exactly(
+          {
+            'id' => member.id,
+            'name' => 'member user'
+          }
+        )
+      end
+    end
+
+    context 'when current user is already watching' do
+      let!(:watching_row) do
+        TheatreWatchingUser.create!(
+          theatre: theatre,
+          user: member,
+          expires_at: 5.seconds.from_now
+        )
+      end
+
+      before do
+        sign_in_as(member)
+      end
+
+      it 'refreshes expires_at without creating another row' do
+        expect { do_request }
+          .not_to change { TheatreWatchingUser.count }
+
+        expect(response).to have_http_status(:ok)
+
+        expect(watching_row.reload.expires_at)
+          .to be_within(1.second).of(30.seconds.from_now)
+      end
+    end
+
+    context 'when another active host exists' do
+      before do
+        TheatreWatchingUser.create!(
+          theatre: theatre,
+          user: other_user,
+          expires_at: 10.minutes.from_now
+        )
+        theatre.update!(host_user: other_user)
+        sign_in_as(member)
+      end
+
+      it 'does not steal host and returns host_flg false' do
+        expect { do_request }
+          .to change { TheatreWatchingUser.count }.by(1)
+
+        expect(response).to have_http_status(:ok)
+        expect(theatre.reload.host_user_id).to eq(other_user.id)
+
+        expect(json).to include(
+          'host_flg' => false,
+          'post_id' => nil,
+          'post_started_at' => nil
+        )
+
+        expect(json.fetch('watching_users')).to contain_exactly(
+          {
+            'id' => member.id,
+            'name' => 'member user'
+          },
+          {
+            'id' => other_user.id,
+            'name' => 'other user'
+          }
+        )
+      end
+    end
+
+    context 'when host is set but no longer actively watching' do
+      let(:started_at) { 2.minutes.ago }
+
+      before do
+        TheatreWatchingUser.create!(
+          theatre: theatre,
+          user: other_user,
+          expires_at: 1.second.ago
+        )
+        theatre.update!(
+          host_user: other_user,
+          current_post: youtube_post,
+          current_post_started_at: started_at
+        )
+        sign_in_as(member)
+      end
+
+      it 'reassigns host to current user and returns current post info' do
+        expect { do_request }
+          .to change { TheatreWatchingUser.count }.by(1)
+
+        expect(response).to have_http_status(:ok)
+
+        theatre.reload
+        expect(theatre.host_user_id).to eq(member.id)
+
+        expect(json['host_flg']).to eq(true)
+        expect(json['post_id']).to eq(youtube_post.id)
+        expect(Time.zone.parse(json['post_started_at']))
+          .to be_within(1.second).of(started_at)
+      end
+    end
+  end
+
+  describe 'PATCH /theatres/:id/next_post' do
+    subject(:do_request) do
+      patch "/theatres/#{theatre_id}/next_post"
+    end
+
+    let(:theatre_id) { theatre.id }
+
+    context 'when not logged in' do
+      it 'returns 401' do
+        sign_out
+        do_request
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when theatre does not exist' do
+      let(:theatre_id) { 999_999_999 }
+
+      it 'returns 404' do
+        sign_in_as(member)
+        do_request
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+
+    context 'when logged in but not host' do
+      before do
+        theatre.update!(host_user: other_user)
+        sign_in_as(member)
+      end
+
+      it 'returns 403' do
+        do_request
+        expect(response).to have_http_status(:forbidden)
+      end
+    end
+
+    context 'when current user is host' do
+      before do
+        theatre.update!(host_user: member)
+        sign_in_as(member)
+      end
+
+      it 'sets current_post to an eligible post and updates current_post_started_at' do
+        expect { do_request }
+          .to change { theatre.reload.current_post_id }
+          .from(nil).to(youtube_post.id)
+
+        expect(response).to have_http_status(:no_content)
+        expect(theatre.reload.current_post_started_at)
+          .to be_within(1.second).of(Time.current)
+      end
+    end
+
+    context 'when current user is host and no eligible post exists' do
+      before do
+        youtube_post.destroy!
+        theatre.update!(
+          host_user: member,
+          current_post: other_post,
+          current_post_started_at: 1.hour.ago
+        )
+        sign_in_as(member)
+      end
+
+      it 'still returns 204 and clears current_post' do
+        do_request
+
+        expect(response).to have_http_status(:no_content)
+
+        theatre.reload
+        expect(theatre.current_post_id).to be_nil
+        expect(theatre.current_post_started_at)
+          .to be_within(1.second).of(Time.current)
+      end
+    end
+  end
+end

backend/spec/tasks/nico_sync_spec.rb

@@ -8,8 +8,8 @@ RSpec.describe "nico:sync" do
   end
 
   def create_tag!(name, category:)
-    tn = TagName.find_or_create_by!(name: name.to_s.strip)
+    tn = TagName.find_undiscard_or_create_by!(name: name.to_s.strip)
-    Tag.find_or_create_by!(tag_name_id: tn.id) { |t| t.category = category }
+    Tag.find_undiscard_or_create_by!(tag_name_id: tn.id) { |t| t.category = category }
   end
 
   def link_nico_to_tag!(nico_tag, tag)

frontend/scripts/generate-sitemap.js

@@ -20,7 +20,7 @@ const fetchPosts = async tagName => (await axios.get (`${ API_BASE_URL }/posts`,
                                  match: 'all',
                                  limit: '20' }) } })).data.posts
 
-const fetchTags = async () => (await axios.get (`${ API_BASE_URL }/tags`)).data
+const fetchTags = async () => (await axios.get (`${ API_BASE_URL }/tags`)).data.tags
 const fetchTagNames = async () => (await fetchTags ()).map (tag => tag.name)
 
 const fetchWikiPages = async () => (await axios.get (`${ API_BASE_URL }/wiki`)).data

frontend/src/App.tsx

@@ -10,6 +10,11 @@ import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
+import MaterialBasePage from '@/pages/materials/MaterialBasePage'
+import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
+import MaterialListPage from '@/pages/materials/MaterialListPage'
+import MaterialNewPage from '@/pages/materials/MaterialNewPage'
+// import MaterialSearchPage from '@/pages/materials/MaterialSearchPage'
 import NicoTagListPage from '@/pages/tags/NicoTagListPage'
 import NotFound from '@/pages/NotFound'
 import PostDetailPage from '@/pages/posts/PostDetailPage'
@@ -19,6 +24,8 @@ import PostNewPage from '@/pages/posts/PostNewPage'
 import PostSearchPage from '@/pages/posts/PostSearchPage'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
 import SettingPage from '@/pages/users/SettingPage'
+import TagListPage from '@/pages/tags/TagListPage'
+import TheatreDetailPage from '@/pages/theatres/TheatreDetailPage'
 import WikiDetailPage from '@/pages/wiki/WikiDetailPage'
 import WikiDiffPage from '@/pages/wiki/WikiDiffPage'
 import WikiEditPage from '@/pages/wiki/WikiEditPage'
@@ -39,14 +46,22 @@ const RouteTransitionWrapper = ({ user, setUser }: {
   return (
       <LayoutGroup id="gallery-shared">
 	<AnimatePresence mode="wait">
-	  <Routes location={location} key={location.pathname}>
+	  <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/nico" element={<NicoTagListPage user={user}/>}/>
+	    <Route path="/theatres/:id" element={<TheatreDetailPage/>}/>
+	    <Route path="/materials" element={<MaterialBasePage/>}>
+	      <Route index element={<MaterialListPage/>}/>
+	      <Route path="new" element={<MaterialNewPage/>}/>
+	      <Route path=":id" element ={<MaterialDetailPage/>}/>
+	    </Route>
+	    {/* <Route path="/materials/search" element={<MaterialSearchPage/>}/> */}
 	    <Route path="/wiki" element={<WikiSearchPage/>}/>
 	    <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
 	    <Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>
@@ -116,7 +131,7 @@ export default (() => {
       <>
 	<RouteBlockerOverlay/>
 	<BrowserRouter>
-	  <div className="flex flex-col h-screen w-screen">
+	  <div className="flex flex-col h-dvh w-full">
 	    <TopNav user={user}/>
 	    <RouteTransitionWrapper user={user} setUser={setUser}/>
 	  </div>

frontend/src/components/DraggableDroppableTagRow.tsx

@@ -1,5 +1,6 @@
 import { useDraggable, useDroppable } from '@dnd-kit/core'
 import { CSS } from '@dnd-kit/utilities'
+import { motion } from 'framer-motion'
 import { useRef } from 'react'
 
 import TagLink from '@/components/TagLink'
@@ -14,10 +15,11 @@ type Props = {
     nestLevel:        number
     pathKey:          string
     parentTagId?:     number
-    suppressClickRef: MutableRefObject<boolean> }
+    suppressClickRef: MutableRefObject<boolean>
+    sp?:              boolean }
 
 
-export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef }: Props) => {
+export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }: Props) => {
   const dndId = `tag-node:${ pathKey }`
 
   const downPosRef = useRef<{ x: number; y: number } | null> (null)
@@ -88,6 +90,8 @@ export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef }: Pro
 	  className={cn ('rounded select-none', over && 'ring-2 ring-offset-2')}
 	  {...attributes}
 	  {...listeners}>
-	<TagLink tag={tag} nestLevel={nestLevel}/>
+	<motion.div layoutId={`tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
+	  <TagLink tag={tag} nestLevel={nestLevel}/>
+	</motion.div>
       </div>)
 }) satisfies FC<Props>

frontend/src/components/MaterialSidebar.tsx

@@ -0,0 +1,97 @@
+import { Fragment, useEffect, useState } from 'react'
+
+import TagLink from '@/components/TagLink'
+import SidebarComponent from '@/components/layout/SidebarComponent'
+import { apiGet } from '@/lib/api'
+
+import type { FC, ReactNode } from 'react'
+
+import type { Tag } from '@/types'
+
+type TagWithDepth = Tag & {
+    hasChildren:  boolean
+    children:     TagWithDepth[] }
+
+
+const setChildrenById = (
+    tags:     TagWithDepth[],
+    targetId: number,
+    children: TagWithDepth[],
+): TagWithDepth[] => (
+    tags.map (tag => {
+      if (tag.id === targetId)
+	return { ...tag, children }
+
+      if (tag.children.length === 0)
+	return tag
+
+      return { ...tag,
+	       children: (setChildrenById (tag.children, targetId, children)
+			  .filter (t => t.category !== 'meme' || t.hasChildren)) }
+    }))
+
+
+export default (() => {
+  const [tags, setTags] = useState<TagWithDepth[]> ([])
+  const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
+  const [tagFetchedFlags, setTagFetchedFlags] = useState<Record<number, boolean>> ({ })
+
+  useEffect (() => {
+    void (async () => {
+      setTags ((await apiGet<TagWithDepth[]> ('/tags/with-depth'))
+	       .filter (t => t.category !== 'meme' || t.hasChildren))
+    }) ()
+  }, [])
+
+  const renderTags = (ts: TagWithDepth[], nestLevel = 0): ReactNode => (
+      ts.map (t => (
+	  <Fragment key={t.id}>
+	    <li>
+	      <div className="flex">
+		<div className="flex-none w-4">
+		  {t.hasChildren && (
+		      <a
+			  href="#"
+			  onClick={async e => {
+			    e.preventDefault ()
+			    if (!(tagFetchedFlags[t.id]))
+			      {
+				try
+				{
+				  const data =
+				      await apiGet<TagWithDepth[]> (
+					  '/tags/with-depth', { params: { parent: String (t.id) } })
+				  setTags (prev => setChildrenById (prev, t.id, data))
+				  setTagFetchedFlags (prev => ({ ...prev, [t.id]: true }))
+				}
+				catch
+				{
+				  ;
+				}
+			      }
+			    setOpenTags (prev => ({ ...prev, [t.id]: !(prev[t.id]) }))
+			  }}>
+			{openTags[t.id] ? <>&minus;</> : '+'}
+		      </a>)}
+		</div>
+		<div className="flex-1 truncate">
+		  <TagLink
+		      tag={t}
+		      nestLevel={nestLevel}
+		      title={t.name}
+		      withCount={false}
+		      withWiki={false}
+		      to={`/materials?tag=${ encodeURIComponent (t.name) }`}/>
+		</div>
+	      </div>
+	    </li>
+	    {openTags[t.id] && renderTags (t.children, nestLevel + 1)}
+	  </Fragment>)))
+
+  return (
+      <SidebarComponent>
+	<ul>
+	  {renderTags (tags)}
+	</ul>
+      </SidebarComponent>)
+}) satisfies FC

frontend/src/components/NicoViewer.tsx

@@ -1,78 +1,204 @@
-import { useRef, useLayoutEffect, useEffect, useState } from 'react'
+import { forwardRef,
-type Props = { id:      string,
+         useCallback,
-	       width:   number,
+         useEffect,
-	       height:  number,
+         useImperativeHandle,
-	       style?:  CSSProperties }
+         useLayoutEffect,
+         useMemo,
+         useRef,
+         useState } from 'react'
 
-import type { CSSProperties, FC } from 'react'
+import type { CSSProperties, ForwardedRef } from 'react'
+
+import type { NiconicoMetadata, NiconicoVideoInfo, NiconicoViewerHandle } from '@/types'
+
+type NiconicoPlayerMessage =
+    | { eventName: 'enterProgrammaticFullScreen' }
+    | { eventName: 'exitProgrammaticFullScreen' }
+    | { eventName: 'loadComplete'; playerId?: string; data: { videoInfo: NiconicoVideoInfo } }
+    | { eventName: 'playerMetadataChange'; playerId?: string; data: NiconicoMetadata }
+    | { eventName: 'playerStatusChange' | 'statusChange'; playerId?: string; data?: unknown }
+    | { eventName: 'error'; playerId?: string; data?: unknown; code?: string; message?: string }
+
+type NiconicoCommand =
+    | { eventName: 'play'; sourceConnectorType: 1; playerId: string }
+    | { eventName: 'pause'; sourceConnectorType: 1; playerId: string }
+    | { eventName: 'seek'; sourceConnectorType: 1; playerId: string; data: { time: number } }
+    | { eventName: 'mute'; sourceConnectorType: 1; playerId: string; data: { mute: boolean } }
+    | { eventName: 'volumeChange'; sourceConnectorType: 1; playerId: string;
+	data: { volume: number } }
+    | { eventName: 'commentVisibilityChange'; sourceConnectorType: 1; playerId: string;
+	data: { commentVisibility: boolean } }
+
+const EMBED_ORIGIN = 'https://embed.nicovideo.jp'
+
+type Props = {
+    id:                 string
+    width:              number
+    height:             number
+    style?:             CSSProperties
+    onLoadComplete?:    (info: NiconicoVideoInfo) => void
+    onMetadataChange?:  (meta: NiconicoMetadata) => void }
 
 
-export default ((props: Props) => {
+export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle>) => {
-  const { id, width, height, style = { } } = props
+  const { id, width, height, style = { }, onLoadComplete, onMetadataChange } = props
 
   const iframeRef = useRef<HTMLIFrameElement> (null)
+  const playerId = useMemo (() => `nico-${ id }-${ Math.random ().toString (36).slice (2) }`, [id])
 
   const [screenWidth, setScreenWidth] = useState<CSSProperties['width']> ()
   const [screenHeight, setScreenHeight] = useState<CSSProperties['height']> ()
   const [landscape, setLandscape] = useState<boolean> (false)
   const [fullScreen, setFullScreen] = useState<boolean> (false)
 
-  const src = `https://embed.nicovideo.jp/watch/${id}?persistence=1&oldScript=1&referer=&from=0&allowProgrammaticFullScreen=1`;
+  const src =
+      `${ EMBED_ORIGIN }/watch/${ id }`
+      + '?jsapi=1'
+      + `&playerId=${ encodeURIComponent (playerId) }`
+      + '&persistence=1'
+      + '&oldScript=1'
+      + '&referer='
+      + '&from=0'
+      + '&allowProgrammaticFullScreen=1'
 
-  const styleFullScreen: CSSProperties = fullScreen ? {
+  const styleFullScreen: CSSProperties =
-      top:  0,
+      fullScreen
-      left: landscape ? 0 : '100%',
+      ? { top: 0,
-      position: 'fixed',
+          left: landscape ? 0 : '100%',
-      width: screenWidth,
+          position: 'fixed',
-      height: screenHeight,
+          width: screenWidth,
-      zIndex: 2147483647,
+          height: screenHeight,
-      maxWidth: 'none',
+          zIndex: 2_147_483_647,
-      transformOrigin: '0% 0%',
+          maxWidth: 'none',
-      transform: landscape ? 'none' : 'rotate(90deg)',
+          transformOrigin: '0% 0%',
-      WebkitTransformOrigin: '0% 0%',
+          transform: landscape ? 'none' : 'rotate(90deg)',
-      WebkitTransform: landscape ? 'none' : 'rotate(90deg)' } : {};
+          WebkitTransformOrigin: '0% 0%',
+          WebkitTransform: landscape ? 'none' : 'rotate(90deg)' }
+      : { }
 
-  const margedStyle = {
+  const margedStyle: CSSProperties =
-      border:   'none',
+      { border: 'none', maxWidth: '100%', ...style, ...styleFullScreen }
-      maxWidth: '100%',
+
-      ...style,
+  const postToPlayer = useCallback ((message: NiconicoCommand) => {
-      ...styleFullScreen }
+    const win = iframeRef.current?.contentWindow
+    if (!(win))
+      return
+
+    win.postMessage (message, EMBED_ORIGIN)
+  }, [])
+
+  const play = useCallback (() => {
+    postToPlayer ({ eventName: 'play', sourceConnectorType: 1, playerId })
+  }, [playerId, postToPlayer])
+
+  const pause = useCallback (() => {
+    postToPlayer ({ eventName: 'pause', sourceConnectorType: 1, playerId })
+  }, [playerId, postToPlayer])
+
+  const seek = useCallback ((time: number) => {
+    postToPlayer ({ eventName: 'seek', sourceConnectorType: 1, playerId, data: { time } })
+  }, [playerId, postToPlayer])
+
+  const mute = useCallback (() => {
+    postToPlayer ({ eventName: 'mute', sourceConnectorType: 1, playerId, data: { mute: true } })
+  }, [playerId, postToPlayer])
+
+  const unmute = useCallback (() => {
+    postToPlayer ({ eventName: 'mute', sourceConnectorType: 1, playerId, data: { mute: false } })
+  }, [playerId, postToPlayer])
+
+  const setVolume = useCallback ((volume: number) => {
+    postToPlayer (
+	{ eventName: 'volumeChange', sourceConnectorType: 1, playerId, data: { volume } })
+  }, [playerId, postToPlayer])
+
+  const showComments = useCallback (() => {
+    postToPlayer (
+	{ eventName: 'commentVisibilityChange', sourceConnectorType: 1, playerId,
+	  data: { commentVisibility: true } })
+  }, [playerId, postToPlayer])
+
+  const hideComments = useCallback (() => {
+    postToPlayer (
+	{ eventName: 'commentVisibilityChange', sourceConnectorType: 1, playerId,
+	  data: { commentVisibility: false } })
+  }, [playerId, postToPlayer])
+
+  useImperativeHandle (
+      ref,
+      () => ({ play, pause, seek, mute, unmute, setVolume, showComments, hideComments }),
+      [play, pause, seek, mute, unmute, setVolume, showComments, hideComments])
 
   useEffect (() => {
-    const onMessage = (event: MessageEvent<any>) => {
+    const onMessage = (event: MessageEvent<NiconicoPlayerMessage>) => {
       if (!(iframeRef.current)
-	  || (event.source !== iframeRef.current.contentWindow))
+          || (event.source !== iframeRef.current.contentWindow)
-	return
+          || (event.origin !== EMBED_ORIGIN))
+        return
 
-      if (event.data.eventName === 'enterProgrammaticFullScreen')
+      const data = event.data
-	setFullScreen (true)
+
-      else if (event.data.eventName === 'exitProgrammaticFullScreen')
+      if (!(data)
-	setFullScreen (false)
+	  || typeof data !== 'object'
+	  || !('eventName' in data))
+        return
+
+      if (('playerId' in data)
+	  && data.playerId
+	  && data.playerId !== playerId)
+        return
+
+      if (data.eventName === 'enterProgrammaticFullScreen')
+	{
+	  setFullScreen (true)
+	  return
+	}
+
+      if (data.eventName === 'exitProgrammaticFullScreen')
+	{
+	  setFullScreen (false)
+	  return
+	}
+
+      if (data.eventName === 'loadComplete')
+	{
+	  onLoadComplete?.(data.data.videoInfo)
+	  return
+	}
+
+      if (data.eventName === 'playerMetadataChange')
+	{
+	  onMetadataChange?.(data.data)
+	  return
+	}
+
+      if (data.eventName === 'error')
+        console.error ('niconico player error:', data)
     }
 
     addEventListener ('message', onMessage)
 
     return () => removeEventListener ('message', onMessage)
-  }, [])
+  }, [onLoadComplete, onMetadataChange, playerId])
 
-  useLayoutEffect(() => {
+  useLayoutEffect (() => {
     if (!(fullScreen))
       return
 
     const initialScrollX = scrollX
     const initialScrollY = scrollY
-    let timer: NodeJS.Timeout
+    let timer: ReturnType<typeof setTimeout>
     let ended = false
 
     const pollingResize = () => {
       if (ended)
-	return
+        return
 
-      const landscape = innerWidth >= innerHeight
+      const isLandscape = innerWidth >= innerHeight
-      const windowWidth = `${landscape ? innerWidth : innerHeight}px`
+      const windowWidth = `${ isLandscape ? innerWidth : innerHeight }px`
-      const windowHeight = `${landscape ? innerHeight : innerWidth}px`
+      const windowHeight = `${ isLandscape ? innerHeight : innerWidth }px`
 
-      setLandscape (landscape)
+      setLandscape (isLandscape)
       setScreenWidth (windowWidth)
       setScreenHeight (windowHeight)
       timer = setTimeout (startPollingResize, 200)
@@ -80,9 +206,9 @@ export default ((props: Props) => {
 
     const startPollingResize = () => {
       if (requestAnimationFrame)
-	requestAnimationFrame (pollingResize)
+        requestAnimationFrame (pollingResize)
       else
-	pollingResize ()
+        pollingResize ()
     }
 
     startPollingResize ()
@@ -97,15 +223,17 @@ export default ((props: Props) => {
   useEffect (() => {
     if (!(fullScreen))
       return
+
     scrollTo (0, 0)
   }, [screenWidth, screenHeight, fullScreen])
 
   return (
-      <iframe ref={iframeRef}
+      <iframe
-	      src={src}
+	  ref={iframeRef}
-	      width={width}
+	  src={src}
-	      height={height}
+	  width={width}
-	      style={margedStyle}
+	  height={height}
-	      allowFullScreen
+	  style={margedStyle}
-	      allow="autoplay"/>)
+	  allowFullScreen
-}) satisfies FC<Props>
+	  allow="autoplay"/>)
+})

frontend/src/components/PostEmbed.tsx

@@ -4,14 +4,18 @@ import YoutubeEmbed from 'react-youtube'
 import NicoViewer from '@/components/NicoViewer'
 import TwitterEmbed from '@/components/TwitterEmbed'
 
-import type { FC } from 'react'
+import type { FC, RefObject } from 'react'
 
-import type { Post } from '@/types'
+import type { NiconicoMetadata, NiconicoVideoInfo, NiconicoViewerHandle, Post } from '@/types'
 
-type Props = { post: Post }
+type Props = {
+    ref?:               RefObject<NiconicoViewerHandle | null>
+    post:               Post
+    onLoadComplete?:    (info: NiconicoVideoInfo) => void
+    onMetadataChange?:  (meta: NiconicoMetadata) => void }
 
 
-export default (({ post }: Props) => {
+export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
   const url = new URL (post.url)
 
   switch (url.hostname.split ('.').slice (-2).join ('.'))
@@ -24,7 +28,14 @@ export default (({ post }: Props) => {
 
       const [videoId] = mVideoId
 
-      return <NicoViewer id={videoId} width={640} height={360}/>
+      return (
+	  <NicoViewer
+	      ref={ref}
+	      id={videoId}
+	      width={640}
+	      height={360}
+	      onLoadComplete={onLoadComplete}
+	      onMetadataChange={onMetadataChange}/>)
     }
 
   case 'twitter.com':

frontend/src/components/PrefetchLink.tsx

@@ -71,7 +71,8 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 	  || ev.metaKey
 	  || ev.ctrlKey
 	  || ev.shiftKey
-	  || ev.altKey)
+	  || ev.altKey
+	  || (rest.target && rest.target !== '_self'))
 	return
 
       ev.preventDefault ()

frontend/src/components/SortHeader.tsx

@@ -0,0 +1,31 @@
+import { useLocation } from 'react-router-dom'
+
+import PrefetchLink from '@/components/PrefetchLink'
+
+
+export default <T extends string,>({ by, label, currentOrder, defaultDirection }: {
+    by:               T
+    label:            string
+    currentOrder:     `${ T }:${ 'asc' | 'desc' }`
+    defaultDirection: Record<T, 'asc' | 'desc'> }) => {
+  const [fld, dir] = currentOrder.split (':')
+
+  const location = useLocation ()
+  const qs = new URLSearchParams (location.search)
+  const nextDir =
+      (by === fld)
+      ? (dir === 'asc' ? 'desc' : 'asc')
+      : (defaultDirection[by] || 'desc')
+  qs.set ('order', `${ by }:${ nextDir }`)
+  qs.set ('page', '1')
+
+  return (
+      <PrefetchLink
+	  className="text-inherit visited:text-inherit hover:text-inherit"
+	  to={`${ location.pathname }?${ qs.toString () }`}>
+	<span className="font-bold">
+	  {label}
+	  {by === fld && (dir === 'asc' ? ' ▲' : ' ▼')}
+	</span>
+      </PrefetchLink>)
+}

frontend/src/components/TagDetailSidebar.tsx

@@ -6,8 +6,9 @@ import { DndContext,
 	 useSensor,
 	 useSensors } from '@dnd-kit/core'
 import { restrictToWindowEdges } from '@dnd-kit/modifiers'
-import { AnimatePresence, motion } from 'framer-motion'
+import { useQueryClient } from '@tanstack/react-query'
-import { useEffect, useRef, useState } from 'react'
+import { motion } from 'framer-motion'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 import DraggableDroppableTagRow from '@/components/DraggableDroppableTagRow'
 import PrefetchLink from '@/components/PrefetchLink'
@@ -17,8 +18,9 @@ import SectionTitle from '@/components/common/SectionTitle'
 import SubsectionTitle from '@/components/common/SubsectionTitle'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { toast } from '@/components/ui/use-toast'
-import { CATEGORIES } from '@/consts'
+import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { apiDelete, apiGet, apiPatch, apiPost } from '@/lib/api'
+import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { dateString, originalCreatedAtString } from '@/lib/utils'
 
 import type { DragEndEvent } from '@dnd-kit/core'
@@ -35,28 +37,27 @@ const renderTagTree = (
     path:             string,
     suppressClickRef: MutableRefObject<boolean>,
     parentTagId?:     number,
+    sp?:              boolean,
 ): ReactNode[] => {
   const key = `${ path }-${ tag.id }`
 
   const self = (
-      <motion.li
+      <li key={key} className="mb-1">
-	  key={key}
-	  layout
-	  transition={{ duration: .2, ease: 'easeOut' }}
-	  className="mb-1">
 	<DraggableDroppableTagRow
 	    tag={tag}
 	    nestLevel={nestLevel}
 	    pathKey={key}
 	    parentTagId={parentTagId}
-	    suppressClickRef={suppressClickRef}/>
+	    suppressClickRef={suppressClickRef}
-      </motion.li>)
+	    sp={sp}/>
+      </li>)
 
   return [
       self,
       ...((tag.children
 	   ?.sort ((a, b) => a.name < b.name ? -1 : 1)
-	   .flatMap (child => renderTagTree (child, nestLevel + 1, key, suppressClickRef, tag.id)))
+	   .flatMap (child =>
+	      renderTagTree (child, nestLevel + 1, key, suppressClickRef, tag.id, sp)))
 	  ?? [])]
 }
 
@@ -147,14 +148,34 @@ const DropSlot = ({ cat }: { cat: Category }) => {
 }
 
 
-type Props = { post: Post | null }
+type Props = { post: Post; sp?: boolean }
 
 
-export default (({ post }: Props) => {
+export default (({ post, sp }: Props) => {
+  sp = Boolean (sp)
+
+  const qc = useQueryClient ()
+
+  const baseTags = useMemo<TagByCategory> (() => {
+    const tagsTmp = { } as TagByCategory
+
+    for (const tag of post.tags)
+      {
+	if (!(tag.category in tagsTmp))
+	  tagsTmp[tag.category] = []
+	tagsTmp[tag.category].push (tag)
+      }
+
+    for (const cat of Object.keys (tagsTmp) as (keyof typeof tagsTmp)[])
+      tagsTmp[cat].sort ((tagA: Tag, tagB: Tag) => tagA.name < tagB.name ? -1 : 1)
+
+    return tagsTmp
+  }, [post])
+
   const [activeTagId, setActiveTagId] = useState<number | null> (null)
   const [dragging, setDragging] = useState (false)
   const [saving, setSaving] = useState (false)
-  const [tags, setTags] = useState ({ } as TagByCategory)
+  const [tags, setTags] = useState (baseTags)
 
   const suppressClickRef = useRef (false)
 
@@ -163,10 +184,9 @@ export default (({ post }: Props) => {
       useSensor (TouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } }))
 
   const reloadTags = async (): Promise<void> => {
-    if (!(post))
-      return
-
     setTags (buildTagByCategory (await apiGet<Post> (`/posts/${ post.id }`)))
+    qc.invalidateQueries ({ queryKey: postsKeys.root })
+    qc.invalidateQueries ({ queryKey: tagsKeys.root })
   }
 
   const onDragEnd = async (e: DragEndEvent) => {
@@ -255,33 +275,9 @@ export default (({ post }: Props) => {
     }
   }
 
-  const categoryNames: Record<Category, string> = {
-      deerjikist: 'ニジラー',
-      meme:       '原作・ネタ元・ミーム等',
-      character:  'キャラクター',
-      general:    '一般',
-      material:   '素材',
-      meta:       'メタタグ',
-      nico:       'ニコニコタグ' }
-
   useEffect (() => {
-    if (!(post))
+    setTags (baseTags)
-      return
+  }, [baseTags])
-
-    const tagsTmp = { } as TagByCategory
-
-    for (const tag of post.tags)
-      {
-	if (!(tag.category in tagsTmp))
-	  tagsTmp[tag.category] = []
-	tagsTmp[tag.category].push (tag)
-      }
-
-    for (const cat of Object.keys (tagsTmp) as (keyof typeof tagsTmp)[])
-      tagsTmp[cat].sort ((tagA: Tag, tagB: Tag) => tagA.name < tagB.name ? -1 : 1)
-
-    setTags (tagsTmp)
-  }, [post])
 
   return (
       <SidebarComponent>
@@ -314,60 +310,57 @@ export default (({ post }: Props) => {
 	      document.body.style.userSelect = ''
 	    }}
 	    modifiers={[restrictToWindowEdges]}>
-	  <motion.div key={post?.id ?? 0} layout>
+	  {CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && (
-	    {CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && (
+	      <div className="my-3" key={cat}>
-		<motion.div layout className="my-3" key={cat}>
+		<SubsectionTitle>
-		  <SubsectionTitle>{categoryNames[cat]}</SubsectionTitle>
+		  <motion.div layoutId={`tag-${ sp ? 'sp-' : '' }${ cat }`}>
+		    {CATEGORY_NAMES[cat]}
+		  </motion.div>
+		</SubsectionTitle>
 
-		  <motion.ul layout>
+		<ul>
-		    <AnimatePresence initial={false}>
+		  {(tags[cat] ?? []).flatMap (tag => (
-		      {(tags[cat] ?? []).flatMap (tag => (
+		      renderTagTree (tag, 0, `cat-${ cat }`, suppressClickRef, undefined, sp)))}
-			  renderTagTree (tag, 0, `cat-${ cat }`, suppressClickRef, undefined)))}
+		  <DropSlot cat={cat}/>
-		      <DropSlot cat={cat}/>
+		</ul>
-		    </AnimatePresence>
+	      </div>))}
-		  </motion.ul>
+	  {post && (
-		</motion.div>))}
+	      <motion.div layoutId={`post-info-${ sp }`}>
-	    {post && (
+		<SectionTitle>情報</SectionTitle>
-		<div>
+		<ul>
-		  <SectionTitle>情報</SectionTitle>
+		  <li>Id.: {post.id}</li>
-		  <ul>
+		  <li>
-		    <li>Id.: {post.id}</li>
+		    <>耕作者: </>
-		    {/* TODO: uploadedUser の取得を対応したらコメント外す */}
+		    {post.uploadedUser
-		    {/*
+		     ? (
-		    <li>
+			<PrefetchLink to={`/users/${ post.uploadedUser.id }`}>
-		      <>耕作者: </>
+			  {post.uploadedUser.name || '名もなきニジラー'}
-		      {post.uploadedUser
+			</PrefetchLink>)
-		       ? (
+		     : 'bot操作'}
-			  <PrefetchLink to={`/users/${ post.uploadedUser.id }`}>
+		  </li>
-			    {post.uploadedUser.name || '名もなきニジラー'}
+		  <li>耕作日時: {dateString (post.createdAt)}</li>
-			  </PrefetchLink>)
+		  <li>
-		       : 'bot操作'}
+		    <>リンク: </>
-		    </li>
+		    <a
-		    */}
+			className="break-all"
-		    <li>耕作日時: {dateString (post.createdAt)}</li>
+			href={post.url}
-		    <li>
+			target="_blank"
-		      <>リンク: </>
+			rel="noopener noreferrer nofollow">
-		      <a
+		      {post.url}
-			  className="break-all"
+		    </a>
-			  href={post.url}
+		  </li>
-			  target="_blank"
+		  <li>
-			  rel="noopener noreferrer nofollow">
+		    <>オリジナルの投稿日時: </>
-			{post.url}
+		    {originalCreatedAtString (post.originalCreatedFrom,
-		      </a>
+					      post.originalCreatedBefore)}
-		    </li>
+		  </li>
-		    <li>
+		  <li>
-		      <>オリジナルの投稿日時: </>
+		    <PrefetchLink to={`/posts/changes?id=${ post.id }`}>
-		      {originalCreatedAtString (post.originalCreatedFrom,
+		      履歴
-						post.originalCreatedBefore)}
+		    </PrefetchLink>
-		    </li>
+		  </li>
-		    <li>
+		</ul>
-		      <PrefetchLink to={`/posts/changes?id=${ post.id }`}>
+	      </motion.div>)}
-			履歴
-		      </PrefetchLink>
-		    </li>
-		  </ul>
-		</div>)}
-	  </motion.div>
 
 	  <DragOverlay adjustScale={false}>
 	    <div className="pointer-events-none">

frontend/src/components/TagLink.tsx

@@ -1,8 +1,5 @@
-import { useEffect, useState } from 'react'
-
 import PrefetchLink from '@/components/PrefetchLink'
 import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts'
-import { apiGet } from '@/lib/api'
 import { cn } from '@/lib/utils'
 
 import type { ComponentProps, FC, HTMLAttributes } from 'react'
@@ -13,8 +10,7 @@ type CommonProps = {
     tag:        Tag
     nestLevel?: number
     withWiki?:  boolean
-    withCount?: boolean
+    withCount?: boolean }
-    prefetch?:  boolean }
 
 type PropsWithLink =
     & CommonProps
@@ -36,37 +32,7 @@ export default (({ tag,
 		   linkFlg   = true,
 		   withWiki  = true,
 		   withCount = true,
-		   prefetch  = false,
 		   ...props }: Props) => {
-  const [havingWiki, setHavingWiki] = useState (true)
-
-  const wikiExists = async (tag: Tag) => {
-    if ('hasWiki' in tag)
-      {
-	setHavingWiki (tag.hasWiki)
-	return
-      }
-
-    const tagName = (tag as Tag).name
-
-    try
-    {
-      await apiGet (`/wiki/title/${ encodeURIComponent (tagName) }/exists`)
-      setHavingWiki (true)
-    }
-    catch
-    {
-      setHavingWiki (false)
-    }
-  }
-
-  useEffect (() => {
-    if (!(linkFlg) || !(withWiki))
-      return
-
-    wikiExists (tag)
-  }, [tag.name, linkFlg, withWiki])
-
   const spanClass = cn (
       `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
       `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
@@ -79,19 +45,39 @@ export default (({ tag,
       <>
 	{(linkFlg && withWiki) && (
 	    <span className="mr-1">
-	      {havingWiki
+	      {(tag.materialId != null || tag.hasWiki)
 	       ? (
-		  <PrefetchLink to={`/wiki/${ encodeURIComponent (tag.name) }`}
+		  tag.materialId == null
-			className={linkClass}>
+		  ? (
-		    ?
+		      <PrefetchLink
-		  </PrefetchLink>)
+			  to={`/wiki/${ encodeURIComponent (tag.name) }`}
+			  className={linkClass}>
+			?
+		      </PrefetchLink>)
+		  : (
+		      <PrefetchLink
+			  to={`/materials/${ tag.materialId }`}
+			  className={linkClass}>
+			?
+		      </PrefetchLink>))
 	       : (
-		  <PrefetchLink to={`/wiki/${ encodeURIComponent (tag.name) }`}
+		  ['character', 'material'].includes (tag.category)
-			className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
+		  ? (
-				   dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
+		      <PrefetchLink
-			title={`${ tag.name } Wiki が存在しません．`}>
+			  to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}
-		    !
+			  className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
-		  </PrefetchLink>)}
+				     dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
+			  title={`${ tag.name } 素材情報が存在しません．`}>
+			!
+		      </PrefetchLink>)
+		  : (
+		      <PrefetchLink
+			  to={`/wiki/${ encodeURIComponent (tag.name) }`}
+			  className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
+				     dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
+			  title={`${ tag.name } Wiki が存在しません．`}>
+			!
+		      </PrefetchLink>))}
 	    </span>)}
 	{nestLevel > 0 && (
 	    <span
@@ -108,19 +94,12 @@ export default (({ tag,
 	    </>)}
 	{linkFlg
 	 ? (
-	    prefetch
+	    <PrefetchLink
-	    ? <PrefetchLink
+		to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-		  to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
+		className={linkClass}
-		  className={linkClass}
+		{...props}>
-		  {...props}>
+	      {tag.name}
-		{tag.name}
+	    </PrefetchLink>)
-	      </PrefetchLink>
-	    : <PrefetchLink
-		  to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-		  className={linkClass}
-		  {...props}>
-		{tag.name}
-	      </PrefetchLink>)
 	 : (
 	    <span className={spanClass}
 		  {...props}>

frontend/src/components/TagSearch.tsx

@@ -56,8 +56,11 @@ export default (() => {
       if (activeIndex < 0)
 	break
       ev.preventDefault ()
-      const selected = suggestions[activeIndex]
+      {
-      selected && handleTagSelect (selected)
+	const selected = suggestions[activeIndex]
+	if (selected)
+	  handleTagSelect (selected)
+      }
       break
 
     case 'Escape':
@@ -67,14 +70,25 @@ export default (() => {
     }
     if (ev.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
       {
-	navigate (`/posts?${ (new URLSearchParams ({ tags: search })).toString () }`)
+	const parts = search.split (' ')
+	const match = parts.map (t => t.toLowerCase ()).includes ('type:or') ? 'any' : 'all'
+	navigate (`/posts?${
+	    (new URLSearchParams ({
+		tags: parts.map (t => t.toLowerCase ())
+			   .filter (t => t !== 'type:or')
+			   .join (' '),
+		match }))
+	    .toString () }`)
 	setSuggestionsVsbl (false)
       }
   }
 
   const handleTagSelect = (tag: Tag) => {
     const parts = search.split (' ')
-    parts[parts.length - 1] = tag.name
+    parts[parts.length - 1] = (
+	(parts[parts.length - 1].slice(0, 4).toLowerCase () === 'not:')
+	? ('not:' + tag.name)
+	: tag.name)
     setSearch (parts.join (' ') + ' ')
     setSuggestions ([])
     setActiveIndex (-1)
@@ -82,7 +96,8 @@ export default (() => {
 
   useEffect (() => {
     const query = new URLSearchParams (location.search)
-    const tagsQuery = query.get ('tags') ?? ''
+    const anyFlg = query.get ('match') === 'any'
+    const tagsQuery = `${ query.get ('tags') ?? '' }${ anyFlg ? ' type:or' : '' }`
     setSearch (tagsQuery)
   }, [location.search])
 

frontend/src/components/TagSidebar.tsx

@@ -65,30 +65,31 @@ export default (({ posts, onClick }: Props) => {
 	  {CATEGORIES.flatMap (cat => cat in tags ? (
 	      tags[cat].map (tag => (
 		  <li key={tag.id} className="mb-1">
-		    <TagLink tag={tag} prefetch onClick={onClick}/>
+		    <motion.div layoutId={`tag-${ tag.id }`}>
+		      <TagLink tag={tag} onClick={onClick}/>
+		    </motion.div>
 		  </li>))) : [])}
 	</ul>
 	<SectionTitle>関聯</SectionTitle>
-	{posts.length > 0 && (
+	<a href="#"
-	    <a href="#"
+	   onClick={ev => {
-	       onClick={ev => {
+	     ev.preventDefault ()
-		 ev.preventDefault ()
+	     void ((async () => {
-		 void ((async () => {
+	       try
-		   try
+	       {
-		   {
+		 const data = await apiGet<Post> ('/posts/random',
-		     const data = await apiGet<Post> ('/posts/random',
+		     { params: { tags: tagsQuery.split (' ').filter (e => e !== '').join (' '),
-			 { params: { tags: tagsQuery.split (' ').filter (e => e !== '').join (' '),
+				 match: (anyFlg ? 'any' : 'all') } })
-				     match: (anyFlg ? 'any' : 'all') } })
+		 navigate (`/posts/${ data.id }`)
-		     navigate (`/posts/${ data.id }`)
+	       }
-		   }
+	       catch
-		   catch
+	       {
-		   {
+		 ;
-		     ;
+	       }
-		   }
+	     }) ())
-		 }) ())
+	   }}>
-	       }}>
+	  ランダム
-	      ランダム
+	</a>
-	    </a>)}
       </>)
 
   return (
@@ -96,23 +97,19 @@ export default (({ posts, onClick }: Props) => {
 	<TagSearch/>
 
 	<div className="hidden md:block mt-4">
-	  {TagBlock}
+	  {posts.length > 0 && TagBlock}
 	</div>
 
 	<AnimatePresence initial={false}>
 	  {tagsVsbl && (
 	      <motion.div
 		  key="sptags"
-		  className="md:hidden mt-4"
+		  className="md:hidden overflow-hidden"
-		  variants={{ hidden:   { clipPath: 'inset(0 0 100% 0)',
+		  initial={{ height: 0 }}
-					  height:   0 },
+		  animate={{ height: 'auto' }}
-			      visible:  { clipPath: 'inset(0 0 0% 0)',
+		  exit={{ height: 0 }}
-					  height:   'auto'} }}
-		  initial="hidden"
-		  animate="visible"
-		  exit="hidden"
 		  transition={{ duration: .2, ease: 'easeOut' }}>
-		{TagBlock}
+		{posts.length > 0 && TagBlock}
 	      </motion.div>)}
 	</AnimatePresence>
 

frontend/src/components/TopNav.tsx

@@ -70,15 +70,27 @@ export default (({ user }: Props) => {
       { name: '広場', to: '/posts', subMenu: [
 	  { name: '一覧', to: '/posts' },
 	  { name: '検索', to: '/posts/search' },
-	  { name: '投稿追加', to: '/posts/new' },
+	  { name: '追加', to: '/posts/new' },
 	  { name: '履歴', to: '/posts/changes' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
       { name: 'タグ', to: '/tags', subMenu: [
-	  { name: 'タグ一覧', to: '/tags', visible: false },
+	  { name: 'マスタ', to: '/tags' },
 	  { name: '別名タグ', to: '/tags/aliases', visible: false },
 	  { name: '上位タグ', to: '/tags/implications', visible: false },
 	  { name: 'ニコニコ連携', to: '/tags/nico' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' }] },
+      // { name: '素材', to: '/materials', subMenu: [
+      //     { name: '一覧', to: '/materials' },
+      //     { name: '検索', to: '/materials/search', visible: false }, 
+      //     { name: '追加', to: '/materials/new' },
+      //     { name: '履歴', to: '/materials/changes', visible: false },
+      //     { name: 'ヘルプ', to: '/wiki/ヘルプ:素材集' }] },
+      { name: '上映会', to: '/theatres/1', base: '/theatres', subMenu: [
+          { name: <>第&thinsp;1&thinsp;会場</>, to: '/theatres/1' },
+          { name: 'CyTube', to: '//cytube.mm428.net/r/deernijika' },
+	  { name: <>ニジカ放送局第&thinsp;1&thinsp;チャンネル</>,
+	    to: '//www.youtube.com/watch?v=DCU3hL4Uu6A' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:上映会' }] },
       { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
 	  { name: '検索', to: '/wiki' },
 	  { name: '新規', to: '/wiki/new' },
@@ -89,7 +101,7 @@ export default (({ user }: Props) => {
 	    visible: wikiPageFlg },
 	  { name: '履歴', to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
 	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`, visible: wikiPageFlg }] },
-      { name: 'ユーザ', to: '/users', subMenu: [
+      { name: 'ユーザ', to: '/users/settings', subMenu: [
 	  { name: '一覧', to: '/users', visible: false },
 	  { name: 'お前', to: `/users/${ user?.id }`, visible: false },
 	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] }]
@@ -133,9 +145,9 @@ export default (({ user }: Props) => {
 
   return (
       <>
-	<nav className="px-3 flex justify-between items-center w-full min-h-[48px]
+	<nav className="px-3 flex justify-between items-center w-full
 			bg-yellow-200 dark:bg-red-975 md:bg-yellow-50">
-	  <div className="flex items-center gap-2 h-full">
+	  <div className="flex items-center gap-2 h-12">
 	    <PrefetchLink
 		to="/posts"
 		className="mx-4 text-xl font-bold text-pink-600 hover:text-pink-400
@@ -146,13 +158,13 @@ export default (({ user }: Props) => {
 	      ぼざクリ タグ広場
 	    </PrefetchLink>
 
-	    <div ref={navRef} className="relative hidden md:flex h-full items-center">
+	    <div ref={navRef} className="relative hidden md:flex h-12 items-center">
 	      <div aria-hidden
-		   className={cn ('absolute top-1/2 -translate-y-1/2 h-full',
+		   className={cn ('absolute inset-y-0 h-12',
 				  'bg-yellow-200 dark:bg-red-950',
 				  'transition-[transform,width] duration-200 ease-out')}
 		   style={{ width:      hl.width,
-			    transform:  `translate(${ hl.left }px, -50%)`,
+			    transform:  `translateX(${ hl.left }px)`,
 			    opacity:    hl.visible ? 1 : 0 }}/>
 
 	      {menu.map ((item, i) => (
@@ -206,6 +218,7 @@ export default (({ user }: Props) => {
 		      <PrefetchLink
 			  key={`l-${ i }`}
 			  to={item.to}
+			  target={item.to.slice (0, 2) === '//' ? '_blank' : undefined}
 			  className="h-full flex items-center px-3">
 			{item.name}
 		      </PrefetchLink>)))}
@@ -272,6 +285,9 @@ export default (({ user }: Props) => {
 				      <PrefetchLink
 					  key={`sp-l-${ i }-${ j }`}
 					  to={subItem.to}
+					  target={subItem.to.slice (0, 2) === '//'
+						  ? '_blank'
+						  : undefined}
 					  className="w-full min-h-[36px] flex items-center pl-12">
 					{subItem.name}
 				      </PrefetchLink>)))}

frontend/src/components/common/Pagination.tsx

@@ -48,7 +48,7 @@ const getPages = (
 }
 
 
-export default (({ page, totalPages, siblingCount = 4 }) => {
+export default (({ page, totalPages, siblingCount = 3 }) => {
   const location = useLocation ()
 
   const buildTo = (p: number) => {
@@ -63,19 +63,65 @@ export default (({ page, totalPages, siblingCount = 4 }) => {
       <nav className="mt-4 flex justify-center" aria-label="Pagination">
 	<div className="flex items-center gap-2">
 	  {(page > 1)
-	   ? <PrefetchLink to={buildTo (page - 1)} aria-label="前のページ">&lt;</PrefetchLink>
+	   ? (
-	   : <span aria-hidden>&lt;</span>}
+	      <>
+		<PrefetchLink
+		    className="md:hidden p-2"
+		    to={buildTo (1)}
+		    aria-label="最初のページ">
+		  |&lt;
+		</PrefetchLink>
+		<PrefetchLink
+		    className="p-2"
+		    to={buildTo (page - 1)}
+		    aria-label="前のページ">
+		  &lt;
+		</PrefetchLink>
+	      </>)
+	   : (
+	      <>
+		<span className="md:hidden p-2" aria-hidden>
+		  |&lt;
+		</span>
+		<span className="p-2" aria-hidden>
+		  &lt;
+		</span>
+	      </>)}
 
 	  {pages.map ((p, idx) => (
 	      (p === '…')
-	      ? <span key={`dots-${ idx }`}>…</span>
+	      ? <span key={`dots-${ idx }`} className="hidden md:block p-2">…</span>
 	      : ((p === page)
-		 ? <span key={p} className="font-bold" aria-current="page">{p}</span>
+		 ? <span key={p} className="font-bold p-2" aria-current="page">{p}</span>
-		 : <PrefetchLink key={p} to={buildTo (p)}>{p}</PrefetchLink>)))}
+		 : (
+		    <PrefetchLink
+			key={p}
+			className="hidden md:block p-2"
+			to={buildTo (p)}>
+		      {p}
+		    </PrefetchLink>))))}
 
 	  {(page < totalPages)
-	   ? <PrefetchLink to={buildTo (page + 1)} aria-label="次のページ">&gt;</PrefetchLink>
+	   ? (
-	   : <span aria-hidden>&gt;</span>}
+	      <>
+		<PrefetchLink
+		    className="p-2"
+		    to={buildTo (page + 1)}
+		    aria-label="次のページ">
+		  &gt;
+		</PrefetchLink>
+		<PrefetchLink
+		    className="md:hidden p-2"
+		    to={buildTo (totalPages)}
+		    aria-label="最後のページ">
+		  &gt;|
+		</PrefetchLink>
+	      </>)
+	   : (
+	      <>
+		<span className="p-2" aria-hidden>&gt;</span>
+		<span className="md:hidden p-2" aria-hidden>&gt;|</span>
+	      </>)}
 	</div>
       </nav>)
 }) satisfies FC<Props>

frontend/src/components/common/TagInput.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+
+import TagSearchBox from '@/components/TagSearchBox'
+import { apiGet } from '@/lib/api'
+
+import type { FC, ChangeEvent, KeyboardEvent } from 'react'
+
+import type { Tag } from '@/types'
+
+
+type Props = {
+    value:      string
+    setValue:   (value: string) => void }
+
+export default (({ value, setValue }: Props) => {
+  const [activeIndex, setActiveIndex] = useState (-1)
+  const [suggestions, setSuggestions] = useState<Tag[]> ([])
+  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
+
+  // TODO: TagSearch からのコピペのため，共通化を考へる．
+  const whenChanged = async (ev: ChangeEvent<HTMLInputElement>) => {
+    setValue (ev.target.value)
+
+    const q = ev.target.value.trim ().split (' ').at (-1)
+    if (!(q))
+      {
+	setSuggestions ([])
+	return
+      }
+
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
+    setSuggestions (data.filter (t => t.postCount > 0))
+    if (suggestions.length > 0)
+      setSuggestionsVsbl (true)
+  }
+
+  // TODO: TagSearch からのコピペのため，共通化を考へる．
+  const handleTagSelect = (tag: Tag) => {
+    const parts = value?.split (' ')
+    parts[parts.length - 1] = tag.name
+    setValue (parts.join (' ') + ' ')
+    setSuggestions ([])
+    setActiveIndex (-1)
+  }
+
+  // TODO: TagSearch からのコピペのため，共通化を考へる．
+  const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
+    switch (ev.key)
+    {
+    case 'ArrowDown':
+      ev.preventDefault ()
+      setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
+      setSuggestionsVsbl (true)
+      break
+
+    case 'ArrowUp':
+      ev.preventDefault ()
+      setActiveIndex (i => Math.max (i - 1, -1))
+      setSuggestionsVsbl (true)
+      break
+
+    case 'Enter':
+      if (activeIndex < 0)
+	break
+      ev.preventDefault ()
+      const selected = suggestions[activeIndex]
+      selected && handleTagSelect (selected)
+      break
+
+    case 'Escape':
+      ev.preventDefault ()
+      setSuggestionsVsbl (false)
+      break
+    }
+    if (ev.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
+      {
+	setSuggestionsVsbl (false)
+      }
+  }
+
+  return (
+      <div className="relative">
+	<input
+	    type="text"
+	    value={value}
+	    onChange={whenChanged}
+	    onFocus={() => setSuggestionsVsbl (true)}
+	    onBlur={() => setSuggestionsVsbl (false)}
+	    onKeyDown={handleKeyDown}
+	    className="w-full border p-2 rounded"/>
+	<TagSearchBox
+	    suggestions={
+		suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
+	    activeIndex={activeIndex}
+	    onSelect={handleTagSelect}/>
+      </div>)
+}) satisfies FC<Props>

frontend/src/components/layout/MainArea.tsx

@@ -8,6 +8,7 @@ type Props = {
 
 
 export default (({ children, className }: Props) => (
-    <main className={cn ('flex-1 overflow-y-auto p-4', className)}>
+    <main className={cn ('flex-1 overflow-y-auto p-4 md:h-[calc(100dvh-88px)]',
+			 className)}>
       {children}
     </main>)) satisfies FC<Props>

frontend/src/components/layout/SidebarComponent.tsx

@@ -1,9 +1,29 @@
-import React from 'react'
+import { Helmet } from 'react-helmet-async'
 
-type Props = { children: React.ReactNode }
+import type { FC, ReactNode } from 'react'
+
+type Props = { children: ReactNode }
 
 
-export default ({ children }: Props) => (
+export default (({ children }: Props) => (
-    <div className="p-4 w-full md:w-64 md:h-full">
+    <div
+	className="p-4 w-full md:w-64 md:h-full
+		   md:h-[calc(100dvh-88px)] md:overflow-y-auto
+		   sidebar">
+      <Helmet>
+	<style>
+	  {`
+	      .sidebar
+	      {
+		direction: rtl;
+	      }
+
+	      .sidebar > *
+	      {
+		direction: ltr;
+	      }`}
+	</style>
+      </Helmet>
+
       {children}
-    </div>)
+    </div>)) satisfies FC<Props>

frontend/src/consts.ts

@@ -13,6 +13,16 @@ export const CATEGORIES = [
     'nico',
     ] as const
 
+export const CATEGORY_NAMES: Record<Category, string> = {
+    deerjikist: 'ニジラー',
+    meme:       '原作・ネタ元・ミーム等',
+    character:  'キャラクター',
+    general:    '一般',
+    material:   '素材',
+    meta:       'メタタグ',
+    nico:       'ニコニコタグ',
+    } as const
+
 export const FETCH_POSTS_ORDER_FIELDS = [
     'title',
     'url',

frontend/src/index.css

@@ -46,10 +46,12 @@ a
 body
 {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
-  min-height: 100vh;
+}
+
+#root
+{
+  min-height: 100dvh;
 }
 
 h1

frontend/src/lib/posts.ts

@@ -5,7 +5,7 @@ import type { FetchPostsParams, Post, PostTagChange } from '@/types'
 
 export const fetchPosts = async (
     { url, title, tags, match, createdFrom, createdTo, updatedFrom, updatedTo,
-      originalCreatedFrom, originalCreatedTo, page, limit, order }: FetchPostsParams
+      originalCreatedFrom, originalCreatedTo, page, limit, order }: FetchPostsParams,
 ): Promise<{
     posts:  Post[]
     count:  number }> =>
@@ -29,14 +29,17 @@ export const fetchPost = async (id: string): Promise<Post> => await apiGet (`/po
 
 
 export const fetchPostChanges = async (
-    { id, page, limit }: {
+    { id, tag, page, limit }: {
 	id?:    string
+	tag?:   string
 	page:   number
 	limit:  number },
 ): Promise<{
     changes:  PostTagChange[]
     count:    number }> =>
-	await apiGet ('/posts/changes', { params: { ...(id && { id }), page, limit } })
+	await apiGet ('/posts/changes', { params: { ...(id && { id }),
+						    ...(tag && { tag }),
+						    page, limit } })
 
 
 export const toggleViewedFlg = async (id: string, viewed: boolean): Promise<void> => {

frontend/src/lib/prefetchers.ts

@@ -3,12 +3,12 @@ import { match } from 'path-to-regexp'
 
 import { fetchPost, fetchPosts, fetchPostChanges } from '@/lib/posts'
 import { postsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
-import { fetchTagByName } from '@/lib/tags'
+import { fetchTagByName, fetchTag, fetchTags } from '@/lib/tags'
 import { fetchWikiPage,
 	 fetchWikiPageByTitle,
 	 fetchWikiPages } from '@/lib/wiki'
 
-import type { FetchPostsOrder } from '@/types'
+import type { Category, FetchPostsOrder, FetchTagsOrder } from '@/types'
 
 type Prefetcher = (qc: QueryClient, url: URL) => Promise<void>
 
@@ -122,12 +122,50 @@ const prefetchPostShow: Prefetcher = async (qc, url) => {
 
 const prefetchPostChanges: Prefetcher = async (qc, url) => {
   const id = url.searchParams.get ('id')
+  const tag = url.searchParams.get ('tag')
   const page = Number (url.searchParams.get ('page') || 1)
   const limit = Number (url.searchParams.get ('limit') || 20)
 
+  if (tag)
+    {
+      await qc.prefetchQuery ({
+	  queryKey: tagsKeys.show (tag),
+	  queryFn: () => fetchTag (tag) })
+    }
+
   await qc.prefetchQuery ({
-      queryKey: postsKeys.changes ({ ...(id && { id }), page, limit }),
+      queryKey: postsKeys.changes ({ ...(id && { id }),
-      queryFn:  () => fetchPostChanges ({ ...(id && { id }), page, limit }) })
+				     ...(tag && { tag }),
+				     page, limit }),
+      queryFn:  () => fetchPostChanges ({ ...(id && { id }),
+					  ...(tag && { tag }),
+					  page, limit }) })
+}
+
+
+const prefetchTagsIndex: Prefetcher = async (qc, url) => {
+  const postRaw = url.searchParams.get ('post')
+  const post = postRaw ? Number (postRaw) : null
+  const name = url.searchParams.get ('name') ?? ''
+  const category = (url.searchParams.get ('category') || null) as Category | null
+  const postCountGTE = Number (url.searchParams.get ('post_count_gte') || 1)
+  const postCountLTERaw = url.searchParams.get ('post_count_lte')
+  const postCountLTE = postCountLTERaw ? Number (postCountLTERaw) : null
+  const createdFrom = url.searchParams.get ('created_from') ?? ''
+  const createdTo = url.searchParams.get ('created_to') ?? ''
+  const updatedFrom = url.searchParams.get ('updated_from') ?? ''
+  const updatedTo = url.searchParams.get ('updated_to') ?? ''
+  const page = Number (url.searchParams.get ('page') || 1)
+  const limit = Number (url.searchParams.get ('limit') || 20)
+  const order = (url.searchParams.get ('order') ?? 'post_count:desc') as FetchTagsOrder
+
+  const keys = {
+      post, name, category, postCountGTE, postCountLTE, createdFrom, createdTo,
+      updatedFrom, updatedTo, page, limit, order }
+
+  await qc.prefetchQuery ({
+      queryKey: tagsKeys.index (keys),
+      queryFn:  () => fetchTags (keys) })
 }
 
 
@@ -141,7 +179,8 @@ export const routePrefetchers: { test: (u: URL) => boolean; run: Prefetcher }[]
     { test: u => u.pathname === '/wiki', run: prefetchWikiPagesIndex },
     { test: u => (!(['/wiki/new', '/wiki/changes'].includes (u.pathname))
 		  && Boolean (mWiki (u.pathname))),
-      run: prefetchWikiPageShow }]
+      run: prefetchWikiPageShow },
+    { test: u => u.pathname === '/tags', run: prefetchTagsIndex }]
 
 
 export const prefetchForURL = async (qc: QueryClient, urlLike: string): Promise<void> => {

frontend/src/lib/queryKeys.ts

@@ -1,16 +1,17 @@
-import type { FetchPostsParams } from '@/types'
+import type { FetchPostsParams, FetchTagsParams } from '@/types'
 
 export const postsKeys = {
     root:     ['posts'] as const,
     index:    (p: FetchPostsParams) => ['posts', 'index', p] as const,
     show:     (id: string) => ['posts', id] as const,
     related:  (id: string) => ['related', id] as const,
-    changes:  (p: { id?: string; page: number; limit: number }) =>
+    changes:  (p: { id?: string; tag?: string; page: number; limit: number }) =>
 		  ['posts', 'changes', p] as const }
 
 export const tagsKeys = {
-    root: ['tags'] as const,
+    root:   ['tags'] as const,
-    show: (name: string) => ['tags', name] as const }
+    index:  (p: FetchTagsParams) => ['tags', 'index', p] as const,
+    show:   (name: string) => ['tags', name] as const }
 
 export const wikiKeys = {
     root:   ['wiki'] as const,

frontend/src/lib/tags.ts

@@ -1,6 +1,38 @@
 import { apiGet } from '@/lib/api'
 
-import type { Tag } from '@/types'
+import type { FetchTagsParams, Tag } from '@/types'
+
+
+export const fetchTags = async (
+    { post, name, category, postCountGTE, postCountLTE, createdFrom, createdTo,
+      updatedFrom, updatedTo, page, limit, order }: FetchTagsParams,
+): Promise<{ tags:  Tag[]
+	     count: number }> =>
+    await apiGet ('/tags', { params: {
+	...(post != null && { post }),
+	...(name && { name }),
+	...(category && { category }),
+	...(postCountGTE != null && { post_count_gte: postCountGTE }),
+	...(postCountLTE != null && { post_count_lte: postCountLTE }),
+	...(createdFrom && { created_from: createdFrom }),
+	...(createdTo && { created_to: createdTo }),
+	...(updatedFrom && { updated_from: updatedFrom }),
+	...(updatedTo && { updated_to: updatedTo }),
+	...(page && { page }),
+	...(limit && { limit }),
+	...(order && { order }) } })
+
+
+export const fetchTag = async (id: string): Promise<Tag | null> => {
+  try
+  {
+    return await apiGet (`/tags/${ id }`)
+  }
+  catch
+  {
+    return null
+  }
+}
 
 
 export const fetchTagByName = async (name: string): Promise<Tag | null> => {

frontend/src/lib/utils.ts

@@ -10,17 +10,64 @@ export const toDate = (d: string | Date): Date => typeof d === 'string' ? new Da
 export const cn = (...inputs: ClassValue[]) => twMerge (clsx (...inputs))
 
 
-export const dateString = (d: string | Date): string =>
+export const dateString = (
-    toDate (d).toLocaleString ('ja-JP-u-ca-japanese')
+    d:        string | Date,
+    unknown:  'month' | 'day' | 'hour' | 'minute' | 'second' | null = null,
+): string =>
+    toDate (d).toLocaleString (
+	'ja-JP-u-ca-japanese',
+	{ era: 'long',
+	  year: 'numeric',
+	  month: (unknown === 'month' ? undefined : 'long'),
+	  day: unknown != null && ['month', 'day'].includes (unknown) ? undefined : 'numeric',
+	  weekday: unknown != null && ['month', 'day'].includes (unknown) ? undefined : 'short',
+	  hour: unknown == null || ['second', 'minute'].includes (unknown) ? 'numeric' : undefined,
+	  minute: unknown == null || unknown === 'second' ? 'numeric' : undefined,
+	  second: unknown == null ? 'numeric' : undefined })
 
 
-// TODO: 表示形式きしょすぎるので何とかする
 export const originalCreatedAtString = (
     f:  string | Date | null,
     b:  string | Date | null,
-): string =>
+): string => {
-    ([f ? `${ dateString (f) } 以降` : '',
+  const from = f ? toDate (f) : null
-      b ? `${ dateString (b) } より前` : '']
+  const before = b ? toDate (b) : null
-     .filter (Boolean)
+
-     .join (' '))
+  if (from && before)
-    || '不明'
+    {
+      const diff = before.getTime () - from.getTime ()
+
+      if (diff <= 60_000 /* 1 分 */)
+	return dateString (from, 'second')
+
+      if (from.getMinutes () === 0 && before.getMinutes () === 0)
+	{
+	  if (Math.abs (diff - 3_600_000 /* 1 時間 */) < 60_000)
+	    return dateString (from, 'minute') + ' (分不詳)'
+
+	  if (from.getHours () === 0 && before.getHours () === 0)
+	    {
+	      if (Math.abs (diff - 86_400_000 /* 1 日 */) < 60_000)
+		return dateString (from, 'hour') + ' (時刻不詳)'
+
+	      if (from.getDate () === 1 && before.getDate () === 1)
+		{
+		  if (2_332_800_000 /* 27 日 */ < diff && diff < 2_764_800_000 /* 32 日 */)
+		    return dateString (from, 'day') + ' (日不詳)'
+
+		  if (from.getMonth () === 0 && before.getMonth () === 0
+		      && (31_449_600_000 /* 364 日 */ <= diff
+			  && diff < 31_708_800_000 /* 367 日 */))
+		    return dateString (from, 'month') + ' (月日不詳)'
+		}
+	    }
+	}
+    }
+
+  const rtn = ([from ? `${ dateString (from, 'second') }` : '',
+		'〜',
+		before ? `${ dateString (new Date (before.getTime () - 60_000), 'second') }` : '']
+	       .filter (Boolean)
+	       .join (' '))
+  return rtn === '〜' ? '年月日不詳' : rtn
+}

frontend/src/pages/materials/MaterialBasePage.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom'
+
+import MaterialSidebar from '@/components/MaterialSidebar'
+
+import type { FC } from 'react'
+
+
+export default (() => (
+    <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden
+		    md:h-[calc(100dvh-88px)]">
+      <MaterialSidebar/>
+      <Outlet/>
+    </div>)) satisfies FC

frontend/src/pages/materials/MaterialDetailPage.tsx

@@ -0,0 +1,182 @@
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useParams } from 'react-router-dom'
+
+import TagLink from '@/components/TagLink'
+import WikiBody from '@/components/WikiBody'
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import TabGroup, { Tab } from '@/components/common/TabGroup'
+import TagInput from '@/components/common/TagInput'
+import MainArea from '@/components/layout/MainArea'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { SITE_TITLE } from '@/config'
+import { apiGet, apiPut } from '@/lib/api'
+
+import type { FC } from 'react'
+
+import type { Material, Tag } from '@/types'
+
+type MaterialWithTag = Material & { tag: Tag }
+
+
+export default (() => {
+  const { id } = useParams ()
+
+  const [file, setFile] = useState<File | null> (null)
+  const [filePreview, setFilePreview] = useState ('')
+  const [loading, setLoading] = useState (false)
+  const [material, setMaterial] = useState<MaterialWithTag | null> (null)
+  const [sending, setSending] = useState (false)
+  const [tag, setTag] = useState ('')
+  const [url, setURL] = useState ('')
+
+  const handleSubmit = async () => {
+    const formData = new FormData
+    if (tag.trim ())
+      formData.append ('tag', tag)
+    if (file)
+      formData.append ('file', file)
+    if (url.trim ())
+      formData.append ('url', url)
+
+    try
+    {
+      setSending (true)
+      const data = await apiPut<Material> (`/materials/${ id }`, formData)
+      setMaterial (data)
+      toast ({ title: '更新成功!' })
+    }
+    catch
+    {
+      toast ({ title: '更新失敗……', description: '入力を見直してください．' })
+    }
+    finally
+    {
+      setSending (false)
+    }
+  }
+
+  useEffect (() => {
+    if (!(id))
+      return
+
+    void (async () => {
+      try
+      {
+	setLoading (true)
+	const data = await apiGet<MaterialWithTag> (`/materials/${ id }`)
+	setMaterial (data)
+	setTag (data.tag.name)
+	if (data.file && data.contentType)
+	  {
+	    setFilePreview (data.file)
+	    setFile (new File ([await (await fetch (data.file)).blob ()],
+			       data.file,
+			       { type: data.contentType }))
+	  }
+	setURL (data.url ?? '')
+      }
+      finally
+      {
+	setLoading (false)
+      }
+    }) ()
+  }, [id])
+
+  return (
+      <MainArea>
+	{material && (
+	    <Helmet>
+	      <title>{`${ material.tag.name } 素材照会 | ${ SITE_TITLE }`}</title>
+	    </Helmet>)}
+
+	{loading ? 'Loading...' : (material && (
+	    <>
+	      <PageTitle>
+		<TagLink
+		    tag={material.tag}
+		    withWiki={false}
+		    withCount={false}/>
+	      </PageTitle>
+
+	      {(material.file && material.contentType) && (
+		  (/image\/.*/.test (material.contentType) && (
+		      <img src={material.file} alt={material.tag.name || undefined}/>))
+		  || (/video\/.*/.test (material.contentType) && (
+		      <video src={material.file} controls/>))
+		  || (/audio\/.*/.test (material.contentType) && (
+		      <audio src={material.file} controls/>)))}
+
+	      <TabGroup>
+		<Tab name="Wiki">
+		  <WikiBody
+		      title={material.tag.name}
+		      body={material.wikiPageBody ?? undefined}/>
+		</Tab>
+
+		<Tab name="編輯">
+		  <div className="max-w-wl pt-2 space-y-4">
+		    {/* タグ */}
+		    <div>
+		      <Label>タグ</Label>
+		      <TagInput value={tag} setValue={setTag}/>
+		    </div>
+
+		    {/* ファイル */}
+		    <div>
+		      <Label>ファイル</Label>
+		      <input
+			  type="file"
+			  accept="image/*,video/*,audio/*"
+			  onChange={e => {
+			    const f = e.target.files?.[0]
+			    setFile (f ?? null)
+			    setFilePreview (f ? URL.createObjectURL (f) : '')
+			  }}/>
+		      {(file && filePreview) && (
+			  (/image\/.*/.test (file.type) && (
+			      <img
+				  src={filePreview}
+				  alt="preview"
+				  className="mt-2 max-h-48 rounded border"/>))
+			  || (/video\/.*/.test (file.type) && (
+			      <video
+				  src={filePreview}
+				  controls
+				  className="mt-2 max-h-48 rounded border"/>))
+			  || (/audio\/.*/.test (file.type) && (
+			      <audio
+				  src={filePreview}
+				  controls
+				  className="mt-2 max-h-48"/>))
+			  || (
+			      <p className="text-red-600 dark:text-red-400">
+				その形式のファイルには対応していません．
+			      </p>))}
+		    </div>
+
+		    {/* 参考 URL */}
+		    <div>
+		      <Label>参考 URL</Label>
+		      <input
+			  type="url"
+			  value={url}
+			  onChange={e => setURL (e.target.value)}
+			  className="w-full border p-2 rounded"/>
+		    </div>
+
+		    {/* 送信 */}
+		    <Button
+			onClick={handleSubmit}
+			className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
+			disabled={sending}>
+		      更新
+		    </Button>
+		  </div>
+		</Tab>
+	      </TabGroup>
+	    </>))}
+      </MainArea>)
+}) satisfies FC

frontend/src/pages/materials/MaterialListPage.tsx

@@ -0,0 +1,166 @@
+import { Fragment, useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useLocation } from 'react-router-dom'
+
+import nikumaru from '@/assets/fonts/nikumaru.otf'
+import PrefetchLink from '@/components/PrefetchLink'
+import TagLink from '@/components/TagLink'
+import PageTitle from '@/components/common/PageTitle'
+import SectionTitle from '@/components/common/SectionTitle'
+import SubsectionTitle from '@/components/common/SubsectionTitle'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+import { apiGet } from '@/lib/api'
+
+import type { FC } from 'react'
+
+import type { Material, Tag } from '@/types'
+
+type TagWithMaterial = Omit<Tag, 'children'> & {
+    children: TagWithMaterial[]
+    material: Material | null }
+
+
+const MaterialCard = ({ tag }: { tag: TagWithMaterial }) => {
+  if (!(tag.material))
+    return
+
+  return (
+      <PrefetchLink
+	  to={`/materials/${ tag.material.id }`}
+	  className="block w-40 h-40">
+	<div
+	    className="w-full h-full overflow-hidden rounded-xl shadow
+		       text-center content-center text-4xl"
+	    style={{ fontFamily: 'Nikumaru' }}>
+	  {(tag.material.contentType && /image\/.*/.test (tag.material.contentType))
+	   ? <img src={tag.material.file || undefined}/>
+	   : <span>照会</span>}
+	</div>
+      </PrefetchLink>)
+}
+
+
+export default (() => {
+  const [loading, setLoading] = useState (false)
+  const [tag, setTag] = useState<TagWithMaterial | null> (null)
+
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const tagQuery = query.get ('tag') ?? ''
+
+  useEffect (() => {
+    if (!(tagQuery))
+      {
+	setTag (null)
+	return
+      }
+
+    void (async () => {
+      try
+      {
+	setLoading (true)
+	setTag (
+	    await apiGet<TagWithMaterial> (
+		`/tags/name/${ encodeURIComponent (tagQuery) }/materials`))
+      }
+      finally
+      {
+	setLoading (false)
+      }
+    }) ()
+  }, [location.search])
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <style>
+	    {`
+		@font-face
+		{
+		  font-family: 'Nikumaru';
+		  src: url(${ nikumaru }) format('opentype');
+		}`}
+	  </style>
+	  <title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	{loading ? 'Loading...' : (
+	    tag
+	    ? (
+		<>
+		  <PageTitle>
+		    <TagLink
+			tag={tag}
+			withWiki={false}
+			withCount={false}
+			to={tag.material
+			    ? `/materials/${ tag.material.id }`
+			    : `/materials?tag=${ encodeURIComponent (tag.name) }`}/>
+		  </PageTitle>
+		  {(!(tag.material) && tag.category !== 'meme') && (
+		      <div className="-mt-2">
+			<PrefetchLink
+			    to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}>
+			  追加
+			</PrefetchLink>
+		      </div>)}
+
+		  <MaterialCard tag={tag}/>
+
+		  <div className="ml-2">
+		    {tag.children.map (c2 => (
+			<Fragment key={c2.id}>
+			  <SectionTitle>
+			    <TagLink
+				tag={c2}
+				withWiki={false}
+				withCount={false}
+				to={`/materials?tag=${ encodeURIComponent (c2.name) }`}/>
+			  </SectionTitle>
+			  {(!(c2.material) && c2.category !== 'meme') && (
+			      <div className="-mt-4">
+				<PrefetchLink
+				    to={`/materials/new?tag=${ encodeURIComponent (c2.name) }`}>
+				  追加
+				</PrefetchLink>
+			      </div>)}
+
+			  <MaterialCard tag={c2}/>
+
+			  <div className="ml-2">
+			    {c2.children.map (c3 => (
+				<Fragment key={c3.id}>
+				  <SubsectionTitle>
+				    <TagLink
+					tag={c3}
+					withWiki={false}
+					withCount={false}
+					to={`/materials?tag=${ encodeURIComponent (c3.name) }`}/>
+				  </SubsectionTitle>
+				  {(!(c3.material) && c3.category !== 'meme') && (
+				      <div className="-mt-2">
+					<PrefetchLink
+					    to={`/materials/new?tag=${
+						encodeURIComponent (c3.name) }`}>
+					  追加
+					</PrefetchLink>
+				      </div>)}
+
+				  <MaterialCard tag={c3}/>
+				</Fragment>))}
+			  </div>
+			</Fragment>))}
+		  </div>
+		</>)
+	    : (
+		<>
+		  <p>左のリストから照会したいタグを選択してください。</p>
+		  <p>もしくは……</p>
+		  <ul>
+		    <li><PrefetchLink to="/materials/new">素材を新規追加する</PrefetchLink></li>
+		    {/* <li><a href="#">すべての素材をダウンロードする</a></li> */}
+		  </ul>
+		</>))}
+      </MainArea>)
+}) satisfies FC

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import Form from '@/components/common/Form'
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import TagInput from '@/components/common/TagInput'
+import MainArea from '@/components/layout/MainArea'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { SITE_TITLE } from '@/config'
+import { apiPost } from '@/lib/api'
+
+import type { FC } from 'react'
+
+
+export default (() => {
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const tagQuery = query.get ('tag') ?? ''
+
+  const navigate = useNavigate ()
+
+  const [file, setFile] = useState<File | null> (null)
+  const [filePreview, setFilePreview] = useState ('')
+  const [sending, setSending] = useState (false)
+  const [tag, setTag] = useState (tagQuery)
+  const [url, setURL] = useState ('')
+
+  const handleSubmit = async () => {
+    const formData = new FormData
+    if (tag)
+      formData.append ('tag', tag)
+    if (file)
+      formData.append ('file', file)
+    if (url)
+      formData.append ('url', url)
+
+    try
+    {
+      setSending (true)
+      await apiPost ('/materials', formData)
+      toast ({ title: '送信成功!' })
+      navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
+    }
+    catch
+    {
+      toast ({ title: '送信失敗……', description: '入力を見直してください．' })
+    }
+    finally
+    {
+      setSending (false)
+    }
+  }
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{`素材追加 | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	<Form>
+	  <PageTitle>素材追加</PageTitle>
+
+	  {/* タグ */}
+	  <div>
+	    <Label>タグ</Label>
+	    <TagInput value={tag} setValue={setTag}/>
+	  </div>
+
+	  {/* ファイル */}
+	  <div>
+	    <Label>ファイル</Label>
+	    <input
+		type="file"
+		accept="image/*,video/*,audio/*"
+		onChange={e => {
+		  const f = e.target.files?.[0]
+		  setFile (f ?? null)
+		  setFilePreview (f ? URL.createObjectURL (f) : '')
+		}}/>
+	    {(file && filePreview) && (
+		(/image\/.*/.test (file.type) && (
+		    <img
+			src={filePreview}
+			alt="preview"
+			className="mt-2 max-h-48 rounded border"/>))
+		|| (/video\/.*/.test (file.type) && (
+		    <video
+			src={filePreview}
+			controls
+			className="mt-2 max-h-48 rounded border"/>))
+		|| (/audio\/.*/.test (file.type) && (
+		    <audio
+			src={filePreview}
+			controls
+			className="mt-2 max-h-48"/>))
+		|| (
+		    <p className="text-red-600 dark:text-red-400">
+		      その形式のファイルには対応していません．
+		    </p>))}
+	  </div>
+
+	  {/* 参考 URL */}
+	  <div>
+	    <Label>参考 URL</Label>
+	    <input
+		type="url"
+		value={url}
+		onChange={e => setURL (e.target.value)}
+		className="w-full border p-2 rounded"/>
+	  </div>
+
+	  {/* 送信 */}
+	  <Button
+	      onClick={handleSubmit}
+	      className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
+	      disabled={sending}>
+	    追加
+	  </Button>
+	</Form>
+      </MainArea>)
+}) satisfies FC

frontend/src/pages/materials/MaterialSearchPage.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import TagInput from '@/components/common/TagInput'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+
+import type { FC, FormEvent } from 'react'
+
+
+export default (() => {
+  const [tagName, setTagName] = useState ('')
+  const [parentTagName, setParentTagName] = useState ('')
+
+  const handleSearch = (e: FormEvent) => {
+    e.preventDefault ()
+  }
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>素材集 | {SITE_TITLE}</title>
+	</Helmet>
+
+	<div className="max-w-xl">
+	  <PageTitle>素材集</PageTitle>
+
+	  <form onSubmit={handleSearch} className="space-y-2">
+	    {/* タグ */}
+	    <div>
+	      <Label>タグ</Label>
+	      <TagInput
+		  value={tagName}
+		  setValue={setTagName}/>
+	    </div>
+
+	    {/* 親タグ */}
+	    <div>
+	      <Label>親タグ</Label>
+	      <TagInput
+		  value={parentTagName}
+		  setValue={setParentTagName}/>
+	    </div>
+	  </form>
+	</div>
+      </MainArea>)
+}) satisfies FC

frontend/src/pages/posts/PostDetailPage.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
@@ -14,14 +14,14 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
-import { postsKeys } from '@/lib/queryKeys'
+import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
 
 import type { FC } from 'react'
 
-import type { User } from '@/types'
+import type { NiconicoViewerHandle, User } from '@/types'
 
 type Props = { user: User | null }
 
@@ -38,6 +38,8 @@ export default (({ user }: Props) => {
 
   const qc = useQueryClient ()
 
+  const embedRef = useRef<NiconicoViewerHandle> (null)
+
   const [status, setStatus] = useState (200)
 
   const changeViewedFlg = useMutation ({
@@ -91,7 +93,8 @@ export default (({ user }: Props) => {
 		       : 'bg-gray-500 hover:bg-gray-600')
 
   return (
-      <div className="md:flex md:flex-1">
+      <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden
+		      md:h-[calc(100dvh-88px)]">
 	<Helmet>
 	  {(post?.thumbnail || post?.thumbnailBase) && (
 	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase}/>)}
@@ -99,7 +102,7 @@ export default (({ user }: Props) => {
 	</Helmet>
 
 	<div className="hidden md:block">
-	  <TagDetailSidebar post={post ?? null}/>
+	  {post && <TagDetailSidebar post={post}/>}
 	</div>
 
 	<MainArea className="relative">
@@ -120,7 +123,10 @@ export default (({ user }: Props) => {
 			   className="object-cover w-full h-full"/>
 		    </motion.div>)}
 
-		<PostEmbed post={post}/>
+		<PostEmbed
+		    ref={embedRef}
+		    post={post}
+		    onLoadComplete={() => embedRef.current?.play ()}/>
 		<Button onClick={() => changeViewedFlg.mutate ()}
 			disabled={changeViewedFlg.isPending}
 			className={cn ('text-white', viewedClass)}>
@@ -140,6 +146,7 @@ export default (({ user }: Props) => {
 			      qc.setQueryData (postsKeys.show (postId),
 					       (prev: any) => newPost ?? prev)
 			      qc.invalidateQueries ({ queryKey: postsKeys.root })
+			      qc.invalidateQueries ({ queryKey: tagsKeys.root })
 			      toast ({ description: '更新しました．' })
 			    }}/>
 		      </Tab>)}
@@ -149,7 +156,7 @@ export default (({ user }: Props) => {
 	</MainArea>
 
 	<div className="md:hidden">
-	  <TagDetailSidebar post={post ?? null}/>
+	  {post && <TagDetailSidebar post={post} sp/>}
 	</div>
       </div>)
 }) satisfies FC<Props>

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -11,7 +11,8 @@ import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPostChanges } from '@/lib/posts'
-import { postsKeys } from '@/lib/queryKeys'
+import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { fetchTag } from '@/lib/tags'
 import { cn, dateString } from '@/lib/utils'
 
 import type { FC } from 'react'
@@ -21,15 +22,26 @@ export default (() => {
   const location = useLocation ()
   const query = new URLSearchParams (location.search)
   const id = query.get ('id')
+  const tagId = query.get ('tag')
   const page = Number (query.get ('page') ?? 1)
   const limit = Number (query.get ('limit') ?? 20)
 
   // 投稿列の結合で使用
   let rowsCnt: number
 
+  const { data: tag } =
+      tagId
+      ? useQuery ({ queryKey: tagsKeys.show (tagId),
+		    queryFn: () => fetchTag (tagId) })
+      : { data: null }
+
   const { data, isLoading: loading } = useQuery ({
-      queryKey: postsKeys.changes ({ ...(id && { id }), page, limit }),
+      queryKey: postsKeys.changes ({ ...(id && { id }),
-      queryFn:  () => fetchPostChanges ({ ...(id && { id }), page, limit }) })
+				     ...(tagId && { tag: tagId }),
+				     page, limit }),
+      queryFn:  () => fetchPostChanges ({ ...(id && { id }),
+					  ...(tagId && { tag: tagId }),
+					  page, limit }) })
   const changes = data?.changes ?? []
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
@@ -37,6 +49,8 @@ export default (() => {
     document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
   }, [location.search])
 
+  const layoutIds: string[] = []
+
   return (
       <MainArea>
 	<Helmet>
@@ -46,6 +60,7 @@ export default (() => {
 	<PageTitle>
 	  耕作履歴
 	  {id && <>: 投稿 {<PrefetchLink to={`/posts/${ id }`}>#{id}</PrefetchLink>}</>}
+	  {tag && <>（<TagLink tag={tag} withWiki={false} withCount={false}/>）</>}
 	</PageTitle>
 
 	{loading ? 'Loading...' : (
@@ -60,7 +75,7 @@ export default (() => {
 		</thead>
 		<tbody>
 		  {changes.map ((change, i) => {
-		    let withPost = i === 0 || change.post.id !== changes[i - 1].post.id
+		    const withPost = i === 0 || change.post.id !== changes[i - 1].post.id
 		    if (withPost)
 		      {
 			rowsCnt = 1
@@ -70,8 +85,15 @@ export default (() => {
 			     ++j)
 			  ++rowsCnt
 		      }
+
+		    let layoutId: string | undefined = `page-${ change.post.id }`
+		    if (layoutIds.includes (layoutId))
+		      layoutId = undefined
+		    else
+		      layoutIds.push (layoutId)
+
 		    return (
-			<tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag.id }`}
+			<tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag?.id }`}
 			    className={cn ('even:bg-gray-100 dark:even:bg-gray-700',
 					   withPost && 'border-t')}>
 			  {withPost && (
@@ -79,12 +101,14 @@ export default (() => {
 				  rowSpan={rowsCnt}>
 				<PrefetchLink to={`/posts/${ change.post.id }`}>
 				  <motion.div
-				      layoutId={`page-${ change.post.id }`}
+				      layoutId={layoutId}
 				      transition={{ type: 'spring',
 						    stiffness: 500,
 						    damping: 40,
 						    mass: .5 }}>
-				    <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
+				    <img src={change.post.thumbnail
+					      || change.post.thumbnailBase
+					      || undefined}
 					 alt={change.post.title || change.post.url}
 					 title={change.post.title || change.post.url || undefined}
 					 className="w-40"/>
@@ -92,7 +116,9 @@ export default (() => {
 				</PrefetchLink>
 			      </td>)}
 			  <td className="p-2">
-			    <TagLink tag={change.tag} withWiki={false} withCount={false}/>
+			    {change.tag
+			     ? <TagLink tag={change.tag} withWiki={false} withCount={false}/>
+			     : '(マスタ削除済のタグ) '}
 			    {`を${ change.changeType === 'add' ? '記載' : '消除' }`}
 			  </td>
 			  <td className="p-2">

frontend/src/pages/posts/PostListPage.tsx

@@ -69,7 +69,10 @@ export default (() => {
   }, [location.search])
 
   return (
-      <div className="md:flex md:flex-1" ref={containerRef}>
+      <div
+	  className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden
+		     md:h-[calc(100dvh-88px)]"
+	  ref={containerRef}>
 	<Helmet>
 	  <title>
 	    {tags.length

frontend/src/pages/posts/PostSearchPage.tsx

@@ -5,25 +5,24 @@ import { Helmet } from 'react-helmet-async'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
+import SortHeader from '@/components/SortHeader'
 import TagLink from '@/components/TagLink'
-import TagSearchBox from '@/components/TagSearchBox'
 import DateTimeField from '@/components/common/DateTimeField'
 import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
+import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
-import { apiGet } from '@/lib/api'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
 import { dateString, originalCreatedAtString } from '@/lib/utils'
 
-import type { FC, ChangeEvent, FormEvent, KeyboardEvent } from 'react'
+import type { FC, FormEvent } from 'react'
 
 import type { FetchPostsOrder,
 	      FetchPostsOrderField,
-	      FetchPostsParams,
+	      FetchPostsParams } from '@/types'
-	      Tag } from '@/types'
 
 
 const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
@@ -56,14 +55,11 @@ export default (() => {
   const qUpdatedTo = query.get ('updated_to') ?? ''
   const order = (query.get ('order') || 'original_created_at:desc') as FetchPostsOrder
 
-  const [activeIndex, setActiveIndex] = useState (-1)
   const [createdFrom, setCreatedFrom] = useState<string | null> (null)
   const [createdTo, setCreatedTo] = useState<string | null> (null)
   const [matchType, setMatchType] = useState<'all' | 'any'> ('all')
   const [originalCreatedFrom, setOriginalCreatedFrom] = useState<string | null> (null)
   const [originalCreatedTo, setOriginalCreatedTo] = useState<string | null> (null)
-  const [suggestions, setSuggestions] = useState<Tag[]> ([])
-  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
   const [tagsStr, setTagsStr] = useState ('')
   const [title, setTitle] = useState ('')
   const [updatedFrom, setUpdatedFrom] = useState<string | null> (null)
@@ -102,80 +98,6 @@ export default (() => {
     document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
   }, [location.search])
 
-  const SortHeader = ({ by, label }: { by: FetchPostsOrderField; label: string }) => {
-    const [fld, dir] = order.split (':')
-
-    const qs = new URLSearchParams (location.search)
-    const nextDir =
-	(by === fld)
-	? (dir === 'asc' ? 'desc' : 'asc')
-	: (['title', 'url'].includes (by) ? 'asc' : 'desc')
-    qs.set ('order', `${ by }:${ nextDir }`)
-    qs.set ('page', '1')
-
-    return (
-	<PrefetchLink
-	    className="text-inherit visited:text-inherit hover:text-inherit"
-	    to={`${ location.pathname }?${ qs.toString () }`}>
-	  <span className="font-bold">
-	    {label}
-	    {by === fld && (dir === 'asc' ? ' ▲' : ' ▼')}
-	  </span>
-	</PrefetchLink>)
-  }
-
-  // TODO: TagSearch からのコピペのため，共通化を考へる．
-  const whenChanged = async (ev: ChangeEvent<HTMLInputElement>) => {
-    setTagsStr (ev.target.value)
-
-    const q = ev.target.value.trim ().split (' ').at (-1)
-    if (!(q))
-      {
-	setSuggestions ([])
-	return
-      }
-
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
-    setSuggestions (data.filter (t => t.postCount > 0))
-    if (suggestions.length > 0)
-      setSuggestionsVsbl (true)
-  }
-
-  // TODO: TagSearch からのコピペのため，共通化を考へる．
-  const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
-    switch (ev.key)
-    {
-    case 'ArrowDown':
-      ev.preventDefault ()
-      setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
-      setSuggestionsVsbl (true)
-      break
-
-    case 'ArrowUp':
-      ev.preventDefault ()
-      setActiveIndex (i => Math.max (i - 1, -1))
-      setSuggestionsVsbl (true)
-      break
-
-    case 'Enter':
-      if (activeIndex < 0)
-	break
-      ev.preventDefault ()
-      const selected = suggestions[activeIndex]
-      selected && handleTagSelect (selected)
-      break
-
-    case 'Escape':
-      ev.preventDefault ()
-      setSuggestionsVsbl (false)
-      break
-    }
-    if (ev.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
-      {
-	setSuggestionsVsbl (false)
-      }
-  }
-
   const search = async () => {
     const qs = new URLSearchParams ()
     setIf (qs, 'tags', tagsStr)
@@ -188,25 +110,22 @@ export default (() => {
     setIf (qs, 'updated_from', updatedFrom)
     setIf (qs, 'updated_to', updatedTo)
     qs.set ('match', matchType)
-    qs.set ('page', String ('1'))
+    qs.set ('page', '1')
     qs.set ('order', order)
     navigate (`${ location.pathname }?${ qs.toString () }`)
   }
 
-  // TODO: TagSearch からのコピペのため，共通化を考へる．
-  const handleTagSelect = (tag: Tag) => {
-    const parts = tagsStr.split (' ')
-    parts[parts.length - 1] = tag.name
-    setTagsStr (parts.join (' ') + ' ')
-    setSuggestions ([])
-    setActiveIndex (-1)
-  }
-
   const handleSearch = (e: FormEvent) => {
     e.preventDefault ()
     search ()
   }
 
+  const defaultDirection = { title: 'asc',
+			     url: 'asc',
+			     original_created_at: 'desc',
+			     created_at: 'desc',
+			     updated_at: 'desc' } as const
+
   return (
       <MainArea>
 	<Helmet>
@@ -238,21 +157,11 @@ export default (() => {
 	    </div>
 
 	    {/* タグ */}
-	    <div className="relative">
+	    <div>
 	      <Label>タグ</Label>
-	      <input
+	      <TagInput
-		  type="text"
 		  value={tagsStr}
-		  onChange={whenChanged}
+		  setValue={setTagsStr}/>
-		  onFocus={() => setSuggestionsVsbl (true)}
-		  onBlur={() => setSuggestionsVsbl (false)}
-		  onKeyDown={handleKeyDown}
-		  className="w-full border p-2 rounded"/>
-	      <TagSearchBox
-		  suggestions={
-		      suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
-		  activeIndex={activeIndex}
-		  onSelect={handleTagSelect}/>
 	      <fieldset className="w-full my-2">
 		<label>検索区分：</label>
 		<label className="mx-2">
@@ -339,26 +248,46 @@ export default (() => {
 		    <tr>
 		      <th className="p-2 text-left whitespace-nowrap">投稿</th>
 		      <th className="p-2 text-left whitespace-nowrap">
-			<SortHeader by="title" label="タイトル"/>
+			<SortHeader<FetchPostsOrderField>
+			    by="title"
+			    label="タイトル"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
 		      </th>
 		      <th className="p-2 text-left whitespace-nowrap">
-			<SortHeader by="url" label="URL"/>
+			<SortHeader<FetchPostsOrderField>
+			    by="url"
+			    label="URL"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
 		      </th>
 		      <th className="p-2 text-left whitespace-nowrap">タグ</th>
 		      <th className="p-2 text-left whitespace-nowrap">
-			<SortHeader by="original_created_at" label="オリジナルの投稿日時"/>
+			<SortHeader<FetchPostsOrderField>
+			    by="original_created_at"
+			    label="オリジナルの投稿日時"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
 		      </th>
 		      <th className="p-2 text-left whitespace-nowrap">
-			<SortHeader by="created_at" label="投稿日時"/>
+			<SortHeader<FetchPostsOrderField>
+			    by="created_at"
+			    label="投稿日時"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
 		      </th>
 		      <th className="p-2 text-left whitespace-nowrap">
-			<SortHeader by="updated_at" label="更新日時"/>
+			<SortHeader<FetchPostsOrderField>
+			    by="updated_at"
+			    label="更新日時"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
 		      </th>
 		    </tr>
 		  </thead>
 		  <tbody>
 		    {results.map (row => (
-			<tr key={row.id} className={'even:bg-gray-100 dark:even:bg-gray-700'}>
+			<tr key={row.id} className="even:bg-gray-100 dark:even:bg-gray-700">
 			  <td className="p-2">
 			    <PrefetchLink to={`/posts/${ row.id }`} title={row.title}>
 			      <motion.div

frontend/src/pages/tags/TagListPage.tsx

@@ -0,0 +1,282 @@
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useMemo, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import PrefetchLink from '@/components/PrefetchLink'
+import SortHeader from '@/components/SortHeader'
+import TagLink from '@/components/TagLink'
+import DateTimeField from '@/components/common/DateTimeField'
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import Pagination from '@/components/common/Pagination'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
+import { tagsKeys } from '@/lib/queryKeys'
+import { fetchTags } from '@/lib/tags'
+import { dateString } from '@/lib/utils'
+
+import type { FC, FormEvent } from 'react'
+
+import type { Category, FetchTagsOrder, FetchTagsOrderField } from '@/types'
+
+
+const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
+  const t = v?.trim ()
+  if (t)
+    qs.set (k, t)
+}
+
+
+export default (() => {
+  const location = useLocation ()
+
+  const navigate = useNavigate ()
+
+  const query = useMemo (() => new URLSearchParams (location.search), [location.search])
+
+  const page = Number (query.get ('page') ?? 1)
+  const limit = Number (query.get ('limit') ?? 20)
+
+  const qName = query.get ('name') ?? ''
+  const qCategory = (query.get ('category') || null) as Category | null
+  const qPostCountGTE = Number (query.get ('post_count_gte') ?? 1)
+  const qPostCountLTERaw = query.get ('post_count_lte')
+  const qPostCountLTE = qPostCountLTERaw ? Number (qPostCountLTERaw) : null
+  const qCreatedFrom = query.get ('created_from') ?? ''
+  const qCreatedTo = query.get ('created_to') ?? ''
+  const qUpdatedFrom = query.get ('updated_from') ?? ''
+  const qUpdatedTo = query.get ('updated_to') ?? ''
+  const order = (query.get ('order') || 'post_count:desc') as FetchTagsOrder
+
+  const [name, setName] = useState ('')
+  const [category, setCategory] = useState<Category | null> (null)
+  const [postCountGTE, setPostCountGTE] = useState (1)
+  const [postCountLTE, setPostCountLTE] = useState<number | null> (null)
+  const [createdFrom, setCreatedFrom] = useState<string | null> (null)
+  const [createdTo, setCreatedTo] = useState<string | null> (null)
+  const [updatedFrom, setUpdatedFrom] = useState<string | null> (null)
+  const [updatedTo, setUpdatedTo] = useState<string | null> (null)
+
+  const keys = {
+      page, limit, order,
+      post: null,
+      name: qName,
+      category: qCategory,
+      postCountGTE: qPostCountGTE,
+      postCountLTE: qPostCountLTE,
+      createdFrom: qCreatedFrom,
+      createdTo: qCreatedTo,
+      updatedFrom: qUpdatedFrom,
+      updatedTo: qUpdatedTo }
+  const { data, isLoading: loading } = useQuery ({
+      queryKey: tagsKeys.index (keys),
+      queryFn: () => fetchTags (keys) })
+  const results = data?.tags ?? []
+  const totalPages = data ? Math.ceil (data.count / limit) : 0
+
+  useEffect (() => {
+    setName (qName)
+    setCategory (qCategory)
+    setPostCountGTE (qPostCountGTE)
+    setPostCountLTE (qPostCountLTE)
+    setCreatedFrom (qCreatedFrom)
+    setCreatedTo (qCreatedTo)
+    setUpdatedFrom (qUpdatedFrom)
+    setUpdatedTo (qUpdatedTo)
+
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
+  }, [location.search])
+
+  const handleSearch = (e: FormEvent) => {
+    e.preventDefault ()
+
+    const qs = new URLSearchParams ()
+    setIf (qs, 'name', name)
+    setIf (qs, 'category', category)
+    if (postCountGTE !== 1)
+      qs.set ('post_count_gte', String (postCountGTE))
+    if (postCountLTE != null)
+      qs.set ('post_count_lte', String (postCountLTE))
+    setIf (qs, 'created_from', createdFrom)
+    setIf (qs, 'created_to', createdTo)
+    setIf (qs, 'updated_from', updatedFrom)
+    setIf (qs, 'updated_to', updatedTo)
+    qs.set ('page', '1')
+    qs.set ('order', order)
+
+    navigate (`${ location.pathname }?${ qs.toString () }`)
+  }
+
+  const defaultDirection = { name: 'asc',
+			     category: 'asc',
+			     post_count: 'desc',
+			     created_at: 'desc',
+			     updated_at: 'desc' } as const
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>タグ | {SITE_TITLE}</title>
+	</Helmet>
+
+	<div className="max-w-xl">
+	  <PageTitle>タグ</PageTitle>
+
+	  <form onSubmit={handleSearch} className="space-y-2">
+	    {/* 名前 */}
+	    <div>
+	      <Label>名前</Label>
+	      <input
+		  type="text"
+		  value={name}
+		  onChange={e => setName (e.target.value)}
+		  className="w-full border p-2 rounded"/>
+	    </div>
+
+	    {/* カテゴリ */}
+	    <div>
+	      <Label>カテゴリ</Label>
+	      <select
+		  value={category ?? ''}
+		  onChange={e => setCategory((e.target.value || null) as Category | null)}
+		  className="w-full border p-2 rounded">
+		<option value="">&nbsp;</option>
+		{CATEGORIES.map (cat => (
+		    <option key={cat} value={cat}>
+		      {CATEGORY_NAMES[cat]}
+		    </option>))}
+	      </select>
+	    </div>
+
+	    {/* 広場の投稿数 */}
+	    <div>
+	      <Label>広場の投稿数</Label>
+	      <input
+		  type="number"
+		  min="0"
+		  value={postCountGTE < 0 ? 0 : String (postCountGTE)}
+		  onChange={e => setPostCountGTE (Number (e.target.value || 0))}
+		  className="border rounded p-2"/>
+	      <span className="mx-1">〜</span>
+	      <input
+		  type="number"
+		  min="0"
+		  value={postCountLTE == null ? '' : String (postCountLTE)}
+		  onChange={e => setPostCountLTE (e.target.value ? Number (e.target.value) : null)}
+		  className="border rounded p-2"/>
+	    </div>
+
+	    {/* はじめて記載された日時 */}
+	    <div>
+	      <Label>はじめて記載された日時</Label>
+	      <DateTimeField
+		  value={createdFrom ?? undefined}
+		  onChange={setCreatedFrom}/>
+	      <span className="mx-1">〜</span>
+	      <DateTimeField
+		  value={createdTo ?? undefined}
+		  onChange={setCreatedTo}/>
+	    </div>
+
+	    {/* 定義の更新日時 */}
+	    <div>
+	      <Label>定義の更新日時</Label>
+	      <DateTimeField
+		  value={updatedFrom ?? undefined}
+		  onChange={setUpdatedFrom}/>
+	      <span className="mx-1">〜</span>
+	      <DateTimeField
+		  value={updatedTo ?? undefined}
+		  onChange={setUpdatedTo}/>
+	    </div>
+
+	    <div className="py-3">
+	      <button
+		  type="submit"
+		  className="bg-blue-500 text-white px-4 py-2 rounded">
+		検索
+	      </button>
+	    </div>
+	  </form>
+	</div>
+
+	{loading ? 'Loading...' : (results.length > 0 ? (
+	    <div className="mt-4">
+	      <div className="overflow-x-auto">
+		<table className="w-full min-w-[1200px] table-fixed border-collapse">
+		  <colgroup>
+		    <col className="w-72"/>
+		    <col className="w-48"/>
+		    <col className="w-16"/>
+		    <col className="w-44"/>
+		    <col className="w-44"/>
+		    <col className="w-16"/>
+		  </colgroup>
+
+		  <thead className="border-b-2 border-black dark:border-white">
+		    <tr>
+		      <th className="p-2 text-left whitespace-nowrap">
+			<SortHeader<FetchTagsOrderField>
+			    by="name"
+			    label="タグ"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
+		      </th>
+		      <th className="p-2 text-left whitespace-nowrap">
+			<SortHeader<FetchTagsOrderField>
+			    by="category"
+			    label="カテゴリ"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
+		      </th>
+		      <th className="p-2 text-left whitespace-nowrap">
+			<SortHeader<FetchTagsOrderField>
+			    by="post_count"
+			    label="件数"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
+		      </th>
+		      <th className="p-2 text-left whitespace-nowrap">
+			<SortHeader<FetchTagsOrderField>
+			    by="created_at"
+			    label="最初の記載日時"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
+		      </th>
+		      <th className="p-2 text-left whitespace-nowrap">
+			<SortHeader<FetchTagsOrderField>
+			    by="updated_at"
+			    label="更新日時"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
+		      </th>
+		      <th className="p-2 text-left whitespace-nowrap"/>
+		    </tr>
+		  </thead>
+
+		  <tbody>
+		    {results.map (row => (
+			<tr key={row.id} className="even:bg-gray-100 dark:even:bg-gray-700">
+			  <td className="p-2">
+			    <TagLink tag={row} withCount={false}/>
+			  </td>
+			  <td className="p-2">{CATEGORY_NAMES[row.category]}</td>
+			  <td className="p-2 text-right">{row.postCount}</td>
+			  <td className="p-2">{dateString (row.createdAt)}</td>
+			  <td className="p-2">{dateString (row.updatedAt)}</td>
+			  <td className="p-2">
+			    <PrefetchLink to={`/posts/changes?tag=${ row.id }`}>
+			      耕作履歴
+			    </PrefetchLink>
+			  </td>
+			</tr>))}
+		  </tbody>
+		</table>
+	      </div>
+
+	      <Pagination page={page} totalPages={totalPages}/>
+	    </div>) : '結果ないよ（笑）')}
+      </MainArea>)
+}) satisfies FC

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -0,0 +1,341 @@
+import { useEffect, useRef, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useParams } from 'react-router-dom'
+
+import ErrorScreen from '@/components/ErrorScreen'
+import PostEmbed from '@/components/PostEmbed'
+import PrefetchLink from '@/components/PrefetchLink'
+import TagDetailSidebar from '@/components/TagDetailSidebar'
+import MainArea from '@/components/layout/MainArea'
+import SidebarComponent from '@/components/layout/SidebarComponent'
+import { SITE_TITLE } from '@/config'
+import { apiGet, apiPatch, apiPost, apiPut } from '@/lib/api'
+import { fetchPost } from '@/lib/posts'
+import { dateString } from '@/lib/utils'
+
+import type { FC } from 'react'
+
+import type { NiconicoMetadata,
+	      NiconicoViewerHandle,
+	      Post,
+	      Theatre,
+	      TheatreComment } from '@/types'
+
+type TheatreInfo = {
+    hostFlg:        boolean
+    postId:         number | null
+    postStartedAt:  string | null
+    watchingUsers:  { id: number; name: string }[] }
+
+const INITIAL_THEATRE_INFO =
+    { hostFlg: false,
+      postId: null,
+      postStartedAt: null,
+      watchingUsers: [] as { id: number; name: string }[] } as const
+
+
+export default (() => {
+  const { id } = useParams ()
+
+  const commentsRef = useRef<HTMLDivElement> (null)
+  const embedRef = useRef<NiconicoViewerHandle> (null)
+  const theatreInfoRef = useRef<TheatreInfo> (INITIAL_THEATRE_INFO)
+  const videoLengthRef = useRef (0)
+  const lastCommentNoRef = useRef (0)
+
+  const [comments, setComments] = useState<TheatreComment[]> ([])
+  const [content, setContent] = useState ('')
+  const [loading, setLoading] = useState (false)
+  const [sending, setSending] = useState (false)
+  const [status, setStatus] = useState (200)
+  const [theatre, setTheatre] = useState<Theatre | null> (null)
+  const [theatreInfo, setTheatreInfo] = useState<TheatreInfo> (INITIAL_THEATRE_INFO)
+  const [post, setPost] = useState<Post | null> (null)
+  const [videoLength, setVideoLength] = useState (0)
+
+  useEffect (() => {
+    theatreInfoRef.current = theatreInfo
+  }, [theatreInfo])
+
+  useEffect (() => {
+    videoLengthRef.current = videoLength
+  }, [videoLength])
+
+  useEffect (() => {
+    lastCommentNoRef.current = comments[0]?.no ?? 0
+  }, [comments])
+
+  useEffect (() => {
+    if (!(id))
+      return
+
+    let cancelled = false
+
+    setComments ([])
+    setTheatre (null)
+    setPost (null)
+    setTheatreInfo (INITIAL_THEATRE_INFO)
+    setVideoLength (0)
+    lastCommentNoRef.current = 0
+
+    void (async () => {
+      try
+      {
+	const data = await apiGet<Theatre> (`/theatres/${ id }`)
+	if (!(cancelled))
+	  setTheatre (data)
+      }
+      catch (error)
+      {
+	setStatus ((error as any)?.response.status ?? 200)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
+  useEffect (() => {
+    if (!(id))
+      return
+
+    let cancelled = false
+    let running = false
+
+    const tick = async () => {
+      if (running)
+	return
+
+      running = true
+
+      try
+      {
+	const newComments = await apiGet<TheatreComment[]> (
+	    `/theatres/${ id }/comments`,
+	    { params: { no_gt: lastCommentNoRef.current } })
+
+	if (!(cancelled) && newComments.length > 0)
+	  {
+	    lastCommentNoRef.current = newComments[newComments.length - 1].no
+	    setComments (prev => [...newComments, ...prev])
+	  }
+
+	const currentInfo = theatreInfoRef.current
+	const ended =
+	    currentInfo.hostFlg
+	    && currentInfo.postStartedAt
+	    && ((Date.now () - (new Date (currentInfo.postStartedAt)).getTime ())
+	        > videoLengthRef.current + 3_000)
+
+	if (ended)
+	  {
+	    if (!(cancelled))
+	      setTheatreInfo (prev => ({ ...prev, postId: null, postStartedAt: null }))
+
+	    return
+	  }
+
+	const nextInfo = await apiPut<TheatreInfo> (`/theatres/${ id }/watching`)
+	if (!(cancelled))
+	  setTheatreInfo (nextInfo)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
+      finally
+      {
+	running = false
+      }
+    }
+
+    tick ()
+    const interval = setInterval (() => tick (), 1_500)
+
+    return () => {
+      cancelled = true
+      clearInterval (interval)
+    }
+  }, [id])
+
+  useEffect (() => {
+    if (!(id) || !(theatreInfo.hostFlg) || loading || theatreInfo.postId != null)
+      return
+
+    let cancelled = false
+
+    void (async () => {
+      setLoading (true)
+
+      try
+      {
+	await apiPatch<void> (`/theatres/${ id }/next_post`)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
+      finally
+      {
+	if (!(cancelled))
+	  setLoading (false)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [id, theatreInfo.hostFlg, theatreInfo.postId])
+
+  useEffect (() => {
+    setVideoLength (0)
+
+    if (theatreInfo.postId == null)
+      return
+
+    let cancelled = false
+
+    void (async () => {
+      try
+      {
+	const nextPost = await fetchPost (String (theatreInfo.postId))
+	if (!(cancelled))
+	  setPost (nextPost)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [theatreInfo.postId])
+
+  const syncPlayback = (meta: NiconicoMetadata) => {
+    if (!(theatreInfo.postStartedAt))
+      return
+
+    const targetTime = Math.min (
+	Math.max (0, Date.now () - (new Date (theatreInfo.postStartedAt)).getTime ()),
+	videoLength)
+
+    const drift = Math.abs (meta.currentTime - targetTime)
+
+    if (drift > 5_000)
+      embedRef.current?.seek (targetTime)
+  }
+
+  if (status >= 400)
+    return <ErrorScreen status={status}/>
+
+  return (
+      <div className="md:flex md:flex-1">
+	<Helmet>
+	  {theatre && (
+	      <title>
+		{'上映会場'
+		 + (theatre.name ? `『${ theatre.name }』` : ` #${ theatre.id }`)
+		 + ` | ${ SITE_TITLE }`}
+	      </title>)}
+	</Helmet>
+
+	<div className="hidden md:block">
+	  {post && <TagDetailSidebar post={post}/>}
+	</div>
+
+	<MainArea>
+	  {post ? (
+	      <>
+		<PostEmbed
+		    key={post.id}
+		    ref={embedRef}
+		    post={post}
+		    onLoadComplete={info => {
+		      embedRef.current?.play ()
+		      setVideoLength (info.lengthInSeconds * 1_000)
+		    }}
+		    onMetadataChange={syncPlayback}/>
+		<div className="m-2">
+		  <>再生中：</>
+		  <PrefetchLink to={`/posts/${ post.id }`} className="font-bold">
+		    {post.title || post.url}
+		  </PrefetchLink>
+		</div>
+	      </>) : 'Loading...'}
+	</MainArea>
+
+	<SidebarComponent>
+	  <form
+	      className="w-auto h-auto border border-black dark:border-white rounded mx-2"
+	      onSubmit={async e => {
+		e.preventDefault ()
+
+		if (!(content))
+		  return
+
+		try
+		{
+		  setSending (true)
+		  await apiPost (`/theatres/${ id }/comments`, { content })
+		  setContent ('')
+		  commentsRef.current?.scrollTo ({ top: 0, behavior: 'smooth' })
+		}
+		finally
+		{
+		  setSending (false)
+		}
+	      }}>
+	    <input
+		className="w-full p-2 border rounded"
+		type="text"
+		placeholder="ここにコメントを入力"
+		value={content}
+		onChange={e => setContent (e.target.value)}
+		disabled={sending}/>
+
+	    <div
+		ref={commentsRef}
+		className="overflow-x-hidden overflow-y-scroll text-wrap w-full
+			   h-[32vh] md:h-[64vh] border rounded">
+	      {comments.map (comment => (
+		  <div key={comment.no} className="p-2">
+		    <div className="w-full">
+		      {comment.content}
+		    </div>
+		    <div className="w-full text-sm text-right">
+		      by {comment.user
+			  ? (comment.user.name || `名もなきニジラー（#${ comment.user.id }）`)
+			  : '運営'}
+		    </div>
+		    <div className="w-full text-sm text-right">
+		      {dateString (comment.createdAt)}
+		    </div>
+		  </div>))}
+	    </div>
+	  </form>
+
+	  <div className="w-auto h-auto border border-black dark:border-white rounded mx-2 mt-4">
+	    <div className="p-2">
+		現在の同接数：{theatreInfo.watchingUsers.length}
+	    </div>
+
+	    <div className="overflow-x-hidden overflow-y-scroll text-wrap w-full h-32
+			    border rounded">
+	      <ul className="list-inside list-disc">
+		{theatreInfo.watchingUsers.map (user => (
+		    <li key={user.id} className="px-4 py-1 text-sm">
+		      {user.name || `名もなきニジラー（#${ user.id }）`}
+		    </li>))}
+	      </ul>
+	    </div>
+	  </div>
+	</SidebarComponent>
+
+	<div className="md:hidden">
+	  {post && <TagDetailSidebar post={post} sp/>}
+	</div>
+      </div>)
+}) satisfies FC

frontend/src/types.ts

@@ -26,10 +26,45 @@ export type FetchPostsParams = {
     limit:                number
     order:                FetchPostsOrder }
 
+export type FetchTagsOrder = `${ FetchTagsOrderField }:${ 'asc' | 'desc' }`
+
+export type FetchTagsOrderField =
+    | 'name'
+    | 'category'
+    | 'post_count'
+    | 'created_at'
+    | 'updated_at'
+
+export type FetchTagsParams = {
+    post:         number | null
+    name:         string
+    category:     Category | null
+    postCountGTE: number
+    postCountLTE: number | null
+    createdFrom:  string
+    createdTo:    string
+    updatedFrom:  string
+    updatedTo:    string
+    page:         number
+    limit:        number
+    order:        FetchTagsOrder }
+
+export type Material = {
+    id:             number
+    tag:            Tag
+    file:           string | null
+    url:            string | null
+    wikiPageBody?:  string | null
+    contentType:    string | null
+    createdAt:      string
+    createdByUser:  { id: number; name: string }
+    updatedAt:      string
+    updatedByUser:  { id: number; name: string } }
+
 export type Menu = MenuItem[]
 
 export type MenuItem = {
-    name:     string
+    name:     ReactNode
     to:       string
     base?:    string
     subMenu:  SubMenuItem[] }
@@ -38,6 +73,37 @@ export type NicoTag = Tag & {
     category:   'nico'
     linkedTags: Tag[] }
 
+export type NiconicoMetadata = {
+    currentTime:            number
+    duration:               number
+    isVideoMetaDataLoaded:  boolean
+    maximumBuffered:        number
+    muted:                  boolean
+    showComment:            boolean
+    volume:                 number }
+
+export type NiconicoVideoInfo = {
+    title:            string
+    videoId:          string
+    lengthInSeconds:  number
+    thumbnailUrl:     string
+    description:      string
+    viewCount:        number
+    commentCount:     number
+    mylistCount:      number
+    postedAt:         string
+    watchId:          number }
+
+export type NiconicoViewerHandle = {
+    play:         () => void
+    pause:        () => void
+    seek:         (time: number) => void
+    mute:         () => void
+    unmute:       () => void
+    setVolume:    (volume: number) => void
+    showComments: () => void
+    hideComments: () => void }
+
 export type Post = {
     id:                     number
     url:                    string
@@ -50,19 +116,20 @@ export type Post = {
     originalCreatedFrom:    string | null
     originalCreatedBefore:  string | null
     createdAt:              string
-    updatedAt:              string }
+    updatedAt:              string
+    uploadedUser:           { id: number; name: string } | null }
 
 export type PostTagChange = {
     post:       Post
-    tag:        Tag
+    tag:        Tag | null
-    user?:      User
+    user:       User | null
     changeType: 'add' | 'remove'
     timestamp:  string }
 
 export type SubMenuItem =
     | { component:  ReactNode
 	visible:    boolean }
-    | { name:     string
+    | { name:     ReactNode
 	to:       string
 	visible?: boolean }
 
@@ -71,10 +138,29 @@ export type Tag = {
     name:           string
     category:       Category
     postCount:      number
+    createdAt:      string
+    updatedAt:      string
     hasWiki:        boolean
+    materialId:     number
     children?:      Tag[]
     matchedAlias?:  string | null }
 
+export type Theatre = {
+    id:             number
+    name:           string | null
+    opensAt:        string
+    closesAt:       string | null
+    createdByUser:  { id: number; name: string }
+    createdAt:      string
+    updatedAt:      string }
+
+export type TheatreComment = {
+    theatreId:  number,
+    no:         number,
+    user:       { id: number, name: string } | null
+    content:    string
+    createdAt:  string }
+
 export type User = {
     id:               number
     name:             string | null

frontend/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig ({
     server:   { host:         true,
 		port:         5173,
 		strictPort:   true,
-		allowedHosts: ['hub.nizika.monster', 'localhost'],
+		allowedHosts: ['hub.nizika.monster', 'localhost', 'nico-dev.test'],
 		proxy:        { '/api': { target:       'http://localhost:3002',
 					  changeOrigin: true,
 					  secure:       false } },