feat: avatar, account menu, and single sign-on from Go Loose

Signing in now starts at the sign-in screen and one button that hands the
browser to Go Loose, which returns to the welcome page. Nothing redirects to the
identity provider on its own any more: that fired on every anonymous visit and
read as a redirect loop rather than as a choice to sign in. The password form
remains only where the API reports that Go Loose login is not configured for the
host, because otherwise the application is unreachable on a bare localhost.

A person's picture is carried through from the Go Loose identity and rendered in
the account menu and on the profile page, with their initials as the fallback.
Two things make that fallback necessary rather than decorative: Go Loose retires a
picture key when a picture is replaced, so a link cached in a browser can be dead,
and most people have not uploaded one. The URL is deliberately not persisted
locally, since a stored key would keep failing after the picture changed.

The account menu is a disclosure rather than a hover menu: a real button with
aria-expanded, Escape and outside clicks closing it, and focus returning to the
trigger. It is not an ARIA menu, because its actions are a link and a button and
menuitem roles would strip the link semantics from one of them for no gain.

The account URL of the Go Loose identity is resolved on each sign-in and is read
from the live identity provider every time, which is also what makes it correct
after a picture change.

Depends on the Go Loose revision that serves avatar_url through
/connect/userinfo, so the picture URL reaches this application at all.

frontend/src/components/ui/Avatar.test.tsx

@@ -0,0 +1,76 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import type { User } from '../../types'
+import { Avatar } from './Avatar'
+import { initialsFor } from './initials'
+
+const withPicture = {
+  displayName: 'Ada Lovelace',
+  email: 'ada@example.test',
+  avatarUrl: 'https://auth.example.test/api/v1/avatars/kZ3abc',
+}
+const withoutPicture = { displayName: 'Ada Lovelace', email: 'ada@example.test' }
+
+function renderAvatar(user: Partial<Pick<User, 'displayName' | 'email' | 'avatarUrl'>> | null) {
+  return render(<Avatar user={user} />)
+}
+
+describe('initialsFor', () => {
+  it('uses the first letter of the first two words', () => {
+    expect(initialsFor('Ada Lovelace')).toBe('AL')
+    expect(initialsFor('Ada Byron King Lovelace')).toBe('AB')
+  })
+
+  it('falls back to the address, and to a single name', () => {
+    expect(initialsFor('', 'ada@example.test')).toBe('AD')
+    expect(initialsFor('Prince')).toBe('PR')
+  })
+
+  it('has something to show for nothing at all', () => {
+    expect(initialsFor('', '')).toBe('?')
+    expect(initialsFor(null, null)).toBe('?')
+  })
+})
+
+describe('Avatar', () => {
+  it('renders the picture Go Loose serves', () => {
+    renderAvatar(withPicture)
+    const image = screen.getByTestId('avatar-image').querySelector('img')
+    expect(image).toHaveAttribute('src', withPicture.avatarUrl)
+    // The surrounding element already names the person, so the image itself is
+    // decorative and must not be announced twice.
+    expect(image).toHaveAttribute('alt', '')
+  })
+
+  it('falls back to initials when there is no picture', () => {
+    renderAvatar(withoutPicture)
+    expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('AL')
+  })
+
+  it('falls back to initials when the stored link no longer resolves', () => {
+    // Go Loose retires a picture key when the picture changes, so a cached URL in
+    // this browser can be dead. A broken image icon would be worse than initials.
+    renderAvatar(withPicture)
+    const image = screen.getByTestId('avatar-image').querySelector('img')!
+    // An error event on an image does not bubble, so React only sees it when the
+    // event is dispatched through the testing library.
+    fireEvent.error(image)
+    expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('AL')
+  })
+
+  it('has something to show for no user at all', () => {
+    // With no person there is no name either, so the neutral placeholder the rest
+    // of the interface uses stands in.
+    renderAvatar(null)
+    expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('PR')
+  })
+})
+
+describe('Avatar sizing', () => {
+  it('carries the requested size', () => {
+    const { container } = render(<Avatar user={withoutPicture} size="tiny" className="extra" />)
+    const avatar = container.querySelector('.avatar')!
+    expect(avatar.className).toContain('tiny')
+    expect(avatar.className).toContain('extra')
+  })
+})