Browser Bookmarks Import Feature

[lokiwich]

Overview

Adds the ability to import bookmarks and folders from the browser's bookmarks into Widgetify. Users can select multiple items, with limits based on available slots, and import folder contents.

Features

1. Import Bookmark Modal (import-bookmark.modal.tsx)

• New modal for importing browser bookmarks
• Tree view of bookmarks and folders
• Multi-select with checkboxes
• Expandable folders
• Slot limit enforcement based on available space

2. Permission Handling

• Permission info modal (bookmark-permission-info.modal.tsx) with screenshot
• Direct display of permission modal when access is needed
• Automatic permission check on modal open
• Permission request flow after user confirmation

3. Import Functionality

• Multiple selection: select multiple bookmarks and folders
• Folder import options:
  • Import folder only (without contents)
  • Import folder with contents (bookmarks inside the folder)
• Slot limit validation:
  • Root level: based on available slots (10 total slots)
  • Folder level: based on new folder capacity (50 slots per folder)
• Batch import: all selected items imported in one operation

4. UI/UX Improvements

• Import button added to "Add Bookmark" modal
• When import button is clicked:
  • Add bookmark modal closes
  • Import modal opens
• Real-time slot counter showing selected items vs available slots
• Visual feedback for selected items
• Loading states during bookmark fetching

Technical Details

New Components

• import-bookmark.modal.tsx: Main import modal with tree view and selection
• bookmark-permission-info.modal.tsx: Permission explanation modal with screenshot

Modified Components

• add-bookmark.modal.tsx: Added import button, removed browser bookmark logic
• bookmarks.tsx: Added import modal state management and slot calculation

Key Functions

• toggleItemSelection: Handles bookmark/folder selection
• toggleImportChildren: Toggles folder content import with capacity validation
• getSelectedCount: Calculates total selected items including folder contents
• handleImport: Processes and imports all selected items

Validation & Limits

• Root level: Maximum 10 bookmarks (5 per row × 2 rows)
• Folder level: Maximum 50 bookmarks per folder
• Real-time validation prevents exceeding limits
• User-friendly error messages when limits are reached

User Flow

1. User clicks "Import from Browser Bookmarks" in Add Bookmark modal
2. Add Bookmark modal closes, Import modal opens
3. If permission not granted: Permission info modal shows with screenshot
4. User clicks "I understand" → Browser permission dialog appears
5. After permission granted: Browser bookmarks tree loads
6. User selects bookmarks/folders
7. For folders: User can toggle "With content" / "Without content"
8. Slot counter updates in real-time
9. User clicks "Add to Assistant" → All selected items imported
10. Success message shows number of imported items

Edge Cases Handled

• Permission denied: Graceful error handling
• Empty bookmarks: Shows appropriate message
• Folder with too many bookmarks: Prevents import with error message
• Exceeding slot limits: Prevents selection with error message
• Nested folders: Properly handles folder hierarchy

This feature enhances the bookmark management experience by allowing users to quickly import their existing browser bookmarks into Widgetify with a user-friendly interface and proper validation.