emergency fix - #20
Conversation
…s and improve synchronization
…rate graph hover functionality
There was a problem hiding this comment.
Pull request overview
This pull request appears to be mislabeled as an "emergency fix" for default user and allowed_hosts settings, but the actual changes show extensive UI/UX improvements and feature additions. The PR description does not accurately reflect the changes made.
Key Changes:
- Enhanced interactive graph hover behavior with SVG coordinate space transformation for better accuracy
- Added URL hash-based tab navigation with bidirectional synchronization
- Improved visual styling for grade badges and UI elements
- Added keyboard accessibility support for deep stats score cards
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| nuxt.config.ts | Changed favicon from PNG to ICO format |
| app/app.vue | Major updates including SVG coordinate transformation for graph interactions, URL hash-based tab navigation, visual refinements to grade badges and timeline markers, and keyboard accessibility improvements for score cards |
| .github/PULL_REQUEST_TEMPLATE.md | Added typecheck step to PR testing checklist |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| badge.tone === 'badge-a' ? 'border border-white/50 text-white' : '', | ||
| badge.tone === 'badge-s' ? '' : '', | ||
| badge.tone === 'badge-ss' ? '' : '', | ||
| :class="[ |
There was a problem hiding this comment.
Inconsistent indentation. This line has excessive leading whitespace compared to the surrounding code. The :class attribute should align with the other attributes or follow the project's indentation standard.
| const pt = (svg.createSVGPoint ? svg.createSVGPoint() : (new DOMPoint() as any)) as any | ||
| pt.x = event.clientX | ||
| pt.y = event.clientY | ||
| const ctm = svg.getScreenCTM() | ||
| if (ctm) { | ||
| const inv = ctm.inverse() | ||
| const transformed = pt.matrixTransform(inv) | ||
| targetX = transformed.x | ||
| } else { | ||
| // fallback to bounding rect ratio |
There was a problem hiding this comment.
Multiple type assertions to 'any' are used here which bypasses TypeScript's type safety. The code attempts to support both deprecated SVG method (createSVGPoint) and the modern DOMPoint API, but the excessive use of 'as any' makes it harder to catch type errors. Consider defining a proper type for the point object or using conditional type checks to handle the different APIs more safely.
| const pt = (svg.createSVGPoint ? svg.createSVGPoint() : (new DOMPoint() as any)) as any | |
| pt.x = event.clientX | |
| pt.y = event.clientY | |
| const ctm = svg.getScreenCTM() | |
| if (ctm) { | |
| const inv = ctm.inverse() | |
| const transformed = pt.matrixTransform(inv) | |
| targetX = transformed.x | |
| } else { | |
| // fallback to bounding rect ratio | |
| type MatrixLike = { inverse(): MatrixLike } | |
| type SvgPointLike = { | |
| x: number | |
| y: number | |
| matrixTransform(matrix: MatrixLike): { x: number; y: number } | |
| } | |
| const svgElement = svg as SVGSVGElement & { | |
| createSVGPoint?: () => SvgPointLike | |
| } | |
| let pt: SvgPointLike | null = null | |
| if (typeof svgElement.createSVGPoint === 'function') { | |
| pt = svgElement.createSVGPoint() | |
| } else if (typeof DOMPoint !== 'undefined') { | |
| pt = new DOMPoint() as unknown as SvgPointLike | |
| } | |
| if (pt) { | |
| pt.x = event.clientX | |
| pt.y = event.clientY | |
| const ctm = svg.getScreenCTM() | |
| if (ctm) { | |
| const inv = (ctm as unknown as MatrixLike).inverse() | |
| const transformed = pt.matrixTransform(inv) | |
| targetX = transformed.x | |
| } else { | |
| // fallback to bounding rect ratio | |
| const rect = svg.getBoundingClientRect() | |
| const xPx = Math.min(Math.max(event.clientX - rect.left, 0), rect.width) | |
| const xRatio = rect.width ? xPx / rect.width : 0 | |
| targetX = xRatio * meta.width | |
| } | |
| } else { | |
| // If no suitable point implementation is available, fall back to bounding rect ratio |
| // fallback to bounding rect ratio | ||
| const rect = svg.getBoundingClientRect() | ||
| const xPx = Math.min(Math.max(event.clientX - rect.left, 0), rect.width) | ||
| const xRatio = rect.width ? xPx / rect.width : 0 | ||
| targetX = xRatio * meta.width | ||
| } | ||
| } catch (e) { | ||
| const rect = svg.getBoundingClientRect() | ||
| const xPx = Math.min(Math.max(event.clientX - rect.left, 0), rect.width) | ||
| const xRatio = rect.width ? xPx / rect.width : 0 | ||
| targetX = xRatio * meta.width | ||
| } | ||
| } else { | ||
| const rect = (event.currentTarget as HTMLElement).getBoundingClientRect() | ||
| const xPx = Math.min(Math.max(event.clientX - rect.left, 0), rect.width) | ||
| const xRatio = rect.width ? xPx / rect.width : 0 | ||
| targetX = xRatio * meta.width | ||
| } |
There was a problem hiding this comment.
Duplicated fallback logic. The same bounding rect calculation code appears in three places (lines 662-665, 668-671, and 674-677). Consider extracting this into a helper function to reduce code duplication and improve maintainability.
|
|
||
| <div class="flex flex-row flex-wrap gap-2"> | ||
| <div | ||
| <div |
There was a problem hiding this comment.
Inconsistent indentation. This line has excessive leading whitespace (appears to be 14 spaces) compared to the surrounding code which uses proper indentation. The opening div tag should be aligned with the surrounding elements at the same nesting level.
Summary
makes chlokun not the default user
fixes allowed_hosts
Why
Why is this change needed?
because i tend to be dumb
Testing
npm run buildSecurity / privacy
Notes
it was an honest mistake