Content Fixes (#75)

* Fix State Management docs + links cleanup

* Refactor ui-building-blocks folder

* fix links

* collapse most sidebar sections

* keep doc home page as a single page and not a category page

* Fix paths

* Add more links to page section.

Author: PoojaB26

docs/ff-concepts/adding-customization/cloud-functions.md

@@ -48,7 +48,7 @@ Here are the step-by-step instructions to build such an example:
 ### 1. Add page state variables
 
 For this example, you'll need to set up two 
-[Page State variables](../../resources/ui-building-blocks/pages/page-lifecycle.md#creating-a-page-state):
+[Page State variables](../../resources/ui/pages/page-lifecycle.md#creating-a-page-state):
 
 1. **generatingImage (*****Type: Boolean*****)**: This is used to control the visibility of a 
 loading indicator during the logo creation process. Its value is set to *True* before initiating the API call and switched to *False* once the logo generation is complete.

docs/ff-concepts/adding-customization/custom-functions.md

@@ -71,7 +71,7 @@ You can't have imports in a custom function. To be able to add imports, consider
 <details>
 <summary>Getting error: The function 'FFAppState' isn't defined.</summary>
 
-You can't use the app state variable (i.e., FFAppState().variablename) directly in your custom 
+You can't use the app state variable (i.e., `FFAppState().variablename`) directly in your custom 
 function code. Instead, you can pass the app state variable as a parameter and then use it in your code.
 
 </details>

docs/ff-concepts/animations/page_transitions.md

@@ -27,7 +27,7 @@ Here, the transitions are recorded with the duration set to 1000ms to make the a
 
 ## Animate single navigate transition
 
-To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../resources/ui-building-blocks/pages/navigation#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field.
+To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../resources/ui/pages/navigation#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field.
 
 ![single-navigate-transition-animation.avif](animation_gifs/single-navigate-transition-animation.avif)
 

docs/ff-concepts/layout/building-layout.md

@@ -9,7 +9,7 @@ keywords: [FlutterFlow, Building Layout, Concepts]
 
 # Building Layout
 
-In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui-building-blocks/widgets/built-in-widgets/text.md), [Buttons](#), [Images](#), and [Icons](#), are visible on the screen. Others, like [Containers](#), [Rows](#), [Columns](#), and [Stacks](#), are not directly visible but help arrange and position the visible elements on the page.
+In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui/widgets/built-in-widgets/text.md), [Buttons](#), [Images](#), and [Icons](#), are visible on the screen. Others, like [Containers](#), [Rows](#), [Columns](#), and [Stacks](#), are not directly visible but help arrange and position the visible elements on the page.
 
 These widgets are categorized into four main types: [Layout Elements](#), [Base Elements](#), 
 [Page Elements](#), and [Form Elements](#). To build a page, you combine different widgets from these categories to get the desired look and feel of your app.

docs/ff-concepts/layout/responsive-widgets/conditional-builder-widget.md

@@ -8,7 +8,7 @@ keywords: [FlutterFlow, ConditionalBuilder, Concepts]
 ---
 # ConditionalBuilder
 
-The `ConditionalBuilder` widget allows you to dynamically display different widgets based on certain conditions (either [single](/advanced-functionality/conditional-logic#single-condition) or [multiple](/advanced-functionality/conditional-logic#multiple-conditions-and-or)). Using this widget, you can define different conditions, each associated with a specific widget to be displayed when that condition is true. It's like having a switch that shows different things depending on what's happening in your app.
+The `ConditionalBuilder` widget allows you to dynamically display different widgets based on certain conditions (either [single](../../../resources/control-flow/functions/conditional-logic.md#single-condition) or [multiple](../../../resources/control-flow/functions/conditional-logic.md#multiple-conditions-andor)). Using this widget, you can define different conditions, each associated with a specific widget to be displayed when that condition is true. It's like having a switch that shows different things depending on what's happening in your app.
 
 For example, displaying different charts based on user roles. For team members, an individual progress chart can be shown. Team leads can view the overall progress of the entire team, while project managers can see over project progress chart. Just like the below:
 
@@ -20,11 +20,11 @@ To add the `ConditionalBuilder` widget to your app:
 
 1. Add the **ConditionalBuilder** widget (from the **Base Elements**) to where you want to display dynamic widgets.
 
-2. Move to the **Properties Panel** **>** **Conditional Builder Properties,** andUnder the **First Condition**, provide the **IF** [condition](/advanced-functionality/conditional-logic) by clicking on **UNSET**.
+2. Move to the **Properties Panel** **>** **Conditional Builder Properties,** andUnder the **First Condition**, provide the **IF** [condition](../../../resources/control-flow/functions/conditional-logic.md) by clicking on **UNSET**.
 3. Now, besides the **THEN**, click **Empty**. This will automatically select the **IF** widget in the widget tree. Inside that, add a widget that you want to display if this condition is true.
 4. To add one more condition-based widget, click on the "+" button, add a condition for the **ELSE IF** section, and add a widget inside the **Else If** widget in the widget tree.
 5. If none of the conditions are satisfied, add a default widget to display inside the **Else** widget.
-6. Use the **Show In UI Builder** option to see that particular widget in the [canvas area](/getting-started/ui-builder/canvas-area). You can see only one widget at a time.
+6. Use the **Show In UI Builder** option to see that particular widget in the [canvas area](../../../intro/ff-ui/canvas.md). You can see only one widget at a time.
 
 <div class="video-container"><iframe src="https://www.loom.
 com/embed/fe8edb48bdf744abab13f3ba7f925c5c?sid=85533669-195d-4f5e-aeae-029ceee40cb5" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>

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

@@ -110,7 +110,7 @@ To set the page URL:
 #### 3. Sharing deep link
 
 You can share the deep link of the current page by adding
-the [share action](/actions/actions/share/share).
+the [share action](share-action.md).
 
 To share the deep link of the current page:
 
@@ -320,7 +320,7 @@ To set the page URL:
 
 You can share the dynamic link of the current page by adding the [**Generate Current Page Link
 **](generate-current-page-link.md)
-action and then sharing it using the [**Share Action**](/actions/actions/share/share).
+action and then sharing it using the [**Share Action**](share-action.md).
 
 To share the dynamic link of the page:
 

docs/ff-concepts/state-management/generated-code.md

@@ -24,13 +24,13 @@ Additionally, they provide space for action blocks, which are a set of actions t
 
 ## Page State
 
-Variables used exclusively within a page—such as a text field validator or the value of a checkbox—are stored in the Model of each page. These variables can be accessed by other component children on the same page. For instance, on a page with a form, tapping a button in one component may need to access the value of a text field in a different component.
+[Variables](../../resources/ui/pages/page-lifecycle.md) used exclusively within a page — such as a text field validator or the value of a checkbox — are stored in the `Model` of each page. These variables can be accessed by other component children on the same page. For instance, on a page with a form, tapping a button in one component may need to access the value of a text field in a different component.
 
-Variables within a page are tracked through StatefulWidgets and are encapsulated into that page’s Model.
+Variables within a page are tracked through `StatefulWidget` and are encapsulated into that page’s Model.
 
 ## Component State
 
-Similar to page state, component variables are accessible within the component where they are defined. Each component has a corresponding Model and Widget class. Variables may be passed in from their parent as parameters. Additionally, you can access component state values from its parent Page widget.
+Similar to page state, [**Component State variables**](../../resources/ui/components/custom-components/component-lifecycle.md) are accessible within the component where they are defined. Each component has a corresponding `Model` and `Widget` class. Variables may be passed in from their parent as parameters. Additionally, you can access component state values from its parent Page widget.
 
 This accessibility is possible because the Model of a component is instantiated within the parent Page model. It utilizes the Provider method `context.read()`, which returns any existing model in the tree before instantiating a new one. Thus, any updates to the state in the component model will reflect in the parent’s instance of that component model.
 

docs/ff-concepts/state-management/state-management.md

@@ -2,10 +2,12 @@
 title: State Management
 description: An overview of state management in FlutterFlow
 ---
-
+# State Management 
 State management is a crucial concept focused on maintaining and controlling the **state** of an application. Simply put, it involves monitoring the changes within your app and updating the user interface to reflect these changes. 
 
-You can think of the UI as a function of your state variables, where changes in these variables directly influence what the UI displays.
+The UI (user interface) displays information based on state variables. When these state variables change, the UI updates to reflect the changes.
+
+## State Variables
 
 In FlutterFlow, there are a few types of state variables that you can create:
 
@@ -15,27 +17,35 @@ In FlutterFlow, there are a few types of state variables that you can create:
 </figure>
 
 
-- State variables are themselves **variables** - meaning they have a *name* and a *data type*. 
+- State variables are themselves [**variables**](../../resources/data-representation/overview.md#variable) - meaning they have a *name* and a *data type*. 
 - They also have an initial value that is set when you create the variable. 
 - Once you create a state variable, it's value can be used to change the configuration of widget properties - like any other variable. 
-- You can update the value of state variables using the *Update State Variable* action.
+- You can update the value of state variables using the **[Update State Variable](#updating-state-variables)** action.
+
+### Creating State Variables
+- To create an **App State variable**, refer to this **[guide](../../resources/data-representation/app-state.md#create-app-state-variable)**.
+- To create a **Page State variable**, refer to this [**guide**](../../resources/ui/pages/page-lifecycle.md#creating-a-page-state).
+- To create a **Component State variable**, refer to this [**guide**](../../resources/ui/components/custom-components/component-lifecycle.md#creating-a-component-state).
+
+Note: Users cannot create **widget state variables**. These are automatically exposed by FlutterFlow when a Form widget is used.
+
+
+
+### Updating State Variables
+- To update an **App State variable**, refer to this **[guide](../../resources/data-representation/app-state.md#update-app-state-action)**.
+- Refer to the [**Page Lifecycle**](../../resources/ui/pages/page-lifecycle.md) guide to learn about updating **[Page State variables](../../resources/ui/pages/page-lifecycle.md#update-page-state-action)**.
+- Refer to the [**Component Lifecycle**](../../resources/ui/components/custom-components/component-lifecycle.md) guide to learn about updating **[Component State variables](../../resources/ui/components/custom-components/component-lifecycle.md#update-component-state-action)**.
 
+<p></p>
+
+
+:::tip[Learn from video]
 You can learn more about state management from this video:
 <div class="video-container">
 <iframe src="https://www.youtube.com/embed/jD6L4xjYjJA?si=-RjniUB-K0ZsMoB1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
-
-<p></p>
-
-:::tip
-To learn more about state management in FlutterFlow, read up on 
-[**Variables**](../../resources/data-representation/overview.md#variable) and how 
-[**Page 
-State**](../../resources/ui-building-blocks/pages/page-lifecycle.md#page-state), or 
-[**Component State**](#) or [**App State variables**](#) are modified in FlutterFlow. 
 :::
 
 
 
 
-

docs/ff-integrations/authentication/_category_.json

@@ -1,4 +1,3 @@
 {
-    "label": "Authentication",
-    "position": 1
+    "label": "Authentication"
 }

docs/ff-integrations/database/cloud-firestore/firestore-actions.md

@@ -274,7 +274,7 @@ To do so:
 :::
 
 Here is an example showing the 
-[**Snackbar**](../../../resources/ui-building-blocks/pages/page-elements.md#show-snackbar-action)
+[**Snackbar**](../../../resources/ui/pages/page-elements.md#show-snackbar-action)
 message when the data 
 changes in a collection.