Function ProjectFolder

frontend/src/components/DataShelf.tsx:105–131

({ pid, files, locale }: { pid: string; files: Artifact[]; locale: string })

  return (
    <div className="shelf-project">
      <div className="shelf-project-name" onClick={() => setOpen(!open)}>
        <span className="folder-icon">{open ? '📂' : '📁'}</span>
        <span className="folder-name">{pid}</span>
        <span className="shelf-count">{files.length}</span>
        <span className={`folder-arrow ${open ? 'open' : ''}`}>▶</span>
      </div>
      {open && (
        <div className="shelf-artifacts">
          {stageGroups.map((g) => (
            <div key={g.stage} className="stage-group">
              <div className="stage-group-label">{g.stageName}</div>
              {g.artifacts.map((a) => (
                <ArtifactItem key={a.id} a={a} locale={locale} />
              ))}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default memo(function DataShelf({ repoId, artifacts }: Props) {
  const [open, setOpen] = useState(false);
  const { t, locale } = useLocale();
  const meta = REPO_META[repoId];
  const fromColor = LAYER_META[meta.fromLayer].color;
  const repoName = t(`repo.${repoId}.name`);
  const repoDesc = t(`repo.${repoId}.desc`);