[Page layouts] Sync tabs with URL hash

[Devessier]

There are three identified scenarios.

First scenario

The user uses a desktop. They click on a company, which is opened in the side panel. They click on a tab, like "Tasks". The user chooses to open the record in fullscreen. The "Tasks" tab is opened by default in the fullscreen record page.

If the user refreshes the page, the default tab is shown: "Timeline". This was the behavior on the show pages, and I kept it. If we wanted to show the "Tasks" tab here, we would have to put the id of the "Tasks" tab in the URL hash when we open the record in fullscreen and an active tab id is already set.

CleanShot.2025-12-05.at.17.25.17.mp4

Second scenario

The user uses a desktop or a mobile device and interacts with a company record. They click on a tab. If they refresh, the selected tab will be displayed by default.

Desktop

CleanShot.2025-12-05.at.17.27.56.mp4

Mobile

CleanShot.2025-12-05.at.17.28.52.mp4

Third scenario

The user uses a desktop. They click on a dashboard, which is opened in fullscreen mode by default. They select tabs. If they refresh, the last selected tab is opened by default.

When the user turns edit mode on, the url hash is removed. The last selected tab remains selected. If the user selects another tab, the url hash isn't set, but the newly selected tab is displayed correctly. If the user saves their changes, the selected tab remains selected. However, if they refresh the page, the default tab replaces the previously selected tab.

Not setting the url hash when editing a page layout simplifies the code. I'm okay with this tradeoff as the feature is primarily meant to let users share specific tabs of their records.

This behavior will also be used for record page layout once edit mode is supported.

CleanShot.2025-12-05.at.17.32.50.mp4

Closes twentyhq/core-team-issues#1784

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:61227

This environment will automatically shut down when the PR is closed or after 5 hours.

[greptile-apps]

Greptile Overview

Greptile Summary

Implemented URL hash synchronization for page layout tabs, allowing users to share links to specific tabs and maintain tab selection across page refreshes.

Key changes:

• Created useResetLocationHash hook to clear URL hash when entering edit mode
• Tabs now behave as links with hash-based navigation (except in right drawer and edit mode)
• TabListFromUrlOptionalEffect reads hash on mount and updates to reflect URL changes
• Hash is cleared when entering edit mode to simplify the implementation
• Moved useIsMobile import from local path to twenty-ui/utilities for consistency

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation is clean and straightforward, correctly integrating URL hash synchronization with existing tab management. The changes are well-scoped, follow established patterns in the codebase, and the developer has clearly documented the intended behavior in the PR description
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-ui/src/utilities/navigation/hooks/useResetLocationHash.ts	5/5	Added new hook to clear URL hash when entering edit mode
packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx	5/5	Configured tabs to behave as links (with URL hash) except in right drawer and edit mode, moved useIsMobile import to twenty-ui
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx	5/5	Made behaveAsLinks required prop, implemented hash-based navigation for tabs when enabled

Sequence Diagram

sequenceDiagram
    participant User
    participant TabButton
    participant URL
    participant TabListFromUrlOptionalEffect
    participant ActiveTabState
    participant PageLayoutRenderer

    Note over User,PageLayoutRenderer: Scenario 1: User clicks tab (not in edit mode)
    User->>TabButton: Clicks tab
    TabButton->>URL: Navigate to #tabId
    URL->>TabListFromUrlOptionalEffect: Hash changes
    TabListFromUrlOptionalEffect->>ActiveTabState: setActiveTabId(tabId)
    ActiveTabState->>PageLayoutRenderer: Renders selected tab

    Note over User,PageLayoutRenderer: Scenario 2: User enters edit mode
    User->>EditDashboardSingleRecordAction: Clicks edit button
    EditDashboardSingleRecordAction->>URL: resetLocationHash() - clears hash
    EditDashboardSingleRecordAction->>PageLayoutRenderer: Sets edit mode to true
    PageLayoutRenderer->>TabButton: behaveAsLinks = false
    Note over TabButton: Tabs no longer sync with URL

    Note over User,PageLayoutRenderer: Scenario 3: User refreshes page with hash
    User->>URL: Refreshes page with #tabId
    URL->>TabListFromUrlOptionalEffect: Reads hash on mount
    TabListFromUrlOptionalEffect->>ActiveTabState: setActiveTabId(tabId)
    ActiveTabState->>PageLayoutRenderer: Renders tab from hash

Loading

[greptile-apps]

_{5 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[Copilot]

Pull request overview

This PR implements URL hash synchronization for page layout tabs, enabling users to share specific tabs via URL and maintaining tab selection across page refreshes. The implementation carefully handles three distinct scenarios: side panel navigation, direct page interaction, and dashboard edit mode.

Key Changes:

• Added useResetLocationHash hook to clear URL hash when entering edit mode
• Modified PageLayoutTabList to conditionally sync tabs with URL hash based on context
• Integrated hash clearing into dashboard edit workflow to maintain clean state during editing

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/twenty-ui/src/utilities/navigation/hooks/useResetLocationHash.ts	New hook that removes URL hash by navigating to current pathname without hash
packages/twenty-ui/src/utilities/index.ts	Exports the new useResetLocationHash hook
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx	Reorganized imports and changed behaveAsLinks prop from optional to required
packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx	Implements conditional hash behavior: enabled in fullscreen view mode, disabled in edit mode and right drawer
packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/EditDashboardSingleRecordAction.tsx	Clears URL hash when entering edit mode to prevent tab-URL inconsistency

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.