From 45d2382ca231b4ddefd6c2fc7e90b1d596dd3a25 Mon Sep 17 00:00:00 2001
From: Ashvin-KS <ashvinksg@gmail.com>
Date: Sun, 14 Jun 2026 08:57:55 +0530
Subject: [PATCH 1/3] feat: add keyboard shortcuts for common actions

- Ctrl+N: New task
- Ctrl+K: Toggle search
- Ctrl+D: Toggle dark mode
- Esc: Close modal
- ?: Show keyboard shortcuts help

Closes #1528
---
 frontend/src/App.jsx                          |  3 +
 .../src/components/KeyboardShortcutsHelp.jsx  | 47 +++++++++++++
 .../components/KeyboardShortcutsProvider.jsx  | 66 +++++++++++++++++++
 frontend/src/hooks/useKeyboardShortcuts.js    | 40 +++++++++++
 4 files changed, 156 insertions(+)
 create mode 100644 frontend/src/components/KeyboardShortcutsHelp.jsx
 create mode 100644 frontend/src/components/KeyboardShortcutsProvider.jsx
 create mode 100644 frontend/src/hooks/useKeyboardShortcuts.js

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 920678a8..8673195d 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 import { AnimatePresence } from "framer-motion";
 import Navbar from "./components/Navbar.jsx";
+import KeyboardShortcutsProvider from "./components/KeyboardShortcutsProvider.jsx";
 import LandingPage from "./pages/LandingPage";
 import Login from "./pages/Login.jsx";
 import Signup from "./pages/Signup.jsx";
