Add guided tour feature to help users navigate the application easily
Implements guided tours using `useTourManager` and adds `data-tour` attributes to Sidebar and DashboardPage components. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c5f0c281-8dd8-4846-b452-4a07bcd21062 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/47ecb46e-13fc-4ae3-8146-3786e1ce2a8b.jpg
This commit is contained in:
@@ -121,7 +121,7 @@ export default function Sidebar({ className }: SidebarProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn("pb-12 min-h-screen", className)}>
|
<div className={cn("pb-12 min-h-screen", className)} data-tour="navigation">
|
||||||
<div className="space-y-4 py-4">
|
<div className="space-y-4 py-4">
|
||||||
<div className="px-3 py-2">
|
<div className="px-3 py-2">
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
@@ -134,6 +134,7 @@ export default function Sidebar({ className }: SidebarProps) {
|
|||||||
<Button
|
<Button
|
||||||
variant={isActive(item.href) ? "secondary" : "ghost"}
|
variant={isActive(item.href) ? "secondary" : "ghost"}
|
||||||
className="w-full justify-start"
|
className="w-full justify-start"
|
||||||
|
data-tour={item.href === "/dashboard" ? "dashboard" : item.href === "/tasks" ? "tasks" : item.href === "/finances" ? "finances" : item.href === "/voice" ? "voice" : item.href === "/ai" ? "ai" : undefined}
|
||||||
>
|
>
|
||||||
<item.icon className="mr-2 h-4 w-4" />
|
<item.icon className="mr-2 h-4 w-4" />
|
||||||
{item.name}
|
{item.name}
|
||||||
|
|||||||
@@ -32,6 +32,11 @@ export default function DashboardPage() {
|
|||||||
const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
|
const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
|
||||||
const { isListening, speak } = useVoiceContext();
|
const { isListening, speak } = useVoiceContext();
|
||||||
const { unreadCount } = useNotifications();
|
const { unreadCount } = useNotifications();
|
||||||
|
const { startTour } = useTourManager();
|
||||||
|
|
||||||
|
const handleStartTour = () => {
|
||||||
|
startTour("main", getMainTourSteps());
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isLoading && !user) {
|
if (!isLoading && !user) {
|
||||||
@@ -92,6 +97,15 @@ export default function DashboardPage() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleStartTour}
|
||||||
|
className="flex items-center space-x-1 text-xs"
|
||||||
|
>
|
||||||
|
<HelpCircle className="w-3 h-3" />
|
||||||
|
<span>Take Tour</span>
|
||||||
|
</Button>
|
||||||
<Badge variant="secondary" className="text-xs">
|
<Badge variant="secondary" className="text-xs">
|
||||||
{user.role === "admin" ? "Admin" : user.role === "pro" ? "Pro" : "Standard"} User
|
{user.role === "admin" ? "Admin" : user.role === "pro" ? "Pro" : "Standard"} User
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|||||||
Reference in New Issue
Block a user