Sidebarnav

package.json

@@ -109,6 +109,8 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.28.1",
     "@lezer/highlight": "^1.2.0",
+    "@react-aria/listbox": "^3.12.1",
+    "@react-stately/list": "^3.10.5",
     "@replit/codemirror-indentation-markers": "^6.5.2",
     "@replit/codemirror-interact": "^6.3.1",
     "@replit/codemirror-lang-svelte": "^6.0.0",
@@ -139,9 +141,11 @@
     "openai": "^4.51.0",
     "prettier-plugin-svelte": "^3.2.4",
     "react": "^18.3.1",
+    "react-aria": "^3.33.1",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
+    "react-stately": "^3.31.1",
     "sharedb": "^5.0.2",
     "sharedb-client-browser": "^5.0.1",
     "vizhub-ui": "^3.23.0",

src/client/VZSidebar/DirectoryListing.tsx

@@ -46,7 +46,7 @@ export const DirectoryListing = ({
   );
 
   return (
-    <>
+    <div tabIndex={0} onKeyDown={(e)=>e.key === 'Enter' && handleClick()}>
       <Item
         id={path}
         name={name}
@@ -83,6 +83,6 @@ export const DirectoryListing = ({
           })}
         </div>
       ) : null}
-    </>
+    </div>
   );
 };

src/client/VZSidebar/FileListing.tsx

