znakovni.hr/fixbugsaddfeatures.md

# Znakopis Page - Bug Fixes and Feature Additions

## Overview
This document outlines the bugs to fix and features to add to the Znakopis page for document and sentence management.

---

## 🐛 BUG FIXES

### Bug 1: Sentence Deletion Error
**Issue:** When loading a document and trying to delete a sentence, an error occurs and the sentence is not deleted.

**Root Cause:** The API endpoint path is incorrect in the frontend.
- Frontend calls: `/api/sentences/${sentenceId}` (via `documentApi.deleteSentence()`)
- Backend expects: `/api/sentences/:sentenceId` 
- Backend route is registered at: `app.use('/api', sentenceRoutes)` in `server.ts`
- This means the actual endpoint is: `/api/sentences/:sentenceId` ✅

**Investigation Needed:**
1. Check browser console for the exact error message
2. Verify the sentence ID is being passed correctly
3. Check if authentication is working properly
4. Verify the backend route is handling the DELETE request correctly

**Files to Check:**
- `packages/frontend/src/lib/documentApi.ts` - Line 121-123 (deleteSentence method)
- `packages/backend/src/routes/sentences.ts` - Line 169-199 (DELETE endpoint)
- `packages/frontend/src/pages/Znakopis.tsx` - Line 129-144 (handleDeleteSentence)
- `packages/frontend/src/components/znakopis/DocumentPanel.tsx` - Line 119-125 (delete button)

**Fix Steps:**
1. Add error logging to identify the exact issue
2. Verify the sentence ID format (should be UUID string)
3. Ensure the DELETE request includes authentication credentials
4. Test the endpoint directly to confirm it works
5. Add better error handling and user feedback

---

### Bug 2: Incorrect API Endpoint for Creating Pages
**Issue:** The frontend uses wrong endpoint path for creating pages.

**Current State:**
- Frontend calls: `/api/${documentId}/pages` (Line 88 in documentApi.ts)
- Backend expects: `/api/documents/:documentId/pages` (Line 205 in sentences.ts)

**Fix Required:**
- Update `packages/frontend/src/lib/documentApi.ts` line 88
- Change from: `api.post(\`/api/${documentId}/pages\`, { title })`
- Change to: `api.post(\`/api/documents/${documentId}/pages\`, { title })`

---

### Bug 3: Incorrect API Endpoint for Creating Sentences
**Issue:** The frontend uses wrong endpoint path for creating sentences.

**Current State:**
- Frontend calls: `/api/${documentId}/pages/${pageIndex}/sentences` (Line 99 in documentApi.ts)
- Backend expects: `/api/documents/:documentId/pages/:pageIndex/sentences` (Line 11 in sentences.ts)

**Fix Required:**
- Update `packages/frontend/src/lib/documentApi.ts` line 99
- Change from: `api.post(\`/api/${documentId}/pages/${pageIndex}/sentences\`, data)`
- Change to: `api.post(\`/api/documents/${documentId}/pages/${pageIndex}/sentences\`, data)`

---

## ✨ NEW FEATURES

### Feature 1: Delete Document Functionality
**Description:** Add ability to delete documents from the Znakopis page.

**Backend:** Already implemented ✅
- Endpoint: `DELETE /api/documents/:id` (Line 236 in documents.ts)
- Method: `documentApi.deleteDocument(id)` already exists (Line 82 in documentApi.ts)

**Frontend Changes Needed:**

1. **Update DocumentPanel Component** (`packages/frontend/src/components/znakopis/DocumentPanel.tsx`):
   - Add `onDeleteDocument` prop to interface (Line 6-15)
   - Add delete button in the document info section (around Line 56-65)
   - Use Trash2 icon from lucide-react (already imported)
   - Add confirmation dialog before deletion

2. **Update Znakopis Page** (`packages/frontend/src/pages/Znakopis.tsx`):
   - Add `handleDeleteDocument` function (similar to handleDeleteSentence)
   - Pass handler to DocumentPanel component
   - After deletion:
     - Clear selectedDocument state
     - Reload documents list
     - Show success toast
   - Handle errors with error toast

3. **UI/UX Considerations:**
   - Add confirmation dialog: "Jeste li sigurni da želite obrisati ovaj dokument?"
   - Show document title in confirmation
   - Disable delete button while deleting (loading state)
   - Clear current tokens if deleting the selected document

---

### Feature 2: Edit Document Name
**Description:** Allow users to edit document title and description.

**Backend:** Already implemented ✅
- Endpoint: `PATCH /api/documents/:id` (Line 174 in documents.ts)
- Method: `documentApi.updateDocument(id, data)` already exists (Line 76 in documentApi.ts)

**Frontend Changes Needed:**

1. **Update DocumentPanel Component** (`packages/frontend/src/components/znakopis/DocumentPanel.tsx`):
   - Add `onUpdateDocument` prop to interface
   - Add edit mode state for document title and description
   - Add edit button (Pencil icon from lucide-react)
   - When in edit mode:
     - Show input field for title
     - Show textarea for description
     - Show Save and Cancel buttons
   - When not in edit mode:
     - Show title and description as text
     - Show edit button

2. **Update Znakopis Page** (`packages/frontend/src/pages/Znakopis.tsx`):
   - Add `handleUpdateDocument` function
   - Accept documentId, title, and description
   - Call `documentApi.updateDocument()`
   - Reload document after update
   - Update documents list
   - Show success/error toast

3. **UI/UX Considerations:**
   - Inline editing for better UX
   - Validate title is not empty
   - Show loading state while saving
   - Revert changes on cancel
   - Auto-focus title input when entering edit mode

