Migrate UI from Vue.js to React+TypeScript

[Copilot]

Replaces the Vue.js+Vuetify UI with React 18.3+TypeScript while maintaining identical functionality and full backend compatibility.

Changes

Components

• Migrated 5 Vue components to React+TypeScript (.vue → .tsx)
  • Home.tsx: Main streaming interface with WebSocket control
  • DeviceActions.tsx, DeviceControls.tsx: Device configuration and controls
  • FileList.tsx, FileUpload.tsx: APK file management

State Management

• Replaced Pinia with Zustand (3 stores: adb, file, toast)
• Converted to functional hooks pattern from Vue Composition API

Dependencies

• Removed: Vue 3.4, Vuetify 3.6, Pinia 2.1, vue-router
• Added: React 18.3, Zustand 4.5, TypeScript 5.7
• Preserved: All @yume-chan/scrcpy libraries, service layer unchanged

Library Configuration

{
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    }
  }
}

Usage as Library

import { Home, useAdbStore } from '@scrcpy-streaming/ui'

function App() {
  return <Home />
}

Backend Compatibility

Zero backend changes required:

• WebSocket protocol unchanged
• API endpoints unchanged
• Service layer (src/services/) kept as-is
• All utility functions unchanged

Build Output

dist/assets/index.js       359 KB (116 KB gzipped)
TypeScript compilation: ✓
Production build: ✓

Documentation

• README.md: Setup and basic usage
• USAGE.md: Library integration patterns
• MIGRATION.md: Vue→React comparison
• EXAMPLES.md: Integration examples

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Port UI from Node to React</issue_title>
<issue_description># What the current implementation offers
The current UI offers a WebSocket based streaming for Android with controls to operate the devices. The UI is based on Vue.js and controls the node.js backend server.

What needs to be done

We will need to adjust large parts of this repository to move from Vue.js to React+Typscript with Vite. First we should migrate the current UI Package to a react+typescript package. We need to completely remove the Vue application. The idea is to create a react component that can be imported as library in other projects, but we need to keep the same functionality as the current Vue Home View to use the backend server. Important: We want to keep the current functionality as it is and just port it to React+Typescript+Vite stack without breaking backend compatibility.

Todo

• Port the Vue application to react that can be included into other react projects.
• Remove the Vue dependency and code from the repository.
• Test that the React component works with the Node.js backend

Keep the backend (package/api) as it is for now. Do not change the backend.

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Port UI from Node to React #1

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.