Updates

2 weeks ago · 41142397ec
2 changed files with 1557 additions and 10 deletions
--- a/CEFPython-Survey.md
+++ b/CEFPython-Survey.md
--- a/GiftedDialog-Logic-Flow.md
+++ b/GiftedDialog-Logic-Flow.md
@ -9,6 +9,7 @@
 The `GiftedDialog` component is a critical interface in the Time Safari application that enables users to record gifts and contributions between people and projects. This document provides comprehensive analysis of the component's current implementation and a detailed refactoring plan to modernize its architecture using Pinia store management and enhanced template composition.

 ### Current State
+
 - **Complexity**: 400+ line monolithic Vue component with mixed UI and business logic
 - **State Management**: Local component state with complex prop-based configuration
 - **Template**: Single large template with repetitive patterns and accessibility gaps
@ -16,6 +17,7 @@ The `GiftedDialog` component is a critical interface in the Time Safari applicat
 - **Critical Issues**: Navigation flow problems, dual-purpose confusion, parameter redundancy

 ### Proposed Solution
+
 - **Pinia Store Integration**: Centralized state management with improved type safety
 - **Template Decomposition**: Break into focused, reusable sub-components
 - **Accessibility Enhancement**: Comprehensive ARIA labels, keyboard navigation, screen reader support
@ -23,13 +25,15 @@ The `GiftedDialog` component is a critical interface in the Time Safari applicat
 - **Developer Experience**: Improved debugging, testing, and maintainability

 ### Business Impact
+
 - **User Experience**: Eliminates navigation dead-ends and confusion, adds visual progress guidance
 - **Maintainability**: Reduces component complexity from 400+ to ~100 lines, improves testability
- **Accessibility**: Meets WCAG guidelines for inclusive user experience
+- **Accessibility**: Meets WCAG guidelines for assisted user experience
 - **Development Velocity**: Easier debugging, testing, and feature additions
 - **Risk Mitigation**: Backward compatibility preserved during transition

 ### Implementation Timeline
+
 - **Aggressive**: 25 days (5 weeks) - High risk, may require scope reduction
 - **Realistic**: 30-33 days (6-7 weeks) - Recommended approach with 70-80% confidence
 - **Conservative**: 35-40 days (7-8 weeks) - High confidence with full complexity buffer
@ -52,6 +56,7 @@ The `GiftedDialog` component serves as the primary interface for recording gifts
 ### Key Features

 #### Current Capabilities
+
 - **Multi-Step Workflow**: Entity selection → Gift details → Submission
 - **Entity Type Detection**: Automatic determination of giver/recipient types based on context
 - **Conflict Prevention**: Prevents selecting same person as both giver and recipient
@ -60,6 +65,7 @@ The `GiftedDialog` component serves as the primary interface for recording gifts
 - **Advanced Options**: Integration with GiftedDetailsView for photos and extended descriptions

 #### Proposed Enhancements
+
 - **Visual Progress**: Step indicators showing "Step 1 of 2" with progress visualization
 - **Component Composition**: Decomposed into 7 focused sub-components for better maintainability
 - **Accessibility**: Full WCAG compliance with keyboard navigation and screen reader support
@ -69,6 +75,7 @@ The `GiftedDialog` component serves as the primary interface for recording gifts
 ### Technical Architecture

 #### Current Implementation
+
 ```typescript
 // Monolithic component with local state
 export default class GiftedDialog extends Vue {
@ -82,6 +89,7 @@ export default class GiftedDialog extends Vue {
 ```

 #### Proposed Architecture
+
 ```typescript
 // Store-based state management
 const giftDialogStore = useGiftDialogStore();
@ -109,20 +117,24 @@ The component integrates with multiple views across the application:
 ### Critical Issues Addressed

 #### 1. Navigation Flow Problems
+
 - **Issue**: Users getting stuck in ContactGiftingView with no completion path
 - **Solution**: Proper success callbacks and navigation logic

 #### 2. Component Dual-Purpose Confusion  
+
 - **Issue**: Users unclear about current step and progress
 - **Solution**: Visual step indicators and clearer labeling

 #### 3. Parameter Redundancy
+
 - **Issue**: Legacy `projectId` conflicts with context-aware parameters
 - **Solution**: Streamlined parameter handling and cleanup

 ### Refactoring Plan Overview

 #### Phase Structure (30-33 days realistic)
+
 1. **Pre-Phase 1** (3 days): Address critical missing fields and dependencies
 2. **Phase 1** (4-5 days): Store infrastructure + foundation components  
 3. **Phase 2** (5-6 days): Hybrid component + main template components
@ -132,18 +144,21 @@ The component integrates with multiple views across the application:
 7. **Phase 6** (4 days): Cleanup, testing, and finalization

 #### Complexity Analysis
+
 - **Overall Complexity Score**: 3.7/5 (High)
 - **Highest Risk Phase**: Phase 2 (5/5) - Backward compatibility challenges
 - **Key Complexity Factors**: 8+ integration points, 400+ line template decomposition, WCAG compliance
 - **Estimation Model**: Base effort × 1.4 complexity multiplier + 25% risk buffer

 #### Risk Mitigation
+
 - **Backward Compatibility**: Feature flags enable rollback at any phase
 - **Incremental Migration**: Views migrated one at a time with full testing
 - **Comprehensive Testing**: Existing Playwright tests maintained throughout
 - **Performance Monitoring**: Bundle size and runtime performance tracked

 #### Success Metrics
+
 - **Technical**: All existing tests pass, no performance regression >10%
 - **User Experience**: No change in functionality, improved error rates
 - **Code Quality**: Reduced complexity, improved testability, better separation of concerns
@ -152,18 +167,21 @@ The component integrates with multiple views across the application:
 ### Expected Outcomes

 #### For Users
+
 - **Clearer Navigation**: Visual progress indicators and better step guidance
 - **Reduced Confusion**: Eliminated dual-purpose ambiguity and dead-end flows
 - **Better Accessibility**: Full keyboard navigation and screen reader support
 - **Improved Reliability**: Better error handling and recovery mechanisms

 #### For Developers
+
 - **Easier Maintenance**: Component complexity reduced from 400+ to ~100 lines
 - **Better Testing**: Isolated components enable focused unit testing
 - **Improved Debugging**: Clear separation of concerns and better error messages
 - **Enhanced Type Safety**: Comprehensive TypeScript definitions throughout

 #### For Business
+
 - **Reduced Support**: Fewer user confusion and navigation issues
 - **Faster Development**: Easier to add features and fix issues
 - **Better Accessibility**: Compliance with accessibility standards
@ -182,6 +200,7 @@ This component serves as the primary interface for users to acknowledge and reco
 ## Architecture

 ### Component Structure
+
 - **Framework:** Vue 3 with TypeScript using `vue-facing-decorator`
 - **Dependencies:** 
  - Database layer (`db/index.ts`, `databaseUtil.ts`)
@ -192,6 +211,7 @@ This component serves as the primary interface for users to acknowledge and reco
 The component is built using Vue 3's Composition API with TypeScript decorators for a class-based approach. This architectural choice provides strong typing and clear separation of concerns. The component heavily relies on the application's database layer for storing and retrieving contact information, while the endorser server integration handles the cryptographic signing and publishing of gift records to the distributed network.

 ### Key Properties
+
 ```typescript
