` with `display: contents` — prevents Firefox autofill overlay `NotFoundError` on fragment comment nodes. ## Device Types (18) `server`, `switch`, `router`, `nas`, `gateway`, `livebox`, `access_point`, `camera`, `temperature`, `sensor`, `hub`, `smart_plug`, `alarm`, `light`, `doorbell`, `desktop`, `laptop`, `other` ## Device Fields ### virt_type Form label: "Type d'environnement d'exécution". Values: `null`, `baremetal`, `lxc`, `qemu`. ### url Optional web UI URL. Hidden in the form for `desktop` and `laptop` types. Displayed as a clickable link in the device card, and as a green "Link" tag on topology chips. When adding a new Device field: update `models.py`, add a startup migration in `main.py`, update `DeviceCreate` and `DeviceOut` in `routers/devices.py`, assign explicitly in `create_device` and `update_device`. ## Networks (VlanManager) `vlan_id` is optional. Omitting it creates a plain LAN ("LAN" badge). Networks ordered: LANs first (NULL vlan_id), then VLANs by ascending ID. ## Topology View `TopologyGraph.vue` uses CSS cards only. - Toolbar: Ping button with animated dot indicator + up/down count - WAN card: red, `is_livebox` devices - Gateway card: yellow, `is_gateway` devices - Network list: one full-width card per network, stacked vertically (flex-col); a device appears in every card matching its interfaces - Unassigned card: devices with no interface, not livebox, not gateway - Devices sorted by IP ascending; no-IP devices go last ### Card layout All network cards are full width, stacked vertically. Inside each card, chips are arranged in a horizontal grid (`grid auto-fill, minmax(210px, 1fr)`), wrapping as needed. Card height grows with the number of chips. Single column below 600px. ### Device chip structure ``` [chip-icon (type, Lucide)] [chip-body] [chip-tags] chip-name chip-sub: IP + iface + brand SVGs (11px) chip-tags: Link | GW | LXC | VM + ping dot ``` - `chip-icon`: always the Lucide type icon (`type-only` prop) - Brand logos: small colored SVGs in `chip-sub`, no text label, `title` tooltip on hover - `tag-link`: green, clickable ``, only if `device.url` is set - Ping dot: green (`ping-up`) or red (`ping-down`), shown after a ping run ## DeviceIcon.vue Prop `typeOnly` (bool, default false): - `false`: show brand logos if detected, else Lucide — used in TopologyGraph chips - `true`: always show Lucide type icon — used in DeviceManager cards ## Brand Icons (brandIcons.js) Central `detectBrands(name, description)` returns all matching brand icon objects from `simple-icons`. To check if a brand exists: `node -e "const si = require('./node_modules/simple-icons'); console.log(Object.keys(si).filter(k => k.toLowerCase().includes('name')))"` To add a brand: import `si` in `brandIcons.js`, add entry to `BRANDS` array. Supported brands: Proxmox, Docker, Synology, TrueNAS, Ubiquiti/UniFi, MikroTik, Cisco, TP-Link, ASUS, Netgear, pfSense, OPNsense, OpenWrt, Apache/Apache2, Traefik, MariaDB, Kubernetes/k3s, Debian, Ubuntu, Ansible, Dell, HP, Raspberry Pi, Arduino, KDE/Plasma, Excalidraw, Nextcloud, Paperless-NGX, Uptime Kuma, MkDocs, Jellyfin, Home Assistant, Philips Hue, Xiaomi. ## DeviceManager Filter Bar Compact 28px bar combining: - Search input (name, description, IP — real-time, Escape to clear) - Type dropdown (multi-select, only present types) - Network dropdown (with color swatch) - Brand dropdown (with SVG icon, sorted alphabetically) - Virt dropdown (only if at least one device has a virt_type) All filters combine (AND between categories, OR within). "Clear" button + "X / total" counter when active. ## Ping (discovery.py) `POST /api/discovery/ping` — parallel ICMP ping, 50 workers. - Body: `{ ips: ["1.2.3.4", ...] }` - Returns: `[{ ip, alive }, ...]` Device status: "up" if any of its IPs responds, "down" if all fail, no dot if no IPs. ## SQLite Migrations (main.py) Idempotent startup migrations run before `create_all`: - `_migrate_vlan_nullable()`: recreates `vlans` to allow NULL `vlan_id` - `_migrate_device_virt_type()`: adds `virt_type VARCHAR` to `devices` - `_migrate_device_url()`: adds `url VARCHAR` to `devices` - `_migrate_users()`: creates the `users` table and seeds `admin`/`admin` if count is 0 Pattern for new nullable column: check if column exists via `PRAGMA table_info`, run `ALTER TABLE … ADD COLUMN` if missing. ## Discovery `POST /api/discovery/scan`: ICMP ping sweep + DNS PTR lookup. Max 1024 hosts/network, 100 workers. Needs `cap_add: NET_RAW` (already configured). ## Theme (theme.js) `theme.js` exports `theme` (ref, `'light'`/`'dark'`) and `toggleTheme()`. Persisted in `localStorage('theme')`. Applies/removes `html.dark` class on `document.documentElement`. CSS variables are defined in `App.vue` global `