Merge pull request #786 from objectstack-ai/copilot/fix-top-nav-application-visibility

Author: hotlong

ROADMAP.md

@@ -494,15 +494,15 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] `useConfirmDialog` hook integration for cancel workflow
 
 **Testing:**
-- [x] 9 type tests (isValidAppName, wizardDraftToAppSchema, type shapes)
+- [x] 11 type tests (isValidAppName, wizardDraftToAppSchema, type shapes)
 - [x] 41 AppCreationWizard tests (rendering, steps 1-4, navigation, callbacks, cancel confirm, save draft, 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] 22 DashboardEditor tests (rendering, add/remove widgets, property panel, read-only, undo/redo, export/import, preview mode, widget layout)
 - [x] 23 PageCanvasEditor tests (rendering, add/remove components, property panel, read-only, mode tabs, undo/redo, export/import, preview mode)
 - [x] 12 ObjectViewConfigurator tests (rendering, view type switch, column visibility, toggles, read-only)
 - [x] 29 BrandingEditor tests (rendering, editing, light/dark preview, read-only, undo/redo, export/import, keyboard shortcuts, preview content)
-- [x] **Total: 235 tests across 10 files, all passing**
+- [x] **Total: 238 tests across 10 files, all passing**
 
 **ComponentRegistry:**
 - [x] Registered: `app-creation-wizard`, `navigation-designer`, `dashboard-editor`, `page-canvas-editor`, `object-view-configurator`, `branding-editor`
@@ -531,12 +531,13 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] AppSidebar "Edit App" button → navigates to `/edit-app/:appName`
 - [x] CommandPalette "Create New App" command (⌘+K → Actions group)
 - [x] Empty state CTA "Create Your First App" when no apps configured
-- [x] `wizardDraftToAppSchema()` conversion on completion
+- [x] `wizardDraftToAppSchema()` conversion on completion — includes `icon`, `label`, `branding` fields
+- [x] `EditAppPage` merges wizard output with original app config to preserve fields not in wizard (e.g. `active`)
 - [x] `client.meta.saveItem('app', name, schema)` — persists app metadata to backend on create/edit
 - [x] MSW PUT handler for `/meta/:type/:name` — dev/mock mode metadata persistence
 - [x] Draft persistence to localStorage with auto-clear on success
 - [x] `createApp` i18n key added to all 10 locales
-- [x] 13 console integration tests (routes, wizard callbacks, draft persistence, saveItem, CommandPalette)
+- [x] 14 console integration tests (routes, wizard callbacks, draft persistence, saveItem, merge preservation, CommandPalette)
 
 ### P1.12 System Settings & App Management Center
 

apps/console/src/__tests__/app-creation-integration.test.tsx

@@ -135,7 +135,7 @@ vi.mock('@object-ui/plugin-designer', () => ({
     <div data-testid="app-creation-wizard">
       <span data-testid="wizard-objects-count">{availableObjects?.length ?? 0}</span>
       {initialDraft?.name && <span data-testid="wizard-initial-name">{initialDraft.name}</span>}
-      <button data-testid="wizard-complete" onClick={() => onComplete?.({ name: 'my_app', title: 'My App', branding: { logo: '', primaryColor: '#000', favicon: '' }, objects: [], navigation: [], layout: 'sidebar' })}>
+      <button data-testid="wizard-complete" onClick={() => onComplete?.({ name: 'my_app', title: 'My App', icon: 'LayoutDashboard', branding: { logo: '', primaryColor: '#000', favicon: '' }, objects: [], navigation: [], layout: 'sidebar' })}>
         Complete
       </button>
       <button data-testid="wizard-cancel" onClick={() => onCancel?.()}>
@@ -424,6 +424,27 @@ describe('Console App Creation Integration', () => {
         );
       });
     });
+
+    it('preserves original app fields not managed by wizard after merge', async () => {
+      renderApp('/apps/sales/edit-app/sales');
+
+      await waitFor(() => {
+        expect(screen.getByTestId('wizard-complete')).toBeInTheDocument();
+      }, { timeout: 10000 });
+
+      fireEvent.click(screen.getByTestId('wizard-complete'));
+
+      await waitFor(() => {
+        const client = MockAdapterInstance.getClient();
+        const savedSchema = client.meta.saveItem.mock.calls[0]?.[2];
+        // Wizard-generated fields are present
+        expect(savedSchema.label).toBe('My App');
+        expect(savedSchema.icon).toBe('LayoutDashboard');
+        expect(savedSchema.branding).toEqual({ logo: '', primaryColor: '#000', favicon: '' });
+        // Original app field not in wizard is preserved via merge
+        expect(savedSchema.active).toBe(true);
+      });
+    });
   });
 
   // --- CommandPalette: Create App Command ---

