Instructions
Page Name and Component Location
Pages are the different top level views (aka panels) that we display in the application. Their names are defined in file src/store/types.ts in the following line of code.
export type AppView = 'browser' | 'search-results' | 'settings';The 'browser' one is the main default application src/App.tsx, but any pages other than the main (browser) page should follow a pattern similar to what you find in src/components/SearchResultsView.tsx
Tab Navigation
Each page has a corresponding tab button in the tab panel at the top of the screen (Browse, Search, Settings). When the user clicks a tab button, we update the currentView in the global AppState, and that causes the page to display at next render.
React Global State Management
Example: setCurrentView('search-results');