Update custom code file to match new layout

docs/ff-concepts/adding-customization/configuration-files.md

@@ -56,7 +56,7 @@ To add a snippet to your `AndroidManifest.xml`, navigate to **Custom Code** from
     height: 0,
     width: '100%'}}>
     <iframe 
-        src="https://demo.arcade.software/rM4e11x5yCTZMdAE8tqE?embed&show_copy_link=true"
+        src="https://demo.arcade.software/8moo0Vp14Ax8k0udjkh0?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -88,7 +88,7 @@ To add a snippet to native iOS files, navigate to **Custom Code** (from the left
     height: 0,
     width: '100%'}}>
     <iframe 
-        src="https://demo.arcade.software/pqR3C1oSlZiPQhpeA19C?embed&show_copy_link=true"
+        src="https://demo.arcade.software/ty5w49xRqiqDjFA3GffY?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -129,7 +129,7 @@ Once unlocked, the file stays in manual editing mode until you lock it again. Re
     height: 0,
     width: '100%'}}>
     <iframe 
-        src="https://demo.arcade.software/gbjFJzct9J5Jh4lxOniX?embed&show_copy_link=true"
+        src="https://demo.arcade.software/iWDmQGzmkEX9Gu9GpxlY?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -170,37 +170,7 @@ Here’s exactly how you do it:
     height: 0,
     width: '100%'}}>
     <iframe 
-        src="https://demo.arcade.software/wHFUlfRHxQlbzmjR0Bfs?embed&show_copy_link=true"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
-
-
-You can also directly insert a variable placeholder (e.g., `{{variableName}}`) into the code using a snippet or manual edit mode and FlutterFlow automatically creates the corresponding file-level variable.
-
-
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/szmDUd7g9ZqX9OoNJVws?embed&show_copy_link=true"
+        src="https://demo.arcade.software/aKLSHioNBUzAGk7L2FiX?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -222,9 +192,11 @@ You can also directly insert a variable placeholder (e.g., `{{variableName}}`) i
 
 
 :::tip
-You can use the file level variable across different snippets within the same file.
+- You can also directly insert a variable placeholder (e.g., `{{variableName}}`) into the code using a snippet or manual edit mode and FlutterFlow automatically creates the corresponding file-level variable.
+- You can use the file level variable across different snippets within the same file.
 :::
 
+
 Here are some examples that utilize variables in native code:
 
 **Example 1: Using API Keys in `AndroidManifest.xml`**

docs/ff-concepts/adding-customization/vscode-extension.md

@@ -153,10 +153,10 @@ It’s recommended that you install the [**Flutter & Dart Extensions**](https://
 After successfully [installing](#installation) the Visual Studio Code extension and [downloading the code](#downloading-code), you can [initialize your session](#initializing-a-code-editing-session) to start adding or editing custom code.
 
 Currently, the following resources are available for customization:
-- **Custom Actions**: in the `lib/custom_code/actions` directory 
-- **Custom Widgets**: in the `lib/custom_code/widgets` directory
-- **Custom Functions**: in `lib/flutter_flow/custom_functions.dart`
-- **Package Dependencies**: in `pubspec.yaml`
+- **Custom Actions**
+- **Custom Widgets**
+- **Custom Functions**
+- **Package Dependencies** in `pubspec.yaml`
 
 ### Testing Changes Locally
 When working with custom code, it's important to test your implementations. We recommend integrating your Custom Function, Action, or Widget directly within your FlutterFlow project—for example, by adding the Custom Widget to a FlutterFlow Page.

docs/ff-concepts/navigation-routing/deep-dynamic-linking.md

@@ -524,7 +524,7 @@ To make **Branch Smart Links** work in your FlutterFlow app, you’ll need to up
    - `branchHostUrl` (e.g., `brnch4.app.link`)
    - `branchKey` (your Branch key, use it for production and optionally `branchKeyTest` for dev environments. You can toggle modes through Branch dashboard and also through FlutterFlow environment toggling).
 
-2. Then navigate to, FlutterFlow > Custom Code > Configuration Files.
+2. Then navigate to, FlutterFlow > Custom Code
 
 
 **🔧 Android Setup**

docs/intro/ff-ui/builder.md

@@ -23,7 +23,7 @@ Here is a list of all the features accessible from the navigation menu:
 
 1. **Dashboard**: Manage projects, access account info, and FlutterFlow resources.
 2. **Widget Palette**: Access all widgets for your app.
-3. **Page Selector**: Manage pages and components, create folders as needed.
+3. **Page Selector**: Manage pages, components, and custom code files, and organize them using folders.
 4. **Widget Tree**: Get an overview of all widgets on a selected page.
 5. **Storyboard**: Visualize app's design and navigation.
 6. **Test Mode**: [Test your app](../../testing-deployment-publishing/running-your-app/run-your-app.md#test-mode) in a live debugging environment.
@@ -32,13 +32,12 @@ Here is a list of all the features accessible from the navigation menu:
 9. **App Values**: Manage [App State variables](../../resources/data-representation/app-state.md) and Constants.
 10. **API Calls**: Define API calls.
 12. **Media Assets**: Upload assets for your app and team.
-13. **Custom Functions**: Add custom functionalities, widgets, and actions.
-14. **Cloud Functions**: Write and deploy cloud functions for Firebase.
-15. **Tests**: Add automated tests.
-16. **Agents**: Create, configure, and manage [AI Agents](../../ff-integrations/ai/ai-agents.md) to integrate conversational AI interactions into your app.
-17. **App Events**: Define and manage [App Events](../../ff-concepts/app-events/app-events.md) that allow different parts of your app to communicate without being directly connected.
-18. **Theme settings**: Customize visual appearance.
-19. **Settings and Integrations**: Access app-related settings and integrations.
+13. **Cloud Functions**: Write and deploy cloud functions for Firebase.
+14. **Tests**: Add automated tests.
+15. **Agents**: Create, configure, and manage [AI Agents](../../ff-integrations/ai/ai-agents.md) to integrate conversational AI interactions into your app.
+16. **App Events**: Define and manage [App Events](../../ff-concepts/app-events/app-events.md) that allow different parts of your app to communicate without being directly connected.
+17. **Theme settings**: Customize visual appearance.
+18. **Settings and Integrations**: Access app-related settings and integrations.
 
 ## ToolBar