refactor(runtime): components to script setup

[JammingBen]

refs #1462

[Copilot]

Pull request overview

This PR advances the ongoing refactor tracked in #1462 by converting several frequently used web-runtime Vue components from Options API / setup()+return to <script setup>, and updates the affected unit tests to align with the new component instance shapes.

Changes:

• Refactored multiple runtime UI components (Topbar, Account, Modals, Sidebar) to <script setup lang="ts"> with typed defineProps (and defineEmits where applicable).
• Updated unit tests that previously relied on Options API instance access (e.g., task .last, methods) to use flushPromises() or adjusted instance access.
• Minor cleanup/modernization of component internals (top-level bindings, computed/method conversions).

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts	Switched async waiting strategy to flushPromises() to accommodate <script setup> refactor.
packages/web-runtime/tests/unit/components/SkipTo.spec.ts	Updated test approach after SkipTo.vue moved to <script setup>.
packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts	Adjusted tests to access script-setup instance members (casts).
packages/web-runtime/tests/unit/components/EditPasswordModal.spec.ts	Updated tests for script-setup refs/methods (but currently contains incorrect assertions).
packages/web-runtime/tests/unit/components/Account/GdprExport.spec.ts	Replaced task .last awaits with flushPromises().
packages/web-runtime/src/components/Topbar/Notifications.vue	Converted to <script setup>; preserved polling/SSE behavior and task logic.
packages/web-runtime/src/components/Topbar/NotificationBell.vue	Converted to <script setup> with typed props and reactive UI state.
packages/web-runtime/src/components/Topbar/FeedbackLink.vue	Converted to <script setup> with typed props and computed fallbacks.
packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue	Converted to <script setup> with typed props and computed sorting/bindings.
packages/web-runtime/src/components/SkipTo.vue	Converted to <script setup> and added null-guard for target element.
packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue	Converted to <script setup> with typed props and computed bindings.
packages/web-runtime/src/components/ModalWrapper.vue	Converted to <script setup>; kept modal confirm/cancel/input flows intact.
packages/web-runtime/src/components/EditPasswordModal.vue	Converted to <script setup>; added typed defineEmits + defineExpose({ onConfirm }).
packages/web-runtime/src/components/Account/ThemeSwitcher.vue	Converted to <script setup>; kept theme selection logic intact.
packages/web-runtime/src/components/Account/QuotaInformation.vue	Converted to <script setup> (currently retains a quota optionality edge case).
packages/web-runtime/src/components/Account/GdprExport.vue	Converted to <script setup>; preserved polling + request/download behaviors.
packages/web-runtime/src/components/Account/ExtensionPreference.vue	Converted to <script setup>; preserved selection models and filtering.
packages/web-runtime/src/components/Account/AccountTable.vue	Converted to <script setup> with typed props.

Suppressed comments (1)

packages/web-runtime/tests/unit/components/EditPasswordModal.spec.ts:34

• This test case says passwords are not identical, but it both (a) does not call validatePasswordConfirm() and (b) expects a truthy value. It should call the function and assert false.

    it('should be false if passwords are not identical', () => {
      const { wrapper } = getWrapper()
      ;(wrapper.vm as any).newPassword = 'newpassword'
      ;(wrapper.vm as any).newPasswordConfirm = 'anothernewpassword'
      expect((wrapper.vm as any).validatePasswordConfirm).toBeTruthy()
    })

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

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

Suppressed comments (3)

packages/web-runtime/src/components/SkipTo.vue:15

• This component renders a default slot (<slot />) but doesn’t declare slots via defineSlots, which is part of the linked refactor acceptance criteria. Add an explicit defineSlots declaration.

const { target } = defineProps<{
  target: string
}>()

packages/web-runtime/src/components/Account/AccountTable.vue:40

• This component renders a default slot (<slot />) but doesn’t declare slots via defineSlots, which is part of the linked refactor acceptance criteria. Add an explicit defineSlots declaration.

const { fields, showHead = false } = defineProps<{
  fields: Array<string | AccountTableCell>
  showHead?: boolean
}>()

packages/web-runtime/src/components/Topbar/NotificationBell.vue:29

• notificationCount lost its default value (previously default: 0) and is now effectively required. This changes the component’s prop contract and can lead to undefined being rendered/compared if the prop is omitted. Use destructuring defaults to preserve the original behavior.

const { notificationCount } = defineProps<{
  notificationCount: number
}>()