Redesign the API key form layout

Description

Background

Reduce the height of the API key form and speed up privilege selection. The form is the content of the "Configuration" tab added in AP-644, so this ticket depends on AP-644. The target layout for the create and the edit state is attached.

The attached layout is a baseline, not a pixel spec:

  • The page tabs keep their AP-644 names: "Usage" and "History".

  • The footer keeps the app's button order: Create/Update, Archive, Cancel.

Acceptance criteria

Privileges

  • Privileges are a matrix with resources as rows and operations as columns. Cells for unsupported combinations have a disabled background and no control.

  • A checkbox in each column header toggles that operation across all resources that support it. A checkbox at the start of each row toggles all supported operations for that resource. Both show an indeterminate state when the selection is partial.

  • "Select all" and "Clear all" are placed directly below the matrix.

  • "Allow change performer origin" sits inside the privileges block, separated from the matrix by a hairline, with no info icon.

  • "Performer origin" is a separate labelled row, revealed when the checkbox is selected. Its hint reads "Create or delete approvals as this performer."

Key validity

  • Both boundaries share one row, each as a date input and a time input, with a single timezone selector applying to both.

    • The selector defaults to the user timezone.

    • Changing it keeps the entered dates and times and applies them in the new timezone.

  • Duration presets are offered above the inputs: 30 days, 90 days, 1 year, 2 years.

    • Selecting one sets the end boundary relative to the start boundary.

    • The preset that matches the current range is shown as selected.

    • A new key defaults to "2 years", starting now.

  • One hint line states both boundaries in the user timezone.

  • The row label is "Key validity".

Network and description

  • "Allowed IPs" and "Description" are placed in a collapsible section following the pattern used on the definition form.

    • It is collapsed by default, with the current values stated in the section header.

    • It expands automatically when "Allowed IPs" or "Description" has a validation error.

  • "Description" is a single line input that grows with content.

Key value and fingerprint

  • Right after the key is created, the key value, the "Copy" button and the warning share one warning-styled container, with the value and the button on one line. The warning reads "Copy it now. This value is not stored and cannot be shown again."

  • "Copy" is the only accented action while the key value is visible. After copying, it shows the copied state and the accent moves to "Update".

  • Leaving the page without copying the value of a just-created key triggers a confirmation stating that the value cannot be recovered. Closing or reloading the browser tab in that state shows the browser's own leave prompt.

  • "Archive" is a regular button with an archive icon, no longer accented. The archive confirmation dialog carries the warning.

  • Otherwise no "Key value" row is rendered. In the edit state, the fingerprint is rendered as plain text on the right side of the "Key name" row, with no copy action.

  • The read-only creation, modification and usage metadata is not rendered on the "Configuration" tab.

Archived keys

  • For an archived key, every control in the redesigned layout is read only, as defined in AP-644.