Conversation
…esh, tastatur-nav - useDebounce hook (300ms) på søk i operator/hendelser - EmptyState komponent med ikon og handling ved ingen resultater - React ErrorBoundary rundt hele appen for å fange komponent-krasj - Pull-to-refresh på forsiden (mobil) med visuell indikator - Tastaturnavigasjon (piltaster/Enter/Escape) i hendelseslisten - Myk tema-overgang (200ms) ved bytte mellom lyst/mørkt tema - SIKKERHET.md oppdatert med alle nye forbedringer https://claude.ai/code/session_01751H62CcNYsAXtyrLWzwnm
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds several user experience enhancements and utility components to the application, including error handling, loading states, and mobile interactions.
Changes:
- Adds React hooks for pull-to-refresh and debounced input handling
- Implements error boundary with user-friendly fallback UI
- Enhances operator dashboard with keyboard navigation, debounced search, and improved empty states
- Adds smooth theme transition animations
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/hooks/usePullToRefresh.ts | New hook for mobile pull-to-refresh gesture with visual feedback |
| src/hooks/useDebounce.ts | Generic debounce hook for delaying value updates |
| src/components/ui/ErrorBoundary.tsx | Error boundary component with Norwegian error messages and retry functionality |
| src/components/ui/EmptyState.tsx | Reusable empty state component with icons and optional actions |
| src/components/providers/ThemeProvider.tsx | Adds smooth transition effect when toggling themes |
| src/components/providers/ErrorBoundaryProvider.tsx | Wrapper provider for error boundary |
| src/app/page.tsx | Integrates pull-to-refresh on homepage |
| src/app/layout.tsx | Wraps app in error boundary provider |
| src/app/globals.css | Adds CSS for theme transition animations |
| src/app/(dashboard)/operator/hendelser/page.tsx | Adds debounced search, keyboard navigation, and empty states |
| SIKKERHET.md | Documents new features in security/feature log |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| /* Smooth theme transition */ | ||
| .theme-transitioning, | ||
| .theme-transitioning * { |
There was a problem hiding this comment.
Using the universal selector (*) with transitions can cause performance issues as it applies transitions to all descendant elements. Consider limiting transitions to specific theme-related properties or elements that actually need them, such as specific class names or using CSS variables for theme colors.
| .theme-transitioning * { | |
| .theme-transitioning .bg-theme, | |
| .theme-transitioning .bg-theme-card, | |
| .theme-transitioning .bg-theme-card-hover, | |
| .theme-transitioning .bg-theme-card-inner, | |
| .theme-transitioning .bg-theme-sidebar, | |
| .theme-transitioning .bg-theme-input, | |
| .theme-transitioning .border-theme, | |
| .theme-transitioning .border-theme-input, | |
| .theme-transitioning .text-theme, | |
| .theme-transitioning .text-theme-secondary, | |
| .theme-transitioning .text-theme-muted, | |
| .theme-transitioning .text-theme-dim, | |
| .theme-transitioning .bg-theme-overlay, | |
| .theme-transitioning .hover\:bg-theme-card-hover:hover, | |
| .theme-transitioning .hover\:text-theme:hover, | |
| .theme-transitioning .bg-theme\/95, | |
| .theme-transitioning .divide-theme > :not([hidden]) ~ :not([hidden]) { |
| // Add transition class for smooth color change, remove after transition | ||
| document.documentElement.classList.add('theme-transitioning') | ||
| setTheme(prev => prev === 'dark' ? 'light' : 'dark') | ||
| setTimeout(() => document.documentElement.classList.remove('theme-transitioning'), 250) |
There was a problem hiding this comment.
The timeout duration (250ms) doesn't match the CSS transition duration (200ms) specified in globals.css line 65. These values should be synchronized to prevent the class from being removed too early or too late. Consider using a constant or ensuring both values are 200ms.
| setExpandedId(null) | ||
| } | ||
| }} | ||
| tabIndex={0} |
There was a problem hiding this comment.
Adding tabIndex={0} to a div makes it keyboard focusable but doesn't provide adequate context for screen reader users. Consider adding an aria-label or aria-labelledby attribute to describe what this interactive list represents, such as 'Hendelsesliste' or 'Liste over hendelser'.
No description provided.