frontend: click a profile row on Home to select it

Mirrors the Profiles screen: the whole non-active row in the Home
'Your profiles' list now selects the profile on click, guarded so the
Copy/Select buttons don't double-trigger. Added a pointer cursor for
non-active rows and a test for row-click selection.
This commit is contained in:
Avi 2026-08-26 14:59:51 -05:00
commit 8130c3e7e5
3 changed files with 31 additions and 0 deletions

View file

@ -96,6 +96,16 @@ export function HomeScreen({ onNavigate, onCreateProfile }: HomeScreenProps) {
<li <li
key={profile.npub} key={profile.npub}
className={`home-profile-row${profile.is_active ? ' is-active' : ''}`} className={`home-profile-row${profile.is_active ? ' is-active' : ''}`}
onClick={
profile.is_active
? undefined
: (event) => {
if ((event.target as HTMLElement).closest('button, a, input')) {
return;
}
void onSelect(profile.npub);
}
}
> >
<Avatar <Avatar
npub={profile.npub} npub={profile.npub}

View file

@ -1084,6 +1084,10 @@ select {
border-color: var(--token-border, rgba(0, 0, 0, 0.12)); border-color: var(--token-border, rgba(0, 0, 0, 0.12));
} }
.home-profile-row:not(.is-active) {
cursor: pointer;
}
.home-profile-row .active-profile-meta { .home-profile-row .active-profile-meta {
flex: 1; flex: 1;
min-width: 0; min-width: 0;

View file

@ -54,4 +54,21 @@ describe('HomeScreen', () => {
.click(screen.getByRole('button', { name: /Create your first profile/i })); .click(screen.getByRole('button', { name: /Create your first profile/i }));
expect(onCreateProfile).toHaveBeenCalled(); expect(onCreateProfile).toHaveBeenCalled();
}); });
it('selects a profile when its row is clicked (not just the Select button)', async () => {
const backend = createFakeBackend();
renderHome(backend);
renderWithApp(<HomeScreen onNavigate={vi.fn()} onCreateProfile={vi.fn()} />);
const bobRow = (await screen.findByText('Bob')).closest('.home-profile-row') as HTMLElement;
// Clicking the name (not the Select button) should select the profile.
await userEvent.setup().click(within(bobRow).getByText('Bob'));
await waitFor(() => {
expect(within(bobRow).getByRole('button', { name: 'Selected' })).toBeInTheDocument();
});
// The previously active profile now offers a Select button again.
const aliceRow = screen.getByText('Alice').closest('.home-profile-row') as HTMLElement;
expect(within(aliceRow).getByRole('button', { name: 'Select' })).toBeInTheDocument();
});
}); });