salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX Text Improvements: Dashboard, Sidebar Navigation, and Sites Management

Browse Source 
IMPROVEMENTS:
- Dashboard page: Updated all user-facing text to be more welcoming and clear
  - Changed 'Dashboard' to 'Your Content Creation Dashboard'
  - Updated 'Last updated' to 'Last checked'
  - Added explanatory subtitle to banner
  - Renamed 'Your Progress' card to 'Your Content Journey'
  - Enhanced all metric card descriptions (Keywords, Clusters, Ideas, Content, Published)
  - Updated Quick Actions with action-oriented titles and helpful descriptions
  - Updated Workflow Modules section

- Sidebar Navigation: Made menu items and section headers more intuitive
  - Section headers: SETUP → GET STARTED, WORKFLOW → CREATE CONTENT, SETTINGS → CONFIGURATION, HELP & DOCS → HELP & LEARNING
  - Menu items: 'Add Keywords' → 'Find Keywords', 'Thinker' → 'AI Writer Setup', 'Planner' → 'Organize Keywords', 'Writer' → 'Write Articles', 'Automation' → 'Automate Everything'
  - Account section: 'Account Settings' → 'Your Account Info', 'Team Management' → 'Your Team', 'Plans & Billing' → 'Your Subscription', 'Usage & Analytics' → 'Your Usage'
  - Settings: 'Profile Settings' → 'Your Profile', 'Publishing' → 'Where to Publish'

- Sites Management page: Friendlier text and clearer actions
  - Page title: 'Sites Management' → 'Your Websites'
  - Button: 'Add Site' → '+ Add Another Website' (with tooltip)
  - Filters: 'All Types' → 'Show All Types', etc.
  - Card buttons: 'Dashboard' → 'View Site Dashboard', 'Content' → 'Manage Content', 'Settings' → 'Configure Site' (all with tooltips)

NO CODE CHANGES: Only visible user-facing text updates, no backend or architecture changes
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-25 06:05:48 +00:00
parent cb9f45a701
commit 28e208a906
3 changed files with 62 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/layout/AppSidebar.tsx
View File

