UX: Update Dashboard and Sidebar navigation with user-friendly text
- Dashboard: Changed title to 'Your Content Creation Dashboard' - Dashboard: Updated 'Your Progress' to 'Your Content Journey' - Dashboard: Improved metric card descriptions for clarity - Dashboard: Simplified Quick Action labels (Find Keywords, Organize Topics, etc.) - Sidebar: Updated section headers (GET STARTED, CREATE CONTENT, PREFERENCES, SUPPORT) - Sidebar: Changed menu labels (Find Keywords, Your Websites, Organize Keywords, Create Content) - Sidebar: Renamed 'Help & Documentation' to 'Help Center'
This commit is contained in:
@@ -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: "Content Strategy",
|
||||||
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: "Create Content",
|
||||||
path: "/writer/tasks", // Default to tasks, submenus shown as in-page navigation
|
path: "/writer/tasks", // Default to tasks, submenus shown as in-page navigation
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -150,11 +150,11 @@ const AppSidebar: React.FC = () => {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "SETUP",
|
label: "GET STARTED",
|
||||||
items: setupItems,
|
items: setupItems,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "WORKFLOW",
|
label: "CREATE CONTENT",
|
||||||
items: workflowItems,
|
items: workflowItems,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -183,7 +183,7 @@ const AppSidebar: React.FC = () => {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "SETTINGS",
|
label: "PREFERENCES",
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
icon: <UserCircleIcon />,
|
icon: <UserCircleIcon />,
|
||||||
@@ -208,11 +208,11 @@ const AppSidebar: React.FC = () => {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "HELP & DOCS",
|
label: "SUPPORT",
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
icon: <DocsIcon />,
|
icon: <DocsIcon />,
|
||||||
name: "Help & Documentation",
|
name: "Help Center",
|
||||||
path: "/help",
|
path: "/help",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -592,7 +592,7 @@ 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 updated: {lastUpdated.toLocaleTimeString()}
|
||||||
@@ -679,7 +679,7 @@ 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="Track your content creation progress from ideas to published articles">
|
||||||
{/* 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">
|
||||||
@@ -781,8 +781,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</h4>
|
||||||
<p className="text-xs text-gray-600">Discover opportunities</p>
|
<p className="text-xs text-gray-600">Search for topics</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 +795,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</h4>
|
||||||
<p className="text-xs text-gray-600">Organize strategy</p>
|
<p className="text-xs text-gray-600">Group & plan content</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 +809,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">Create Articles</h4>
|
||||||
<p className="text-xs text-gray-600">Create content</p>
|
<p className="text-xs text-gray-600">Generate content</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 +823,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">Add Links</h4>
|
||||||
<p className="text-xs text-gray-600">Link content</p>
|
<p className="text-xs text-gray-600">Connect articles</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 +837,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">Improve Content</h4>
|
||||||
<p className="text-xs text-gray-600">Optimize content</p>
|
<p className="text-xs text-gray-600">Boost performance</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>
|
||||||
@@ -848,18 +848,18 @@ export default function Home() {
|
|||||||
{/* Key Metrics */}
|
{/* Key Metrics */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
<EnhancedMetricCard
|
<EnhancedMetricCard
|
||||||
title="Total Keywords"
|
title="Your Keywords"
|
||||||
value={insights?.totalKeywords.toLocaleString() || "0"}
|
value={insights?.totalKeywords.toLocaleString() || "0"}
|
||||||
subtitle={`${insights?.totalClusters || 0} clusters • ${insights?.totalIdeas || 0} ideas`}
|
subtitle={`Organized into ${insights?.totalClusters || 0} topic groups with ${insights?.totalIdeas || 0} content ideas`}
|
||||||
icon={<ListIcon className="size-6" />}
|
icon={<ListIcon className="size-6" />}
|
||||||
accentColor="blue"
|
accentColor="blue"
|
||||||
trend={0}
|
trend={0}
|
||||||
href="/planner/keywords"
|
href="/planner/keywords"
|
||||||
/>
|
/>
|
||||||
<EnhancedMetricCard
|
<EnhancedMetricCard
|
||||||
title="Content Pieces"
|
title="Articles Created"
|
||||||
value={insights?.totalContent.toLocaleString() || "0"}
|
value={insights?.totalContent.toLocaleString() || "0"}
|
||||||
subtitle={`${insights?.publishedContent || 0} published • ${insights?.contentThisWeek || 0} this week`}
|
subtitle={`${insights?.publishedContent || 0} live on your site, ${insights?.contentThisWeek || 0} added this week`}
|
||||||
icon={<FileTextIcon className="size-6" />}
|
icon={<FileTextIcon className="size-6" />}
|
||||||
accentColor="green"
|
accentColor="green"
|
||||||
trend={0}
|
trend={0}
|
||||||
@@ -868,7 +868,7 @@ export default function Home() {
|
|||||||
<EnhancedMetricCard
|
<EnhancedMetricCard
|
||||||
title="Images Generated"
|
title="Images Generated"
|
||||||
value={insights?.totalImages.toLocaleString() || "0"}
|
value={insights?.totalImages.toLocaleString() || "0"}
|
||||||
subtitle={`${insights?.totalContent || 0} content pieces • ${insights?.totalTasks || 0} tasks`}
|
subtitle={`AI-created images for ${insights?.totalContent || 0} articles`}
|
||||||
icon={<FileIcon className="size-6" />}
|
icon={<FileIcon className="size-6" />}
|
||||||
accentColor="purple"
|
accentColor="purple"
|
||||||
trend={0}
|
trend={0}
|
||||||
@@ -877,7 +877,7 @@ export default function Home() {
|
|||||||
<EnhancedMetricCard
|
<EnhancedMetricCard
|
||||||
title="Workflow Completion"
|
title="Workflow Completion"
|
||||||
value={`${insights?.workflowCompletionRate || 0}%`}
|
value={`${insights?.workflowCompletionRate || 0}%`}
|
||||||
subtitle={`${insights?.totalKeywords || 0} keywords → ${insights?.publishedContent || 0} published`}
|
subtitle={`From ${insights?.totalKeywords || 0} keywords to ${insights?.publishedContent || 0} published articles`}
|
||||||
icon={<CheckCircleIcon className="size-6" />}
|
icon={<CheckCircleIcon className="size-6" />}
|
||||||
accentColor="success"
|
accentColor="success"
|
||||||
trend={0}
|
trend={0}
|
||||||
|
|||||||
Reference in New Issue
Block a user