feat(ui): GitHub-issue feedback icon + tour step#13
Conversation
New header affordance — a speech-bubble icon between the About link and the theme toggle. Clicking opens a pre-filled GitHub issue in a new tab, with the issue body templating: - current page URL ($page.url.href, reactive across navigation) - deploy build SHA from envBuildInfo / dataBuildInfo - browser user-agent Issues are auto-labelled `feedback` via the query-string. The body includes a three-question template (what were you doing / what happened / what did you expect) so reporters have a frame and maintainers have the minimum context to reproduce. Tour: added an eighth step on the home tour right after "About + methodology" that attaches to the icon and explains it. Detail / about tours don't need their own step — the icon's behaviour is identical across routes (just templates a different URL into the body). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a feedback mechanism by adding a GitHub issue link to the site header, complete with a reactive URL generator that pre-fills issue details such as the current page, build SHA, and user agent. Additionally, a new step has been added to the site tour to highlight this feature. Feedback suggests refactoring the URL construction logic into a dedicated utility for improved maintainability and utilizing SvelteKit's browser environment variable for more idiomatic client-side checks.
| $: feedbackUrl = (() => { | ||
| const sha = | ||
| envBuildInfo?.code_revision_short ?? | ||
| dataBuildInfo?.code_revision_short ?? | ||
| '(unknown)'; | ||
| const here = $page.url.href; | ||
| const ua = typeof navigator !== 'undefined' ? navigator.userAgent : ''; | ||
| const body = [ | ||
| '<!-- Replace this template with your bug report or feature request. -->', | ||
| '', | ||
| '## What were you doing?', | ||
| '', | ||
| '## What happened?', | ||
| '', | ||
| '## What did you expect?', | ||
| '', | ||
| '---', | ||
| '', | ||
| `- page: ${here}`, | ||
| `- build: \`${sha}\``, | ||
| `- user-agent: ${ua}` | ||
| ].join('\n'); | ||
| const params = new URLSearchParams({ | ||
| labels: 'feedback', | ||
| title: '[feedback] ', | ||
| body | ||
| }); | ||
| return `https://github.com/${FEEDBACK_REPO}/issues/new?${params.toString()}`; | ||
| })(); |
There was a problem hiding this comment.
The logic for constructing the GitHub issue URL is currently embedded directly within a reactive block in the layout. While functional, this logic is quite verbose and could be extracted into a dedicated helper function or a derived store in a separate utility file (e.g., $lib/feedback.ts). This would improve the maintainability and testability of the layout component, which already handles complex SPA redirect logic.
| dataBuildInfo?.code_revision_short ?? | ||
| '(unknown)'; | ||
| const here = $page.url.href; | ||
| const ua = typeof navigator !== 'undefined' ? navigator.userAgent : ''; |
There was a problem hiding this comment.
For SvelteKit applications, it is more idiomatic to use the browser boolean from $app/environment to guard client-side only globals like navigator. This ensures consistent behavior across SSR and hydration.
const ua = browser ? navigator.userAgent : '';
1 participant
Header gets a speech-bubble icon between About and the theme toggle. Clicking opens a pre-filled GitHub issue (page URL + deploy SHA + user-agent templated in). Issues land under the
feedbacklabel.Tour gets an eighth step on the home tour pointing at the icon.