RepoPin 📌

Organize your workspace with color-coded sections and quick access to your most important files and folders.

A VS Code extension that helps you pin and organize files and folders into customizable sections. Perfect for large projects where you need quick access to frequently used files.

✨ Features

• Color-Coded Sections - Organize pins with 10 vibrant colors
• Pin Files & Folders - Right-click any item in File Explorer to pin it
• Smart Folder Browsing - Expand pinned folders to see all nested contents
• Split Mode - Work with 2-3 sections in vertical split panes
• Import/Export - Backup and restore pins as JSON files
• Auto-Refresh - Clean up deleted or moved files automatically
• Persistent Storage - Pins saved per repository/workspace

📖 Getting Started

Installation

1. Open VS Code
2. Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
3. Search for "RepoPin"
4. Click Install

Quick Start

1. Click the 📌 pin icon in the activity bar
2. Click the + button to create your first section
3. Pin Items: Right-click on any file or folder in the File Explorer and select "Add to RepoPin"
4. Organize: Create multiple sections with different colors
5. Access: Click on any pinned file to open it instantly

🎨 Creating Sections

Color-Coded Organization

Choose from 10 vibrant colors for your sections:

• 🔴 Red - Frontend/UI components
• 🟠 Orange - Backend/API files
• 🟡 Yellow - Configuration files
• 🟢 Green - Database/Models
• 🔵 Blue - Documentation
• 🟣 Purple - Testing files
• 🟤 Brown - Assets/Resources
• ⚫ Gray - Utilities/Helpers
• 🟣 Pink - Styling/CSS
• 🔵 Cyan - Scripts/Tools

Section Management

• Create: Click + button, enter name, choose color
• Delete: Hover over section, click ❌ icon
• Collapse/Expand: Click the arrow next to section name

🖥️ Split Mode

Work with multiple sections simultaneously:

Enable Split Mode

1. Click the ⊟ button at the top of RepoPin
2. Select 2-3 sections from the list
3. Vertical panes will open on the right
4. Files from each section open in their dedicated pane

Visual Indicators

• Status bar shows active pane's section with colored emoji
• Section names appear in the status bar
• Color-coded for easy identification

Disable Split Mode

• Click ⊟ button again
• Select 0-1 sections to disable
• All files return to normal tabs

💾 Import & Export

Backup and share your pin configurations:

1. Click the save icon (💾) at the top of RepoPin
2. Choose an action:
   • 📤 Export Pins: Save pins to a JSON file for backup
   • ↩️ Import Pins: Load pins from a JSON file

Export Process:

• Choose a location to save repo-pins.json
• Your entire pin configuration is saved

Import Process:

• Select a repo-pins.json file
• Choose to Replace all pins or Merge with existing ones
• Replace: Completely replaces your current pins
• Merge: Combines imported pins with existing ones (smart deduplication)

🔄 Auto-Refresh

Keep your pins clean and up-to-date:

1. Click the refresh icon (🔄) at the top of RepoPin
2. Automatic cleanup:
   • Scans all pinned files and folders
   • Removes items that were deleted or moved
   • Shows count of cleaned items
   • Updates the tree view instantly

When to use:

• After major code refactoring
• When files are moved or deleted
• After importing pins from another machine
• Regular workspace maintenance

🎯 Use Cases

Frontend Development

🔴 Components
├── Header.tsx
├── Footer.tsx
└── Navigation.tsx

🟢 Pages  
├── Home.tsx
├── About.tsx
└── Contact.tsx

Backend Development

🔵 API Routes
├── users.js
├── products.js
└── orders.js

🟠 Database
├── models/
└── migrations/

Full-Stack Projects

🔴 Frontend
├── src/components/
├── src/pages/
└── src/styles/

🟢 Backend
├── api/
├── models/
└── routes/

🔵 Config
├── package.json
├── .env
└── docker-compose.yml

🎨 Visual Examples

Tree View

📌 RepoPin
├── 🔴 Frontend
│   ├── 📄 App.tsx
│   ├── 📄 Header.tsx
│   └── 📁 components/
│       ├── 📄 Button.tsx
│       └── 📄 Modal.tsx
├── 🟢 Backend
│   ├── 📄 server.js
│   └── 📁 routes/
└── 🔵 Config
    ├── 📄 package.json
    └── 📄 .env

Split Mode

┌─ RepoPin ─┬─ Frontend ─┬─ Backend ─┐
│ 🔴 App.tsx │ 🟢 server.js │
│ 🔴 Header  │ 🟢 routes/   │
└────────────┴─────────────┴──────────┘

🚀 Tips & Tricks

Organization Strategies

• By Feature: Group related files together
• By Type: Separate components, pages, utilities
• By Priority: Most-used files at the top
• By Team: Different sections for different developers

Productivity Tips

• Use Split Mode for comparing files
• Color-code by project phase (dev, staging, prod)
• Export/Import to share setups with team
• Refresh regularly to keep pins clean

RepoPin - Organize your workspace, boost your productivity! 🚀