[Chat] Fix navigation stacking on messages links in split view (#10741)
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -451,6 +451,12 @@ export function Header({
|
|||||||
const {gtMobile} = useBreakpoints()
|
const {gtMobile} = useBreakpoints()
|
||||||
const requireEmailVerification = useRequireEmailVerification()
|
const requireEmailVerification = useRequireEmailVerification()
|
||||||
const leftConvos = useLeftConvos()
|
const leftConvos = useLeftConvos()
|
||||||
|
const {isWithinSplitView} = useIsWithinSplitView()
|
||||||
|
|
||||||
|
// In split view, the left column (and this header) stays mounted while the
|
||||||
|
// right column shows the selected route. Pushing would stack duplicate routes
|
||||||
|
// on repeated clicks, so navigate instead to dedupe by route + params.
|
||||||
|
const action = isWithinSplitView ? 'navigate' : 'push'
|
||||||
|
|
||||||
const {data: unreadInboxData, hasNextPage: hasMoreRequests} =
|
const {data: unreadInboxData, hasNextPage: hasMoreRequests} =
|
||||||
useListConvosQuery({
|
useListConvosQuery({
|
||||||
@@ -494,9 +500,11 @@ export function Header({
|
|||||||
count={inboxAllConvos.length}
|
count={inboxAllConvos.length}
|
||||||
more={hasMoreRequests}
|
more={hasMoreRequests}
|
||||||
variant="solid"
|
variant="solid"
|
||||||
|
action={action}
|
||||||
/>
|
/>
|
||||||
<Link
|
<Link
|
||||||
to="/messages/settings"
|
to="/messages/settings"
|
||||||
|
action={action}
|
||||||
label={l`Chat settings`}
|
label={l`Chat settings`}
|
||||||
size="small"
|
size="small"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
|
|||||||
@@ -481,6 +481,9 @@ function BaseChatItem({
|
|||||||
|
|
||||||
<Link
|
<Link
|
||||||
to={`/messages/${convo.view.id}`}
|
to={`/messages/${convo.view.id}`}
|
||||||
|
// In split view, this list stays mounted alongside the open convo,
|
||||||
|
// so push would stack duplicate routes on repeated clicks.
|
||||||
|
action={isWithinSplitView ? 'navigate' : 'push'}
|
||||||
label={title}
|
label={title}
|
||||||
accessibilityHint={accessibilityHint}
|
accessibilityHint={accessibilityHint}
|
||||||
accessibilityActions={
|
accessibilityActions={
|
||||||
|
|||||||
@@ -11,10 +11,12 @@ export function InboxRequests({
|
|||||||
count,
|
count,
|
||||||
more,
|
more,
|
||||||
variant,
|
variant,
|
||||||
|
action,
|
||||||
}: {
|
}: {
|
||||||
count: number
|
count: number
|
||||||
more: boolean
|
more: boolean
|
||||||
variant?: 'ghost' | 'solid'
|
variant?: 'ghost' | 'solid'
|
||||||
|
action?: 'push' | 'navigate'
|
||||||
}) {
|
}) {
|
||||||
const {t: l} = useLingui()
|
const {t: l} = useLingui()
|
||||||
|
|
||||||
@@ -41,6 +43,7 @@ export function InboxRequests({
|
|||||||
<Link
|
<Link
|
||||||
label={label}
|
label={label}
|
||||||
to="/messages/inbox"
|
to="/messages/inbox"
|
||||||
|
action={action}
|
||||||
size="small"
|
size="small"
|
||||||
variant={unread ? 'solid' : 'ghost'}
|
variant={unread ? 'solid' : 'ghost'}
|
||||||
color={unread ? 'primary_subtle' : 'secondary'}
|
color={unread ? 'primary_subtle' : 'secondary'}
|
||||||
@@ -66,6 +69,7 @@ export function InboxRequests({
|
|||||||
<Link
|
<Link
|
||||||
label={label}
|
label={label}
|
||||||
to="/messages/inbox"
|
to="/messages/inbox"
|
||||||
|
action={action}
|
||||||
color={unread ? 'primary_subtle' : 'secondary'}
|
color={unread ? 'primary_subtle' : 'secondary'}
|
||||||
size="small">
|
size="small">
|
||||||
<ButtonIcon icon={InboxIcon} />
|
<ButtonIcon icon={InboxIcon} />
|
||||||
|
|||||||
Reference in New Issue
Block a user