+ ); + } + + return ; +} diff --git a/src/LoadingScreen.tsx b/src/LoadingScreen.tsx new file mode 100644 index 0000000..46e1978 --- /dev/null +++ b/src/LoadingScreen.tsx @@ -0,0 +1,73 @@ +import { useEffect, useState } from 'react'; + +const LOCAL_URL = 'http://localhost:3000'; +const HEALTH_URL = `${LOCAL_URL}/api/health`; +const POLL_INTERVAL_MS = 250; + +interface Props { + /** Called once the embedded server responds to a health check. */ + onReady: () => void; +} + +/** + * Shown while the embedded Node.js server (nodejs-mobile) boots in local mode. + * Starts the engine on mount, then polls /api/health until it responds. + */ +export default function LoadingScreen({ onReady }: Props) { + const [error, setError] = useState(''); + + useEffect(() => { + let cancelled = false; + let pollTimer: ReturnType; + + function pollHealth() { + fetch(HEALTH_URL) + .then(res => { + if (!cancelled && res.ok) { + onReady(); + } else if (!cancelled) { + pollTimer = setTimeout(pollHealth, POLL_INTERVAL_MS); + } + }) + .catch(() => { + if (!cancelled) pollTimer = setTimeout(pollHealth, POLL_INTERVAL_MS); + }); + } + + if (!window.nodejs) { + setError('Local server engine is unavailable on this platform.'); + return; + } + + window.nodejs.start('main.js', err => { + if (err && !cancelled) { + setError('Failed to start local server: ' + String(err)); + return; + } + pollHealth(); + }); + + return () => { + cancelled = true; + clearTimeout(pollTimer); + }; + }, [onReady]); + + return ( +

+ {error ? ( + <> +

Couldn't start local server

{error}

+ + ) : ( + <> +

Starting Bill Tracker…

+ + )} +

+ ); +} diff --git a/src/SetupScreen.tsx b/src/SetupScreen.tsx new file mode 100644 index 0000000..58bd94b --- /dev/null +++ b/src/SetupScreen.tsx @@ -0,0 +1,109 @@ +import { useState } from 'react'; + +interface Props { + onConnect: (url: string) => void; + onLocalMode: () => void; +} + +function normalizeUrl(raw: string): string { + const trimmed = raw.trim().replace(/\/$/, ''); + if (!trimmed) return ''; + if (!/^https?:\/\//i.test(trimmed)) return 'https://' + trimmed; + return trimmed; +} + +function isValidUrl(url: string): boolean { + try { + const u = new URL(url); + return u.protocol === 'http:' || u.protocol === 'https:'; + } catch { + return false; + } +} + +export default function SetupScreen({ onConnect, onLocalMode }: Props) { + const [url, setUrl] = useState(''); + const [error, setError] = useState(''); + const [connecting, setConnecting] = useState(false); + + function handleConnect() { + const normalized = normalizeUrl(url); + if (!isValidUrl(normalized)) { + setError('Enter a valid URL, e.g. https://bills.yourdomain.com'); + return; + } + setError(''); + setConnecting(true); + onConnect(normalized); + } + + function handleKey(e: React.KeyboardEvent) { + if (e.key === 'Enter') handleConnect(); + } + + return ( +

+ {/* Logo mark */} + + +

Bill Tracker

Connect to your server to get started.

+ +

+ Server URL + { setUrl(e.target.value); setError(''); }} + onKeyDown={handleKey} + disabled={connecting} + /> + {error &&

{error}

} +

+ The address of your Bill Tracker server. Must be reachable from this device. +

+ + + +

+ or +

+ + + +

+ To change your server later, go to Android Settings → Apps → Bill Tracker → Clear Storage. +

+ ); +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..d119c66 --- /dev/null +++ b/src/index.css @@ -0,0 +1,227 @@ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html, body, #root { + height: 100%; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif; + -webkit-font-smoothing: antialiased; +} + +/* ── Setup screen ──────────────────────────────────────────────── */ + +.setup-root { + min-height: 100dvh; + background: #09090b; + display: flex; + align-items: center; + justify-content: center; + padding: 1.5rem; +} + +.setup-card { + width: 100%; + max-width: 400px; + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.logo-mark { + width: 56px; + height: 56px; + margin: 0 auto 0.5rem; +} + +.logo-mark svg { + width: 100%; + height: 100%; +} + +.setup-title { + text-align: center; + font-size: 1.5rem; + font-weight: 700; + color: #fafafa; + letter-spacing: -0.02em; +} + +.setup-subtitle { + text-align: center; + font-size: 0.875rem; + color: #71717a; + margin-top: -0.75rem; +} + +/* ── Form ───────────────────────────────────────────────────────── */ + +.form-group { + display: flex; + flex-direction: column; + gap: 0.375rem; +} + +.form-label { + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: #a1a1aa; +} + +.form-input { + width: 100%; + padding: 0.75rem 1rem; + background: #18181b; + border: 1px solid #27272a; + border-radius: 0.625rem; + color: #fafafa; + font-size: 0.9375rem; + outline: none; + transition: border-color 0.15s; + -webkit-appearance: none; +} + +.form-input::placeholder { + color: #52525b; +} + +.form-input:focus { + border-color: #6366f1; + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); +} + +.form-input:disabled { + opacity: 0.5; +} + +.form-error { + font-size: 0.8125rem; + color: #f87171; +} + +.form-hint { + font-size: 0.75rem; + color: #52525b; + line-height: 1.5; +} + +/* ── Buttons ─────────────────────────────────────────────────────── */ + +.btn-primary { + width: 100%; + padding: 0.8125rem 1rem; + background: #6366f1; + color: #fff; + border: none; + border-radius: 0.625rem; + font-size: 0.9375rem; + font-weight: 600; + cursor: pointer; + transition: background 0.15s, opacity 0.15s; + -webkit-tap-highlight-color: transparent; +} + +.btn-primary:hover:not(:disabled) { + background: #4f46e5; +} + +.btn-primary:active:not(:disabled) { + background: #4338ca; +} + +.btn-primary:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.btn-secondary { + width: 100%; + padding: 0.8125rem 1rem; + background: transparent; + color: #a1a1aa; + border: 1px solid #27272a; + border-radius: 0.625rem; + font-size: 0.9375rem; + font-weight: 500; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 0.625rem; + transition: border-color 0.15s, color 0.15s; + -webkit-tap-highlight-color: transparent; +} + +.btn-secondary:hover:not(:disabled) { + border-color: #3f3f46; + color: #d4d4d8; +} + +.btn-secondary:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.badge { + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + background: #27272a; + color: #71717a; + padding: 0.1875rem 0.5rem; + border-radius: 9999px; +} + +/* ── Divider ─────────────────────────────────────────────────────── */ + +.divider { + display: flex; + align-items: center; + gap: 0.75rem; + color: #3f3f46; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.divider::before, +.divider::after { + content: ''; + flex: 1; + height: 1px; + background: #27272a; +} + +/* ── Footer note ─────────────────────────────────────────────────── */ + +.setup-footer { + font-size: 0.75rem; + color: #3f3f46; + text-align: center; + line-height: 1.6; + padding: 0 0.25rem; +} + +.setup-footer strong { + color: #52525b; + font-weight: 500; +} + +/* ── Spinner (shown briefly while checking preferences) ─────────── */ + +.spinner { + width: 28px; + height: 28px; + border: 2px solid #27272a; + border-top-color: #6366f1; + border-radius: 50%; + animation: spin 0.7s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..2239905 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; +import './index.css'; +import App from './App.tsx'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..8bb0e24 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,8 @@ +/// + +// Injected by the nodejs-mobile-cordova plugin once `cordova.js` has loaded. +interface Window { + nodejs?: { + start: (filename: string, callback?: (err: unknown) => void) => void; + }; +} diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..1903283 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..d523b7c --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2022", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts", "capacitor.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..7768f60 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,9 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'dist', + }, +});