project-settings updates

Author: faisal004

docs/user/features/layouts.md

@@ -0,0 +1,14 @@
+# Layouts
+
+Codebolt provides three layout options to suit different development needs and preferences:
+
+1. **Basic**: This layout is ideal when you want to focus on updating your app through chat interactions without seeing the code. It provides a streamlined interface for making changes to your app using natural language conversations.
+
+2. **Dev**: The Dev layout is designed for basic development tasks. It includes a chat interface, a code editor, and a preview pane. This layout allows you to have conversations with the AI, make code changes, and see the results in real-time.
+
+3. **Power Dev**: The Power Dev layout is tailored for advanced development scenarios. In addition to the features provided in the Dev layout, it also includes a terminal, console, and debugging tools. This layout gives you full control over your development environment, enabling you to perform complex tasks and troubleshoot issues effectively.
+
+Choose the layout that best fits your development style and requirements. The Basic layout is perfect for quick updates and iterations, while the Dev and Power Dev layouts offer progressively more powerful tools for comprehensive development workflows.
+
+
+### Video Guide

docs/user/module/settings/ProjectSettings/AppSettings.md

@@ -0,0 +1,15 @@
+# App Settings
+
+Customize the name, description and githubUrl. This information is used when publishing  your project.
+
+In the App Settings, you can:
+- Change the name of your app
+- Give it a unique ID 
+- Add a description
+- Specify the GitHub URL where the application's code repository will be maintained
+
+![AppSettings](../../../../../static/settings/projectSettings/1.png)
+
+### Video Guide
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/VOQx8kqKvAE?si=A1Yugc_ub1pOufwv" 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>

docs/user/module/settings/ProjectSettings/Instructions.md

@@ -0,0 +1,5 @@
+# Instructions
+
+
+
+![Instructions](../../../../../static/settings/projectSettings/5.png)

docs/user/module/settings/ProjectSettings/KnowledgeBase.md

@@ -0,0 +1,5 @@
+# Knowledge Base
+
+
+
+![knowledgebase](../../../../../static/settings/projectSettings/4.png)

docs/user/module/settings/ProjectSettings/Secrets.md

@@ -0,0 +1,30 @@
+# Secrets
+
+![AppSettings](../../../../../static/settings/projectSettings/3.png)
+
+Every project needs secrets to store sensitive information like API keys, database passwords, etc. In this section, you can add a list of secrets for your project:
+
+### Creating
+
+1. Click the "Add Secret" button to create a new secret.
+2. Provide a name and description for the secret that describes its purpose. 
+3. Enter the secret value.
+4. Click "Save" to store the secret securely.
+
+
+### Editing
+To edit an existing secret:
+1. Click the "Edit" button next to the secret you want to modify.
+2. Update the secret details as needed.
+3. Click "Save" to apply the changes.
+
+### Deleting
+
+To delete a secret:
+1. Click the "Delete" button next to the secret you want to remove.
+
+
+## Video Guide
+
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/97ndwO6Heek?si=I1luQfciotAy5i0O" 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>

docs/user/module/settings/ProjectSettings/TechnicalInfo.md

@@ -0,0 +1,6 @@
+# Technical Info
+
+
+
+![technicalinfo](../../../../../static/settings/projectSettings/5.png)
+

docs/user/module/settings/ProjectSettings/Usage.md

@@ -0,0 +1,35 @@
+# Usage
+
+![usages](../../../../../static/settings/projectSettings/6.1.png)
+
+Usage settings are divided into three parts:
+1. Develop Settings 
+2. Install Settings
+3. App Use Settings
+
+## Develop Settings
+![usages](../../../../../static/settings/projectSettings/6.1.png)
+The Develop Settings section provides three options:
+1. Select Agent: Choose the appropriate agent for your project.
+2. Select Layout: Pick from Basic, Developer, or Power Developer layouts based on your needs.
+3. Run Command: Specify any commands to run during the development process.
+
+When user publish their projects as app then to develop on top of this this project they need to know what agent will be best suited what are step to run the project.
+
+## Install Settings
+![usages](../../../../../static/settings/projectSettings/6.2.png)
+The Install Settings section provides instructions and commands to install the app. It includes:
+1. Installation Instructions: Step-by-step guide on how to install the app.
+2. Installation Command: Specify the command(s) needed to install the app, such as `npm install` or `pip install`.
+
+When a user wants to install and use an app created from this project, they will refer to this section for the necessary installation details and commands.
+
+## App Use Settings
+![usages](../../../../../static/settings/projectSettings/6.3.png)
+The App Use Settings section provides options for users to configure how to use the app:
+1. Select Agent: Choose the appropriate agent for running the app.
+2. Select Layout: Pick the layout that is best suited for the app, such as Basic, Dev, or PowerDev.
+3. Pre-run Commands: Specify any commands that need to be run before starting the app.
+4. App Preview: Select whether to preview the app locally or on the web.
+
+These settings allow users to customize the app's runtime environment, UI layout, initialization steps, and preview mode to best fit their needs when using the app created from this project.

docs/user/module/settings/ProjectSettings/projectSettings.md

@@ -1,6 +1,10 @@
-# Project Setting
+# Project Settings
 
-The Project Settings module allows you to configure essential project parameters, technical details, secrets, knowledge base, instructions, and usage preferences. Each section within Project Settings serves a unique purpose, providing organized control over the project's configuration.
+In the **Project Settings** section, you can configure various options for your project:
 
-
-### App Settings
+1. [App Settings](AppSettings)
+2. [Technical Info](TechnicalInfo)
+3. [Secrets](Secrets)
+4. [Knowledge Base](KnowledgeBase)
+5. [Instructions](Instructions)
+5. [Usage](Usage)