dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
92 Commits 1 Branch 0 Tags
0dace905971deada11ae53078ca78741277f0b3d
Commit Graph

9 Commits

Author SHA1 Message Date
dwindown
0dace90597 refactor: Smart contextual headers - only when they add value 
Implemented intelligent header rules based on user feedback.

Problem Analysis:
1. Dashboard submenu tabs already show page names (Overview, Revenue, Orders...)
2. Showing "Orders" header is ambiguous (Analytics or Management?)
3. Wasted vertical space for redundant information
4. FAB already handles actions on management pages

Solution: Headers ONLY When They Add Value

Rules Implemented:

1. Dashboard Pages: NO HEADERS
   - Submenu tabs are sufficient
   - Saves vertical space
   - No ambiguity

   Before:
   Dashboard → Overview  = "Dashboard" header (redundant!)
   Dashboard → Orders    = "Orders" header (confusing!)

   After:
   Dashboard → Overview  = No header (tabs show "Overview")
   Dashboard → Orders    = No header (tabs show "Orders")

2. Settings Pages: HEADERS ONLY WITH ACTIONS
   - Store Details + [Save] = Show header ✓
   - Payments + [Refresh]   = Show header ✓
   - Pages without actions  = No header (save space)

   Logic: If there is an action button, we need a place to put it → header
          If no action button, header is just wasting space → remove it

3. Management Pages: NO HEADERS
   - FAB handles actions ([+ Add Order])
   - No need for redundant header with action button

4. Payments Exception: REMOVED
   - Treat Payments like any other settings page
   - Has action (Refresh) = show header
   - Consistent with other pages

Implementation:

Dashboard Pages (7 files):
- Removed usePageHeader hook
- Removed useEffect for setting header
- Removed unused imports (useEffect, usePageHeader)
- Result: Clean, no headers, tabs are enough

PageHeader Component:
- Removed Payments special case detection
- Removed useLocation import
- Simplified logic: hideOnDesktop prop only

SettingsLayout Component:
- Changed logic: Only set header when onSave OR action exists
- If no action: clearPageHeader() instead of setPageHeader(title)
- Result: Headers only appear when needed

Benefits:

✅ Saves vertical space (no redundant headers)
✅ No ambiguity (Dashboard Orders vs Orders Management)
✅ Consistent logic (action = header, no action = no header)
✅ Cleaner UI (less visual clutter)
✅ FAB handles management page actions

Files Modified:
- Dashboard/index.tsx (Overview)
- Dashboard/Revenue.tsx
- Dashboard/Orders.tsx
- Dashboard/Products.tsx
- Dashboard/Customers.tsx
- Dashboard/Coupons.tsx
- Dashboard/Taxes.tsx
- PageHeader.tsx
- SettingsLayout.tsx

Result: Smart headers that only appear when they add value! 🎯
 2025-11-06 23:11:59 +07:00
dwindown
bc86a12c38 feat: Comprehensive contextual headers for all pages 
Applied "bigger picture" thinking - added contextual headers to ALL submenu pages consistently.

Problem: Only some pages had headers, creating inconsistent UX

Issues Fixed:

1. Dashboard Submenu Pages - All Now Have Headers
   Before: Only Overview had header
   After: All 6 pages have headers (Revenue, Orders, Products, Customers, Coupons, Taxes)

2. Settings Pages Desktop - Show Headers (Except Payments)
   Before: PageHeader was md:hidden on all pages
   After: Shows on desktop for Settings pages, hidden only for Payments (special case)

Implementation:
- Added usePageHeader to 6 Dashboard submenu pages
- Modified PageHeader to show on desktop by default
- Auto-detect Payments page and hide header there

Result:
- ALL Dashboard pages have contextual headers
- ALL Settings pages have contextual headers on desktop
- Payments page special case handled
- Consistent UX across entire app
- No more bald pages!

Files Modified: 6 Dashboard pages + PageHeader.tsx
 2025-11-06 22:54:14 +07:00
dwindown
97288a41dc feat: Mobile-only contextual headers + consistent button sizing 
Implemented 3 key improvements based on user feedback:

