Bookmarks FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer. SAVED_AT_START lists the ids that are already saved when the page loads (set it to an empty array for none), and OPEN_QUESTION names the row that's open on load. Keep the list to about eight; past that, a search or categories serve visitors better.

Not yet: they live in the component's state, so a reload resets them to SAVED_AT_START. To keep them, write the saved array to local storage or your own endpoint when it changes, and read it back in an effect after mount so the server and the browser render the same first paint.

The question opens its row, switches the filter back to All if you were on Saved, and moves keyboard focus to the question; the cross takes the row out of your saved list. When nothing is saved the panel says so, and with the filter on Saved the list shows an empty state with a button back to the full list. The list keeps a minimum height, so taking a row out of Saved doesn't move what's below it, and a polite status line reads "Showing 2 of 7 questions, 2 saved".

The panel has to open a row, so the block holds the open row in state. The Accordion takes value (an array of open ids) and onValueChange, and hiddenUntilFound keeps closed answers in the markup.

Each question is a button inside its own h3 under the section's h2. The star is a toggle button after its question in the Tab order, named "Save question:" and the question, and it says whether it's pressed. The filter is one group of two radio buttons named "Show questions", and the arrow keys move between them. Tab moves between the questions and their stars; the arrow keys don't move between questions on this base.

Below the lg breakpoint the header and the filter stack above the rows, which run from rail to rail under a rule with + marks, and the Saved questions panel follows the last row. A long question wraps and keeps its star and chevron at the end, and nothing scrolls sideways at 320 pixels.