---

### Feature 3: Name Document on Creation
**Description:** Allow users to provide a custom name when creating a new document instead of auto-generated name.

**Current Behavior:**
- Auto-generates name: `Dokument ${new Date().toLocaleDateString('hr-HR')}`
- Creates with description: "Novi dokument"

**Proposed Changes:**

1. **Add Document Creation Dialog:**
   - Create new component: `CreateDocumentDialog.tsx`
   - Use Dialog component from UI library
   - Include:
     - Title input field (required)
     - Description textarea (optional)
     - Create and Cancel buttons

2. **Update Znakopis Page** (`packages/frontend/src/pages/Znakopis.tsx`):
   - Add state for dialog open/closed
   - Modify "Novi dokument" button to open dialog
   - Update `handleSaveDocument`:
     - If no document selected, check if user wants to create new or use dialog
     - Option 1: Always show dialog for new documents
     - Option 2: Show dialog only when clicking "Novi dokument", auto-create when saving first sentence
   - Pass document data from dialog to createDocument API

3. **Alternative Approach (Simpler):**
   - Add inline form in DocumentPanel when no document is selected
   - Show title and description inputs
   - First save creates document with provided info
   - If fields empty, use default values

4. **UI/UX Considerations:**
   - Default title could be: "Novi dokument" (user can change)
   - Placeholder for description: "Dodajte opis dokumenta..."
   - Validate title is not empty
   - Show character count for title (max 255)

---

## 📋 IMPLEMENTATION CHECKLIST

### Phase 1: Bug Fixes (Priority: HIGH)
- [ ] Fix API endpoint for creating pages (documentApi.ts line 88)
- [ ] Fix API endpoint for creating sentences (documentApi.ts line 99)
- [ ] Debug and fix sentence deletion error
  - [ ] Add console logging to identify error
  - [ ] Verify authentication is working
  - [ ] Test endpoint directly
  - [ ] Fix any issues found
  - [ ] Add better error handling

### Phase 2: Delete Document Feature (Priority: HIGH)
- [ ] Add onDeleteDocument prop to DocumentPanel interface
- [ ] Add delete button to DocumentPanel UI
- [ ] Implement confirmation dialog
- [ ] Add handleDeleteDocument function in Znakopis page
- [ ] Test deletion flow
- [ ] Verify state updates correctly after deletion

### Phase 3: Edit Document Name (Priority: MEDIUM)
- [ ] Add onUpdateDocument prop to DocumentPanel interface
- [ ] Add edit mode state to DocumentPanel
- [ ] Implement inline editing UI (title and description)
- [ ] Add edit/save/cancel buttons
- [ ] Add handleUpdateDocument function in Znakopis page
- [ ] Add validation for title
- [ ] Test edit flow
- [ ] Verify state updates correctly after edit

### Phase 4: Name Document on Creation (Priority: MEDIUM)
- [ ] Decide on approach (dialog vs inline form)
- [ ] Create CreateDocumentDialog component (if using dialog approach)
- [ ] Update "Novi dokument" button behavior
- [ ] Add form validation
- [ ] Update handleSaveDocument or create separate handler
- [ ] Test document creation with custom name
- [ ] Ensure backward compatibility (auto-name if not provided)

---

## 🧪 TESTING REQUIREMENTS

### For Each Bug Fix:
1. Test the specific scenario that was failing
2. Verify error messages are clear and helpful
3. Test edge cases (empty data, invalid IDs, etc.)
4. Verify authentication is required

### For Each Feature:
1. Test happy path (normal usage)
2. Test validation (empty fields, too long text, etc.)
3. Test error handling (network errors, server errors)
4. Test UI states (loading, success, error)
5. Test on different screen sizes (responsive design)
6. Verify Croatian language text is correct

---

## 📝 NOTES FOR IMPLEMENTATION

1. **Consistency:** Follow existing patterns in the codebase
2. **Error Handling:** Always show user-friendly error messages in Croatian
3. **Loading States:** Show loading indicators for async operations
4. **Confirmation Dialogs:** Use for destructive actions (delete)
5. **Toast Messages:** Use Sonner toast for feedback (already imported)
6. **Icons:** Use lucide-react icons (already in use)
7. **Styling:** Use existing Tailwind classes for consistency
8. **TypeScript:** Ensure all types are properly defined
9. **API Calls:** Always handle errors with try-catch
10. **State Management:** Update all relevant state after API calls

---

## 🔍 FILES TO MODIFY

### Bug Fixes:
1. `packages/frontend/src/lib/documentApi.ts` - Fix API endpoints
2. `packages/frontend/src/pages/Znakopis.tsx` - Improve error handling
3. `packages/backend/src/routes/sentences.ts` - Verify DELETE endpoint (if needed)

### Features:
1. `packages/frontend/src/components/znakopis/DocumentPanel.tsx` - Add delete and edit UI
2. `packages/frontend/src/pages/Znakopis.tsx` - Add handlers for delete and edit
3. `packages/frontend/src/components/znakopis/CreateDocumentDialog.tsx` - New file (if using dialog approach)
4. `packages/frontend/src/components/ui/dialog.tsx` - May need to create if not exists

---

## ⚠️ IMPORTANT CONSIDERATIONS

1. **Data Loss Prevention:** Always confirm before deleting documents
2. **Concurrent Edits:** Consider what happens if document is edited while viewing
3. **Permissions:** Verify user owns document before allowing edit/delete
4. **Validation:** Ensure title is not empty and within length limits
5. **Accessibility:** Ensure all interactive elements are keyboard accessible
6. **Mobile:** Test on mobile devices for touch interactions