Add keyboard shortcut for opening editing modal

deleteMe.py

@@ -0,0 +1,23 @@
+import sqlite3
+import csv
+
+def import_csv_to_sqlite(csv_file, db_file, table_name):
+    conn = sqlite3.connect(db_file)
+    cursor = conn.cursor()
+
+    with open(csv_file, 'r') as file:
+        csv_reader = csv.reader(file)
+        headers = next(csv_reader)  # Assume first row is headers
+
+        # Prepare the INSERT statement
+        placeholders = ','.join(['?' for _ in headers])
+        insert_query = f"INSERT INTO {table_name} ({','.join(headers)}) VALUES ({placeholders})"
+
+        # Insert the data
+        cursor.executemany(insert_query, csv_reader)
+
+    conn.commit()
+    conn.close()
+
+# Usage
+import_csv_to_sqlite('data.csv', 'new_database.db', 'table_name')

src/components/ChartSessionPanel.tsx

@@ -1,6 +1,7 @@
 import SecondaryButton from "./SecondaryButton"
 import { formatSeconds } from "../lib/utils"
 import EditModal from './EditModal'
+import { useEffect } from 'react'
 
 function Divider(){
     return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 2" fill="none">
@@ -37,6 +38,21 @@ export default function ChartSessionPanel({ elements, isModalOpen, setIsModalOpe
     isModalOpen: boolean, 
     setIsModalOpen: (open: boolean) => void 
 }) {
+    // Add useEffect to handle keydown event
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            // Check if 'e' is pressed and data is selected
+            if (event.key === 'e' && elements.barData.length > 0) {
+                setIsModalOpen(true);
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [setIsModalOpen, elements.barData]);
+
     const maxBarLength = Math.max(...elements.barData.map(element => element.time));
     const totalTime = elements.barData.reduce((total, element) => total + element.time, 0);
     return (
@@ -69,4 +85,4 @@ export default function ChartSessionPanel({ elements, isModalOpen, setIsModalOpe
             )}
         </>
     )
-}
+}

src/components/EditModal.tsx

@@ -15,6 +15,16 @@ interface TextItemProps {
 }
 
 const TextItem: React.FC<TextItemProps> = ({ content, isInput, onChange }) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete'];
+    const isNumber = /^[0-9]$/.test(e.key);
+    const isColon = e.key === ':';
+
+    if (!isNumber && !isColon && !allowedKeys.includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
   return (
     <div className={`flex w-[50px] p-1 items-center justify-center rounded-md ${isInput ? 'bg-[#191919]' : ''}`}>
       {isInput ? (
@@ -23,10 +33,11 @@ const TextItem: React.FC<TextItemProps> = ({ content, isInput, onChange }) => {
           placeholder="HH:MM"
           value={content.slice(0, 5)} // Restrict length to 5 characters
           onChange={(e) => onChange && onChange(e.target.value.slice(0, 5))} // Restrict length to 5 characters
-          className="w-full bg-transparent text-[#D9D9D9]  text-sm font-normal leading-normal outline-none text-center"
+          onKeyDown={handleKeyDown}
+          className="w-full bg-transparent text-[#D9D9D9] text-sm font-normal leading-normal outline-none text-center"
         />
       ) : (
-        <p className="text-[#D9D9D9] leading-trim text-edge-cap  text-sm font-normal leading-normal text-center">{content}</p>
+        <p className="text-[#D9D9D9] leading-trim text-edge-cap text-sm font-normal leading-normal text-center">{content}</p>
       )}
     </div>
   );