2: Polish remote experience

[six7]

Why does this PR exist?

Adjusts styling on the 2.0 branch for the remote experience.

What does this pull request do?

Introduce shared ui components, refactor the branch selector, push dialog experience, the various forms for sync providers to all use shared components.

Part of a larger effort to refactor the Settings page.

Testing this change

Just check it out locally, try adding a few providers, pushing changes, changing branches.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1a426a2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

PR Analysis

• 🎯 Main theme: Refactoring UI components and improving the user experience for remote operations
• 📝 PR summary: This PR introduces shared UI components and refactors the branch selector, push dialog experience, and various forms for sync providers to use these shared components. This is part of a larger effort to refactor the Settings page.
• 📌 Type of PR: Enhancement
• 🧪 Relevant tests added: No
• ⏱️ Estimated effort to review [1-5]: 4, because the PR involves significant refactoring of UI components and requires a thorough understanding of the existing codebase to review effectively.
• 🔒 Security concerns: No security concerns found

PR Feedback

💡 General suggestions: The PR is well-structured and the changes are clearly explained in the PR description. The refactoring of UI components into shared components is a good practice as it promotes code reusability and maintainability. However, it would be beneficial to add tests to ensure the refactored components work as expected.

🤖 Code feedback:

---

relevant file	packages/tokens-studio-for-figma/src/app/components/BranchSelector.tsx
suggestion	Consider using a more descriptive name for the onSelect function in the BranchSwitchMenuItemElement component. A more descriptive name like handleBranchSelection would make the code more readable. [medium]
relevant line	'+ const onSelect = React.useCallback(() => createNewBranchFrom(branch), [branch, createNewBranchFrom]);'

---

relevant file	packages/tokens-studio-for-figma/src/app/components/BranchSelector.tsx
suggestion	It seems like the checkForChanges function is doing more than just checking for changes. It's also creating a defaultMetadata object. Consider separating these concerns into two different functions for better readability and maintainability. [important]
relevant line	'+ const checkForChanges = React.useCallback(() => {'

---

relevant file	packages/tokens-studio-for-figma/src/app/components/PushDialog.tsx
suggestion	The handleSaveShortcut function could be simplified by removing the nested if statement. You can use the logical AND operator to combine the conditions. [medium]
relevant line	'+ const handleSaveShortcut = React.useCallback((event: KeyboardEvent) => {'

---

relevant file	packages/tokens-studio-for-figma/src/app/components/PushDialog.tsx
suggestion	The redirectHref variable is being reassigned multiple times based on different conditions. Consider using a switch statement or a mapping object to make the code cleaner and easier to read. [medium]
relevant line	'+ const redirectHref = React.useMemo(() => {'

---

✨ Usage tips:

---

To invoke the PR-Agent, add a comment using one of the following commands:

• /review: Request a review of your Pull Request.
• /describe: Update the PR title and description based on the contents of the PR.
• /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback.
• /ask <QUESTION>: Ask a question about the PR.
• /update_changelog: Update the changelog based on the PR's contents.
• /add_docs 💎: Generate docstring for new components introduced in the PR.
• /generate_labels 💎: Generate labels for the PR based on the PR's contents.
• /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component.

See the tools guide for more details.
To edit any configuration parameter from the configuration.toml, add --config_path=new_value.
For example: /review --pr_reviewer.extra_instructions="focus on the file: ..."
To list the possible configuration parameters, add a /config comment.