@Prop() fromProjectId: string     // Project ID when project is the giver
@Prop() toProjectId: string       // Project ID when project is the recipient  
@ -206,6 +226,7 @@ These properties control the dialog's behavior and determine what type of entiti
 ### 1. Initialization Phase

 #### Entry Point: `open()` Method
+
 ```typescript
 async open(
  giver?: GiverReceiverInputInfo,
@ -220,6 +241,7 @@ async open(
 The dialog's lifecycle begins when the `open()` method is called from a parent component. This method accepts several optional parameters that pre-populate the dialog with context-specific information. If a giver or receiver is already known (such as when recording a gift from a specific project), these can be passed in to skip the selection step. The method also accepts custom prompts and titles to provide contextual guidance to the user.

 **Initialization Steps:**
+
 1. **Entity Type Determination** (`updateEntityTypes()`)
   - Analyzes props to determine if giver/recipient should be person or project
   - Sets `giverEntityType` and `recipientEntityType` accordingly
@ -248,6 +270,7 @@ Finally, the component determines which step to display first. If enough context
 ### 2. Entity Type Logic

 #### Entity Type Matrix
+
 | Context | Giver Type | Recipient Type | Description |
 |---------|------------|----------------|-------------|
 | `showProjects=true` | project | person | HomeView "Project" button |
@ -258,6 +281,7 @@ Finally, the component determines which step to display first. If enough context
 The entity type determination follows a clear hierarchy of rules based on the dialog's opening context. When users click the "Project" button from the home view, they're indicating they want to record receiving something from a project, so the dialog configures itself for project-to-person gifts. Conversely, when opened from a project page with a "give to this project" context, it sets up for person-to-project transactions.

 #### Dynamic Entity Resolution
+
 ```typescript
 updateEntityTypes() {
  // Reset defaults
@ -280,6 +304,7 @@ The `updateEntityTypes()` method implements this logic by first resetting both e
 ### 3. Step 1: Entity Selection

 #### Display Logic
+
 The UI dynamically shows different entity grids based on `shouldShowProjects`:

 ```typescript
@ -292,6 +317,7 @@ get shouldShowProjects() {
 The first step presents users with a grid of selectable entities, but the content of this grid changes dramatically based on whether projects or people should be displayed. The `shouldShowProjects` computed property determines this by checking if the current selection step (giver or recipient) corresponds to an entity type of "project". This ensures users only see relevant options for their current selection task.

 #### Project Selection Grid
+
 - **Layout:** 3-4 columns on mobile/desktop
 - **Content:** First 7 projects with icons, names, and issuer info
 - **Actions:**
@ -301,6 +327,7 @@ The first step presents users with a grid of selectable entities, but the conten
 When displaying projects, the interface uses a wider grid layout to accommodate project icons and additional information like the project creator's identity. The grid shows only the first seven projects to avoid overwhelming the user, with a "Show All" option that navigates to the main discovery page for browsing the complete project catalog. Each project is displayed with its custom icon (if available), name, and information about who created or manages the project.

 #### Person Selection Grid
+
 - **Layout:** 4-6 columns responsive
 - **Content:**
  - "You" option (with conflict detection)
@ -313,6 +340,7 @@ When displaying projects, the interface uses a wider grid layout to accommodate
 The person selection grid uses a more compact layout since person entries require less information. It always includes a "You" option (allowing users to select themselves) and an "Unnamed" option for cases where the other party isn't in their contact list. The grid then displays up to 10 of the user's contacts, each with their avatar and name. Importantly, the interface includes conflict prevention logic that visually disables options that would result in the same person being selected as both giver and recipient.

 #### Conflict Detection Algorithm
+
 ```typescript
 wouldCreateConflict(contactDid: string) {
  // Only applies to person-to-person gifts
@ -335,6 +363,7 @@ The conflict detection algorithm prevents users from accidentally selecting the
 ### 4. Step 2: Gift Details

 #### Entity Display
+
 - **Editable Entities:** Show edit button, allow clicking to return to Step 1
 - **Locked Entities:** Show lock icon, prevent editing (e.g., when project is pre-selected)
 - **Visual Representation:** Appropriate icons (EntityIcon for people, ProjectIcon for projects)
@ -342,6 +371,7 @@ The conflict detection algorithm prevents users from accidentally selecting the
 The second step displays the selected entities prominently at the top of the form, providing visual confirmation of the user's choices. The interface distinguishes between editable and locked entities - editable entities show a pencil icon and can be clicked to return to the selection step, while locked entities (such as when the dialog was opened with a specific project context) show a lock icon and cannot be changed. This prevents users from accidentally modifying critical context information.

 #### Form Controls
+
 1. **Description Input**
   - Text field with dynamic placeholder
   - Uses custom prompt if provided
@ -362,6 +392,7 @@ The amount section provides multiple ways for users to specify the quantity of t
 For users who want to add additional details like photos or more complex descriptions, a link navigates to an expanded details view. The component carefully preserves all current form state by encoding it in query parameters, ensuring users don't lose their progress when exploring these advanced options.

 #### Validation Logic
+
 ```typescript
 async confirm() {
  // Check for active DID
@ -395,6 +426,7 @@ The validation logic implements several business rules before allowing gift subm
 ## Gift Recording Logic

 ### API Parameter Mapping
+
 The component translates UI selections into endorser server API parameters:

 ```typescript
@ -426,11 +458,14 @@ The component translates UI selections into endorser server API parameters:
 }
 ```

-The final step in the gift recording process involves translating the user's selections into the specific parameter format expected by the endorser server API. This mapping is complex because the API uses different fields depending on whether entities are people or projects. For project-to-person gifts, the project is identified by its handle ID in the `providerPlanHandleId` field, while the person is identified in the `toDid` field. Person-to-project gifts reverse this pattern, using `fromDid` for the person and `fulfillsProjectHandleId` for the project. Person-to-person gifts use the simpler `fromDid` and `toDid` pattern.
+The final step in the gift recording process involves translating the user's selections into the specific parameter format expected by the endorser server API. This mapping is complex because the API uses different fields depending on whether entities are people or projects. For project-to-person gifts, the project is identified by its handle ID in the `providerPlanHandleId` field, while the person is identified in the `toDid` field. Person-to-project gifts reverse this pattern, using `fromDid` for the person and `fulfillsProjectHandleId` for the project.
+
+Person-to-person gifts use the simpler `fromDid` and `toDid` pattern.

 ## State Management

 ### Core State Variables
+
 ```typescript
 // UI State
 visible: boolean = false;           // Dialog visibility
@ -457,6 +492,7 @@ activeDid: string = "";             // Current user's DID
 The component maintains several categories of state to track the user's progress through the gift recording process. UI state controls the dialog's visibility and current step, while entity state tracks the selected giver and recipient along with their types. Form state holds the user's input for the gift details, and data state contains the available options loaded from the database and API. This separation makes the component's behavior predictable and easier to debug.

 ### Navigation State Transitions
+
 ```mermaid
 graph TD
    A[Dialog Closed] --> B[open() called]
@ -479,6 +515,7 @@ The state transition diagram illustrates the possible paths users can take throu
 ## Error Handling

 ### Validation Layers
+
 1. **UI Prevention:** Disable/gray out invalid options
 2. **Form Validation:** Check required fields and business rules
 3. **API Validation:** Handle server-side errors gracefully
@ -487,6 +524,7 @@ The state transition diagram illustrates the possible paths users can take throu
 The component implements a multi-layered approach to error prevention and handling. The first layer prevents errors by disabling invalid options in the user interface, such as graying out contacts that would create conflicts. The second layer validates form inputs before submission, checking for required fields and business rule violations. The third layer handles errors returned by the server API, while the fourth layer ensures users receive clear, actionable feedback about any issues that occur.

 ### Common Error Scenarios
+
 - **Missing Identifier:** User hasn't selected an active DID
 - **Negative Amount:** Prevent negative gift values
 - **Empty Gift:** Require either description or amount
@ -499,6 +537,7 @@ Each error scenario is handled with specific validation logic and user-friendly
 ## Security Considerations

 ### Data Privacy
+
 - **DID Protection:** User identifiers only shared with explicit consent
 - **Local Storage:** Sensitive data encrypted in local database
 - **Network Transport:** All API calls use HTTPS encryption
@ -506,6 +545,7 @@ Each error scenario is handled with specific validation logic and user-friendly
 The component maintains strict privacy controls over user data, particularly decentralized identifiers which serve as the core of user identity in the system. DIDs are only transmitted to the server when users explicitly choose to record a gift, and all local storage uses encryption to protect sensitive information.

 ### Input Validation
+
 - **SQL Injection Prevention:** Parameterized database queries
 - **XSS Protection:** Input sanitization and Vue's built-in escaping
 - **Amount Validation:** Numeric input validation and range checking
@ -515,6 +555,7 @@ All user inputs are validated both on the client side for immediate feedback and
 ## Performance Optimization

 ### Lazy Loading
+
 - **Projects:** Only loaded when needed for project-related gifts
 - **Contacts:** Cached after initial load to avoid repeated queries
 - **Database:** Optimized queries with proper indexing
@ -522,15 +563,17 @@ All user inputs are validated both on the client side for immediate feedback and
 The component optimizes performance by loading data only when needed. Projects are fetched from the API only when the dialog needs to display them, reducing unnecessary network requests. Contact information is cached after the initial load to avoid repeated database queries. Database operations are optimized through proper indexing and efficient query patterns.

 ### Reactive Updates
+
 - **Watchers:** Automatically update entity types when props change
 - **Computed Properties:** Efficient conflict detection and UI state
 - **Minimal Re-renders:** Strategic use of v-show vs v-if

 Vue's reactivity system is leveraged to ensure the interface stays synchronized with changing data while minimizing unnecessary re-renders. Watchers automatically update internal state when component properties change, computed properties efficiently calculate derived state like conflict detection, and the template uses v-show instead of v-if where appropriate to avoid expensive DOM manipulations.

-## Integration Points
+## GiftedDialog Integration Points

 ### External Dependencies
+
 - **Endorser Server:** Gift submission and verification
 - **Database Layer:** Contact and settings management  
 - **Platform Services:** Cross-platform database access
@ -539,6 +582,7 @@ Vue's reactivity system is leveraged to ensure the interface stays synchronized
 The component integrates with several external systems to provide its functionality. The endorser server handles the cryptographic signing and publishing of gift records to the distributed network. The database layer manages local storage of contacts and user settings. Platform services provide an abstraction layer for database access across different deployment targets (web, mobile, desktop). The Vue router enables navigation to related views while preserving state.

 ### Child Components
+
 - **EntityIcon:** Person avatar rendering with fallbacks
 - **ProjectIcon:** Project icon rendering with custom images
 - **Notification System:** User feedback and error reporting
@ -548,6 +592,7 @@ The dialog relies on several child components to provide specialized functionali
 ## Future Considerations

 ### Extensibility
+
 - **New Entity Types:** Architecture supports additional entity types
 - **Custom Units:** Easy to add new currency/unit types
 - **Workflow Steps:** Framework supports additional steps if needed
@ -555,6 +600,7 @@ The dialog relies on several child components to provide specialized functionali
 The component's architecture is designed to accommodate future enhancements without major restructuring. The entity type system could be extended to support new types beyond people and projects. The unit selection system can easily accommodate new currencies or measurement types. The step-based workflow could be expanded to include additional steps for more complex gift recording scenarios.

 ### Accessibility
+
 - **Keyboard Navigation:** All interactive elements accessible
 - **Screen Readers:** Semantic HTML and ARIA labels
 - **Color Contrast:** Visual indicators don't rely solely on color
@ -562,6 +608,7 @@ The component's architecture is designed to accommodate future enhancements with
 Accessibility considerations ensure the component is usable by people with disabilities. All interactive elements can be navigated using only the keyboard, semantic HTML and ARIA labels provide context for screen readers, and visual indicators use more than just color to convey information. These features make the gift recording process inclusive for all users.

 ### Testing Strategy
+
 - **Unit Tests:** Individual method testing
 - **Integration Tests:** Full workflow testing
 - **E2E Tests:** User journey validation
@ -576,6 +623,7 @@ A comprehensive testing strategy ensures the component works reliably across dif
 The `GiftedDialog` component is referenced and used throughout the Time Safari application in various contexts, each with specific requirements and configurations. Understanding where and how this component is integrated provides insight into its versatility and the different user workflows it supports.

 #### 1. HomeView - Main Entry Point
+
 **File:** `src/views/HomeView.vue`  
 **Context:** Primary application dashboard and activity feed

@ -586,6 +634,7 @@ The HomeView serves as the main entry point for gift recording, providing users
 ```

 **Usage Patterns:**
+
 - **Gift Prompts Integration:** Connected with `GiftedPrompts` component to provide suggested gift ideas
 - **"Unnamed" Giver Support:** Special handling for recording gifts from unknown or unnamed individuals
 - **Context-Aware Opening:** Different title and prompt text based on whether recording from a person or project
@ -593,6 +642,7 @@ The HomeView serves as the main entry point for gift recording, providing users
 The HomeView implementation includes sophisticated logic for handling "Unnamed" givers, where the dialog is opened with specific pre-selections and immediately advances to Step 2 after calling `selectGiver()`. This streamlines the user experience when users want to record gifts from people not in their contact list.

 #### 2. ProjectViewView - Project-Specific Context
+
 **File:** `src/views/ProjectViewView.vue`  
 **Context:** Individual project pages with bidirectional gift recording

@ -615,6 +665,7 @@ ProjectViewView contains two separate instances of GiftedDialog to handle differ
 ```

 **Specialized Features:**
+
 - **Bidirectional Gift Recording:** Supports both giving to and receiving from projects
 - **Project Context Locking:** The project entity is pre-selected and cannot be changed
 - **Offer Integration:** Can be opened with pre-populated offer information
@ -623,6 +674,7 @@ ProjectViewView contains two separate instances of GiftedDialog to handle differ
 The ProjectViewView demonstrates the component's flexibility in handling complex scenarios where one entity (the project) is fixed while the other (person) needs to be selected. The `isFromProjectView` property helps the dialog understand this constrained context.

 #### 3. ContactsView - Contact-Specific Gift Recording
+
 **File:** `src/views/ContactsView.vue`  
 **Context:** Contact management with direct gift recording capabilities

@ -633,6 +685,7 @@ ContactsView integrates the dialog for recording gifts between the current user
 ```

 **Key Features:**
+
 - **Bidirectional Confirmation:** Users confirm whether they're recording giving or receiving
 - **Contact Pre-selection:** The contact is already known, simplifying entity selection
 - **Direction Clarity:** Clear messaging about gift direction to prevent confusion
@ -640,6 +693,7 @@ ContactsView integrates the dialog for recording gifts between the current user
 The ContactsView implementation includes a two-step confirmation process (`confirmShowGiftedDialog` and `showGiftedDialog`) that ensures users clearly understand whether they're recording giving something to a contact or receiving something from them.

 #### 4. ContactGiftingView - Specialized Gift Recording Interface
+
 **File:** `src/views/ContactGiftingView.vue`  
 **Context:** Dedicated interface for complex gift recording scenarios

@ -656,6 +710,7 @@ This view provides a specialized interface for gift recording with advanced enti
 ```

 **Advanced Features:**
+
 - **Dynamic Entity Type Resolution:** Supports complex scenarios with projects and people
 - **Step Type Management:** Handles both giver and recipient selection workflows
 - **Context Preservation:** Maintains complex state across navigation
@ -663,6 +718,7 @@ This view provides a specialized interface for gift recording with advanced enti
 ContactGiftingView demonstrates the most sophisticated usage of GiftedDialog, with comprehensive support for all entity type combinations and step management scenarios.

 #### 5. ClaimView - Offer Fulfillment Context
+
 **File:** `src/views/ClaimView.vue`  
 **Context:** Converting offers into actual gift records

@ -673,6 +729,7 @@ ClaimView uses GiftedDialog to record gifts that fulfill existing offers, creati
 ```

 **Offer Integration Features:**
+
 - **Offer Pre-population:** Gift details can be pre-filled from offer information
 - **Fulfillment Tracking:** Links gifts to specific offers for tracking purposes
 - **Context-Aware Prompts:** Custom messaging for offer fulfillment scenarios
@ -680,16 +737,19 @@ ClaimView uses GiftedDialog to record gifts that fulfill existing offers, creati
 #### 6. Supporting Views - Additional Integration Points

 **RecentOffersToUserView & RecentOffersToUserProjectsView:**
+
 - Provide quick access to gift recording from offer listings
 - Support both personal and project-related offer contexts

 **NewActivityView:**
+
 - Integrates gift recording into activity creation workflows
 - Supports creating gifts as part of broader activity documentation

 ### Integration Patterns and Best Practices

 #### Common Integration Pattern
+
 Most views follow a consistent pattern for integrating GiftedDialog:

 1. **Template Declaration:** Include the component with appropriate props
@ -699,6 +759,7 @@ Most views follow a consistent pattern for integrating GiftedDialog:
 5. **State Management:** Handle dialog results and state updates

 #### Props Configuration Strategy
+
 The component's props are designed to work together to create specific behaviors:

 - **Mutual Exclusivity:** `fromProjectId` and `toProjectId` are mutually exclusive
@ -707,6 +768,7 @@ The component's props are designed to work together to create specific behaviors
 - **Behavioral Modification:** Props combination determines available workflows

 #### Error Handling and User Experience
+
 Each integration point implements appropriate error handling and user experience considerations:

 - **Validation Feedback:** Clear error messages for invalid selections
@ -717,6 +779,7 @@ Each integration point implements appropriate error handling and user experience
 ### Development and Maintenance Considerations

 #### Component Coupling
+
 The widespread usage of GiftedDialog creates important coupling considerations:

 - **Interface Stability:** Changes to the component's API affect multiple views
@ -725,6 +788,7 @@ The widespread usage of GiftedDialog creates important coupling considerations:
 - **Documentation Needs:** Clear usage patterns help maintain consistency

 #### Future Evolution
+
 The component's integration patterns suggest several areas for future development:

 - **Workflow Standardization:** Common patterns could be extracted into mixins
@ -741,6 +805,7 @@ This comprehensive integration context demonstrates how GiftedDialog serves as a
 The current architecture supports people and projects, but could be extended to support additional entity types such as organizations, events, or resources. Here's precisely what these changes would look like:

 #### Current Entity Type System
+
 ```typescript
 // Current implementation in GiftedDialog.vue
 giverEntityType: "person" | "project" = "person";
@ -761,6 +826,7 @@ updateEntityTypes() {
 ```

 #### Extended Entity Type System
+
 ```typescript
 // Enhanced implementation with new entity types
 type EntityType = "person" | "project" | "organization" | "event" | "resource";
@ -814,6 +880,7 @@ updateEntityTypes() {
 ```

 #### New Component Integration Required
+
 ```vue
 <!-- New icon components needed -->
 <template>
@ -839,6 +906,7 @@ updateEntityTypes() {
 ```

 #### API Parameter Mapping Extensions
+
 ```typescript
 // Extended gift recording logic
 async recordGive() {
@ -900,6 +968,7 @@ async recordGive() {
 The current unit system supports Hours, USD, BTC, BX, and ETH. Here's how to add new currency/unit types:

 #### Current Unit System
+
 ```typescript
 // Current implementation in GiftedDialog.vue
 unitCode = "HUR";
@ -915,6 +984,7 @@ unitCode = "HUR";
 ```

 #### Enhanced Unit System
+
 ```typescript
 // New unit configuration system
 interface UnitDefinition {
@ -991,6 +1061,7 @@ export default class GiftedDialog extends Vue {
 ```

 #### Enhanced Template with Categorized Units
+
 ```vue
 <template>
  <!-- Enhanced unit selector with categories -->
@ -1025,6 +1096,7 @@ export default class GiftedDialog extends Vue {
 The current two-step workflow could be expanded to include additional steps for more complex scenarios:

 #### Current Workflow Structure
+
 ```typescript
 // Current step management
 currentStep = 1; // 1 = Entity Selection, 2 = Gift Details
@ -1040,6 +1112,7 @@ goBackToStep1(stepType: string) {
 ```

 #### Enhanced Multi-Step Workflow
+
 ```typescript
 // Enhanced workflow with additional steps
 type WorkflowStep = "entity-selection" | "gift-details" | "verification" | "attachment" | "confirmation";
@ -1184,6 +1257,7 @@ export default class GiftedDialog extends Vue {
 ```

 #### Enhanced Template with Multi-Step Navigation
+
 ```vue
 <template>
  <div v-if="visible" class="dialog-overlay">
@ -1399,6 +1473,7 @@ openDialog(giver?: GiverReceiverInputInfo, description?: string) {
 ```

 #### Standardized Mixin Implementation
+
 ```typescript
 // New file: src/mixins/GiftedDialogMixin.ts
 import { Component, Vue } from "vue-facing-decorator";
@ -1553,6 +1628,7 @@ export default class GiftedDialogMixin extends Vue {
 ```

 #### Updated Component Implementation Using Mixin
+
 ```typescript
 // Updated HomeView.vue using the mixin
 import { Component, Mixins } from "vue-facing-decorator";
@ -1607,6 +1683,7 @@ export default class HomeView extends Mixins(GiftedDialogMixin) {
 Complex state could be moved to a centralized Pinia store:

 #### New Pinia Store Implementation
+
 ```typescript
 // New file: src/stores/giftDialog.ts
 import { defineStore } from 'pinia';
@ -1777,6 +1854,7 @@ export const useGiftDialogStore = defineStore('giftDialog', {
 ```

 #### Updated Component Using Store
+
 ```typescript
 // Updated GiftedDialog.vue using Pinia store
 import { useGiftDialogStore } from '@/stores/giftDialog';
@ -1834,9 +1912,11 @@ These detailed implementations show precisely what the future enhancements would
 ## ANNEX: Complete GiftedDialog Component Inventory

 ### Purpose
+
 This inventory serves as a comprehensive checklist to ensure no functionality is lost during the Pinia store refactoring. Each item must be accounted for in the new store-based implementation.

 ### A. Component Props
+
 | Prop | Type | Default | Status | Store Field | Notes |
 |------|------|---------|--------|-------------|-------|
 | `fromProjectId` | string | `""` | ✅ Covered | N/A (passed as context) | Used to determine giverEntityType |
@ -1845,6 +1925,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `isFromProjectView` | boolean | `false` | ✅ Covered | N/A (passed as context) | Navigation context flag |

 ### B. Core State Variables
+
 | Variable | Type | Default | Status | Store Field | Critical |
 |----------|------|---------|--------|-------------|----------|
 | `visible` | boolean | `false` | ✅ Covered | `isVisible` | Yes |
@ -1859,6 +1940,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `unitCode` | string | `"HUR"` | ✅ Covered | `unitCode` | Yes |

 ### C. Context State Variables (CRITICAL - Previously Missing)
+
 | Variable | Type | Default | Status | Store Field | Critical |
 |----------|------|---------|--------|-------------|----------|
 | `callbackOnSuccess` | Function? | `() => {}` | ❌ **ADDED** | `callbackOnSuccess` | **YES** |
@ -1867,6 +1949,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `prompt` | string | `""` | ❌ **ADDED** | `prompt` | **YES** |

 ### D. API and Account State Variables (CRITICAL - Previously Missing)
+
 | Variable | Type | Default | Status | Store Field | Critical |
 |----------|------|---------|--------|-------------|----------|
 | `apiServer` | string | `""` | ❌ **ADDED** | `apiServer` | **YES** |
@ -1874,18 +1957,21 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `allMyDids` | string[] | `[]` | ❌ **ADDED** | `allMyDids` | **YES** |

 ### E. Data State Variables
+
 | Variable | Type | Default | Status | Store Field | Critical |
 |----------|------|---------|--------|-------------|----------|
 | `allContacts` | Contact[] | `[]` | ✅ Covered | `allContacts` | Yes |
 | `projects` | PlanData[] | `[]` | ✅ Covered | `projects` | Yes |

 ### F. Utility References (CRITICAL - Previously Missing)
+
 | Variable | Type | Status | Store Implementation | Critical |
 |----------|------|--------|---------------------|----------|
 | `libsUtil` | object | ❌ **NEEDS IMPORT** | Import in store | **YES** |
 | `didInfo` | function | ❌ **NEEDS IMPORT** | Import in store | **YES** |

 ### G. Computed Properties
+
 | Property | Return Type | Status | Store Getter | Critical |
 |----------|-------------|--------|--------------|----------|
 | `shouldShowProjects` | boolean | ✅ Covered | `shouldShowProjects` | Yes |
@ -1893,6 +1979,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `giftedDetailsQuery` | object | ✅ Covered | `giftedDetailsQuery` | Yes |

 ### H. Watchers
+
 | Watched Property | Handler | Status | Store Implementation | Critical |
 |------------------|---------|--------|---------------------|----------|
 | `showProjects` | `onShowProjectsChange()` | ✅ Covered | Reactive in store | Yes |
@ -1900,6 +1987,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `toProjectId` | `onToProjectIdChange()` | ✅ Covered | Reactive in store | Yes |

 ### I. Public Methods (API Contract)
+
 | Method | Parameters | Return Type | Status | Store Action | Critical |
 |--------|------------|-------------|--------|--------------|----------|
 | `open()` | giver?, receiver?, offerId?, customTitle?, prompt?, callback? | Promise\<void\> | ✅ Covered | `openDialog()` | **YES** |
@ -1908,6 +1996,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `confirm()` | none | Promise\<void\> | ✅ Covered | `submitGift()` | **YES** |

 ### J. Entity Selection Methods
+
 | Method | Parameters | Return Type | Status | Store Action | Critical |
 |--------|------------|-------------|--------|--------------|----------|
 | `selectGiver()` | contact? | void | ✅ Covered | `setGiver()` | **YES** |
@ -1916,11 +2005,13 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `selectRecipientProject()` | project | void | ✅ Covered | `selectRecipientProject()` | **YES** |

 ### K. Navigation Methods
+
 | Method | Parameters | Return Type | Status | Store Action | Critical |
 |--------|------------|-------------|--------|--------------|----------|
 | `goBackToStep1()` | step | void | ✅ Covered | `setEntitySelectionMode()` + `setCurrentStep()` | **YES** |

 ### L. Utility Methods
+
 | Method | Parameters | Return Type | Status | Store Action | Critical |
 |--------|------------|-------------|--------|--------------|----------|
 | `wouldCreateConflict()` | contactDid | boolean | ✅ Covered | `wouldCreateConflict()` | **YES** |
@ -1930,6 +2021,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `explainData()` | none | void | ✅ Covered | Component method | No |

 ### M. Business Logic Methods
+
 | Method | Parameters | Return Type | Status | Store Action | Critical |
 |--------|------------|-------------|--------|--------------|----------|
 | `recordGive()` | giverDid, recipientDid, description, amount, unitCode | Promise\<void\> | ✅ Covered | `submitGift()` | **YES** |
@ -1937,18 +2029,21 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `loadProjects()` | none | Promise\<void\> | ✅ Covered | `loadProjects()` | **YES** |

 ### N. Data Loading Methods (CRITICAL - Previously Missing)
+
 | Method | Parameters | Return Type | Status | Store Action | Critical |
 |--------|------------|-------------|--------|--------------|----------|
 | `loadAccountData()` | none | Promise\<void\> | ❌ **ADDED** | `loadAccountData()` | **YES** |
 | `loadContacts()` | none | Promise\<void\> | ❌ **ADDED** | `loadContacts()` | **YES** |

 ### O. Helper Methods
+
 | Method | Parameters | Return Type | Status | Implementation | Critical |
 |--------|------------|-------------|--------|----------------|----------|
 | `getGiveCreationErrorMessage()` | result | string | ✅ Covered | Component method | No |
 | `eraseValues()` | none | void | ✅ Covered | `resetForm()` | Yes |

 ### P. Template Dependencies
+
 | Template Reference | Type | Status | Store Implementation | Critical |
 |-------------------|------|--------|---------------------|----------|
 | `stepType` | string | ✅ Covered | `entitySelectionMode` | **YES** |
@ -1957,6 +2052,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `giftedDetailsQuery` | computed | ✅ Covered | `giftedDetailsQuery` getter | **YES** |

 ### Q. External Dependencies (Must be imported in store)
+
 | Dependency | Source | Status | Required For | Critical |
 |------------|--------|--------|--------------|----------|
 | `createAndSubmitGive` | `libs/endorserServer` | ❌ **NEEDS IMPORT** | Gift submission | **YES** |
@ -1971,6 +2067,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `PRIVACY_MESSAGE` | `libs/util` | ❌ **NEEDS IMPORT** | Data explanation | No |

 ### R. Type Definitions Required
+
 | Type | Source | Status | Required For | Critical |
 |------|--------|--------|--------------|----------|
 | `GiverReceiverInputInfo` | `libs/util` | ✅ Covered | Entity info | **YES** |
@ -1979,6 +2076,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | `NotificationIface` | `constants/app` | ✅ Covered | Notifications | Yes |

 ### S. Integration Points (Must be preserved)
+
 | Integration | Views Using | Status | Refactoring Impact | Critical |
 |-------------|-------------|--------|-------------------|----------|
 | HomeView | Main entry | ✅ Planned | Phase 3.1 | **YES** |
@ -1989,6 +2087,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 | GiftedDetailsView | Advanced options | ✅ Covered | Query params | **YES** |

 ### T. Risk Assessment Summary
+
 | Category | Items | Covered | Missing | Risk Level | Pre-Phase Status |
 |----------|-------|---------|---------|------------|------------------|
 | **Props** | 4 | 4 | 0 | ✅ **LOW** | ✅ Ready |
@ -2003,6 +2102,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 ### U. Action Items for Refactoring Plan

 #### 🔄 **PRE-PHASE 1 (IN PROGRESS - 3 days)**
+
 - [ ] **Pre-Phase 1.1**: Complete store interface with all missing fields
 - [ ] **Pre-Phase 1.2**: Validate all external dependency imports
 - [ ] **Pre-Phase 1.3**: Implement critical method stubs
@ -2010,6 +2110,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 - [ ] **Pre-Phase 1.5**: Update documentation and verify readiness

 #### ⏸️ **CRITICAL (Must Complete Before Phase 1)**
+
 - [ ] ✅ All context state fields added to store interface
 - [ ] ✅ All API/account state fields added to store interface  
 - [ ] ✅ All external dependencies imported and tested in store
@ -2017,6 +2118,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 - [ ] ✅ Utility reference imports validated

 #### ⚠️ **HIGH PRIORITY (Phase 1 - Enhanced with Template Foundations)**
+
 - [ ] Implement complete store with all identified fields
 - [ ] Create comprehensive test coverage for missing functionality
 - [ ] Validate callback function handling
@ -2026,6 +2128,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 - [ ] **NEW**: Implement TypeScript interfaces for component props and events

 #### ✅ **MEDIUM PRIORITY (Phase 2-3 - Enhanced with Template Integration)**
+
 - [ ] Implement hybrid component with ALL computed properties
 - [ ] Migrate views with full integration testing
 - [ ] Validate query parameter generation
@ -2035,6 +2138,7 @@ This inventory serves as a comprehensive checklist to ensure no functionality is
 - [ ] **NEW**: Add loading and error state components

 #### 🎨 **TEMPLATE ENHANCEMENT PRIORITY (Phase 4-5)**
+
 - [ ] **NEW**: Complete template decomposition and component integration
 - [ ] **NEW**: Implement visual progress indicators and animations
 - [ ] **NEW**: Optimize component performance and bundle size
@ -2048,12 +2152,15 @@ This inventory serves as a comprehensive checklist to ensure no functionality is

 ## PRE-PHASE 1: CRITICAL MISSING FIELDS RESOLUTION

-### Overview
+### Pre-phase Overview
+
 Before beginning the Pinia store refactoring, all critical missing fields must be addressed to prevent breaking changes. This pre-phase ensures 100% functionality preservation.

 ### Pre-Phase 1.1: Store Interface Completion
+
 **Duration:** 1 day
 **Files to create/modify:**
+
 ```
 src/types/giftDialog.ts (complete interface)
 src/stores/giftDialog.ts (skeleton with imports)
@ -2062,12 +2169,14 @@ src/stores/giftDialog.ts (skeleton with imports)
 #### ✅ **TASK CHECKLIST:**

 **1. Complete Type Definitions**
+
 - [ ] Add all missing context state types
 - [ ] Add all missing API/account state types
 - [ ] Import all required external types
 - [ ] Define complete callback function signatures

 **Enhanced Type Definitions:**
+
 ```typescript
 // src/types/giftDialog.ts
 import { Contact } from '@/db/tables/contacts';
@ -2150,11 +2259,13 @@ export interface GiftedDetailsQuery {
 ```

 **2. Import All External Dependencies**
+
 - [ ] Create import statements for all 11 external dependencies
 - [ ] Verify import paths are correct
 - [ ] Test imports compile without errors

 **Complete Import List:**
+
 ```typescript
 // src/stores/giftDialog.ts
 import { defineStore } from 'pinia';
@ -2191,11 +2302,13 @@ import {
 ```

 **3. Create Store Skeleton**
+
 - [ ] Define complete state with default values
 - [ ] Create placeholder actions for all methods
 - [ ] Add validation for critical missing functionality

 **Store Skeleton:**
+
 ```typescript
 export const useGiftDialogStore = defineStore('giftDialog', {
  state: (): GiftDialogState => ({
@ -2246,17 +2359,20 @@ export const useGiftDialogStore = defineStore('giftDialog', {
 ```

 ### Pre-Phase 1.2: Dependency Validation
+
 **Duration:** 0.5 days
 **Objective:** Ensure all external dependencies are available and working

 #### ✅ **TASK CHECKLIST:**

 **1. Validate Import Paths**
+
 - [ ] Test each import statement individually
 - [ ] Verify all functions/classes are exported correctly
 - [ ] Check for any missing dependencies in package.json

 **2. Create Import Test File**
+
 ```typescript
 // test-imports.ts (temporary file for validation)
 import { createAndSubmitGive, didInfo, getHeaders } from '@/libs/endorserServer';
@ -2281,18 +2397,21 @@ console.log('All imports successful!');
 ```

 **3. Function Signature Validation**
+
 - [ ] Verify `createAndSubmitGive` signature matches usage in component
 - [ ] Check `didInfo` function parameters
 - [ ] Validate `retrieveAccountDids` return type
 - [ ] Confirm `PlatformServiceFactory.getInstance()` method exists

 ### Pre-Phase 1.3: Critical Method Stubs
+
 **Duration:** 0.5 days
 **Objective:** Create working stubs for all critical methods

 #### ✅ **TASK CHECKLIST:**

 **1. Data Loading Method Stubs**
+
 ```typescript
 // Add to store actions
 async loadAccountData(): Promise<void> {
@ -2353,6 +2472,7 @@ async loadProjects(): Promise<void> {
 ```

 **2. Context Management Method Stubs**
+
 ```typescript
 // Add to store actions
 setCallbackOnSuccess(callback?: (amount: number) => void): void {
@ -2377,6 +2497,7 @@ setPrompt(prompt: string): void {
 ```

 **3. Validation Method Stubs**
+
 ```typescript
 // Add to store actions
 validateCurrentStep(): boolean {
@ -2411,12 +2532,14 @@ validateCurrentStep(): boolean {
 ```

 ### Pre-Phase 1.4: Integration Testing
+
 **Duration:** 1 day
 **Objective:** Test all critical missing functionality before full implementation

 #### ✅ **TASK CHECKLIST:**

 **1. Create Test Harness**
+
 ```typescript
 // test-store-functionality.ts (temporary test file)
 import { useGiftDialogStore } from '@/stores/giftDialog';
@ -2466,6 +2589,7 @@ testCriticalFunctionality().catch(console.error);
 ```

 **2. Manual Integration Tests**
+
 - [ ] Test store can be imported in Vue component
 - [ ] Verify all data loading methods work with real data
 - [ ] Test context management preserves values
@ -2473,28 +2597,33 @@ testCriticalFunctionality().catch(console.error);
 - [ ] Confirm logging output is helpful for debugging

 **3. Performance Validation**
+
 - [ ] Measure store initialization time
 - [ ] Test data loading performance with large contact lists
 - [ ] Verify no memory leaks in reactive state
 - [ ] Check bundle size impact

 ### Pre-Phase 1.5: Documentation and Checklist Updates
+
 **Duration:** 0.5 days
 **Objective:** Update documentation with completed critical fields

 #### ✅ **TASK CHECKLIST:**

 **1. Update Inventory Status**
+
 - [ ] Mark all critical fields as "✅ Implemented" in annex
 - [ ] Update risk assessment to show reduced risk levels
 - [ ] Verify readiness status can be changed to "READY"

 **2. Create Implementation Checklist**
+
 - [ ] Document exact steps taken for each critical field
 - [ ] Create troubleshooting guide for common issues
 - [ ] Add performance benchmarks and expectations

 **3. Phase 1 Readiness Validation**
+
 - [ ] All external dependencies imported and tested
 - [ ] All critical state fields implemented
 - [ ] All critical methods have working stubs
@ -2508,6 +2637,7 @@ testCriticalFunctionality().catch(console.error);
 Understanding complexity is crucial for accurate estimation. We measure complexity across multiple dimensions:

 ##### **1. Technical Complexity Factors**
+
 - **State Dependencies**: Number of interconnected state variables (GiftedDialog has 25+ state fields)
 - **Integration Points**: Number of views using the component (8+ integration points identified)
 - **Backward Compatibility**: Requirement to maintain exact existing behavior during transition
@ -2515,6 +2645,7 @@ Understanding complexity is crucial for accurate estimation. We measure complexi
 - **Type Safety**: Comprehensive TypeScript integration across component hierarchy

 ##### **2. Complexity Scoring System**
+
 ```typescript
 interface ComplexityMetrics {
  technical: 1-5;     // Code complexity, architecture changes
@ -2536,6 +2667,7 @@ const complexityScore = {
 ```

 ##### **3. Complexity Indicators by Phase**
+
 - **Pre-Phase 1**: Low complexity (import validation, interface completion)
 - **Phase 1**: Medium-High (store creation + 4 foundation components)
 - **Phase 2**: High (backward compatibility + template decomposition)
@ -2545,6 +2677,7 @@ const complexityScore = {
 - **Phase 6**: Medium-High (comprehensive testing, documentation)

 ##### **4. Risk-Adjusted Estimation Model**
+
 ```typescript
 interface EstimationFactors {
  baseEffort: number;           // Initial estimate
@ -2580,18 +2713,21 @@ const estimationModel = {
 ##### **Timeline Options**

 **Option A: Aggressive Timeline (Original)**
+
 - **Duration**: 25 days (5 weeks)
 - **Risk**: High - 15-20% probability of overrun
 - **Conditions**: Dedicated developer, minimal scope creep
 - **Trade-offs**: May require reducing accessibility features or advanced optimizations

 **Option B: Realistic Timeline (Complexity-Adjusted)**
+
 - **Duration**: 30-33 days (6-7 weeks)  
 - **Risk**: Medium - 70-80% probability of completion within timeline
 - **Buffer**: 20-30% contingency for complexity factors
 - **Recommended**: ✅ **This is the recommended approach**

 **Option C: Conservative Timeline (High-Confidence)**
+
 - **Duration**: 35-40 days (7-8 weeks)
 - **Risk**: Low - 90%+ probability of completion
 - **Buffer**: 40-60% contingency for unknown complexity
@ -2614,18 +2750,21 @@ const estimationModel = {
 #### **Complexity Justification by Phase**

 **Phase 2 (Highest Complexity - 5/5):**
+
 - Maintaining backward compatibility across 8+ integration points
 - Dual-mode implementation (legacy + store) with identical behavior
 - Template decomposition of 400+ line component
 - Event handling synchronization between parent/child components

 **Phase 4 (High Complexity - 4/5):**
+
 - WCAG accessibility compliance requires extensive testing
 - Performance optimization across multiple platforms
 - Animation and transition implementation
 - Focus management and keyboard navigation

 **Phase 1 & 6 (High Complexity - 4/5):**
+
 - Foundation component design affects entire architecture
 - Comprehensive testing and documentation requirements
 - TypeScript interface design for extensibility
@ -2633,6 +2772,7 @@ const estimationModel = {
 ### Risk Mitigation

 #### **Pre-Phase 1 Risks:**
+
 1. **Import Path Issues**: Some dependencies might have changed locations
   - *Mitigation*: Test each import individually, update paths as needed

@ -2648,6 +2788,7 @@ const estimationModel = {
 ### Success Criteria for Pre-Phase 1

 #### **Must Complete Before Phase 1:**
+
 - [ ] ✅ All 11 external dependencies successfully imported
 - [ ] ✅ All 7 critical missing fields added to store interface
 - [ ] ✅ All data loading methods working with real data
@ -2658,6 +2799,7 @@ const estimationModel = {
 - [ ] ✅ Documentation updated to reflect completed work

 #### **Readiness Check:**
+
 ```typescript
 // readiness-check.ts
 import { useGiftDialogStore } from '@/stores/giftDialog';
@ -2698,7 +2840,8 @@ async function verifyReadiness(): Promise<boolean> {

 ## GiftedDialog Pinia Store Refactoring Plan

-### Overview
+### Refactoring Overview
+
 This plan outlines a systematic approach to refactor the GiftedDialog component to use Pinia store for state management while maintaining backward compatibility and minimizing disruption. This refactoring also includes improvements to variable naming, type safety, and code clarity.

 **CRITICAL UPDATE**: After comprehensive audit of `GiftedDialog.vue`, additional fields and functionality have been identified that must be included in the refactoring plan to prevent breaking changes.