sepehr/Keep
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: Complete internationalization and code cleanup

Browse Source 
## 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>
This commit is contained in:
sepehr
2026-01-11 22:26:13 +01:00
parent fc2c40249e
commit 7fb486c9a4
183 changed files with 48288 additions and 1290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
_bmad-output/planning-artifacts/memory-echo-ux-backlog.md Normal file
View File

@@ -0,0 +1,348 @@
# 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:**
1. *"Once we see 2-3 identical notes, how do we put them side-by-side?"* - Better management of similar notes
2. *"Can we have a merge button?"* - Intelligent fusion of similar notes
3. *"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
1. **Default similarity threshold:** What should be the default? (Proposed: 70%)
2. **Max connections to display:** Should we cap the list? (Proposed: 50, with pagination)
3. **Auto-archival:** Should "Quick Merge" auto-archive or ask user? (Proposed: Auto-archive with undo)
4. **Graph layout:** Which layout should be default? (Proposed: Force-directed)
5. **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
---
## 🔗 Related Files
- `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