1. ✅ PageHeader Mobile-Only
   Problem: Contextual header showing on desktop was redundant
   Solution: Added md:hidden to PageHeader component

   Before:
   Desktop: Shows "Store Details" header (redundant with nav)
   Mobile: Shows "Store Details" header (good!)

   After:
   Desktop: No contextual header (clean!)
   Mobile: Shows "Store Details" header (perfect!)

   Result: Cleaner desktop UI, mobile gets contextual clarity

2. ✅ Contextual Headers on All Pages
   Problem: Dashboard and Payments pages missing contextual headers
   Solution:
   - Added usePageHeader to Dashboard
   - Fixed SettingsLayout to always set header (not just when onSave exists)

   Before:
   - Dashboard: No header (confusing)
   - Payments: No header (confusing)
   - Store Details: Has header (only one working)

   After:
   - Dashboard: "Dashboard" header ✓
   - Payments: "Payments" header ✓
   - Store Details: "Store Details" header ✓
   - All settings pages: Contextual headers ✓

   Result: Consistent UX across all pages!

3. ✅ Re-added .ui-ctrl to Button
   Problem: Removed .ui-ctrl earlier, but it's needed for mobile sizing
   Solution: Added .ui-ctrl back to Button component

   Why .ui-ctrl is Good:
   - Mobile: 44px height (good touch target)
   - Desktop: 36px height (compact, efficient)
   - Responsive by default
   - Follows UI/UX best practices

   Result: Buttons properly sized for touch on mobile!

Mobile Layout (Final):
┌─────────────────────────────────┐
│ Dashboard                       │ ← Contextual header!
├─────────────────────────────────┤
│ Overview | Revenue | Orders ... │ ← Submenu
├─────────────────────────────────┤
│ Last 7 days          [Refresh]  │
├─────────────────────────────────┤
│ Revenue                         │
│ Rp64.500                        │
│ 99.9% vs previous 7 days        │
│                          ( + )  │ ← FAB
├─────────────────────────────────┤
│ Bottom Nav                      │
└─────────────────────────────────┘

Desktop Layout (Final):
┌─────────────────────────────────┐
│ Header                          │
├─────────────────────────────────┤
│ Dashboard | Orders | Products   │ ← Top Nav
├─────────────────────────────────┤
│ Overview | Revenue | Orders ... │ ← Submenu
├─────────────────────────────────┤
│ (No contextual header)          │ ← Clean!
├─────────────────────────────────┤
│ Revenue                         │
│ Rp64.500                        │
└─────────────────────────────────┘

Files Modified:
- PageHeader.tsx: Added md:hidden for mobile-only
- Dashboard/index.tsx: Added contextual header
- SettingsLayout.tsx: Always set header (not just with onSave)
- button.tsx: Re-added .ui-ctrl class

Result:
✅ Mobile: Contextual headers on all pages
✅ Desktop: Clean, no redundant headers
✅ Buttons: Proper touch targets (44px mobile, 36px desktop)
✅ Consistent UX across all pages! 🎉
 2025-11-06 22:45:47 +07:00
dwindown
a779f9a226 fix: Move PageHeader above SubmenuBar (correct hierarchy) 
Fixed the layout hierarchy - PageHeader should be ABOVE submenu, not below.

Correct Information Architecture:
1. Page Title (Contextual Header) ← "Where am I?"
2. Submenu Tabs ← "What can I do here?"
3. Content ← "The actual data"

Changes Made:

1. ✅ Desktop Fullscreen Layout
   Before: Submenu → PageHeader
   After: PageHeader → Submenu

2. ✅ Mobile Fullscreen Layout
   Before: Submenu → PageHeader (inside main)
   After: PageHeader → Submenu (outside main)

3. ✅ Non-Fullscreen Layout
   Before: TopNav → Submenu → PageHeader
   After: TopNav → PageHeader → Submenu

4. ✅ Updated Z-Index
   Before: PageHeader z-10 (below submenu)
   After: PageHeader z-20 (same as submenu, but DOM order puts it on top)

