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
|
||||
key={profile.npub}
|
||||
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
|
||||
npub={profile.npub}
|
||||
|
|
|
|||
|
|
@ -1084,6 +1084,10 @@ select {
|
|||
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 {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
|
|
|||
|
|
@ -54,4 +54,21 @@ describe('HomeScreen', () => {
|
|||
.click(screen.getByRole('button', { name: /Create your first profile/i }));
|
||||
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