16 KiB
16 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 08-mobile-pwa | 01 | execute | 1 |
|
true |
|
|
Purpose: This is the structural foundation that all other mobile plans build on. The layout split (sidebar vs tab bar) affects every page, and PWA infrastructure (manifest + service worker) is required before push notifications or offline caching can work.
Output: Mobile-responsive dashboard layout, bottom tab bar with More sheet, PWA manifest with K monogram icons, Serwist service worker, offline banner component.
<execution_context> @/home/adelorenzo/.claude/get-shit-done/workflows/execute-plan.md @/home/adelorenzo/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/08-mobile-pwa/08-CONTEXT.md @.planning/phases/08-mobile-pwa/08-RESEARCH.mdFrom packages/portal/components/nav.tsx:
type NavItem = {
href: string;
label: string;
icon: React.ElementType;
allowedRoles?: string[];
};
// Nav items array (lines 43-53):
// Dashboard, Tenants (platform_admin), Employees, Chat, Usage,
// Billing (admin+), API Keys (admin+), Users (admin+), Platform (platform_admin)
// Role filtering: visibleItems = navItems.filter(item => !item.allowedRoles || item.allowedRoles.includes(role))
From packages/portal/app/(dashboard)/layout.tsx:
// Current layout: flex min-h-screen, <Nav /> sidebar + <main> content
// Wraps with SessionProvider, QueryClientProvider, SessionSync, ImpersonationBanner
From packages/portal/app/layout.tsx:
// Root layout: Server Component with next-intl provider
// Exports metadata: Metadata
// No viewport export yet (needs viewportFit: 'cover' for safe areas)
From packages/portal/next.config.ts:
import createNextIntlPlugin from "next-intl/plugin";
const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
const nextConfig: NextConfig = { output: "standalone" };
export default withNextIntl(nextConfig);
// Must compose: withNextIntl(withSerwist(nextConfig))
From packages/portal/proxy.ts:
const CUSTOMER_OPERATOR_RESTRICTED = ["/billing", "/settings/api-keys", "/users", "/admin", "/agents/new"];
const PLATFORM_ADMIN_ONLY = ["/admin"];
2. Generate PWA icon assets. Create a Node.js script using `sharp` (install as devDep if needed) or canvas to generate the K monogram icons. The "K" should be bold white text on a dark gradient background (#0f0f1a to #1a1a2e with a subtle purple/blue accent). Generate:
- public/icon-192.png (192x192) — K monogram on gradient
- public/icon-512.png (512x512) — K monogram on gradient
- public/icon-maskable-192.png (192x192 with 10% safe-zone padding)
- public/apple-touch-icon.png (180x180)
- public/badge-72.png (72x72, monochrome white K on transparent)
If sharp is complex, create simple SVGs and convert, or use canvas. The icons must exist as real PNG files.
3. Create `app/manifest.ts` using Next.js built-in manifest file convention:
```typescript
import type { MetadataRoute } from 'next'
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'Konstruct',
short_name: 'Konstruct',
description: 'AI Workforce Platform',
start_url: '/dashboard',
display: 'standalone',
background_color: '#0f0f1a',
theme_color: '#0f0f1a',
orientation: 'portrait',
icons: [
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
{ src: '/icon-maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
],
}
}
```
4. Create `app/sw.ts` — Serwist service worker source:
```typescript
import { defaultCache } from '@serwist/next/worker'
import { installSerwist } from 'serwist'
declare const self: ServiceWorkerGlobalScope
installSerwist({
precacheEntries: self.__SW_MANIFEST,
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
runtimeCaching: defaultCache,
})
```
NOTE: Push event listeners will be added in Plan 03. Keep this minimal for now.
5. Update `next.config.ts` — wrap with Serwist:
```typescript
import withSerwistInit from '@serwist/next'
const withSerwist = withSerwistInit({
swSrc: 'app/sw.ts',
swDest: 'public/sw.js',
disable: process.env.NODE_ENV === 'development',
})
export default withNextIntl(withSerwist(nextConfig))
```
Compose order: withNextIntl wraps withSerwist wraps nextConfig.
6. Create `components/sw-register.tsx` — client component that registers the service worker:
```typescript
"use client"
import { useEffect } from 'react'
export function ServiceWorkerRegistration() {
useEffect(() => {
if ('serviceWorker' in navigator) {
void navigator.serviceWorker.register('/sw.js', { scope: '/', updateViaCache: 'none' })
}
}, [])
return null
}
```
7. Update `app/layout.tsx`:
- Add `Viewport` export with `viewportFit: 'cover'` to enable safe-area-inset CSS env vars on iOS
- Mount `<ServiceWorkerRegistration />` in the body (outside NextIntlClientProvider is fine since it uses no translations)
- Add `<OfflineBanner />` in body (inside NextIntlClientProvider since it needs translations)
8. Create `lib/use-offline.ts` — hook for online/offline state:
```typescript
import { useState, useEffect } from 'react'
export function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(typeof navigator !== 'undefined' ? navigator.onLine : true)
useEffect(() => {
const on = () => setIsOnline(true)
const off = () => setIsOnline(false)
window.addEventListener('online', on)
window.addEventListener('offline', off)
return () => { window.removeEventListener('online', on); window.removeEventListener('offline', off) }
}, [])
return isOnline
}
```
9. Create `components/offline-banner.tsx` — fixed banner at top when offline:
```typescript
"use client"
// Shows "You're offline" with a subtle amber/red bar at the top of the viewport
// Uses useOnlineStatus hook. Renders null when online.
// Position: fixed top-0 z-[60] full width, above everything
// Add i18n key: common.offlineBanner
```
2. Create `components/mobile-more-sheet.tsx` — bottom sheet for secondary items:
- "use client" component
- Use @base-ui/react Dialog as a bottom sheet (position: fixed bottom, slides up with animation)
- Contains nav links: Billing, API Keys, Users, Platform, Settings, Sign Out
- Apply RBAC: filter items by role (same logic as Nav — Billing/API Keys/Users visible to platform_admin and customer_admin only; Platform visible to platform_admin only)
- Include LanguageSwitcher component at the bottom of the sheet
- Include Sign Out button at the bottom
- Props: `open: boolean, onOpenChange: (open: boolean) => void`
- Style: rounded-t-2xl, bg-background, max-h-[70vh], draggable handle at top
- Each item: icon + label, full-width tap target, closes sheet on navigation
3. Update `app/(dashboard)/layout.tsx`:
- Wrap existing `<Nav />` in `<div className="hidden md:flex">` — sidebar hidden on mobile
- Add `<MobileNav />` after the main content area (it renders with md:hidden internally)
- Add `pb-16 md:pb-0` to the `<main>` element to clear the tab bar on mobile
- Reduce padding on mobile: change `px-8 py-8` to `px-4 md:px-8 py-4 md:py-8`
- Keep all existing providers (SessionProvider, QueryClientProvider, etc.) unchanged
4. Add i18n keys for mobile nav in all three locale files (en.json, es.json, pt.json):
- mobileNav.dashboard, mobileNav.employees, mobileNav.chat, mobileNav.usage, mobileNav.more
- mobileNav.billing, mobileNav.apiKeys, mobileNav.users, mobileNav.platform, mobileNav.settings, mobileNav.signOut
- common.offlineBanner: "You're offline — changes will sync when you reconnect"
NOTE: Nav already has these keys under "nav.*" — reuse the same translation keys from the nav namespace where possible to avoid duplication. Only add new keys if the mobile label differs.
<success_criteria> All portal pages render with the bottom tab bar on mobile (< 768px) and the sidebar on desktop (>= 768px). PWA manifest and service worker infrastructure are in place. Offline banner appears when disconnected. </success_criteria>
After completion, create `.planning/phases/08-mobile-pwa/08-01-SUMMARY.md`