Repository Header Glass

1// ========================================
2// REPOSITORY HEADER GLASS - COMPOSITE COMPONENT
3// Repository name with status indicator and stars
4// Level 3: Composite (extracted from RepositoryCardGlass)
5// ========================================
6 
7import { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';
8import { Star, ChevronDown, ChevronUp } from 'lucide-react';
9import { cn } from '@/lib/utils';
10import { StatusIndicatorGlass } from '../specialized/status-indicator-glass';
11import '@/glass-theme.css';
12 
13export type RepositoryFlagType = 'green' | 'yellow' | 'red';
14 
15export interface RepositoryHeaderGlassProps extends HTMLAttributes<HTMLDivElement> {
16  /** Repository name */
17  readonly name: string;
18  /** Flag/status type */
19  readonly flagType?: RepositoryFlagType;
20  /** Star count */
21  readonly stars?: number;
22  /** Is expanded state */
23  readonly expanded?: boolean;
24  /** Abbreviated star count for mobile (1.2k instead of 1234) */
25  readonly abbreviatedStars?: boolean;
26}
27 
28export const RepositoryHeaderGlass = forwardRef<
29  HTMLDivElement,
30  RepositoryHeaderGlassProps
31>(
32  (
33    {
34      name,
35      flagType = 'green',
36      stars = 0,
37      expanded = false,
38      abbreviatedStars = false,
39      className,
40      ...props
41    },
42    ref
43  ) => {
44    const titleStyles: CSSProperties = {
45      color: 'var(--text-primary)',
46    };
47 
48    const starStyles: CSSProperties = {
49      color: 'var(--status-away)',
50    };
51 
52    const mutedStyles: CSSProperties = {
53      color: 'var(--text-muted)',
54    };
55 
56    const formatStars = (count: number): string => {
57      if (!abbreviatedStars) return String(count);
58      if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
59      if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;
60      return String(count);
61    };
62 
63    return (
64      <div
65        ref={ref}
66        className={cn('flex items-center justify-between', className)}
67        {...props}
68      >
69        <div className="flex items-center gap-2.5">
70          <span className="font-medium text-sm" style={titleStyles}>
71            {name}
72          </span>
73          <StatusIndicatorGlass type={flagType} />
74        </div>
75        <div className="flex items-center gap-2">
76          {stars > 0 && (
77            <span className="flex items-center gap-1 text-xs" style={starStyles}>
78              <Star className="w-3 h-3" />
79              {formatStars(stars)}
80            </span>
81          )}
82          {expanded ? (
83// … truncated