- {/* Header */}
-
- {/* Confirmation Modal */}
-
-
-
- {/* Add Note Form */}
- - Notebook on the Cloud -
-- Your notes, securely stored and accessible anywhere -
-
-
-
- {/* Quick Tips */}
- - Add New Note -
- - -
-
- - - Quick Tips -
--
-
- - • - Use descriptive titles to easily find your notes later - -
- - • - Click template buttons (Meeting, Daily, Checklist) to auto-fill note structure - -
- - • - Tags help organize and categorize your notes effectively - -
- - • - All fields require at least 5 characters for better note quality - -
-
- - Are you sure you want to replace your current note content with the - {pendingTemplate?.key} - template? -
-- ⚠️ This action cannot be undone. Your current description will be overwritten. -
-
+
+ );
+}
\ No newline at end of file
diff --git a/savebook/components/notes/NoteItem.js b/savebook/components/notes/NoteItem.js
index 0469e13..6ed4f60 100644
--- a/savebook/components/notes/NoteItem.js
+++ b/savebook/components/notes/NoteItem.js
@@ -1,320 +1,167 @@
-import noteContext from '@/context/noteContext';
-import React, { useContext, useState, useMemo } from 'react'
-import LinkPreviewCard from './LinkPreviewCard';
-import toast from 'react-hot-toast';
+"use client";
-export default function NoteItem(props) {
- const context = useContext(noteContext);
- const { deleteNote } = context;
- const { note, updateNote } = props;
- const [isDeleting, setIsDeleting] = useState(false);
- const [previewImage, setPreviewImage] = useState(null);
+import React, { useContext, useMemo, useState } from "react";
+import noteContext from "@/context/noteContext";
+import { decrypt } from "@/lib/utils/crypto";
+import toast from "react-hot-toast";
+import LinkPreviewCard from "./LinkPreviewCard";
- const handleDelete = async () => {
- setIsDeleting(true);
- try {
- await deleteNote(note._id);
- toast.success("Note deleted successfully 🗑️");
- } catch (error) {
- toast.error("Failed to delete note");
- } finally {
- setIsDeleting(false);
- }
- }
-
- const handleEdit = () => {
- updateNote(note);
- }
-
- // Enhanced tag colors with better dark mode variants
- const getTagColor = (tag) => {
- const tagColors = {
- 'General': { bg: 'bg-blue-500', text: 'text-blue-100' },
- 'Basic': { bg: 'bg-gray-500', text: 'text-gray-100' },
- 'Finance': { bg: 'bg-green-500', text: 'text-green-100' },
- 'Grocery': { bg: 'bg-orange-500', text: 'text-orange-100' },
- 'Office': { bg: 'bg-purple-500', text: 'text-purple-100' },
- 'Personal': { bg: 'bg-pink-500', text: 'text-pink-100' },
- 'Work': { bg: 'bg-indigo-500', text: 'text-indigo-100' },
- 'Ideas': { bg: 'bg-teal-500', text: 'text-teal-100' }
- };
- return tagColors[tag] || { bg: 'bg-blue-500', text: 'text-blue-100' };
- };
-
- // Format date with relative time -with error handling
- const formatDate = (dateString) => {
- try {
- const date = new Date(dateString);
- if (isNaN(date.getTime())) return 'Unknown date';
-
- const now = new Date();
-
- // Compare calendar dates in LOCAL timezone
- const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
- const noteDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+export default function NoteItem({ note, updateNote }) {
+ const { deleteNote } = useContext(noteContext);
- const diffTime = today - noteDay;
- const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+ const [isDeleting, setIsDeleting] = useState(false);
+ const [previewImage, setPreviewImage] = useState(null);
- if (diffDays === 0) return 'Today';
- if (diffDays === 1) return 'Yesterday';
- if (diffDays < 7) return `${diffDays} days ago`;
- if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
-
- return date.toLocaleDateString('en-US', {
- month: 'short',
- day: 'numeric',
- year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
- });
- } catch (err) {
- console.error("Date formatting error:", err);
- return 'Unknown date';
- }
- };
+ /* 🔐 Decryption */
+ const secret =
+ typeof window !== "undefined"
+ ? localStorage.getItem("encryptionKey")
+ : null;
+ let decryptedTitle = "🔒 Encrypted";
+ let decryptedDescription = "🔒 Encrypted";
- // Calculate reading time - with error handling
- const getReadingTime = (text) => {
- try {
- if (!text) return '< 1 min';
-
- const wordsPerMinute = 200;
- const wordCount = text.split(/\s+/).length || 0;
- const readingTime = Math.ceil(wordCount / wordsPerMinute);
- return readingTime < 1 ? '< 1 min' : `${readingTime} min read`;
- } catch (error) {
- console.error("Reading time calculation error:", error);
- return '< 1 min';
- }
+ try {
+ if (secret) {
+ decryptedTitle = decrypt(note?.title || "", secret);
+ decryptedDescription = decrypt(note?.description || "", secret);
+ }
+ } catch (err) {
+ console.error("Decryption failed:", err);
+ }
+
+ /* Counts */
+ const descriptionLength =
+ typeof decryptedDescription === "string"
+ ? decryptedDescription.length
+ : 0;
+
+ const wordCount = decryptedDescription
+ ? decryptedDescription.split(/\s+/).filter(Boolean).length
+ : 0;
+
+ /* URLs */
+ const noteUrls = useMemo(() => {
+ if (!decryptedDescription) return [];
+ return decryptedDescription.match(/https?:\/\/[^\s]+/g) || [];
+ }, [decryptedDescription]);
+
+ /* Tag color */
+ const getTagColor = (tag) => {
+ const colors = {
+ General: { bg: "bg-blue-500", text: "text-blue-100" },
+ Work: { bg: "bg-indigo-500", text: "text-indigo-100" },
+ Personal: { bg: "bg-pink-500", text: "text-pink-100" },
+ Finance: { bg: "bg-green-500", text: "text-green-100" },
};
-
- // Safely calculate description length and word count
- const descriptionLength = note?.description?.length || 0;
- const wordCount = note?.description ? note.description.split(/\s+/).filter(Boolean).length : 0;
-
- // Safely get tag color
- const tagColor = getTagColor(note?.tag || 'General');
-
- // Extract URLs from description
- const noteUrls = useMemo(() => {
- if (!note?.description) return [];
- const urlRegex = /(https?:\/\/[^\s]+)/g;
- return note.description.match(urlRegex) || [];
- }, [note?.description]);
-
- return (
- <>
- Add Note
+ + +
-
-
- {/* Image Preview */}
- {previewImage && (
-
-
- {/* Header with Gradient */}
-
-
- {/* Glow */}
-
-
-
-
- {/* Body */}
-
-
-
- {/* Metadata Row */}
- - {note?.title || 'Untitled Note'} -
- - {/* Tag moved to top right corner */} -
-
- {note?.tag || 'General'}
-
-
-
-
-
-
- {getReadingTime(note?.description)}
-
-
-
- {wordCount} words
-
-
-
-
- {/* Enhanced Footer */}
- - {note?.description ? ( - note.description.split(/(https?:\/\/[^\s]+)/g).map((part, i) => ( - part.match(/https?:\/\/[^\s]+/) ? ( - e.stopPropagation()} - > - {part} - - ) : ( - {part} - ) - )) - ) : ( - 'No description provided. Click edit to add content to this note.' - )} -
- - {/* Images */} - {Array.isArray(note?.images) && note.images.length > 0 && ( -
- {note.images.map((img, index) => (
-
- )}
- {/* Link Previews */}
- {noteUrls.map((url, index) => (
- setPreviewImage(img)}
- >
- 
- {/* Preview */}
-
- ))}
-
-
-
- e.stopPropagation()}>
-
- ))}
-
- {/* Audio */}
- {note?.audio && note.audio.url && (
-
-
- )}
- - - Audio Recording -
- -
- {/* Action Buttons with Enhanced Design */}
-
-
- {/* */}
-
-
-
-
-
-
-
- {/* Enhanced*/}
-
-
-
-
-
- {/* Character Count */}
-
-
- {note?.date ? formatDate(note.date) : 'Unknown'}
-
-
-
-
-
- {descriptionLength.toLocaleString()} chars
-
- setPreviewImage(null)}
- >
-
- )}
-
- );
+ return colors[tag] || colors.General;
+ };
+
+ const tagColor = getTagColor(note?.tag || "General");
+
+ /* Actions */
+ const handleDelete = async () => {
+ setIsDeleting(true);
+ try {
+ await deleteNote(note._id);
+ toast.success("Note deleted");
+ } catch {
+ toast.error("Failed to delete note");
+ } finally {
+ setIsDeleting(false);
+ }
+ };
+
+ const handleEdit = () => {
+ updateNote({
+ ...note,
+ title: decryptedTitle,
+ description: decryptedDescription,
+ });
+ };
+
+ return (
+
- {/* Close Button */}
-
-
- {/* Image */}
- 
e.stopPropagation()}
- />
-
-
+ {/* Header */}
+
+ );
}
\ No newline at end of file
diff --git a/savebook/context/NoteState.js b/savebook/context/NoteState.js
index be5e810..3e3bc59 100644
--- a/savebook/context/NoteState.js
+++ b/savebook/context/NoteState.js
@@ -1,151 +1,132 @@
-"use client"
-import React, { useCallback, useState } from 'react'
-import noteContext from './noteContext'
+"use client";
-const NoteState = (props) => {
- const notesInitial = [];
- const [notes, setNotes] = useState(notesInitial)
+import React, { useCallback, useState } from "react";
+import noteContext from "./noteContext";
+import { encrypt } from "@/lib/utils/crypto";
- // Helper function to handle fetch responses
- const handleResponse = async (response) => {
- const contentType = response.headers.get('content-type');
-
- if (!response.ok) {
- const errorText = await response.text();
- let errorMessage = `HTTP ${response.status}`;
-
- try {
- // Try to parse as JSON first
- const errorJson = JSON.parse(errorText);
- errorMessage = errorJson.message || errorJson.error || errorMessage;
- } catch {
- // If not JSON, check if it's HTML
- if (contentType?.includes('text/html')) {
- errorMessage = `Server returned HTML instead of JSON (${response.status})`;
- } else {
- errorMessage = errorText || errorMessage;
- }
- }
-
- throw new Error(errorMessage);
- }
-
- if (!contentType?.includes('application/json')) {
- throw new Error(`Expected JSON but gots ${contentType}`);
- }
-
- return response.json();
- };
+const NoteState = (props) => {
+ const [notes, setNotes] = useState([]);
- // Fetch all notes with useCallback
+ // Fetch all notes
const getNotes = useCallback(async () => {
try {
- const response = await fetch(`/api/notes`, {
- method: 'GET',
- credentials: "include",
+ const response = await fetch("/api/notes", {
+ method: "GET",
headers: {
- 'Content-Type': 'application/json'
- }
- });
- const parsedText = await response.json();
- setNotes(parsedText)
- } catch (error) {
- console.error('Error fetching notes:', error);
- }
- }, []);
-
- // Add note
- const addNote = useCallback(async (title, description, tag, images = [], audio = null) => {
- try {
- const response = await fetch(`/api/notes`, {
- method: 'POST',
- credentials: "include",
- headers: {
- 'Content-Type': 'application/json'
+ "Content-Type": "application/json",
},
- body: JSON.stringify({ title, description, tag, images, audio })
});
- const note = await response.json();
- // Optimistic update - add to existing notes instead of refetching
- setNotes(prevNotes => [note, ...(Array.isArray(prevNotes) ? prevNotes : [])]);
+
+ const data = await response.json();
+ setNotes(data);
} catch (error) {
- console.error('Error adding note:', error);
- // If error, refetch to ensure consistency
- getNotes();
+ console.error("Error fetching notes:", error);
}
- }, [getNotes]);
+ }, []);
- // delete note
- const deleteNote = useCallback(async (id) => {
- try {
- const response = await fetch(`/api/notes/${id}`, {
- method: 'DELETE',
- credentials: "include",
- headers: {
- 'Content-Type': 'application/json'
- }
- });
- await response.json();
+ // Add note (ALREADY ENCRYPTED BEFORE CALLING THIS)
+ const addNote = useCallback(
+ async (title, description, tag) => {
+ try {
+ const response = await fetch("/api/notes", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ title, description, tag }),
+ });
- // Optimistic update
- const newNotes = notes.filter((note) => note._id !== id);
- setNotes(newNotes);
- } catch (error) {
- console.error('Error deleting note:', error);
- getNotes(); // Refetch on error
- }
- }, [notes, getNotes]);
+ const note = await response.json();
+ setNotes((prev) => [note, ...prev]);
+ } catch (error) {
+ console.error("Error adding note:", error);
+ getNotes();
+ }
+ },
+ [getNotes]
+ );
- // Edit note
- const editNote = useCallback(
- async (id, title, description, tag, images = [], audio = null) => {
- try {
- const response = await fetch(`/api/notes/${id}`, {
- method: "PUT",
- credentials: "include",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ title, description, tag, images, audio }),
- });
+ // Delete note
+ const deleteNote = useCallback(
+ async (id) => {
+ try {
+ await fetch(`/api/notes/${id}`, {
+ method: "DELETE",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
- if (!response.ok) {
- throw new Error("Failed to update note");
+ setNotes((prev) => prev.filter((note) => note._id !== id));
+ } catch (error) {
+ console.error("Error deleting note:", error);
+ getNotes();
}
+ },
+ [getNotes]
+ );
- const updatedNote = await response.json();
+ // ✨ EDIT NOTE — FULLY E2EE SAFE ✨
+ const editNote = useCallback(
+ async (id, title, description, tag) => {
+ try {
+ const secret = localStorage.getItem("encryptionKey");
+ if (!secret) {
+ throw new Error("Encryption key missing");
+ }
-
- setNotes((prev) =>
- prev.map((note) =>
- note._id === id ? updatedNote : note
- )
- );
- } catch (error) {
- console.error("Error updating note:", error);
- toast.error("Failed to update note");
- getNotes(); // fallback
- throw error;
- }
- },
- [getNotes]
-);
+ // 🔐 Encrypt BEFORE sending to server
+ const encryptedTitle = encrypt(title, secret);
+ const encryptedDescription = encrypt(description, secret);
+ await fetch(`/api/notes/${id}`, {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ title: encryptedTitle,
+ description: encryptedDescription,
+ tag,
+ }),
+ });
+
+ // Optimistic update (store encrypted data in state)
+ setNotes((prev) =>
+ prev.map((note) =>
+ note._id === id
+ ? {
+ ...note,
+ title: encryptedTitle,
+ description: encryptedDescription,
+ tag,
+ }
+ : note
+ )
+ );
+ } catch (error) {
+ console.error("Error updating note:", error);
+ getNotes();
+ throw error;
+ }
+ },
+ [getNotes]
+ );
return (
-
+
+
+ {/* Body */}
+ + {decryptedTitle || "Untitled Note"} +
+ + {note?.tag || "General"} + +
+
+
+ {/* Footer */}
+ + {decryptedDescription || + "No description provided. Click edit to add content."} +
+ + {/* Images */} + {Array.isArray(note?.images) && note.images.length > 0 && ( +
+ {note.images.map((img, i) => (
+ setPreviewImage(img)}
+ />
+ ))}
+
+ )}
+
+ {/* Link previews */}
+ {noteUrls.map((url, i) => (
+
+ {wordCount} words • {descriptionLength} chars
+
+
+
+ {/* Image Preview */}
+ {previewImage && (
+
+
+
+
+
+ setPreviewImage(null)}
+ >
+
+
+ )}
+