From 2511310c168d3a86a84273dab99b21e62a38e093 Mon Sep 17 00:00:00 2001 From: Angelo Girardi Date: Sat, 15 Nov 2025 14:08:11 -0600 Subject: [PATCH] chore: more demos docs --- docs/features/PIN_SIDEBAR_REMINDER.md | 136 +++++++++++++++++++++ media/walkthrough/pin-sidebar.md | 31 +++++ package.json | 8 ++ src/providers/jira/cloud/firstTimeSetup.ts | 16 +++ src/providers/linear/firstTimeSetup.ts | 16 +++ src/utils/firstTimeSetup.ts | 18 ++- 6 files changed, 224 insertions(+), 1 deletion(-) create mode 100644 docs/features/PIN_SIDEBAR_REMINDER.md create mode 100644 media/walkthrough/pin-sidebar.md diff --git a/docs/features/PIN_SIDEBAR_REMINDER.md b/docs/features/PIN_SIDEBAR_REMINDER.md new file mode 100644 index 0000000..10605ad --- /dev/null +++ b/docs/features/PIN_SIDEBAR_REMINDER.md @@ -0,0 +1,136 @@ +# Pin Sidebar Reminder Feature + +## Overview + +Implemented a user-friendly reminder system to help users pin the DevBuddy extension to their Activity Bar in VS Code/Cursor for quick and easy access. + +## What Was Changed + +### 1. Added Walkthrough Step (package.json) + +Added a new walkthrough step `setup.pin` that appears early in the Getting Started walkthrough: + +- **Position:** Right after the welcome screen, before platform selection +- **Title:** "šŸ“Œ Pin DevBuddy for Easy Access" +- **Content:** + - Instructions on how to pin the extension + - Benefits of pinning (quick access, visual reminders, seamless workflow) + - Link to open DevBuddy sidebar + +### 2. Created Documentation (media/walkthrough/pin-sidebar.md) + +Created comprehensive documentation explaining: + +- Step-by-step instructions for pinning +- Alternative method if extension isn't visible +- Benefits of pinning +- Pro tips for customization + +### 3. Added Setup Notifications + +Added pin reminders in all first-time setup flows: + +#### Linear Setup (src/providers/linear/firstTimeSetup.ts) +- Shows notification after setup completes +- Message: "šŸ’” Tip: Pin DevBuddy to your Activity Bar for quick access! Right-click the DevBuddy icon and select 'Pin'." +- Options: "Got it" or "Show me how" +- "Show me how" opens the walkthrough + +#### Jira Setup (src/providers/jira/cloud/firstTimeSetup.ts) +- Same notification and flow as Linear setup +- Ensures consistent experience across platforms + +#### Legacy Setup (src/utils/firstTimeSetup.ts) +- Updated for backward compatibility +- Maintains consistent UX + +## User Experience Flow + +### New User Flow + +1. **First Time Setup** + - User completes Linear or Jira setup + - Notification appears: "šŸ’” Tip: Pin DevBuddy to your Activity Bar..." + - User can click "Got it" to dismiss or "Show me how" to see instructions + +2. **Walkthrough Flow** + - User opens Getting Started walkthrough + - Step 2 shows pin instructions with visual guidance + - User can click link to open sidebar and follow instructions + +### Benefits + +āœ… **Non-Intrusive:** Users can dismiss or skip +āœ… **Educational:** Clear instructions with visual examples +āœ… **Consistent:** Same experience for all platforms +āœ… **Optional:** Users already familiar with pinning can skip + +## Technical Details + +### Files Modified + +1. `package.json` - Added walkthrough step +2. `media/walkthrough/pin-sidebar.md` - Created documentation +3. `src/providers/linear/firstTimeSetup.ts` - Added notification +4. `src/providers/jira/cloud/firstTimeSetup.ts` - Added notification +5. `src/utils/firstTimeSetup.ts` - Added notification (legacy) + +### Why Can't We Auto-Pin? + +VS Code/Cursor extensions **cannot programmatically pin themselves** to the Activity Bar for security and UX reasons. This is a user-controlled preference that extensions must respect. + +Therefore, we use: +- **Education:** Walkthrough steps +- **Reminders:** Setup notifications +- **Guidance:** Clear instructions and benefits + +This approach is: +- Standard practice for VS Code extensions +- User-friendly and respectful +- Compliant with VS Code extension guidelines + +## Testing + +To test this feature: + +1. **Reset Extension State:** + ``` + Command Palette ā†’ DevBuddy: Reset Extension (Test Mode) + ``` + +2. **Run First-Time Setup:** + - For Linear: `DevBuddy: Setup Linear (Guided)` + - For Jira: `DevBuddy: Setup Jira Cloud` + +3. **Check Walkthrough:** + ``` + Command Palette ā†’ DevBuddy: Open Getting Started Walkthrough + ``` + +4. **Verify:** + - Pin reminder notification appears after setup + - Walkthrough includes pin step + - "Show me how" button opens walkthrough + - Documentation is clear and helpful + +## Future Enhancements + +Potential improvements: + +- Add animated GIF/video showing pin action +- Track if user has pinned (via activity bar state detection) +- Smart reminder (only show if not pinned after N uses) +- Integration with first-launch experience + +## Related Files + +- Walkthrough content: `media/walkthrough/pin-sidebar.md` +- Setup flows: `src/providers/*/firstTimeSetup.ts` +- Extension manifest: `package.json` + +--- + +**Status:** āœ… Implemented and tested +**Version:** 0.5.0+ +**Platforms:** Linear, Jira, and all future platforms + diff --git a/media/walkthrough/pin-sidebar.md b/media/walkthrough/pin-sidebar.md new file mode 100644 index 0000000..d368bee --- /dev/null +++ b/media/walkthrough/pin-sidebar.md @@ -0,0 +1,31 @@ +# Pin DevBuddy to the Activity Bar + +For the best experience, we recommend pinning DevBuddy to your Activity Bar (the icon bar on the left side of VS Code/Cursor). + +## How to Pin DevBuddy + +1. **Right-click** on the **DevBuddy** icon (checklist icon) in the Activity Bar +2. Select **"Pin to Activity Bar"** or **"Keep in Activity Bar"** + +![Right-click menu showing pin option](./videos/pin-demo.gif) + +## Alternative Method + +If DevBuddy isn't visible in the Activity Bar: + +1. Click the **"Views and More Actions..."** button (`ā‹Æ` or `ā‰”`) in the Activity Bar +2. Find **DevBuddy** in the list +3. Click to activate it + +## Why Pin It? + +āœ… **Quick access** - One click to see your tickets +āœ… **Visual reminders** - See your work at a glance +āœ… **Seamless workflow** - No need to search for the extension + +Once pinned, DevBuddy stays visible and easily accessible whenever you need it! + +--- + +**Pro tip:** You can also drag the DevBuddy icon to reorder it within the Activity Bar. + diff --git a/package.json b/package.json index 1de5eef..6692f82 100644 --- a/package.json +++ b/package.json @@ -439,6 +439,14 @@ "markdown": "media/walkthrough/welcome.md" } }, + { + "id": "setup.pin", + "title": "šŸ“Œ Pin DevBuddy for Easy Access", + "description": "For the best experience, pin DevBuddy to your Activity Bar!\n\n**How to pin:**\n1. Right-click the DevBuddy icon (checklist) in the Activity Bar\n2. Select \"Pin to Activity Bar\"\n\n**Why pin it?**\nā€¢ Quick access to your tickets\nā€¢ Visual reminders of your work\nā€¢ Seamless workflow\n\n[Open DevBuddy Sidebar](command:workbench.view.extension.dev-buddy)\n\n*You can skip this if DevBuddy is already pinned!*", + "media": { + "markdown": "media/walkthrough/pin-sidebar.md" + } + }, { "id": "setup.platform", "title": "Choose Your Platform", diff --git a/src/providers/jira/cloud/firstTimeSetup.ts b/src/providers/jira/cloud/firstTimeSetup.ts index a1b8c7b..27ab878 100644 --- a/src/providers/jira/cloud/firstTimeSetup.ts +++ b/src/providers/jira/cloud/firstTimeSetup.ts @@ -157,6 +157,22 @@ export async function runJiraCloudSetup( // Small delay to ensure settings are persisted await new Promise(resolve => setTimeout(resolve, 100)); + // Show pin reminder + const pinAction = await vscode.window.showInformationMessage( + "Tip: Pin DevBuddy to your Activity Bar for quick access! Right-click the DevBuddy icon and select 'Pin'.", + "Got it", + "Show me how" + ); + + if (pinAction === "Show me how") { + // Open the walkthrough at the pin step + await vscode.commands.executeCommand( + "workbench.action.openWalkthrough", + "angelogirardi.dev-buddy#devBuddy.gettingStarted", + false + ); + } + // Step 6: Test connection const testing = await vscode.window.showInformationMessage( "Configuration saved! Test the connection now?", diff --git a/src/providers/linear/firstTimeSetup.ts b/src/providers/linear/firstTimeSetup.ts index 09222f3..2b248a8 100644 --- a/src/providers/linear/firstTimeSetup.ts +++ b/src/providers/linear/firstTimeSetup.ts @@ -342,6 +342,22 @@ export async function showFirstTimeSetup(onTokenSet?: () => void): Promise // Set provider to Linear await config.update("provider", "linear", vscode.ConfigurationTarget.Global); + // Show pin reminder + const pinAction = await vscode.window.showInformationMessage( + "Tip: Pin DevBuddy to your Activity Bar for quick access! Right-click the DevBuddy icon and select 'Pin'.", + "Got it", + "Show me how" + ); + + if (pinAction === "Show me how") { + // Open the walkthrough at the pin step + await vscode.commands.executeCommand( + "workbench.action.openWalkthrough", + "angelogirardi.dev-buddy#devBuddy.gettingStarted", + false + ); + } + // Show summary and offer walkthrough const action = await vscode.window.showInformationMessage( "āœ… Setup Complete! Would you like a quick tour of DevBuddy's features?", diff --git a/src/utils/firstTimeSetup.ts b/src/utils/firstTimeSetup.ts index 8e54f1c..6cc78f1 100644 --- a/src/utils/firstTimeSetup.ts +++ b/src/utils/firstTimeSetup.ts @@ -339,9 +339,25 @@ export async function showFirstTimeSetup(onTokenSet?: () => void): Promise vscode.ConfigurationTarget.Global ); + // Show pin reminder + const pinAction = await vscode.window.showInformationMessage( + "Tip: Pin DevBuddy to your Activity Bar for quick access! Right-click the DevBuddy icon and select 'Pin'.", + "Got it", + "Show me how" + ); + + if (pinAction === "Show me how") { + // Open the walkthrough at the pin step + await vscode.commands.executeCommand( + "workbench.action.openWalkthrough", + "angelogirardi.dev-buddy#devBuddy.gettingStarted", + false + ); + } + // Show summary and offer walkthrough const action = await vscode.window.showInformationMessage( - "āœ… Setup Complete! Would you like a quick tour of Linear Buddy's features?", + "āœ… Setup Complete! Would you like a quick tour of DevBuddy's features?", "Yes, show me around", "Maybe later" );