feat: bookmarks and notes management

- Backend: Django REST Framework API with Bookmark and Note models - ViewSets with user-scoped querysets and select_related for N+1 prevention - Create/List/Detail/Update/Delete endpoints - Batch delete operations - Unique constraint on user+book+page for bookmarks - IsOwner permission class for object-level access control - Full serializer validation (page > 0, non-empty content, duplicate check) - 30+ pytest-django tests covering CRUD, auth, filtering, edge cases - Frontend: React TypeScript components - AnnotationsContext with useReducer for state management - BookmarkList, NoteList, AddAnnotationForm, AnnotationsDashboard - Inline note editing with immediate save - Batch delete support - API client with JWT auto-refresh interceptors - Paginated query hook for infinite scroll support - Responsive CSS with loading/empty states - Infrastructure: Django project with custom User model, JWT auth, CORS - PostgreSQL database models with proper FK and indexes - Django admin configuration for all models
2026-05-26 00:50:06 +00:00
commit 3b5b301e42
94 changed files with 6086 additions and 0 deletions
@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import { useAnnotations } from "@/context/AnnotationsContext";
+
+interface AddAnnotationFormProps {
+  bookId: string;
+  page: number;
+  locationText?: string;
+  onClose?: () => void;
+}
+
+export function AddAnnotationForm({
+  bookId,
+  page,
+  locationText,
+  onClose,
+}: AddAnnotationFormProps): React.ReactElement {
+  const { addBookmark, addNote } = useAnnotations();
+  const [mode, setMode] = useState<"bookmark" | "note" | null>(null);
+  const [noteContent, setNoteContent] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    try {
+      if (mode === "bookmark") {
+        await addBookmark({ book: bookId, page, location_text: locationText });
+      } else if (mode === "note") {
+        if (!noteContent.trim()) {
+          setError("Note content cannot be empty.");
+          setSubmitting(false);
+          return;
+        }
+        await addNote({
+          book: bookId,
+          page,
+          location_text: locationText,
+          content: noteContent.trim(),
+        });
+      }
+      onClose?.();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to save annotation."
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="add-annotation-overlay">
+      <div className="add-annotation-modal">
+        <button className="modal-close" onClick={onClose} aria-label="Close">
+          &times;
+        </button>
+        <h3>Add to Page {page}</h3>
+        {locationText && (
+          <blockquote className="annotation-quote">
+            &ldquo;{locationText}&rdquo;
+          </blockquote>
+        )}
+
+        {!mode ? (
+          <div className="mode-selector">
+            <button
+              className="btn btn-block"
+              onClick={() => setMode("bookmark")}
+            >
+              Add Bookmark
+            </button>
+            <button
+              className="btn btn-block btn-secondary"
+              onClick={() => setMode("note")}
+            >
+              Add Note
+            </button>
+          </div>
+        ) : (
+          <div className="annotation-form">
+            {mode === "note" && (
+              <div className="form-group">
+                <label htmlFor="note-content">Note:</label>
+                <textarea
+                  id="note-content"
+                  className="form-textarea"
+                  value={noteContent}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    setNoteContent(e.target.value)
+                  }
+                  rows={5}
+                  placeholder="Write your note here..."
+                  autoFocus
+                />
+              </div>
+            )}
+            {error && <div className="form-error">{error}</div>}
+            <div className="form-actions">
+              <button
+                className="btn"
+                onClick={handleSubmit}
+                disabled={submitting}
+              >
+                {submitting ? "Saving..." : "Save"}
+              </button>
+              <button
+                className="btn btn-secondary"
+                onClick={() => setMode(null)}
+                disabled={submitting}
+              >
+                Back
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}