feat: page selector #2515

spartan-vutrannguyen · 2025-07-22T16:37:05Z

Description

Added a Pages controller to the left of the top bar — lets you go back, forward, and quickly switch between pages.

Related Issues

Type of Change

Testing

Screenshots (if applicable)

Screen.Recording.2025-08-01.at.07.30.14.mp4

Additional Notes

Important

Introduces a page selector feature with navigation history management and URL inference for enhanced page navigation.

Behavior:
- Adds PageSelector component in page-selector.tsx for navigating between pages.
- Integrates PageSelector into TopBar in top-bar.tsx.
- Updates WebFrameComponent in web-frame.tsx to support navigation.
Navigation:
- Implements FrameNavigationManager in navigation.ts for managing navigation history.
- Adds navigation methods goBack, goForward, and navigateToPath in manager.ts.
- Tests navigation functionality in navigation.test.ts.
Utilities:
- Adds inferPageFromUrl in urls.ts to infer page details from URL.
- Tests inferPageFromUrl in urls.test.ts.

^{This description was created by}^{for 90cf63e. You can customize this summary. It will automatically update as commits are pushed.}

vercel · 2025-07-22T16:37:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 2, 2025 0:03am
web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 2, 2025 0:03am

supabase · 2025-07-22T16:37:13Z

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

apps/web/client/src/components/store/editor/sandbox/index.ts

apps/web/client/src/components/store/editor/pages/index.ts

ellipsis-dev · 2025-07-25T00:05:51Z

apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar.tsx


