docs: rewrite README introduction and structure

- Add CI/CD badges for test and release workflows
- Rewrite opening paragraph with more engaging copy
- Reorganize features into categorized sections with emojis
- Simplify Quick Start instructions with clearer steps
- Condense Tree View and Auto-Preview sections
- Add realistic Supported Syntax example with project context
- Improve Installation section with step-by-step instructions
- Add Requirements and Contributing sections with icons
- More scannable structure with better visual hierarchy

Author: GSejas

README.md

@@ -1,103 +1,105 @@
 # Markdown Interactive Checkbox Preview
 
-A VS Code extension that provides an interactive preview for Markdown checkboxes with live editing capabilities and hierarchical tree view navigation.
+[![Tests](https://github.com/GSejas/markdown-checkbox-preview/actions/workflows/test.yml/badge.svg)](https://github.com/GSejas/markdown-checkbox-preview/actions/workflows/test.yml)
+[![Release](https://github.com/GSejas/markdown-checkbox-preview/actions/workflows/release.yml/badge.svg)](https://github.com/GSejas/markdown-checkbox-preview/actions/workflows/release.yml)
+
+Transform your Markdown task lists into an interactive, synchronized workspace. Click to toggle checkboxes, navigate with tree views, and track progress—all while your changes sync instantly to your source files.
 
 ![Markdown Preview](media\full-demo-1.0.6_128colors_32colors.gif)
-> This extension empowers developers with CodeLens actions to toggle markdown checkboxes.
 
-## Features
+## ✨ Key Features
 
-- **Interactive checkboxes** that can be clicked to toggle state
-- **Live sync** - Changes are immediately synced back to the source Markdown file  
-- **Progress tracking** with visual progress bar and hover over support
-- **Hierarchical tree view** in the Explorer sidebar showing all checkboxes organized by headers
-- **Status bar integration** showing completion statistics
-- **Hover information** - Hover over checkboxes to see status, content, and quick toggle actions
-- **CodeLens integration** - See toggle buttons directly above checkbox lines in the editor
-- **Smart navigation** - Click headers in preview or tree to jump to source locations
-- **Auto-preview toggle** - Automatically open preview when markdown files are opened (status bar button)
+### 🎯 Interactive Checkbox Preview
+- **One-click toggling** - Click any checkbox in the preview to change its state
+- **Real-time sync** - Changes instantly update your Markdown source files
+- **Smart navigation** - Click headers to jump directly to source locations
+- **Auto-preview mode** - Optional automatic preview opening for markdown files
 
-![Hover over support](media\codelness-demo.gif)
+### 📊 Progress Tracking
+- **Visual progress bars** showing completion percentages
+- **Hover information** with status, content, and quick actions
+- **Status bar integration** displaying completion statistics at a glance
+
+### 🌲 Tree View Navigation
+- **Hierarchical organization** - Tasks grouped by headers and structure
+- **Sidebar integration** - Browse all checkboxes from the Explorer panel
+- **Toggle visibility** - Show/hide headers for focused task management
+- **One-click updates** - Click any tree item to toggle its state
+
+### 💻 Editor Integration
+- **CodeLens actions** - Toggle buttons appear directly above checkbox lines
+- **Inline hover cards** - See status and actions without leaving your cursor
+- **Seamless workflow** - All features integrate naturally with VS Code
 
-## Usage
+## 🚀 Quick Start
 
-### Interactive Preview
-1. Open a Markdown file containing checkboxes
-2. Use Command Palette: "Open Interactive Checkbox Preview"
+### Open Interactive Preview
+1. Open any Markdown file with checkboxes
+2. Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac)
+3. Search for **"Open Interactive Checkbox Preview"**
 
    ![Open Interactive Preview Button](media/open-interactive-preview-button.png)
 
-3. Click checkboxes in the preview to toggle them
-4. **Click any header to navigate to that section in the source file**
-5. Changes are automatically saved to your file
+4. Click checkboxes to toggle them—changes save automatically!
 
    ![Real-time Sync](media/markdown-checkbox-preview-real-time-sync.gif)
 
-### Tree View Navigation
+### Navigate with Tree View
 
 1. Open a Markdown file with checkboxes
-2. Look for "Markdown Checkboxes" section in the Explorer sidebar
-3. Browse your tasks organized by headers and hierarchy
-4. Click any checkbox in the tree to toggle its state
+2. Find **"Markdown Checkboxes"** in the Explorer sidebar
+3. Browse your tasks organized by headers
+4. Click any checkbox to toggle its state instantly
 
    ![Tree View Checkboxes](media/menu-tree-checkboxes.gif)
 
-5. Use the refresh button to update the tree view
-6. **Toggle Headers visibility** using the eye icon to show/hide headers in the tree view for focused task management
+5. Use the refresh button (↻) to update the view
+6. Toggle header visibility (👁) to focus on tasks only
 
-### Hover & CodeLens Support
+### Enable Auto-Preview
 
-1. **Hover over checkboxes** in the editor to see:
-   - Current status (checked/unchecked)
-   - Task content
-   - Quick toggle action
-   - Position and formatting information
+Click the **eye icon** in the status bar (bottom-right) to enable auto-preview mode:
+- 👁 ✓ = Auto-preview enabled
+- 👁 ✗ = Auto-preview disabled
 
-2. **CodeLens actions** appear above checkbox lines showing:
-   - Toggle buttons with visual icons
-   - One-click checkbox state changes
-   - Seamless integration with VS Code's editor
+When enabled, previews open automatically for all markdown files.
 
-### Auto-Preview Toggle
-
-1. **Enable auto-preview** using the status bar button (right side of status bar)
-   - Click the eye icon to toggle auto-preview on/off
-   - $(eye) $(check) indicates auto-preview is enabled
-   - $(eye-closed) $(x) indicates auto-preview is disabled
-
-2. **Automatic behavior** when enabled:
-   - Preview automatically opens when you open markdown files
-   - Smart panel management prevents duplicate preview windows
-   - Configuration persists across VS Code sessions
+![Hover over support](media\codelness-demo.gif)
 
-3. **Manual override** - You can still manually open previews anytime using the Command Palette
+## 📝 Supported Syntax
 
-## Supported Syntax
+The extension recognizes standard Markdown checkbox syntax:
 
-- [x] Unchecked task
-- [ ] Checked task
-  - [ ] Nested subtask
-  
 ```markdown
-# Header 1
-## Header 2
-### Header 3
-
-- [ ] Unchecked task
-- [ ] Checked task
-  - [ ] Nested subtask
-  - [x] Completed subtask
-    - [x] Deeply nested task
+# Project Tasks
+
+## Development
+- [ ] Set up project structure
+- [x] Configure build tools
+  - [x] Install dependencies
+  - [ ] Set up linting
+    - [x] ESLint configuration
+    - [ ] Prettier setup
+
+## Documentation
+- [ ] Write README
+- [ ] Add API docs
 ```
 
-## Installation
+## 📦 Installation
+
+1. Open VS Code
+2. Press `Ctrl+Shift+X` (or `Cmd+Shift+X` on Mac) to open Extensions
+3. Search for **"Markdown Checkbox Preview"**
+4. Click **Install**
 
-Install from the VS Code Extension Marketplace or use the .vsix file.
+Or install directly from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=GSejas.markdown-checkbox-preview).
 
-## Requirements
+## 🔧 Requirements
 
-VS Code 1.84.0 or higher
+- VS Code 1.84.0 or higher
+- No additional dependencies required
 
-## Contributing
+## 🤝 Contributing
 
 Contributions are welcome! Please see [CHANGELOG.md](CHANGELOG.md) for version history and development notes.