fix/context detail unsaved changes dialog (#295)

fix/context detail unsaved changes dialog (#295)

* fix: resolve unsaved changes dialog issue in ContextDetail create mode

- Add missing watcher to sync hasUnsavedChanges with cancel changes store
- Import watch from Vue for proper reactivity
- Align with ProjectDetail and LanguageDetail patterns for consistent behavior
- Fixes issue where dialog incorrectly prevented quit after successful save

* feat: add missing timestamp fields to ContextDetail.vue

- Add created_at and updated_at display fields to match LanguageDetail pattern
- Import DateDisplay component for proper timestamp rendering
- Align save flow for edit mode with ProjectDetail and LanguageDetail patterns
- Remove unused contextId computed property
- Use context.value.id directly for consistency

Fixes recommendation 1 from alignment assessment

* refactor: standardize store variable names in ContextDetail.vue

- Change loadingOverlayStore to loadingStore
- Change errorDisplayStore to errorStore
- Change cancelChangesConfirmationStore to cancelChangesStore
- Change deleteConfirmationStore to deleteStore
- Update all references throughout the component
- Align with ProjectDetail and LanguageDetail naming patterns

Fixes recommendation 2 from alignment assessment

* refactor: rename ContextEditForm to ContextFormData for consistency

- Rename interface ContextEditForm to ContextFormData
- Update all function return types using the interface
- Align with ProjectDetail and LanguageDetail naming patterns
- Maintain consistent *FormData convention across all detail components

Fixes recommendation 3 from alignment assessment

* fix: align Contexts.vue EditButton query parameter with Language/Project pattern

- Change EditButton from ?mode=edit to ?edit=true
- Align with Languages.vue and Projects.vue established pattern
- Ensure consistency across all list view components

Fixes recommendation 1 from alignment assessment

* fix: align ContextDetail.vue query parameter handling with Language/Project pattern

- Change query parameter from 'mode' to 'edit' throughout component
- Update initialization logic to check route.query.edit === 'true'
- Update query cleanup to delete query.edit instead of query.mode
- Ensure consistency with LanguageDetail.vue and ProjectDetail.vue patterns

Fixes recommendation 2 from alignment assessment

* fix: remove query parameter setting from enterEditMode function

- Remove router.replace call from enterEditMode to match Language/Project pattern
- LanguageDetail and ProjectDetail only set mode and form values in enterEditMode
- Query parameters are only set when navigating from list views, not when toggling modes
- Maintain consistency with established patterns

Fixes recommendation 3 from alignment assessment

* Add a Vue Shim File (for TypeScript)

* feat: add explicit type Mode definition to match Language/Project pattern

- Add explicit 'type Mode = view | edit | create' definition
- Update mode ref to use the defined type instead of inline union type
- Align with LanguageDetail.vue and ProjectDetail.vue type organization
- Improve type safety and code consistency

Fixes recommendation 4 from alignment assessment

* feat: convert informationDescription to switch statement pattern

- Change from if/else to switch statement to match Language/Project pattern
- Update description messages to match Language/Project style and structure
- Update corresponding test expectations to match new messages
- Ensure consistent information description pattern across all detail components

Fixes recommendation 5 from alignment assessment

* fix: align enterViewMode function with Language/Project pattern

- Remove router.replace query clearing from enterViewMode function
- Add consistent comment about clearing form data
- Match LanguageDetail.vue and ProjectDetail.vue implementation exactly
- Query parameter management handled only where necessary in save flow

Fixes recommendation 6 from alignment assessment

* fix: align ContextDetail comment organization with LanguageDetail pattern

- Reorganize code sections to match exact structure of LanguageDetail.vue
- Group all store instances under 'Composables' section
- Maintain proper order: Types, Composables, Computed properties
- Ensure all section comments match established pattern
- Complete recommendation 7 of 7 for Context component alignment

* fix: standardize Contexts.vue section comments to match Language/Project pattern

- Reorganize reactive state comments to be more specific
- Add 'Filter state - default to all', 'Sorting state', 'Search state' sections
- Update 'Computed properties' to 'Computed filtered and sorted contexts'
- Align section organization with Languages.vue and Projects.vue
- Complete HIGH priority recommendation 1 of 6

* fix: align DateDisplay component props in Contexts.vue with Language/Project pattern

- Add format='short' and variant='small-dark' props to DateDisplay
- Match DateDisplay formatting used in Languages.vue and Projects.vue
- Ensure consistent date presentation across all list components
- Complete HIGH priority recommendation 2 of 6

* fix: organize ContextDetail function sections to match LanguageDetail pattern

- Group functions into clear sections: 'Mode management functions', 'Action handlers', 'Status toggle handlers'
- Update section comments to be more concise and consistent
- Remove redundant function description comments for cleaner organization
- Align function organization with LanguageDetail.vue and ProjectDetail.vue
- Complete HIGH priority recommendation 3 of 6

* fix: reorder status cards configuration placement in ContextDetail

- Move statusCardsConfig computed property after unsaved changes detection
- Align computed properties order with LanguageDetail.vue and ProjectDetail.vue
- Maintain logical flow: form data → unsaved changes → status cards → watchers
- Complete MEDIUM priority recommendation 4 of 6

* fix: standardize import organization in ContextDetail to match Language/Project pattern

- Remove section comment separators from imports (Components, Icons, Stores)
- Group all imports together without section breaks
- Align import organization with LanguageDetail.vue and ProjectDetail.vue
- Maintain clean, unified import structure
- Complete MEDIUM priority recommendation 5 of 6

* fix: enhance ContextDetail error message specificity for better UX

- Update load context error: mention permission/existence issues
- Update delete context error: mention usage/permission constraints
- Update status update error: specify it's about default status setting
- Update corresponding test expectations to match new messages
- Provide more contextual and actionable error information to users
- Complete MEDIUM priority recommendation 6 of 6

---------

Co-authored-by: Pascal HAVELANGE <havelangep@hotmail.com>