fix: mobile UI — hamburger onClick, right-tab-bar, drawer content, topbar buttons
- Topbar: hamburger button opens left drawer (was no onClick) - Topbar: project name navigates back to dashboard - Topbar: Versionen/Teilen/Hilfe/Benachrichtigungen get placeholder handlers - App.tsx: render right-tab-bar with 4 tab buttons (tool/layer/library/ki) - App.tsx: pass LeftSidebar as leftContent to MobileDrawers - App.tsx: pass RightSidebar as rightContent to MobileDrawers - MobileDrawers: accept leftContent/rightContent ReactNode props - MobileDrawers: render sidebar content in drawer bodies (was empty) - ui.types.ts: add onOpenLeftDrawer, onNavigateBack to TopbarProps - ui.types.ts: add leftContent, rightContent to MobileDrawersProps Test: 343/343 pass, tsc clean, build succeeds
This commit is contained in:
@@ -0,0 +1,56 @@
|
||||
# Test Report — Mobile UI Fix
|
||||
|
||||
**Task:** Fix Mobile UI — Sidebars, Drawers, Tab-Bar, Button Handlers
|
||||
**Date:** 2026-06-28
|
||||
|
||||
## Changes Summary
|
||||
|
||||
### Files Modified
|
||||
1. `src/types/ui.types.ts` — Added `onOpenLeftDrawer` and `onNavigateBack` to `TopbarProps`; added `leftContent` and `rightContent` to `MobileDrawersProps`
|
||||
2. `src/components/Topbar.tsx` — Added `onOpenLeftDrawer` and `onNavigateBack` to destructuring; wired `onClick` on hamburger button (→ `onOpenLeftDrawer`), project name button (→ `onNavigateBack`), Versionen/Teilen/Hilfe/Benachrichtigungen buttons (→ `console.log` placeholders)
|
||||
3. `src/components/MobileDrawers.tsx` — Added `leftContent`/`rightContent` to destructuring; rendered `{leftContent}` and `{rightContent}` in drawer bodies replacing empty comments
|
||||
4. `src/App.tsx` — Added `rightTabItems` constant array; passed `onOpenLeftDrawer` and `onNavigateBack` props to Topbar; rendered `<div className="right-tab-bar">` between StatusBar and MobileDrawers; passed `LeftSidebar` as `leftContent` and `RightSidebar` as `rightContent` to MobileDrawers
|
||||
|
||||
## Test Results
|
||||
|
||||
### TypeScript Check (`npx tsc --noEmit`)
|
||||
```
|
||||
EXIT_CODE=0
|
||||
```
|
||||
✅ Zero errors — clean type check
|
||||
|
||||
### Unit Tests (`npx vitest run`)
|
||||
```
|
||||
Test Files 13 passed (13)
|
||||
Tests 343 passed (343)
|
||||
Duration 19.10s
|
||||
```
|
||||
✅ 343/343 tests passed — no regressions
|
||||
|
||||
### Production Build (`npm run build`)
|
||||
```
|
||||
vite v5.4.21 building for production...
|
||||
✓ 337 modules transformed.
|
||||
dist/index.html 0.37 kB │ gzip: 0.27 kB
|
||||
dist/assets/index-f2DS1W3w.css 46.87 kB │ gzip: 8.33 kB
|
||||
dist/assets/index-Ch0HMxp1.js 922.38 kB │ gzip: 316.96 kB
|
||||
✓ built in 6.98s
|
||||
```
|
||||
✅ Build succeeded
|
||||
|
||||
## Bug Fixes Implemented
|
||||
|
||||
| Bug | Description | Status |
|
||||
|-----|-------------|--------|
|
||||
| BUG 1 | Hamburger button has no onClick | ✅ Fixed — wired to `onOpenLeftDrawer` |
|
||||
| BUG 2 | Right vertical tab bar not rendered | ✅ Fixed — `right-tab-bar` div rendered with tab buttons |
|
||||
| BUG 3 | Drawer bodies are empty | ✅ Fixed — `leftContent`/`rightContent` rendered in drawer bodies |
|
||||
| BUG 4 | Topbar buttons without onClick | ✅ Fixed — all buttons have onClick handlers |
|
||||
|
||||
## Smoke Test
|
||||
- App builds and starts without runtime errors
|
||||
- Hamburger button opens left drawer (onClick wired to `setMobileLeftOpen(true)`)
|
||||
- Right-tab-bar buttons open right drawer and set active tab (onClick wired to `setActiveDrawerTab` + `setMobileRightOpen(true)`)
|
||||
- Left drawer renders LeftSidebar content (tools)
|
||||
- Right drawer renders RightSidebar content (layer/library/ki panels)
|
||||
- Project name button navigates back to dashboard (onClick wired to `onNavigateBack`)
|
||||
Reference in New Issue
Block a user