Studio: Add UI for when local tree for push has errors

[katinthehatsite]

Related issues

Fixes STU-966

Proposed Changes

This PR adds a node to handle errors when there is an issue retrieving nodes from the local tree:

Testing Instructions

• Pull the changes from this branch
• Apply the following diff:

index 31db0fc9..b538c66b 100644
--- a/src/stores/sync/sync-hooks.ts
+++ b/src/stores/sync/sync-hooks.ts
@@ -83,6 +83,9 @@ export function useLocalFileTree() {
                        setIsLoading( true );
                        setError( null );
                        try {
+                               // TEMPORARY: Simulate error for testing
+                               throw new Error( 'Simulated error for testing error handling' );
+                               
                                const rawNodes = await getIpcApi().listLocalFileTree( siteId, path, 3 );
                                return convertRawToTreeNodes( rawNodes );
                        } catch ( err ) {

• Start Studio with npm start
• Ensure that you have at least one WP.com site connected to Studio
• Navigate to the Sync tab
• Click on Push
• Select Specific files and folders option
• Confirm that when you open wp-content, you see the error shown on the screenshot above

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[katinthehatsite]

I did not add an explicit retry because this seems to be rather an edge case but we can add it if we consider it necessary

[github-actions]

📊 Performance Test Results

Comparing e2f610e vs trunk

site-editor

Metric	trunk	e2f610e	Diff	Change
load	18926.00 ms	13447.00 ms	-5479.00 ms	🟢 -28.9%

site-startup

Metric	trunk	e2f610e	Diff	Change
siteCreation	28988.00 ms	27630.00 ms	-1358.00 ms	🟢 -4.7%
siteStartup	11132.00 ms	11058.00 ms	-74.00 ms	🟢 -0.7%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

[gavande1]

I have tested this and works great. LGTM 👍

[katinthehatsite]

Update: I updated the style to look like this based on the comment from Linear

[gcsecsey]

Thanks for adding the error message and for iterating on the styling @katinthehatsite!

Changes LGTM and work well:

[sejas]

Thanks for adding the error case. Great work.
I left a couple of suggestions to consider. We could refactor renderEmptyContent and the useEffect.

[sejas]

I'm not sure if this useEffect is necessary or it could be just an if when rendering the node.children.

[katinthehatsite]

Adjusted in #2352

[sejas]

I would suggest renaming renderEmptyContent to renderErrorContent. Or in case we want to keep it tied to empty children, then I think we should move the Empty logic into that function too. The condition renderEmptyContent && renderEmptyContent( node.id ) ? seems a bit tricky.

[katinthehatsite]

I made adjustments in #2352 for this