Merge pull request #759 from objectstack-ai/copilot/add-navigation-tree-designer

Author: hotlong

ROADMAP.md

@@ -426,6 +426,10 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Deep tree operations (remove/reorder works at any depth)
 - [x] Live preview sidebar showing navigation as rendered
 - [x] Type badges with color coding
+- [x] Icon editing (inline icon name input with pencil button, Enter/Escape commit/discard)
+- [x] Visibility toggle (eye/eye-off icon per node, hidden badge display)
+- [x] Export/Import navigation JSON Schema (toolbar buttons with file I/O, custom callbacks)
+- [x] Mobile responsive layout (flex-col on mobile, sm:flex-row on desktop)
 
 **Page Canvas Editor:**
 - [x] Component palette (Grid, Kanban, Calendar, Gallery, Dashboard, Form, Layout Grid)
@@ -455,10 +459,10 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Disabled state support
 
 **i18n:**
-- [x] `appDesigner` section with 94 keys added to all 10 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko)
+- [x] `appDesigner` section with 103 keys added to all 10 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko)
 - [x] `useDesignerTranslation` safe wrapper hook with English fallback (no I18nProvider required)
 - [x] AppCreationWizard fully i18n-integrated (all labels, buttons, step names, validation messages)
-- [x] NavigationDesigner fully i18n-integrated (type badges, quick-add labels, aria-labels, preview)
+- [x] NavigationDesigner fully i18n-integrated (type badges, quick-add labels, aria-labels, preview, icon editing, visibility, export/import)
 
 **UX Enhancements:**
 - [x] Cancel confirmation dialog with unsaved-changes detection
@@ -468,12 +472,12 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 **Testing:**
 - [x] 9 type tests (isValidAppName, wizardDraftToAppSchema, type shapes)
 - [x] 41 AppCreationWizard tests (rendering, steps 1-4, navigation, callbacks, cancel confirm, save draft, i18n, read-only)
-- [x] 18 NavigationDesigner tests (rendering, add, remove, groups, badges, i18n, read-only)
+- [x] 33 NavigationDesigner tests (rendering, add, remove, groups, badges, i18n, read-only, icon editing, visibility toggle, export/import, responsive)
 - [x] 7 EditorModeToggle tests (render, active mode, onChange, accessibility, disabled)
 - [x] 10 DashboardEditor tests (rendering, add/remove widgets, property panel, read-only)
 - [x] 9 PageCanvasEditor tests (rendering, add/remove components, property panel, read-only)
 - [x] 12 ObjectViewConfigurator tests (rendering, view type switch, column visibility, toggles, read-only)
-- [x] **Total: 165 tests across 9 files, all passing**
+- [x] **Total: 180 tests across 9 files, all passing**
 
 **ComponentRegistry:**
 - [x] Registered: `app-creation-wizard`, `navigation-designer`, `dashboard-editor`, `page-canvas-editor`, `object-view-configurator`

packages/i18n/src/locales/ar.ts

