2a6178e246
- Archive: two-step inline confirm in card dropdown menu - Delete Device/Edge: two-step inline confirm in PropertiesPanel footer - Context menu Delete: floating confirm bar instead of immediate deletion - AI Generate New: two-step confirm when replacing existing diagram nodes - DiagramHeader: show 'Unsaved changes' in amber when isDirty and not saving - deviceRegistry: SECURITY_COLOR #f97316 → #f87171 (deprecated ember orange removed) - CanvasEmptyPrompt: remove backdrop-blur (design system violation) - CanvasEmptyPrompt: remove redundant 'Skip AI' bottom button (duplicate of Build manually card) - CanvasEmptyPrompt: rounded-xl/rounded-2xl → rounded-lg, border-2 → border - Topology bar: h-1 → h-2 + native tooltip with category breakdown - AIAssistPanel: replace pulse-dot loading with spinner (consistent with rest of feature) - ContextMenu: add shadow-lg (consistent with other dropdowns) - DeviceNode tooltip: Position.Bottom → Position.Top (avoids canvas-edge clipping) - CanvasEmptyPrompt: raise ⌘↵ hint from /50 opacity to full text-muted-foreground Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
114 lines
4.8 KiB
TypeScript
114 lines
4.8 KiB
TypeScript
import type { LucideIcon } from 'lucide-react'
|
|
import {
|
|
Router, Layers, ShieldAlert, Wifi, Server, Monitor, Boxes, Package, Cloud,
|
|
Printer, Smartphone, HardDrive, Gauge, Database, CloudCog,
|
|
Cpu, Tablet, Laptop, BatteryCharging, RectangleVertical,
|
|
Cable, Camera, KeyRound, Globe, Video, PlugZap, Radio,
|
|
} from 'lucide-react'
|
|
|
|
export interface DeviceRenderConfig {
|
|
icon: LucideIcon
|
|
color: string
|
|
}
|
|
|
|
// Category-semantic color palette — each color carries meaning:
|
|
// Network (blue) — backbone connectivity layer
|
|
// Security (orange) — critical/protective elements
|
|
// Compute (emerald)— running workloads and VMs
|
|
// Endpoint (amber) — user-facing devices
|
|
// Storage (violet) — data at rest
|
|
// Cloud (cyan) — external/internet-connected
|
|
// Infra (steel) — physical/passive hardware
|
|
export const NETWORK_COLOR = '#60a5fa'
|
|
export const SECURITY_COLOR = '#f87171'
|
|
export const COMPUTE_COLOR = '#34d399'
|
|
export const ENDPOINT_COLOR = '#fbbf24'
|
|
export const STORAGE_COLOR = '#a78bfa'
|
|
export const CLOUD_COLOR = '#67e8f9'
|
|
export const INFRA_COLOR = '#94a3b8'
|
|
|
|
const SYSTEM_DEVICE_ICONS: Record<string, DeviceRenderConfig> = {
|
|
// Network layer
|
|
'router': { icon: Router, color: NETWORK_COLOR },
|
|
'switch': { icon: Layers, color: NETWORK_COLOR },
|
|
'access-point': { icon: Wifi, color: NETWORK_COLOR },
|
|
'load-balancer': { icon: Gauge, color: NETWORK_COLOR },
|
|
|
|
// Security
|
|
'firewall': { icon: ShieldAlert, color: SECURITY_COLOR },
|
|
'badge-reader': { icon: KeyRound, color: SECURITY_COLOR },
|
|
|
|
// Compute
|
|
'server': { icon: Server, color: COMPUTE_COLOR },
|
|
'vm': { icon: Boxes, color: COMPUTE_COLOR },
|
|
'container': { icon: Package, color: COMPUTE_COLOR },
|
|
|
|
// Storage
|
|
'nas': { icon: Database, color: STORAGE_COLOR },
|
|
'san': { icon: HardDrive, color: STORAGE_COLOR },
|
|
'cloud-storage': { icon: CloudCog, color: STORAGE_COLOR },
|
|
|
|
// Cloud / Internet
|
|
'cloud': { icon: Cloud, color: CLOUD_COLOR },
|
|
'aws': { icon: Cloud, color: CLOUD_COLOR },
|
|
'azure': { icon: Cloud, color: CLOUD_COLOR },
|
|
'gcp': { icon: Cloud, color: CLOUD_COLOR },
|
|
'isp': { icon: Globe, color: CLOUD_COLOR },
|
|
|
|
// Endpoints
|
|
'workstation': { icon: Monitor, color: ENDPOINT_COLOR },
|
|
'laptop': { icon: Laptop, color: ENDPOINT_COLOR },
|
|
'tablet': { icon: Tablet, color: ENDPOINT_COLOR },
|
|
'phone': { icon: Smartphone, color: ENDPOINT_COLOR },
|
|
'printer': { icon: Printer, color: ENDPOINT_COLOR },
|
|
|
|
// Infrastructure / physical
|
|
'ups': { icon: BatteryCharging, color: INFRA_COLOR },
|
|
'pdu': { icon: PlugZap, color: INFRA_COLOR },
|
|
'rack': { icon: RectangleVertical, color: INFRA_COLOR },
|
|
'patch-panel': { icon: Cable, color: INFRA_COLOR },
|
|
'camera': { icon: Camera, color: INFRA_COLOR },
|
|
'nvr': { icon: Video, color: INFRA_COLOR },
|
|
'iot': { icon: Radio, color: INFRA_COLOR },
|
|
}
|
|
|
|
const CATEGORY_DEFAULTS: Record<string, DeviceRenderConfig> = {
|
|
'network': { icon: Router, color: NETWORK_COLOR },
|
|
'compute': { icon: Server, color: COMPUTE_COLOR },
|
|
'storage': { icon: Database, color: STORAGE_COLOR },
|
|
'cloud': { icon: Cloud, color: CLOUD_COLOR },
|
|
'endpoint': { icon: Monitor, color: ENDPOINT_COLOR },
|
|
'infrastructure': { icon: PlugZap, color: INFRA_COLOR },
|
|
'security': { icon: ShieldAlert, color: SECURITY_COLOR },
|
|
}
|
|
|
|
const FALLBACK: DeviceRenderConfig = { icon: Cpu, color: INFRA_COLOR }
|
|
|
|
export function getDeviceRenderConfig(slug: string, category?: string): DeviceRenderConfig {
|
|
if (SYSTEM_DEVICE_ICONS[slug]) return SYSTEM_DEVICE_ICONS[slug]
|
|
if (category && CATEGORY_DEFAULTS[category]) return CATEGORY_DEFAULTS[category]
|
|
return FALLBACK
|
|
}
|
|
|
|
export const CATEGORY_LABELS: Record<string, string> = {
|
|
'network': 'Network',
|
|
'compute': 'Compute',
|
|
'storage': 'Storage',
|
|
'cloud': 'Cloud',
|
|
'endpoint': 'Endpoints',
|
|
'infrastructure': 'Infrastructure',
|
|
'security': 'Security',
|
|
}
|
|
|
|
export const CATEGORY_COLORS: Record<string, string> = {
|
|
'network': NETWORK_COLOR,
|
|
'compute': COMPUTE_COLOR,
|
|
'storage': STORAGE_COLOR,
|
|
'cloud': CLOUD_COLOR,
|
|
'endpoint': ENDPOINT_COLOR,
|
|
'infrastructure': INFRA_COLOR,
|
|
'security': SECURITY_COLOR,
|
|
}
|
|
|
|
export const CATEGORY_ORDER = ['network', 'compute', 'storage', 'cloud', 'endpoint', 'infrastructure', 'security']
|