apps/console/src/pages/EditAppPage.tsx

@@ -59,10 +59,12 @@ export function EditAppPage() {
     async (draft: AppWizardDraft) => {
       try {
         const appSchema = wizardDraftToAppSchema(draft);
+        // Merge with original app config to preserve fields not maintained in wizard
+        const merged = { ...appToEdit, ...appSchema };
         // Persist app metadata to backend
         const client = adapter?.getClient();
         if (client) {
-          await client.meta.saveItem('app', draft.name, appSchema);
+          await client.meta.saveItem('app', draft.name, merged);
         }
         toast.success(`Application "${draft.title}" updated successfully`);
         await refresh?.();
@@ -71,7 +73,7 @@ export function EditAppPage() {
         toast.error(err?.message || 'Failed to update application');
       }
     },
-    [navigate, refresh, adapter],
+    [navigate, refresh, adapter, appToEdit],
   );
 
   const handleCancel = useCallback(() => {

packages/types/src/__tests__/app-creation-types.test.ts

@@ -66,9 +66,16 @@ describe('App Creation Types', () => {
       expect(schema.type).toBe('app');
       expect(schema.name).toBe('test_app');
       expect(schema.title).toBe('Test Application');
+      expect(schema.label).toBe('Test Application');
       expect(schema.description).toBe('A test app');
+      expect(schema.icon).toBe('LayoutDashboard');
       expect(schema.logo).toBe('https://example.com/logo.svg');
       expect(schema.favicon).toBe('https://example.com/favicon.ico');
+      expect(schema.branding).toEqual({
+        logo: 'https://example.com/logo.svg',
+        primaryColor: '#3b82f6',
+        favicon: 'https://example.com/favicon.ico',
+      });
       expect(schema.layout).toBe('sidebar');
       expect(schema.navigation).toHaveLength(1);
       expect(schema.navigation![0].id).toBe('nav_1');
@@ -87,6 +94,46 @@ describe('App Creation Types', () => {
       const schema = wizardDraftToAppSchema(draft);
       expect(schema.navigation).toEqual([]);
       expect(schema.layout).toBe('header');
+      expect(schema.label).toBe('Empty');
+    });
+
+    it('should preserve icon and label for sidebar/app-switcher display', () => {
+      const draft: AppWizardDraft = {
+        name: 'sales_crm',
+        title: 'Sales CRM',
+        icon: 'TrendingUp',
+        layout: 'sidebar',
+        objects: [],
+        navigation: [],
+        branding: {
+          logo: 'https://example.com/sales-logo.png',
+          primaryColor: '#10b981',
+        },
+      };
+
+      const schema = wizardDraftToAppSchema(draft);
+      // These fields are critical for AppSidebar and app switcher
+      expect(schema.icon).toBe('TrendingUp');
+      expect(schema.label).toBe('Sales CRM');
+      expect(schema.branding).toEqual({
+        logo: 'https://example.com/sales-logo.png',
+        primaryColor: '#10b981',
+      });
+    });
+
+    it('should handle draft without icon gracefully', () => {
+      const draft: AppWizardDraft = {
+        name: 'no_icon_app',
+        title: 'No Icon',
+        layout: 'sidebar',
+        objects: [],
+        navigation: [],
+        branding: {},
+      };
+
+      const schema = wizardDraftToAppSchema(draft);
+      expect(schema.icon).toBeUndefined();
+      expect(schema.label).toBe('No Icon');
     });
   });
 

packages/types/src/app.ts

@@ -162,11 +162,21 @@ export interface AppSchema extends BaseSchema {
    */
   title?: string;
 
+  /**
+   * Display Label (used in navigation and app switcher)
+   */
+  label?: string;
+
   /**
    * Application Description
    */
   description?: string;
 
+  /**
+   * Icon name (Lucide) for app switcher and navigation
+   */
+  icon?: string;
+
   /**
    * Logo URL or Icon name
    */
@@ -177,6 +187,17 @@ export interface AppSchema extends BaseSchema {
    */
   favicon?: string;
 
+  /**
+   * Branding configuration
+   */
+  branding?: BrandingConfig;
+
+  /**
+   * Whether the application is active (visible in app switcher)
+   * @default true
+   */
+  active?: boolean;
+
   /**
    * Global Layout Strategy
    * - sidebar: Standard admin layout with left sidebar
@@ -461,9 +482,12 @@ export function wizardDraftToAppSchema(draft: AppWizardDraft): AppSchema {
     type: 'app',
     name: draft.name,
     title: draft.title,
+    label: draft.title,
     description: draft.description,
+    icon: draft.icon,
     logo: draft.branding.logo,
     favicon: draft.branding.favicon,
+    branding: draft.branding,
     layout: draft.layout,
     navigation: draft.navigation,
   };