web(nav): announce the current page in a folded section to screen readers, document collapsible sections

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/content/docs/guides/unibox.mdx

@@ -15,6 +15,7 @@ The columns are yours to size. Every choice here is remembered in the browser yo
 | --- | --- |
 | The divider between the list and the thread | Drag it to widen the conversation list so long subjects fit, or to give the space back to the thread. It also takes the keyboard once it has focus: arrow keys nudge it (hold `Shift` for a bigger step), `Home` and `End` go to the narrowest and widest the window allows, `Enter` (or a double-click) puts it back to the default. |
 | **Collapse** at the bottom of the left navigation, or `b` | Shrinks Warmbly's own navigation to an icon rail and gives the width to the page. Row labels become tooltips; unread mail keeps its count badge and an open [Advisor](/guides/advisor/) finding shows as a coloured dot on the icon. The same control expands it again. |
+| The section headers in the left navigation (Email, CRM, Resources) | Click one to fold its section away. Like the other layout choices, it is remembered in this browser. While a section is folded and you are on one of its pages, a small dot beside the header shows where you are. In the icon rail, folded sections stay hidden except the page you are on. |
 | The contact button in the thread header | Shows or hides the contact panel on the right. It starts closed when no preference is saved. Opening or closing it sticks across conversations, and existing preferences are preserved. |
 
 How wide the list can get depends on the window: the thread always keeps enough room to read a message, and the contact panel counts toward that when it is open, so the widest setting is narrower on a laptop than on a large monitor.

web/src/components/layout/AppNav.tsx

@@ -720,7 +720,10 @@ function Section({
                     >
                         {section.label}
                         {hidden && active && (
-                            <span className="w-1.5 h-1.5 rounded-full bg-slate-400" aria-hidden />
+                            <>
+                                <span className="w-1.5 h-1.5 rounded-full bg-slate-400" aria-hidden />
+                                <span className="sr-only">(contains current page)</span>
+                            </>
                         )}
                         <ChevronDownIcon
                             className={cn("w-3 h-3 transition-transform", hidden && "-rotate-90")}