Added Code Structure (#214)

* docs: add code structure and prefs management documentation

* docs: update heading level in desktop contribution guide

Author: list-jonas

content/docs/contribute/desktop/code-structure-and-prefs.mdx

@@ -0,0 +1,56 @@
+---
+title: Code Structure
+description: Zen Browser Code Structure and Preference Management
+---
+
+The Zen Browser is a fork of Firefox with custom features like vertical tabs, workspaces, and themes. The source code is organized in the `src/` directory, with patches and custom implementations for Zen-specific features.
+
+## Main Directories
+- **src/zen/**: Contains Zen-specific features.
+  - `workspaces/`: Implements workspace functionality (e.g., ZenWorkspaces.mjs, ZenWorkspace.mjs).
+  - `compact-mode/`: Handles compact mode UI.
+  - `glance/`: Quick tab preview feature.
+  - `common/`: Shared utilities like ZenUIManager.mjs and ZenStartup.mjs.
+  - `tabs/`: Tab management, including pinned tabs.
+- **src/browser/**: Browser components with patches (e.g., browser.xhtml patches).
+- **prefs/**: Preference files in YAML format for various features (e.g., zen.yaml for general prefs, glance.yaml for glance feature).
+
+## How to Add New Preferences
+Preferences in Zen Browser are defined in YAML files under `prefs/`. These are loaded and applied to customize behavior.
+
+### Steps to Add a New Pref
+1. **Choose or Create a YAML File**: 
+  - For workspace-related prefs, edit `prefs/zen.yaml` or create a new one like `workspaces.yaml` if needed.
+  - Example structure in YAML:
+    ```yaml
+    - name: zen.workspaces.new-pref
+      value: true
+    ```
+
+2. **Define the Pref**:
+  - `name`: The preference key (e.g., 'zen.workspaces.enable-feature').
+  - `value`: Default value (bool, string, int).
+  - *`condition`: Optional*
+
+3. **Integrate in Code**:
+  - Use `Services.prefs.getBoolPref('zen.workspaces.new-pref', defaultValue)` in JavaScript files (e.g., ZenWorkspaces.mjs).
+
+4. **Build and Test**:
+  - Rebuild the browser.
+
+
+### Glance Example
+To add a pref for enabling/disabling the Glance feature:
+- In `prefs/glance.yaml`:
+  ```yaml
+  - name: zen.glance.enabled
+    value: true
+  ```
+- In `src/zen/glance/ZenGlanceManager.mjs`:
+  ```javascript
+  const glanceEnabled = Services.prefs.getBoolPref('zen.glance.enabled', true);
+  ```
+
+<Callout type="info" title="Tip">
+  For more details, refer to existing preference definitions in the `prefs/` directory and their corresponding code implementations in `src/zen/`.
+</Callout>