130 lines
3.1 KiB
YAML
130 lines
3.1 KiB
YAML
workflow_version: "v002"
|
|
feature: "add header and navigation link to each pages"
|
|
created_at: "2025-12-18T17:07:30"
|
|
status: draft
|
|
revision: 1
|
|
|
|
# No data model changes required
|
|
data_models: []
|
|
|
|
# No API endpoint changes required
|
|
api_endpoints: []
|
|
|
|
# Pages to modify (add header via layout)
|
|
pages: []
|
|
|
|
# Components to create
|
|
components:
|
|
- id: component_header
|
|
name: Header
|
|
file_path: components/Header.tsx
|
|
props:
|
|
- name: className
|
|
type: string
|
|
required: false
|
|
description: Additional CSS classes
|
|
events: []
|
|
uses_apis: []
|
|
uses_components:
|
|
- component_nav_link
|
|
- component_user_menu
|
|
description: |
|
|
Global navigation header with logo, navigation links, and user menu.
|
|
Includes responsive design with mobile hamburger menu.
|
|
acceptance_criteria:
|
|
- Header renders logo linked to home
|
|
- Navigation links are displayed
|
|
- User menu shows auth state
|
|
- Mobile responsive with hamburger menu
|
|
|
|
- id: component_nav_link
|
|
name: NavLink
|
|
file_path: components/NavLink.tsx
|
|
props:
|
|
- name: href
|
|
type: string
|
|
required: true
|
|
description: Link destination
|
|
- name: children
|
|
type: React.ReactNode
|
|
required: true
|
|
description: Link content
|
|
- name: icon
|
|
type: string
|
|
required: false
|
|
description: Optional icon name
|
|
events: []
|
|
uses_apis: []
|
|
uses_components: []
|
|
description: |
|
|
Styled navigation link with active state indicator.
|
|
Highlights when on current page using usePathname().
|
|
acceptance_criteria:
|
|
- Shows active state when on current page
|
|
- Hover state styling
|
|
- Supports optional icon
|
|
|
|
- id: component_user_menu
|
|
name: UserMenu
|
|
file_path: components/UserMenu.tsx
|
|
props: []
|
|
events: []
|
|
uses_apis: []
|
|
uses_components: []
|
|
description: |
|
|
Displays user authentication state.
|
|
Shows Login/Register for unauthenticated users.
|
|
Shows user avatar and dropdown for authenticated users.
|
|
acceptance_criteria:
|
|
- Shows Login/Register when not authenticated
|
|
- Shows user info when authenticated
|
|
- Links to profile and logout
|
|
|
|
# Layout modification
|
|
layout_changes:
|
|
- id: layout_root
|
|
file_path: app/layout.tsx
|
|
changes:
|
|
- Import Header component
|
|
- Render Header before children
|
|
- Update metadata for SonicCloud branding
|
|
|
|
# Navigation structure
|
|
navigation_config:
|
|
links:
|
|
- label: Home
|
|
href: /
|
|
icon: home
|
|
show_always: true
|
|
- label: Search
|
|
href: /search
|
|
icon: search
|
|
show_always: true
|
|
- label: Playlists
|
|
href: /playlists
|
|
icon: playlist
|
|
auth_required: true
|
|
- label: Upload
|
|
href: /upload
|
|
icon: upload
|
|
auth_required: true
|
|
|
|
# Dependencies
|
|
dependencies:
|
|
component_header:
|
|
depends_on: []
|
|
depended_by:
|
|
- layout_root
|
|
component_nav_link:
|
|
depends_on: []
|
|
depended_by:
|
|
- component_header
|
|
component_user_menu:
|
|
depends_on: []
|
|
depended_by:
|
|
- component_header
|
|
layout_root:
|
|
depends_on:
|
|
- component_header
|
|
depended_by: []
|