sepehr
69ea064ca8
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 1m16s
- Add noteHistoryMode setting (manual default / auto) with DB migration - Manual mode: commit button in editor toolbar creates snapshots on demand - Auto mode: smart snapshots with 20-char diff threshold + 5min cooldown, structural changes (color, pin, archive, labels) bypass cooldown - Add delete individual history entries from history modal - Fix sidebar: Notes nav no longer active on notebook pages - Fix sidebar icon: replace filled Lightbulb with outlined FileText - Fix title suggestions: change from amber to sky blue color scheme - Fix hydration mismatch: add suppressHydrationWarning on locale dates - Complete i18n: add history, sort, and AI chat translations for all 16 languages - Translate French AI assistant section (40+ keys) from English to French - Update README with new features and stack info Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { TitleSuggestion } from '@/hooks/use-title-suggestions'
|
|
import { Sparkles, X } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
interface TitleSuggestionsProps {
|
|
suggestions: TitleSuggestion[]
|
|
onSelect: (title: string) => void
|
|
onDismiss: () => void
|
|
}
|
|
|
|
export function TitleSuggestions({ suggestions, onSelect, onDismiss }: TitleSuggestionsProps) {
|
|
const { t } = useLanguage()
|
|
|
|
if (suggestions.length === 0) return null
|
|
|
|
return (
|
|
<div className="mt-2 p-3 bg-sky-50 dark:bg-sky-950/50 border border-sky-200 dark:border-sky-800 rounded-lg animate-in fade-in slide-in-from-top-2 duration-300">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-2 text-sm font-medium text-sky-900 dark:text-sky-100">
|
|
<Sparkles className="w-4 h-4" />
|
|
<span>{t('titleSuggestions.title')}</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onDismiss}
|
|
className="text-sky-500 hover:text-sky-900 dark:text-sky-400 dark:hover:text-sky-200 transition-colors"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
{suggestions.map((suggestion, index) => (
|
|
<button
|
|
key={index}
|
|
type="button"
|
|
onClick={() => onSelect(suggestion.title)}
|
|
className={cn(
|
|
"w-full text-left px-3 py-2 rounded-md transition-all",
|
|
"hover:bg-sky-100 dark:hover:bg-sky-900/50",
|
|
"text-sm text-sky-900 dark:text-sky-100",
|
|
"border border-transparent hover:border-sky-300 dark:hover:border-sky-700"
|
|
)}
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<span className="font-medium">{suggestion.title}</span>
|
|
<span className="text-xs text-sky-500 dark:text-sky-400 whitespace-nowrap">
|
|
{suggestion.confidence}%
|
|
</span>
|
|
</div>
|
|
{suggestion.reasoning && (
|
|
<p className="text-xs text-sky-600 dark:text-sky-300 mt-1">
|
|
{suggestion.reasoning}
|
|
</p>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|