sepehr
7fb486c9a4
## 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>
349 lines
12 KiB
Markdown
349 lines
12 KiB
Markdown
# 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
|