fix: context for command palette

fezcode · fezcode · commit e1eb11fefb18 · 2025-11-26T17:40:20.000+03:00
diff --git a/src/App.js b/src/App.js
@@ -8,6 +8,7 @@ import ContactModal from './components/ContactModal';
 import GenericModal from './components/GenericModal';
 import DigitalRain from './components/DigitalRain';
 import { AnimationProvider } from './context/AnimationContext'; // Import AnimationProvider
+import { CommandPaletteProvider } from './context/CommandPaletteContext';
 
 function App() {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -42,15 +43,17 @@ function App() {
         <DigitalRain isActive={isRainActive} />
         <ScrollToTop />
         <ToastProvider>
-          <Layout
-            toggleModal={toggleModal}
-            isSearchVisible={isSearchVisible}
-            toggleSearch={toggleSearch}
-            openGenericModal={openGenericModal}
-            toggleDigitalRain={toggleDigitalRain}
-          >
-            <AnimatedRoutes />
-          </Layout>
+          <CommandPaletteProvider>
+            <Layout
+              toggleModal={toggleModal}
+              isSearchVisible={isSearchVisible}
+              toggleSearch={toggleSearch}
+              openGenericModal={openGenericModal}
+              toggleDigitalRain={toggleDigitalRain}
+            >
+              <AnimatedRoutes />
+            </Layout>
+          </CommandPaletteProvider>
           <ContactModal isOpen={isModalOpen} onClose={toggleModal} />
           <GenericModal
             isOpen={isGenericModalOpen}
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -7,12 +7,13 @@ import DndFooter from './dnd/DndFooter';
 import { useLocation } from 'react-router-dom';
 import Search from './Search';
 import CommandPalette from './CommandPalette';
+import { useCommandPalette } from '../context/CommandPaletteContext';
 
 import { DndProvider } from '../context/DndContext';
 
 const Layout = ({ children, toggleModal, isSearchVisible, toggleSearch, openGenericModal, toggleDigitalRain }) => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(window.innerWidth > 768);
-  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
+  const { isPaletteOpen, setIsPaletteOpen } = useCommandPalette();
   const location = useLocation();
 
   useEffect(() => {
@@ -22,19 +23,10 @@ const Layout = ({ children, toggleModal, isSearchVisible, toggleSearch, openGene
       }
     };
 
-    const handleKeyDown = (event) => {
-      if (event.altKey && event.key === 'k') {
-        event.preventDefault();
-        setIsPaletteOpen((open) => !open);
-      }
-    };
-
     window.addEventListener('resize', handleResize);
-    window.addEventListener('keydown', handleKeyDown);
 
     return () => {
       window.removeEventListener('resize', handleResize);
-      window.removeEventListener('keydown', handleKeyDown);
     };
   }, []);
 
diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js
@@ -79,14 +79,15 @@ const ProjectCard = ({ project, size = 1 }) => {
         className="flex flex-col flex-grow relative z-10"
       >
         <h3 className="font-arvo text-xl text-orange-400">{project.title}</h3>
-        <p className="mt-2 text-gray-400 flex-grow">{project.description}</p>
+        <hr className="border-gray-700 -mx-6 mb-4 mt-4" />
+        <p className="text-gray-400 flex-grow">{project.description}</p>
       </Link>
       {project.link && (
         <a
           href={project.link}
           target="_blank"
           rel="noopener noreferrer"
-          className="mt-4 inline-block text-red-500 hover:text-red-300 transition-colors mt-auto flex items-center relative z-10"
+          className="text-red-500 hover:text-red-300 transition-colors mt-auto flex items-center relative z-10"
         >
           View Project <FaExternalLinkAlt className="ml-1" size={12} />
         </a>
diff --git a/src/context/CommandPaletteContext.js b/src/context/CommandPaletteContext.js
@@ -0,0 +1,34 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+
+const CommandPaletteContext = createContext();
+
+export const useCommandPalette = () => {
+  return useContext(CommandPaletteContext);
+};
+
+export const CommandPaletteProvider = ({ children }) => {
+  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
+
+  const openPalette = () => setIsPaletteOpen(true);
+  const closePalette = () => setIsPaletteOpen(false);
+  const togglePalette = () => setIsPaletteOpen((prev) => !prev);
+
+  // Global keyboard shortcut
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.altKey && event.key === 'k') {
+        event.preventDefault();
+        togglePalette();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <CommandPaletteContext.Provider value={{ isPaletteOpen, setIsPaletteOpen, openPalette, closePalette, togglePalette }}>
+      {children}
+    </CommandPaletteContext.Provider>
+  );
+};
diff --git a/src/pages/CommandsPage.js b/src/pages/CommandsPage.js
@@ -1,11 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import {
-  ArrowLeftIcon, TerminalWindowIcon
-} from '@phosphor-icons/react';
-
+import { ArrowLeftIcon, TerminalWindowIcon } from '@phosphor-icons/react';
 import useSeo from '../hooks/useSeo';
-
+import { useCommandPalette } from '../context/CommandPaletteContext';
 import colors from "../config/colors"; // Import CustomDropdown
 
 function CommandsPage() {
@@ -29,6 +26,8 @@ function CommandsPage() {
     twitterImage: 'https://fezcode.github.io/logo512.png',
   });
 
+  const { togglePalette } = useCommandPalette();
+
   const cardStyle = {
     backgroundColor: colors['app-alpha-10'],
     borderColor: colors['app-alpha-50'],
@@ -79,6 +78,13 @@ function CommandsPage() {
                   <br/>
                   You can type <code className="text-emerald-300"> COMMAND </code> to see all available commands.
                 </p>
+                <button
+                  onClick={togglePalette}
+                  className="border border-gray-200 bg-black/50 hover:bg-gray-50 text-white hover:text-black font-mono py-3 px-4 rounded w-full transition-colors duration-300 flex items-center justify-center gap-2"
+                >
+                  <TerminalWindowIcon size={24} />
+                  Open Command Palette
+                </button>
               </div>
 
               <h1 className="text-3xl font-arvo font-normal mb-4 text-app"> Available Commands </h1>
