Add Word Form Components

Relevant source files

The following files were used as context for generating this wiki page:

• app/src/main/java/com/vocabri/ui/screens/addword/components/NounFields.kt
• app/src/main/java/com/vocabri/ui/screens/addword/components/VerbFields.kt
• app/src/main/java/com/vocabri/ui/screens/addword/components/TranslationTextField.kt
• app/src/main/java/com/vocabri/ui/screens/addword/components/ExampleTextField.kt
• app/src/main/java/com/vocabri/ui/screens/addword/AddWordScreen.kt
• app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordViewModel.kt
• app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordState.kt
• app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordEvent.kt
• app/src/main/java/com/vocabri/ui/screens/addword/components/AdjectiveAdverbFields.kt
• app/src/main/java/com/vocabri/ui/screens/addword/components/WordTextField.kt

The Add Word Form Components are a collection of modular Jetpack Compose UI elements responsible for capturing user input on the AddWordScreen. These components provide text fields and selection chips for entering a new word, its translations, examples, and part-of-speech specific metadata. The form is dynamic, displaying different fields based on the selected part of speech (e.g., Noun, Verb).

All components are driven by the AddWordState and communicate user interactions back to the AddWordViewModel via AddWordEvents. This follows a unidirectional data flow pattern, ensuring a predictable and maintainable UI. The AddWordScreen orchestrates the display of these components, including a Crossfade animation to switch between part-of-speech-specific fields.

Sources: app/src/main/java/com/vocabri/ui/screens/addword/AddWordScreen.kt:100-108, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordViewModel.kt, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordState.kt

Component Architecture

The AddWordScreen is the container for all form components. It uses a LazyColumn to display a series of common and conditional UI components.

The diagram below illustrates the hierarchy of components within the AddWordScreenContent composable.

Data Flow

User interactions with any form component trigger a specific AddWordEvent. The AddWordViewModel processes this event, updates the AddWordState, and the UI recomposes to reflect the new state.

The following sequence diagram shows an example of a user adding a new translation.

Common Components

These components are always visible on the "Add Word" screen, regardless of the selected part of speech.

| Component | State Property (AddWordState.Editing) | Events Triggered | Description - - |
| WordTextField | text | UpdateText | A simple TextField for entering the main word. - - |

• |
  | TranslationTextField | currentTranslation, translations | UpdateCurrentTranslation, AddTranslation, RemoveTranslation, OnTranslationFieldFocusChange | A TextFieldWithButton that allows adding multiple translations. Added translations are displayed as chips. - |
  | ExampleTextField | currentExample, examples | UpdateCurrentExample, AddExample, RemoveExample, OnExampleFieldFocusChange | A TextFieldWithButton for adding multiple usage examples. Added examples are displayed as chips. - |

Sources: app/src/main/java/com/vocabri/ui/screens/addword/components/WordTextField.kt, app/src/main/java/com/vocabri/ui/screens/addword/components/TranslationTextField.kt, app/src/main/java/com/vocabri/ui/screens/addword/components/ExampleTextField.kt, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordState.kt:28-41, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordEvent.kt:29-41

Part-of-Speech Specific Components

These components are conditionally rendered inside a Crossfade block based on the partOfSpeech property in AddWordState.Editing.

Sources: app/src/main/java/com/vocabri/ui/screens/addword/AddWordScreen.kt:100-108

NounFields

This composable is shown when the selected part of speech is NOUN. It provides inputs for noun-specific attributes.

• Gender Selection: A ChipsFlowRow displays WordGender options (MASCULINE, NEUTER, FEMININE). The selected gender can be toggled.
• Plural Form: A TextField to enter the plural form of the noun.

State Property (AddWordState.Editing)	Events Triggered	Description
selectedGender	UpdateNounGender	Holds the currently selected WordGender.
pluralForm	UpdatePluralForm	Holds the text for the noun's plural form.

Sources: app/src/main/java/com/vocabri/ui/screens/addword/components/NounFields.kt:41-76, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordState.kt:44-45, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordEvent.kt:44-45

VerbFields

This composable is shown for VERB. It uses the TextFieldWithButton custom component to allow users to add multiple conjugations and management rules, which are then displayed as chips.

• Conjugation: Input for verb conjugations.
• Management: Input for verb management (e.g., prepositions it's used with).

| State Property (AddWordState.Editing) | Events Triggered | Description - - - li>
| currentConjugation, conjugations | UpdateCurrentConjugation, AddConjugation, RemoveConjugation, OnConjugationFieldFocusChange | Manages the list of verb conjugations. - - - - |
| currentManagement, managements | UpdateCurrentManagement, AddManagement, RemoveManagement, OnManagementFieldFocusChange | Manages the list of verb management rules. - - |

Sources: app/src/main/java/com/vocabri/ui/screens/addword/components/VerbFields.kt:38-76, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordState.kt:48-57, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordEvent.kt:48-59

AdjectiveAdverbFields

This composable is shared by both ADJECTIVE and ADVERB parts of speech. It provides simple TextFields for comparative and superlative forms.

• Comparative: A TextField for the comparative form (e.g., "better").
• Superlative: A TextField for the superlative form (e.g., "best").

State Property (AddWordState.Editing)	Events Triggered	Description
comparative	UpdateComparative	Holds the text for the comparative form.
superlative	UpdateSuperlative	Holds the text for the superlative form.

Sources: app/src/main/java/com/vocabri/ui/screens/addword/components/AdjectiveAdverbFields.kt:39-80, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordState.kt:60-61, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordEvent.kt:62-63

Conclusion

The Add Word Form Components in Vocabri are a well-structured set of reusable Jetpack Compose elements that create a dynamic and responsive user interface for adding new words. By leveraging a state-driven architecture with AddWordViewModel, AddWordState, and AddWordEvent, the system maintains a clear separation of concerns and a unidirectional data flow. The modularity of common components and part-of-speech-specific components allows for easy maintenance and future expansion of supported word types.

Sources: app/src/main/java/com/vocabri/ui/screens/addword/AddWordScreen.kt, app/src/main/java/com/vocabri/ui/screens/addword/viewmodel/AddWordViewModel.kt