Why This Order Makes Sense:
- User sees PAGE TITLE first ("Store Details")
- Then sees NAVIGATION OPTIONS (WooNooW, Store Details, Payments, Shipping)
- Then sees CONTENT (the actual form fields)

Visual Flow:
┌─────────────────────────────────┐
│ Store Details          [Save]   │ ← Contextual header (what page)
├─────────────────────────────────┤
│ WooNooW | Store Details | ...   │ ← Submenu (navigation)
├─────────────────────────────────┤
│ Store Identity                  │
│ Store name *                    │ ← Content
│ [My Wordpress Store]            │
└─────────────────────────────────┘

Before (Wrong):
User: "What are these tabs for?" (sees submenu first)
Then: "Oh, I'm on Store Details" (sees title after)

After (Correct):
User: "I'm on Store Details" (sees title first)
Then: "I can navigate to WooNooW, Payments, etc." (sees options)

Files Modified:
- App.tsx: Reordered PageHeader to be before SubmenuBar in all 3 layouts
- PageHeader.tsx: Updated z-index to z-20 (same as submenu)

Result: Proper information hierarchy! ✨
 2025-11-06 22:37:20 +07:00
dwindown
0ab31e234d fix: Header visibility and PageHeader positioning 
Fixed 2 critical issues:

1. ✅ Header Missing in Non-Fullscreen
   Problem: Header was using 'fixed' positioning on mobile, breaking non-fullscreen layout
   Solution: Changed back to 'sticky' positioning for all modes

   Before:
   className="md:sticky ${fullscreen ? 'fixed top-0 left-0 right-0' : ...}"

   After:
   className="sticky ${fullscreen ? 'top-0' : 'top-[32px]'}"

   Also fixed hide animation to only trigger in fullscreen:
   ${fullscreen && !isVisible ? '-translate-y-full' : 'translate-y-0'}

   Result: Header now shows correctly in all modes

2. ✅ PageHeader Covered by Submenu
   Problem: PageHeader had complex top calculations that didn't work
   Solution: Simplified to always use top-0, rely on z-index for stacking

   Before:
   const topClass = fullscreen ? 'top-0' : 'top-[calc(10rem+32px)]';

   After:
   // Always top-0, z-10 ensures it stacks below submenu (z-20)
   className="sticky top-0 z-10"

   Result: PageHeader now visible and stacks correctly below submenu

How It Works:
- Submenu: sticky top-X z-20 (higher z-index, sticks first)
- PageHeader: sticky top-0 z-10 (lower z-index, stacks below)
- When scrolling, submenu sticks at its position
- PageHeader scrolls up until it hits top-0, then sticks below submenu

Layout Flow (Non-Fullscreen Mobile):
┌─────────────────────────────────┐
│ Header (sticky top-[32px])      │ ← Now visible!
├─────────────────────────────────┤
│ TopNav                          │
├─────────────────────────────────┤
│ Submenu (sticky, z-20)          │
├─────────────────────────────────┤
│ PageHeader (sticky, z-10)       │ ← Now visible!
├─────────────────────────────────┤
│ Content                         │
└─────────────────────────────────┘

Layout Flow (Fullscreen Mobile):
┌─────────────────────────────────┐
│ (Header hidden)                 │
├─────────────────────────────────┤
│ Submenu (sticky top-0, z-20)    │
├─────────────────────────────────┤
│ PageHeader (sticky top-0, z-10) │
├─────────────────────────────────┤
│ Content                         │
│                          ( + )  │
├─────────────────────────────────┤
│ Bottom Nav                      │
└─────────────────────────────────┘

Files Modified:
- App.tsx: Fixed header positioning and hide logic
- PageHeader.tsx: Simplified positioning logic

Result: Clean, working layout in all modes! ✨
 2025-11-06 22:34:03 +07:00
dwindown
51580d5008 feat: Modern mobile-first UX improvements 
Implemented 5 major improvements for better mobile UX:

1. ✅ Fixed Header Transform Issue
   Problem: Header used sticky + translateY, so submenu top-0 had no effect
   Solution: Changed to fixed positioning on mobile

   Before:
   <header className="sticky top-0 -translate-y-full">

   After:
   <header className="fixed top-0 left-0 right-0 -translate-y-full">
   <div className="pt-16"> <!-- compensate for fixed header -->

   Result: Submenu now properly moves to top-0 when header hides