@@ -66,7 +66,7 @@ const AppSidebar: React.FC = () => {
const setupItems: NavItem[] = [ const setupItems: NavItem[] = [
{ {
icon: <DocsIcon />, icon: <DocsIcon />,
name: "Add Keywords", name: "Find Keywords",
path: "/setup/add-keywords", path: "/setup/add-keywords",
}, },
]; ];
@@ -75,7 +75,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('site_builder')) { if (isModuleEnabled('site_builder')) {
setupItems.push({ setupItems.push({
icon: <GridIcon />, icon: <GridIcon />,
name: "Sites", name: "Your Websites",
path: "/sites", // Submenus shown as in-page navigation path: "/sites", // Submenus shown as in-page navigation
}); });
} }
@@ -84,7 +84,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('thinker')) { if (isModuleEnabled('thinker')) {
setupItems.push({ setupItems.push({
icon: <BoltIcon />, icon: <BoltIcon />,
name: "Thinker", name: "AI Writer Setup",
path: "/thinker/prompts", // Default to prompts, submenus shown as in-page navigation path: "/thinker/prompts", // Default to prompts, submenus shown as in-page navigation
}); });
} }
@@ -96,7 +96,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('planner')) { if (isModuleEnabled('planner')) {
workflowItems.push({ workflowItems.push({
icon: <ListIcon />, icon: <ListIcon />,
name: "Planner", name: "Organize Keywords",
path: "/planner/keywords", // Default to keywords, submenus shown as in-page navigation path: "/planner/keywords", // Default to keywords, submenus shown as in-page navigation
}); });
} }
@@ -105,7 +105,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('writer')) { if (isModuleEnabled('writer')) {
workflowItems.push({ workflowItems.push({
icon: <TaskIcon />, icon: <TaskIcon />,
name: "Writer", name: "Write Articles",
path: "/writer/tasks", // Default to tasks, submenus shown as in-page navigation path: "/writer/tasks", // Default to tasks, submenus shown as in-page navigation
}); });
} }
@@ -114,7 +114,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('automation')) { if (isModuleEnabled('automation')) {
workflowItems.push({ workflowItems.push({
icon: <BoltIcon />, icon: <BoltIcon />,
name: "Automation", name: "Automate Everything",
path: "/automation", path: "/automation",
}); });
} }
@@ -150,44 +150,44 @@ const AppSidebar: React.FC = () => {
], ],
}, },
{ {
label: "SETUP", label: "GET STARTED",
items: setupItems, items: setupItems,
}, },
{ {
label: "WORKFLOW", label: "CREATE CONTENT",
items: workflowItems, items: workflowItems,
}, },
{ {
label: "ACCOUNT", label: "MANAGE ACCOUNT",
items: [ items: [
{ {
icon: <UserCircleIcon />, icon: <UserCircleIcon />,
name: "Account Settings", name: "Your Account Info",
path: "/account/settings", path: "/account/settings",
}, },
{ {
icon: <UserIcon />, icon: <UserIcon />,
name: "Team Management", name: "Your Team",
path: "/account/team", path: "/account/team",
}, },
{ {
icon: <DollarLineIcon />, icon: <DollarLineIcon />,
name: "Plans & Billing", name: "Your Subscription",
path: "/account/plans", path: "/account/plans",
}, },
{ {
icon: <PieChartIcon />, icon: <PieChartIcon />,
name: "Usage & Analytics", name: "Your Usage",
path: "/account/usage", path: "/account/usage",
}, },
], ],
}, },
{ {
label: "SETTINGS", label: "CONFIGURATION",
items: [ items: [
{ {
icon: <UserCircleIcon />, icon: <UserCircleIcon />,
name: "Profile Settings", name: "Your Profile",
path: "/settings/profile", path: "/settings/profile",
}, },
{ {
@@ -197,7 +197,7 @@ const AppSidebar: React.FC = () => {
}, },
{ {
icon: <PageIcon />, icon: <PageIcon />,
name: "Publishing", name: "Where to Publish",
path: "/settings/publishing", path: "/settings/publishing",
}, },
{ {
@@ -208,7 +208,7 @@ const AppSidebar: React.FC = () => {
], ],
}, },
{ {
label: "HELP & DOCS", label: "HELP & LEARNING",
items: [ items: [
{ {
icon: <DocsIcon />, icon: <DocsIcon />,

60
frontend/src/pages/Dashboard/Home.tsx
View File

@@ -592,10 +592,10 @@ export default function Home() {
{/* Custom Header with Site Selector and Refresh */} {/* Custom Header with Site Selector and Refresh */}
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6"> <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
<div className="flex-1"> <div className="flex-1">
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Dashboard</h2> <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Your Content Creation Dashboard</h2>
{lastUpdated && ( {lastUpdated && (
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1"> <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
Last updated: {lastUpdated.toLocaleTimeString()} Last checked: {lastUpdated.toLocaleTimeString()}
</p> </p>
)} )}
</div> </div>
@@ -610,6 +610,7 @@ export default function Home() {
)} )}
<button <button
onClick={fetchAppInsights} onClick={fetchAppInsights}
title="Click to get the latest updates on your content creation progress"
className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors" className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
> >
Refresh Refresh
@@ -627,7 +628,7 @@ export default function Home() {
AI-Powered Content Creation Workflow AI-Powered Content Creation Workflow
</h1> </h1>
<p className="text-lg text-white/90"> <p className="text-lg text-white/90">
Transform keywords into published content with intelligent automation. Your complete toolkit for finding topics, creating content, and publishing it to your site - all automated
</p> </p>
</div> </div>
{/* Add Site Button and Site Count in Single Row - Right Side */} {/* Add Site Button and Site Count in Single Row - Right Side */}
@@ -636,7 +637,7 @@ export default function Home() {
<div className="text-right"> <div className="text-right">
{sites.length > 1 ? ( {sites.length > 1 ? (
<div className="text-3xl font-bold text-white"> <div className="text-3xl font-bold text-white">
{sites.length}/{maxSites || '∞'} Sites {sites.length} of {maxSites || '∞'} Sites Active
</div> </div>
) : ( ) : (
<div className="text-xl font-semibold text-white/90"> <div className="text-xl font-semibold text-white/90">
@@ -679,12 +680,12 @@ export default function Home() {
<div className="space-y-6"> <div className="space-y-6">
{/* Progress Flow - Circular Design with Progress Bar */} {/* Progress Flow - Circular Design with Progress Bar */}
<ComponentCard title="Your Progress" desc="Track your content creation workflow completion"> <ComponentCard title="Your Content Journey" desc="See how far you've come in creating and publishing content">
{/* Percentage and Progress Bar */} {/* Percentage and Progress Bar */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-sm font-medium text-gray-700 dark:text-gray-300"> <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
Overall Completion Overall Completion: {progress.completionPercentage}% - You're making great progress!
</span> </span>
<span className="text-2xl font-bold text-brand-600 dark:text-brand-400"> <span className="text-2xl font-bold text-brand-600 dark:text-brand-400">
{progress.completionPercentage}% {progress.completionPercentage}%
@@ -696,6 +697,9 @@ export default function Home() {
color="primary" color="primary"
className="h-4" className="h-4"
/> />
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
(This shows your progress from keywords through to published content)
</p>
</div> </div>
{/* Icon-based Progress Flow */} {/* Icon-based Progress Flow */}
@@ -708,7 +712,7 @@ export default function Home() {
<div className="text-center"> <div className="text-center">
<div className="text-sm font-semibold text-gray-800 dark:text-white">Site & Sectors</div> <div className="text-sm font-semibold text-gray-800 dark:text-white">Site & Sectors</div>
<div className="text-lg font-bold text-gray-900 dark:text-white">{sites.filter(s => s.active_sectors_count > 0).length}</div> <div className="text-lg font-bold text-gray-900 dark:text-white">{sites.filter(s => s.active_sectors_count > 0).length}</div>
<div className="text-xs text-gray-500 dark:text-gray-400">Industry & sectors configured</div> <div className="text-xs text-gray-500 dark:text-gray-400">Niches you're targeting - Industry & sectors set up</div>
</div> </div>
</Link> </Link>
@@ -719,7 +723,7 @@ export default function Home() {
<div className="text-center"> <div className="text-center">
<div className="text-sm font-semibold text-gray-800">Keywords</div> <div className="text-sm font-semibold text-gray-800">Keywords</div>
<div className="text-lg font-bold text-blue-600">{progress.keywordsCount}</div> <div className="text-lg font-bold text-blue-600">{progress.keywordsCount}</div>
<div className="text-xs text-gray-500">Keywords added from opportunities</div> <div className="text-xs text-gray-500">Search terms to target - Keywords added from research</div>
</div> </div>
</Link> </Link>
@@ -730,7 +734,7 @@ export default function Home() {
<div className="text-center"> <div className="text-center">
<div className="text-sm font-semibold text-gray-800">Clusters</div> <div className="text-sm font-semibold text-gray-800">Clusters</div>
<div className="text-lg font-bold text-purple-600">{progress.clustersCount}</div> <div className="text-lg font-bold text-purple-600">{progress.clustersCount}</div>
<div className="text-xs text-gray-500">Keywords grouped into clusters</div> <div className="text-xs text-gray-500">Topic groups - Keywords organized by theme</div>
</div> </div>
</Link> </Link>
@@ -741,7 +745,7 @@ export default function Home() {
<div className="text-center"> <div className="text-center">
<div className="text-sm font-semibold text-gray-800">Ideas</div> <div className="text-sm font-semibold text-gray-800">Ideas</div>
<div className="text-lg font-bold text-orange-600">{progress.ideasCount}</div> <div className="text-lg font-bold text-orange-600">{progress.ideasCount}</div>
<div className="text-xs text-gray-500">Content ideas and outlines</div> <div className="text-xs text-gray-500">Article outlines ready - Ideas and outlines created</div>
</div> </div>
</Link> </Link>
@@ -752,7 +756,7 @@ export default function Home() {
<div className="text-center"> <div className="text-center">
<div className="text-sm font-semibold text-gray-800">Content</div> <div className="text-sm font-semibold text-gray-800">Content</div>
<div className="text-lg font-bold text-green-600">{progress.contentCount}</div> <div className="text-lg font-bold text-green-600">{progress.contentCount}</div>
<div className="text-xs text-gray-500">Content pieces + images created</div> <div className="text-xs text-gray-500">Articles created - Written content + images ready</div>
</div> </div>
</Link> </Link>
@@ -763,7 +767,7 @@ export default function Home() {
<div className="text-center"> <div className="text-center">
<div className="text-sm font-semibold text-gray-800">Published</div> <div className="text-sm font-semibold text-gray-800">Published</div>
<div className="text-lg font-bold text-indigo-600">{progress.publishedCount}</div> <div className="text-lg font-bold text-indigo-600">{progress.publishedCount}</div>
<div className="text-xs text-gray-500">Content published to site</div> <div className="text-xs text-gray-500">Live on your site - Articles published and active</div>
</div> </div>
</Link> </Link>
</div> </div>
@@ -781,8 +785,8 @@ export default function Home() {
<ListIcon className="h-6 w-6" /> <ListIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="font-semibold text-gray-900">Keyword Research</h4> <h4 className="font-semibold text-gray-900">Find Keywords to Rank For</h4>
<p className="text-xs text-gray-600">Discover opportunities</p> <p className="text-xs text-gray-600">Search for topics your audience wants to read about</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" /> <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link> </Link>
@@ -795,8 +799,8 @@ export default function Home() {
<GroupIcon className="h-6 w-6" /> <GroupIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="font-semibold text-gray-900">Clustering & Ideas</h4> <h4 className="font-semibold text-gray-900">Organize Topics & Create Outlines</h4>
<p className="text-xs text-gray-600">Organize strategy</p> <p className="text-xs text-gray-600">Group keywords and create article plans</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" /> <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link> </Link>
@@ -809,8 +813,8 @@ export default function Home() {
<PencilIcon className="h-6 w-6" /> <PencilIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="font-semibold text-gray-900">Content Generation</h4> <h4 className="font-semibold text-gray-900">Write Articles with AI</h4>
<p className="text-xs text-gray-600">Create content</p> <p className="text-xs text-gray-600">Generate full articles ready to publish</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" /> <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link> </Link>
@@ -823,8 +827,8 @@ export default function Home() {
<PlugInIcon className="h-6 w-6" /> <PlugInIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="font-semibold text-gray-900">Internal Linking</h4> <h4 className="font-semibold text-gray-900">Connect Your Articles</h4>
<p className="text-xs text-gray-600">Link content</p> <p className="text-xs text-gray-600">Automatically link related articles for better SEO</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" /> <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link> </Link>
@@ -837,8 +841,8 @@ export default function Home() {
<BoltIcon className="h-6 w-6" /> <BoltIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="font-semibold text-gray-900">Content Optimization</h4> <h4 className="font-semibold text-gray-900">Make Articles Better</h4>
<p className="text-xs text-gray-600">Optimize content</p> <p className="text-xs text-gray-600">Improve readability, keywords, and search rankings</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" /> <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link> </Link>
@@ -1066,10 +1070,10 @@ export default function Home() {
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90"> <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Image Generation Create Article Images
</h4> </h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Generate custom images for your content using AI. Create relevant, high-quality images that match your content theme and brand style. Images are automatically optimized and can be added directly to your content pieces. Generate custom images for your content using AI. Create relevant, high-quality images that match your content theme and brand style. Images are automatically optimized and can be added directly to your articles.
</p> </p>
</div> </div>
</div> </div>
@@ -1083,10 +1087,10 @@ export default function Home() {
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90"> <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Automation Run Everything Automatically
</h4> </h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Set up automated workflows to streamline your content creation process. Schedule content generation, automatic publishing, keyword monitoring, and other tasks to save time and maintain consistency. Set up schedules to create and publish content on its own. Automate keyword monitoring, content generation, image creation, and publishing to save time and maintain consistency across your site.
</p> </p>
</div> </div>
</div> </div>
@@ -1100,10 +1104,10 @@ export default function Home() {
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90"> <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Prompts Customize Your AI Writer
</h4> </h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Create and manage custom AI prompts to guide content generation. Customize prompts for different content types, industries, and writing styles. Save and reuse your best prompts for consistent, high-quality output. Create custom instructions for how AI writes your content. Design prompts for different content types, industries, and writing styles. Save and reuse your best prompts for consistent, high-quality output.
</p> </p>
</div> </div>
</div> </div>

22
frontend/src/pages/Sites/List.tsx
View File

@@ -275,7 +275,7 @@ export default function SiteList() {
}; };
const SITE_TYPES = [ const SITE_TYPES = [
{ value: '', label: 'All Types' }, { value: '', label: 'Show All Types' },
{ value: 'marketing', label: 'Marketing' }, { value: 'marketing', label: 'Marketing' },
{ value: 'ecommerce', label: 'Ecommerce' }, { value: 'ecommerce', label: 'Ecommerce' },
{ value: 'blog', label: 'Blog' }, { value: 'blog', label: 'Blog' },
@@ -284,7 +284,7 @@ export default function SiteList() {
]; ];
const HOSTING_TYPES = [ const HOSTING_TYPES = [
{ value: '', label: 'All Hosting' }, { value: '', label: 'Show All Hosting' },
{ value: 'igny8_sites', label: 'IGNY8 Sites' }, { value: 'igny8_sites', label: 'IGNY8 Sites' },
{ value: 'wordpress', label: 'WordPress' }, { value: 'wordpress', label: 'WordPress' },
{ value: 'shopify', label: 'Shopify' }, { value: 'shopify', label: 'Shopify' },
@@ -292,7 +292,7 @@ export default function SiteList() {
]; ];
const STATUS_OPTIONS = [ const STATUS_OPTIONS = [
{ value: '', label: 'All Status' }, { value: '', label: 'Show All Status' },
{ value: 'active', label: 'Active' }, { value: 'active', label: 'Active' },
{ value: 'inactive', label: 'Inactive' }, { value: 'inactive', label: 'Inactive' },
]; ];
@@ -444,25 +444,28 @@ export default function SiteList() {
variant="primary" variant="primary"
size="sm" size="sm"
startIcon={<EyeIcon className="w-4 h-4" />} startIcon={<EyeIcon className="w-4 h-4" />}
title="See overview and statistics for this site"
> >
Dashboard View Site Dashboard
</Button> </Button>
<Button <Button
onClick={() => navigate(`/sites/${site.id}/content`)} onClick={() => navigate(`/sites/${site.id}/content`)}
variant="secondary" variant="secondary"
size="sm" size="sm"
startIcon={<FileIcon className="w-4 h-4" />} startIcon={<FileIcon className="w-4 h-4" />}
title="Add, edit, or view all articles for this site"
> >
Content Manage Content
</Button> </Button>
<Button <Button
onClick={() => navigate(`/sites/${site.id}/settings`)} onClick={() => navigate(`/sites/${site.id}/settings`)}
variant="outline" variant="outline"
size="sm" size="sm"
startIcon={<PlugInIcon className="w-4 h-4" />} startIcon={<PlugInIcon className="w-4 h-4" />}
title="Update connection details and publishing settings"
className="col-span-2" className="col-span-2"
> >
Settings Configure Site
</Button> </Button>
</div> </div>
</div> </div>
@@ -491,9 +494,9 @@ export default function SiteList() {
return ( return (
<div className="p-6"> <div className="p-6">
<PageMeta title="Sites Management - IGNY8" /> <PageMeta title="Your Websites - IGNY8" />
<PageHeader <PageHeader
title="Sites Management" title="Your Websites"
badge={{ icon: <GridIcon />, color: 'blue' }} badge={{ icon: <GridIcon />, color: 'blue' }}
hideSiteSector={true} hideSiteSector={true}
navigation={<ModuleNavigationTabs tabs={sitesTabs} />} navigation={<ModuleNavigationTabs tabs={sitesTabs} />}
@@ -507,8 +510,9 @@ export default function SiteList() {
variant="success" variant="success"
size="md" size="md"
startIcon={<PlusIcon className="w-5 h-5" />} startIcon={<PlusIcon className="w-5 h-5" />}
title="Connect a new WordPress or Shopify site to create content for it"
> >
Add Site + Add Another Website
</Button> </Button>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">