YN-0177: add expand/collapse functionality to the left pane in all tabs

shared/src/api/generated/folders.ts

@@ -248,6 +248,7 @@ export type FolderListItem = {
   status: string
   attrib?: object
   ownAttrib?: string[]
+  hasVersions: boolean
   createdAt: string
   updatedAt: string
 }

shared/src/containers/ProjectTreeTable/ProjectTreeTable.tsx

@@ -1129,6 +1129,7 @@ const TableBody = ({
   })
 
   const handleTableBodyContextMenu = cellContextMenuHook.handleTableBodyContextMenu
+  const handleTableBodyAltClick = cellContextMenuHook.handleTableBodyAltClick
 
   const { handlePreFetchTasks } = usePrefetchFolderTasks()
 
@@ -1172,6 +1173,7 @@ const TableBody = ({
         display: 'grid',
       }}
       onContextMenu={handleTableBodyContextMenu}
+      onClick={handleTableBodyAltClick}
       onMouseOver={(e) => {
         handlePreFetchTasks(e)
       }}

shared/src/containers/ProjectTreeTable/hooks/useCellContextMenu.ts

@@ -442,7 +442,48 @@ const useCellContextMenu = ({
     cellContextMenuShow(e, constructedMenuItems)
   }
 
-  return { handleTableBodyContextMenu }
+  // Alt+Click handler for expand/collapse
+  const handleTableBodyAltClick = (e: React.MouseEvent<HTMLTableSectionElement, MouseEvent>) => {
+    if (!e.altKey) return
+
+    const target = e.target as HTMLElement
+    const tdEl = target.closest('td')
+    const cellId = tdEl?.firstElementChild?.id
+
+    if (!cellId) return
+
+    const cellData = getCellData(cellId)
+    if (!cellData) return
+
+    // Only handle folders in the name column
+    if (cellData.columnId !== 'name' || cellData.entityType !== 'folder') return
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    // Get selected folder IDs from current selection
+    const currentSelectedCells = Array.from(selectedCells)
+    const selectedCellsData = currentSelectedCells.flatMap((id) => getCellData(id) || [])
+    const selectedFolderIds = [
+      ...new Set(
+        selectedCellsData.filter((c) => c.entityType === 'folder').map((c) => c.entityId),
+      ),
+    ]
+
+    // Check if clicked folder is in the selection
+    const isClickedInSelection = selectedFolderIds.includes(cellData.entityId)
+
+    // If clicked folder is in selection, use all selected folders; otherwise just the clicked one
+    const idsToToggle = isClickedInSelection ? selectedFolderIds : [cellData.entityId]
+
+    // Check if clicked row is expanded
+    const isExpanded = expanded[cellData.entityId as keyof typeof expanded]
+
+    // Toggle expand/collapse
+    toggleExpands(idsToToggle, !isExpanded)
+  }
+
+  return { handleTableBodyContextMenu, handleTableBodyAltClick }
 }
 
 export default useCellContextMenu

shared/src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx

@@ -154,6 +154,7 @@ export const EntityNameWidget = ({
       {isExpandable ? (
         <Expander
           onClick={(e) => {
+            e.stopPropagation()
             if (e.altKey) {
               // expand/collapse all children
               toggleExpandAll(id)

shared/src/containers/SimpleTable/SimpleTable.tsx

@@ -211,6 +211,8 @@ const SimpleTable: FC<SimpleTableProps> = ({
     onRowSelectionChange,
     rowPinning,
     onRowPinningChange,
+    onContextMenu,
+    expandAllForRow,
   } = useSimpleTableContext()
   const lastSelectedIdRef = useRef<string | null>(null)
   const tableRef = useRef<Table<SimpleTableRow> | null>(null)
@@ -374,6 +376,9 @@ const SimpleTable: FC<SimpleTableProps> = ({
           const cellMeta = cellTableInstance.options.meta
 
           const handleCellClick = (event: ReactMouseEvent<HTMLElement, MouseEvent>) => {
+            // Alt+Click is handled by the RowExpander for expand/collapse
+            if (event.altKey) return
+
             // Prevent row selection if clicking on an interactive element within the cell
             if (
               event.target instanceof HTMLInputElement ||
@@ -422,6 +427,7 @@ const SimpleTable: FC<SimpleTableProps> = ({
             isRowExpanded: row.getIsExpanded(),
             isTableExpandable: cellMeta?.isExpandable,
             onExpandClick: row.getToggleExpandedHandler(),
+            onAltExpandClick: () => expandAllForRow?.(row.id),
             startContent: row.original.startContent,
             endContent: row.original.endContent,
             isDisabled: row.original.isDisabled,
@@ -446,6 +452,7 @@ const SimpleTable: FC<SimpleTableProps> = ({
       enableClickToDeselect,
       enableNonFolderIndent,
       imgRatio,
+      expandAllForRow,
     ], // include enableClickToDeselect for completeness
   )
 
@@ -592,6 +599,7 @@ const SimpleTable: FC<SimpleTableProps> = ({
                   key={row.id}
                   id={row.id}
                   {...pt?.row}
+                  onContextMenu={onContextMenu}
                   style={{
                     transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
                     ...pt?.row?.style, // custom styles to be passed

shared/src/containers/SimpleTable/SimpleTableRowTemplate.tsx

@@ -9,6 +9,7 @@ export type RowExpanderProps = {
   enableNonFolderIndent?: boolean
   isTableExpandable?: boolean
   onExpandClick?: () => void
+  onAltExpandClick?: () => void
 }
 
 export const RowExpander = ({
@@ -17,12 +18,17 @@ export const RowExpander = ({
   enableNonFolderIndent = true,
   isTableExpandable,
   onExpandClick,
+  onAltExpandClick,
 }: RowExpanderProps) =>
   isRowExpandable ? (
     <Styled.Expander
       onClick={(e) => {
         e.stopPropagation()
-        onExpandClick?.()
+        if (e.altKey) {
+          onAltExpandClick?.()
+        } else {
+          onExpandClick?.()
+        }
       }}
       icon={isRowExpanded ? 'expand_more' : 'chevron_right'}
       className="expander"
@@ -47,6 +53,7 @@ export interface SimpleTableCellTemplateProps extends React.HTMLAttributes<HTMLD
   isTableExpandable?: boolean
   enableNonFolderIndent?: boolean
   onExpandClick?: () => void
+  onAltExpandClick?: () => void
   //  when used as a template
   startContent?: React.ReactNode
   endContent?: React.ReactNode
@@ -78,6 +85,7 @@ export const SimpleTableCellTemplate = forwardRef<HTMLDivElement, SimpleTableCel
       isTableExpandable,
       enableNonFolderIndent = true,
       onExpandClick,
+      onAltExpandClick,
       startContent,
       endContent,
       depth = 0,
@@ -105,6 +113,7 @@ export const SimpleTableCellTemplate = forwardRef<HTMLDivElement, SimpleTableCel
           isRowExpanded={isRowExpanded}
           isTableExpandable={isTableExpandable}
           onExpandClick={onExpandClick}
+          onAltExpandClick={onAltExpandClick}
           enableNonFolderIndent={enableNonFolderIndent}
           {...pt?.expander}
         />