Enhance Vocabulary: Separate Dictionary & My Words

Hey guys! Let's talk about leveling up our word game! This article outlines a cool feature request: separating the word lookup function from your saved vocabulary. Currently, everything's crammed into one panel, which can be a bit confusing. We're aiming to make things cleaner and more intuitive. Get ready to have your vocabulary management experience streamlined! This will involve creating separate panels for word lookup and managing your saved words, making it easier to find definitions and review your vocabulary. Read on for the full scoop!

The Current Vocabulary Situation: A Single Panel

Right now, when you hit that 'Dictionary' button (📖), you get a single panel that's a bit of a mishmash. It tries to do everything all at once:

• Word Search: You type in a word and hope for the best.
• Saved Words: Your list of words you've collected.
• Word Details: The nitty-gritty info about a word.

This setup can lead to some confusion. When you click 'Dictionary,' you're probably thinking, "I want to look up a word!" But then you're also presented with your saved words. It's like going to a restaurant and being handed a menu and a list of your past orders all at once. It can be a little overwhelming.

The Need for a Change

This current design has a few drawbacks. Firstly, it muddles the main purpose of the Dictionary. Users primarily expect it to be for word lookup and not necessarily managing their saved vocabulary. Secondly, the combined interface can be cluttered and less user-friendly, especially for those new to the platform. By separating these two functionalities, we can improve user experience and make it easier for users to find the information they need.

The Proposed Solution: Two Distinct Panels

To make things slicker, we're proposing a new design with two separate panels. This will make your vocabulary management feel more organized and intuitive, with each panel having a specific, focused purpose.

Header Actions: A Clear Navigation

First, let's look at the header navigation. We're going to add a 'My Words' button. The updated header will look like this:

• ☀️/🌙: Theme (Toggle between light and dark mode)
• ⚙️: Settings (For admin users only)
• 📖: Dictionary (Opens the Dictionary Panel - Focus: Pure word lookup)

•   		My Words (Opens the My Words Panel - **Focus: Saved vocabulary**)
  

• Sign Out: Logout (Ends your session)

This arrangement immediately clarifies the different functions. Now it's easy to see where to go.

Dictionary Panel: Your Word Lookup Hub

The Dictionary Panel (📖) will be your go-to for looking up word definitions. It'll be all about finding out what words mean. Imagine it as your own personal search engine for words. Here's what it will offer:

• Search Box: Type in a word, hit Enter, and boom - the definition appears!
• Word Details: Definition, pronunciation (IPA), part of speech, examples, and synonyms.
• 'Save to My Words' Button: A quick way to add words you like to your personal list.
• Recent Lookups: A session-based list of the last 10 words you looked up.
• Audio Pronunciation: Click to hear the word pronounced.

Data Source: FreeDictionary API / Gemini AI fallback

My Words Panel: Your Vocabulary Fortress

The My Words Panel will be dedicated to managing your saved vocabulary. Think of it as your personal word collection, where you can review, organize, and study the words you've saved. This panel is all about helping you become a vocabulary master. Here's what you can expect:

• Filter/Search: Quickly find words in your saved list.
• Sort: Arrange words alphabetically or by the date you added them.
• Word List: A list of your saved words with quick actions like audio pronunciation and delete.
• Word Details: Access full word details when you select a word.
• Personal Notes: Add your own notes to each word.
• Date Added: See when you saved each word.

Data Source: User's database (PostgreSQL)

Key Differences: Understanding the Split

To make it super clear, here's a table showing the key differences between the Dictionary and My Words panels. This should help you understand the core purpose of each one.

Implementation Tasks: Making it Happen

This is how we're going to bring this new feature to life! Here's a breakdown of the implementation tasks:

Frontend: The User Interface

• Create a new MyWords.tsx component: We'll copy the structure from the current Dictionary component, remove the search/lookup functionality, and focus on displaying the saved word list. We'll also add a filter input so you can easily find your saved words. This component will show word details when you click on a word (and fetch the definition if needed).
• Update the Dictionary.tsx component: We'll strip out the saved words list section and add a 'Recent Lookups' section. We'll also add that handy 'Save to My Words' button in the word details section. This will streamline the Dictionary to focus solely on word lookup.
• Update AppHeader.tsx: Add the 'My Words' button (with a library icon) and keep the Dictionary button (with a book icon). We'll also add an onOpenMyWords callback prop.
• Update Redux store: Add myWordsOpen state to the dictionarySlice (or create a new myWordsSlice) and add the openMyWords and closeMyWords actions. This will allow us to manage the state of the My Words panel.
• Update WritingStudio.tsx: Import and render the MyWords component. We'll also add a handler for the My Words button.

Backend: Behind the Scenes

• Backend (if needed): We may need to ensure that the /api/v1/my-words endpoint returns full definition data. Alternatively, we can fetch the definition on-demand when you click a saved word.

UX Design: Making it User-Friendly

We'll be updating the UX Design sections in frontend/docs/UXDesign.md to reflect these changes. You can find detailed information on:

• Section 4: Dictionary (Word Lookup)
• Section 5: My Words (Saved Vocabulary)
• Header Actions Summary table

This will ensure that the user interface is intuitive and easy to use. The UX design will focus on making it easy to look up words and manage your saved vocabulary. We want to ensure that the user interface is intuitive and easy to use.

Related Issues: Addressing Current Problems

This feature directly addresses related issues, such as the problem where saved words aren't persisted and definition details are blank. By separating the Dictionary and My Words panels, we ensure that the user can efficiently manage their vocabulary and access the information they need.

• #1 - Dictionary: Saved words not persisted and definition details blank

Acceptance Criteria: What Success Looks Like

Here's what we need to achieve to consider this feature a success:

• Header shows both Dictionary (📖) and My Words (📚) buttons.
• The Dictionary panel focuses on word lookup only.
• The My Words panel shows your saved vocabulary from the database.
• You can save words from the Dictionary to My Words.
• My Words loads your saved words when the panel opens.
• Word details show the full definition, IPA, examples, and synonyms.
• You can edit notes in the My Words panel.
• Recent lookups are shown in the Dictionary (session-based).

By following these steps, we can ensure that our users have a seamless experience and can easily look up words and manage their vocabulary.

So there you have it, guys! We're making some awesome improvements to the word lookup and vocabulary management experience. Stay tuned for updates, and happy word hunting!