feat(seo): implement dynamic metadata, sitemap, and robots.txt

Add dynamic meta tags for routes and entity detail pages
Generate sitemap.xml and robots.txt dynamically in Vite
Change default frontend port from 3000 to 20015

frontend/src/views/HabitatDetail.vue

@@ -12,6 +12,7 @@ import PokeBallMark from '../components/PokeBallMark.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
 import { iconBack, iconEdit, iconHabitat } from '../icons';
+import { applySeo } from '../seo';
 import { api, getAuthToken, type AuthUser, type HabitatDetail } from '../services/api';
 import HabitatEdit from './HabitatEdit.vue';
 
@@ -116,7 +117,17 @@ const pokemonRows = computed<PokemonRow[]>(() => {
 });
 
 async function loadHabitatDetail() {
-  habitat.value = await api.habitatDetail(String(route.params.id));
+  const nextHabitat = await api.habitatDetail(String(route.params.id));
+  habitat.value = nextHabitat;
+
+  if (route.meta.editorModal !== true) {
+    applySeo({
+      title: `${nextHabitat.name} - ${t('pages.habitats.title')}`,
+      description: t('seo.habitatDetailDescription', { name: nextHabitat.name }),
+      canonicalPath: `/habitats/${nextHabitat.id}`,
+      image: nextHabitat.image?.url
+    });
+  }
 }
 
 onMounted(async () => {

frontend/src/views/ItemDetail.vue

@@ -12,6 +12,7 @@ import PokeBallMark from '../components/PokeBallMark.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
 import { iconAdd, iconBack, iconEdit, iconHabitat, iconItem } from '../icons';
+import { applySeo } from '../seo';
 import { api, getAuthToken, type AuthUser, type ItemDetail } from '../services/api';
 import ItemEdit from './ItemEdit.vue';
 
@@ -49,7 +50,17 @@ const customization = computed(() => {
 });
 
 async function loadItemDetail() {
-  item.value = await api.itemDetail(String(route.params.id));
+  const nextItem = await api.itemDetail(String(route.params.id));
+  item.value = nextItem;
+
+  if (route.meta.editorModal !== true) {
+    applySeo({
+      title: `${nextItem.name} - ${t('pages.items.title')}`,
+      description: t('seo.itemDetailDescription', { name: nextItem.name }),
+      canonicalPath: `/items/${nextItem.id}`,
+      image: nextItem.image?.url
+    });
+  }
 }
 
 onMounted(async () => {

frontend/src/views/PokemonDetail.vue

@@ -14,6 +14,7 @@ import PokemonStatsPanel from '../components/PokemonStatsPanel.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
 import { iconBack, iconEdit, iconHabitat, iconItem } from '../icons';
+import { applySeo } from '../seo';
 import { api, getAuthToken, type AuthUser, type PokemonDetail } from '../services/api';
 import PokemonEdit from './PokemonEdit.vue';
 
@@ -221,6 +222,15 @@ async function loadPokemonDetail() {
   const nextPokemon = await api.pokemonDetail(String(route.params.id));
   pokemon.value = nextPokemon;
   relatedHabitatTab.value = habitatTabValue(nextPokemon.environment.id);
+
+  if (route.meta.editorModal !== true) {
+    applySeo({
+      title: `${nextPokemon.name} - ${t('pages.pokemon.title')}`,
+      description: t('seo.pokemonDetailDescription', { name: nextPokemon.name }),
+      canonicalPath: `/pokemon/${nextPokemon.id}`,
+      image: nextPokemon.image?.url
+    });
+  }
 }
 
 onMounted(async () => {

frontend/src/views/RecipeDetail.vue

@@ -11,6 +11,7 @@ import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
 import { iconBack, iconEdit, iconRecipe } from '../icons';
+import { applySeo } from '../seo';
 import { api, getAuthToken, type AuthUser, type RecipeDetail } from '../services/api';
 import RecipeEdit from './RecipeEdit.vue';
 
@@ -42,7 +43,17 @@ const recipeSubtitle = computed(() => {
 });
 
 async function loadRecipeDetail() {
-  recipe.value = await api.recipeDetail(String(route.params.id));
+  const nextRecipe = await api.recipeDetail(String(route.params.id));
+  recipe.value = nextRecipe;
+
+  if (route.meta.editorModal !== true) {
+    applySeo({
+      title: `${nextRecipe.name} - ${t('pages.recipes.title')}`,
+      description: t('seo.recipeDetailDescription', { name: nextRecipe.name }),
+      canonicalPath: `/recipes/${nextRecipe.id}`,
+      image: nextRecipe.item.image?.url
+    });
+  }
 }
 
 onMounted(async () => {