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

12 KiB

Raw Blame History

Memory Echo - UX Improvements Backlog

Date: 2025-01-11 Author: Sally (UX Designer Agent) Project: Keep - Memory Echo Feature

🎯 Problem Statement

User: Ramez has 22+ similar notes and needs better tools to manage semantic connections.

Current State:

Temporary modal showing 2 connected notes side-by-side
Notifications when new connections detected
Basic feedback (thumbs up/down)
Fusion feature exists but needs better integration

User Pain Points:

"Once we see 2-3 identical notes, how do we put them side-by-side?" - Better management of similar notes
"Can we have a merge button?" - Intelligent fusion of similar notes
"Can we put them side-by-side on a sketch?" - Mind-map / graph view of connections

Constraints:

Must remain intuitive and not clutter the UI
Must integrate cleanly with existing Masonry grid
Must handle scale (potentially 22+ similar notes)
Must not overwhelm the user

💡 UX Proposals

1️⃣ Better Connection Display & Management

Proposal: Persistent Slide-over Panel

Location: Navigation bar with badge counter

[Notes] [Archive] [🔗 Connexions (23)] ← Badge shows total notes with connections

Interaction:

Click badge → Slide-over panel opens from right
Shows hierarchical list of all connections grouped by similarity
Click on connection → Scroll to & highlight that note in grid
Hover over note in grid → Highlight connections in slide-over

UI Layout:

┌─────────────────────────────────────────────────────┐
│  [Notes] [Archive]  [🔗 Connexions (23)]            │
├─────────────────────────────────────────────────────┤
│  Grille Masonry existante                          │
│  ┌──────┐  ┌──────┐  ┌──────┐                      │
│  │ Note │  │ Note │  │ Note │                      │
│  │  1   │  │  2   │  │  3   │                      │
│  └──────┘  └──────┘  └──────┘                      │
│                                                     │
│  ┌─────────────────────────────────┐  ← Toggle     │
│  │ 🔗 Connexions (Slide-over)     │  (right side)  │
│  │ ├─ Note A (3 connexions)       │               │
│  │ │  ├─ Note B (85%)             │               │
│  │ │  └─ Note C (72%)             │               │
│  │ └─ Note D (12 connexions)      │               │
│  │    ├─ Note E (91%)             │               │
│  │    └─ ...                      │               │
│  └─────────────────────────────────┘               │
└─────────────────────────────────────────────────────┘

Features:

Filter controls: "Show only notes with 5+ connections", "Similarity 80%+"
Group by similarity: Cluster similar notes
Search: Search through connections
Collapse/Expand: Manage large lists
Quick actions: Checkbox multiple notes → "Compare selected" / "Merge selected"

Why It Works:

✅ Non-intrusive: Doesn't hide the grid
✅ Overview: See all connections at once
✅ Navigation: Quick access to any connection
✅ Scalable: Handles 50+ connections

2️⃣ Intelligent Note Fusion

Proposal: Grouped Actions + Smart Merge

A. In Slide-over Panel:

┌──────────────────────────────────────┐
│ 🔗 Group of similar notes            │
│ ┌─────────────────────────────────┐  │
│ │ ☑ Note A - "Machine Learning"   │  │
│ │ ☑ Note B - "ML basics"          │  │
│ │ ☑ Note C - "Intro ML"           │  │
│ │                                  │  │
│ │ [🔀 Merge 3 notes]              │  │ ← Primary button
│ └─────────────────────────────────┘  │
└──────────────────────────────────────┘

B. Existing Fusion Modal (Already Implemented!)

Current modal features:

Preview AI-generated fusion
Select which notes to merge
Custom prompt
Options (archive originals, keep tags, etc.)

C. New Feature: "Quick Merge"

For very similar notes (90%+ similarity):

[⚡ Quick Merge] → Automatically archives originals
                 → Creates fused note
                 → Adds "Fused" badge to originals with link to new note

Workflow:

1. User opens slide-over
2. Sees group of 5 similar notes
3. Option A: Check all 5 → Click "Merge" → Opens custom modal
   Option B: Click "⚡ Quick Merge" → Instant merge with smart defaults
4. New note created with "Fused" badge
5. Original notes archived with link to fused note

Why It Works:

✅ Scale: Handle 22+ notes without selecting one-by-one
✅ Control: Quick merge for obvious duplicates, custom for nuanced cases
✅ Visual feedback: "Fused" badge traces history
✅ Reversible: Archive keeps originals accessible

3️⃣ Mind-Map / Graph View

Proposal: Toggle Graph View

New Navigation Button:

[Notes] [Archive] [🕸️ Graph] ← New view

Graph View UI:

┌─────────────────────────────────────────────────────┐
│  🔙 Back to Grid    🔍 Zoom    🎨 Clusters          │
├─────────────────────────────────────────────────────┤
│                                                     │
│      [Note A]────────────[Note B]                   │
│         │  \              /                         │
│      85%    72%        91%                          │
│         │      \        /                           │
│      [Note C]────[Note D]────[Note E]               │
│                                                      │
│   💡 Cluster "Machine Learning" (5 notes)          │
│         │                                            │
│      [Note F]────────[Note G]                        │
│                              │                       │
│   💡 Cluster "React" (3 notes)                    │
│                                                     │
└─────────────────────────────────────────────────────┘

Legend:
─ Thick line = 80%+ similarity (highly connected)
─ Thin line = 50-79% similarity
─ 💡 = Auto-clustered by theme (AI)