@@ -230,6 +230,15 @@ const ar = {
     navTypeGroup: 'مجموعة',
     navTypeSeparator: 'فاصل',
     navTypeAction: 'إجراء',
+    navEditIcon: 'تعديل الأيقونة',
+    navToggleVisible: 'تبديل الظهور',
+    navHidden: 'مخفي',
+    navExportSchema: 'تصدير JSON',
+    navImportSchema: 'استيراد JSON',
+    navExportSuccess: 'تم تصدير هيكل التنقل',
+    navImportSuccess: 'تم استيراد هيكل التنقل',
+    navImportError: 'ملف JSON تنقل غير صالح',
+    navIconPlaceholder: 'اسم الأيقونة (مثل Users)',
   },
   console: {
     title: 'وحدة تحكم ObjectStack',

packages/i18n/src/locales/de.ts

@@ -229,6 +229,15 @@ const de = {
     navTypeGroup: 'Gruppe',
     navTypeSeparator: 'Trennlinie',
     navTypeAction: 'Aktion',
+    navEditIcon: 'Symbol bearbeiten',
+    navToggleVisible: 'Sichtbarkeit umschalten',
+    navHidden: 'Ausgeblendet',
+    navExportSchema: 'JSON exportieren',
+    navImportSchema: 'JSON importieren',
+    navExportSuccess: 'Navigationsstruktur exportiert',
+    navImportSuccess: 'Navigationsstruktur importiert',
+    navImportError: 'Ungültiges Navigations-JSON',
+    navIconPlaceholder: 'Symbolname (z.B. Users)',
   },
   console: {
     title: 'ObjectStack Konsole',

packages/i18n/src/locales/en.ts

@@ -229,6 +229,15 @@ const en = {
     navTypeGroup: 'Group',
     navTypeSeparator: 'Separator',
     navTypeAction: 'Action',
+    navEditIcon: 'Edit icon',
+    navToggleVisible: 'Toggle visibility',
+    navHidden: 'Hidden',
+    navExportSchema: 'Export JSON',
+    navImportSchema: 'Import JSON',
+    navExportSuccess: 'Navigation schema exported',
+    navImportSuccess: 'Navigation schema imported',
+    navImportError: 'Invalid navigation JSON',
+    navIconPlaceholder: 'Icon name (e.g. Users)',
   },
   console: {
     title: 'ObjectStack Console',

packages/i18n/src/locales/es.ts

@@ -229,6 +229,15 @@ const es = {
     navTypeGroup: 'Grupo',
     navTypeSeparator: 'Separador',
     navTypeAction: 'Acción',
+    navEditIcon: 'Editar icono',
+    navToggleVisible: 'Alternar visibilidad',
+    navHidden: 'Oculto',
+    navExportSchema: 'Exportar JSON',
+    navImportSchema: 'Importar JSON',
+    navExportSuccess: 'Estructura de navegación exportada',
+    navImportSuccess: 'Estructura de navegación importada',
+    navImportError: 'JSON de navegación inválido',
+    navIconPlaceholder: 'Nombre del icono (ej: Users)',
   },
   console: {
     title: 'Consola ObjectStack',

packages/i18n/src/locales/fr.ts

@@ -229,6 +229,15 @@ const fr = {
     navTypeGroup: 'Groupe',
     navTypeSeparator: 'Séparateur',
     navTypeAction: 'Action',
+    navEditIcon: 'Modifier l\'icône',
+    navToggleVisible: 'Basculer la visibilité',
+    navHidden: 'Masqué',
+    navExportSchema: 'Exporter JSON',
+    navImportSchema: 'Importer JSON',
+    navExportSuccess: 'Structure de navigation exportée',
+    navImportSuccess: 'Structure de navigation importée',
+    navImportError: 'JSON de navigation invalide',
+    navIconPlaceholder: 'Nom d\'icône (ex: Users)',
   },
   console: {
     title: 'Console ObjectStack',

packages/i18n/src/locales/ja.ts

@@ -229,6 +229,15 @@ const ja = {
     navTypeGroup: 'グループ',
     navTypeSeparator: 'セパレーター',
     navTypeAction: 'アクション',
+    navEditIcon: 'アイコン編集',
+    navToggleVisible: '表示切替',
+    navHidden: '非表示',
+    navExportSchema: 'JSON エクスポート',
+    navImportSchema: 'JSON インポート',
+    navExportSuccess: 'ナビゲーション構造をエクスポートしました',
+    navImportSuccess: 'ナビゲーション構造をインポートしました',
+    navImportError: '無効なナビゲーション JSON',
+    navIconPlaceholder: 'アイコン名（例: Users）',
   },
   console: {
     title: 'ObjectStack コンソール',

packages/i18n/src/locales/ko.ts

@@ -229,6 +229,15 @@ const ko = {
     navTypeGroup: '그룹',
     navTypeSeparator: '구분선',
     navTypeAction: '액션',
+    navEditIcon: '아이콘 편집',
+    navToggleVisible: '표시 전환',
+    navHidden: '숨김',
+    navExportSchema: 'JSON 내보내기',
+    navImportSchema: 'JSON 가져오기',
+    navExportSuccess: '내비게이션 구조를 내보냈습니다',
+    navImportSuccess: '내비게이션 구조를 가져왔습니다',
+    navImportError: '잘못된 내비게이션 JSON',
+    navIconPlaceholder: '아이콘 이름 (예: Users)',
   },
   console: {
     title: 'ObjectStack 콘솔',

packages/i18n/src/locales/pt.ts

@@ -229,6 +229,15 @@ const pt = {
     navTypeGroup: 'Grupo',
     navTypeSeparator: 'Separador',
     navTypeAction: 'Ação',
+    navEditIcon: 'Editar ícone',
+    navToggleVisible: 'Alternar visibilidade',
+    navHidden: 'Oculto',
+    navExportSchema: 'Exportar JSON',
+    navImportSchema: 'Importar JSON',
+    navExportSuccess: 'Estrutura de navegação exportada',
+    navImportSuccess: 'Estrutura de navegação importada',
+    navImportError: 'JSON de navegação inválido',
+    navIconPlaceholder: 'Nome do ícone (ex: Users)',
   },
   console: {
     title: 'Console ObjectStack',

packages/i18n/src/locales/ru.ts

@@ -229,6 +229,15 @@ const ru = {
     navTypeGroup: 'Группа',
     navTypeSeparator: 'Разделитель',
     navTypeAction: 'Действие',
+    navEditIcon: 'Изменить иконку',
+    navToggleVisible: 'Переключить видимость',
+    navHidden: 'Скрыто',
+    navExportSchema: 'Экспорт JSON',
+    navImportSchema: 'Импорт JSON',
+    navExportSuccess: 'Структура навигации экспортирована',
+    navImportSuccess: 'Структура навигации импортирована',
+    navImportError: 'Недопустимый JSON навигации',
+    navIconPlaceholder: 'Имя иконки (напр. Users)',
   },
   console: {
     title: 'Консоль ObjectStack',