Function renderFolder

frontend/src/components/DraggableProjectTreeView.tsx:1832–2098

(folder: Folder, project: ProjectWithSessions, level: number = 0, isLastInLevel: boolean = false, parentPath: boolean[] = [])

  // Recursive function to render a folder and its children
  const renderFolder = (folder: Folder, project: ProjectWithSessions, level: number = 0, isLastInLevel: boolean = false, parentPath: boolean[] = []) => {
    const isExpanded = expandedFolders.has(folder.id);
    const folderSessions = project.sessions.filter(s => s.folderId === folder.id);
    const isDraggingOverFolder = dragState.overType === 'folder' && dragState.overFolderId === folder.id;
    const hasChildren = (folder.children && folder.children.length > 0) || folderSessions.length > 0;
    const folderUnviewedCount = folderSessions.filter(s => s.status === 'completed_unviewed').length;
    
    return (
      <div key={folder.id} className="relative" style={{ marginLeft: `${level * 16}px` }}>        
        {/* Tree lines for this folder */}
        <div className="absolute inset-0 pointer-events-none">
          {/* Vertical lines for parent levels */}
          {parentPath.map((hasMoreSiblings, parentLevel) => (
            hasMoreSiblings && (
              <div
                key={parentLevel}
                className="absolute top-0 bottom-0 w-px bg-border-secondary"
                style={{ left: `${parentLevel * 16 + 8}px` }}
              />
            )
          ))}
          
          
          {/* Vertical line for this level (if not last and has children when expanded) */}
          {level > 0 && !isLastInLevel && (
            <div
              className="absolute top-0 bottom-0 w-px bg-border-secondary"
              style={{ left: `${(level - 1) * 16 + 8}px` }}
            />
          )}
          
          {/* Vertical line down from this folder if expanded and has children */}
          {isExpanded && hasChildren && (
            <div
              className="absolute w-px bg-border-secondary"
              style={{ 
                left: `${level * 16 + 8}px`,
                top: '24px',
                bottom: '0px'
              }}
            />
          )}
          
          {/* Horizontal connector line for this folder */}
          {level > 0 && (
            <div
              className="absolute h-px bg-border-secondary"
              style={{ 
                left: `${(level - 1) * 16 + 8}px`,
                right: `calc(100% - ${level * 16}px)`,
                top: '12px'
              }}
            />
          )}
        </div>
        <div 
          className={`relative group/folder flex items-center space-x-1 py-1 rounded cursor-pointer transition-colors hover:bg-surface-hover ${
            isDraggingOverFolder ? 'bg-interactive/20' : ''