Simplify the CONTRIBUTING.md webview section

Author: EhabY

CONTRIBUTING.md

@@ -68,168 +68,45 @@ are close to shutting down.
 
 ## Webviews
 
-The extension uses React-based webviews for rich UI panels. Webviews are built
-with Vite and live in `packages/` as a pnpm workspace.
+The extension uses React-based webviews for rich UI panels, built with Vite and
+organized as a pnpm workspace in `packages/`.
 
 ### Project Structure
 
 ```text
 packages/
-├── shared/                  # Shared utilities and config
-│   ├── src/
-│   │   ├── index.ts         # WebviewMessage type
-│   │   └── react/           # VS Code API hooks
-│   │       ├── api.ts       # postMessage, getState, setState
-│   │       └── hooks.ts     # useMessage, useVsCodeState
-│   ├── tsconfig.json
-│   ├── tsconfig.webview.json    # Base tsconfig for all webviews
-│   └── vite.config.base.ts      # Shared Vite config factory
-└── tasks/                   # Task panel webview
-    ├── src/
-    │   ├── index.tsx        # Entry point
-    │   └── App.tsx          # Root component
-    ├── package.json
-    ├── tsconfig.json        # Extends ../shared/tsconfig.webview.json
-    └── vite.config.ts       # Uses createWebviewConfig from shared
+├── shared/          # Shared types, React hooks, and Vite config
+│   └── extension.d.ts   # Types exposed to extension (excludes React)
+└── tasks/           # Example webview (copy this for new webviews)
 
 src/webviews/
-├── util.ts                  # getWebviewHtml() - generates HTML with CSP
-└── tasks/
-    └── TasksPanel.ts        # WebviewViewProvider implementation
+├── util.ts          # getWebviewHtml() helper
+└── tasks/           # Extension-side provider for tasks panel
 ```
 
-### How It Works
+Key patterns:
 
-**Extension side** (`src/webviews/`):
-
-- Implements `WebviewViewProvider` to create the panel
-- Uses `getWebviewHtml()` to generate secure HTML with nonce-based CSP
-- Communicates via `webview.postMessage()` and `onDidReceiveMessage`
-
-**React side** (`packages/`):
-
-- Uses `@coder/shared/react` hooks for message passing
-- `postMessage()` sends messages to the extension
-- `useMessage()` listens for messages from the extension
-- `useVsCodeState()` persists state across panel visibility changes
+- **Type sharing**: Extension imports types from `@coder/shared` via path mapping
+  to `extension.d.ts`. Webviews import directly from `@coder/shared/react`.
+- **Message passing**: Use `postMessage()`/`useMessage()` hooks for communication.
+- **Lifecycle**: Dispose event listeners properly (see `TasksPanel.ts` for example).
 
 ### Development
 
-Run these in separate terminals:
-
 ```bash
 pnpm watch         # Rebuild extension on changes
-pnpm dev:webviews  # Rebuild webviews on changes
+pnpm dev:webviews  # Rebuild webviews on changes (run in separate terminal)
 ```
 
-Then press F5 to launch the Extension Development Host. When you edit webview
-code, use "Developer: Reload Webviews" or close/reopen the panel to see updates.
+Press F5 to launch the Extension Development Host. Use "Developer: Reload Webviews"
+to see webview changes.
 
 ### Adding a New Webview
 
-1. **Create the package:**
-
-   ```bash
-   cp -r packages/tasks packages/<name>
-   ```
-
-   Update `packages/<name>/package.json`:
-
-   ```json
-   { "name": "@coder/<name>-webview" }
-   ```
-
-   Update `packages/<name>/vite.config.ts`:
-
-   ```typescript
-   import { createWebviewConfig } from "../shared/vite.config.base";
-
-   export default createWebviewConfig("<name>", __dirname);
-   ```
-
-2. **Create the provider** in `src/webviews/<name>/<Name>Panel.ts`:
-
-   ```typescript
-   import * as vscode from "vscode";
-   import { getWebviewHtml } from "../util";
-
-   export class MyPanel implements vscode.WebviewViewProvider {
-   	public static readonly viewType = "coder.myPanel";
-
-   	constructor(private readonly extensionUri: vscode.Uri) {}
-
-   	resolveWebviewView(webviewView: vscode.WebviewView): void {
-   		webviewView.webview.options = {
-   			enableScripts: true,
-   			localResourceRoots: [
-   				vscode.Uri.joinPath(this.extensionUri, "dist", "webviews"),
-   			],
-   		};
-   		webviewView.webview.html = getWebviewHtml(
-   			webviewView.webview,
-   			this.extensionUri,
-   			"<name>",
-   		);
-   	}
-   }
-   ```
-
-3. **Register in `package.json`** under `contributes.views.coder`:
-
-   ```json
-   {
-   	"type": "webview",
-   	"id": "coder.myPanel",
-   	"name": "My Panel",
-   	"icon": "media/logo-white.svg"
-   }
-   ```
-
-4. **Register in `src/extension.ts`:**
-
-   ```typescript
-   import { MyPanel } from "./webviews/<name>/<Name>Panel";
-
-   // In activate():
-   context.subscriptions.push(
-   	vscode.window.registerWebviewViewProvider(
-   		MyPanel.viewType,
-   		new MyPanel(context.extensionUri),
-   	),
-   );
-   ```
-
-### Shared Package (`@coder/shared`)
-
-The extension can import types from `@coder/shared` via path mapping in `tsconfig.json`.
-The mapping points to `extension.d.ts`, which re-exports only the types meant for
-extension use (excluding `@coder/shared/react` which is webview-only).
-
-Type-safe message passing between extension and webview:
-
-```typescript
-// In React component
-import { postMessage, useMessage } from "@coder/shared/react";
-
-// Send message to extension
-postMessage({ type: "refresh" });
-
-// Listen for messages from extension
-useMessage((msg) => {
-	if (msg.type === "data") {
-		setData(msg.data);
-	}
-});
-
-// Persist state across visibility changes
-const [count, setCount] = useVsCodeState(0);
-```
-
-### Stack
-
-- **React 19** with TypeScript
-- **Vite** with SWC for fast builds
-- **@vscode-elements/react-elements** for native VS Code styling
+1. Copy `packages/tasks` to `packages/<name>` and update the package name
+2. Create a provider in `src/webviews/<name>/` (see `TasksPanel.ts` for reference)
+3. Register the view in `package.json` under `contributes.views`
+4. Register the provider in `src/extension.ts`
 
 ## Testing