Improve cloud docs

docs/hosting/additional-concepts.md

@@ -69,35 +69,6 @@ To go back, i.e. from an app to a project or from a project to your list of proj
 All your flag values, i.e. environment variables or regions or tokens, are saved between runs. This means that if you run a command and you pass a flag value, the next time you run the same command the flag value will be the same as the last time you ran it. This means you should only set the flag values again if you want to change them.
 ```
 
-## Environment Variables
-
-
-Below is an example of how to use an environment variable file. You can pass the `--envfile` flag with the path to the env file. For example:
-
-```bash
-reflex deploy --project f88b1574-f101-####-####-5f########## --envfile .env
-```
-
-In this example the path to the file is `.env`.
-
-
-If you prefer to pass the environment variables manually below is deployment command example:
-
-```bash
-reflex deploy --project f88b1574-f101-####-####-5f########## --env OPENAI_API_KEY=sk-proj-vD4i9t6U############################
-```
-
-They are passed after the `--env` flag as key value pairs. 
-
-To pass multiple environment variables, you can repeat the `--env` tag. i.e. `reflex deploy --project f88b1574-f101-####-####-5f########## --env KEY1=VALUE1 --env KEY2=VALUE`. The `--envfile` flag will override any envs set manually.
-
-
-```md alert info
-# More information on Environment Variables
-Environment variables are encrypted and safely stored. We recommend that backend API keys or secrets are entered as `envs`. Make sure to enter the `envs` without any quotation marks. We do not show the values of them in any CLI commands, only their names (or keys).
-
-You access the values of `envs` by referencing `os.environ` with their names as keys in your app's backend. For example, if you set an env `ASYNC_DB_URL`, you are able to access it by `os.environ["ASYNC_DB_URL"]`. Some Python libraries automatically look for certain environment variables. For example, `OPENAI_API_KEY` for the `openai` python client. The `boto3` client credentials can be configured by setting `AWS_ACCESS_KEY_ID`,`AWS_SECRET_ACCESS_KEY`. This information is typically available in the documentation of the Python packages you use.
-```
 
 ## Adding Team Members
 
@@ -120,8 +91,6 @@ At this time a User must be logged in to be added to a project. In future there
 
 
 
-
-
 ## Tokens
 
 A token gives someone else all the permissions you have as a User or an Admin. They can run any Reflex Cloud command from the CLI as if they are you using the `--token` flag. A good use case would be for GitHub actions (you store this token in the secrets).

docs/hosting/app.md

@@ -0,0 +1,73 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+
+# App
+
+In Reflex Cloud an "app" (or "application" or "website") refers to a web application built using the Reflex framework, which can be deployed and managed within the Cloud platform. 
+
+You can deploy an app using the `reflex deploy --project dc763ea6-####-####-####-############` command, where the id passed with the `--project` flag is your project id.
+
+There are many actions you can take in the Cloud UI to manage your app. Below are some of the most common actions you may want to take.
+
+
+## View Logs
+
+To view the app logs follow the arrow in the image below and press on the `Logs` dropdown.
+
+```python eval
+image_zoom(rx.image(src="/view_logs.webp"))
+```
+
+
+## View Deployment Logs and Deployment History
+
+To view the deployment history follow the arrow in the image below and press on the `Deployments`.
+
+```python eval
+image_zoom(rx.image(src="/view_deployment_logs.webp"))
+```
+
+This brings you to the page below where you can see the deployment history of your app. Click on deployment you wish to explore further.
+
+```python eval
+image_zoom(rx.image(src="/view_deployment_logs_2.webp"))
+```
+
+This brings you to the page below where you can view the deployment logs of your app by clicking the `Build logs` dropdown.
+
+```python eval
+image_zoom(rx.image(src="/view_deployment_logs_3.webp"))
+```
+
+
+## Stopping an App
+
+To stop an app follow the arrow in the image below and press on the `Stop app` button. Pausing an app will stop it from running and will not be accessible to users until you resume it.
+
+```python eval
+image_zoom(rx.image(src="/stopping_app.webp"))
+```
+
+## Deleting an App
+
+To delete an app click on the `Settings` tab in the Cloud UI on the app page.
+
+```python eval
+image_zoom(rx.image(src="/environment_variables.webp"))
+```
+
+Then click on the `Danger` tab as shown below.
+
+```python eval
+image_zoom(rx.image(src="/deleting_app.webp"))
+```
+
+Here there is a `Delete app` button. Pressing this button will delete the app and all of its data. This action is irreversible.
+
+
+## Other app settings
+
+Clicking on the `Settings` tab in the Cloud UI on the app page also allows a user to change the `app name`, change the `app description` and check the `app id`.

