feat: redesign mobile app with tactile UI

This commit is contained in:
Hermes Agent
2026-07-09 04:57:47 +00:00
parent 7eb9648eb7
commit d4e841a28c
12 changed files with 451 additions and 191 deletions
@@ -1,4 +1,5 @@
import { FormEvent, useState } from 'react';
import { KeyRound, Link, PlugZap, Save } from 'lucide-react';
import { useCompanion } from '../../api/CompanionContext.js';
import { CompanionClient, DEFAULT_COMPANION_URL } from '../../api/companionClient.js';
@@ -29,18 +30,24 @@ export function SettingsScreen() {
}
return (
<section className="screen stack-screen">
<h2>Settings</h2>
<form className="settings-card" onSubmit={save}>
<label htmlFor="server-url">Companion server URL</label>
<input id="server-url" onChange={(event) => setBaseUrl(event.target.value)} placeholder={DEFAULT_COMPANION_URL} type="url" value={baseUrl} />
<label htmlFor="access-key">Access key</label>
<input id="access-key" onChange={(event) => setAccessKey(event.target.value)} placeholder="hm_…" type="password" value={accessKey} />
<div className="composer__actions">
<button className="small-button" type="submit">Save</button>
<button className="send-button" onClick={() => void testConnection()} type="button">Test connection</button>
<section className="screen stack-screen settings-screen">
<article className="quest-card quest-card--compact quest-card--green">
<div className="quest-orb quest-orb--green"><PlugZap size={32} strokeWidth={3} /></div>
<div>
<p className="eyebrow">Nest setup</p>
<h2>Pair your companion</h2>
<p>{status}</p>
</div>
</article>
<form className="settings-card" onSubmit={save}>
<label htmlFor="server-url"><Link size={18} /> Companion server URL</label>
<input id="server-url" onChange={(event) => setBaseUrl(event.target.value)} placeholder={DEFAULT_COMPANION_URL} type="url" value={baseUrl} />
<label htmlFor="access-key"><KeyRound size={18} /> Access key</label>
<input id="access-key" onChange={(event) => setAccessKey(event.target.value)} placeholder="hm_…" type="password" value={accessKey} />
<div className="button-row">
<button className="secondary-button" type="submit"><Save size={18} /> Save</button>
<button className="primary-button" onClick={() => void testConnection()} type="button">Test <PlugZap size={19} /></button>
</div>
<p>{status}</p>
</form>
</section>
);