fix: i18n system overhaul and sidebar UI bugs

- Fix LanguageProvider: add RTL support (ar/fa), translation caching,
  prevent blank flash during load, browser language detection
- Fix detect-user-language: extend whitelist from 5 to all 15 languages
- Remove hardcoded initialLanguage="fr" from auth layout
- Complete fr.json translation (all sections translated from English)
- Add missing admin.ai keys to all 13 non-English locales
- Translate ai.autoLabels, ai.batchOrganization, memoryEcho sections
  for all locales
- Remove duplicate top-level autoLabels/batchOrganization from en.json
- Fix notebook creation: replace window.location.reload() with
  createNotebookOptimistic + router.refresh()
- Fix notebook name truncation in sidebar with min-w-0
- Remove redundant router.refresh() after note creation in page.tsx

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

keep-notes/components/connections-badge.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { memo, useState, useEffect } from 'react'
 import { Sparkles } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useLanguage } from '@/lib/i18n/LanguageProvider'
+import { getConnectionsCount } from '@/lib/connections-cache'
 
 interface ConnectionsBadgeProps {
   noteId: string
@@ -11,54 +12,44 @@ interface ConnectionsBadgeProps {
   className?: string
 }
 
-interface ConnectionData {
-  noteId: string
-  title: string | null
-  content: string
-  createdAt: Date
-  similarity: number
-  daysApart: number
-}
-
-interface ConnectionsResponse {
-  connections: ConnectionData[]
-  pagination: {
-    total: number
-    page: number
-    limit: number
-    totalPages: number
-    hasNext: boolean
-    hasPrev: boolean
-  }
-}
-
-export function ConnectionsBadge({ noteId, onClick, className }: ConnectionsBadgeProps) {
+export const ConnectionsBadge = memo(function ConnectionsBadge({ noteId, onClick, className }: ConnectionsBadgeProps) {
   const { t } = useLanguage()
   const [connectionCount, setConnectionCount] = useState<number>(0)
   const [isLoading, setIsLoading] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
+  const [fetchAttempted, setFetchAttempted] = useState(false)
 
   useEffect(() => {
+    if (fetchAttempted) return
+    setFetchAttempted(true)
+
+    let isMounted = true
+
     const fetchConnections = async () => {
       setIsLoading(true)
       try {
-        const res = await fetch(`/api/ai/echo/connections?noteId=${noteId}&limit=1`)
-        if (!res.ok) {
-          throw new Error('Failed to fetch connections')
+        const count = await getConnectionsCount(noteId)
+        if (isMounted) {
+          setConnectionCount(count)
         }
-
-        const data: ConnectionsResponse = await res.json()
-        setConnectionCount(data.pagination.total || 0)
       } catch (error) {
         console.error('[ConnectionsBadge] Failed to fetch connections:', error)
-        setConnectionCount(0)
+        if (isMounted) {
+          setConnectionCount(0)
+        }
       } finally {
-        setIsLoading(false)
+        if (isMounted) {
+          setIsLoading(false)
+        }
       }
     }
 
     fetchConnections()
-  }, [noteId])
+
+    return () => {
+      isMounted = false
+    }
+  }, [noteId]) // eslint-disable-line react-hooks/exhaustive-deps
 
   // Don't render if no connections or still loading
   if (connectionCount === 0 || isLoading) {
@@ -69,19 +60,11 @@ export function ConnectionsBadge({ noteId, onClick, className }: ConnectionsBadg
   const badgeText = t('memoryEcho.connectionsBadge', { count: connectionCount, plural })
 
   return (
-    <div
-      className={cn(
-        'px-1.5 py-0.5 rounded',
-        'bg-amber-100 dark:bg-amber-900/30',
-        'text-amber-700 dark:text-amber-400',
-        'text-[10px] font-medium',
-        'border border-amber-200 dark:border-amber-800',
-        'cursor-pointer',
-        'transition-all duration-150 ease-out',
-        'hover:bg-amber-200 dark:hover:bg-amber-800/50',
-        isHovered && 'scale-105',
-        className
-      )}
+    <div className={cn(
+      'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 border border-purple-200 dark:border-purple-800 transition-all duration-150 ease-out',
+      isHovered && 'scale-105',
+      className
+    )}
       onClick={onClick}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
@@ -91,4 +74,4 @@ export function ConnectionsBadge({ noteId, onClick, className }: ConnectionsBadg
       {badgeText}
     </div>
   )
-}
+})