@@ -40,6 +40,7 @@ export const FileListing = ({
   );
 
   return (
+    <div tabIndex = {0} onKeyDown={(e)=>e.key==='Enter' && handleDoubleClick()}>
     <Item
       id={fileId}
       name={name}
@@ -54,5 +55,6 @@ export const FileListing = ({
       </i>
       {name}
     </Item>
+    </div>
   );
 };

src/client/VZSidebar/Item.tsx

@@ -162,8 +162,6 @@ export const Item = ({
           ? null
           : handleDoubleClick
       }
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     >
       <div className="name">
         {isRenaming ? (

src/client/VZSidebar/index.tsx

@@ -19,6 +19,12 @@ import { VZCodeContext } from '../VZCodeContext';
 import { Listing } from './Listing';
 import { useDragAndDrop } from './useDragAndDrop';
 import './styles.scss';
+import type {AriaListBoxProps} from 'react-aria';
+import {mergeProps, useFocusRing, useGridList, useGridListItem} from 'react-aria';
+import {useListState} from 'react-stately';
+import {useEffect, useRef} from 'react';
+
+import {Item} from 'react-stately';
 
 // TODO turn this UI back on when we are actually detecting
 // the connection status.
@@ -38,6 +44,33 @@ export const VZSidebar = ({
   reportBugTooltipText?: string;
   openKeyboardShortcuts?: string;
 }) => {
+
+  //TODO: Move these to useKeyboardShortcuts.ts
+  let gridListRef = useRef(null);
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      // Check if Alt key and '3' are pressed together
+      if (event.altKey && event.key === '3') {
+        // Prevent default action to avoid any unwanted behavior
+        event.preventDefault();
+        // Check if the gridListRef.current is not null and focus on it
+        if (gridListRef.current) {
+          gridListRef.current.focus();
+        }
+      }
+    };
+
+    // Attach the event listener to the window object
+    window.addEventListener('keydown', handleKeyDown);
+
+    // Cleanup the event listener on component unmount
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+
   const {
     files,
     openTab,
@@ -94,6 +127,58 @@ export const VZSidebar = ({
     handleDrop,
   } = useDragAndDrop();
 
+  function List(props) {
+    let state = useListState(props);
+    let ref = gridListRef;
+    let { gridProps } = useGridList(props, state, ref);
+
+    return (
+      <div {...gridProps} ref={ref} className="list">
+        {[...state.collection].map((item) => (
+          <ListItem key={item.key} item={item} state={state} />
+        ))}
+      </div>
+    );
+  }
+
+  function ListItem({ item, state }) {
+    const { fileId } = item as FileTreeFile;
+    const { path } = item as FileTree;
+    const key = fileId ? fileId : path;
+
+    let ref = useRef(null);
+
+    let { rowProps, gridCellProps, isPressed } = useGridListItem(
+      { node: item },
+      state,
+      ref
+    );
+
+    if (isPressed){
+      gridListRef = ref;
+    }
+
+    let { isFocusVisible, focusProps } = useFocusRing();
+    let showCheckbox = state.selectionManager.selectionMode !== 'none' &&
+      state.selectionManager.selectionBehavior === 'toggle';
+
+    return (
+      <li
+        {...mergeProps(rowProps, focusProps)}
+        ref={ref}
+        className={`${isPressed ? 'pressed' : ''} ${
+          isFocusVisible ? 'focus-visible' : ''
+        }`}
+      >
+        <div {...gridCellProps}>
+          {item.rendered}
+        </div>
+      </li>
+    );
+  }
+
+
+
   return (
     <div
       className="vz-sidebar"
@@ -199,11 +284,94 @@ export const VZSidebar = ({
             </div>
           </div>
         ) : filesExist ? (
+
+          <List
+            aria-label="Example dynamic collection List"
+            selectionMode="multiple"
+            selectionBehavior="replace"
+            items={fileTree.children}
+          >
+            {(item) => {
+              const { fileId } = item as FileTreeFile;
+              const { path } = item as FileTree;
+              const key = fileId ? fileId : path;
+              const itemKey = `item-${key}`;
+
+              return(
+                <Item key = {itemKey}>
+                  <Listing
+                      key={key}
+                      entity={item}
+                      handleFileClick={handleFileClick}
+                      handleFileDoubleClick={
+                        handleFileDoubleClick
+                      }
+                    />
+                </Item>
+              )
+            }}
+          </List>
+
+
+          /*
+          <List
+            aria-label="Example List"
+            selectionMode="multiple"
+            selectionBehavior="replace"
+            onAction={(key) => handleFileDoubleClick(key)}
+          >
+            {fileTree.children.map((entity) => {
+                const { fileId } = entity as FileTreeFile;
+                const { path } = entity as FileTree;
+                const key = fileId ? fileId : path;
+                return (
+                  <Item key={key}>
+                    Test
+                    <Listing
+                      key={key}
+                      entity={entity}
+                      handleFileClick={handleFileClick}
+                      handleFileDoubleClick={
+                        handleFileDoubleClick
+                      }
+                    />
+
+                  </Item>
+                );
+              })}
+          </List>
+          */
+
+          /*
+          <ListBox label="Alignment" selectionMode="single">
+              {fileTree.children.map((entity) => {
+                const { fileId } = entity as FileTreeFile;
+                const { path } = entity as FileTree;
+                const key = fileId ? fileId : path;
+                return (
+                  <Item key={key}>
+                    <Listing
+                      key={key}
+                      entity={entity}
+                      handleFileClick={handleFileClick}
+                      handleFileDoubleClick={
+                        handleFileDoubleClick
+                      }
+                    />
+
+                  </Item>
+                );
+              })}
+            </ListBox>
+            */
+
+          /*
           fileTree.children.map((entity) => {
             const { fileId } = entity as FileTreeFile;
             const { path } = entity as FileTree;
             const key = fileId ? fileId : path;
             return (
+
               <Listing
                 key={key}
                 entity={entity}
@@ -212,8 +380,12 @@ export const VZSidebar = ({
                   handleFileDoubleClick
                 }
               />
+
+
             );
           })
+            */
+
         ) : (
           <div className="empty">
             <div className="empty-text">

src/client/VZSidebar/styles.scss

@@ -1,4 +1,45 @@
 .vz-sidebar {
+  .list {
+    list-style: none;
+  }
+
+  .list li {
+    outline: none;
+    cursor: default;
+  }
+
+  .list li:nth-child(2n) {
+    background: var(--spectrum-alias-highlight-hover);
+  }
+
+  .list li.pressed {
+    background: var(--spectrum-global-color-gray-200);
+  }
+
+  .list li[aria-selected=true] {
+    background: slateblue;
+    color: white;
+  }
+
+  .list li.focus-visible {
+    outline: 2px solid slateblue;
+    outline-offset: -3px;
+  }
+
+  .list li.focus-visible[aria-selected=true] {
+    outline-color: white;
+  }
+
+  .list li[aria-disabled] {
+    opacity: 0.4;
+  }
+
+  .list [role=gridcell] {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
   height: 100%;
   color: var(--vh-color-neutral-04);
   background: var(--vh-color-neutral-01);

tsconfig.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "target": "ES2015",
+    "moduleResolution":"node",
   },
   "include": ["src/**/*"],
   "//": "TODO - remove this when we have this change: https://github.com/vitest-dev/vitest/issues/3622",