2. ✅ Removed Top Bar in Mobile Standalone Mode
   Problem: Top bar wastes precious vertical space on mobile
   Solution: Hide header completely on mobile PWA standalone

   Implementation:
   if (isStandalone && window.innerWidth < 768) return null;

   Result: Native app feel, maximum content space

3. ✅ Fixed More Page Gap
   Problem: PageHeader had transparent background, content visible behind
   Solution: Changed to solid background

   Before: bg-background/95 backdrop-blur
   After: bg-background

   Result: Clean, solid header with no bleed-through

4. ✅ Fixed Button Sizing
   Problem: .ui-ctrl class overriding button heights
   Solution: Removed .ui-ctrl from Button component

   Before: className={cn('ui-ctrl', buttonVariants(...))}
   After: className={cn(buttonVariants(...))}

   Button sizes now work correctly:
   - sm: h-8 (32px)
   - default: h-9 (36px)
   - lg: h-10 (40px)

5. ✅ Implemented Contextual Headers
   Problem: No page-specific headers
   Solution: Added usePageHeader hook to More page

   Implementation:
   useEffect(() => {
     setPageHeader(__('More'));
     return () => clearPageHeader();
   }, []);

   Result: Consistent header pattern across all pages

Mobile Layout (Standalone Mode):
┌─────────────────────────────────┐
│ (No top bar - native feel)      │
├─────────────────────────────────┤
│ Submenu (dynamic top)           │
├─────────────────────────────────┤
│ Page Title (contextual)         │
├─────────────────────────────────┤
│ Content                         │
│                        [+]      │
├─────────────────────────────────┤
│ Bottom Nav                      │
└─────────────────────────────────┘

Benefits:
✅ Native app feel on mobile
✅ Maximum content space (64px saved!)
✅ Smooth scroll animations
✅ Consistent button sizing
✅ Clean, professional look
✅ Industry-standard UX

Files Modified:
- App.tsx: Fixed header positioning, hide on mobile standalone
- PageHeader.tsx: Solid background
- button.tsx: Removed ui-ctrl override
- More/index.tsx: Added contextual header

Next Steps:
- Add contextual headers to remaining pages
- Test on real devices
- Add page transitions
- Implement pull-to-refresh
 2025-11-06 22:16:48 +07:00
dwindown
4be283c4a4 fix: Add min-w-0 to main and scrollable containers for proper shrinking 
Problem:
- Content still not shrinking on narrow viewports
- Horizontal scrolling persists
- Header shrinks but body doesn't

Root Cause:
Missing min-w-0 on parent containers:
<main className="flex-1 flex flex-col">  ← No min-w-0!
  <div className="overflow-auto p-4">   ← No min-w-0!
    <AppRoutes />

Without min-w-0, flex containers won't shrink below their
content's natural width, even if children have min-w-0.

Solution:
Add min-w-0 to the entire container chain:

<main className="flex-1 flex flex-col min-h-0 min-w-0">
  <div className="overflow-auto p-4 min-w-0">
    <AppRoutes />

Container Chain (all need min-w-0):
┌────────────────────────────────────┐
│ <div flex>                         │
│   <Sidebar flex-shrink-0>          │
│   <main flex-1 min-w-0> ✅         │ ← Added
│     <SubmenuBar>                   │
│     <PageHeader>                   │
│     <div overflow-auto min-w-0> ✅ │ ← Added
│       <AppRoutes>                  │
│         <SettingsLayout min-w-0>   │
│           <PageHeader min-w-0>     │
│             Content...             │
└────────────────────────────────────┘

Applied to all 3 layouts:
1. Fullscreen Desktop (Sidebar + Main)
2. Fullscreen Mobile (TopNav + Main)
3. WP-Admin (TopNav + Main)

Why this works:
- min-w-0 must be on EVERY flex container in the chain
- Breaking the chain at any level prevents shrinking
- Now entire tree can shrink from root to leaf

Files Modified:
- App.tsx: Added min-w-0 to <main> and scrollable <div>

Result:
✅ Content shrinks properly on all viewports
✅ No horizontal scrolling
✅ Works from 320px to 1920px+
✅ All layouts (fullscreen, mobile, WP-Admin)
 2025-11-06 16:02:42 +07:00
dwindown
c3d4fbd794 feat: Add dynamic sticky positioning to PageHeader based on mode 
Following SubmenuBar pattern, PageHeader now adapts its sticky
position based on fullscreen mode.

Changes:
1. PageHeader Component
   - Added fullscreen prop (boolean)
   - Dynamic top position calculation
   - Fullscreen: top-0 (submenu at top-0)
   - WP-Admin: top-[calc(7rem+32px)] = 144px (below WP bar + menu)

2. App.tsx
   - Pass fullscreen={true} in fullscreen modes
   - Pass fullscreen={false} in WP-Admin mode
   - Matches SubmenuBar prop pattern

Logic (matches SubmenuBar):
const topClass = fullscreen ? 'top-0' : 'top-[calc(7rem+32px)]';

Layout Positions:
┌─────────────────────────────────────┐
│ Fullscreen Mode:                    │
│   SubmenuBar: top-0                 │
│   PageHeader: top-0 ✅              │
├─────────────────────────────────────┤
│ WP-Admin Mode:                      │
│   SubmenuBar: top-[calc(7rem+32px)] │
│   PageHeader: top-[calc(7rem+32px)] ✅│
└─────────────────────────────────────┘

Result:
✅ PageHeader sticks correctly in fullscreen
✅ PageHeader sticks correctly in WP-Admin
✅ Consistent with SubmenuBar behavior
✅ No overlap or covering issues

Files Modified:
- PageHeader.tsx: Added fullscreen prop + dynamic positioning
- App.tsx: Pass fullscreen prop to all PageHeader instances
 2025-11-06 15:39:39 +07:00
dwindown
2ec76c7dec refactor: Move page header outside content container using context 
Problem:
- Page header inside scrollable content container
- Complex sticky positioning logic
- Different behavior in different modes

Better Architecture:
Move page header to same level as submenu, outside scroll container

Structure:
<main flex flex-col>
  <SubmenuBar sticky>           ← Sticky outside scroll
  <PageHeader sticky>            ← Sticky outside scroll ✅
  <div overflow-auto>            ← Only content scrolls
    <AppRoutes />

Implementation:
1. PageHeaderContext - Global state for page header
   - title: string
   - action: ReactNode (e.g., Save button)
   - setPageHeader() / clearPageHeader()

2. PageHeader Component - Renders at app level
   - Positioned after submenu
   - Sticky top-[49px] (below submenu)
   - Boxed layout (max-w-5xl, centered)
   - Consumes context

3. SettingsLayout - Sets header via context
   - useEffect to set/clear header
   - No inline sticky header
   - Cleaner component

Benefits:
✅ Page header outside scroll container
✅ Sticky works consistently (no mode detection)
✅ Submenu layout preserved (justify-start)
✅ Page header uses page layout (boxed, centered)
✅ Separation of concerns
✅ Reusable for any page that needs sticky header

Layout Hierarchy:
┌─────────────────────────────────────┐
│ <main flex flex-col>                │
│   ┌─────────────────────────────┐   │
│   │ SubmenuBar (sticky)         │   │ ← justify-start
│   ├─────────────────────────────┤   │
│   │ PageHeader (sticky)         │   │ ← max-w-5xl centered
│   ├─────────────────────────────┤   │
│   │ <div overflow-auto>         │   │
│   │   Content (scrolls)         │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

Files Created:
- PageHeaderContext.tsx: Context provider
- PageHeader.tsx: Header component

Files Modified:
- App.tsx: Added PageHeader after submenu in all layouts
- SettingsLayout.tsx: Use context instead of inline header

Result:
✅ Clean architecture
✅ Consistent sticky behavior
✅ No mode-specific logic
✅ Reusable pattern
 2025-11-06 15:34:00 +07:00