Skip to content

Commit 0bcc1b2

Browse files
feat(frontend): rewrite frontend in React + TypeScript (#128)
Rewrites the monolithic vanilla HTML/JS frontend (public/index.html + public/terminal.html, ~6400 lines combined) into a modular React + TypeScript app using Vite. Every feature from the original UI is preserved: session management, multi-tab terminals, split view, touch bar, command palette, themes, search, copy overlay, upload, share/QR, notifications, and mobile-optimized layout. The built output goes to public-react/ and is served automatically when present. Closes #127 --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 7647e1f commit 0bcc1b2

96 files changed

Lines changed: 18854 additions & 7946 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.github/workflows/ci.yml

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ jobs:
3030
node-version: ${{ matrix.node-version }}
3131
cache: npm
3232
- run: npm ci
33+
- name: Build frontend
34+
run: cd frontend && npm ci && npm run build
3335
- run: npm test
3436

3537
coverage:
@@ -45,6 +47,8 @@ jobs:
4547
node-version: 22
4648
cache: npm
4749
- run: npm ci
50+
- name: Build frontend
51+
run: cd frontend && npm ci && npm run build
4852
- run: npm run test:coverage
4953
- name: Check coverage threshold
5054
run: |
@@ -96,6 +100,25 @@ jobs:
96100
- run: npm ci
97101
- run: node --check src/*.js bin/*.js
98102

103+
frontend:
104+
name: Frontend Build
105+
runs-on: ubuntu-latest
106+
steps:
107+
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
108+
- uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
109+
with:
110+
node-version: 22
111+
cache: npm
112+
- run: npm ci
113+
- name: Install frontend dependencies
114+
run: cd frontend && npm ci
115+
- name: Type-check frontend
116+
run: cd frontend && npx tsc --noEmit
117+
- name: Build frontend
118+
run: cd frontend && npm run build
119+
- name: Verify build output
120+
run: test -f public-react/index.html
121+
99122
e2e:
100123
name: E2E (${{ matrix.os }})
101124
runs-on: ${{ matrix.os }}
@@ -110,6 +133,8 @@ jobs:
110133
node-version: 22
111134
cache: npm
112135
- run: npm ci
136+
- name: Build frontend
137+
run: cd frontend && npm ci && npm run build
113138
- name: Install Playwright (Linux)
114139
if: runner.os == 'Linux'
115140
run: npx playwright install --with-deps chromium

.github/workflows/release.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ jobs:
3838
cache: npm
3939

4040
- run: npm ci
41+
- name: Build frontend
42+
run: cd frontend && npm ci && npm run build
4143
- run: npm test
4244
- run: echo "node=$(node -v) npm=$(npm -v)"
4345

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,6 @@ test-results/
88
junit.xml
99
.idea/
1010
.vscode/
11+
public-react/
12+
frontend/node_modules/
13+
*.tsbuildinfo

frontend/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
8+
/>
9+
<meta name="theme-color" content="#1e1e1e" />
10+
<meta name="apple-mobile-web-app-capable" content="yes" />
11+
<meta name="mobile-web-app-capable" content="yes" />
12+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
13+
<link rel="icon" type="image/png" href="/icons/icon-192.png" />
14+
<link rel="apple-touch-icon" href="/icons/icon-192.png" />
15+
<link rel="manifest" href="/manifest.webmanifest" />
16+
<title>TermBeam</title>
17+
<script>
18+
const t = localStorage.getItem('termbeam-theme');
19+
if (t) document.documentElement.setAttribute('data-theme', t);
20+
</script>
21+
</head>
22+
<body>
23+
<div id="root"></div>
24+
<script type="module" src="/src/main.tsx"></script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)