feat: add skeleton states, toast notifications, keyboard shortcuts, responsive sidebar, breadcrumb dropdowns, recent items, and file upload integration

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation, useSe
 import { useState, useEffect } from 'react';
 import { ObjectForm } from '@object-ui/plugin-form';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Empty, EmptyTitle } from '@object-ui/components';
+import { toast } from 'sonner';
 import { SchemaRendererProvider } from '@object-ui/react';
 import { ObjectStackAdapter } from './dataSource';
 import type { ConnectionState } from './dataSource';
@@ -20,6 +21,8 @@ import { PageView } from './components/PageView';
 import { ReportView } from './components/ReportView';
 import { ExpressionProvider } from './context/ExpressionProvider';
 import { ConditionalAuthWrapper } from './components/ConditionalAuthWrapper';
+import { KeyboardShortcutsDialog } from './components/KeyboardShortcutsDialog';
+import { useRecentItems } from './hooks/useRecentItems';
 
 // Auth Pages
 import { LoginPage } from './pages/LoginPage';
@@ -35,6 +38,7 @@ import { ProfilePage } from './pages/system/ProfilePage';
 
 import { useParams } from 'react-router-dom';
 import { ThemeProvider } from './components/theme-provider';
+import { ConsoleToaster } from './components/ConsoleToaster';
 
 export function AppContent() {
   const [dataSource, setDataSource] = useState<ObjectStackAdapter | null>(null);
@@ -55,6 +59,7 @@ export function AppContent() {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [editingRecord, setEditingRecord] = useState<any>(null);
   const [refreshKey, setRefreshKey] = useState(0);
+  const { addRecentItem } = useRecentItems();
 
   // Branding is now applied by AppShell via ConsoleLayout
 
@@ -116,6 +121,37 @@ export function AppContent() {
 
   const currentObjectDef = allObjects.find((o: any) => o.name === objectNameFromPath);
 
+  // Track recent items on route change
+  useEffect(() => {
+    if (!activeApp) return;
+    const basePath = `/apps/${activeApp.name}`;
+    if (objectNameFromPath) {
+      const obj = allObjects.find((o: any) => o.name === objectNameFromPath);
+      if (obj) {
+        addRecentItem({
+          id: `object:${obj.name}`,
+          label: obj.label || obj.name,
+          href: `${basePath}/${obj.name}`,
+          type: 'object',
+        });
+      }
+    } else if (cleanParts[2] === 'dashboard' && cleanParts[3]) {
+      addRecentItem({
+        id: `dashboard:${cleanParts[3]}`,
+        label: cleanParts[3].replace(/[-_]/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase()),
+        href: `${basePath}/dashboard/${cleanParts[3]}`,
+        type: 'dashboard',
+      });
+    } else if (cleanParts[2] === 'report' && cleanParts[3]) {
+      addRecentItem({
+        id: `report:${cleanParts[3]}`,
+        label: cleanParts[3].replace(/[-_]/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase()),
+        href: `${basePath}/report/${cleanParts[3]}`,
+        type: 'report',
+      });
+    }
+  }, [location.pathname]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleEdit = (record: any) => {
     setEditingRecord(record);
     setIsDialogOpen(true);
@@ -166,6 +202,7 @@ export function AppContent() {
         objects={allObjects}
         onAppChange={handleAppChange}
       />
+      <KeyboardShortcutsDialog />
       <SchemaRendererProvider dataSource={dataSource || {}}>
       <ErrorBoundary>
       <Routes>
@@ -242,7 +279,15 @@ export function AppContent() {
                                     ? currentObjectDef.fields.map((f: any) => typeof f === 'string' ? f : f.name)
                                     : Object.keys(currentObjectDef.fields))
                                 : [],
-                            onSuccess: () => { setIsDialogOpen(false); setRefreshKey(k => k + 1); }, 
+                            onSuccess: () => {
+                                setIsDialogOpen(false);
+                                setRefreshKey(k => k + 1);
+                                toast.success(
+                                  editingRecord
+                                    ? `${currentObjectDef?.label} updated successfully`
+                                    : `${currentObjectDef?.label} created successfully`
+                                );
+                            }, 
                             onCancel: () => setIsDialogOpen(false),
                             showSubmit: true,
                             showCancel: true,
@@ -292,6 +337,7 @@ function RootRedirect() {
 export function App() {
   return (
     <ThemeProvider defaultTheme="system" storageKey="object-ui-theme">
+      <ConsoleToaster position="bottom-right" />
       <ConditionalAuthWrapper authUrl="/api/auth">
         <BrowserRouter basename="/">
             <Routes>

apps/console/src/components/AppHeader.tsx

@@ -19,8 +19,12 @@ import {
   SidebarTrigger,
   Button,
   Separator,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
 } from '@object-ui/components';
-import { Search, Bell, HelpCircle } from 'lucide-react';
+import { Search, Bell, HelpCircle, ChevronDown } from 'lucide-react';
 
 import { ModeToggle } from './mode-toggle';
 import { ConnectionStatus } from './ConnectionStatus';
@@ -43,10 +47,17 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
 
     const appNameFromRoute = params.appName || pathParts[1];
     const routeType = pathParts[2]; // 'contact', 'dashboard', 'page', 'report'
+    const baseHref = `/apps/${appNameFromRoute}`;
 
-    // Determine breadcrumb items
-    const breadcrumbItems: { label: string; href?: string }[] = [
-      { label: appName, href: `/apps/${appNameFromRoute}` }
+    // Build sibling links for quick navigation dropdown
+    const objectSiblings = objects.map((o: any) => ({
+      label: o.label || o.name,
+      href: `${baseHref}/${o.name}`,
+    }));
+
+    // Determine breadcrumb items with optional siblings for dropdown
+    const breadcrumbItems: { label: string; href?: string; siblings?: { label: string; href: string }[] }[] = [
+      { label: appName, href: baseHref }
     ];
 
     if (routeType === 'dashboard') {
@@ -75,7 +86,8 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
       if (currentObject) {
         breadcrumbItems.push({ 
           label: currentObject.label || routeType,
-          href: `/apps/${appNameFromRoute}/${routeType}`
+          href: `/apps/${appNameFromRoute}/${routeType}`,
+          siblings: objectSiblings,
         });
 
         // Check if viewing a specific record
@@ -102,7 +114,37 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
                         {index > 0 && <BreadcrumbSeparator />}
                         <BreadcrumbItem>
                           {index === breadcrumbItems.length - 1 || !item.href ? (
-                            <BreadcrumbPage className="truncate max-w-[200px]">{item.label}</BreadcrumbPage>
+                            item.siblings && item.siblings.length > 1 ? (
+                              <DropdownMenu>
+                                <DropdownMenuTrigger className="flex items-center gap-1 text-sm font-medium">
+                                  {item.label}
+                                  <ChevronDown className="h-3 w-3" />
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="start" className="max-h-64 overflow-y-auto">
+                                  {item.siblings.map((sibling) => (
+                                    <DropdownMenuItem key={sibling.href} asChild>
+                                      <Link to={sibling.href} className="w-full">{sibling.label}</Link>
+                                    </DropdownMenuItem>
+                                  ))}
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            ) : (
+                              <BreadcrumbPage className="truncate max-w-[200px]">{item.label}</BreadcrumbPage>
+                            )
+                          ) : item.siblings && item.siblings.length > 1 ? (
+                            <DropdownMenu>
+                              <DropdownMenuTrigger className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors">
+                                {item.label}
+                                <ChevronDown className="h-3 w-3" />
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="start" className="max-h-64 overflow-y-auto">
+                                {item.siblings.map((sibling) => (
+                                  <DropdownMenuItem key={sibling.href} asChild>
+                                    <Link to={sibling.href} className="w-full">{sibling.label}</Link>
+                                  </DropdownMenuItem>
+                                ))}
+                              </DropdownMenuContent>
+                            </DropdownMenu>
                           ) : (
                             <BreadcrumbLink asChild>
                               <Link to={item.href} className="truncate max-w-[150px]">{item.label}</Link>

apps/console/src/components/AppSidebar.tsx

@@ -36,17 +36,19 @@ import {
   CollapsibleTrigger,
   CollapsibleContent,
 } from '@object-ui/components';
-import { 
+import {
   ChevronsUpDown, 
   Plus, 
   Settings, 
   LogOut, 
   Database,
   ChevronRight,
+  Clock,
 } from 'lucide-react';
 import appConfig from '../../objectstack.shared';
 import { useExpressionContext, evaluateVisibility } from '../context/ExpressionProvider';
 import { useAuth, getUserInitials } from '@object-ui/auth';
+import { useRecentItems } from '../hooks/useRecentItems';
 
 /**
  * Resolve a Lucide icon component by name string.
@@ -77,6 +79,7 @@ function getIcon(name?: string): React.ComponentType<any> {
 export function AppSidebar({ activeAppName, onAppChange }: { activeAppName: string, onAppChange: (name: string) => void }) {
   const { isMobile } = useSidebar();
   const { user, signOut } = useAuth();
+  const { recentItems } = useRecentItems();
 
   const apps = appConfig.apps || [];
   // Filter out inactive apps
@@ -155,6 +158,32 @@ export function AppSidebar({ activeAppName, onAppChange }: { activeAppName: stri
 
       <SidebarContent>
          <NavigationTree items={activeApp.navigation || []} activeAppName={activeAppName} />
+
+         {/* Recent Items */}
+         {recentItems.length > 0 && (
+           <SidebarGroup>
+             <SidebarGroupLabel className="flex items-center gap-1.5">
+               <Clock className="h-3.5 w-3.5" />
+               Recent
+             </SidebarGroupLabel>
+             <SidebarGroupContent>
+               <SidebarMenu>
+                 {recentItems.slice(0, 5).map(item => (
+                   <SidebarMenuItem key={item.id}>
+                     <SidebarMenuButton asChild tooltip={item.label}>
+                       <Link to={item.href}>
+                         <span className="text-muted-foreground">
+                           {item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : '📄'}
+                         </span>
+                         <span className="truncate">{item.label}</span>
+                       </Link>
+                     </SidebarMenuButton>
+                   </SidebarMenuItem>
+                 ))}
+               </SidebarMenu>
+             </SidebarGroupContent>
+           </SidebarGroup>
+         )}
       </SidebarContent>
 
       <SidebarFooter>

apps/console/src/components/ConsoleLayout.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { AppShell } from '@object-ui/layout';
 import { AppSidebar } from './AppSidebar';
 import { AppHeader } from './AppHeader';
+import { useResponsiveSidebar } from '../hooks/useResponsiveSidebar';
 import type { ConnectionState } from '../dataSource';
 
 interface ConsoleLayoutProps {
@@ -21,6 +22,12 @@ interface ConsoleLayoutProps {
   connectionState?: ConnectionState;
 }
 
+/** Inner component that can access SidebarProvider context */
+function ConsoleLayoutInner({ children }: { children: React.ReactNode }) {
+  useResponsiveSidebar();
+  return <>{children}</>;
+}
+
 export function ConsoleLayout({ 
   children, 
   activeAppName, 
@@ -59,7 +66,9 @@ export function ConsoleLayout({
           : undefined
       }
     >
-      {children}
+      <ConsoleLayoutInner>
+        {children}
+      </ConsoleLayoutInner>
     </AppShell>
   );
 }

apps/console/src/components/ConsoleToaster.tsx

@@ -0,0 +1,43 @@
+/**
+ * ConsoleToaster
+ *
+ * Sonner Toaster configured for the console app. Uses the local ThemeProvider
+ * instead of next-themes to resolve the current color scheme.
+ * @module
+ */
+
+import { Toaster as Sonner } from 'sonner';
+import { CircleCheck, Info, LoaderCircle, OctagonX, TriangleAlert } from 'lucide-react';
+import { useTheme } from './theme-provider';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+export function ConsoleToaster(props: ToasterProps) {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      icons={{
+        success: <CircleCheck className="h-4 w-4" />,
+        info: <Info className="h-4 w-4" />,
+        warning: <TriangleAlert className="h-4 w-4" />,
+        error: <OctagonX className="h-4 w-4" />,
+        loading: <LoaderCircle className="h-4 w-4 animate-spin" />,
+      }}
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+}

apps/console/src/components/DashboardView.tsx

@@ -3,21 +3,34 @@
  * Renders a dashboard based on the dashboardName parameter
  */
 
+import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { DashboardRenderer } from '@object-ui/plugin-dashboard';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { LayoutDashboard } from 'lucide-react';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { SkeletonDashboard } from './skeletons';
 import appConfig from '../../objectstack.shared';
 
 export function DashboardView({ dataSource }: { dataSource?: any }) {
   const { dashboardName } = useParams<{ dashboardName: string }>();
   const { showDebug, toggleDebug } = useMetadataInspector();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate initial data load; real implementation would await dataSource readiness
+    const timer = setTimeout(() => setIsLoading(false), 0);
+    return () => clearTimeout(timer);
+  }, [dashboardName]);
 
   // Find dashboard definition in config
   // In a real implementation, this would fetch from the server
   const dashboard = appConfig.dashboards?.find((d: any) => d.name === dashboardName);
 
+  if (isLoading) {
+    return <SkeletonDashboard />;
+  }
+
   if (!dashboard) {
     return (
       <div className="h-full flex items-center justify-center p-8">