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:

// 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:

colors = ['#0ea5e9','#3b82f6','#22c55e',...]; // Add/remove colors

Change Menu Width

Edit the .ctx style:

.ctx {
  min-width: 14rem;  /* Change this value */
}

Change Animation Speed

Edit the animation:

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)