Data Persistence and Cleanup for Detailed Mode

[ErnestoIngles]

Description

Currently, information entered in the Body and Footer fields is volatile. If the user accidentally toggles the "Detailed Mode" off or refreshes the page, all written progress is lost. This issue aims to implement a persistence layer using localStorage and provide a way to manually reset these fields.

User Stories

• As a user, I want my detailed descriptions to be saved automatically so that I don't lose my work if the page reloads.

• As a user, I want a "Clear" button within the detailed section to quickly reset the Body and Footer without affecting the main commit header.

Proposed Solution

1. LocalStorage Integration:

• Save body and footer strings to localStorage on every input change.

• Retrieve and populate these fields during the ngOnInit lifecycle hook.

2. UI/UX Improvements:

• Add a "Clear" button (with a trash icon or "Reset" text) inside the detailed-fields container.

• This button will trigger a function to empty both variables and remove the keys from localStorage.

3. Refactor Toggle Logic:

• Update toggleDetailedMode() to not clear the variables, allowing the user to hide/show the fields without losing the text.

Acceptance Criteria

• Body and Footer text persists after a page refresh.

• Toggling "Detailed Mode" off and on keeps the existing text.

• A "Clear" button exists and successfully resets only the detailed fields.

• LocalStorage is kept in sync with the component state.