feat: add docs url for each page in page header

Author: x0sina

dashboard/public/statics/locales/en.json

@@ -14,6 +14,7 @@
   "hosts": "Hosts",
   "success": "Success",
   "error": "Error",
+  "tutorial": "View tutorial",
   "username": "Username",
   "modifying": "Modifying...",
   "removing": "Removing...",

dashboard/public/statics/locales/fa.json

@@ -1253,6 +1253,7 @@
   },
   "success": "موفق",
   "error": "خطا",
+  "tutorial": "مشاهده آموزش",
   "theme": {
     "title": "تم",
     "description": "سفارشی‌سازی تم برنامه شما",

dashboard/public/statics/locales/ru.json

@@ -41,6 +41,7 @@
   "hosts": "Хосты",
   "success": "Успешно",
   "error": "Ошибка",
+  "tutorial": "Просмотр руководства",
   "modifying": "Изменение...",
   "removing": "Удаление...",
   "creating": "Создание...",

dashboard/public/statics/locales/zh.json

@@ -12,6 +12,7 @@
   "hosts": "主机",
   "success": "成功",
   "error": "错误",
+  "tutorial": "查看教程",
   "modifying": "修改中...",
   "removing": "删除中...",
   "creating": "正在创建...",

dashboard/src/components/page-header.tsx

@@ -1,8 +1,10 @@
 import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import useDirDetection from '@/hooks/use-dir-detection'
-import { LucideIcon, Plus } from 'lucide-react'
+import { getDocsUrl } from '@/utils/docs-url'
+import { LucideIcon, Plus, HelpCircle } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router'
 
 interface PageHeaderProps {
   title: string
@@ -11,15 +13,41 @@ interface PageHeaderProps {
   onButtonClick?: () => void
   buttonIcon?: LucideIcon
   buttonTooltip?: string
+  tutorialUrl?: string
 }
 
-export default function PageHeader({ title, description, buttonText, onButtonClick, buttonIcon: Icon = Plus, buttonTooltip }: PageHeaderProps) {
+export default function PageHeader({ title, description, buttonText, onButtonClick, buttonIcon: Icon = Plus, buttonTooltip, tutorialUrl }: PageHeaderProps) {
   const { t } = useTranslation()
   const dir = useDirDetection()
+  const location = useLocation()
+  
+  // Generate tutorial URL if not provided
+  const docsUrl = tutorialUrl || getDocsUrl(location.pathname)
+  
   return (
     <div dir={dir} className="mx-auto flex w-full flex-row items-start justify-between gap-4 px-4 py-4 md:pt-6">
       <div className="flex flex-col gap-y-1">
-        <h1 className="text-lg font-medium sm:text-xl">{t(title)}</h1>
+        <div className="flex items-center gap-2.5">
+          <h1 className="text-lg font-medium sm:text-xl">{t(title)}</h1>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <a
+                  href={docsUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex h-7 w-7 items-center justify-center rounded-md border-0 text-primary transition-colors hover:border-2 hover:border-primary/40 hover:bg-primary/5 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  aria-label={t('tutorial', { defaultValue: 'View tutorial' })}
+                >
+                  <HelpCircle className="h-4 w-4" />
+                </a>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{t('tutorial', { defaultValue: 'View tutorial' })}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
         {description && <span className="whitespace-normal text-xs text-muted-foreground sm:text-sm">{t(description)}</span>}
       </div>
       {buttonText && onButtonClick && (

dashboard/src/pages/_dashboard._index.tsx

@@ -27,6 +27,7 @@ import { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
+import PageHeader from '@/components/page-header'
 import { getDefaultUserForm, UseEditFormValues, UseFormValues } from './_dashboard.users'
 // Lazy load CoreConfigModal to prevent Monaco Editor from loading until needed
 const CoreConfigModal = lazy(() => import('@/components/dialogs/CoreConfigModal'))
@@ -348,21 +349,13 @@ const Dashboard = () => {
   return (
     <div className="flex w-full flex-col items-start gap-2">
       <div className="w-full transform-gpu animate-fade-in" style={{ animationDuration: '400ms' }}>
-        <div className="mx-auto flex w-full flex-row items-start justify-between gap-2 px-3 py-3 sm:gap-4 sm:px-4 md:py-4 lg:pt-6">
-          <div className="flex min-w-0 flex-1 flex-col gap-y-1 pr-2 sm:pr-0">
-            <h1 className="truncate text-base font-medium sm:text-lg lg:text-xl">{t('dashboard')}</h1>
-            <span className="whitespace-normal text-xs leading-relaxed text-muted-foreground sm:text-sm">{t('dashboardDescription')}</span>
-          </div>
-          <div className="flex flex-shrink-0 gap-1 sm:gap-2">
-            <Button onClick={handleOpenQuickActions} size="sm" variant="outline" className="hidden text-xs sm:flex sm:text-sm">
-              <Bookmark className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden lg:inline">{t('quickActions.title')}</span>
-            </Button>
-            <Button onClick={handleOpenQuickActions} size="sm" variant="outline" className="p-2 sm:hidden">
-              <Bookmark className="h-3 w-3" />
-            </Button>
-          </div>
-        </div>
+        <PageHeader
+          title="dashboard"
+          description="dashboardDescription"
+          buttonIcon={Bookmark}
+          buttonText="quickActions.title"
+          onButtonClick={handleOpenQuickActions}
+        />
         <Separator />
       </div>
 

dashboard/src/pages/_dashboard.bulk.tsx

@@ -1,5 +1,6 @@
 import PageHeader from '@/components/page-header'
 import PageTransition from '@/components/PageTransition'
+import { getDocsUrl } from '@/utils/docs-url'
 import { ArrowUpDown, Calendar, Lock, Users2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -65,7 +66,7 @@ const BulkPage = () => {
   return (
     <div className="flex w-full flex-col items-start gap-0">
       <PageTransition isContentTransition={true}>
-        <PageHeader {...getPageHeaderProps()} />
+        <PageHeader {...getPageHeaderProps()} tutorialUrl={getDocsUrl(location.pathname)} />
       </PageTransition>
       <div className="w-full">
         <div className="scrollbar-hide flex overflow-x-auto border-b px-4 lg:flex-wrap">

dashboard/src/pages/_dashboard.nodes.tsx

@@ -1,5 +1,6 @@
 import PageHeader from '@/components/page-header'
 import PageTransition from '@/components/PageTransition'
+import { getDocsUrl } from '@/utils/docs-url'
 import { Cpu, LucideIcon, Share2, Plus, FileText } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -70,7 +71,7 @@ const Settings = () => {
   return (
     <div className="flex w-full flex-col items-start gap-0">
       <PageTransition isContentTransition={true}>
-        <PageHeader {...getPageHeaderProps()} />
+        <PageHeader {...getPageHeaderProps()} tutorialUrl={getDocsUrl(location.pathname)} />
       </PageTransition>
       <div className="w-full">
         <div className="flex border-b px-4">

dashboard/src/pages/_dashboard.settings.tsx

@@ -51,7 +51,7 @@ const sudoTabs: Tab[] = [
 const nonSudoTabs: Tab[] = [{ id: 'theme', label: 'theme.title', icon: Palette, url: '/settings/theme' }]
 
 export default function Settings() {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const location = useLocation()
   const navigate = useNavigate()
   const { admin } = useAdmin()
@@ -202,10 +202,16 @@ export default function Settings() {
     isSaving: is_sudo ? isSaving : false,
   }
 
+  // Generate tutorial URL for the current settings tab
+  const getTutorialUrl = () => {
+    const locale = i18n.language || 'en'
+    return `https://docs.pasarguard.org/${locale}/panel/settings`
+  }
+
   return (
     <SettingsContext.Provider value={settingsContextValue}>
       <div className="flex w-full flex-col items-start gap-0">
-        <PageHeader title={t(`settings.${activeTab}.title`)} description="manageSettings" />
+        <PageHeader title={t(`settings.${activeTab}.title`)} description="manageSettings" tutorialUrl={getTutorialUrl()} />
 
         <div className="relative w-full">
           <div className="flex border-b">

dashboard/src/utils/docs-url.ts

@@ -0,0 +1,51 @@
+import { DOCUMENTATION } from '@/constants/Project'
+import i18n from '@/locales/i18n'
+
+/**
+ * Generates a documentation URL for a given page path
+ * Format: docs.pasarguard.org/{locale}/panel/{page}
+ * 
+ * @param pagePath - The page path (e.g., '/settings', '/users', '/nodes/cores')
+ * @returns The full documentation URL
+ */
+export function getDocsUrl(pagePath: string): string {
+  const locale = i18n.language || 'en'
+  // Normalize locale (e.g., 'en-US' -> 'en')
+  const normalizedLocale = locale.split('-')[0]
+  
+  // Map route paths to documentation paths
+  const pathMap: Record<string, string> = {
+    '/': 'dashboard',
+    '/users': 'users',
+    '/statistics': 'statistics',
+    '/hosts': 'hosts',
+    '/nodes': 'nodes',
+    '/groups': 'groups',
+    '/templates': 'templates',
+    '/admins': 'admins',
+    '/settings': 'settings',
+    '/bulk': 'bulk',
+  }
+  
+  // Handle nested routes - find the longest matching route
+  let mappedPath = ''
+  let longestMatch = ''
+  
+  for (const [route, docPath] of Object.entries(pathMap)) {
+    if (pagePath.startsWith(route) && route.length > longestMatch.length) {
+      longestMatch = route
+      mappedPath = docPath
+    }
+  }
+  
+  // If we found a match, always use the base path (no sub-routes in docs)
+  if (mappedPath) {
+    return `${DOCUMENTATION}/${normalizedLocale}/panel/${mappedPath}`
+  }
+  
+  // If no mapping found, use the last segment of the path
+  const segments = pagePath.split('/').filter(Boolean)
+  const fallbackPath = segments[segments.length - 1] || 'dashboard'
+  return `${DOCUMENTATION}/${normalizedLocale}/panel/${fallbackPath}`
+}
+