-                editorEngine.frames.updateAndSaveToStorage(frame.id, { position: newPosition });
-            };
+        const handleMove = async (e: MouseEvent) => {


The async handler in the mousemove event (handleMove) awaits an update on every movement, which may affect UI responsiveness. Consider debouncing or throttling it.

apps/web/client/src/components/store/editor/pages/index.ts

packages/utility/src/urls.ts

Kitenite · 2025-07-25T05:43:39Z

apps/web/client/src/components/store/editor/pages/index.ts

@@ -20,6 +20,11 @@ export class PagesManager {
    private currentPath = '';
    private groupedRoutes = '';
    private _isScanning = false;
+
+    // Navigation history
+    private navigationHistory: string[] = [];


This doesn't seem to take into account multiple frames. Not sure if this is even the right place to put this functionality instead of at the frame level. Please test with multiple frames. Might be better there since each frame will handle its own history.

ellipsis-dev · 2025-07-28T02:29:33Z

apps/web/client/src/components/store/editor/frames/index.ts

@@ -198,10 +216,10 @@ export class FramesManager {
            const newFrame = { ...existingFrame.frame, ...frame };
            this._frameIdToData.set(frameId, { ...existingFrame, frame: newFrame });
        }
-        this.saveToStorage(frameId, frame);
+        await this.saveToStorage(frameId, frame);


Avoid awaiting a debounced function – the debounced call delays execution and its returned promise may not resolve as expected. Consider refactoring so that saving is handled appropriately without relying on await.

Suggested change

await this.saveToStorage(frameId, frame);

this.saveToStorage(frameId, frame);

Kitenite · 2025-07-31T01:22:19Z

apps/web/preload/script/api/navigation.ts

+
+let lastUrl = window.location.href;
+
+export function listenToNavigationChanges() {    


Overriding a window object is something we REALLY should not be doing... This can create some real issues for users project. What's the reason for the override?

Kitenite · 2025-07-31T01:25:39Z

apps/web/client/src/components/store/editor/frames/manager.ts

+    }
+
+    // Navigation history methods
+    get canGoBack(): boolean {


Wouldn't this be wrong or incomplete when there are multiple frames selected? Why even have these methods? Or show incorrect information for the wrong frames that use this?

Why not let the frame themselves call navigationmanger.canGoBack directly?

Kitenite · 2025-07-31T01:36:47Z

apps/web/preload/script/api/navigation.ts

+    };
+
+    // Listen for popstate events
+    window.addEventListener('popstate', () => {


This did not work in my testing. Can you give an example of it working? Why the setTimeout?

Kitenite · 2025-07-31T01:38:06Z

apps/web/preload/script/api/navigation.ts

+function notifyNavigationChange() {
+    if (penpalParent) {
+        try {
+            const currentUrl = window.location.href;


I would assume global state is cleared when page is changed. Can you confirm that this actually works? Why not just look in the history object instead of saving as a variable?

apps/web/client/src/app/project/[id]/_components/canvas/frame/web-frame.tsx

Kitenite

There's a regression. You can no longer go back to the home page or page that has children.

apps/web/client/src/app/project/[id]/_components/canvas/frame/page-selector.tsx

Kitenite

I fixed the regression by making it possible to click on the folder and select it at the same time. It's not perfect and I'm not a fan of how the pages tab determines active pages (way before this PR).

But works well, thanks!

spartan-vutrannguyen marked this pull request as draft July 22, 2025 16:37

vercel bot deployed to Preview – docs July 22, 2025 16:37 View deployment

vercel bot had a problem deploying to Preview – web July 22, 2025 16:39 Failure

ellipsis-dev bot reviewed Jul 22, 2025

View reviewed changes

apps/web/client/src/components/store/editor/sandbox/index.ts Outdated Show resolved Hide resolved

spartan-vutrannguyen force-pushed the fix/page-selection branch from a555538 to e90f0ff Compare July 24, 2025 14:19

vercel bot had a problem deploying to Preview – web July 24, 2025 14:21 Failure

ellipsis-dev bot reviewed Jul 24, 2025

View reviewed changes

apps/web/client/src/components/store/editor/pages/index.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview – docs July 24, 2025 14:28 View deployment

vercel bot had a problem deploying to Preview – web July 24, 2025 14:30 Failure

Kitenite marked this pull request as ready for review July 25, 2025 00:03

ellipsis-dev bot reviewed Jul 25, 2025

View reviewed changes

spartan-vutrannguyen force-pushed the fix/page-selection branch from 2c86f6f to 6352608 Compare July 25, 2025 01:21

vercel bot deployed to Preview – docs July 25, 2025 01:22 View deployment

vercel bot had a problem deploying to Preview – web July 25, 2025 01:24 Failure

vercel bot deployed to Preview – docs July 25, 2025 05:41 View deployment

Kitenite reviewed Jul 25, 2025

View reviewed changes

vercel bot had a problem deploying to Preview – web July 25, 2025 05:43 Failure

spartan-vutrannguyen added 6 commits July 28, 2025 09:21

feat: page selector

0849a05

add test

f45fada

add navigation history

8c3f1a8

clean up

a2c6916

clean up

afe0ede

update navigation history

748fe39

spartan-vutrannguyen force-pushed the fix/page-selection branch from c81a636 to 748fe39 Compare July 28, 2025 02:27

vercel bot had a problem deploying to Preview – web July 28, 2025 02:29 Failure

ellipsis-dev bot reviewed Jul 28, 2025

View reviewed changes

vercel bot deployed to Preview – docs July 28, 2025 02:29 View deployment

vercel bot deployed to Preview – docs July 28, 2025 03:53 View deployment

vercel bot deployed to Preview – web July 31, 2025 01:16 View deployment

vercel bot deployed to Preview – docs July 31, 2025 01:17 View deployment

Kitenite reviewed Jul 31, 2025

View reviewed changes

fix navigate inside frame

db3c860

vercel bot deployed to Preview – docs July 31, 2025 08:25 View deployment

vercel bot had a problem deploying to Preview – web July 31, 2025 08:27 Failure

remove listeners

9617e3a

vercel bot deployed to Preview – docs August 1, 2025 00:30 View deployment

vercel bot deployed to Preview – web August 1, 2025 00:32 View deployment

spartan-vutrannguyen requested a review from Kitenite August 1, 2025 00:33

Kitenite reviewed Aug 1, 2025

View reviewed changes

apps/web/client/src/app/project/[id]/_components/canvas/frame/web-frame.tsx Outdated Show resolved Hide resolved

Kitenite added 2 commits August 1, 2025 15:41

merge main

8061e94

clean up

83e7e48

Kitenite requested changes Aug 1, 2025

View reviewed changes

vercel bot deployed to Preview – web August 1, 2025 23:05 View deployment

graphite-app bot reviewed Aug 1, 2025

View reviewed changes

apps/web/client/src/app/project/[id]/_components/canvas/frame/page-selector.tsx Show resolved Hide resolved

vercel bot deployed to Preview – docs August 1, 2025 23:06 View deployment

Kitenite added 3 commits August 1, 2025 16:50

fix selecting folder

3e7d8e6

clean up

cce9b5b

clean up

b764d85

vercel bot deployed to Preview – docs August 1, 2025 23:55 View deployment

clean up

90cf63e

Kitenite approved these changes Aug 1, 2025

View reviewed changes

Kitenite merged commit 7577e4b into main Aug 1, 2025
3 of 5 checks passed

Kitenite deleted the fix/page-selection branch August 1, 2025 23:57

vercel bot deployed to Preview – web August 2, 2025 00:03 View deployment

vercel bot deployed to Preview – docs August 2, 2025 00:03 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: page selector #2515

feat: page selector #2515

Uh oh!

spartan-vutrannguyen commented Jul 22, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

vercel bot commented Jul 22, 2025 •

edited

Loading

Uh oh!

supabase bot commented Jul 22, 2025

Uh oh!

Uh oh!

Uh oh!

ellipsis-dev bot Jul 25, 2025

Uh oh!

Uh oh!

Uh oh!

Kitenite Jul 25, 2025 •

edited

Loading

Uh oh!

ellipsis-dev bot Jul 28, 2025

Uh oh!

Kitenite Jul 31, 2025 •

edited

Loading

Uh oh!

Kitenite Jul 31, 2025 •

edited

Loading

Uh oh!

Kitenite Jul 31, 2025

Uh oh!

Kitenite Jul 31, 2025

Uh oh!

Uh oh!

Kitenite left a comment

Uh oh!

Uh oh!

Kitenite left a comment

Uh oh!

Uh oh!

Uh oh!

	await this.saveToStorage(frameId, frame);
	this.saveToStorage(frameId, frame);


		let lastUrl = window.location.href;

		export function listenToNavigationChanges() {

feat: page selector #2515

feat: page selector #2515

Uh oh!

Conversation

spartan-vutrannguyen commented Jul 22, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issues

Type of Change

Testing

Screenshots (if applicable)

Additional Notes

Uh oh!

vercel bot commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

supabase bot commented Jul 22, 2025

Uh oh!

Uh oh!

Uh oh!

ellipsis-dev bot Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Kitenite Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

Kitenite Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kitenite Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kitenite Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

Kitenite Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Kitenite left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Kitenite left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

spartan-vutrannguyen commented Jul 22, 2025 •

edited by ellipsis-dev bot

Loading

vercel bot commented Jul 22, 2025 •

edited

Loading

Kitenite Jul 25, 2025 •

edited

Loading

Kitenite Jul 31, 2025 •

edited

Loading

Kitenite Jul 31, 2025 •

edited

Loading