Added Sidebar

src/components/ListItem.tsx

@@ -0,0 +1,89 @@
+import { useState, ChangeEvent, KeyboardEvent, useRef, useEffect } from "react";
+import { useNotesStore } from "../contexts/NotesStore"
+
+type ListItemProps = {
+  id: string;
+  label: string;
+  callback: React.MouseEventHandler<HTMLDivElement>;
+}
+
+function ListItem(props: ListItemProps) {
+  const { updateNote } = useNotesStore();
+  const [tempLabel, setTempLabel] = useState(props.label);
+  const [isEditing, setIsEditing] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const iconClasses = () => {
+    return `bi bi-file-earmark-text me-2` + (isEditing ? "m-0" : "");
+  };
+
+  const handleDoubleClick = () => setIsEditing(true)
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTempLabel(event.target.value)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      saveEdit();
+    }
+    if (event.key === "Escape") {
+      cancelEdit();
+    }
+  }
+
+  const cancelEdit = () => {
+    setTempLabel(props.label); // reset
+    setIsEditing(false);
+  };
+
+  const saveEdit = () => {
+    updateNote(props.id, { title: tempLabel });
+    setIsEditing(false);
+  };
+
+  useEffect(() => {
+    if (!isEditing) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        cancelEdit();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isEditing]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="d-flex align-items-center text-white-50 sidebar-listItem"
+      onClick={props.callback}
+      onDoubleClick={handleDoubleClick} 
+    >
+      <i className={iconClasses()} />
+      {
+        isEditing ? (
+          <input
+            type="text"
+            className="form-control form-control-sm bg-dark text-white ms-2"
+            value={tempLabel}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            autoFocus
+          />
+        ) : (
+          <span>
+            {props.label}
+          </span>
+        )
+      }
+    </div>
+  )
+}
+
+export default ListItem