UX Text Improvements: Dashboard, Sidebar Navigation, and Sites Management
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)
@@ -66,7 +66,7 @@ const AppSidebar: React.FC = () => {
|
||||
const setupItems: NavItem[] = [
|
||||
{
|
||||
icon: <DocsIcon />,
|
||||
name: "Add Keywords",
|
||||
name: "Find Keywords",
|
||||
path: "/setup/add-keywords",
|
||||
},
|
||||
];
|
||||
@@ -75,7 +75,7 @@ const AppSidebar: React.FC = () => {
|
||||
if (isModuleEnabled('site_builder')) {
|
||||
setupItems.push({
|
||||
icon: <GridIcon />,
|
||||
name: "Sites",
|
||||
name: "Your Websites",
|
||||
path: "/sites", // Submenus shown as in-page navigation
|
||||
});
|
||||
}
|
||||
@@ -84,7 +84,7 @@ const AppSidebar: React.FC = () => {
|
||||
if (isModuleEnabled('thinker')) {
|
||||
setupItems.push({
|
||||
icon: <BoltIcon />,
|
||||
name: "Thinker",
|
||||
name: "AI Writer Setup",
|
||||
path: "/thinker/prompts", // Default to prompts, submenus shown as in-page navigation
|
||||
});
|
||||
}
|
||||
@@ -96,7 +96,7 @@ const AppSidebar: React.FC = () => {
|
||||
if (isModuleEnabled('planner')) {
|
||||
workflowItems.push({
|
||||
icon: <ListIcon />,
|
||||
name: "Planner",
|
||||
name: "Organize Keywords",
|
||||
path: "/planner/keywords", // Default to keywords, submenus shown as in-page navigation
|
||||
});
|
||||
}
|
||||
@@ -105,7 +105,7 @@ const AppSidebar: React.FC = () => {
|
||||
if (isModuleEnabled('writer')) {
|
||||
workflowItems.push({
|
||||
icon: <TaskIcon />,
|
||||
name: "Writer",
|
||||
name: "Write Articles",
|
||||
path: "/writer/tasks", // Default to tasks, submenus shown as in-page navigation
|
||||
});
|
||||
}
|
||||
@@ -114,7 +114,7 @@ const AppSidebar: React.FC = () => {
|
||||
if (isModuleEnabled('automation')) {
|
||||
workflowItems.push({
|
||||
icon: <BoltIcon />,
|
||||
name: "Automation",
|
||||
name: "Automate Everything",
|
||||
path: "/automation",
|
||||
});
|
||||
}
|
||||
@@ -150,44 +150,44 @@ const AppSidebar: React.FC = () => {
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "SETUP",
|
||||
label: "GET STARTED",
|
||||
items: setupItems,
|
||||
},
|
||||
{
|
||||
label: "WORKFLOW",
|
||||
label: "CREATE CONTENT",
|
||||
items: workflowItems,
|
||||
},
|
||||
{
|
||||
label: "ACCOUNT",
|
||||
label: "MANAGE ACCOUNT",
|
||||
items: [
|
||||
{
|
||||
icon: <UserCircleIcon />,
|
||||
name: "Account Settings",
|
||||
name: "Your Account Info",
|
||||
path: "/account/settings",
|
||||
},
|
||||
{
|
||||
icon: <UserIcon />,
|
||||
name: "Team Management",
|
||||
name: "Your Team",
|
||||
path: "/account/team",
|
||||
},
|
||||
{
|
||||
icon: <DollarLineIcon />,
|
||||
name: "Plans & Billing",
|
||||
name: "Your Subscription",
|
||||
path: "/account/plans",
|
||||
},
|
||||
{
|
||||
icon: <PieChartIcon />,
|
||||
name: "Usage & Analytics",
|
||||
name: "Your Usage",
|
||||
path: "/account/usage",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "SETTINGS",
|
||||
label: "CONFIGURATION",
|
||||
items: [
|
||||
{
|
||||
icon: <UserCircleIcon />,
|
||||
name: "Profile Settings",
|
||||
name: "Your Profile",
|
||||
path: "/settings/profile",
|
||||
},
|
||||
{
|
||||
@@ -197,7 +197,7 @@ const AppSidebar: React.FC = () => {
|
||||
},
|
||||
{
|
||||
icon: <PageIcon />,
|
||||
name: "Publishing",
|
||||
name: "Where to Publish",
|
||||
path: "/settings/publishing",
|
||||
},
|
||||
{
|
||||
@@ -208,7 +208,7 @@ const AppSidebar: React.FC = () => {
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "HELP & DOCS",
|
||||
label: "HELP & LEARNING",
|
||||
items: [
|
||||
{
|
||||
icon: <DocsIcon />,
|
||||
|
||||
@@ -592,10 +592,10 @@ export default function Home() {
|
||||
{/* 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-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 && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
Last updated: {lastUpdated.toLocaleTimeString()}
|
||||
Last checked: {lastUpdated.toLocaleTimeString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -610,6 +610,7 @@ export default function Home() {
|
||||
)}
|
||||
<button
|
||||
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"
|
||||
>
|
||||
Refresh
|
||||
@@ -627,7 +628,7 @@ export default function Home() {
|
||||
AI-Powered Content Creation Workflow
|
||||
</h1>
|
||||
<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>
|
||||
</div>
|
||||
{/* Add Site Button and Site Count in Single Row - Right Side */}
|
||||
@@ -636,7 +637,7 @@ export default function Home() {
|
||||
<div className="text-right">
|
||||
{sites.length > 1 ? (
|
||||
<div className="text-3xl font-bold text-white">
|
||||
{sites.length}/{maxSites || '∞'} Sites
|
||||
{sites.length} of {maxSites || '∞'} Sites Active
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xl font-semibold text-white/90">
|
||||
@@ -679,12 +680,12 @@ export default function Home() {
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* 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 */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<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 className="text-2xl font-bold text-brand-600 dark:text-brand-400">
|
||||
{progress.completionPercentage}%
|
||||
@@ -696,6 +697,9 @@ export default function Home() {
|
||||
color="primary"
|
||||
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>
|
||||
|
||||
{/* Icon-based Progress Flow */}
|
||||
@@ -708,7 +712,7 @@ export default function Home() {
|
||||
<div className="text-center">
|
||||
<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-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>
|
||||
</Link>
|
||||
|
||||
@@ -719,7 +723,7 @@ export default function Home() {
|
||||
<div className="text-center">
|
||||
<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-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>
|
||||
</Link>
|
||||
|
||||
@@ -730,7 +734,7 @@ export default function Home() {
|
||||
<div className="text-center">
|
||||
<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-xs text-gray-500">Keywords grouped into clusters</div>
|
||||
<div className="text-xs text-gray-500">Topic groups - Keywords organized by theme</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -741,7 +745,7 @@ export default function Home() {
|
||||
<div className="text-center">
|
||||
<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-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>
|
||||
</Link>
|
||||
|
||||
@@ -752,7 +756,7 @@ export default function Home() {
|
||||
<div className="text-center">
|
||||
<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-xs text-gray-500">Content pieces + images created</div>
|
||||
<div className="text-xs text-gray-500">Articles created - Written content + images ready</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -763,7 +767,7 @@ export default function Home() {
|
||||
<div className="text-center">
|
||||
<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-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>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -781,8 +785,8 @@ export default function Home() {
|
||||
<ListIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-gray-900">Keyword Research</h4>
|
||||
<p className="text-xs text-gray-600">Discover opportunities</p>
|
||||
<h4 className="font-semibold text-gray-900">Find Keywords to Rank For</h4>
|
||||
<p className="text-xs text-gray-600">Search for topics your audience wants to read about</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
@@ -795,8 +799,8 @@ export default function Home() {
|
||||
<GroupIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-gray-900">Clustering & Ideas</h4>
|
||||
<p className="text-xs text-gray-600">Organize strategy</p>
|
||||
<h4 className="font-semibold text-gray-900">Organize Topics & Create Outlines</h4>
|
||||
<p className="text-xs text-gray-600">Group keywords and create article plans</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
@@ -809,8 +813,8 @@ export default function Home() {
|
||||
<PencilIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-gray-900">Content Generation</h4>
|
||||
<p className="text-xs text-gray-600">Create content</p>
|
||||
<h4 className="font-semibold text-gray-900">Write Articles with AI</h4>
|
||||
<p className="text-xs text-gray-600">Generate full articles ready to publish</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
@@ -823,8 +827,8 @@ export default function Home() {
|
||||
<PlugInIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-gray-900">Internal Linking</h4>
|
||||
<p className="text-xs text-gray-600">Link content</p>
|
||||
<h4 className="font-semibold text-gray-900">Connect Your Articles</h4>
|
||||
<p className="text-xs text-gray-600">Automatically link related articles for better SEO</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
@@ -837,8 +841,8 @@ export default function Home() {
|
||||
<BoltIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-gray-900">Content Optimization</h4>
|
||||
<p className="text-xs text-gray-600">Optimize content</p>
|
||||
<h4 className="font-semibold text-gray-900">Make Articles Better</h4>
|
||||
<p className="text-xs text-gray-600">Improve readability, keywords, and search rankings</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
@@ -1066,10 +1070,10 @@ export default function Home() {
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
|
||||
Image Generation
|
||||
Create Article Images
|
||||
</h4>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1083,10 +1087,10 @@ export default function Home() {
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
|
||||
Automation
|
||||
Run Everything Automatically
|
||||
</h4>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1100,10 +1104,10 @@ export default function Home() {
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
|
||||
Prompts
|
||||
Customize Your AI Writer
|
||||
</h4>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -275,7 +275,7 @@ export default function SiteList() {
|
||||
};
|
||||
|
||||
const SITE_TYPES = [
|
||||
{ value: '', label: 'All Types' },
|
||||
{ value: '', label: 'Show All Types' },
|
||||
{ value: 'marketing', label: 'Marketing' },
|
||||
{ value: 'ecommerce', label: 'Ecommerce' },
|
||||
{ value: 'blog', label: 'Blog' },
|
||||
@@ -284,7 +284,7 @@ export default function SiteList() {
|
||||
];
|
||||
|
||||
const HOSTING_TYPES = [
|
||||
{ value: '', label: 'All Hosting' },
|
||||
{ value: '', label: 'Show All Hosting' },
|
||||
{ value: 'igny8_sites', label: 'IGNY8 Sites' },
|
||||
{ value: 'wordpress', label: 'WordPress' },
|
||||
{ value: 'shopify', label: 'Shopify' },
|
||||
@@ -292,7 +292,7 @@ export default function SiteList() {
|
||||
];
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: '', label: 'All Status' },
|
||||
{ value: '', label: 'Show All Status' },
|
||||
{ value: 'active', label: 'Active' },
|
||||
{ value: 'inactive', label: 'Inactive' },
|
||||
];
|
||||
@@ -444,25 +444,28 @@ export default function SiteList() {
|
||||
variant="primary"
|
||||
size="sm"
|
||||
startIcon={<EyeIcon className="w-4 h-4" />}
|
||||
title="See overview and statistics for this site"
|
||||
>
|
||||
Dashboard
|
||||
View Site Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(`/sites/${site.id}/content`)}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
startIcon={<FileIcon className="w-4 h-4" />}
|
||||
title="Add, edit, or view all articles for this site"
|
||||
>
|
||||
Content
|
||||
Manage Content
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(`/sites/${site.id}/settings`)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
startIcon={<PlugInIcon className="w-4 h-4" />}
|
||||
title="Update connection details and publishing settings"
|
||||
className="col-span-2"
|
||||
>
|
||||
Settings
|
||||
Configure Site
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -491,9 +494,9 @@ export default function SiteList() {
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title="Sites Management - IGNY8" />
|
||||
<PageMeta title="Your Websites - IGNY8" />
|
||||
<PageHeader
|
||||
title="Sites Management"
|
||||
title="Your Websites"
|
||||
badge={{ icon: <GridIcon />, color: 'blue' }}
|
||||
hideSiteSector={true}
|
||||
navigation={<ModuleNavigationTabs tabs={sitesTabs} />}
|
||||
@@ -507,8 +510,9 @@ export default function SiteList() {
|
||||
variant="success"
|
||||
size="md"
|
||||
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>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
|
||||
Reference in New Issue
Block a user