home.tsx
- Re-import LogOut from lucide-react.
- Append a single-tap Logout icon button after <SettingsPanel /> in
the right-side cluster, wired to the existing handleLogout flow.
- Drop the onLogout prop from <SettingsPanel />; update the topbar
comment block to describe the Bell -> Inbox -> Settings -> Logout
cluster.
settings-panel.tsx
- Drop the LogOut import, the onLogout prop on SettingsPanel and
SettingsPanelBody, the local handleLogout wrapper, and the inline
logout button (data-testid="settings-logout").
- Wrap the four groups (language, notifications, sound, clock) in
the existing shadcn Accordion (type="multiple") so each toggles
independently. Default = all collapsed; open state is lifted to
SettingsPanel via useState<GroupId[]> so toggles persist while the
panel is closed and re-opened in the same session.
- New GroupItem helper styles each AccordionItem like the prior
GroupCard so the panel keeps its rounded-card visual rhythm. The
trigger uses text-start so headers align correctly in RTL.
- Existing form bodies (LanguageBody, NotificationSettingsContent,
SoundBody, ClockStyleContent) are reused unchanged, preserving all
DB + localStorage persistence.
Notes
- Logout placement and removal from the panel were both explicit user
requests (clarified in plan #529 after #527 unified the topbar).
- No new i18n keys; existing settingsPanel.section.* labels reused
as accordion triggers.
- typecheck clean (pre-existing TS6305/TS7006 noise unrelated).
riyadhafraa
60fbd3dd84