@@ -146,6 +147,7 @@ const AnimatedRoutes = () => {
 
 const App = () => {
   return (
+    <KeyboardShortcutsProvider>
     <BrowserRouter>
       <Navbar />
       <main className="app-bg min-h-screen pt-15 flex flex-col text-main transition-colors duration-300">
@@ -251,6 +253,7 @@ const App = () => {
       <Footer />
       <ScrollToTop />
     </BrowserRouter>
+    </KeyboardShortcutsProvider>
   );
 };
 
diff --git a/frontend/src/components/KeyboardShortcutsHelp.jsx b/frontend/src/components/KeyboardShortcutsHelp.jsx
new file mode 100644
index 00000000..d5f2855d
--- /dev/null
+++ b/frontend/src/components/KeyboardShortcutsHelp.jsx
@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+
+const shortcuts = [
+  { keys: ['Ctrl', 'N'], description: 'New task' },
+  { keys: ['Ctrl', 'K'], description: 'Toggle search' },
+  { keys: ['Ctrl', 'D'], description: 'Toggle dark mode' },
+  { keys: ['Esc'], description: 'Close modal' },
+];
+
+const KeyboardShortcutsHelp = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold">Keyboard Shortcuts</h2>
+          <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
+            &times;
+          </button>
+        </div>
+        <div className="space-y-3">
+          {shortcuts.map((shortcut, index) => (
+            <div key={index} className="flex justify-between items-center">
+              <span className="text-gray-600 dark:text-gray-300">{shortcut.description}</span>
+              <div className="flex gap-1">
+                {shortcut.keys.map((key, keyIndex) => (
+                  <kbd
+                    key={keyIndex}
+                    className="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-sm font-mono"
+                  >
+                    {key}
+                  </kbd>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 text-sm text-gray-500">
+          Press <kbd className="px-1 py-0.5 bg-gray-100 dark:bg-gray-700 rounded">?</kbd> to open this help
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default KeyboardShortcutsHelp;
diff --git a/frontend/src/components/KeyboardShortcutsProvider.jsx b/frontend/src/components/KeyboardShortcutsProvider.jsx
new file mode 100644
index 00000000..66537af5
--- /dev/null
+++ b/frontend/src/components/KeyboardShortcutsProvider.jsx
@@ -0,0 +1,66 @@
+import { useState, useEffect, createContext, useContext } from 'react';
+import useKeyboardShortcuts from '../hooks/useKeyboardShortcuts';
+import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
+
+const KeyboardShortcutsContext = createContext();
+
+export const useKeyboardShortcutsContext = () => useContext(KeyboardShortcutsContext);
+
+const KeyboardShortcutsProvider = ({ children }) => {
+  const [showHelp, setShowHelp] = useState(false);
+
+  const handleNewTask = () => {
+    // Navigate to tasks page or open new task modal
+    window.dispatchEvent(new CustomEvent('keyboard-shortcut', { detail: 'new-task' }));
+  };
+
+  const handleToggleSearch = () => {
+    window.dispatchEvent(new CustomEvent('keyboard-shortcut', { detail: 'toggle-search' }));
+  };
+
+  const handleToggleDarkMode = () => {
+    const html = document.documentElement;
+    const isDark = html.classList.contains('dark');
+    if (isDark) {
+      html.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    } else {
+      html.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    }
+  };
+
+  const handleCloseModal = () => {
+    window.dispatchEvent(new CustomEvent('keyboard-shortcut', { detail: 'close-modal' }));
+  };
+
+  useKeyboardShortcuts({
+    onNewTask: handleNewTask,
+    onToggleSearch: handleToggleSearch,
+    onToggleDarkMode: handleToggleDarkMode,
+    onCloseModal: handleCloseModal,
+  });
+
+  // Handle '?' key for help
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) {
+        return;
+      }
+      if (e.key === '?') {
+        setShowHelp(prev => !prev);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <KeyboardShortcutsContext.Provider value={{ showHelp, setShowHelp }}>
+      {children}
+      <KeyboardShortcutsHelp isOpen={showHelp} onClose={() => setShowHelp(false)} />
+    </KeyboardShortcutsContext.Provider>
+  );
+};
+
+export default KeyboardShortcutsProvider;
diff --git a/frontend/src/hooks/useKeyboardShortcuts.js b/frontend/src/hooks/useKeyboardShortcuts.js
new file mode 100644
index 00000000..ebbad8d0
--- /dev/null
+++ b/frontend/src/hooks/useKeyboardShortcuts.js
@@ -0,0 +1,40 @@
+import { useEffect, useCallback } from 'react';
+
+const useKeyboardShortcuts = ({ onNewTask, onToggleSearch, onToggleDarkMode, onCloseModal }) => {
+  const handleKeyDown = useCallback((e) => {
+    // Ignore if user is typing in an input
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) {
+      return;
+    }
+
+    // Ctrl/Cmd + N: New task
+    if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
+      e.preventDefault();
+      onNewTask?.();
+    }
+
+    // Ctrl/Cmd + K: Toggle search
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      e.preventDefault();
+      onToggleSearch?.();
+    }
+
+    // Ctrl/Cmd + D: Toggle dark mode
+    if ((e.ctrlKey || e.metaKey) && e.key === 'd') {
+      e.preventDefault();
+      onToggleDarkMode?.();
+    }
+
+    // Escape: Close modal
+    if (e.key === 'Escape') {
+      onCloseModal?.();
+    }
+  }, [onNewTask, onToggleSearch, onToggleDarkMode, onCloseModal]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+};
+
+export default useKeyboardShortcuts;

From b4fcfad02d3c261ff8e5bd7e31ad64fac6c9c1f9 Mon Sep 17 00:00:00 2001
From: Ashvin-KS <ashvinksg@gmail.com>
Date: Mon, 15 Jun 2026 06:33:29 +0530
Subject: [PATCH 2/3] feat: Add task priority levels with color coding

- Add Priority type with low/medium/high/urgent levels
- Color-coded priority badges
- Selectable priority dropdown component

Closes #1555
---
 src/components/TaskPriority.tsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/TaskPriority.tsx

diff --git a/src/components/TaskPriority.tsx b/src/components/TaskPriority.tsx
new file mode 100644
index 00000000..0c6b7899
--- /dev/null
+++ b/src/components/TaskPriority.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+export type Priority = 'low' | 'medium' | 'high' | 'urgent';
+
+interface TaskPriorityProps {
+  priority: Priority;
+  onChange?: (priority: Priority) => void;
+  disabled?: boolean;
+}
+
+const priorityColors: Record<Priority, string> = {
+  low: 'bg-gray-100 text-gray-700',
+  medium: 'bg-blue-100 text-blue-700',
+  high: 'bg-orange-100 text-orange-700',
+  urgent: 'bg-red-100 text-red-700',
+};
+
+export function TaskPriority({ priority, onChange, disabled }: TaskPriorityProps) {
+  return (
+    <select
+      value={priority}
+      onChange={(e) => onChange?.(e.target.value as Priority)}
+      disabled={disabled}
+      className={px-2 py-1 rounded-full text-xs font-medium }
+    >
+      <option value="low">Low</option>
+      <option value="medium">Medium</option>
+      <option value="high">High</option>
+      <option value="urgent">Urgent</option>
+    </select>
+  );
+}

From 094d26837c9229b54741df57e3dcf7010acf8ba9 Mon Sep 17 00:00:00 2001
From: Ashvin-KS <ashvinksg@gmail.com>
Date: Fri, 19 Jun 2026 12:25:10 +0530
Subject: [PATCH 3/3] fix: Resolve ESLint errors in keyboard shortcuts
 components

- Remove unused imports (useState, useEffect) from KeyboardShortcutsHelp
- Remove unused named export from KeyboardShortcutsProvider
- Remove unused useContext import
---
 frontend/package-lock.json                         | 14 --------------
 frontend/src/components/KeyboardShortcutsHelp.jsx  |  2 --
 .../src/components/KeyboardShortcutsProvider.jsx   |  4 +---
 3 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5e84573c..87a1b8ce 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -69,7 +69,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1005,7 +1004,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.14.13.tgz",
       "integrity": "sha512-H89Jeyp31+EZk9GPu6vaeL9mEmoXgM3nASB7UPBYYS/lqAks21mO1BU1dF8NbsVTL6tgGZkGUtiGJgxtDiwHkw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/component": "0.7.3",
         "@firebase/logger": "0.5.1",
@@ -1072,7 +1070,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.5.13.tgz",
       "integrity": "sha512-pn3FvXwUR34kWPccDQfCKsNZcM2wD1OS+J1jeEgzM1ZNXoxR2NaF6e5DjDuRrnTwR6LN2XQQt0IqE6yKmgpCQg==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/app": "0.14.13",
         "@firebase/component": "0.7.3",
@@ -1089,7 +1086,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.5.tgz",
       "integrity": "sha512-YevqTjvo7Iujsa9Dwowmd6dSoElhzmD63ZSrq6bzjvQ6POjYgNjOFHLmNIgJs48eNO093NCERibuFnxbfOvU7A==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/logger": "0.5.1"
       }
@@ -1543,7 +1539,6 @@
       "integrity": "sha512-LUdM4Wg7YM9Pq/49nGYySJA0CSQEKnGffFzWV8+6gXN7mGxn+FL1IqvFbuZUtAQcfZgHYDwCE1wwlK7rB7gl2g==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       },
@@ -2423,7 +2418,6 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2472,7 +2466,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2612,7 +2605,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -3038,7 +3030,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4381,7 +4372,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4485,7 +4475,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
       "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4495,7 +4484,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
       "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4911,7 +4899,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.3.tgz",
       "integrity": "sha512-/4XH147Ui7OGTjg3HbdWe5arnZQSbfuRzdr9Ec7TQi5I7R+ir0Rlc9GIvD4v0XZurELqA035KVXJXpR61xhiTA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -5115,7 +5102,6 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/frontend/src/components/KeyboardShortcutsHelp.jsx b/frontend/src/components/KeyboardShortcutsHelp.jsx
index d5f2855d..cf27a5c4 100644
--- a/frontend/src/components/KeyboardShortcutsHelp.jsx
+++ b/frontend/src/components/KeyboardShortcutsHelp.jsx
@@ -1,5 +1,3 @@
-import { useState, useEffect } from 'react';
-
 const shortcuts = [
   { keys: ['Ctrl', 'N'], description: 'New task' },
   { keys: ['Ctrl', 'K'], description: 'Toggle search' },
diff --git a/frontend/src/components/KeyboardShortcutsProvider.jsx b/frontend/src/components/KeyboardShortcutsProvider.jsx
index 66537af5..5300bfdb 100644
--- a/frontend/src/components/KeyboardShortcutsProvider.jsx
+++ b/frontend/src/components/KeyboardShortcutsProvider.jsx
@@ -1,11 +1,9 @@
-import { useState, useEffect, createContext, useContext } from 'react';
+import { useState, useEffect, createContext } from 'react';
 import useKeyboardShortcuts from '../hooks/useKeyboardShortcuts';
 import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
 
 const KeyboardShortcutsContext = createContext();
 
-export const useKeyboardShortcutsContext = () => useContext(KeyboardShortcutsContext);
-
 const KeyboardShortcutsProvider = ({ children }) => {
   const [showHelp, setShowHelp] = useState(false);