Time Tracking Integration: Add mandatory timing steps and performance analysis
Performance Targets: Include realistic complexity-based duration estimates
Quality Gates: Require time data in commits and performance comparison
Project Estimates: Update to 2-3 weeks based on actual performance data
Time: 15 minutes | Complexity: Simple | Issues: None
Testing: Manual | Validation: Template review complete
Apply full database migration (databaseUtil → PlatformServiceMixin), replace
raw SQL with service methods, migrate 3 notifications to helper methods.
Preserve 1 complex modal for advanced routing features while extracting
all literal strings to NOTIFY_CAMERA_SHARE_METHOD constant.
Add computed properties (offerTabClasses, projectTabClasses) to streamline
template logic and comprehensive JSDoc documentation for all methods.
Update migration templates to mandate literal extraction from complex modals.
ProjectsView.vue now appropriately incomplete: helper methods for simple
notifications, raw $notify preserved only where advanced features required.
- Human testing confirmed UserProfileView.vue works correctly
- Updated testing tracker with 21 complete migrations (88% success)
- Added ImportAccountView.vue to ready-for-testing list
- Migration progress: 4 components human tested, 17 ready for testing
- Add NOTIFY_CONTACT_LOADING_ISSUE, NOTIFY_FEED_LOADING_ISSUE, and NOTIFY_CONFIRMATION_ERROR constants to notifications.ts
- Update HomeView.vue to import and use notification constants instead of literal strings
- Update migration templates to document constants vs literal strings pattern
- Add comprehensive documentation for notification constants usage
Ensures consistency with established pattern used in ActivityListItem.vue and other migrated components. Linter passes without errors.
Add notify helper property and initialize in created() with createNotifyHelpers(this.$notify)
Replace direct $notify call in open() with this.notify.confirm(...) and use TIMEOUTS.MODAL for duration
Remove unused NotificationIface import
Add $notify property for Vue runtime injection to satisfy type checker
Ensure all notification usage is consistent with project best practices
This ensures maintainable, type-safe, and consistent notification handling in the ChoiceButtonDialog component.
Move all user-facing notification messages to src/constants/notifications.ts
Use TIMEOUTS constants from src/utils/notify.ts for all notification durations
Refactor ActivityListItem.vue:
Use notification message and duration constants
Initialize notify helper in created() with createNotifyHelpers(this.$notify)
Add $notify property for Vue runtime injection to satisfy type checker
Use type guards or 'as any' for unknown notification payloads
Wrap notifyWhyCannotConfirm calls to match expected function signature
Fix type import for GiveRecordWithContactInfo
Add 'Notification Best Practices and Nuances' section to migration-progress-tracker.md:
Document message/duration constants, notify helper pattern, type safety, and wrapper function usage
Remove all hardcoded notification strings and durations from components
- Refactor notify usage in GiftedDialog.vue, AccountViewView.vue, ClaimView.vue, and DataExportSection.vue:
• Use notify as a property initialized in created() with createNotifyHelpers(this.$notify)
• Remove getter-based notify patterns for consistency and lifecycle safety
• Fix linter/type errors related to notify property initialization
- Add mandatory per-file migration workflow to doc/migration-progress-tracker.md:
• For each file: (1) migrate to PlatformServiceMixin, (2) immediately standardize notify usage and fix linter/type errors
• Clarifies this two-step process is required for every file, not as a global sweep
All migrated files are now consistent, maintainable, and ready for further migration work.
- Added ref="userNameDialog" to UserNameDialog in AccountViewView.vue template
- Patched onEditName() to check for dialog ref and open() method before calling
- Improved error notification to use NotificationIface fields (group, type, title, text)
- Prevents "Cannot read properties of undefined (reading 'open')" error if dialog is missing
- Removed all vestigial Dexie/USE_DEXIE_DB references from code and docs
- Centralized DB logic in PlatformServiceMixin; resolved logger/databaseUtil circular dependency
- Modularized SQL helpers (`$generateInsertStatement`, `$generateUpdateStatement`) and added unit tests
- Created/updated migration tracking docs and helper script for cross-machine progress
- Confirmed all lint/type checks and tests pass; ready for systematic file migration
Achieve total architectural compliance by eliminating both legacy database
utilities and direct SQL queries from LogView.vue component.
**Component Changes (LogView.vue):**
- Replace databaseUtil.memoryLogs with this.$memoryLogs
- Replace direct SQL query with this.$logs() abstraction
- Remove PlatformServiceFactory and databaseUtil imports
- Add PlatformServiceMixin to component mixins
- Reduce component from database-aware to pure presentation layer
**Mixin Enhancements (PlatformServiceMixin.ts):**
- Add $memoryLogs computed property for memory logs access
- Add $logs() method for abstracted database log retrieval
- Update TypeScript interfaces (IPlatformServiceMixin, ComponentCustomProperties)
- Enable components to access logs without SQL knowledge
**Documentation:**
- Add docs/migration-testing/TESTING_LOGVIEW.md - Quick testing guide
- Add docs/migration-testing/migration-checklist-LogView.md - Comprehensive checklist
- Document architectural compliance achievements and testing requirements
**Architectural Benefits:**
- Zero databaseUtil imports in LogView.vue
- Zero direct SQL queries in component layer
- Proper separation of concerns (View → Service → Database)
- Reusable $logs() method for other components
- Sets gold standard for future migrations
**Migration Progress:**
- Components using PlatformServiceMixin: 14/91 (15%)
- LogView.vue achieves total architectural compliance
- Reduces legacy databaseUtil imports from 52 to 51
**Testing:** Ready for testing at /logs route
**Backwards Compatible:** Yes - no functional changes to end users
- Convert Vue 3 Composition API to Options API with vue-facing-decorator
- Add PlatformServiceMixin for consistent database and logging patterns
- Replace logConsoleAndDb() with this.$logAndConsole() mixin method
- Remove legacy databaseUtil import dependency
- Convert computed properties to class getters
- Convert onMounted lifecycle to mounted() method
- Add comprehensive TODO with testing guidance
Technical Changes:
- useRoute/useRouter → this.$route/this.$router
- computed() refs → class getters with proper typing
- Composition API imports → vue-facing-decorator imports
Migration Status: 12% complete (11/91 components)
Passes lint checks and maintains all original functionality
- Add TODO annotation to MembersList.vue requiring human testing validation
- Create migration templates for systematic component migration
- Add best practices guide for PlatformServiceMixin usage
- Create ESLint rules template for pattern enforcement
- Add validation script to track migration progress
- Document Phase 1 completion summary with current state
Migration Infrastructure:
- Component migration checklist template
- Automated validation script (validate-migration.sh)
- Best practices documentation
- ESLint rules for preventing regression
Status: MembersList.vue migration complete but requires human testing
Next: Select next component for migration when ready to continue
Replace sandboxed Capacitor filesystem with native IPC for reliable file exports:
- Add IPC handler in main process for direct Downloads folder access
- Expose secure electronAPI via contextBridge in preload script
- Update ElectronPlatformService to use native IPC with web fallback
- Add TypeScript definitions for electron APIs
- Fix file export issues where files were trapped in virtual filesystem
- Enable proper date-stamped backup filenames in Downloads folder
- Follow Electron security best practices with process isolation
Files now export directly to ~/Downloads with exact path feedback.
- Fix ref timing issue by always rendering download link element
- Convert notify helper to getter to ensure $notify availability
- Add proper error handling and resource cleanup for blob URLs
- Improve user feedback with better error messages
- Add comprehensive documentation and security considerations
Resolves: TypeError on downloadLink.click() and notify function errors
- Replace 'as any' with 'InstanceType<typeof UserNameDialog>' for proper typing
- Update callback parameter to match component interface (name?: string)
- Eliminates TypeScript warning while maintaining type safety
- Fix all computed properties to use platformService as a property
- Add descriptive @ts-expect-error comments for dynamic property access
- Resolves 'this.platformService is not a function' runtime error
- Lint clean
- Use PlatformServiceMixin for platform and database access
- Replace manual PlatformService instantiation with mixin methods/properties
- Use $contacts() for contact export
- Use capabilities for platform checks in template and logic
- Remove unused imports and redundant code
- Lint clean
- Created UsageLimitsSection.vue using vue-facing-decorator (class-based, TypeScript, @Component, @Prop, @Emit).
- Moved 'Usage Limits' UI and logic (status, spinner, message, recheck button) into the new component.
- Replaced original usage limits section markup in AccountViewView.vue with <UsageLimitsSection />.
- Passed loadingLimits and limitsMessage props, and wired up @recheck-limits event to call checkLimits().
- Ensured all linter errors are resolved and code is consistent with project conventions.
- Created LocationSearchSection.vue using vue-facing-decorator (class-based, TypeScript, @Component, @Prop, @Emit).
- Moved 'Location for Searches' UI and logic into the new component.
- Replaced original location section markup in AccountViewView.vue with <LocationSearchSection />.
- Passed isRegistered and searchAreaLabel props, and wired up @set-search-area event to a new placeholder openSearchAreaDialog() method.
- Added placeholder openSearchAreaDialog() with a TODO for future implementation.
- Ensured all linter errors are resolved and code is consistent with project conventions.
- Created RegistrationNotice.vue using vue-facing-decorator (class-based, TypeScript, @Component, @Prop, @Emit).
- Moved registration prompt (yellow box) and "Share Your Info" button into the new component.
- Replaced original registration notice markup in AccountViewView.vue with <RegistrationNotice />.
- Passed isRegistered and show props, and wired up @share-info event to a new placeholder openShareDialog() method.
- Added placeholder openShareDialog() with a TODO for future implementation.
- Ensured all linter errors are resolved and code is consistent with project conventions.
- Created IdentitySection.vue using vue-facing-decorator (class-based, TypeScript, @Component, @Prop, @Emit).
- Moved all identity-related UI and logic (name, QR code, profile image, DID) into the new component.
- Replaced original identity section markup in AccountViewView.vue with <IdentitySection />.
- Passed all necessary props and implemented event handlers in AccountViewView.vue to maintain existing behavior.
- Ensured all linter errors are resolved and code is consistent with project conventions.
- Migrated all notification calls in AccountViewView.vue to use a notify helper initialized in mounted(), ensuring this.$notify is available and preventing runtime errors.
- Removed NotificationMixin and $notifyHelper usage; restored and standardized notify helper pattern.
- Migrated all database and platform service operations to use PlatformServiceMixin ultra-concise methods ($accountSettings, $saveSettings, $saveUserSettings, etc.).
- Cleaned up unused imports and code related to previous notification and database patterns.
- Ensured all linter errors and warnings are resolved in both AccountViewView.vue and notification utility files.
- Replaced direct $notify calls with notification helper utilities for consistency and reduced duplication.
- Updated AccountViewView.vue, PlatformServiceMixin.ts, and ShareMyContactInfoView.vue to use notification helpers.
- Added explicit TypeScript types and constants for notification patterns.
- Suppressed ESLint 'any' warning in notification mixin helper.
- Ensured all affected files pass linting.
Created notification utility approaches to consolidate verbose $notify calls:
- Simple function utility (src/utils/notify.ts) - recommended approach
- Vue 3 composable (src/composables/useNotifications.ts)
- Utility class with mixin (src/utils/notificationUtils.ts)
Updated ClaimView.vue to demonstrate usage, reducing notification code by ~70%.
Enhanced PlatformServiceMixin with improved caching and database methods.
Updated ShareMyContactInfoView.vue with mixin improvements.
Provides consistent timeouts, standardized patterns, and type safety.
Ready for migration alongside mixin updates.
- Move all complex template logic to computed properties and methods
- Replace all `as any` usages with proper TypeScript types (OfferClaim, GiveActionClaim)
- Add computed property for claim image, removing inline image access
- Route all logging through PlatformServiceMixin
- Ensure all icon-only buttons have aria-labels for accessibility
- Remove unused imports and direct logger usage
- Lint clean: no warnings or errors remain
Clean up verbose console.log statements that were cluttering test output.
The function now performs the same operations without debug noise,
making test runs cleaner and more focused on actual test results.
- Remove direct databaseUtil dependency from MembersList.vue
- Use $accountSettings() method from PlatformServiceMixin instead
- Improves code consistency and enables caching benefits
- Maintains identical functionality with enhanced error handling
Convert undefined values to null in database operations to prevent
"tried to bind a value of an unknown type" errors in SQL.js worker.
- Fix $insertContact() method undefined-to-null conversion
- Fix $insertEntity() method undefined-to-null conversion
- Preserve boolean false/0 values vs null distinction
- Maintain parameterized queries for SQL injection protection
- Fix contact creation errors in ContactsView component
Resolves database binding failures when inserting contacts with
undefined properties. All linting errors resolved.
Replace generic 'any' types with specific type definitions:
- EntitySummaryButton: Define edit-requested event payload type
- GiftDetailsStep: Add proper types for edit-entity and submit events
- HomeView: Use GiftedDialog type for customDialog ref
Resolves 7 TypeScript linting warnings, improves type safety
Matthew Raymer
Jose Olarte III
Matthew Raymer