ObsiViewer/docs/CONTEXT_MENU_QUICK_START.md

# Context Menu - Quick Start Guide

## 🚀 5-Minute Setup

### 1. Files Created
Two new files have been created:
- ✅ `src/components/context-menu/context-menu.component.ts` - Standalone menu component
- ✅ Enhanced `src/components/file-explorer/file-explorer.component.ts` - With menu integration

### 2. What's Already Done
- ✅ Context menu component fully implemented
- ✅ Integrated into file-explorer
- ✅ All 7 actions defined (with TODO placeholders for VaultService calls)
- ✅ 8-color palette with localStorage persistence
- ✅ Folder icon color changes based on selection
- ✅ Smooth animations and adaptive positioning
- ✅ ESC key and click-outside close handlers

### 3. How to Use

#### Right-Click on a Folder
1. Navigate to the Folders section in the sidebar
2. Right-click on any folder
3. The context menu appears at your cursor

#### Available Actions
| Action | Description |
|--------|-------------|
| 📁 Create subfolder | Create a new folder inside the selected folder |
| ✏️ Rename | Rename the selected folder |
| 📋 Duplicate | Create a copy of the folder |
| 📄 Create new page | Create a new markdown file in the folder |
| 🔗 Copy internal link | Copy `[[path/to/folder]]` to clipboard |
| 🗑️ Delete folder | Delete the folder (with confirmation) |
| ⚠️ Delete all pages | Delete all pages in the folder (with confirmation) |

#### Color Palette
Click any of the 8 colored circles to change the folder icon color:
- 🔵 Sky Blue, Blue, Green, Yellow
- 🟠 Orange, Red, Purple, Gray

Colors are saved automatically and persist across sessions.

### 4. Current State

**Implemented & Working:**
- ✅ Menu UI and animations
- ✅ Position calculation and viewport adaptation
- ✅ Color selection and persistence
- ✅ Copy internal link (fully functional)
- ✅ Confirmation dialogs for delete operations

**TODO - Needs VaultService Integration:**
- ⏳ Create subfolder
- ⏳ Rename folder
- ⏳ Duplicate folder
- ⏳ Create new page
- ⏳ Delete folder
- ⏳ Delete all pages

### 5. Next Steps

To complete the implementation, you need to connect the actions to VaultService:

```typescript
// In file-explorer.component.ts

private createSubfolder() {
  const name = prompt('Enter subfolder name:');
  if (!name) return;
  // ADD THIS:
  this.vaultService.createFolder(this.ctxTarget!.path, name);
}

private renameFolder() {
  const newName = prompt('Enter new folder name:', this.ctxTarget!.name);
  if (!newName || newName === this.ctxTarget!.name) return;
  // ADD THIS:
  this.vaultService.renameFolder(this.ctxTarget!.path, newName);
}

// ... and so on for other actions
```

### 6. Testing

**Manual Testing:**
1. Build the project: `npm run build`
2. Start the dev server: `npm run dev`
3. Navigate to Folders in sidebar
4. Right-click on any folder
5. Verify menu appears and all features work

**Test Checklist:**
- [ ] Menu appears on right-click
- [ ] Menu closes on ESC
- [ ] Menu closes on click outside
- [ ] Color selection works
- [ ] Color persists after reload
- [ ] Copy link works (check clipboard)
- [ ] Delete confirmations appear

### 7. Customization

#### Change Color Palette
Edit `context-menu.component.ts`:
```typescript
colors = ['#0ea5e9','#3b82f6','#22c55e',...]; // Add/remove colors
```

#### Change Menu Width
Edit the `.ctx` style:
```css
.ctx {
  min-width: 14rem;  /* Change this value */
}
```

#### Change Animation Speed
Edit the animation:
```css
animation: fadeIn .12s ease-out;  /* Change .12s to desired duration */
```

### 8. Browser Support

- ✅ Chrome/Edge 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)

### 9. Keyboard Shortcuts

| Key | Action |
|-----|--------|
| ESC | Close menu |
| Right-click | Open menu |

### 10. Troubleshooting

**Menu doesn't appear?**
- Check if right-click is working (not disabled by CSS)
- Verify folder item has `(contextmenu)="openContextMenu($event, folder)"`

**Colors not saving?**
- Check if localStorage is enabled
- Open DevTools → Application → Local Storage → look for `folderColors`

**Copy link not working?**
- Check browser console for errors
- Verify clipboard permissions are granted
- Try in a different browser

### 11. File Locations

```
src/
├── components/
│   ├── context-menu/
│   │   └── context-menu.component.ts       ← Menu component
│   └── file-explorer/
│       ├── file-explorer.component.ts      ← Integration point
│       └── file-explorer.component.html
docs/
├── CONTEXT_MENU_IMPLEMENTATION.md          ← Full documentation
└── CONTEXT_MENU_QUICK_START.md             ← This file
```

### 12. Performance Notes

- Menu uses `ChangeDetectionStrategy.OnPush` for optimal performance
- Signals-based state management (no unnecessary change detection)
- Efficient color storage using Map + localStorage
- Minimal DOM footprint (only visible when needed)

### 13. Accessibility

- ✅ Keyboard support (ESC to close)
- ✅ ARIA labels on color circles
- ✅ Semantic HTML (role="button", role="menu")
- ✅ High contrast colors
- ✅ Touch-friendly on mobile

### 14. Known Limitations

- Actions are currently placeholders (need VaultService implementation)
- No keyboard navigation (arrow keys) yet
- No submenu support
- No drag & drop integration

### 15. Getting Help

For detailed information, see:
- `docs/CONTEXT_MENU_IMPLEMENTATION.md` - Full technical documentation
- `src/components/context-menu/context-menu.component.ts` - Source code
- `src/components/file-explorer/file-explorer.component.ts` - Integration code

---

**Status**: ✅ UI Complete, ⏳ Actions Pending VaultService Integration  
**Effort to Complete**: ~2-3 hours (VaultService integration)  
**Difficulty**: Easy (straightforward method calls)