feat(automation): add coming soon page and navigation entry

Add Automation route and navigation item with in-development badge
Include localized wordings, icon, and design docs for the new section

frontend/src/App.vue

@@ -6,6 +6,7 @@ import AppShell from './components/AppShell.vue';
 import {
   iconAction,
   iconAdmin,
+  iconAutomation,
   iconChecklist,
   iconClothes,
   iconDish,
@@ -45,6 +46,7 @@ const navItems = computed(() => {
     { label: t('nav.habitats'), to: '/habitats', icon: iconHabitat },
     { label: t('nav.items'), to: '/items', icon: iconItem },
     { label: t('nav.recipes'), to: '/recipes', icon: iconRecipe },
+    { label: t('nav.automation'), to: '/automation', icon: iconAutomation, badge: inDevBadge() },
     { label: t('nav.dish'), to: '/dish', icon: iconDish, badge: inDevBadge() },
     { label: t('nav.events'), to: '/events', icon: iconEvent, badge: inDevBadge() },
     { label: t('nav.actions'), to: '/actions', icon: iconAction, badge: inDevBadge() },

frontend/src/icons.ts

@@ -3,6 +3,7 @@ export type AppIcon = string;
 export const iconAdd: AppIcon = 'mdi:plus';
 export const iconAdmin: AppIcon = 'mdi:tune-variant';
 export const iconAction: AppIcon = 'mdi:gesture-tap-button';
+export const iconAutomation: AppIcon = 'mdi:factory';
 export const iconBack: AppIcon = 'mdi:arrow-left';
 export const iconCancel: AppIcon = 'mdi:close';
 export const iconCheck: AppIcon = 'mdi:check';

frontend/src/router/index.ts

@@ -39,6 +39,7 @@ export const router = createRouter({
     { path: '/recipes/new', name: 'recipe-new', component: RecipeList, meta: { requiredPermission: 'recipes.create', editorModal: true } },
     { path: '/recipes/:id/edit', name: 'recipe-edit', component: RecipeDetail, meta: { requiredPermission: 'recipes.update', editorModal: true } },
     { path: '/recipes/:id', name: 'recipe-detail', component: RecipeDetail },
+    { path: '/automation', name: 'automation', component: ComingSoonView, props: { page: 'automation' } },
     { path: '/dish', name: 'dish', component: ComingSoonView, props: { page: 'dish' } },
     { path: '/events', name: 'events', component: ComingSoonView, props: { page: 'events' } },
     { path: '/actions', name: 'actions', component: ComingSoonView, props: { page: 'actions' } },

frontend/src/styles/main.css

@@ -2439,6 +2439,10 @@ button:disabled,
   --soon-accent: var(--pokemon-yellow);
 }
 
+.coming-soon-panel--automation {
+  --soon-accent: var(--type-steel);
+}
+
 .coming-soon-panel--events {
   --soon-accent: var(--pokemon-red);
 }

frontend/src/views/ComingSoonView.vue

@@ -6,6 +6,7 @@ import PageHeader from '../components/PageHeader.vue';
 import StatusBadge from '../components/StatusBadge.vue';
 import {
   iconAction,
+  iconAutomation,
   iconClothes,
   iconDish,
   iconDreamIsland,
@@ -13,11 +14,11 @@ import {
   type AppIcon
 } from '../icons';
 
-type ComingSoonPage = 'dish' | 'events' | 'actions' | 'dreamIsland' | 'clothes';
+type ComingSoonPage = 'automation' | 'dish' | 'events' | 'actions' | 'dreamIsland' | 'clothes';
 
 type ComingSoonConfig = {
   icon: AppIcon;
-  accent: 'dish' | 'events' | 'actions' | 'dream' | 'clothes';
+  accent: 'automation' | 'dish' | 'events' | 'actions' | 'dream' | 'clothes';
   previewKeys: Array<'one' | 'two' | 'three'>;
 };
 
@@ -28,6 +29,7 @@ const props = defineProps<{
 const { t } = useI18n();
 
 const pageConfigByPage: Record<ComingSoonPage, ComingSoonConfig> = {
+  automation: { icon: iconAutomation, accent: 'automation', previewKeys: ['one', 'two', 'three'] },
   dish: { icon: iconDish, accent: 'dish', previewKeys: ['one', 'two', 'three'] },
   events: { icon: iconEvent, accent: 'events', previewKeys: ['one', 'two', 'three'] },
   actions: { icon: iconAction, accent: 'actions', previewKeys: ['one', 'two', 'three'] },