diff --git a/UX-TEXT-IMPLEMENTATION-PROGRESS.md b/UX-TEXT-IMPLEMENTATION-PROGRESS.md new file mode 100644 index 00000000..7b421bb5 --- /dev/null +++ b/UX-TEXT-IMPLEMENTATION-PROGRESS.md @@ -0,0 +1,288 @@ +# UX Text Implementation Progress Report + +**Date:** December 25, 2025 +**Status:** In Progress (40% Complete) + +## ✅ COMPLETED SECTIONS + +### 1. Dashboard Page (Section 1) - DONE +- ✅ Main title: "Dashboard" → "Your Content Creation Dashboard" +- ✅ Last updated: "Last updated" → "Last checked" +- ✅ Refresh button tooltip added +- ✅ Banner subtitle enhanced +- ✅ Sites counter: "2/5 Sites" → "2 of 5 Sites Active" +- ✅ Progress card: "Your Progress" → "Your Content Journey" +- ✅ Progress description improved with context +- ✅ All 6 metric cards updated (Site & Sectors, Keywords, Clusters, Ideas, Content, Published) +- ✅ All 8 Quick Actions updated with better titles and descriptions +- ✅ Workflow Modules section updated + +**Files Modified:** `/data/app/igny8/frontend/src/pages/Dashboard/Home.tsx` + +### 2. Sidebar Navigation (Section 17) - DONE +- ✅ Section headers updated: + - "SETUP" → "GET STARTED" + - "WORKFLOW" → "CREATE CONTENT" + - "ACCOUNT" → "MANAGE ACCOUNT" + - "SETTINGS" → "CONFIGURATION" + - "HELP & DOCS" → "HELP & LEARNING" +- ✅ Menu items updated: + - "Add Keywords" → "Find Keywords" + - "Sites" → "Your Websites" + - "Thinker" → "AI Writer Setup" + - "Planner" → "Organize Keywords" + - "Writer" → "Write Articles" + - "Automation" → "Automate Everything" + - "Account Settings" → "Your Account Info" + - "Team Management" → "Your Team" + - "Plans & Billing" → "Your Subscription" + - "Usage & Analytics" → "Your Usage" + - "Profile Settings" → "Your Profile" + - "Publishing" → "Where to Publish" + +**Files Modified:** `/data/app/igny8/frontend/src/layout/AppSidebar.tsx` + +### 3. Sites Management Page (Section 3) - DONE +- ✅ Page title: "Sites Management" → "Your Websites" +- ✅ Add button: "Add Site" → "+ Add Another Website" (with tooltip) +- ✅ Filter labels: "All Types" → "Show All Types", etc. +- ✅ Card buttons with tooltips: + - "Dashboard" → "View Site Dashboard" + - "Content" → "Manage Content" + - "Settings" → "Configure Site" + +**Files Modified:** `/data/app/igny8/frontend/src/pages/Sites/List.tsx` + +### 4. Automation Page (Section 8) - DONE +- ✅ Page title: "AI Automation Pipeline" → "Automate Everything" +- ✅ Status badge: "Ready to Run" → "Ready to Go!" +- ✅ Schedule display made conversational +- ✅ All 7 pipeline stage names rewritten with descriptions +- ✅ Buttons updated with tooltips: + - "Configure" → "⚙️ Adjust Settings" + - "Run Now" tooltip added +- ✅ Pipeline statistics header added +- ✅ All metric cards updated with context + +**Files Modified:** `/data/app/igny8/frontend/src/pages/Automation/AutomationPage.tsx` + +--- + +## 🔄 REMAINING SECTIONS + +### 5. Add Keywords Page (Section 2) - TODO +**Priority:** High +**File to Update:** `/data/app/igny8/frontend/src/pages/Setup/AddKeywords.tsx` or similar + +**Changes Needed:** +- Page title: "Add Keywords" → "Find & Add Keywords to Target" +- Description update with clearer instruction +- Sector selector label: "Sector: All Sectors" → "What topic area? - All Sectors" +- Add helper text below selector +- Table headers: + - "KEYWORD" → "Search Term" + - "SECTOR" → "Topic Area" + - "VOLUME" → "How Often Searched" + - "DIFFICULTY" → "Competition Level" + - "COUNTRY" → "Target Location" + - Add STATUS tooltip +- Bulk Actions: "Bulk Actions" → "Do Multiple at Once" + +### 6. Thinker/AI Prompts Page (Section 4) - TODO +**Priority:** High +**File to Update:** `/data/app/igny8/frontend/src/pages/Thinker/*.tsx` + +**Changes Needed:** +- Page title: "AI Prompts Management" → "Customize Your AI Writer" +- Description simplified +- Tab labels: + - "Prompts" → "Writing Styles" + - "Author Profiles" → "Writing Voices" + - "Strategies" → "Content Strategies" + - "Image Testing" → "Test Image Settings" +- Sub-section titles with explanations +- Button text: + - "Reset to Default" → "Restore Original" + - "Save Prompt" → "Save My Custom Instructions" + +### 7. Planner Pages (Sections 5-6) - TODO +**Priority:** High +**Files to Update:** `/data/app/igny8/frontend/src/pages/Planner/*.tsx` + +**Changes Needed:** + +#### Keywords View: +- Page title: Add "Organize Your Keywords" +- Description: clearer purpose +- Status alerts: simplify pipeline readiness message +- "UNMAPPED" → "READY TO ORGANIZE" +- Bulk Actions: "Bulk Actions" → "Do Multiple at Once" +- Table headers updated +- Import button: "Import" → "+ Import More Keywords" + +#### Clusters View: +- Tab labels: add context +- Explanation text at top +- Cluster display: "5" → "5 keywords in this group" + +### 8. Writer Page (Section 7) - TODO +**Priority:** High +**Files to Update:** `/data/app/igny8/frontend/src/pages/Writer/*.tsx` + +**Changes Needed:** +- Page title: "Content Queue" → "Write Your Articles" +- Description improved +- Status alerts: clearer messages +- Tab names: + - "Queue" → "Ready to Write" + - "Drafts" → "Finished Drafts" + - "Images" → "Article Images" + - "Review" → "Review Before Publishing" +- Table headers updated +- Status display labels (display only, NOT field values): + - "Completed" display as: "Done - Ready to Review" + - "Queued" display as: "Waiting to be Written" + - "Failed" display as: "Error - Needs Help" + +### 9. Account & Settings Pages (Sections 9-14) - TODO +**Priority:** Medium +**Files to Update:** Multiple files in `/data/app/igny8/frontend/src/pages/account/` and `/data/app/igny8/frontend/src/pages/Settings/` + +**Account Settings Page:** +- Title: "Account Settings" → "Your Account Info" +- Section titles and field labels updated +- Helper text added to fields + +**Team Management Page:** +- Title: "Team Management" → "Your Team" +- Tab names updated +- Column headers improved +- Invite button: "Invite Team Member" → "+ Invite Someone" + +**Plans & Billing Page:** +- Title: "Plans & Billing" → "Your Subscription" +- Section titles updated +- Feature list with context added +- Tab names improved +- Button updates + +**Profile Settings Page:** +- Title: "Profile Settings" → "Your Profile" +- Section titles friendlier +- Field explanations added +- Save button: "Save Changes" → "✓ Save My Settings" + +**Publishing Settings Page:** +- Title: "Publishing Settings" → "Where to Publish" +- Section titles updated +- Checkbox labels improved +- Explanations added + +**Usage & Analytics Page:** +- Title: "Usage & Analytics" → "Your Usage" +- Stats cards with explanations +- Tab names with context +- Section explanations added + +### 10. Help & Documentation Page (Section 16) - TODO +**Priority:** Low +**File to Update:** `/data/app/igny8/frontend/src/pages/Help/*.tsx` + +**Changes Needed:** +- Description enhancement +- Table of Contents: "Table of Contents" → "What Do You Want to Learn?" +- Section names reorganized +- Quick Start Guide introduction friendlier +- Step descriptions improved +- Module descriptions in plain English + +--- + +## IMPLEMENTATION STRATEGY + +### Next Steps (Recommended Order): + +1. **Planner Pages** - High traffic, high impact +2. **Writer Page** - Core functionality +3. **Add Keywords Page** - Entry point for users +4. **Thinker/AI Prompts Page** - Advanced users +5. **Account & Settings Pages** - Lower priority but complete the experience +6. **Help & Documentation** - Can be done last + +### Search Strategy for Finding Files: + +```bash +# Find specific pages +find frontend/src/pages -name "*.tsx" | grep -i "planner\|writer\|thinker\|setup" + +# Search for specific text to locate components +grep -r "Content Queue" frontend/src/pages/ +grep -r "AI Prompts Management" frontend/src/pages/ +grep -r "Add Keywords" frontend/src/pages/ +``` + +### Testing Strategy: + +After each section: +1. Run the dev server and visually verify changes +2. Check that tooltips appear correctly +3. Ensure no broken layouts +4. Verify text fits in UI components +5. Test dark mode appearance + +--- + +## IMPORTANT REMINDERS + +### What to Change: +✅ User-facing text, labels, headers +✅ Button text, tooltip text +✅ Descriptions, help text +✅ Display labels (e.g., showing "Done - Ready to Review" for a "completed" status) + +### What NOT to Change: +❌ Backend status field values in database +❌ API response structures +❌ URL slugs or routes +❌ Code variable names +❌ Database column names +❌ Internal logic or calculations +❌ Actual enum values or status codes + +### Code Pattern: +When updating status displays, use this pattern: +```tsx +// WRONG - Don't change the actual value +status = "completed" // ❌ Don't change this + +// RIGHT - Only change the display +{status === "completed" ? "Done - Ready to Review" : status} // ✅ This is fine +``` + +--- + +## COMMIT HISTORY + +1. **Commit 1:** Dashboard, Sidebar Navigation, and Sites Management +2. **Commit 2:** Automation Page + +**Next Commit Should Include:** Planner pages (Keywords and Clusters views) + +--- + +## ESTIMATED TIME REMAINING + +- Planner Pages: ~30 minutes +- Writer Page: ~20 minutes +- Add Keywords Page: ~15 minutes +- Thinker Page: ~20 minutes +- Account & Settings Pages: ~40 minutes +- Help Page: ~15 minutes + +**Total:** ~2.5 hours remaining + +--- + +**Implementation Progress: 40% Complete** +**Files Modified So Far: 4** +**Commits: 2** diff --git a/frontend/src/config/snippets/columns.snippets.ts b/frontend/src/config/snippets/columns.snippets.ts index 9ecf9c0e..9930fe78 100644 --- a/frontend/src/config/snippets/columns.snippets.ts +++ b/frontend/src/config/snippets/columns.snippets.ts @@ -12,14 +12,14 @@ export const titleColumn = { export const keywordColumn = { key: 'keyword', - label: 'Keyword', + label: 'Search Term', sortable: true, width: 'auto', }; export const statusColumn = { key: 'status', - label: 'Status', + label: 'Prep Status', sortable: true, badge: true, width: '120px', @@ -27,7 +27,7 @@ export const statusColumn = { export const volumeColumn = { key: 'volume', - label: 'Volume', + label: 'Monthly Searches', sortable: true, numeric: true, width: '100px', @@ -35,7 +35,7 @@ export const volumeColumn = { export const difficultyColumn = { key: 'difficulty', - label: 'Difficulty', + label: 'Competition Level', sortable: true, badge: true, width: '120px', @@ -43,7 +43,7 @@ export const difficultyColumn = { export const countryColumn = { key: 'country', - label: 'Country', + label: 'Target Location', sortable: true, badge: true, width: '120px', @@ -51,14 +51,14 @@ export const countryColumn = { export const clusterColumn = { key: 'cluster', - label: 'Cluster', + label: 'Topic Group', sortable: true, width: '200px', }; export const createdColumn = { key: 'created_at', - label: 'Created', + label: 'Date Added', sortable: true, date: true, width: '150px', @@ -90,7 +90,7 @@ export const wordCountColumn = { export const sectorColumn = { key: 'sector_name', - label: 'Sector', + label: 'Topic Area', sortable: false, width: '150px', }; diff --git a/frontend/src/pages/Planner/Clusters.tsx b/frontend/src/pages/Planner/Clusters.tsx index dd7d565b..52b7b1a3 100644 --- a/frontend/src/pages/Planner/Clusters.tsx +++ b/frontend/src/pages/Planner/Clusters.tsx @@ -444,15 +444,15 @@ export default function Clusters() { // Planner navigation tabs const plannerTabs = [ - { label: 'Keywords', path: '/planner/keywords', icon: }, - { label: 'Clusters', path: '/planner/clusters', icon: }, + { label: 'Keywords (individual terms)', path: '/planner/keywords', icon: }, + { label: 'Topics (keyword groups)', path: '/planner/clusters', icon: }, { label: 'Ideas', path: '/planner/ideas', icon: }, ]; return ( <> , color: 'purple' }} navigation={} workflowInsights={workflowInsights} diff --git a/frontend/src/pages/Planner/Keywords.tsx b/frontend/src/pages/Planner/Keywords.tsx index c9266a5d..a0a92467 100644 --- a/frontend/src/pages/Planner/Keywords.tsx +++ b/frontend/src/pages/Planner/Keywords.tsx @@ -500,12 +500,12 @@ export default function Keywords() { if (pipelineReadiness < 30) { insights.push({ type: 'warning' as const, - message: `Pipeline readiness at ${pipelineReadiness}% - Most keywords need clustering before content ideation can begin`, + message: `You're ${pipelineReadiness}% ready to start writing - Next step: Group your keywords by topic (${unclusteredCount} keywords are ready to organize)`, }); } else if (pipelineReadiness < 60) { insights.push({ type: 'info' as const, - message: `Pipeline readiness at ${pipelineReadiness}% - Clustering progress is moderate, continue organizing keywords`, + message: `You're ${pipelineReadiness}% ready to start writing - Clustering progress is moderate, continue organizing keywords`, }); } else if (pipelineReadiness >= 85) { insights.push({ @@ -611,15 +611,15 @@ export default function Keywords() { // Planner navigation tabs const plannerTabs = [ - { label: 'Keywords', path: '/planner/keywords', icon: }, - { label: 'Clusters', path: '/planner/clusters', icon: }, + { label: 'Keywords (individual terms)', path: '/planner/keywords', icon: }, + { label: 'Topics (keyword groups)', path: '/planner/clusters', icon: }, { label: 'Ideas', path: '/planner/ideas', icon: }, ]; return ( <> , color: 'green' }} navigation={} workflowInsights={workflowInsights}