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:
parent
a5838ea564
commit
8130c3e7e5
3 changed files with 31 additions and 0 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue