{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "projects-list-glass",
  "type": "registry:block",
  "title": "Projects List Glass",
  "description": "Projects List Glass component with glass effects",
  "dependencies": [
    "lucide-react",
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/sections/projects-list-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// PROJECTS LIST GLASS COMPONENT\n// List of repository cards with filtering, sorting, and ownership controls\n// ========================================\n\nimport { forwardRef, useState, useMemo, type CSSProperties } from \"react\";\nimport { FolderGit2, AlertTriangle } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { GlassCard } from \"../ui/glass-card\";\nimport { BadgeGlass } from \"../ui/badge-glass\";\nimport { RepositoryCardGlass, type RepositoryFlagType } from \"../composite/repository-card-glass\";\nimport { SegmentedControlGlass } from \"../specialized/segmented-control-glass\";\nimport { SortDropdownGlass, type SortField, type SortOrder } from \"../atomic\";\nimport \"@/glass-theme.css\";\n\n// ========================================\n// TYPES\n// ========================================\n\nexport type OwnershipFilter = 'your' | 'contrib' | 'all';\n\n// Re-export for convenience\nexport type { SortField, SortOrder } from \"../atomic\";\n\nexport interface Repository {\n  readonly name: string;\n  readonly languages: string;\n  readonly commits: number;\n  readonly contribution: number;\n  readonly stars?: number;\n  readonly flagType?: RepositoryFlagType;\n  readonly issues?: readonly string[];\n  readonly createdYear?: number;\n  /** Ownership type for Your/Contrib filtering */\n  readonly ownership?: 'your' | 'contrib';\n}\n\nexport interface ProjectsListGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** List of repositories to display */\n  readonly repositories: readonly Repository[];\n  /** Show only flagged (non-green) repositories */\n  readonly showFlaggedOnly?: boolean;\n  /** Filter by creation year */\n  readonly selectedYear?: number | null;\n  /** Callback to clear all filters */\n  readonly onClearFilters?: () => void;\n  /** Custom title (overrides auto-generated) */\n  readonly title?: string;\n\n  // ======== NEW: Ownership Filter ========\n  /** Current ownership filter */\n  readonly ownershipFilter?: OwnershipFilter;\n  /** Callback when ownership filter changes */\n  readonly onOwnershipChange?: (filter: OwnershipFilter) => void;\n\n  // ======== NEW: Sorting ========\n  /** Current sort field */\n  readonly sortBy?: SortField;\n  /** Current sort order */\n  readonly sortOrder?: SortOrder;\n  /** Callback when sort changes */\n  readonly onSortChange?: (field: SortField, order: SortOrder) => void;\n\n  // ======== NEW: Controls ========\n  /** Show header controls (sort dropdown, ownership filter). Default: true when callbacks provided */\n  readonly showControls?: boolean;\n}\n\n// ========================================\n// OWNERSHIP FILTER OPTIONS\n// ========================================\n\nconst ownershipOptions = [\n  { value: 'your' as const, label: 'Your' },\n  { value: 'contrib' as const, label: 'Contrib' },\n];\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const ProjectsListGlass = forwardRef<HTMLDivElement, ProjectsListGlassProps>(\n  (\n    {\n      repositories,\n      showFlaggedOnly = false,\n      selectedYear = null,\n      onClearFilters,\n      title,\n      // New props\n      ownershipFilter,\n      onOwnershipChange,\n      sortBy = 'commits',\n      sortOrder = 'desc',\n      onSortChange,\n      showControls,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [expandedIndex, setExpandedIndex] = useState<number | null>(null);\n\n    // Determine if controls should be shown\n    const shouldShowControls = showControls ?? (onOwnershipChange !== undefined || onSortChange !== undefined);\n\n    // Filter repositories\n    const filteredRepos = useMemo(() => {\n      return repositories.filter((repo) => {\n        // Flag filter\n        if (showFlaggedOnly && repo.flagType === \"green\") return false;\n        // Year filter\n        if (selectedYear && repo.createdYear !== selectedYear) return false;\n        // Ownership filter\n        if (ownershipFilter && ownershipFilter !== 'all' && repo.ownership !== ownershipFilter) return false;\n        return true;\n      });\n    }, [repositories, showFlaggedOnly, selectedYear, ownershipFilter]);\n\n    // Sort repositories\n    const sortedRepos = useMemo(() => {\n      if (!onSortChange) return filteredRepos;\n\n      return [...filteredRepos].sort((a, b) => {\n        const multiplier = sortOrder === 'asc' ? 1 : -1;\n        switch (sortBy) {\n          case 'commits':\n            return (a.commits - b.commits) * multiplier;\n          case 'stars':\n            return ((a.stars ?? 0) - (b.stars ?? 0)) * multiplier;\n          case 'name':\n            return a.name.localeCompare(b.name) * multiplier;\n          case 'contribution':\n            return (a.contribution - b.contribution) * multiplier;\n          default:\n            return 0;\n        }\n      });\n    }, [filteredRepos, sortBy, sortOrder, onSortChange]);\n\n    // Generate title based on filters\n    const displayTitle = title ?? (\n      showFlaggedOnly\n        ? \"Flagged\"\n        : selectedYear\n          ? `${selectedYear}`\n          : \"All\"\n    ) + \" Projects\";\n\n    const emptyContainerStyles: CSSProperties = {\n      background: \"var(--card-bg)\",\n    };\n\n    // Handle ownership change with type safety\n    const handleOwnershipChange = (value: string): void => {\n      if (onOwnershipChange && (value === 'your' || value === 'contrib')) {\n        onOwnershipChange(value);\n      }\n    };\n\n    return (\n      <GlassCard\n        ref={ref}\n        intensity=\"medium\"\n        className={cn(\"p-3 sm:p-4\", className)}\n        {...props}\n      >\n        {/* Header */}\n        <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4\">\n          {/* Left: Title + Badge */}\n          <div className=\"flex items-center gap-2\">\n            {showFlaggedOnly ? (\n              <AlertTriangle className=\"w-4 h-4\" style={{ color: \"var(--status-away)\" }} />\n            ) : (\n              <FolderGit2 className=\"w-4 h-4\" style={{ color: \"var(--text-accent)\" }} />\n            )}\n            <h3\n              className=\"font-semibold text-sm sm:text-base\"\n              style={{ color: \"var(--text-primary)\" }}\n            >\n              {displayTitle}\n            </h3>\n            <BadgeGlass variant=\"info\">{sortedRepos.length} repos</BadgeGlass>\n          </div>\n\n          {/* Right: Controls */}\n          {shouldShowControls && (\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              {onSortChange && (\n                <SortDropdownGlass\n                  sortBy={sortBy}\n                  sortOrder={sortOrder}\n                  onSortChange={onSortChange}\n                />\n              )}\n              {onOwnershipChange && ownershipFilter && (\n                <SegmentedControlGlass\n                  options={ownershipOptions}\n                  value={ownershipFilter}\n                  onChange={handleOwnershipChange}\n                />\n              )}\n            </div>\n          )}\n        </div>\n\n        {/* Content */}\n        {sortedRepos.length === 0 ? (\n          // Empty State\n          <div className=\"text-center py-10\">\n            <div\n              className=\"w-16 h-16 mx-auto mb-3 rounded-2xl flex items-center justify-center\"\n              style={emptyContainerStyles}\n            >\n              <FolderGit2 className=\"w-8 h-8\" style={{ color: \"var(--text-muted)\" }} />\n            </div>\n            <p\n              className=\"text-sm\"\n              style={{ color: \"var(--text-muted)\" }}\n            >\n              No repositories found\n            </p>\n            {onClearFilters && (\n              <button\n                onClick={onClearFilters}\n                className=\"mt-2 text-sm underline transition-colors hover:opacity-80\"\n                style={{ color: \"var(--text-accent)\" }}\n              >\n                Clear filters\n              </button>\n            )}\n          </div>\n        ) : (\n          // Repository List\n          <div className=\"space-y-2\">\n            {sortedRepos.map((repo, index) => (\n              <RepositoryCardGlass\n                key={repo.name}\n                name={repo.name}\n                languages={repo.languages}\n                commits={repo.commits}\n                contribution={repo.contribution}\n                stars={repo.stars}\n                flagType={repo.flagType}\n                issues={repo.issues}\n                expanded={expandedIndex === index}\n                onToggle={() => setExpandedIndex(expandedIndex === index ? null : index)}\n              />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    );\n  }\n);\n\nProjectsListGlass.displayName = \"ProjectsListGlass\";\n"
    }
  ],
  "categories": [
    "sections"
  ]
}