Add icons to navigation items and update layout options in various configurations

hotlong · hotlong · commit 97c03fae61f9 · 2026-02-04T21:52:13.000+08:00
diff --git a/apps/site/lib/layout.shared.tsx b/apps/site/lib/layout.shared.tsx
@@ -26,6 +26,10 @@ export function baseOptions(): BaseLayoutProps {
         text: 'Storybook',
         url: 'https://storybook.objectui.org',
       },
+      {
+        text: 'Demo',
+        url: 'https://console.objectui.org',
+      },
     ],
   };
 }
diff --git a/examples/crm/objectstack.config.ts b/examples/crm/objectstack.config.ts
@@ -24,7 +24,7 @@ export default defineStack({
     App.create({
       name: 'crm_app',
       label: 'CRM',
-      icon: 'users',
+      icon: 'briefcase',
       navigation: [
         {
           id: 'nav_dashboard',
@@ -37,48 +37,56 @@ export default defineStack({
           id: 'nav_contacts',
           type: 'object',
           objectName: 'contact',
-          label: 'Contacts'
+          label: 'Contacts',
+          icon: 'users'
         },
         {
           id: 'nav_accounts',
           type: 'object',
           objectName: 'account',
-          label: 'Accounts'
+          label: 'Accounts',
+          icon: 'building-2'
         },
         {
           id: 'nav_opportunities',
           type: 'object',
           objectName: 'opportunity',
-          label: 'Opportunities'
+          label: 'Opportunities',
+          icon: 'trending-up'
         },
         {
           id: 'nav_projects',
           type: 'object',
           objectName: 'project_task',
-          label: 'Projects'
+          label: 'Projects',
+          icon: 'kanban-square'
         },
         {
           id: 'nav_events',
           type: 'object',
           objectName: 'event',
-          label: 'Calendar'
+          label: 'Calendar',
+          icon: 'calendar'
         },
         {
           id: 'nav_sales',
           type: 'group',
           label: 'Sales',
+          icon: 'banknote',
           children: [
              {
                 id: 'nav_orders',
                 type: 'object',
                 objectName: 'order',
-                label: 'Orders'
+                label: 'Orders',
+                icon: 'shopping-cart'
              },
              {
                 id: 'nav_products',
                 type: 'object',
                 objectName: 'product',
-                label: 'Products'
+                label: 'Products',
+                icon: 'package'
              }
           ]
         }
diff --git a/examples/crm/src/objects/account.object.ts b/examples/crm/src/objects/account.object.ts
@@ -3,7 +3,7 @@ import { ObjectSchema, Field } from '@objectstack/spec/data';
 export const AccountObject = ObjectSchema.create({
   name: 'account',
   label: 'Account',
-  icon: 'building',
+  icon: 'building-2',
   fields: {
     name: Field.text({ label: 'Account Name', required: true, searchable: true }),
     industry: Field.select(['Technology', 'Finance', 'Healthcare', 'Retail', 'Manufacturing'], { label: 'Industry' }),
diff --git a/examples/crm/src/objects/project.object.ts b/examples/crm/src/objects/project.object.ts
@@ -3,7 +3,7 @@ import { ObjectSchema, Field } from '@objectstack/spec/data';
 export const ProjectObject = ObjectSchema.create({
   name: 'project_task',
   label: 'Project Task',
-  icon: 'clipboard-list',
+  icon: 'kanban-square',
   fields: {
     name: Field.text({ label: 'Task Name', required: true, searchable: true }),
     start_date: Field.date({ label: 'Start Date', required: true }),
diff --git a/examples/kitchen-sink/objectstack.config.ts b/examples/kitchen-sink/objectstack.config.ts
@@ -18,31 +18,36 @@ export default defineStack({
           id: 'nav_kitchen_sink',
           type: 'object',
           objectName: 'kitchen_sink',
-          label: 'Kitchen Sink'
+          label: 'Kitchen Sink',
+          icon: 'utensils'
         },
         {
           id: 'nav_dash',
           type: 'dashboard',
           dashboardName: 'sales_dashboard',
-          label: 'Sales Overview'
+          label: 'Sales Overview',
+          icon: 'layout-dashboard'
         },
         {
           id: 'nav_help',
           type: 'page',
           pageName: 'help_page',
-          label: 'Help & Resources'
+          label: 'Help & Resources',
+          icon: 'help-circle'
         },
         {
           id: 'nav_listview',
           type: 'page',
           pageName: 'list_view_demo',
-          label: 'ListView Demo'
+          label: 'ListView Demo',
+          icon: 'table'
         },
         {
           id: 'nav_detailview',
           type: 'page',
           pageName: 'detail_view_demo',
-          label: 'DetailView Demo'
+          label: 'DetailView Demo',
+          icon: 'file-text'
         }
       ]
     })
diff --git a/examples/kitchen-sink/src/objects/kitchen_sink.object.ts b/examples/kitchen-sink/src/objects/kitchen_sink.object.ts
@@ -3,6 +3,7 @@ import { ObjectSchema, Field } from '@objectstack/spec/data';
 export const KitchenSinkObject = ObjectSchema.create({
   name: 'kitchen_sink',
   label: 'Kitchen Sink',
+  icon: 'utensils',
   description: 'Shows all available field types for testing',
   fields: {
     // Basic Text
diff --git a/examples/msw-todo/objectstack.config.ts b/examples/msw-todo/objectstack.config.ts
@@ -46,12 +46,14 @@ export default defineStack({
       id: 'group_tasks',
       type: 'group',
       label: 'Tasks',
+      icon: 'list-todo',
       children: [
         { 
           id: 'nav_tasks',
           type: 'object', 
           objectName: 'task',
-          label: 'My Tasks'
+          label: 'My Tasks',
+          icon: 'check-circle-2'
         }
       ]
     }
diff --git a/examples/todo/objectstack.config.ts b/examples/todo/objectstack.config.ts
@@ -13,19 +13,20 @@ export default defineStack({
       icon: 'check-square',
       branding: {
         primaryColor: '#10B981',
-        logo: '/assets/todo-logo.png',
       },
       navigation: [
         {
           id: 'group_tasks',
           type: 'group',
           label: 'Tasks',
+          icon: 'list-todo',
           children: [
             { 
               id: 'nav_todo_task',
               type: 'object', 
               objectName: 'todo_task',
-              label: 'My Tasks'
+              label: 'My Tasks',
+              icon: 'check-circle-2'
             }
           ]
         }
diff --git a/examples/todo/src/domains/todo/task.object.ts b/examples/todo/src/domains/todo/task.object.ts
@@ -3,7 +3,7 @@ import { ObjectSchema, Field } from '@objectstack/spec/data';
 export const TodoTask = ObjectSchema.create({
   name: 'todo_task',
   label: 'Todo Task',
-  icon: 'check-square',
+  icon: 'check-circle-2',
   titleFormat: '{subject}',
   compactLayout: ['subject', 'due_date', 'priority', 'is_completed'],
   enable: {

Original file line number	Diff line number	Diff line change
`@@ -46,12 +46,14 @@ export default defineStack({`
`46`	`46`	`id: 'group_tasks',`
`47`	`47`	`type: 'group',`
`48`	`48`	`label: 'Tasks',`
	`49`	`+ icon: 'list-todo',`
`49`	`50`	`children: [`
`50`	`51`	`{`
`51`	`52`	`id: 'nav_tasks',`
`52`	`53`	`type: 'object',`
`53`	`54`	`objectName: 'task',`
`54`		`- label: 'My Tasks'`
	`55`	`+ label: 'My Tasks',`
	`56`	`+ icon: 'check-circle-2'`
`55`	`57`	`}`
`56`	`58`	`]`
`57`	`59`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,19 +13,20 @@ export default defineStack({`
`13`	`13`	`icon: 'check-square',`
`14`	`14`	`branding: {`
`15`	`15`	`primaryColor: '#10B981',`
`16`		`- logo: '/assets/todo-logo.png',`
`17`	`16`	`},`
`18`	`17`	`navigation: [`
`19`	`18`	`{`
`20`	`19`	`id: 'group_tasks',`
`21`	`20`	`type: 'group',`
`22`	`21`	`label: 'Tasks',`
	`22`	`+ icon: 'list-todo',`
`23`	`23`	`children: [`
`24`	`24`	`{`
`25`	`25`	`id: 'nav_todo_task',`
`26`	`26`	`type: 'object',`
`27`	`27`	`objectName: 'todo_task',`
`28`		`- label: 'My Tasks'`
	`28`	`+ label: 'My Tasks',`
	`29`	`+ icon: 'check-circle-2'`
`29`	`30`	`}`
`30`	`31`	`]`
`31`	`32`	`}`