Merge pull request #7 from loq24/hotfix/styling-issues

Hotfix/styling issues

Author: loq24

DEVELOPMENT.md

@@ -0,0 +1,60 @@
+# Development Guide
+
+## Quick Start for Fast Development
+
+### Option 1: Automatic Watch Mode (Recommended)
+
+```bash
+npm run dev:all
+```
+
+This runs both CSS and JS watchers simultaneously.
+
+### Option 2: Individual Watchers
+
+```bash
+# Terminal 1: Watch Tailwind CSS changes
+npm run dev:css
+
+# Terminal 2: Watch TypeScript/React changes
+npm run dev:fast
+```
+
+### Option 3: JS Only (if CSS isn't changing)
+
+```bash
+npm run dev:fast
+```
+
+## How to See Changes
+
+1. **Start the development server** using one of the options above
+2. **Load your extension** in Chrome (chrome://extensions/, enable Developer mode, load unpacked from `dist/` folder)
+3. **Make changes** to your code
+4. **Save the files** - Webpack will automatically rebuild
+5. **Refresh the extension** in Chrome:
+   - Go to chrome://extensions/
+   - Click the refresh icon on your extension
+   - OR use keyboard shortcut: Ctrl+R (Cmd+R on Mac) while popup is open
+
+## What Gets Rebuilt?
+
+- **CSS changes**: Only Tailwind CSS rebuilds (~100-500ms)
+- **React/TypeScript changes**: Only changed modules rebuild (~1-3s)
+- **Full rebuild**: Only on first run or major config changes
+
+## Chrome Extension Development Tips
+
+1. **Popup changes**: Save → Refresh extension → Click extension icon
+2. **Content script changes**: Save → Refresh extension → Reload Gmail tab
+3. **Background script changes**: Save → Refresh extension
+4. **Manifest changes**: Need to reload extension completely
+
+## Build Commands
+
+- `npm run dev` - Initial CSS build + watch mode
+- `npm run dev:fast` - Watch mode without CSS rebuild
+- `npm run dev:all` - Watch both CSS and JS simultaneously
+- `npm run build` - Production build
+- `npm run type-check` - TypeScript type checking
+- `npm run type-check:watch` - Continuous type checking