+
-
+
-
- {title && {title}
}
+
+ {title && {title}
}
{preview}
-
+
-
+
{timeAgo(data.createdAt)}
- );
-};
+ )
+}
diff --git a/src/components/notes/NoteSideBar.jsx b/src/components/notes/NoteSideBar.jsx
index 9614547..6e6ee5d 100644
--- a/src/components/notes/NoteSideBar.jsx
+++ b/src/components/notes/NoteSideBar.jsx
@@ -1,121 +1,123 @@
-import React, { useState } from "react";
-import { FiX, FiTrash2, FiEdit, FiSave } from "react-icons/fi";
-import { timeAgo } from "@/src/utils/timeAgo";
-import { Button } from "@/src/components/ui/Button.jsx";
-import { Input } from "@/src/components/ui/Input.jsx";
-import "@/src/App.css";
-import { vaultPass } from "@/src/lib/vaultPass.js";
-import { useGlobalStore } from "@/src/store/globalStore.js";
-import Alert from "@/src/components/popups/Alert.jsx";
+import React, { useState } from 'react'
+import { FiX, FiTrash2, FiEdit, FiSave } from 'react-icons/fi'
+import { timeAgo } from '@/src/utils/timeAgo'
+import { Button } from '@/src/components/ui/Button.jsx'
+import { Input } from '@/src/components/ui/Input.jsx'
+import '@/src/App.css'
+import { vaultPass } from '@/src/lib/vaultPass.js'
+import { useGlobalStore } from '@/src/store/globalStore.js'
+import Alert from '@/src/components/popups/Alert.jsx'
export const NoteSideBar = ({ note, onClose, onDelete }) => {
- if (!note) return null;
+ if (!note) return null
- const [isEditMode, setIsEditMode] = useState(false);
- const [showSuccessAlert, setShowSuccessAlert] = useState(false);
- const [searchQuery, setSearchQuery] = useState("");
+ const [isEditMode, setIsEditMode] = useState(false)
+ const [showSuccessAlert, setShowSuccessAlert] = useState(false)
+ const [searchQuery, setSearchQuery] = useState('')
React.useEffect(() => {
const fetchExistingTags = async () => {
try {
- await vaultPass.getAll();
+ await vaultPass.getAll()
} catch (error) {
- console.error("Error fetching tags:", error);
+ console.error('Error fetching tags:', error)
}
- };
+ }
if (isEditMode) {
- fetchExistingTags();
+ fetchExistingTags()
}
- }, [isEditMode]);
+ }, [isEditMode])
const handleSaveEdit = async () => {
try {
const updatedNote = {
- ...note,
- };
- await vaultPass.update(note.id, updatedNote);
- setIsEditMode(false);
- setShowSuccessAlert(true);
- setTimeout(() => setShowSuccessAlert(false), 2000);
- useGlobalStore.getState().triggerRefreshNotes?.();
+ ...note
+ }
+ await vaultPass.update(note.id, updatedNote)
+ setIsEditMode(false)
+ setShowSuccessAlert(true)
+ setTimeout(() => setShowSuccessAlert(false), 2000)
+ useGlobalStore.getState().triggerRefreshNotes?.()
} catch (error) {
- console.error("Error updating note:", error);
+ console.error('Error updating note:', error)
}
- };
+ }
- const normalizedQuery = searchQuery.trim().toLowerCase();
+ const normalizedQuery = searchQuery.trim().toLowerCase()
const filteredContent = normalizedQuery
? note?.content?.filter((item) =>
- item?.content?.toLowerCase().includes(normalizedQuery),
- )
- : note?.content;
+ item?.content?.toLowerCase().includes(normalizedQuery)
+ )
+ : note?.content
- const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+ const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
const highlightMatch = (text) => {
- if (!normalizedQuery || !text) return text;
- const regex = new RegExp(`(${escapeRegExp(normalizedQuery)})`, "ig");
- const parts = text.split(regex);
+ if (!normalizedQuery || !text) return text
+ const regex = new RegExp(`(${escapeRegExp(normalizedQuery)})`, 'ig')
+ const parts = text.split(regex)
return parts.map((part, index) =>
- regex.test(part) ? (
-
- {part}
-
- ) : (
-
{part}
- ),
- );
- };
+ regex.test(part)
+ ? (
+
+ {part}
+
+ )
+ : (
+
{part}
+ )
+ )
+ }
return (
<>
{showSuccessAlert && (
-
+
)}
-
e.stopPropagation()}>
+
e.stopPropagation()}>
{/* Header */}
-
+
{timeAgo(note.createdAt)}
-
{/* Note Content */}
-
+
setSearchQuery(e.target.value)}
/>
{filteredContent?.map((item, idx) => (
- {item.type === "title" && (
-
+ {item.type === 'title' && (
+
{highlightMatch(item.content)}
)}
- {item.type === "subtitle" && (
-
+ {item.type === 'subtitle' && (
+
{highlightMatch(item.content)}
)}
- {item.type === "para" && (
-
+ {item.type === 'para' && (
+
{highlightMatch(item.content)}
)}
@@ -124,44 +126,46 @@ export const NoteSideBar = ({ note, onClose, onDelete }) => {
{/* Action Buttons */}
-
+
- );
-};
+ )
+}
diff --git a/src/components/password/PasswordCard.jsx b/src/components/password/PasswordCard.jsx
index 3880ed1..9e17809 100644
--- a/src/components/password/PasswordCard.jsx
+++ b/src/components/password/PasswordCard.jsx
@@ -1,88 +1,88 @@
-import React from "react";
-import { Divider } from "@/src/components/ui/Divider.jsx";
-import PasswordInput from "@/src/components/password/PasswordInput.jsx";
-import { Tag } from "@/src/components/ui/Tag.jsx";
-import { timeAgo } from "@/src/utils/timeAgo.js";
-import { FiLock, FiTrash } from "react-icons/fi";
-import "@/src/App.css";
+import React from 'react'
+import { Divider } from '@/src/components/ui/Divider.jsx'
+import PasswordInput from '@/src/components/password/PasswordInput.jsx'
+import { Tag } from '@/src/components/ui/Tag.jsx'
+import { timeAgo } from '@/src/utils/timeAgo.js'
+import { FiLock, FiTrash } from 'react-icons/fi'
+import '@/src/App.css'
export const PasswordCard = ({ data, onDelete, onClick }) => {
- const title = data?.name || "Untitled";
- const website = data?.website || "No website";
- const username = data?.username || "No username";
- const password = data?.password || "";
- const tags = data?.tag || [];
+ const title = data?.name || 'Untitled'
+ const website = data?.website || 'No website'
+ const username = data?.username || 'No username'
+ const password = data?.password || ''
+ const tags = data?.tag || []
return (
-
-
+
+
-
+
-
- {title}
+
+ {title}
{website}
-
{username}
-
+
{username}
+
-
+
{tags.length > 0 && (
-
-
+
+
)}
-
+
{/*
*/}
{timeAgo(data.createdAt)}
- );
-};
+ )
+}
diff --git a/src/components/password/PasswordInput.jsx b/src/components/password/PasswordInput.jsx
index dbf4204..803d6a8 100644
--- a/src/components/password/PasswordInput.jsx
+++ b/src/components/password/PasswordInput.jsx
@@ -1,82 +1,84 @@
-import React, { useState } from "react";
-import { FiCopy, FiEye, FiEyeOff } from "react-icons/fi";
+import React, { useState } from 'react'
+import { FiCopy, FiEye, FiEyeOff } from 'react-icons/fi'
const PasswordInput = ({
value,
onChange,
- placeholder = "Enter password",
- label = null,
+ placeholder = 'Enter password',
+ label = null
}) => {
- const [showPassword, setShowPassword] = useState(false);
- const [copied, setCopied] = useState(false);
+ const [showPassword, setShowPassword] = useState(false)
+ const [copied, setCopied] = useState(false)
const togglePassword = () => {
- setShowPassword((prev) => !prev);
- };
+ setShowPassword((prev) => !prev)
+ }
const copyPassword = async () => {
- if (!value) return;
+ if (!value) return
try {
- await navigator.clipboard.writeText(value);
- setCopied(true);
- setTimeout(() => setCopied(false), 1500);
+ await navigator.clipboard.writeText(value)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 1500)
} catch (err) {
- console.error("Failed to copy:", err);
+ console.error('Failed to copy:', err)
}
- };
+ }
return (
<>
{label !== null && (
)}
-
+
- {copied && Copied!}
+ {copied && Copied!}
- );
-};
+ )
+}
-export default PasswordInput;
+export default PasswordInput
diff --git a/src/components/password/Search.jsx b/src/components/password/Search.jsx
index 24201f2..3dd2fdd 100644
--- a/src/components/password/Search.jsx
+++ b/src/components/password/Search.jsx
@@ -1,44 +1,44 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from 'react'
-export const Search = ({ content = "Search...", value, onChange }) => {
- const inputRef = useRef(null);
+export const Search = ({ content = 'Search...', value, onChange }) => {
+ const inputRef = useRef(null)
useEffect(() => {
const handleKeyDown = (e) => {
- if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
- e.preventDefault();
- inputRef.current?.focus();
+ if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+ e.preventDefault()
+ inputRef.current?.focus()
}
- };
+ }
- window.addEventListener("keydown", handleKeyDown);
- return () => window.removeEventListener("keydown", handleKeyDown);
- }, []);
+ window.addEventListener('keydown', handleKeyDown)
+ return () => window.removeEventListener('keydown', handleKeyDown)
+ }, [])
return (
-
+
- ⌘K
+ ⌘K
- );
-};
+ )
+}
diff --git a/src/components/popups/Alert.jsx b/src/components/popups/Alert.jsx
index 24f3d5a..bbbef05 100644
--- a/src/components/popups/Alert.jsx
+++ b/src/components/popups/Alert.jsx
@@ -1,53 +1,53 @@
-import React, { useEffect, useState } from "react";
-import { FiX } from "react-icons/fi";
-import "@/src/App.css";
+import React, { useEffect, useState } from 'react'
+import { FiX } from 'react-icons/fi'
+import '@/src/App.css'
-export default function Alert({
+export default function Alert ({
icon,
- color = "#4f46e5",
+ color = '#4f46e5',
title,
message,
duration = 4000,
- onClose,
+ onClose
}) {
- const [visible, setVisible] = useState(false);
+ const [visible, setVisible] = useState(false)
useEffect(() => {
- setVisible(true);
+ setVisible(true)
if (duration) {
const timer = setTimeout(() => {
- handleClose();
- }, duration);
+ handleClose()
+ }, duration)
- return () => clearTimeout(timer);
+ return () => clearTimeout(timer)
}
- }, []);
+ }, [])
const handleClose = () => {
- setVisible(false);
+ setVisible(false)
setTimeout(() => {
- onClose && onClose();
- }, 300);
- };
+ onClose && onClose()
+ }, 300)
+ }
return (
-
+
{icon}
-
-
{title}
-
{message}
+
-
- );
+ )
}
diff --git a/src/components/popups/DecryptPopUp.jsx b/src/components/popups/DecryptPopUp.jsx
index 23629b2..85023e2 100644
--- a/src/components/popups/DecryptPopUp.jsx
+++ b/src/components/popups/DecryptPopUp.jsx
@@ -1,70 +1,70 @@
-import React from "react";
-import { FiX, FiUpload } from "react-icons/fi";
-import { Input } from "@/src/components/ui/Input.jsx";
-import { Button } from "@/src/components/ui/Button.jsx";
-import "@/src/App.css";
+import React from 'react'
+import { FiX, FiUpload } from 'react-icons/fi'
+import { Input } from '@/src/components/ui/Input.jsx'
+import { Button } from '@/src/components/ui/Button.jsx'
+import '@/src/App.css'
export const DecryptPopUp = ({
roomKey,
setRoomKey,
decryptError,
handleDecryptAndImport,
- handleCancelDecrypt,
+ handleCancelDecrypt
}) => {
return (
-