Keep/keep-notes/components/title-suggestions.tsx
sepehr 7fb486c9a4 feat: Complete internationalization and code cleanup
## Translation Files
- Add 11 new language files (es, de, pt, ru, zh, ja, ko, ar, hi, nl, pl)
- Add 100+ missing translation keys across all 15 languages
- New sections: notebook, pagination, ai.batchOrganization, ai.autoLabels
- Update nav section with workspace, quickAccess, myLibrary keys

## Component Updates
- Update 15+ components to use translation keys instead of hardcoded text
- Components: notebook dialogs, sidebar, header, note-input, ghost-tags, etc.
- Replace 80+ hardcoded English/French strings with t() calls
- Ensure consistent UI across all supported languages

## Code Quality
- Remove 77+ console.log statements from codebase
- Clean up API routes, components, hooks, and services
- Keep only essential error handling (no debugging logs)

## UI/UX Improvements
- Update Keep logo to yellow post-it style (from-yellow-400 to-amber-500)
- Change selection colors to #FEF3C6 (notebooks) and #EFB162 (nav items)
- Make "+" button permanently visible in notebooks section
- Fix grammar and syntax errors in multiple components

## Bug Fixes
- Fix JSON syntax errors in it.json, nl.json, pl.json, zh.json
- Fix syntax errors in notebook-suggestion-toast.tsx
- Fix syntax errors in use-auto-tagging.ts
- Fix syntax errors in paragraph-refactor.service.ts
- Fix duplicate "fusion" section in nl.json

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Ou une version plus courte si vous préférez :

feat(i18n): Add 15 languages, remove logs, update UI components

- Create 11 new translation files (es, de, pt, ru, zh, ja, ko, ar, hi, nl, pl)
- Add 100+ translation keys: notebook, pagination, AI features
- Update 15+ components to use translations (80+ strings)
- Remove 77+ console.log statements from codebase
- Fix JSON syntax errors in 4 translation files
- Fix component syntax errors (toast, hooks, services)
- Update logo to yellow post-it style
- Change selection colors (#FEF3C6, #EFB162)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-11 22:26:13 +01:00

61 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-amber-50 dark:bg-amber-950 border border-amber-200 dark:border-amber-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-amber-900 dark:text-amber-100">
<Sparkles className="w-4 h-4" />
<span>{t('titleSuggestions.title')}</span>
</div>
<button
onClick={onDismiss}
className="text-amber-600 hover:text-amber-900 dark:text-amber-400 dark:hover:text-amber-200 transition-colors"
>
<X className="w-4 h-4" />
</button>
</div>
<div className="space-y-1">
{suggestions.map((suggestion, index) => (
<button
key={index}
onClick={() => onSelect(suggestion.title)}
className={cn(
"w-full text-left px-3 py-2 rounded-md transition-all",
"hover:bg-amber-100 dark:hover:bg-amber-900",
"text-sm text-amber-900 dark:text-amber-100",
"border border-transparent hover:border-amber-300 dark:hover:border-amber-700"
)}
>
<div className="flex items-start justify-between gap-2">
<span className="font-medium">{suggestion.title}</span>
<span className="text-xs text-amber-600 dark:text-amber-400 whitespace-nowrap">
{suggestion.confidence}%
</span>
</div>
{suggestion.reasoning && (
<p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
{suggestion.reasoning}
</p>
)}
</button>
))}
</div>
</div>
)
}