diff --git a/memento-note/app/(main)/settings/ai/ai-settings-header.tsx b/memento-note/app/(main)/settings/ai/ai-settings-header.tsx index 52721ba..7ba92b6 100644 --- a/memento-note/app/(main)/settings/ai/ai-settings-header.tsx +++ b/memento-note/app/(main)/settings/ai/ai-settings-header.tsx @@ -1,13 +1,21 @@ 'use client' import { useLanguage } from '@/lib/i18n' +import { SettingsHelpBox } from '@/components/settings/settings-help-box' export function AISettingsHeader() { const { t } = useLanguage() return ( -

- {t('aiSettings.description')} -

+ ) } diff --git a/memento-note/app/(main)/settings/data/page.tsx b/memento-note/app/(main)/settings/data/page.tsx index 2da7c25..e4f2cd8 100644 --- a/memento-note/app/(main)/settings/data/page.tsx +++ b/memento-note/app/(main)/settings/data/page.tsx @@ -9,6 +9,7 @@ import { DeleteAccountDialog } from '@/components/legal/delete-account-dialog' import { useRouter } from 'next/navigation' import { motion } from 'motion/react' import { cn } from '@/lib/utils' +import { SettingsHelpBox } from '@/components/settings/settings-help-box' export default function DataSettingsPage() { const { t } = useLanguage() @@ -225,6 +226,17 @@ export default function DataSettingsPage() { animate={{ opacity: 1, y: 0 }} className="space-y-12" > + +

{t('dataManagement.toolsDescription')}

diff --git a/memento-note/app/(main)/settings/integrations/page.tsx b/memento-note/app/(main)/settings/integrations/page.tsx index f574362..254ba54 100644 --- a/memento-note/app/(main)/settings/integrations/page.tsx +++ b/memento-note/app/(main)/settings/integrations/page.tsx @@ -3,6 +3,7 @@ import { useState, useEffect } from 'react' import { BookOpen, Loader2, Check, X, RefreshCw, Trash2, CalendarDays } from 'lucide-react' import { toast } from 'sonner' +import { SettingsHelpBox } from '@/components/settings/settings-help-box' export default function IntegrationsPage() { // ── Readwise ─────────────────────────────────────────────────────────── @@ -158,13 +159,24 @@ export default function IntegrationsPage() { {!calConnected ? ( - +
+ + +
) : (
@@ -226,12 +238,16 @@ export default function IntegrationsPage() { {!rwConnected && (
-

- Trouvez votre token sur{' '} - - readwise.io/access_token - -

+
-

- Gérez vos clés API et serveurs MCP connectés. -

+
) diff --git a/memento-note/components/settings/settings-help-box.tsx b/memento-note/components/settings/settings-help-box.tsx new file mode 100644 index 0000000..5a0deed --- /dev/null +++ b/memento-note/components/settings/settings-help-box.tsx @@ -0,0 +1,69 @@ +'use client' + +import { useState } from 'react' +import { HelpCircle, ChevronDown, ChevronUp, ExternalLink } from 'lucide-react' +import { cn } from '@/lib/utils' + +interface HelpStep { + icon?: string + text: string + link?: { label: string; href: string } +} + +interface SettingsHelpBoxProps { + title: string + steps: HelpStep[] + defaultOpen?: boolean + className?: string +} + +export function SettingsHelpBox({ title, steps, defaultOpen = false, className }: SettingsHelpBoxProps) { + const [open, setOpen] = useState(defaultOpen) + + return ( +
+ + + {open && ( +
    + {steps.map((step, i) => ( +
  1. + + {step.icon ?? i + 1} + + + {step.text} + {step.link && ( + <> + {' '} + + {step.link.label} + + + + )} + +
  2. + ))} +
+ )} +
+ ) +}