diff --git a/README.md b/README.md index 539cff2..5dd906b 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,12 @@ npm install npm run dev ``` +## ⌨️ Keyboard Shortcuts + +- **Focus search**: `Ctrl + K` / `Cmd + K` or `Ctrl + F` +- **New note**: `Ctrl + N` / `Cmd + N` + + ## 💡 How to Contribute We ❤️ contributions from the community! diff --git a/src/components/NotesSidebar.tsx b/src/components/NotesSidebar.tsx index 7b12aef..48ac5ad 100644 --- a/src/components/NotesSidebar.tsx +++ b/src/components/NotesSidebar.tsx @@ -5,7 +5,8 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { PlusCircle, Search, FileDown, LogIn, LogOut } from "lucide-react"; import jsPDF from "jspdf"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; + import { ScrollArea } from "@/components/ui/scroll-area"; import { ThemeToggle } from "@/components/theme/themeToggle"; import { useCurrentUser } from "@/context/CurrentUserContext"; @@ -31,6 +32,7 @@ export function NotesSidebar({ }: NotesSidebarProps) { const [searchQuery, setSearchQuery] = useState(""); const [isAuthOpen, setIsAuthOpen] = useState(false); + const searchInputRef = useRef(null); const { isLoggedIn, logout, user } = useCurrentUser(); // reactive to login/logout @@ -52,6 +54,22 @@ export function NotesSidebar({ } ); + useEffect(() => { + const handler = (e: KeyboardEvent) => { + const meta = e.ctrlKey || e.metaKey; + if (meta && (e.key === "k" || e.key === "K" || e.key === "f" || e.key === "F")) { + e.preventDefault(); + searchInputRef.current?.focus(); + } + if (meta && (e.key === "n" || e.key === "N")) { + e.preventDefault(); + onCreateNote(); + } + }; + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); + }, [onCreateNote]); + const handleAuthAction = () => { if (isLoggedIn) { logout(); // logout instantly @@ -90,7 +108,7 @@ export function NotesSidebar({ doc.text(activeNote.title || 'Untitled Note', margin, margin); doc.setFontSize(10); - const tagString = activeNote.tags.map(t => `${t.emoji} ${t.label}`).join(', '); + const tagString = (activeNote.tags ?? []).map(t => `${t.emoji} ${t.label}`).join(', '); doc.text(`Tags: ${tagString}`, margin, margin + 5); doc.setFontSize(12); @@ -130,6 +148,7 @@ export function NotesSidebar({ value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-9" + ref={searchInputRef} /> diff --git a/src/types/note.ts b/src/types/note.ts index 7efe349..cfa089d 100644 --- a/src/types/note.ts +++ b/src/types/note.ts @@ -4,6 +4,7 @@ export interface Note { content: string; createdAt: Date; updatedAt: Date; + tags?: { emoji: string; label: string }[]; } // Utility function to format timestamps export const formatTimestamp = (date: Date, locale: string = 'en-US'): string => {