super-productivity/packages/plugin-dev/procrastination-buster
Johannes Millan 730028c60c refactor: simplify procrastination-buster plugin with KISS principles
- Remove tabs from info panel, present content as plain sections
- Integrate BlockerSelector and StrategyList directly into App.tsx
- Simplify state management with ViewState type union
- Remove duplicate content and streamline text
- Clean up unused component files
- Reduce CSS complexity and remove tab-related styles
- Improve overall readability and maintainability

The plugin now follows KISS principles with a simpler, more direct
implementation that's easier to understand and maintain.
2025-06-24 21:04:37 +02:00
..
scripts fix(plugin): resolve empty panel issue in procrastination-buster 2025-06-24 21:04:37 +02:00
src refactor: simplify procrastination-buster plugin with KISS principles 2025-06-24 21:04:37 +02:00
.gitignore feat(plugin): add build system and procrastination-buster as default plugin 2025-06-24 21:04:26 +02:00
index.html feat(plugin): add procrastination-buster plugin with SolidJS 2025-06-24 21:04:26 +02:00
manifest.json feat(plugin): add build system and procrastination-buster as default plugin 2025-06-24 21:04:26 +02:00
package-lock.json feat(plugin): add build system and procrastination-buster as default plugin 2025-06-24 21:04:26 +02:00
package.json fix(plugin): resolve empty panel issue in procrastination-buster 2025-06-24 21:04:37 +02:00
plugin-message-example.md refactor(plugin): clean up procrastination-buster and add proper enums 2025-06-24 21:04:37 +02:00
README.md feat(plugin): add build system and procrastination-buster as default plugin 2025-06-24 21:04:26 +02:00
tsconfig.json feat(plugin): add procrastination-buster plugin with SolidJS 2025-06-24 21:04:26 +02:00
vite.config.ts feat(plugin): add action buttons to all strategies in procrastination-buster 2025-06-24 21:04:37 +02:00

Procrastination Buster Plugin

A Super Productivity plugin that helps identify procrastination blockers and provides tailored strategies to overcome them.

Features

  • 🎯 Identify 8 different procrastination types
  • 💡 Get tailored strategies for each type
  • ⏱️ Start Pomodoro timer directly from strategies
  • Add strategies as tasks
  • 🌓 Dark mode support using CSS variables

Installation

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Create plugin ZIP
npm run package

Use in Super Productivity

  1. Run npm run build
  2. Upload the generated dist/plugin.zip in Super Productivity
  3. Or copy the dist folder to src/assets/procrastination-buster/

Usage

  1. Shortcut: Use keyboard shortcut for quick access
  2. Side Panel: Open the plugin via the side panel
  3. Automatic: After 15 minutes of inactivity on a task

Procrastination Types

  1. Overwhelm - "Too much at once"
  2. Perfectionism - "It's not perfect enough"
  3. Unclear - "I don't know what to do"
  4. Boredom - "It's boring"
  5. Fear - "I might fail"
  6. Low Energy - "I'm too tired"
  7. Distraction - "Other things are more interesting"
  8. Resistance - "I don't want to do this"

Technology

  • SolidJS for reactive UI
  • Vite for fast development and builds
  • TypeScript for type safety
  • Super Productivity Plugin API
  • CSS Variables for theme integration

Development

The plugin consists of two parts:

  1. plugin.ts - Backend logic that communicates with Super Productivity
  2. SolidJS App - Frontend UI in iframe

Project Structure

procrastination-buster/
├── src/
│   ├── plugin.ts         # Plugin backend
│   ├── App.tsx          # Main component
│   ├── types.ts         # TypeScript definitions
│   ├── BlockerSelector.tsx
│   └── StrategyList.tsx
├── manifest.json        # Plugin metadata
├── index.html          # HTML entry
└── vite.config.ts      # Build configuration

Customization

Add New Strategies

Edit src/types.ts and add new strategies to the appropriate types.

Styling Customization

Edit src/App.css for visual adjustments. The plugin uses CSS variables for seamless theme integration:

  • --primary-color - Main theme color
  • --text-color - Primary text
  • --background-color - Background
  • --card-background - Card backgrounds
  • --border-radius - Standard radius
  • And many more...

License

MIT