Nikita onboarding flow #40
Conversation
…a-onboarding-flow
…-SAS/argo into nikita-onboarding-flow
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
![pr-agent-monadical[bot]](https://avatars.githubusercontent.com/u/29933591?s=60&v=4){kind=small}
| // @ts-expect-error | ||
| if (err?.message?.includes("already attached")) { | ||
| // Try to detach and delete the recorder | ||
| try { | ||
| chrome.debugger.detach({ tabId }, () => { | ||
| delete self.recorders[tabId]; | ||
| }); | ||
| } catch (detachErr) { | ||
| console.warn("Failed to detach debugger:", detachErr); | ||
| } | ||
| } |
There was a problem hiding this comment.
Suggestion: The error handling only cleans up when the error message includes "already attached", but other errors should also trigger cleanup to prevent resource leaks. The recorder should be deleted for any error during attachment. [possible issue, importance: 8]
| // @ts-expect-error | |
| if (err?.message?.includes("already attached")) { | |
| // Try to detach and delete the recorder | |
| try { | |
| chrome.debugger.detach({ tabId }, () => { | |
| delete self.recorders[tabId]; | |
| }); | |
| } catch (detachErr) { | |
| console.warn("Failed to detach debugger:", detachErr); | |
| } | |
| } | |
| // Clean up on error | |
| try { | |
| if (err?.message?.includes("already attached")) { | |
| // Try to detach the debugger first for "already attached" errors | |
| chrome.debugger.detach({ tabId }, () => { | |
| console.log("Detached debugger after 'already attached' error"); | |
| }); | |
| } | |
| // Delete the recorder for any error | |
| delete self.recorders[tabId]; | |
| } catch (detachErr) { | |
| console.warn("Failed to detach debugger:", detachErr); | |
| } |
| if (!this.showingSettings) { | ||
| // re-load the list from storage | ||
| // @ts-expect-error | ||
| this.skipDomains = await getLocalOption("skipDomains"); | ||
|
|
There was a problem hiding this comment.
Suggestion: The code doesn't check if getLocalOption("skipDomains") returns a valid array or string. This could lead to runtime errors if the returned value is null, undefined, or an unexpected type. Add proper type checking and conversion. [possible issue, importance: 9]
| if (!this.showingSettings) { | |
| // re-load the list from storage | |
| // @ts-expect-error | |
| this.skipDomains = await getLocalOption("skipDomains"); | |
| private async _toggleSettings() { | |
| this.showingSettings = !this.showingSettings; | |
| // when toggling *off* settings, reload skip-list and re-query | |
| if (!this.showingSettings) { | |
| // re-load the list from storage | |
| // @ts-expect-error | |
| const domains = await getLocalOption("skipDomains"); | |
| this.skipDomains = Array.isArray(domains) | |
| ? domains | |
| : typeof domains === "string" | |
| ? domains.split("\n").filter(Boolean) | |
| : []; | |
| // re-run your normal "update everything" flow | |
| this.updateTabInfo(); | |
| // wait for the archive list element to re-render | |
| await this.updateComplete; | |
| this.archiveList = this.shadowRoot!.getElementById( | |
| "archive-list", | |
| ) as ArgoArchiveList; | |
| } | |
| } |
- Encodes image as AVIF - Declare AVIF module properly
|
Almost completed some styling changes for this, simplified the transforms a bunch! Pls don't merge just yet will be done tomorrow. |
- Add opacity so all the cards aren't visible at all times
- Adds alt text for both
|
Okay! This is about where I'd like it for launch! Ready to merge from me :D Some screenshots of our new on-boarding illustrations, decided to stick with visual metaphors over screenshots because A: they're more fun, and B: I think our app is pretty simple? There's basically one button. I'm hoping people will get it based on context clues and UI copy alone. 
|
User description
PR Type
Enhancement, Bug fix
Description
Added onboarding flow with tutorial carousel
Fixed recording status updates in sidepanel
Improved debugger detachment handling
Added blocked domains status indicator
Changes walkthrough 📝
bg.ts
Improve recorder status handling and error recoverysrc/ext/bg.ts
globals.d.ts
Add image file type declarationssrc/globals.d.ts
onboarding.ts
Create onboarding tutorial carousel componentsrc/onboarding.ts
settings-page.ts
Add onboarding toggle in settingssrc/settings-page.ts
sidepanel.ts
Integrate onboarding and improve status indicatorssrc/sidepanel.ts