Keyboard shortcuts and accessibility

src/client/CodeEditor/style.scss

@@ -71,6 +71,12 @@
     font-size: 12px;
   }
 
+  .sidebar-file-item.focused {
+    background-color: #e0e0e0; /* Light gray background for focused item */
+    outline: 2px solid blue; /* Blue outline to indicate focus */
+    box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); 
+  }
+
   .cm-panel.cm-search {
     padding: 5px;
     position: relative;
@@ -153,4 +159,4 @@
     background-color: var(--vh-color-caution-02); 
     transform: scale(0.95); 
   }
-}
+}

src/client/VZSidebar/DirectoryListing.tsx

@@ -11,17 +11,18 @@ export const DirectoryListing = ({
   children,
   handleFileClick,
   handleFileDoubleClick,
+  isExpanded = false,
 }: {
   name: string;
   path: string;
   children: Array<FileTree | FileTreeFile>;
   handleFileClick: (fileId: string) => void;
   handleFileDoubleClick: (fileId: string) => void;
+  isExpanded?: boolean;
 }) => {
   const {
     renameDirectory,
     deleteDirectory,
-    isDirectoryOpen,
     toggleDirectory,
     sidebarPresenceIndicators,
   } = useContext(VZCodeContext);
@@ -41,11 +42,6 @@ export const DirectoryListing = ({
     [renameDirectory, path, name],
   );
 
-  const isOpen = useMemo(
-    () => isDirectoryOpen(path),
-    [isDirectoryOpen, path],
-  );
-
   return (
     <>
       <Item
@@ -59,14 +55,14 @@ export const DirectoryListing = ({
         <div
           className="arrow-wrapper"
           style={{
-            transform: `rotate(${isOpen ? 90 : 0}deg)`,
+            transform: `rotate(${isExpanded ? 90 : 0}deg)`,
           }}
         >
           <DirectoryArrowSVG />
         </div>
         <div className="name">{name}</div>
       </Item>
-      {children && isOpen ? (
+      {children && isExpanded ? (
         <div className="indentation">
           {children.map((entity) => {
             const { fileId } = entity as FileTreeFile;

src/client/VZSidebar/Listing.tsx

@@ -14,37 +14,62 @@ export const Listing = ({
   entity,
   handleFileClick,
   handleFileDoubleClick,
+  isExpanded = false,
+  onDragStart,
+  onDragOver,
+  onDrop,
 }: {
   entity: FileTree | FileTreeFile;
   handleFileClick: (fileId: FileId) => void;
   handleFileDoubleClick: (fileId: FileId) => void;
+  isExpanded?: boolean;
+  onDragStart: (itemId: string) => void;
+  onDragOver: (event: React.DragEvent<Element>, itemId: string) => void;
+  onDrop: (event: React.DragEvent<Element>, itemId: string) => void;
 }) => {
-  const { activePane, sidebarPresenceIndicators } =
-    useContext(VZCodeContext);
+  const { activePane, sidebarPresenceIndicators } = useContext(VZCodeContext);
   const { name, file, fileId } = entity as FileTreeFile;
   const { path, children } = entity as FileTree;
 
-  const presence =
-    sidebarPresenceIndicators?.filter(
-      (indicator) => indicator.fileId === fileId,
-    ) || [];
+  const presence = sidebarPresenceIndicators?.filter(
+    (indicator) => indicator.fileId === fileId,
+  ) || [];
+
+  const itemId = fileId || path;
 
   return file ? (
-    <FileListing
-      fileId={fileId}
-      name={name}
-      handleFileClick={handleFileClick}
-      handleFileDoubleClick={handleFileDoubleClick}
-      isActive={fileId === activePane.activeFileId}
-      presence={presence}
-    />
+    <div
+      className="sidebar-file-item"
+      draggable
+      onDragStart={() => onDragStart(itemId)}
+      onDragOver={(event) => onDragOver(event, itemId)}
+      onDrop={(event) => onDrop(event, itemId)}
+    >
+      <FileListing
+        fileId={fileId}
+        name={name}
+        handleFileClick={handleFileClick}
+        handleFileDoubleClick={handleFileDoubleClick}
+        isActive={fileId === activePane.activeFileId}
+        presence={presence}
+      />
+    </div>
   ) : (
-    <DirectoryListing
-      name={name}
-      path={path}
-      children={children}
-      handleFileClick={handleFileClick}
-      handleFileDoubleClick={handleFileDoubleClick}
-    />
+    <div
+      className="sidebar-file-item"
+      draggable
+      onDragStart={() => onDragStart(itemId)}
+      onDragOver={(event) => onDragOver(event, itemId)}
+      onDrop={(event) => onDrop(event, itemId)}
+    >
+      <DirectoryListing
+        name={name}
+        path={path}
+        children={children}
+        handleFileClick={handleFileClick}
+        handleFileDoubleClick={handleFileDoubleClick}
+        isExpanded={isExpanded}
+      />
+    </div>
   );
 };