feat: Make app token "label" field available to users

[kulmann]

Description

This PR adds the label field of an app token to the creation modal (text input) and to the listing (table column) and adjusts tests accordingly.

Note: this needs an up to date OpenCloud backend, the last rolling is insufficient. The latest daily should work, otherwise you need to build your own OpenCloud image based on current main. This PR is the underlying prerequisite: opencloud-eu/opencloud#433

Related Issue

• Fixes Labels for app tokens #392

How Has This Been Tested?

• Unit tests
• Manual testing

Screenshots

Types of changes

• Bugfix
• New feature (an additional functionality that doesn't break existing code)
• Breaking change (a modification that affects current functionality)
• Technical debt (addressing code that needs refactoring or improvements)
• Tests (adding or improving tests)
• Documentation (updates or additions to documentation)
• Maintenance (like dependency updates or tooling adjustments)

[Copilot]

Pull Request Overview

This pull request introduces support for an app token's "label" field by updating the creation modal and the tokens listing table while adding corresponding tests.

• Added a text input for the token label (displayed as "Note") in the modal.
• Updated the tokens table to include the label field.
• Adjusted and extended tests to cover the new field.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
packages/design-system/src/helpers/types.ts	Updated type definitions for layout properties to use enumerated values.
packages/web-runtime/tests/unit/components/Modals/AppTokenModal.spec.ts	Added tests for the label input field and modified test helper functions accordingly.
packages/web-runtime/src/components/Account/AppTokens.vue	Added a new table column slot for displaying the token label.
packages/web-runtime/src/components/Modals/AppTokenModal.vue	Modified the modal to include a text input for the token label and its validation.

Comments suppressed due to low confidence (3)

packages/web-runtime/src/components/Modals/AppTokenModal.vue:3

• [nitpick] The component uses a variable named 'tokenLabel' with a UI label 'Note'; for clarity, consider aligning the naming (e.g., using 'tokenNote' or renaming the UI label to 'Label').

<oc-text-input v-model="tokenLabel" :label="$gettext('Note')" :error-message="tokenLabelErrorMessage"/>

packages/web-runtime/tests/unit/components/Modals/AppTokenModal.spec.ts:85

• [nitpick] The helper function 'emitNoteInput' refers to a 'note', which may cause confusion since the corresponding component property is 'tokenLabel'; consider renaming the helper function to 'emitTokenLabelInput' for consistency.

const emitNoteInput = (wrapper: VueWrapper<any>, note: string) => {

packages/web-runtime/src/components/Account/AppTokens.vue:163

• [nitpick] The table field is defined with the key 'label' but uses the title 'Note'; consider making the terminology consistent, either by renaming the field or updating the title to 'Label'.

{ name: 'label', type: 'slot', wrap: 'truncate', width: 'expand', title: $gettext('Note') }

[kulmann]

@rhafer @JammingBen @tbsbdr I found the visual label Note easier to understand than Label. GitHub also uses the same wording... what do you think?

[JammingBen]

Nice! 👍