Add user profile customization with name, role, email, and phone
- Add UserProfileSchema to ClientSettings with name, role, email, phone fields - Update database layer to persist profile data in client_settings table - Rewrite ProfileOverlay component as editable form with save/cancel actions - Update Topbar to display user's initials from profile name - Profile data loaded on app mount and saved via settings.update RPC Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,7 @@ import type {
|
||||
RpcResult,
|
||||
ServerSettings,
|
||||
Screen,
|
||||
UserProfile,
|
||||
WorkspaceSection,
|
||||
} from "@mosaiciq/contracts/rpc";
|
||||
import { rpc } from "../../rpcClient";
|
||||
@@ -140,6 +141,7 @@ export function App() {
|
||||
const [llmLoading, setLlmLoading] = useState(false);
|
||||
const [selectedLlmModel, setSelectedLlmModel] = useState<string>("");
|
||||
const [keybindingsDraft, setKeybindingsDraft] = useState<Record<string, string>>({});
|
||||
const [profile, setProfile] = useState<Partial<UserProfile>>({});
|
||||
const [workspaceSection, setWorkspaceSection] = useState<WorkspaceSection | null>(null);
|
||||
const [workspaceSources, setWorkspaceSources] = useState<WorkspaceSource[]>([]);
|
||||
const [workspaceLoading, setWorkspaceLoading] = useState(false);
|
||||
@@ -294,6 +296,7 @@ export function App() {
|
||||
if (settings.theme) setTheme(settings.theme);
|
||||
if (settings.density) setDensity(settings.density);
|
||||
setKeybindingsDraft(settings.keybindings ?? {});
|
||||
setProfile(settings.profile ?? {});
|
||||
}
|
||||
const server = await rpc.call("settings.get", { scope: "server" });
|
||||
if (server.ok) {
|
||||
@@ -557,6 +560,7 @@ export function App() {
|
||||
onScreenChange={setActiveScreen}
|
||||
onSettingsOpen={() => setSettingsOpen(true)}
|
||||
searchOpen={searchOpen}
|
||||
profile={profile}
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={(q) => {
|
||||
setSearchOpen(true);
|
||||
@@ -876,6 +880,12 @@ export function App() {
|
||||
<ProfileOverlay
|
||||
open={profileOpen}
|
||||
onClose={() => setProfileOpen(false)}
|
||||
profile={profile}
|
||||
onSave={async (newProfile) => {
|
||||
setProfile(newProfile);
|
||||
const result = await rpc.call("settings.update", { scope: "client", changes: { profile: newProfile } });
|
||||
if (!result.ok) addToast({ type: "error", title: "Profile save failed", desc: result.error.message });
|
||||
}}
|
||||
/>
|
||||
<AgentFullscreenOverlay
|
||||
open={agentFullscreenOpen}
|
||||
@@ -1034,6 +1044,7 @@ function Topbar(props: {
|
||||
ticker?: string;
|
||||
action?: string;
|
||||
}>;
|
||||
profile?: Partial<UserProfile>;
|
||||
}) {
|
||||
return (
|
||||
<header className={ui.topbar}>
|
||||
@@ -1120,8 +1131,16 @@ function Topbar(props: {
|
||||
<button
|
||||
className="grid h-7 w-7 place-items-center rounded-full border border-[var(--border)] bg-[var(--surface)] font-[var(--font-mono)] text-[11px] font-semibold text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
|
||||
onClick={props.onProfileOpen}
|
||||
title={props.profile?.name ? `${props.profile.name}'s profile` : "Profile"}
|
||||
>
|
||||
JD
|
||||
{props.profile?.name
|
||||
? props.profile.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
: "JD"}
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
@@ -3301,11 +3320,34 @@ function SettingsOverlay({
|
||||
function ProfileOverlay({
|
||||
open,
|
||||
onClose,
|
||||
profile,
|
||||
onSave,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
profile: Partial<UserProfile>;
|
||||
onSave: (profile: Partial<UserProfile>) => Promise<void>;
|
||||
}) {
|
||||
const [draft, setDraft] = useState<Partial<UserProfile>>(profile);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setDraft(profile);
|
||||
}, [profile]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
try {
|
||||
await onSave(draft);
|
||||
onClose();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx(ui.overlayWide, "overlay-backdrop open")}
|
||||
@@ -3318,15 +3360,76 @@ function ProfileOverlay({
|
||||
<section className="overlay-body w-[420px] border border-[var(--border)] bg-[var(--surface)] p-5 shadow-2xl">
|
||||
<div className="mb-5 flex items-center justify-between">
|
||||
<h2 className="font-[var(--font-display)] text-2xl font-semibold">
|
||||
JD Profile
|
||||
Profile
|
||||
</h2>
|
||||
<button className={ui.iconBtn} onClick={onClose}>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<SettingsRow label="Name" value="Jordan Davis" />
|
||||
<SettingsRow label="Role" value="Portfolio Manager" />
|
||||
<p className="mt-4 text-xs text-[var(--muted)]">Profile editing is local-only until a profile backend is added.</p>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<SettingsRow
|
||||
label="Name"
|
||||
value={draft.name}
|
||||
>
|
||||
<input
|
||||
className="w-full border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm outline-none focus:border-[var(--accent)]"
|
||||
value={draft.name ?? ""}
|
||||
onChange={(e) => setDraft({ ...draft, name: e.target.value })}
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
label="Role"
|
||||
value={draft.role}
|
||||
>
|
||||
<input
|
||||
className="w-full border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm outline-none focus:border-[var(--accent)]"
|
||||
value={draft.role ?? ""}
|
||||
onChange={(e) => setDraft({ ...draft, role: e.target.value })}
|
||||
placeholder="Portfolio Manager, Analyst, etc."
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
label="Email"
|
||||
value={draft.email}
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
className="w-full border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm outline-none focus:border-[var(--accent)]"
|
||||
value={draft.email ?? ""}
|
||||
onChange={(e) => setDraft({ ...draft, email: e.target.value || undefined })}
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
label="Phone"
|
||||
value={draft.phone}
|
||||
>
|
||||
<input
|
||||
type="tel"
|
||||
className="w-full border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm outline-none focus:border-[var(--accent)]"
|
||||
value={draft.phone ?? ""}
|
||||
onChange={(e) => setDraft({ ...draft, phone: e.target.value || undefined })}
|
||||
placeholder="+1 (555) 123-4567"
|
||||
/>
|
||||
</SettingsRow>
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2 text-sm text-[var(--muted)] hover:text-[var(--fg)]"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="rounded bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-fg)] hover:opacity-90 disabled:opacity-50"
|
||||
>
|
||||
{saving ? "Saving..." : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user