Editor sanding #2996

drfarrell · 2025-10-13T06:00:45Z

Description

– Improve loading states between projects that are created from the editor
– Improve UI of the scroll down arrow in the AI chat
– Improve styling of AI context (Still in progress)
– Added loading messages for the webframe to entertain the user
– Loading animation for creating from the project page to tell the user something is happenign.

Type of Change

Important

Improves UI/UX in the editor with enhanced loading states, dropdown interactions, and introduces a new loading management system for project actions.

UI/UX Improvements:
- Enhanced loading states for project creation in new-project-menu.tsx and project-breadcrumb.tsx.
- Improved UI for scroll down arrow in AI chat in chat-context.tsx.
- Added loading messages and animations in new-project-menu.tsx and project-breadcrumb.tsx.
Dropdown Enhancements:
- Added user interaction tracking and "Mixed" state display in border.tsx, margin.tsx, padding.tsx, and radius.tsx.
- Updated use-input-control.ts to handle negative values, min/max bounds, and step sizes.
Loading Management:
- Introduced use-project-loading.tsx to manage loading states for project actions.
- Integrated loading management in new-project-menu.tsx, project-breadcrumb.tsx, and recent-projects.tsx.
Miscellaneous:
- Removed mobile frame creation in fork.ts and project.ts.
- Adjusted default desktop frame position in frame.ts.

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

vercel · 2025-10-13T06:00:52Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
web	Error			Oct 13, 2025 8:23am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Oct 13, 2025 8:23am

supabase · 2025-10-13T06:00:52Z

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 ↗︎.

coderabbitai · 2025-10-13T06:01:08Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch editor-sanding

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

drfarrell · 2025-10-13T07:23:45Z

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx

This is the start of the multi-side / all side dropdown adjustment

ellipsis-dev · 2025-10-13T07:24:05Z

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/margin.tsx


    const [activeTab, setActiveTab] = useState<MarginTab>(areAllMarginsEqual ? MarginTab.ALL : MarginTab.INDIVIDUAL);

+    // Track if user is actively interacting with the input


Similar to the border component, the margin component duplicates isUserInteracting logic. Consider refactoring this into a shared hook.

drfarrell · 2025-10-13T07:24:29Z

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/radius.tsx

Multi-side / all side dropdown adjustment

drfarrell · 2025-10-13T07:24:53Z

apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-text-control.ts

Attempt to fix the letter spacing / lineheight breaking bug

drfarrell

Added additional context

drfarrell · 2025-10-13T07:25:18Z

apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-icon.tsx

Add-on to fix the letter spacing / lineheight breaking bug

drfarrell · 2025-10-13T07:26:38Z

...web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-input/chat-context.tsx

Beggining to adjust the context pop-up. Ok to not include this

drfarrell · 2025-10-13T07:27:08Z

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/controls.tsx

This helps the user understand why they can't start a new chat while the AI is running. Preference is to keep this if we can.

drfarrell · 2025-10-13T07:27:49Z

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

Telling the user that something is happening when they are creating a new project with a "loading" state in the project breadcrumb in the upper left corner

drfarrell · 2025-10-13T07:27:55Z

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

Telling the user that something is happening when they are creating a new project with a "loading" state in the project breadcrumb in the upper left corner

drfarrell · 2025-10-13T07:28:21Z

apps/web/client/src/app/project/[id]/_hooks/use-project-loading.tsx

Component for setting up Telling the user that something is happening when they are creating a new project with a "loading" state in the project breadcrumb in the upper left corner

drfarrell · 2025-10-13T07:28:44Z

apps/web/client/src/app/projects/_components/top-bar.tsx

Loading state in the upper-right corner for the white "create" button in the projects page to tell the user the project is being created

drfarrell · 2025-10-13T07:29:16Z

apps/web/client/src/server/api/routers/project/fork.ts

Remove the mobile window from initial project load. Got feedback that it was confusing to people on startup.

drfarrell · 2025-10-13T07:29:32Z

packages/db/src/defaults/frame.ts

Adjust the placement of the desktop frame now that the mobile view isn't there.

drfarrell · 2025-10-13T07:29:50Z

packages/ui/src/components/ai-elements/conversation.tsx

Improve styling of the scroll-down arrow that appears in the conversation chat so users can see it.

drfarrell added 2 commits October 13, 2025 16:05

Project breadcrumb + loading text

34e835b

Improve AI scroll arrow styling + Loading messages

e7398d5

vercel bot had a problem deploying to Preview – web October 13, 2025 06:02 Failure

Kitenite self-requested a review October 13, 2025 06:40

Styling, remove mobile frame + select branch on start

e42007d

vercel bot deployed to Preview – docs October 13, 2025 06:53 View deployment

vercel bot had a problem deploying to Preview – web October 13, 2025 06:55 Failure

Padding / margin / border multi-side

de61fa7

vercel bot temporarily deployed to Preview – docs October 13, 2025 07:22 Inactive

drfarrell commented Oct 13, 2025

View reviewed changes

ellipsis-dev bot reviewed Oct 13, 2025

View reviewed changes

drfarrell commented Oct 13, 2025

View reviewed changes

vercel bot had a problem deploying to Preview – web October 13, 2025 07:24 Failure

drfarrell commented Oct 13, 2025

View reviewed changes

merge main

fd7c1b2

vercel bot temporarily deployed to Preview – docs October 13, 2025 07:41 Inactive

vercel bot had a problem deploying to Preview – web October 13, 2025 07:45 Failure

merge main

d40eece

vercel bot temporarily deployed to Preview – docs October 13, 2025 08:00 Inactive

vercel bot had a problem deploying to Preview – web October 13, 2025 08:07 Failure

merge main

6ef4dd0

vercel bot temporarily deployed to Preview – docs October 13, 2025 08:12 Inactive

vercel bot had a problem deploying to Preview – web October 13, 2025 08:23 Failure


		const [activeTab, setActiveTab] = useState<MarginTab>(areAllMarginsEqual ? MarginTab.ALL : MarginTab.INDIVIDUAL);

		// Track if user is actively interacting with the input

Editor sanding #2996

Are you sure you want to change the base?

Editor sanding #2996

Uh oh!

Conversation

drfarrell commented Oct 13, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Uh oh!

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

Uh oh!

Uh oh!

supabase bot commented Oct 13, 2025

Uh oh!

coderabbitai bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Other AI code review bot(s) detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

drfarrell left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

drfarrell commented Oct 13, 2025 •

edited by ellipsis-dev bot

Loading

vercel bot commented Oct 13, 2025 •

edited

Loading

coderabbitai bot commented Oct 13, 2025 •

edited

Loading