Features:

Drag & drop: Reposition notes manually
Click note: Opens modal with:
- Full note content
- Connections with percentages
- Actions: "Merge with selected", "View in grid"
Auto-clusters: AI groups similar thematically (ML, React, etc.)
Filters: "Show only 70%+ connections", "Hide archived"
Zoom & pan: Navigate large graphs
Export: Save graph as image or JSON

Why It Works:

✅ Immediate visual: See everything at once
✅ Scalable: Handles 50+ connections
✅ Actionable: Click → Compare → Merge
✅ Discovery: Clusters reveal patterns
✅ Exploration: Serendipitous connections

Tech Stack Recommendations:

React Flow (https://reactflow.dev/) - React-native, excellent performance
D3.js (https://d3js.org/) - Powerful but steeper learning curve
Cytoscape.js (https://js.cytoscape.org/) - Specialized for graphs

📋 Implementation Phases

Phase 1 - Quick Win (1-2 days)

Features:

Badge "🔗 Connexions (X)" in navigation
Slide-over panel with connection list
Checkbox selection + "Merge" button (uses existing modal)
Filter controls (similarity threshold, count)

Files to Create/Modify:

components/connections-slide-over.tsx (NEW)
components/connections-nav-badge.tsx (NEW)
Modify navigation to include badge
Integrate with existing /api/ai/echo/connections endpoint

Effort: Low Impact: High Risk: Low

Phase 2 - Graph View (3-5 days)

Features:

Toggle "🕸️ Graph" view
Basic graph visualization (React Flow)
Click interactions (open modal, highlight connections)
Zoom & pan
Basic filters

Files to Create/Modify:

app/(main)/connections/page.tsx (NEW - graph view page)
components/connections-graph.tsx (NEW)
Install reactflow package
Navigation update

Effort: Medium Impact: High Risk: Medium (learning curve for React Flow)

Phase 3 - Advanced Features (5-7 days)

Features:

Auto-clustering by theme (AI)
"Quick Merge" for 90%+ similar notes
Export graph (image/JSON)
Advanced filters (date range, labels)
Graph layouts (force, hierarchical, circular)

Files to Create/Modify:

/api/ai/echo/clusters (NEW)
components/quick-merge-button.tsx (NEW)
Enhanced graph component with layouts
Export functionality

Effort: High Impact: Medium Risk: Medium

🎨 UI/UX Considerations

Color Scheme

Connections Badge: Amber (already used)
Fused Badge: Purple (already used)
Graph Nodes: Color by cluster/theme
Graph Edges: Gradient by similarity (green = high, yellow = medium, gray = low)

Responsive Design

Mobile: Slide-over becomes bottom sheet
Tablet: Slide-over 50% width
Desktop: Slide-over 400px fixed width
Graph: Touch interactions for mobile

Accessibility

Keyboard navigation for all actions
Screen reader support for graph view
High contrast mode support
Focus indicators

Performance

Lazy load connection list (pagination)
Virtual scroll for large lists
Debounce graph interactions
Cache graph layout

📊 Success Metrics

User Engagement:

% of users opening connections panel
Average connections viewed per session
Graph view adoption rate

Feature Usage:

Number of merges per week
% of quick merges vs custom merges
Most used similarity threshold

User Satisfaction:

Feedback on graph view usability
Time to merge similar notes
Reduction in duplicate notes over time

🚨 Open Questions

Default similarity threshold: What should be the default? (Proposed: 70%)
Max connections to display: Should we cap the list? (Proposed: 50, with pagination)
Auto-archival: Should "Quick Merge" auto-archive or ask user? (Proposed: Auto-archive with undo)
Graph layout: Which layout should be default? (Proposed: Force-directed)
Cluster naming: AI-generated or user-editable? (Proposed: AI-generated with edit option)

📝 Notes

All translations already exist in locales/fr.json and locales/en.json
Fusion modal already implemented and working
Connections API endpoint already exists: /api/ai/echo/connections
Badge components already created: ConnectionsBadge, FusionBadge (inline)
Current UI issue fixed: Badges now at top, labels after content, owner indicator visible

components/connections-badge.tsx - Badge component
components/connections-overlay.tsx - Overlay component
components/fusion-modal.tsx - Fusion modal
components/note-card.tsx - Note card with badges
app/api/ai/echo/connections/route.ts - Connections API
app/api/ai/echo/fusion/route.ts - Fusion API
locales/fr.json - French translations
locales/en.json - English translations

Status: 📋 Ready for Implementation Priority: Phase 1 > Phase 2 > Phase 3 Next Steps: Review with Ramez, prioritize features, begin Phase 1 implementation

12 KiB Raw Blame History Unescape Escape

Memory Echo - UX Improvements Backlog

🎯 Problem Statement

💡 UX Proposals

1️⃣ Better Connection Display & Management

Proposal: Persistent Slide-over Panel

2️⃣ Intelligent Note Fusion

Proposal: Grouped Actions + Smart Merge

3️⃣ Mind-Map / Graph View

Proposal: Toggle Graph View

📋 Implementation Phases

Phase 1 - Quick Win (1-2 days)

Phase 2 - Graph View (3-5 days)

Phase 3 - Advanced Features (5-7 days)

🎨 UI/UX Considerations

Color Scheme

Responsive Design

Accessibility

Performance

📊 Success Metrics

🚨 Open Questions

📝 Notes

🔗 Related Files

12 KiB

Raw Blame History