LF-5232 Fix farm notes modal not closing when clicking my profile icon or feedback button

[kathyavini]

Description

This PR centralizes the visibility state for all the right side-drawers and the TopMenu Profile Menu into a single global value activeDrawer, so that a most a single drawer (or menu) can be opened at a time.

Each individual's drawer (or menu)'s open state is then derived from the global activeDrawer:

const isOpen = activeDrawer === drawerName;

The existing AppUIContext (which previously tracked isFeedbackFormOpen, setIsFeedBackFormOpen), was already perfect for holding this state, and a common exported hook (useDrawerState) can now replace localized [isOpen, setIsOpen] style state in each component.

Extending the pattern to future drawers

Now to create a new drawer that participates in this mutually exclusive application state, register the name in the appContext.ts type:

type DrawerName = 'feedbackSurvey' | 'farmNotes' | /*... */ | 'newDrawer'

and interact with it like this in the component, destructuring only the needed values

const { isOpen, openDrawer, closeDrawer, toggleDrawer } = useDrawerState('newDrawer');

Jira link: https://lite-farm.atlassian.net/browse/LF-5232

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have ordered translation keys alphabetically (optional: run pnpm i18n to help with this)
• I have added the GNU General Public License to all new files

[kathyavini]

The useDrawerState hook was actually created specifically to make it easier for components to use this functional setter in closeDrawer(). The original implementation which just had

setActiveDrawer(null)

on each close, produced a bug specific to the TopMenu Profile Menu, where clicking on a new drawer initiator (e.g. FeedbackForm) would trigger setActiveDrawer('feedbackForm') AND THEN also trigger the click-away listener on TopMenu, triggering its onClose() and thus setActiveDrawer(null). The result was that the feedback form would not open until you clicked again.

Right now only the TopMenu is set up with a click-away listener such that this style of onClose() is necessary, but I figured putting it here would make it safer to consume this pattern in the future, in case other participants did have click away listeners set up eventually.

And then as a bonus this hook API rather cleaned up the component logic as well!

[SayakaOno]

Nice refactor! 🙌