experiments in a post-browser web
feat(extension): add popup command bar feedback, sync status, and config commands
Enhances the browser extension popup with:
- Success/error feedback for all commands (green checkmark or red X)
- Sync status bar showing last sync time, pending count, manual sync button
- New commands: server, key, sync for managing sync configuration
Commands:
- tag <tags>: Tag current URL with comma-separated tags
- note <text>: Save text note attached to current page
- search <query>: Search saved items
- server [url]: Show or set sync server URL
- key [apikey]: Show (masked) or set API key
- sync: Trigger sync, shows pull/push counts
UI auto-closes after success (600ms), stays open on error.
+38
-2
+19
DEVELOPMENT.md
+19
DEVELOPMENT.md
···
504
504
yarn test:extension # Run unit tests (node --test)
505
505
```
506
506
507
+
### Popup Commands
508
+
509
+
The popup (Alt+P) provides a command bar for quick actions. Commands show feedback before auto-closing.
510
+
511
+
| Command | With args | Without args |
512
+
|---------|-----------|--------------|
513
+
| `tag <tags>` | Tags current URL with comma-separated tags | — |
514
+
| `note <text>` | Saves text note attached to current page | — |
515
+
| `search <query>` | Searches saved items (results in console) | — |
516
+
| `server <url>` | Sets sync server URL (auto-adds https://) | Shows current server |
517
+
| `key <apikey>` | Sets API key for sync | Shows masked key (••••ab12) |
518
+
| `sync` | Triggers sync, shows "↓3 ↑2" (pulled/pushed) | — |
519
+
520
+
**UI features:**
521
+
- Tab-completion for command names
522
+
- Status bar shows sync state, pending item count, manual sync button
523
+
- Success: green checkmark + message, auto-closes after 600ms
524
+
- Error: red X + message, stays open
525
+
507
526
### Browser Data Import
508
527
509
528
Three sync modules import browser data as Peek URL items. All are one-way (browser → Peek), behind toggles in the options page Test Features section, and tag items with their source.
+19
-2
backend/extension/popup.js
+19
-2
backend/extension/popup.js
···
1
1
/**
2
2
* Peek Browser Extension - Command Bar Popup
3
-
* Simple command bar: tag, note, search
4
-
* Shows success/error feedback before closing
3
+
*
4
+
* A minimal command bar for quick actions. Shows success/error feedback
5
+
* before auto-closing. Includes sync status bar at bottom.
6
+
*
7
+
* Commands:
8
+
* tag <tags> - Tag current URL with comma-separated tags
9
+
* note <text> - Save a text note (attached to current page as metadata)
10
+
* search <query> - Search saved items (results logged to console)
11
+
* server - Show current sync server URL
12
+
* server <url> - Set sync server URL (auto-adds https://)
13
+
* key - Show masked API key (last 4 chars visible)
14
+
* key <apikey> - Set API key for sync
15
+
* sync - Trigger sync, shows pull/push counts (e.g., "↓3 ↑2")
16
+
*
17
+
* UI:
18
+
* - Command input with tab-completion for command names
19
+
* - Feedback area replaces input on success/error
20
+
* - Status bar shows sync state, pending count, manual sync button
21
+
* - Escape closes popup, Enter executes command
5
22
*/
6
23
7
24
const COMMANDS = ['tag', 'note', 'search', 'server', 'key', 'sync'];