Update file structures to use Files component with highlights and comments

[devin-ai-integration]

Update file structures to use Files component with highlights and comments

Summary

Replaced all code block file structure displays (using bash syntax with tree characters) with the new <Files> component throughout the documentation. This affects 9 files across project structure pages, quickstart guides, and API reference documentation.

Key changes:

• Converted bash code blocks with tree syntax (├─, └─, │) to interactive <Files> components
• Added highlighted prop to important files (generators.yml, config files, .fernignore)
• Added comment prop to provide contextual information inline
• Used defaultOpen prop on key folders to show important structure by default

Review & Testing Checklist for Human

• Visual verification: Check that all Files components render correctly on the preview deployment. Pay special attention to nested folder structures and ensure they display properly.
• Highlights are appropriate: Verify that the highlighted files (generators.yml, .fernignore, key config files) make sense and draw attention to the right things. Remove or adjust highlights if they're not helpful.
• Comments add value: Review the inline comments to ensure they're clear, concise, and actually helpful. Some examples: "Source repository", "Required for OpenAPI", "Files Fern shouldn't modify".
• Interactive functionality: Test that folders can be expanded/collapsed and that the defaultOpen behavior works as expected.
• No missed instances: Spot check other documentation pages to ensure no file structure displays were missed (though I searched comprehensively).

Notes

• Requested by Devin Logan (@devalog) via Slack: https://buildwithfern.slack.com/archives/C09RZ3ZA04A/p1763148605657349
• Session URL: https://app.devin.ai/sessions/c4cd5c8b4688464d93cc1e0bcb3ac4d8
• I made judgment calls on which files/folders to highlight and what comments to add based on what seemed most important for users to notice. These choices are subjective and should be reviewed.
• The Files component documentation shows that highlighted adds an accent background color and comment adds explanatory text - both should help users understand the structure better.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[github-actions]

🌿 Preview your docs: https://fern-preview-c5dbccff-4f41-45d1-8777-8518a488ebf3.docs.buildwithfern.com/learn

[github-actions]

🌿 Preview your docs: https://fern-preview-957d7a9e-bd22-40ae-bebb-0f31a341cb04.docs.buildwithfern.com/learn

[github-actions]

🌿 Preview your docs: https://fern-preview-41a0f8fd-6628-4f21-977f-09da87a58ca0.docs.buildwithfern.com/learn

[github-actions]

🌿 Preview your docs: https://fern-preview-0efcac49-8621-4f55-833d-a7cfd0fbc18e.docs.buildwithfern.com/learn