Replace VAutocomplete with KMultiSelect in ActivityDuration

[suryanshwork3456]

Summary

Replaced the minutes dropdown in ActivityDuration.vue — previously a Vuetify VAutocomplete wrapped in DropdownWrapper — with KMultiSelect in single-selection mode (:multiple="false"). This is part of migrating Studio's older Vuetify dropdowns to the design system's KMultiSelect/KListbox components, following the same pattern already used in LanguageFilter.vue and CategoryOptions.vue.

Since the dropdown's options are a plain list of numbers (Short activity: [5, 10, 15, 20, 25, 30], Long activity: [40, 50, 60, 70, 80, 90, 100, 110, 120]), no itemText/itemValue mapping was needed. Validation errors, previously handled via minutesRules passed to VAutocomplete's :rules, now go through KMultiSelect's invalid/invalidText props — computed by running the existing validators against the current value and surfacing the first failing message. DropdownWrapper has been removed entirely; field width is now controlled via appearanceOverrides instead. Accessibility strings required by KMultiSelect's messages prop (open/close menu, clickable options, all-options-selected/deselected, option-deselected, clear text) are sourced from shared/strings/commonStrings.js.

The number text field, the read-only exact-time display, the slider, and the other dropdowns in CompletionOptions/index.vue are untouched — out of scope for this change.

References

KMultiSelect documentation. Read the single selection example and the primitive values example.
…

Reviewer guidance

Manual verification performed:

• pnpm test ActivityDuration.spec.js passes (15/15)
• pnpm test completionOptions.spec.js passes
• pre-commit run passes on both changed files (lint auto-formatting applied and re-staged)

Open items / things to double-check on review:

• activityDuration.spec.js still uses @vue/test-utils rather than Vue Testing Library. The task calls for migrating to Vue Testing Library; that migration hasn't been done yet in this PR.

AI usage

Used Claude to help implement the KMultiSelect migration in ActivityDuration.vue, following the existing pattern in LanguageFilter.vue/CategoryOptions.vue. I reviewed the generated diffs, ran the test suite and pre-commit locally to confirm they pass, and reformatted per kolibri-format's auto-fixes.

[learning-equality-bot]

👋 Hi @suryanshwork3456, thanks for contributing!

For the review process to begin, please verify that the following is satisfied:

• Contribution is aligned with our contributing guidelines

• Pull request description has correctly filled AI usage section & follows our AI guidance:

  AI guidance

  
  

  State explicitly whether you didn't use or used AI & how.

  If you used it, ensure that the PR is aligned with Using AI as well as our DEEP framework. DEEP asks you:

  • Disclose — Be open about when you've used AI for support.
  • Engage critically — Question what is generated. Review code for correctness and unnecessary complexity.
  • Edit — Review and refine AI output. Remove unnecessary code and verify it still works after your edits.
  • Process sharing — Explain how you used the AI so others can learn.

  
  

  Examples of good disclosures:

  "I used Claude Code to implement the component, prompting it to follow the pattern in ComponentX. I reviewed the generated code, removed unnecessary error handling, and verified the tests pass."

  "I brainstormed the approach with Gemini, then had it write failing tests for the feature. After reviewing the tests, I used Claude Code to generate the implementation. I refactored the output to reduce verbosity and ran the full test suite."

Also check that issue requirements are satisfied & you ran pre-commit locally.

Pull requests that don't follow the guidelines will be closed.

Reviewer assignment can take up to 2 weeks.