Fix sidebar header truncation and chevron visibility

[Copilot]

Long device names overflow the sidebar header, hiding the chevron toggle button. The chevron must remain visible at all times when the sidebar is expanded.

Before

After

Changes

• Sidebar.tsx (new) — collapsible sidebar component showing emulator status (device name + connected/disconnected) and a Dashboard nav link. Device name carries a title attribute so the full string is accessible on hover.

• CSS — truncation fix

  .sidebar-device-info { flex: 1; min-width: 0; overflow: hidden; }
  .sidebar-device-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  min-width: 0 is the key — without it, flex items won't shrink below their content width and text-overflow never fires.

• CSS — chevron always visible

  .sidebar-toggle { flex-shrink: 0; margin-left: auto; }

  Prevents the toggle button from being squeezed out by expanding text content.

• App.tsx — wraps existing sections in an app-layout (sidebar + <main>) and imports the new Sidebar component.

• Dark mode — sidebar colours follow the existing prefers-color-scheme: dark block.

This PR builds on top of the React/TypeScript dashboard rewrite (currently open as PR #337). The Vue.js files (js/index.js, js/vue.global.js) are removed in favour of the Vite + React build.

[jvaclavik]

Wrong repo 🤦‍♂️