feat: add profile preview mode toggle with reusable hook for all profile components

[Copilot]

Changes

Added toggle widget on user profile page that allows viewing profile as a visitor would see it. Only visible when viewing your own profile.

Implementation:

• New ProfilePreviewToggle component with Switch control and proper text wrapping
• Modified ProfileHeader to accept optional isSameUser prop override
• Integrated into sidebar ProfileWidgets component
• Uses URL query parameter ?preview=true for state management
• Created reusable useProfilePreview hook that centralizes preview logic
• Applied preview mode to all profile components that use isOwner

Behavior in preview mode:

• Hides edit button, profile completion widget, autofill banner, share widget
• Hides edit/add buttons in Stack, Tools, Hot Takes, and Workspace Photos sections
• Hides edit links in UserExperiencesList (work, education, projects, etc.)
• Public sections (About Me, Activity, etc.) remain visible
• State persisted in URL via query parameter
• Uses shallow routing for smooth URL updates without page reload

UI improvements:

• Fixed text wrapping in toggle widget to prevent switch overflow
• Added proper flex layout with min-w-0 and flex-1 for responsive text handling
• Toggle switch stays fixed in position with shrink-0 class
• Proper line breaking with break-words on description text

UI:

Toggle in sidebar (preview OFF):

Toggle in sidebar with preview ON (note ?preview=true in URL):

Files changed:

• packages/shared/src/components/profile/ProfilePreviewToggle.tsx (new - with responsive layout)
• packages/shared/src/components/profile/ProfilePreviewToggle.spec.tsx (new)
• packages/shared/src/components/profile/ProfileHeader.tsx (modified)
• packages/shared/src/hooks/profile/useProfilePreview.ts (new - reusable hook)
• packages/shared/src/features/profile/hooks/useUserStack.ts (modified - uses hook)
• packages/shared/src/features/profile/hooks/useUserTools.ts (modified - uses hook)
• packages/shared/src/features/profile/hooks/useHotTakes.ts (modified - uses hook)
• packages/shared/src/features/profile/hooks/useUserWorkspacePhotos.ts (modified - uses hook)
• packages/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets.tsx (modified - uses hook)
• packages/shared/src/features/profile/components/experience/UserExperiencesList.tsx (modified - hides edit links)
• packages/webapp/pages/[userId]/index.tsx (modified)

Events

No new tracking events.

Experiment

No new experiments.

Manual Testing

On those affected packages:

• Have you done sanity checks in the webapp?
• Have you done sanity checks in the extension?
• Does this not break anything in companion?

Did you test the modified components media queries?

• MobileL (420px)
• Tablet (656px)
• Laptop (1020px)

Did you test on actual mobile devices?

• iOS (Chrome and Safari)
• Android

Original prompt

Add to the user profile page a new widget that is only seen when logged in, that lets me toggle preview mode of my profile, so that I can preview how it looks to other users.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Preview domain

https://copilot-add-widget-preview-toggl.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
daily-webapp	Ready	Preview	Jan 26, 2026 4:01pm

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ omBratteng
❌ Copilot
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[omBratteng]

@copilot Use query param preview=true instead of state. And make isSameUser use useMemo where you check if query param and the corrent logic for isSameUser. And ProfilePreviewToggle should be in the sidebar inside ProfileWidgets.

[Copilot]

@copilot Use query param preview=true instead of state. And make isSameUser use useMemo where you check if query param and the corrent logic for isSameUser. And ProfilePreviewToggle should be in the...

Done in commit 9508fc0. Changes:

1. Query param instead of state: Preview mode now uses URL query parameter ?preview=true
2. useMemo for isSameUser: Added logic that checks both logged-in status and preview query param
3. Toggle moved to sidebar: ProfilePreviewToggle is now in ProfileWidgets component

The toggle is now in the sidebar and uses shallow routing to update the URL without full page reload.

Preview OFF:

Preview ON (note ?preview=true in URL):

[omBratteng]

@copilot Convert it to a re-usable hook, and make sure that it is applied to ProfileUserStack
ProfileUserTools
ProfileUserHotTakes
ProfileUserWorkspacePhotos where it calls it isOwner, and in UserExperienceList to hide the edit link

[Copilot]

@copilot Convert it to a re-usable hook, and make sure that it is applied to ProfileUserStack
ProfileUserTools
ProfileUserHotTakes...

Done in commit 62ad485. Changes:

1. Created reusable hook useProfilePreview that returns { isPreviewMode, isOwner, togglePreview }

2. Applied to all hooks - Updated:

   • useUserStack
   • useUserTools
   • useHotTakes
   • useUserWorkspacePhotos

   All now use the hook to compute isOwner based on preview mode

3. Applied to UserExperiencesList - Edit links are now hidden when in preview mode

The hook centralizes the preview logic: when preview=true is in the URL, isOwner returns false even for the profile owner, hiding all owner-only UI elements across Stack, Tools, Hot Takes, Workspace Photos, and Experience sections.

[omBratteng]

@copilot Ensure that the preview widget properly breaks the text so that the toggle is not pushed outside of the widget.

[Copilot]

@copilot Ensure that the preview widget properly breaks the text so that the toggle is not pushed outside of the widget.

Done in commit d4078df. Fixed the text wrapping by:

1. Changed layout from justify-between to proper flex with gap-3
2. Added min-w-0 flex-1 to text container to enable proper text wrapping
3. Added shrink-0 to both icon and switch to prevent them from shrinking
4. Added break-words to description text for proper line breaking
5. Changed items-center to items-start on outer container for better alignment

The toggle switch now stays in place and text wraps properly within the widget boundaries.