refactor(items): merge ancient artifacts into items data model

Migrate ancient artifacts to items table using a category key.
Consolidate detail and edit views into ItemDetail and ItemEdit.
Update API, search, and data tools to reflect unified structure.

frontend/src/views/AncientArtifactDetail.vue

@@ -1,166 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { computed, onMounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import DetailSection from '../components/DetailSection.vue';
-import EditHistoryPanel from '../components/EditHistoryPanel.vue';
-import EntityChips from '../components/EntityChips.vue';
-import EntityDiscussionPanel from '../components/EntityDiscussionPanel.vue';
-import PageHeader from '../components/PageHeader.vue';
-import Skeleton from '../components/Skeleton.vue';
-import Tabs, { type TabOption } from '../components/Tabs.vue';
-import { iconArtifact, iconBack, iconEdit } from '../icons';
-import { applySeo } from '../seo';
-import { api, getAuthToken, type AncientArtifactDetail, type AuthUser } from '../services/api';
-import AncientArtifactEdit from './AncientArtifactEdit.vue';
-
-const route = useRoute();
-const { t } = useI18n();
-const artifact = ref<AncientArtifactDetail | null>(null);
-const currentUser = ref<AuthUser | null>(null);
-const detailTab = ref('details');
-const showEditor = computed(() => route.name === 'ancient-artifact-edit');
-const canUpdateArtifact = computed(() => currentUser.value?.permissions.includes('ancient-artifacts.update') === true);
-const detailTabs = computed<TabOption[]>(() => [
-  { value: 'details', label: t('common.details') },
-  { value: 'discussion', label: t('discussion.title') },
-  { value: 'history', label: t('history.editHistory') }
-]);
-
-async function loadArtifactDetail() {
-  const nextArtifact = await api.ancientArtifactDetail(String(route.params.id));
-  artifact.value = nextArtifact;
-
-  if (route.meta.editorModal !== true) {
-    applySeo({
-      title: `${nextArtifact.name} - ${t('pages.ancientArtifacts.title')}`,
-      description: t('seo.ancientArtifactDetailDescription', { name: nextArtifact.name }),
-      canonicalPath: `/ancient-artifacts/${nextArtifact.id}`,
-      image: nextArtifact.image?.url
-    });
-  }
-}
-
-onMounted(async () => {
-  if (getAuthToken()) {
-    try {
-      currentUser.value = (await api.me()).user;
-    } catch {
-      currentUser.value = null;
-    }
-  }
-  await loadArtifactDetail();
-});
-
-watch(
-  () => route.name,
-  (name, oldName) => {
-    if (oldName === 'ancient-artifact-edit' && name === 'ancient-artifact-detail') {
-      void loadArtifactDetail();
-    }
-  }
-);
-
-watch(
-  () => route.params.id,
-  () => {
-    artifact.value = null;
-    detailTab.value = 'details';
-    void loadArtifactDetail();
-  }
-);
-</script>
-
-<template>
-  <section v-if="!artifact" class="page-stack" aria-busy="true" :aria-label="t('pages.ancientArtifacts.loadingDetail')">
-    <div class="page-header page-header--skeleton" aria-hidden="true">
-      <div class="page-header__copy">
-        <Skeleton width="132px" />
-        <Skeleton width="260px" height="46px" />
-        <Skeleton width="220px" />
-      </div>
-      <div class="page-header__actions">
-        <Skeleton variant="box" width="88px" height="36px" />
-      </div>
-    </div>
-
-    <section class="detail-section skeleton-detail-section" aria-hidden="true">
-      <div class="detail-section__header">
-        <Skeleton width="112px" height="24px" />
-      </div>
-      <div class="detail-section__body">
-        <Skeleton width="45%" />
-        <Skeleton variant="box" height="120px" />
-      </div>
-    </section>
-  </section>
-  <section v-else class="page-stack">
-    <PageHeader :title="artifact.name" :subtitle="artifact.category.name">
-      <template #kicker>{{ t('pages.ancientArtifacts.detailKicker') }}</template>
-      <template #actions>
-        <RouterLink v-if="canUpdateArtifact" class="ui-button ui-button--primary ui-button--small" :to="`/ancient-artifacts/${artifact.id}/edit`">
-          <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
-          {{ t('common.edit') }}
-        </RouterLink>
-        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/ancient-artifacts">
-          <Icon :icon="iconBack" class="ui-icon" aria-hidden="true" />
-          {{ t('common.backToList') }}
-        </RouterLink>
-      </template>
-    </PageHeader>
-
-    <div class="detail-tabs">
-      <Tabs id="artifact-detail-tabs" v-model="detailTab" :tabs="detailTabs" :label="t('common.details')" />
-
-      <div v-if="detailTab === 'details'" class="detail-grid">
-        <DetailSection :title="t('common.details')">
-          <dl class="entity-profile-facts">
-            <div>
-              <dt>{{ t('pages.ancientArtifacts.category') }}</dt>
-              <dd>{{ artifact.category.name }}</dd>
-            </div>
-          </dl>
-        </DetailSection>
-
-        <DetailSection :title="t('media.image')">
-          <div class="entity-detail-image">
-            <div class="entity-detail-image__frame" :class="{ 'entity-detail-image__frame--placeholder': !artifact.image }">
-              <img v-if="artifact.image" :src="artifact.image.url" :alt="t('media.imageAlt', { name: artifact.name })" />
-              <span v-else class="entity-card__mark entity-detail-image__mark" role="img" :aria-label="t('media.imageEmpty')">
-                <Icon :icon="iconArtifact" class="entity-card__icon" aria-hidden="true" />
-              </span>
-            </div>
-          </div>
-        </DetailSection>
-
-        <DetailSection :title="t('pages.ancientArtifacts.description')">
-          <p v-if="artifact.details" class="preserve-lines">{{ artifact.details }}</p>
-          <p v-else class="meta-line">{{ t('common.none') }}</p>
-        </DetailSection>
-
-        <DetailSection :title="t('pages.ancientArtifacts.category')">
-          <span class="chip">
-            <Icon :icon="iconArtifact" class="ui-icon" aria-hidden="true" />
-            {{ artifact.category.name }}
-          </span>
-        </DetailSection>
-
-        <DetailSection :title="t('pages.ancientArtifacts.tags')">
-          <EntityChips v-if="artifact.tags.length" :items="artifact.tags" />
-          <p v-else class="meta-line">{{ t('common.none') }}</p>
-        </DetailSection>
-      </div>
-
-      <div v-else-if="detailTab === 'discussion'" class="detail-tab-panel">
-        <EntityDiscussionPanel entity-type="ancient-artifacts" :entity-id="artifact.id" />
-      </div>
-
-      <div v-else class="detail-tab-panel">
-        <EditHistoryPanel :entity="artifact" :history="artifact.editHistory" />
-      </div>
-    </div>
-  </section>
-
-  <AncientArtifactEdit v-if="showEditor" />
-</template>

frontend/src/views/AncientArtifactEdit.vue

@@ -1,261 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { computed, onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-import ImageUploadField from '../components/ImageUploadField.vue';
-import Modal from '../components/Modal.vue';
-import Skeleton from '../components/Skeleton.vue';
-import StatusMessage from '../components/StatusMessage.vue';
-import TagsSelect from '../components/TagsSelect.vue';
-import TranslationFields from '../components/TranslationFields.vue';
-import { iconCancel, iconSave } from '../icons';
-import {
-  api,
-  getAuthToken,
-  type AncientArtifactPayload,
-  type AuthUser,
-  type ConfigType,
-  type EntityImage,
-  type EntityImageUpload,
-  type Language,
-  type Options,
-  type TranslationMap
-} from '../services/api';
-
-const route = useRoute();
-const router = useRouter();
-const { locale, t } = useI18n();
-const options = ref<Options | null>(null);
-const languages = ref<Language[]>([]);
-const currentUser = ref<AuthUser | null>(null);
-const currentImage = ref<EntityImage | null>(null);
-const imageHistory = ref<EntityImageUpload[]>([]);
-const loading = ref(true);
-const busy = ref(false);
-const message = ref('');
-const creatingSelect = ref('');
-const artifactForm = ref({
-  name: '',
-  details: '',
-  translations: {} as TranslationMap,
-  categoryId: '',
-  tagIds: [] as string[],
-  imagePath: ''
-});
-
-const routeId = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
-const isEditing = computed(() => routeId.value !== '');
-const pageTitle = computed(() =>
-  isEditing.value
-    ? t('pages.ancientArtifacts.editTitle', { name: artifactForm.value.name || t('pages.ancientArtifacts.fallbackName') })
-    : t('pages.ancientArtifacts.newTitle')
-);
-const cancelTo = computed(() => (isEditing.value ? `/ancient-artifacts/${routeId.value}` : '/ancient-artifacts'));
-const canCreateConfig = computed(() => currentUser.value?.permissions.includes('admin.config.create') === true);
-const canUploadImage = computed(() => currentUser.value?.permissions.includes('ancient-artifacts.upload') === true);
-const imageEntityName = computed(() => artifactNameForSave().trim());
-
-function toIds(values: string[]): number[] {
-  return values.map(Number).filter((item) => Number.isInteger(item) && item > 0);
-}
-
-function errorText(error: unknown, fallback: string) {
-  return error instanceof Error && error.message ? error.message : fallback;
-}
-
-function closeEditor() {
-  void router.push(cancelTo.value);
-}
-
-function artifactNameForSave() {
-  const baseName = artifactForm.value.name.trim();
-  if (baseName !== '') {
-    return artifactForm.value.name;
-  }
-
-  return artifactForm.value.translations[String(locale.value || '')]?.name ?? '';
-}
-
-async function loadEditor() {
-  loading.value = true;
-  message.value = '';
-
-  try {
-    const [loadedOptions, loadedLanguages] = await Promise.all([api.options(), api.languages()]);
-    options.value = loadedOptions;
-    languages.value = loadedLanguages;
-
-    if (getAuthToken()) {
-      try {
-        currentUser.value = (await api.me()).user;
-      } catch {
-        currentUser.value = null;
-      }
-    }
-
-    if (isEditing.value) {
-      const artifact = await api.ancientArtifactDetail(routeId.value);
-      artifactForm.value = {
-        name: artifact.baseName ?? artifact.name,
-        details: artifact.baseDetails ?? artifact.details,
-        translations: artifact.translations ?? {},
-        categoryId: String(artifact.category.id),
-        tagIds: artifact.tags.map((tag) => String(tag.id)),
-        imagePath: artifact.image?.path ?? ''
-      };
-      currentImage.value = artifact.image;
-      imageHistory.value = artifact.imageHistory;
-    }
-  } catch (error) {
-    message.value = errorText(error, t('errors.loadFailed'));
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function createMultiOption(selectKey: string, type: ConfigType, name: string, values: string[]) {
-  const cleanName = name.trim();
-  if (!cleanName || !canCreateConfig.value) return;
-
-  creatingSelect.value = selectKey;
-  message.value = '';
-  try {
-    const created = await api.createConfig(type, { name: cleanName });
-    options.value = await api.options();
-    const value = String(created.id);
-    if (!values.includes(value)) {
-      values.push(value);
-    }
-  } catch (error) {
-    message.value = errorText(error, t('errors.addFailed'));
-  } finally {
-    creatingSelect.value = '';
-  }
-}
-
-async function saveArtifact() {
-  busy.value = true;
-  message.value = '';
-
-  try {
-    const payload: AncientArtifactPayload = {
-      name: artifactNameForSave(),
-      details: artifactForm.value.details,
-      translations: artifactForm.value.translations,
-      categoryId: Number(artifactForm.value.categoryId),
-      tagIds: toIds(artifactForm.value.tagIds),
-      imagePath: artifactForm.value.imagePath
-    };
-    const saved = isEditing.value
-      ? await api.updateAncientArtifact(routeId.value, payload)
-      : await api.createAncientArtifact(payload);
-    await router.push(`/ancient-artifacts/${saved.id}`);
-  } catch (error) {
-    message.value = errorText(error, t('errors.saveFailed'));
-  } finally {
-    busy.value = false;
-  }
-}
-
-function handleImageSelected(image: EntityImage) {
-  currentImage.value = image;
-}
-
-function handleImageUploaded(image: EntityImageUpload) {
-  currentImage.value = image;
-  imageHistory.value = [image, ...imageHistory.value.filter((item) => item.path !== image.path)];
-}
-
-onMounted(() => {
-  void loadEditor();
-});
-</script>
-
-<template>
-  <Modal :title="pageTitle" :subtitle="t('pages.ancientArtifacts.editSubtitle')" :close-label="t('common.close')" size="wide" @close="closeEditor">
-    <StatusMessage v-if="message" variant="danger">{{ message }}</StatusMessage>
-
-    <form v-if="!loading && options" id="artifact-edit-form" class="modal-edit-form" @submit.prevent="saveArtifact">
-      <TranslationFields
-        id-prefix="artifact-name"
-        v-model:base-value="artifactForm.name"
-        v-model:translations="artifactForm.translations"
-        field="name"
-        :label="t('common.name')"
-        :languages="languages"
-        required
-      />
-
-      <TranslationFields
-        id-prefix="artifact-details"
-        v-model:base-value="artifactForm.details"
-        v-model:translations="artifactForm.translations"
-        field="details"
-        :label="t('pages.ancientArtifacts.description')"
-        :languages="languages"
-        multiline
-        :rows="4"
-      />
-
-      <div class="field">
-        <label for="artifact-category">{{ t('pages.ancientArtifacts.category') }}</label>
-        <TagsSelect
-          id="artifact-category"
-          v-model="artifactForm.categoryId"
-          :options="options.ancientArtifactCategories"
-          :multiple="false"
-          :placeholder="t('common.select')"
-          :search-placeholder="t('pages.ancientArtifacts.searchCategory')"
-        />
-      </div>
-
-      <ImageUploadField
-        v-model="artifactForm.imagePath"
-        entity-type="ancient-artifacts"
-        :entity-id="isEditing ? routeId : null"
-        :entity-name="imageEntityName"
-        :label="t('media.image')"
-        :current-image="currentImage"
-        :history="imageHistory"
-        :disabled="busy"
-        :allow-upload="canUploadImage"
-        @selected="handleImageSelected"
-        @uploaded="handleImageUploaded"
-        @error="message = $event"
-      />
-
-      <div class="field">
-        <label for="artifact-tags">{{ t('pages.ancientArtifacts.tags') }}</label>
-        <TagsSelect
-          id="artifact-tags"
-          v-model="artifactForm.tagIds"
-          :options="options.itemTags"
-          :allow-create="canCreateConfig"
-          :creating="creatingSelect === 'artifact-tags'"
-          :placeholder="t('pages.ancientArtifacts.searchTags')"
-          @create="createMultiOption('artifact-tags', 'favorite-things', $event, artifactForm.tagIds)"
-        />
-      </div>
-    </form>
-    <section v-else class="modal-edit-form skeleton-detail-section" aria-busy="true" :aria-label="t('pages.ancientArtifacts.loadingEdit')">
-      <Skeleton width="160px" />
-      <Skeleton variant="box" height="44px" />
-      <Skeleton width="140px" />
-      <Skeleton variant="box" height="120px" />
-      <Skeleton width="120px" />
-      <Skeleton variant="box" height="44px" />
-    </section>
-
-    <template #footer>
-      <button type="button" class="ui-button ui-button--ghost" @click="closeEditor">
-        <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
-        {{ t('common.cancel') }}
-      </button>
-      <button type="submit" form="artifact-edit-form" class="ui-button ui-button--primary" :disabled="busy || loading">
-        <Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
-        {{ busy ? t('common.saving') : t('common.save') }}
-      </button>
-    </template>
-  </Modal>
-</template>

frontend/src/views/AncientArtifactList.vue

@@ -11,7 +11,7 @@ import Tabs, { type TabOption } from '../components/Tabs.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import { iconAdd, iconArtifact } from '../icons';
 import { api, getAuthToken, type AncientArtifact, type AuthUser, type Options } from '../services/api';
-import AncientArtifactEdit from './AncientArtifactEdit.vue';
+import ItemEdit from './ItemEdit.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -37,7 +37,7 @@ const artifactQuery = computed(() => ({
   tagIds: tagIds.value.join(',')
 }));
 const showEditor = computed(() => route.name === 'ancient-artifact-new');
-const canCreateArtifact = computed(() => currentUser.value?.permissions.includes('ancient-artifacts.create') === true);
+const canCreateArtifact = computed(() => currentUser.value?.permissions.includes('items.create') === true);
 
 function artifactCardImage(artifact: AncientArtifact) {
   return artifact.image ? { src: artifact.image.url, alt: t('media.imageAlt', { name: artifact.name }) } : undefined;
@@ -139,6 +139,6 @@ watch(artifactQuery, loadArtifacts);
       />
     </div>
 
-    <AncientArtifactEdit v-if="showEditor" />
+    <ItemEdit v-if="showEditor" />
   </section>
 </template>

frontend/src/views/ItemDetail.vue

@@ -2,7 +2,7 @@
 import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import DetailSection from '../components/DetailSection.vue';
 import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityDiscussionPanel from '../components/EntityDiscussionPanel.vue';
@@ -17,11 +17,14 @@ import { api, getAuthToken, type AuthUser, type ItemDetail } from '../services/a
 import ItemEdit from './ItemEdit.vue';
 
 const route = useRoute();
+const router = useRouter();
 const { locale, t } = useI18n();
 const item = ref<ItemDetail | null>(null);
 const currentUser = ref<AuthUser | null>(null);
 const detailTab = ref('details');
-const showEditor = computed(() => route.name === 'item-edit');
+const itemDetailRouteNames = new Set(['item-detail', 'item-edit', 'ancient-artifact-detail', 'ancient-artifact-edit']);
+const isAncientArtifactRoute = computed(() => route.name === 'ancient-artifact-detail' || route.name === 'ancient-artifact-edit');
+const showEditor = computed(() => route.name === 'item-edit' || route.name === 'ancient-artifact-edit');
 const canUpdateItem = computed(() => currentUser.value?.permissions.includes('items.update') === true);
 const canCreateRecipe = computed(() => currentUser.value?.permissions.includes('recipes.create') === true);
 const detailTabs = computed<TabOption[]>(() => [
@@ -36,8 +39,26 @@ const itemSubtitle = computed(() => {
 
   return item.value.usage ? `${item.value.category.name} · ${item.value.usage.name}` : item.value.category.name;
 });
-const detailKicker = computed(() => (item.value?.isEventItem ? t('pages.eventItems.detailKicker') : t('pages.items.detailKicker')));
-const listTarget = computed(() => (item.value?.isEventItem ? '/event-items' : '/items'));
+const detailKicker = computed(() =>
+  isAncientArtifactRoute.value
+    ? t('pages.ancientArtifacts.detailKicker')
+    : item.value?.isEventItem
+      ? t('pages.eventItems.detailKicker')
+      : t('pages.items.detailKicker')
+);
+const listTarget = computed(() => (isAncientArtifactRoute.value ? '/ancient-artifacts' : item.value?.isEventItem ? '/event-items' : '/items'));
+const editTarget = computed(() =>
+  item.value ? (isAncientArtifactRoute.value ? `/ancient-artifacts/${item.value.id}/edit` : `/items/${item.value.id}/edit`) : ''
+);
+const detailCanonicalPath = computed(() =>
+  item.value ? (isAncientArtifactRoute.value ? `/ancient-artifacts/${item.value.id}` : `/items/${item.value.id}`) : ''
+);
+const detailTitleKey = computed(() =>
+  isAncientArtifactRoute.value ? 'pages.ancientArtifacts.title' : item.value?.isEventItem ? 'pages.eventItems.title' : 'pages.items.title'
+);
+const detailDescriptionKey = computed(() =>
+  isAncientArtifactRoute.value ? 'seo.ancientArtifactDetailDescription' : 'seo.itemDetailDescription'
+);
 const basePriceDisplay = computed(() => {
   const price = item.value?.basePrice;
   return price === null || price === undefined ? t('common.none') : new Intl.NumberFormat(locale.value).format(price);
@@ -57,18 +78,28 @@ const customization = computed(() => {
 
 async function loadItemDetail() {
   const nextItem = await api.itemDetail(String(route.params.id));
+
+  if (isAncientArtifactRoute.value && !nextItem.ancientArtifactCategory) {
+    await router.replace(route.name === 'ancient-artifact-edit' ? `/items/${nextItem.id}/edit` : `/items/${nextItem.id}`);
+    return;
+  }
+
   item.value = nextItem;
 
   if (route.meta.editorModal !== true) {
     applySeo({
-      title: `${nextItem.name} - ${t(nextItem.isEventItem ? 'pages.eventItems.title' : 'pages.items.title')}`,
-      description: t('seo.itemDetailDescription', { name: nextItem.name }),
-      canonicalPath: `/items/${nextItem.id}`,
+      title: `${nextItem.name} - ${t(detailTitleKey.value)}`,
+      description: t(detailDescriptionKey.value, { name: nextItem.name }),
+      canonicalPath: detailCanonicalPath.value,
       image: nextItem.image?.url
     });
   }
 }
 
+function isItemDetailRouteName(value: unknown) {
+  return typeof value === 'string' && itemDetailRouteNames.has(value);
+}
+
 onMounted(async () => {
   if (getAuthToken()) {
     try {
@@ -83,7 +114,9 @@ onMounted(async () => {
 watch(
   () => route.name,
   (name, oldName) => {
-    if (oldName === 'item-edit' && name === 'item-detail') {
+    if (name !== oldName && isItemDetailRouteName(name) && isItemDetailRouteName(oldName)) {
+      item.value = null;
+      detailTab.value = 'details';
       void loadItemDetail();
     }
   }
@@ -156,7 +189,7 @@ watch(
     <PageHeader :title="item.name" :subtitle="itemSubtitle">
       <template #kicker>{{ detailKicker }}</template>
       <template #actions>
-        <RouterLink v-if="canUpdateItem" class="ui-button ui-button--primary ui-button--small" :to="`/items/${item.id}/edit`">
+        <RouterLink v-if="canUpdateItem" class="ui-button ui-button--primary ui-button--small" :to="editTarget">
           <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
           {{ t('common.edit') }}
         </RouterLink>
@@ -198,6 +231,10 @@ watch(
                   <dt>{{ t('pages.items.basePrice') }}</dt>
                   <dd>{{ basePriceDisplay }}</dd>
                 </div>
+                <div v-if="item.ancientArtifactCategory">
+                  <dt>{{ t('pages.items.ancientArtifact') }}</dt>
+                  <dd>{{ item.ancientArtifactCategory.name }}</dd>
+                </div>
                 <div>
                   <dt>{{ t('pages.items.recipeInfo') }}</dt>
                   <dd>{{ item.noRecipe ? t('pages.items.noRecipe') : item.recipe ? item.recipe.name : t('common.none') }}</dd>

frontend/src/views/ItemEdit.vue

@@ -39,6 +39,7 @@ const itemForm = ref({
   name: '',
   details: '',
   basePrice: '',
+  ancientArtifactCategoryId: '',
   translations: {} as TranslationMap,
   categoryId: '',
   usageId: '',
@@ -67,18 +68,39 @@ const itemCreateDefaultsStorageKey = 'pokopia_item_create_defaults';
 const routeId = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
 const isEditing = computed(() => routeId.value !== '');
 const isEventCreate = computed(() => route.name === 'event-item-new');
+const isAncientArtifactRoute = computed(() => route.name === 'ancient-artifact-new' || route.name === 'ancient-artifact-edit');
+const isAncientArtifactCreate = computed(() => route.name === 'ancient-artifact-new');
 const insertBeforeItemId = computed(() => queryItemId(route.query.insertBeforeItemId));
 const insertAfterItemId = computed(() => queryItemId(route.query.insertAfterItemId));
 const pageTitle = computed(() =>
   isEditing.value
-    ? t('pages.items.editTitle', { name: itemForm.value.name || t('pages.items.fallbackName') })
+    ? isAncientArtifactRoute.value
+      ? t('pages.ancientArtifacts.editTitle', { name: itemForm.value.name || t('pages.ancientArtifacts.fallbackName') })
+      : t('pages.items.editTitle', { name: itemForm.value.name || t('pages.items.fallbackName') })
+    : isAncientArtifactCreate.value
+      ? t('pages.ancientArtifacts.newTitle')
     : isEventCreate.value
       ? t('pages.eventItems.newTitle')
       : t('pages.items.newTitle')
 );
-const cancelTo = computed(() => (isEditing.value ? `/items/${routeId.value}` : isEventCreate.value ? '/event-items' : '/items'));
+const pageSubtitle = computed(() => (isAncientArtifactRoute.value ? t('pages.ancientArtifacts.editSubtitle') : t('pages.items.editSubtitle')));
+const cancelTo = computed(() =>
+  isEditing.value
+    ? isAncientArtifactRoute.value
+      ? `/ancient-artifacts/${routeId.value}`
+      : `/items/${routeId.value}`
+    : isAncientArtifactCreate.value
+      ? '/ancient-artifacts'
+      : isEventCreate.value
+        ? '/event-items'
+        : '/items'
+);
 const hasRecipe = ref(false);
 const imageEntityName = computed(() => itemNameForSave().trim());
+const ancientArtifactOptions = computed(() => [
+  { value: '', label: t('common.no') },
+  ...(options.value?.ancientArtifactCategories.map((item) => ({ value: String(item.id), label: item.name })) ?? [])
+]);
 const canCreateConfig = computed(() => currentUser.value?.permissions.includes('admin.config.create') === true);
 const canUploadImage = computed(() => currentUser.value?.permissions.includes('items.upload') === true);
 
@@ -163,6 +185,7 @@ function applyItemCreateDefaults(isEventItem: boolean) {
     ...itemForm.value,
     categoryId: categoryIds.has(defaults.categoryId) ? defaults.categoryId : '',
     usageId: usageIds.has(defaults.usageId) ? defaults.usageId : '',
+    ancientArtifactCategoryId: isAncientArtifactCreate.value ? String(loadedOptions.ancientArtifactCategories[0]?.id ?? '') : '',
     dyeable: defaults.dyeable,
     dualDyeable: defaults.dualDyeable,
     patternEditable: defaults.patternEditable,
@@ -216,6 +239,7 @@ async function loadEditor() {
         name: item.baseName ?? item.name,
         details: item.baseDetails ?? item.details,
         basePrice: item.basePrice === null || item.basePrice === undefined ? '' : String(item.basePrice),
+        ancientArtifactCategoryId: item.ancientArtifactCategory ? String(item.ancientArtifactCategory.id) : '',
         translations: item.translations ?? {},
         categoryId: String(item.category.id),
         usageId: item.usage ? String(item.usage.id) : '',
@@ -270,6 +294,8 @@ async function saveItem() {
       name: itemNameForSave(),
       details: itemForm.value.details,
       basePrice: itemForm.value.basePrice.trim() === '' ? null : Number(itemForm.value.basePrice),
+      ancientArtifactCategoryId:
+        itemForm.value.ancientArtifactCategoryId.trim() === '' ? null : Number(itemForm.value.ancientArtifactCategoryId),
       translations: itemForm.value.translations,
       categoryId: Number(itemForm.value.categoryId),
       usageId: itemForm.value.usageId ? Number(itemForm.value.usageId) : null,
@@ -289,7 +315,7 @@ async function saveItem() {
       payload.insertAfterItemId = insertAfterItemId.value;
     }
     const saved = isEditing.value ? await api.updateItem(routeId.value, payload) : await api.createItem(payload);
-    await router.push(`/items/${saved.id}`);
+    await router.push(isAncientArtifactRoute.value ? `/ancient-artifacts/${saved.id}` : `/items/${saved.id}`);
   } catch (error) {
     message.value = errorText(error, t('errors.saveFailed'));
   } finally {
@@ -312,7 +338,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Modal :title="pageTitle" :subtitle="t('pages.items.editSubtitle')" :close-label="t('common.close')" size="wide" @close="closeEditor">
+  <Modal :title="pageTitle" :subtitle="pageSubtitle" :close-label="t('common.close')" size="wide" @close="closeEditor">
     <StatusMessage v-if="message" variant="danger">{{ message }}</StatusMessage>
 
     <form v-if="!loading && options" id="item-edit-form" class="modal-edit-form" @submit.prevent="saveItem">
@@ -386,6 +412,18 @@ onMounted(() => {
         </div>
       </div>
 
+      <div class="field">
+        <fieldset class="radio-group">
+          <legend>{{ t('pages.items.ancientArtifact') }}</legend>
+          <div class="radio-group__options">
+            <label v-for="option in ancientArtifactOptions" :key="option.value" class="radio-group__option">
+              <input v-model="itemForm.ancientArtifactCategoryId" type="radio" name="item-ancient-artifact" :value="option.value" />
+              <span>{{ option.label }}</span>
+            </label>
+          </div>
+        </fieldset>
+      </div>
+
       <div class="check-row">
         <label><input v-model="itemForm.dyeable" type="checkbox" /> {{ t('pages.items.dyeable') }}</label>
         <label><input v-model="itemForm.dualDyeable" type="checkbox" /> {{ t('pages.items.dualDyeable') }}</label>
@@ -422,7 +460,7 @@ onMounted(() => {
     </form>
 
     <section v-else class="modal-edit-form skeleton-detail-section" aria-busy="true" :aria-label="t('pages.items.loadingEdit')">
-      <div v-for="index in 6" :key="index" class="field">
+      <div v-for="index in 7" :key="index" class="field">
         <Skeleton :width="index === 1 ? '52px' : '88px'" />
         <Skeleton variant="box" height="44px" />
       </div>
@@ -460,6 +498,46 @@ onMounted(() => {
   min-width: 0;
 }
 
+.radio-group {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.radio-group legend {
+  padding: 0;
+  color: var(--ink-soft);
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.radio-group__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}
+
+.radio-group__option {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 36px;
+  color: var(--ink-soft);
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.radio-group__option input {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--pokemon-blue);
+}
+
 @media (max-width: 720px) {
   .item-edit-row--name-price,
   .item-edit-row--category-usage {