Skip to content

feat(help): add Getting started tutorial card to Help section#3925

Merged
louis030195 merged 1 commit into
mainfrom
feat/help-getting-started-card
Jun 9, 2026
Merged

feat(help): add Getting started tutorial card to Help section#3925
louis030195 merged 1 commit into
mainfrom
feat/help-getting-started-card

Conversation

@louis030195

Copy link
Copy Markdown
Collaborator

what

Adds a featured Getting started card at the top of the Help section that opens the complete screenpipe tutorial (youtu.be/OLUMknhvxWY). It sits above the existing resource links (Send logs, Documentation, Video tutorials, etc.).

why

New users had no obvious in-app entry point to learn the app. Good practice is to keep a long tutorial out of the activation path but one click away in a discoverable "getting started" spot. The Help section is that spot. The full video also has YouTube chapters, so a follow-up can deep-link specific chapters from empty states.

how it shows up

where it is (top of Help, above the existing links):

placement

the card, default and hover:

card states

implementation

  • one file changed: components/settings/feedback-section.tsx
  • reuses the existing Help card design system (sharp corners, border/foreground tokens, lucide Play)
  • bundles a small poster at public/tutorial-thumbnail.jpg (~23 KB)
  • click opens the video via the existing @tauri-apps/plugin-shell open()

testing

  • bun run typecheck passes with no new errors
  • the images above are HTML renders of the exact markup and classes (the tauri app is not built in this worktree), using the real bundled poster

follow-ups (not in this PR)

  • contextual chapter deep-links from empty states (timeline ?t=100, pipes ?t=282, connections ?t=426, meetings ?t=497)
  • optional dismissible "watch the tour" card on first run

Note: the preview images are hosted on the pr-media-help-getting-started branch and are not part of this PR; that branch can be deleted after review.

🤖 Generated with Claude Code

Surfaces the complete screenpipe tutorial as a featured card at the top of
the Help section (above the existing resource links), so new users have an
obvious entry point to learn the app. Opens https://youtu.be/OLUMknhvxWY.

Reuses the existing card design system (sharp corners, border/foreground
tokens, lucide Play icon) and bundles a small poster at
public/tutorial-thumbnail.jpg.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@louis030195 louis030195 merged commit dae6351 into main Jun 9, 2026
17 of 18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant