igny8/to-do-s/part1/SECTION_6_FINAL_MODS.md at c227d9ee039f780abfd1e6fc340d8fa8062faec2

Files

IGNY8 VPS (Salman) e5959c3e72 Section 6 COmpleted

2025-12-27 03:41:51 +00:00

18 KiB

Raw Blame History

Date: December 27, 2025
Status: Finalized for Implementation
Scope: Sidebar structure, navigation restructure (tabs → sidebar dropdowns)

File: layout/AppSidebar.tsx

Dashboard (standalone)
├─ SETUP
│   ├─ Add Keywords → /setup/add-keywords
│   ├─ Content Settings → /account/content-settings
│   ├─ Sites → /sites
│   └─ Thinker (admin only) → /thinker/prompts
├─ WORKFLOW
│   ├─ Planner → /planner/keywords
│   ├─ Writer → /writer/tasks
│   ├─ Automation → /automation
│   ├─ Linker → /linker/content [NOT ACTIVE - REMOVE]
│   └─ Optimizer → /optimizer/content [NOT ACTIVE - REMOVE]
├─ ACCOUNT
│   ├─ Account Settings → /account/settings
│   ├─ Plans & Billing → /account/plans
│   ├─ Usage → /account/usage
│   └─ AI Models (admin only) → /settings/integration
└─ HELP
    └─ Help & Docs → /help

Module	Current Tabs/Buttons	Location
Planner	Keywords, Clusters, Ideas	Tab buttons in page header
Writer	Queue, Drafts, Images, Review, Published	Tab buttons in page header
Account Settings	Account, Profile, Team	Tabs in page
Plans & Billing	Current Plan, Upgrade Plan, History	Tabs in page
Usage	Your Limits & Usage, Credit History, API Activity	Tabs in page
Content Settings	Content Generation, Publishing, Image Settings	Tabs in page

6.2 Issues to Address

#	Issue	Priority	Action
1	Linker in navigation	High	REMOVE - not active module
2	Optimizer in navigation	High	REMOVE - not active module
3	KeywordOpportunities reference	High	REMOVE - page being deleted
4	Help sub-pages in routes	High	REMOVE - pages being deleted
5	Menu order incorrect	High	Reorder SETUP: Sites → Add Keywords → Content Settings → Thinker
6	Tabs/buttons clutter page headers	High	MOVE to sidebar dropdowns
7	No breadcrumb navigation	Medium	Add breadcrumbs (space now available in header)
8	No "Next Step" guidance	Medium	Add contextual next step (space now available in header)
9	No active section highlighting	Medium	Highlight current section/page in sidebar
10	Credit purchase not in sidebar	Low	Accessible from Plans & Billing

Rationale:

New app launch - no existing user patterns to unlearn
Desktop-only app - no mobile concerns
Same number of clicks - active dropdown stays expanded automatically
Cleaner page headers - space for breadcrumbs and "Next Step" CTAs
Better discoverability - all navigation visible in one place
Scalable - easy to add new sub-pages in future
Consistent pattern across all modules

New Sidebar Structure

Dashboard

SETUP
├─ Sites ▼
│   ├─ All Sites           → /sites
│   └─ Site Settings       → /sites/:id/settings (contextual)
├─ Add Keywords            → /setup/add-keywords
├─ Content Settings ▼
│   ├─ Content Generation  → /account/content-settings/generation
│   ├─ Publishing          → /account/content-settings/publishing
│   └─ Image Settings      → /account/content-settings/images
└─ Thinker (admin only) ▼
    ├─ Prompts             → /thinker/prompts
    └─ Author Profiles     → /thinker/author-profiles

WORKFLOW
├─ Planner ▼
│   ├─ Keywords            → /planner/keywords
│   ├─ Clusters            → /planner/clusters
│   └─ Ideas               → /planner/ideas
├─ Writer ▼
│   ├─ Queue               → /writer/tasks
│   ├─ Drafts              → /writer/drafts
│   ├─ Images              → /writer/images
│   ├─ Review              → /writer/review
│   └─ Published           → /writer/published
└─ Automation              → /automation

ACCOUNT
├─ Account Settings ▼
│   ├─ Account             → /account/settings/account
│   ├─ Profile             → /account/settings/profile
│   └─ Team                → /account/settings/team
├─ Plans & Billing ▼
│   ├─ Current Plan        → /account/plans/current
│   ├─ Upgrade Plan        → /account/plans/upgrade
│   └─ History             → /account/plans/history
├─ Usage ▼
│   ├─ Limits & Usage      → /account/usage/limits
│   ├─ Credit History      → /account/usage/credits
│   └─ API Activity        → /account/usage/api
└─ AI Models (admin only)  → /settings/integration

HELP
└─ Help & Docs             → /help

6.4 Sidebar Behavior Specification

Active Page Detection:
- When user navigates to any page, its parent dropdown auto-expands
- Current page is highlighted within the dropdown
- Active dropdown stays expanded - does NOT collapse
Click Behavior:
- Click on dropdown parent (if not expanded) → expands dropdown
- Click on dropdown parent (if expanded) → collapses dropdown
- Click on sub-item → navigates to that page, dropdown stays open
- Only active page's dropdown auto-opens on page load

Visual States:

Planner ▼                    ← Parent: expanded indicator
  Keywords                   ← Normal sub-item
  Clusters ●                 ← Active page: highlighted
  Ideas                      ← Normal sub-item

Writer ▶                     ← Collapsed (not active)

Persistence:
- Active dropdown remains expanded during navigation within that module
- On direct URL access or refresh, opens dropdown containing current page
- Non-active dropdowns default to collapsed state

Example Flow

User is on /planner/clusters:

WORKFLOW
├─ Planner ▼                   [EXPANDED - contains active page]
│   ├─ Keywords                 [clickable]
│   ├─ Clusters ●               [ACTIVE - highlighted]
│   └─ Ideas                    [clickable]
├─ Writer ▶                    [COLLAPSED]
└─ Automation                  [no dropdown - single page]

User clicks "Ideas":

Navigates to /planner/ideas
Planner dropdown stays expanded
"Ideas" becomes highlighted
"Clusters" returns to normal state

User clicks "Writer":

Writer dropdown expands
Planner dropdown can stay expanded or collapse (design choice)
Shows Writer sub-items

6.5 Page Header Structure (After Tabs Removal)

Before (Current)

┌─────────────────────────────────────────────────────────────────────┐
│ [Keywords] [Clusters] [Ideas]    [+ Add] [Bulk ▼] [Filter] [Search] │
├─────────────────────────────────────────────────────────────────────┤
│ Content area...                                                      │

After (New)

┌─────────────────────────────────────────────────────────────────────┐
│ Planner > Clusters              [+ Add] [Bulk ▼]  [Next: Ideas →]   │
├─────────────────────────────────────────────────────────────────────┤
│ [Filter] [Search...]                                                 │
├─────────────────────────────────────────────────────────────────────┤
│ Content area...                                                      │

Header Components

Component	Position	Purpose
Breadcrumb	Left	Shows: Section > Page (e.g., "Planner > Clusters")
Primary Actions	Center-Right	Add, Bulk actions
Next Step CTA	Right	Contextual "Next: [Action] →" button
Filters/Search	Below header or inline	Data filtering

[Section] > [Page]
[Section] > [Page] > [Detail]

Examples

Route	Breadcrumb Display
`/planner/keywords`	Planner > Keywords
`/planner/clusters`	Planner > Clusters
`/planner/clusters/:id`	Planner > Clusters > [Cluster Name]
`/writer/drafts`	Writer > Drafts
`/writer/drafts/:id`	Writer > Drafts > [Content Title]
`/account/settings/team`	Account Settings > Team
`/account/plans/upgrade`	Plans & Billing > Upgrade Plan

Implementation

Create reusable <Breadcrumb /> component
Each page defines its breadcrumb trail via props or route config
Clickable links except for current page (last item)

6.7 "Next Step" CTA Implementation

Contextual Next Steps

Current Location	Condition	Next Step CTA
Sites	Site created	"Next: Add Keywords →"
Add Keywords	Keywords added (count > 0)	"Next: Plan Your Content →"
Planner > Keywords	Has unclustered keywords	"Next: Cluster Keywords →"
Planner > Clusters	Cluster selected/has clusters	"Next: Generate Ideas →"
Planner > Ideas	Has ideas	"Next: Queue to Writer →"
Writer > Queue	Has tasks	"Next: Generate Content →"
Writer > Drafts	Has drafts	"Next: Review Drafts →"
Writer > Review	Has reviewed content	"Next: Publish →"

Implementation

Create <NextStepCTA /> component
Each page determines when to show and what action
Button styled prominently but not intrusive
Links to logical next step in workflow

6.8 Route Updates Required

Routes to Add/Update

To support sidebar navigation, routes need restructuring:

Current Route	New Route	Notes
`/account/content-settings`	`/account/content-settings/generation`	Default to first sub-page
(same page, different tab)	`/account/content-settings/publishing`	Separate route
(same page, different tab)	`/account/content-settings/images`	Separate route
`/account/settings`	`/account/settings/account`	Default to first sub-page
(same page, different tab)	`/account/settings/profile`	Separate route
(same page, different tab)	`/account/settings/team`	Separate route
`/account/plans`	`/account/plans/current`	Default to first sub-page
(same page, different tab)	`/account/plans/upgrade`	Separate route
(same page, different tab)	`/account/plans/history`	Separate route
`/account/usage`	`/account/usage/limits`	Default to first sub-page
(same page, different tab)	`/account/usage/credits`	Separate route
(same page, different tab)	`/account/usage/api`	Separate route

Routes to Remove

Route	Reason
`/linker/*`	Module not active
`/optimizer/*`	Module not active
`/planner/keyword-opportunities`	Page deleted
`/help/docs`	Page deleted
`/help/system-testing`	Page deleted
`/help/function-testing`	Page deleted
`/billing/overview`	Legacy route
`/team`	Legacy route
`/profile`	Legacy route

6.9 Implementation Plan

Phase 1: Sidebar Restructure

Update AppSidebar.tsx:
- Add dropdown functionality for multi-page modules
- Implement expand/collapse with active state detection
- Remove Linker and Optimizer
- Reorder SETUP: Sites → Add Keywords → Content Settings → Thinker
- Add visual indicators (▼ expanded, ▶ collapsed, ● active)

Create dropdown data structure:

const sidebarConfig = [
  {
    section: 'SETUP',
    items: [
      { label: 'Sites', path: '/sites', icon: Globe },
      { label: 'Add Keywords', path: '/setup/add-keywords', icon: Key },
      { 
        label: 'Content Settings', 
        icon: Settings,
        children: [
          { label: 'Content Generation', path: '/account/content-settings/generation' },
          { label: 'Publishing', path: '/account/content-settings/publishing' },
          { label: 'Image Settings', path: '/account/content-settings/images' },
        ]
      },
      // ... etc
    ]
  },
  // ... other sections
];

Phase 2: Route Updates

Update Router/App.tsx:
- Add new sub-routes for tabbed pages
- Set up redirects from parent routes to default child
- Remove deleted/inactive routes

Example route structure:

// Content Settings
<Route path="/account/content-settings" element={<Navigate to="/account/content-settings/generation" />} />
<Route path="/account/content-settings/generation" element={<ContentSettingsGeneration />} />
<Route path="/account/content-settings/publishing" element={<ContentSettingsPublishing />} />
<Route path="/account/content-settings/images" element={<ContentSettingsImages />} />

Phase 3: Page Header Updates

Remove tab components from all pages:
- Planner (Keywords, Clusters, Ideas tabs)
- Writer (Queue, Drafts, Images, Review, Published tabs)
- Account Settings (Account, Profile, Team tabs)
- Plans & Billing (Current, Upgrade, History tabs)
- Usage (Limits, Credits, API tabs)
- Content Settings (Generation, Publishing, Images tabs)
Add Breadcrumb component to each page
Add NextStepCTA component where applicable
Reorganize header layout:
- Left: Breadcrumb
- Right: Actions + Next Step CTA

Phase 4: Component Creation

Create components/navigation/Breadcrumb.tsx
Create components/navigation/NextStepCTA.tsx
Create components/navigation/SidebarDropdown.tsx (if not using existing UI library component)

Summary

Total Issues

Category	High	Medium	Low	Total
Remove inactive modules	2	0	0	2
Remove deleted pages	2	0	0	2
Menu order	1	0	0	1
Navigation restructure	1	0	0	1
New features	0	3	1	4
TOTAL	6	3	1	10

High Priority Items

Remove Linker from sidebar navigation
Remove Optimizer from sidebar navigation
Remove KeywordOpportunities route references
Remove Help sub-page routes
Reorder SETUP menu: Sites → Add Keywords → Content Settings → Thinker
Implement sidebar dropdown navigation (replace all tabs)

Medium Priority Items

Add breadcrumb navigation component
Add "Next Step" contextual guidance
Add active section highlighting in sidebar

Files to Delete

File	Reason
Tab components in page headers	Replaced by sidebar navigation
Any standalone tab navigation components	No longer needed

Files to Create

File	Purpose
`components/navigation/Breadcrumb.tsx`	Reusable breadcrumb component
`components/navigation/NextStepCTA.tsx`	Contextual next step button
Possibly split page components	If current tabbed pages are single files, may need to split

Files to Modify

File	Changes
`layout/AppSidebar.tsx`	Complete restructure with dropdowns, remove inactive modules, reorder
`Router/App.tsx`	Add sub-routes, remove inactive routes, add redirects
`pages/Planner/*.tsx`	Remove tab navigation from header
`pages/Writer/*.tsx`	Remove tab navigation from header
`pages/account/AccountSettingsPage.tsx`	Split into separate route components OR remove tabs
`pages/account/PlansAndBillingPage.tsx`	Split into separate route components OR remove tabs
`pages/account/UsageAnalyticsPage.tsx`	Split into separate route components OR remove tabs
`pages/account/ContentSettingsPage.tsx`	Split into separate route components OR remove tabs
All page headers	Add Breadcrumb, reorganize layout, add NextStepCTA

Implementation Decision

CONFIRMED: Implement sidebar-based navigation with dropdowns

Remove all tab/button navigation from page headers
All sub-navigation moves to sidebar as expandable dropdowns
Active dropdown stays expanded (same click count as current tabs)
Page headers gain space for breadcrumbs and "Next Step" CTAs
Clean, consistent navigation pattern across all modules

Section 6 implementation is complete. Here's a summary of what was done:

Section 6 Implementation Complete ✅

Sidebar Changes

Removed Linker and Optimizer modules from sidebar (not ready for launch)
Reordered SETUP menu: Sites → Add Keywords → Content Settings → Thinker
Added dropdown sub-items for all major modules with clickable navigation

Account pages now use URL paths instead of internal state for tabs:

/account/settings → Account tab, /account/settings/profile → Profile, /account/settings/team → Team
/account/plans → Current Plan, /account/plans/upgrade → Upgrade, /account/plans/history → History
/account/usage → Limits, /account/usage/credits → Credits, /account/usage/activity → Activity
/account/content-settings → Content Generation, /account/content-settings/publishing → Publishing, /account/content-settings/images → Images

Removed ModuleNavigationTabs from all module pages (Planner, Writer, Thinker, Sites)
Added breadcrumb prop to PageHeader component
All pages now display breadcrumb navigation (e.g., "Planner / Keywords")

Files Modified

AppSidebar.tsx - Sidebar restructure
App.tsx - Added sub-routes
PageHeader.tsx - Added breadcrumb prop
4 account pages - URL-based tab navigation
3 Planner pages, 5 Writer pages, 4 Thinker pages, 1 Sites page - Removed tabs, added breadcrumbs
CHANGELOG.md - Updated to v1.1.8

18 KiB

Raw Blame History

Section 6: Sidebar & Navigation - Audit & Action Plan

6.1 Current Navigation Structure

Current In-Page Navigation (TO BE REMOVED)

6.2 Issues to Address

6.3 New Navigation Structure: Sidebar Dropdowns

Decision: Move All Sub-Navigation to Sidebar

New Sidebar Structure

6.4 Sidebar Behavior Specification

Example Flow

6.5 Page Header Structure (After Tabs Removal)

Before (Current)

After (New)

Header Components

Examples

Implementation

6.7 "Next Step" CTA Implementation

Contextual Next Steps

Implementation

6.8 Route Updates Required

Routes to Add/Update

Routes to Remove

6.9 Implementation Plan

Phase 1: Sidebar Restructure

Phase 2: Route Updates

Phase 3: Page Header Updates

Phase 4: Component Creation

Summary

Total Issues

High Priority Items

Medium Priority Items

Files to Delete

Files to Create

Files to Modify

Implementation Decision

Section 6 Implementation Complete ✅

Sidebar Changes

URL-Based Tab Navigation

Navigation Cleanup

Files Modified

18 KiB Raw Blame History

Section 6: Sidebar & Navigation - Audit & Action Plan

6.1 Current Navigation Structure

Current In-Page Navigation (TO BE REMOVED)

6.2 Issues to Address

6.3 New Navigation Structure: Sidebar Dropdowns

Decision: Move All Sub-Navigation to Sidebar

New Sidebar Structure

6.4 Sidebar Behavior Specification

Dropdown Behavior

Example Flow

6.5 Page Header Structure (After Tabs Removal)

Before (Current)

After (New)

Header Components

6.6 Breadcrumb Implementation

Breadcrumb Pattern

Examples

Implementation

6.7 "Next Step" CTA Implementation

Contextual Next Steps

Implementation

6.8 Route Updates Required

Routes to Add/Update

Routes to Remove

6.9 Implementation Plan

Phase 1: Sidebar Restructure

Phase 2: Route Updates

Phase 3: Page Header Updates

Phase 4: Component Creation

Summary

Total Issues

High Priority Items

Medium Priority Items

Files to Delete

Files to Create

Files to Modify

Implementation Decision

Section 6 Implementation Complete ✅

Sidebar Changes

URL-Based Tab Navigation

Navigation Cleanup

Files Modified

18 KiB

Raw Blame History