Merge branch 'main' of https://github.com/polkadot-cloud/docs

docs/pages/console/basics/interface-overview.mdx

@@ -10,18 +10,18 @@ Upon visiting Developer Console for the first time, users are presented with a f
 
 ## Tabs 
 
-Tabs are at the foundation of how users interact with and navigate through Developer Console; Each tab is rendered at the top of the UI, and are displayed at all times:
+Tabs are fundamental to how users interact with and navigate through Developer Console. Each tab is rendered at the top of the UI and is displayed at all times.
 
 ![Interface Tabs](/png/interface-overview/interface-tabs.png)
 
 A tab can host a specific task or connect to a specific chain. Users can create multiple tabs to work on different tasks or connect to different chains simultaneously. Each tab is independent and represents a separate connection to a specific chain.
 
 Tabs include the following features:
-- Auto connect: A tab can connect to its chains automatically upon subsequent visits to the console.
-- Click and drag to re-order a tab.
-- Horizontal scrolling on window overflow.
-- Right click to open a context menu for quick-actions.
-- Close tab: Disconnect from the chain(s) associated with the tab, and close the tab.
+* **Auto connect**: A tab can connect to its chains automatically upon subsequent visits to the console.
+* **Reordering**: Click and drag to re-order tabs.
+* **Scrolling**: Horizontal scrolling on window overflow.
+* **Quick actions**: Right-click to open a context menu for quick actions.
+* **Close tab**: Disconnect from the chain(s) associated with the tab and close the tab.
 
 ## Chain Directory
 
@@ -43,7 +43,9 @@ The displayed directory may change based on the active page of the tab. The prev
 
 ## Connecting to a Chain
 
-Pressing the __Connect__ button associated with a chain will open a list of RPC providers to choose from. Once an RPC provider is selected, the tab will connect to the chain (or chains) automatically.
+1. Press the **Connect** button associated with a chain to open a list of RPC providers.
+2. Choose an RPC provider from the list.
+3. The tab will automatically connect to the selected chain(s).
 
 ![Connect to RPC Provider](/png/interface-overview/connect-rpc-providers.png)
 

docs/pages/console/basics/settings/tabs.mdx

@@ -0,0 +1,24 @@
+# Tabs
+
+The Tabs settings in the Polkadot Developer Console allow you to customize the behavior and appearance of tabs. To access these settings:
+
+1. Click on the Settings icon in the top-right corner of the console.
+2. Select the "Tabs" tab in the Settings menu.
+
+![Interface Overview](/png/tabs/hero.png)
+
+## Tab Settings Options
+
+### Chain Color Theming
+
+When this setting is active, tabs are color-coded based on the associated chain's theme. This visual distinction makes it easier to identify and differentiate between tabs connected to various chains, enhancing navigation and organization within your workspace.
+
+### Default Auto Connect
+
+With this setting enabled, new tabs automatically attempt to connect to the selected chain or task upon creation. This streamlines your workflow by eliminating the need to manually initiate connections each time you open a new tab, allowing you to quickly access and work with different chains or tasks.
+
+### Auto Tab Naming
+
+When activated, this setting automatically renames tabs based on the chain or task they're connected to. This feature ensures that each tab is clearly labeled with relevant information, making it easier to identify the purpose or content of each tab at a glance, especially when working with multiple chains or tasks simultaneously.
+
+These settings allow you to tailor your Polkadot Developer Console experience to best suit your workflow and preferences when managing multiple chains or tasks.

docs/pages/console/basics/settings/tags.mdx

@@ -0,0 +1,56 @@
+# Tags
+
+Tags provide a flexible way to organize and filter chains within the Polkadot Developer Console. Users can utilize default tags or create custom tags to suit their specific needs. To access these settings:
+
+1. Click on the Settings cog icon in the top-right corner of the console interface.
+2. Select the "Tags" tab in the Settings menu.
+
+![Interface Overview](/png/tags/hero.png)
+
+## Managing Tags
+
+### Viewing Existing Tags
+
+The Tags management screen displays a list of all existing tags, both default and custom. For each tag, you can see:
+
+- Tag name
+- Number of chains the tag is applied to
+
+![List of existing tags](/png/tags/tag-list.png)
+
+### Creating a New Tag
+
+To create a new tag:
+
+1. Click the __+ New Tag__ button at the top-right of the Tags management screen.
+2. Enter the desired name for your new tag in the "Tag Name" field.
+3. Click __Create Tag__ to add the new tag to your list.
+
+![New Tag creation](/png/tags/new-tag.png)
+
+### Applying Tags to Chains
+
+To apply a tag to a chain:
+
+1. Navigate to the "Connect Chain" screen.
+2. Locate the chain you want to tag in the chain list.
+3. Click the __Add__ button next to the chain's existing tags.
+4. Select the tag you want to apply from the dropdown menu.
+
+![Applying tags to a chain](/png/tags/apply-tag.png)
+
+### Filtering Chains by Tags
+
+To filter chains using tags:
+
+1. On the "Connect Chain" screen, locate the "Tags" section above the chain list.
+2. Click on one or more tags to filter the chain list. The list will show chains that have any of the selected tag(s).
+3. To clear filters, click the __Clear__ button next to the Tags section.
+
+## Use Cases for Tags
+
+- Group chains by network (e.g., Polkadot, Kusama, Westend)
+- Categorize chains by type (e.g., Relay Chain, System Chain, Parachain)
+- Create custom categories for specific projects or use cases
+
+By utilizing tags effectively, developers can create a highly organized workspace within the Polkadot Developer Console, tailored to their specific project needs and workflow preferences.

