Sticky Notes & Task Manager

[![License: MIT](https://im### Opening the Extension

1. Activity Bar (Recommended):

   • Look for the 📝 sticky notes icon in the Activity Bar (left sidebar)
   • Click on it to see recent notes, active tasks, and quick actions
   • Use "Open Dashboard" to open the full interface

2. Command Palette:

   • Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
   • Type "Open Sticky Notes & Tasks"
   • Press Enter

3. File Explorer:

   • The extension automatically creates a .vscode/sticky-notes.snotes file
   • Click on this file to open the extension interfaceio/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

🚀 Beautiful sticky notes and task management for VS Code. Keep track of your thoughts, todos, and work context with Apple-inspired design.

✨ Features

• 📝 Sticky Notes: Create color-coded sticky notes to remember where you left off work
• ✅ Task Management: Elegant task management with priority levels and completion tracking
• 🗂️ Categories: Organize notes by Work Context, Top of Mind, and General
• 🎨 Custom Editor Tab: Opens as a dedicated editor tab for focused productivity
• 📋 Activity Bar: Quick access panel with recent notes and active tasks
• 💾 Persistent Storage: All notes and tasks are saved across VS Code sessions
• 🎯 Priority System: Tasks support Low, Medium, and High priority levels
• 📅 Due Dates: Optional due date tracking for tasks
• 🌙 Dark Theme: Native VS Code dark theme with transparent, minimalistic design

🚀 Installation

From VS Code Marketplace (Recommended)

1. Open VS Code
2. Go to the Extensions view (Ctrl+Shift+X)
3. Search for "Sticky Notes & Task Manager"
4. Click "Install"

Manual Installation

1. Download the .vsix file from GitHub Releases
2. Open VS Code
3. Press Ctrl+Shift+P and type "Extensions: Install from VSIX..."
4. Select the downloaded .vsix file

Development Setup

1. Clone the repository: ```bash git clone https://github.com/Dhruv-Maradiya/vscode-sticky-notes-extension.git cd vscode-sticky-notes-extension ```

2. Install dependencies: ```bash npm install ```

3. Compile TypeScript: ```bash npm run compile ```

4. Package the extension: ```bash

   Install vsce if you haven't already

   npm install -g vsce

   Package the extension

   vsce package ```

5. Test in development:

   • Press `F5` to run the extension in a new Extension Development Host window

📖 Usage

Opening the Extension

1. Command Palette:

   • Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac)
   • Type "Open Sticky Notes & Tasks"
   • Press Enter

2. File Explorer:

   • The extension automatically creates a `.vscode/sticky-notes.snotes` file
   • Click on this file to open the extension interface

Creating Sticky Notes

1. Click the "+ Add Note" button
2. Enter your note content
3. Select a category:
   • Work Context: Remember where you left off yesterday
   • Top of Mind: Important thoughts and ideas
   • General: Miscellaneous notes
4. Choose a color for visual organization
5. Click "Add Note"

Managing Tasks

1. Click the "+ Add Task" button
2. Enter the task title
3. Set priority level (Low, Medium, High)
4. Optionally set a due date
5. Click "Add Task"

Organizing Content

• Filter Notes: Use category tabs (All, Work Context, Top of Mind, General)
• Filter Tasks: Use status filters (All, Pending, Completed)
• Complete Tasks: Click the checkbox next to any task
• Delete Items: Click the × button on notes or tasks

🎯 Use Cases

Work Context Tracking

• Note current progress on features
• Remember debugging approaches that were working
• Track where you left off in complex refactoring

Top of Mind Items

• Quick thoughts and ideas
• Meeting follow-ups
• Important reminders

Task Management

• Break down large features into smaller tasks
• Track daily/weekly goals
• Prioritize urgent items

🔧 Development

Project Structure

``` vscode-sticky-notes-extension/ ├── package.json # Extension manifest and dependencies ├── tsconfig.json # TypeScript configuration ├── src/ │ ├── extension.ts # Main extension entry point │ ├── stickyNotesEditor.ts # Custom editor provider │ └── storageService.ts # Data persistence service └── out/ # Compiled JavaScript (generated) ```

Key Components

1. Extension.ts: Main activation logic and command registration
2. StickyNotesEditorProvider: Custom editor with webview for UI
3. StorageService: Handles data persistence using VS Code's global state

Building for Development

```bash

Watch mode for active development

npm run watch

Single compilation

npm run compile ```

Testing

• Press `F5` in VS Code to launch Extension Development Host
• Test all features: creating notes, adding tasks, filtering, persistence

🎨 Customization

The extension uses a modern gradient design with:

• Glassmorphism UI elements
• Responsive grid layout
• Smooth animations and hover effects
• Color-coded priority system for tasks

📝 Data Storage

• All data is stored in VS Code's global state
• Persists across sessions and workspace changes
• Automatic backup when extension is updated

🐛 Troubleshooting

Extension Not Loading

• Ensure VS Code version is 1.60.0+
• Check if extension compiled successfully (`npm run compile`)
• Look for errors in VS Code Developer Console (`Help > Toggle Developer Tools`)

Data Not Persisting

• Data is stored globally, not per workspace
• If data is lost, check VS Code settings sync status

UI Not Displaying

• Ensure webview is enabled in your VS Code settings
• Try refreshing the extension tab

🔮 Future Enhancements

Potential improvements for future versions:

• Workspace-specific notes and tasks
• Export/import functionality
• Collaboration features
• Integration with external task managers
• Dark/light theme toggle
• Search functionality
• Note templates

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Guidelines

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Reporting Issues

If you encounter any issues or have suggestions for improvements, please open an issue on GitHub.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License Summary

• ✅ Commercial use
• ✅ Distribution
• ✅ Modification
• ✅ Private use
• ❌ Liability
• ❌ Warranty

👨‍💻 Author

Dhruv Maradiya

• GitHub: @Dhruv-Maradiya

⭐ Show Your Support

If you like this extension, please:

• ⭐ Star the repository on GitHub
• 📝 Leave a review on the VS Code Marketplace
• 🐛 Report any bugs or issues
• 💡 Suggest new features

Happy Coding! 🚀