Add more info

Author: pinkeshmars

docs/intro/ff-ui/resource-hierarchy.md

@@ -41,39 +41,47 @@ If you are coming from Flutter, it is beneficial for you to understand the Flutt
 A Resource Description is a brief text note that explains the purpose, usage, or key details of a particular resource. By supplying clear, concise descriptions, you create better project documentation and a smoother development experience—both for yourself and any collaborators.
 
 :::info
-Below are some reasons why resource descriptions can significantly enhance your FlutterFlow project:
-
-- **Better Search**: Descriptions are indexed in the FlutterFlow search. This helps locate pages, components, and other resources quickly, especially in large projects.
+Here are some reasons why resource descriptions can be helpful:
 - **Team Collaboration**: When multiple developers or designers work on the same project, concise descriptions help everyone understand each element’s role without guesswork.
+- **Better Search**: Descriptions are indexed in the FlutterFlow search. This helps locate pages, components, and other resources quickly, especially in large projects.
 - **Project Documentation**: Acts as built-in documentation of your app, which makes future updates easier.
 :::
 
 You can add a description for each of the following resources in FlutterFlow:
 
-- **Project**: Use the project-level description to summarize the overall goals or scope of your app. For instance, “A delivery management app for small businesses” helps keep the team aligned on the primary objective.
-- **Page**: Explains a page’s main function. Example: “Displays the user’s shopping cart and checkout options.”
-- **Component**: Clarifies the functionality or design intention of a reusable component. Example: “Reusable card component to be used as ListTile.”
-- **Action Blocks**: Provide a concise description of what the set of actions does (e.g., “Sends a notification to the user’s email address upon form submission”).
-- **Custom Functions**: Describe the logic or purpose behind the function. Example: “Calculates shipping costs based on weight and distance.”
-- **Custom Actions**: Specify the custom behavior you’ve created, such as “Opens a QR scanner and returns the scanned value.”
-- **Custom Widgets**: Explain the widget’s purpose or structure. Example: “Carousel widget for displaying multiple images with pagination.”
-- **Data Type**: Summarizes the purpose of a custom data model. Example: “Represents a user’s order including items, total cost, and status.”
-- **Parameters**: Provide context for how a parameter is used, including expected data types or value ranges. Example: “String to store the user’s phone number—must include country code.”
+- **Project**: Use the project-level description to summarize the overall goals or scope of your app. For instance, "A delivery management app for small businesses" helps keep the team aligned on the primary objective.
+- **Page**: Explains a page’s main function. Example: "Displays the user’s shopping cart and checkout options."
+- **Component**: Clarifies the functionality or design intention of a reusable component. Example: "Reusable card component to be used as ListTile."
+- **Action Blocks**: Provide a concise description of what the set of actions does (e.g., "Sends a notification to the user’s email address upon form submission").
+- **Custom Functions**: Describe the logic or purpose behind the function. Example: "Calculates shipping costs based on weight and distance."
+- **Custom Actions**: Specify the custom behavior you’ve created, such as "Opens a QR scanner and returns the scanned value."
+- **Custom Widgets**: Explain the widget’s purpose or structure. Example: "Carousel widget for displaying multiple images with pagination."
+- **Data Type**: Summarizes the purpose of a custom data model. Example: "Represents a user’s order including items, total cost, and status."
+- **Parameters**: Provide context for how a parameter is used, including expected data types or value ranges. Example: "String to store the user’s phone number—must include country code."
+- **Page/Component State Variables**: Clarify what state data is being stored and why. For instance, "Tracks the currently selected tab in this component."
+- **App State Variables**: Describe the global data shared across pages. Example: “Stores the user’s authentication token for all network requests”.
+- **Constant**: Add the intended purpose of any fixed value used throughout the app. Example: "Base API URL for all network calls".
+- **Enum**: Provide a rationale for the enumerated values. Example: "Defines possible user roles—admin, editor, viewer".
+- **Firestore Collection**: Explain what data the collection holds and how it relates to your app’s functionality. Example: "Stores all user profiles with fields for name, email, and profile photo URL".
+
+In FlutterFlow, you can read descriptions as tooltips when hovering over the green note icon.
 
 :::tip
 
 In the generated code, FlutterFlow inserts descriptions as docstring-like comments near the relevant classes, methods, or properties. For instance, a data type named `OrderInfo` with a description of “Represents a user’s order, including items, total cost, and status” will have that text added above the class declaration:
 
-```jsx
-/// Represents a user’s order, including items, total cost, and status.
-class OrderInfo {
-  /// The total price in USD for this order.
-  double totalAmount;
-  List<String> items;
-  // ...
-}
-```
+    ```jsx
+    /// Represents a user’s order, including items, total cost, and status.
+    class OrderInfo {
+    /// The total price in USD for this order.
+    double totalAmount;
+    List<String> items;
+    // ...
+    }
+    ```
 
 In a standard IDE (e.g., VS Code or Android Studio), if you place your mouse over a custom data type class name, the description set in FlutterFlow appears as a tooltip, helping you quickly grasp the purpose of a resource.
 
-![resource-description.avif](imgs/resource-description.avif)
+![resource-description.avif](imgs/resource-description.avif)
+
+:::