docs/hosting/secrets-environment-vars.md

@@ -0,0 +1,52 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+# Secrets (Environment Variables)
+
+
+## Adding Secrets through the CLI
+
+Below is an example of how to use an environment variable file. You can pass the `--envfile` flag with the path to the env file. For example:
+
+```bash
+reflex deploy --project f88b1574-f101-####-####-5f########## --envfile .env
+```
+
+In this example the path to the file is `.env`.
+
+
+If you prefer to pass the environment variables manually below is deployment command example:
+
+```bash
+reflex deploy --project f88b1574-f101-####-####-5f########## --env OPENAI_API_KEY=sk-proj-vD4i9t6U############################
+```
+
+They are passed after the `--env` flag as key value pairs. 
+
+To pass multiple environment variables, you can repeat the `--env` tag. i.e. `reflex deploy --project f88b1574-f101-####-####-5f########## --env KEY1=VALUE1 --env KEY2=VALUE`. The `--envfile` flag will override any envs set manually.
+
+
+```md alert info
+# More information on Environment Variables
+Environment variables are encrypted and safely stored. We recommend that backend API keys or secrets are entered as `envs`. Make sure to enter the `envs` without any quotation marks. We do not show the values of them in any CLI commands, only their names (or keys).
+
+You access the values of `envs` by referencing `os.environ` with their names as keys in your app's backend. For example, if you set an env `ASYNC_DB_URL`, you are able to access it by `os.environ["ASYNC_DB_URL"]`. Some Python libraries automatically look for certain environment variables. For example, `OPENAI_API_KEY` for the `openai` python client. The `boto3` client credentials can be configured by setting `AWS_ACCESS_KEY_ID`,`AWS_SECRET_ACCESS_KEY`. This information is typically available in the documentation of the Python packages you use.
+```
+
+## Adding Secrets through the Cloud UI
+
+To find the secrets tab, click on the `Settings` tab in the Cloud UI on the app page.
+
+```python eval
+image_zoom(rx.image(src="/environment_variables.webp"))
+```
+
+Then click on the `Secrets` tab as shown below.
+
+```python eval
+image_zoom(rx.image(src="/environment_variables_2.webp"))
+```
+
+From here you can add or edit your environment variables. You will need to restart your app for these changes to take effect.

pcweb/components/docpage/sidebar/sidebar.py

@@ -351,7 +351,7 @@ def sidebar_comp(
                 "Learn", getting_started.introduction.path, "graduation-cap", 0
             ),
             sidebar_category("Components", library.path, "layout-panel-left", 1),
-            sidebar_category("Recipes", overview.path, "scan-text", 2),
+            sidebar_category("Deploy", hosting_page.deploy_quick_start.path, "cloud", 2),
             sidebar_category("API Reference", pages[0].path, "book-text", 3),
             class_name="flex flex-col items-start gap-1 w-full list-none",
         ),
@@ -378,11 +378,7 @@ def sidebar_comp(
                         "State", state.overview.path, filter_out_non_sidebar_items(backend), backend_index, url
                     ),
                     create_sidebar_section(
-                        "Hosting",
-                        hosting_page.deploy_quick_start.path,
-                        hosting,
-                        hosting_index,
-                        url,
+                        "Recipes", overview.path, recipes, recipes_index, url
                     ),
                     class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
                 ),
@@ -426,7 +422,11 @@ def sidebar_comp(
                 2,
                 rx.el.ul(
                     create_sidebar_section(
-                        "Recipes", overview.path, recipes, recipes_index, url
+                        "Hosting",
+                        hosting_page.deploy_quick_start.path,
+                        hosting,
+                        hosting_index,
+                        url,
                     ),
                     class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
                 ),

pcweb/components/docpage/sidebar/state.py

@@ -44,10 +44,16 @@ def set_sidebar_index(self, num) -> int:
 
     @rx.var(cache=True, initial_value=-1)
     def sidebar_index(self) -> int:
+        route = self.router.page.path
         if self._sidebar_index < 0:
-            route = self.router.page.path
-            if "library" in route or "api-reference" in route or "recipe" in route:
+            if "library" in route:
                 return 1
+            elif "hosting" in route:
+                return 2
+            elif "api-reference" in route:
+                return 3
             else:
                 return 0
-        return self._sidebar_index
+        if "hosting" in route:
+            return 2
+        return self._sidebar_index