docs/pages/console/basics/settings/workspaces.mdx

@@ -1,9 +1,3 @@
----
-id: workspaces
-title: Workspaces
-sidebar_position: 6
----
-
 # Workspaces
 
 Workspaces provide developers with essential functionalities for managing their workspace state by providing import and export capabilities, as well as the ability to reset the workspace to its default state. 

docs/pages/console/basics/wallets.mdx

@@ -0,0 +1,75 @@
+# Connecting Wallets
+
+The Polkadot Developer Console allows you to connect various types of hardware wallets and web extensions. This feature enables you to interact with the Polkadot ecosystem securely using your preferred wallet.
+
+## Accessing the Wallet Connection Interface
+
+1. Look for the wallet icon (resembling a power plug) in the top-right corner of the Developer Console interface.
+2. Click on the "Connect Wallets" button to open the wallet connection interface.
+
+![Connect Wallets Button](/png/wallets/hero.png)
+
+## Wallet Connection Interface
+
+The wallet connection interface is divided into two main sections:
+
+1. Hardware Wallets
+2. Web Extensions
+
+### Hardware Wallets
+
+The following hardware wallets are currently supported:
+
+- [Polkadot Vault](https://vault.novasama.io/)
+- [Ledger](https://www.ledger.com/start)
+
+To manage these wallets:
+
+1. Click the "Manage" button next to the wallet you want to use.
+2. Follow the on-screen instructions to connect and set up your hardware wallet.
+
+### Web Extensions
+
+Various web extension wallets are listed, including:
+
+- [Talisman](https://talisman.xyz)
+- [Enkrypt](https://enkrypt.com)
+- [Fearless Wallet](https://fearlesswallet.io)
+- [PolkaGate](https://polkagate.xyz)
+- [Polkadot JS](https://polkadot.js.org/extension)
+- [SubWallet](https://subwallet.app)
+
+The status of each web extension is indicated as follows:
+
+- **+ Connect**: The extension is installed and ready to connect.
+- **Not Installed**: The extension is not currently installed in your browser.
+
+To connect a web extension wallet:
+
+1. If the extension is not installed, click on the wallet name to visit the official website and install it.
+2. Once installed, refresh the Developer Console page.
+3. Click the "+ Connect" button next to the installed wallet to establish the connection.
+
+## Managing Connected Wallets
+
+After connecting a wallet:
+
+- For hardware wallets, use the "Manage" button to access wallet-specific options and controls.
+- For web extensions, the "+ Connect" button will change to indicate the connected status.
+
+## Disconnecting Wallets
+
+To disconnect a wallet:
+
+1. Open the wallet connection interface.
+2. For hardware wallets, use the "Manage" options to disconnect.
+3. For web extensions, click on the connection status button to disconnect.
+
+## Troubleshooting
+
+If you encounter issues while connecting wallets:
+
+- Ensure your hardware wallet is properly connected and unlocked.
+- Check that your web extension is up-to-date and properly installed.
+- Refresh the Developer Console page and try connecting again.
+- Consult the specific wallet's documentation for additional troubleshooting steps.

docs/pages/console/overview.mdx

@@ -5,7 +5,7 @@ import { Callout } from 'vocs/components'
 The Developer Console documentation is split into three sections, categorised based on the type of user you are:
 
 - **[Basics](/console/basics/interface-overview)**: If you simply wish to use the console, this section explains each feature and how to interact with the console UI.
-- **[Adding Resources](console/resources/adding-a-chain)**: If you wish to add resources, such as a new chain to the directory, this section outlines instructions on how to do so.
+- **[Adding Resources](/console/resources/adding-a-chain)**: If you wish to add resources, such as a new chain to the directory, this section outlines instructions on how to do so.
 - **[Core Development](/console/development/installation)**: If you are interested in maintaining or growing the console with your own contributions, this section aims to detail the core concepts and structure of the console's codebase.
 
 ## About Polkadot Developer Console

docs/pages/console/resources/adding-a-chain.mdx

@@ -1,3 +1,3 @@
 # Resources
 
-Coming soon...
+Adding a chain to the Polkadot Developer Console allows you to expand the range of networks you can interact with. 

docs/pages/index.mdx

@@ -12,5 +12,4 @@ We also host a [blog](/blog) where we share the latest updates to Polkadot Cloud
 
 ## Next Steps
 
-Visit the [next page](/console/overview) for an overview of the Polkadot Developer Console.
-
+Visit the [next page](/console/overview) for an overview of the Polkadot Developer Console.

package.json

@@ -13,6 +13,6 @@
     "react": "latest",
     "react-dom": "latest",
     "typescript": "latest",
-    "vocs": "1.0.0-alpha.55"
+    "vocs": "^1.0.0-alpha.55"
   }
 }

vocs.config.tsx

@@ -37,17 +37,28 @@ export default defineConfig({
               text: 'Interface Overview',
               link: '/console/basics/interface-overview',
             },
-
             {
               text: 'Settings',
               collapsed: false,
               items: [
+                {
+                  text: 'Tabs',
+                  link: '/console/basics/settings/tabs',
+                },
+                {
+                  text: 'Tags',
+                  link: '/console/basics/settings/tags',
+                },
                 {
                   text: 'Workspaces',
                   link: '/console/basics/settings/workspaces',
                 },
               ],
             },
+            {
+              text: 'Wallet Connection',
+              link: '/console/basics/wallets',
+            },
           ],
         },
         {