refactor(pkg): components to script setup

[JammingBen]

refs #1462

[Copilot]

Pull request overview

This PR continues the long-running migration away from the Vue Options API by converting a set of frequently used components to <script setup lang="ts">, and updating unit tests that relied on Options-API instance typings.

Changes:

• Refactored multiple web-pkg and web-runtime Vue components from defineComponent({ setup() { ... }}) / Options API patterns to <script setup> with typed defineProps/defineEmits.
• Adjusted unit tests to access <script setup> instance state/methods (mostly via wrapper.vm as any).
• Minor test selector adjustment for the loading spinner assertions.

Reviewed changes

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

Show a summary per file

File	Description
packages/web-runtime/src/components/ModalWrapper.vue	Converted ModalWrapper to <script setup> and kept modal actions as composable functions.
packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts	Updated tests to access <script setup> bindings via wrapper.vm as any.
packages/web-pkg/src/components/SideBar/WebDavDetails.vue	Converted WebDAV details sidebar panel to <script setup> with typed props.
packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue	Converted to empty <script setup> component (template-only).
packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue	Migrated computed/watch logic to Composition API (computed/watch) and added typed emits.
packages/web-pkg/tests/unit/components/sidebar/CompareSaveDialog.spec.ts	Updated test instance access for <script setup>.
packages/web-pkg/src/components/SearchBarFilter.vue	Converted search location filter component to <script setup> with typed defineEmits.
packages/web-pkg/src/components/Pagination.vue	Converted pagination watcher to Composition API watch.
packages/web-pkg/src/components/Modals/EmojiPickerModal.vue	Converted emoji picker modal to <script setup> and typed confirm emit.
packages/web-pkg/src/components/LoadingIndicator.vue	Converted loading indicator to <script setup> while preserving event bus subscriptions.
packages/web-pkg/src/components/LinkRoleDropdown.vue	Converted link role dropdown to <script setup> with typed model update emit.
packages/web-pkg/src/components/ItemFilterToggle.vue	Converted filter toggle component to <script setup> with typed emit + route query sync.
packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts	Updated test instance access for <script setup>.
packages/web-pkg/src/components/Filters/ItemFilterInline.vue	Converted inline filter component to <script setup> and typed emits.
packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts	Updated test instance access for <script setup>.
packages/web-pkg/src/components/FilesList/ResourceSize.vue	Converted resource size display component to <script setup>.
packages/web-pkg/src/components/FilesList/ResourceLink.vue	Converted resource link wrapper to <script setup> with typed props/emits.
packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue	Converted ghost element component to <script setup> and replaced Options API computed props.
packages/web-pkg/src/components/FilesList/ContextActions.vue	Converted context actions wiring to <script setup> with the same computed section building logic.
packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue	Converted context action menu component to <script setup>.
packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue	Converted action menu item rendering logic to <script setup> and computed listeners.
packages/web-pkg/src/components/AppTemplates/PartialViews/LoadingScreen.vue	Converted to empty <script setup> component (template-only).
packages/web-pkg/src/components/AppTemplates/PartialViews/ErrorScreen.vue	Converted error screen to <script setup> with typed props default.
packages/web-pkg/src/components/AppLoadingSpinner.vue	Converted to empty <script setup> component (template-only).
packages/web-pkg/src/components/CreateShortcutModal.vue	Converted CreateShortcutModal to <script setup> and used defineExpose for test access.
packages/web-pkg/tests/unit/components/CreateShortcutModal.spec.ts	Updated tests to access <script setup> bindings via wrapper.vm as any.
packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts	Updated spinner assertion selector.
packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts	Updated spinner assertion selector.

---

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

[Copilot]

Pull request overview

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

Suppressed comments (4)

packages/web-runtime/src/components/ModalWrapper.vue:88

• onModalInput unconditionally dereferences unref(modal); if there is no active modal this will throw at runtime. Use the same optional-guard pattern as other handlers and avoid passing an invalid id into updateModal.

const onModalInput = (value: string) => {
  if (!unref(modal).onInput) {
    return
  }

packages/web-runtime/src/components/ModalWrapper.vue:97

• onModalConfirmDisabled assumes an active modal exists (unref(modal).id). If the modal is cleared while the component is still mounted, this will throw. Guard against a missing modal before calling updateModal.

const onModalConfirmDisabled = (value: boolean) => {
  updateModal(unref(modal).id, 'confirmDisabled', value)
}

packages/web-runtime/src/components/ModalWrapper.vue:59

• onModalConfirm calls updateModal(unref(modal)?.id, ...) before ensuring an active modal exists. If modal is ever undefined (e.g. due to a timing/race condition), updateModal will throw because it dereferences a missing modal in the store. Guard and reuse a stable modal.id throughout the handler.

This issue also appears in the following locations of the same file:

• line 85
• line 95

const onModalConfirm = async (value?: unknown) => {
  try {
    updateModal(unref(modal)?.id, 'isLoading', true)

packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue:42

• defineProps uses Record<string, any> for both objects, which discards type safety and doesn’t reflect that originalObject.id is accessed later. Prefer unknown and model the id field explicitly to keep the component type-safe.

} = defineProps<{
  originalObject: Record<string, any>
  compareObject: Record<string, any>
  confirmButtonDisabled?: boolean
}>()