merge: combine all features from both codebases - mobile dashboard + layer panel + notifications + shares + all fixes

frontend/src/types/cad.types.ts

@@ -6,7 +6,7 @@ export type ElementType =
   | 'line' | 'circle' | 'arc' | 'rect' | 'polygon'
   | 'polyline' | 'text' | 'dimension' | 'block_instance' | 'chair'
   | 'seating-row' | 'seating-block' | 'table' | 'stage'
-  | 'leader' | 'revcloud';
+  | 'leader' | 'revcloud' | 'image';
 
 export type LineType = 'solid' | 'dashed' | 'dotted';
 
@@ -54,6 +54,14 @@ export interface CADElement {
   properties: CADProperties;
 }
 
+/** Image element extending base CADElement with image-specific fields */
+export interface ImageElement extends CADElement {
+  type: 'image';
+  properties: CADProperties & {
+    src: string;
+  };
+}
+
 export interface BlockDefinition {
   id: string;
   name: string;
@@ -103,7 +111,7 @@ export interface ExportResult {
 }
 
 export type ToolType =
-  | 'select' | 'pan' | 'zoom-win' | 'line' | 'polyline' | 'circle' | 'arc'
+  | 'select' | 'pan' | 'line' | 'polyline' | 'circle' | 'arc'
   | 'rect' | 'polygon' | 'text' | 'dimension' | 'hatch'
   | 'move' | 'copy' | 'rotate' | 'scale' | 'mirror'
   | 'trim' | 'extend' | 'fillet' | 'offset'

frontend/src/types/ui.types.ts

@@ -6,9 +6,10 @@ import type { CADElement, CADLayer, BlockDefinition, ToolType } from './cad.type
 import type { ToolState } from '../interaction';
 import type { BackgroundConfig } from '../services/backgroundService';
 import type { UserCursor } from '../crdt';
+import type { UnitType } from '../utils/format';
 
 export type ViewMode = '2d' | 'iso' | 'front' | 'top';
-export type RibbonTab = 'start' | 'insert' | 'format' | 'view' | 'tools' | 'ki';
+export type RibbonTab = 'start' | 'insert' | 'format' | 'view' | 'canvas' | 'tools' | 'ki';
 export type RightPanel = 'tool' | 'layer' | 'library' | 'ki';
 export type Theme = 'light' | 'dark';
 export type DrawerTab = 'tool' | 'layer' | 'library' | 'ki';
@@ -67,17 +68,32 @@ export interface TopbarProps {
   onOpenSettings?: () => void;
   onOpenLeftDrawer?: () => void;
   onOpenRightDrawer?: () => void;
+  unit?: UnitType;
+  onUnitChange?: (unit: UnitType) => void;
+  onNavigateBack?: () => void;
 }
 
 export interface SettingsModalProps {
   open: boolean;
   onClose: () => void;
+  unit?: UnitType;
+  gridSize?: number;
+  scaleFactor?: number;
+  onUnitChange?: (unit: UnitType) => void;
+  onGridSizeChange?: (size: number) => void;
+  onScaleFactorChange?: (factor: number) => void;
 }
 
 export interface RibbonBarProps {
   activeTab: RibbonTab;
   onTabChange: (tab: RibbonTab) => void;
   onAction: (action: string) => void;
+  canvasBgColor?: string;
+  gridColor?: string;
+  rulerEnabled?: boolean;
+  onCanvasBgColorChange?: (color: string) => void;
+  onGridColorChange?: (color: string) => void;
+  onToggleRuler?: () => void;
 }
 
 export interface LeftSidebarProps {
@@ -99,6 +115,10 @@ export interface LeftSidebarProps {
   onDeleteBlock?: (id: string) => void;
   onSvgImport?: (svg: string, name: string, category: string) => void;
   onSaveGroupAsBlock?: (name: string) => void;
+  onGroup?: () => void;
+  onUngroup?: () => void;
+  leftbarWidth?: number;
+  onWidthChange?: (width: number) => void;
 }
 
 export interface CanvasAreaProps {
@@ -124,14 +144,23 @@ export interface CanvasAreaProps {
   onZoomIn: () => void;
   onZoomOut: () => void;
   onZoomFit: () => void;
+  zoomCommand?: 'in' | 'out' | 'fit' | '100' | null;
   onTextEdit?: (el: CADElement) => void;
   onCommandTrigger?: (msg: string) => void;
   blocks?: BlockDefinition[];
   onBlockDrop?: (blockId: string, x: number, y: number) => void;
   onSelectionChange?: (selectedIds: string[]) => void;
+  externalSelectionIds?: string[];
   selectedTemplate?: string | null;
   bgConfig?: BackgroundConfig | null;
   remoteCursors?: UserCursor[];
+  groups?: Array<{ id: string; name: string; elementIds: string[]; parentGroupId: string | null }>;
+  unit?: UnitType;
+  gridSize?: number;
+  scaleFactor?: number;
+  canvasBgColor?: string;
+  gridColor?: string;
+  rulerEnabled?: boolean;
 }
 
 export interface RightSidebarProps {
@@ -170,10 +199,18 @@ export interface RightSidebarProps {
   onKISuggestionClick?: (suggestion: KISuggestion) => void;
   kiLoading?: boolean;
   onUpdateElement?: (el: CADElement) => void;
+  selectedElementIds?: string[];
+  groups?: Array<{ id: string; name: string; elementIds: string[]; parentGroupId: string | null }>;
+  onSelectElement?: (id: string) => void;
+  token?: string;
   className?: string;
   onCollapse?: () => void;
   collapsed?: boolean;
   onToggleCollapse?: () => void;
+  unit?: UnitType;
+  scaleFactor?: number;
+  rightbarWidth?: number;
+  onWidthChange?: (width: number) => void;
 }
 
 export interface PropertiesPanelProps {
@@ -181,13 +218,18 @@ export interface PropertiesPanelProps {
   layers: CADLayer[];
   onUpdateProperty: (key: string, value: unknown) => void;
   onDelete?: () => void;
+  unit?: UnitType;
+  scaleFactor?: number;
 }
 
 export interface LayerPanelProps {
   layers: CADLayer[];
   elements?: CADElement[];
   activeLayerId?: string;
+  selectedElementIds?: string[];
+  groups?: Array<{ id: string; name: string; elementIds: string[]; parentGroupId: string | null }>;
   onSelectLayer: (id: string) => void;
+  onSelectElement?: (id: string) => void;
   onAddLayer: () => void;
   onToggleLayer: (id: string) => void;
   onDeleteLayer?: (id: string) => void;
@@ -243,6 +285,9 @@ export interface StatusBarProps {
   onTogglePolar: () => void;
   onToggleGrid: () => void;
   seatCount?: number;
+  unit?: UnitType;
+  scaleFactor?: number;
+  onUnitChange?: (unit: UnitType) => void;
 }
 
 export interface TreeViewProps {