Function ProjectNavList

src/components/ProjectPageSidebar/ProjectNavList.tsx:96–223

({
  projects,
  activeProjectId,
  onProjectClick,
  onDeleteProject,
  onAchieveProject,
  onPinProject,
  onNewProject,
  newProjectActive = false,
  folded,
  className,
}: ProjectNavListProps)

/** New Project row, optional Pinned section, and Projects section. */
export function ProjectNavList({
  projects,
  activeProjectId,
  onProjectClick,
  onDeleteProject,
  onAchieveProject,
  onPinProject,
  onNewProject,
  newProjectActive = false,
  folded,
  className,
}: ProjectNavListProps) {
  const { t } = useTranslation();
  const projectListRef = useRef<HTMLDivElement>(null);
  const [projectListOverflow, setProjectListOverflow] = useState(false);

  useEffect(() => {
    const el = projectListRef.current;
    if (!el) return;

    const checkOverflow = () => {
      setProjectListOverflow(el.scrollHeight > el.clientHeight + 1);
    };

    checkOverflow();

    const observer = new ResizeObserver(checkOverflow);
    observer.observe(el);
    Array.from(el.children).forEach((child) => observer.observe(child));

    return () => observer.disconnect();
  }, [projects, folded]);

  const newProjectLabel = t('layout.new');
  const pinnedLabel = t('layout.pinned', { defaultValue: 'Pinned' });
  const projectsLabel = t('layout.projects', { defaultValue: 'Projects' });

  const pinnedProjects = projects.filter((p) => p.pinned);
  const unpinnedProjects = projects.filter((p) => !p.pinned);
  const hasPinned = pinnedProjects.length > 0;
  const hasUnpinned = unpinnedProjects.length > 0;

  const sharedRowProps = {
    activeProjectId,
    onProjectClick,
    onDeleteProject,
    onAchieveProject,
    onPinProject,
    folded,
  };

  return (
    <div
      className={cn(
        'min-h-0 min-w-0 flex w-full flex-col overflow-hidden',
        className
      )}
    >