Visibility card

1<AppVisibilityCard zone={5} mpsas={20.9} />

1/** Sky type label as the visibility card words it. */2export const skyLabel = (zone: number): string =>3  zone <= 2 ? "Dark Sky" : zone <= 4 ? "Rural Sky" : zone <= 6 ? "Suburban Sky" : "Urban Sky";

1/** Lit bars on the rating row: zone 1 lights five, zone 9 lights one (visibility_mini_card.dart). */2export const activeBars = (zone: number): number => Math.min(5, Math.max(0, 5 - Math.floor((zone - 1) / 2)));

1/** VisibilityMiniCard: a 164 by 154 card with the zone pill, sky label, SQM figure and rating bars. */2export function AppVisibilityCard({ zone, mpsas }: { zone: number; mpsas: number }) {3  const bars = activeBars(zone);4  return (5    <div className="app-ui app-card is-mini">6      <div className="app-card-head">7        <span className="app-label-sm">VISIBILITY</span>8        <span className="app-zone-pill">Zone {zone}</span>9      </div>10      <div className="app-vis-body">11        <span className="app-title app-vis-label">{skyLabel(zone)}</span>12        <span className="app-label-sm">{mpsas.toFixed(2)} MPSAS</span>13      </div>14      <div className="app-rating">15        {Array.from({ length: 5 }, (_, i) => (16          <i key={i} className={i < bars ? "on" : undefined} />17        ))}18      </div>19    </div>20  );21}

1.app-card {2  position: relative;3  box-sizing: border-box;4  display: flex;5  flex-direction: column;6  padding: var(--spacing-f13);7  border-radius: var(--radius-f21);8  border: var(--spacing-f1) solid var(--hair-strong);9  background: var(--sheen), var(--fill);10  box-shadow: var(--highlight);11  backdrop-filter: blur(var(--spacing-f13));12  overflow: hidden;13}1415.app-card.is-mini { width: var(--spacing-f144); height: calc(var(--spacing-f144) + var(--spacing-f21)); flex: none; }1617.app-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-f8); }1819.app-vis-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-f2); }2021.app-vis-label { white-space: nowrap; }2223.app-zone-pill {24  padding: var(--spacing-f3) var(--spacing-f8);25  border-radius: var(--radius-full);26  background: color-mix(in srgb, var(--c-accent) var(--mag-4), transparent);27  border: var(--spacing-f1) solid var(--c-accent);28  font-size: var(--text-s-2);29  line-height: 1.3;30  font-weight: 700;31  color: var(--c-accent-ink);32  white-space: nowrap;33}3435.app-rating { display: flex; gap: var(--spacing-f5); }3637.app-rating i { display: block; flex: 1; height: var(--spacing-f5); border-radius: var(--radius-full); background: var(--track); }3839.app-rating i.on { background: var(--c-accent); box-shadow: var(--glow); }

1VisibilityMiniCard(2lightPollution: LightPollution(zone: 5, mpsas: 20.9),3)

1/// The glass surface for cards: a sheen over the surface and a hairline edge.2/// Cards do not glow; glow belongs to buttons and tiles. Mini cards are3/// [AstrSpace.f144] wide and 144 + 21 tall.4class AstrGlassCard extends StatelessWidget {5  const AstrGlassCard({6    super.key,7    required this.child,8    this.width,9    this.height,10  });1112  final Widget child;13  final double? width;14  final double? height;1516  @override17  Widget build(BuildContext context) {18    final Color text = AstrColors.spaceGrey[50]!;19    final BorderRadius radius = BorderRadius.circular(AstrRadius.f21);2021    return RepaintBoundary(22      child: ClipRRect(23        borderRadius: radius,24        child: BackdropFilter(25          filter: ImageFilter.blur(sigmaX: AstrSpace.f13, sigmaY: AstrSpace.f13),26          child: Container(27            width: width,28            height: height,29            padding: const EdgeInsets.all(AstrSpace.f13),30            decoration: BoxDecoration(31              borderRadius: radius,32              border: Border.all(color: text.withValues(alpha: Mag.m5)),33              color: _ink.withValues(alpha: Mag.m1),34              gradient: LinearGradient(35                begin: Alignment.topLeft,36                end: Alignment.bottomRight,37                colors: <Color>[38                  text.withValues(alpha: Mag.m5),39                  text.withValues(alpha: Mag.m8),40                ],41              ),42            ),43            child: child,44          ),45        ),46      ),47    );48  }49}

1class VisibilityMiniCard extends StatelessWidget {2  const VisibilityMiniCard({3    super.key,4    required this.lightPollution,5  });67  final LightPollution lightPollution;89  @override10  Widget build(BuildContext context) {11    final int astrZone = lightPollution.visibilityIndex;12    // Inverted: Zone 1 (dark sky, best) → 5 bars; Zone 9 (city, worst) → 1 bar.13    // Before: ((astrZone - 1) / 2).floor() gave 0 bars for Zone 1 (wrong).14    final int activeBars = (5 - ((astrZone - 1) / 2).floor()).clamp(0, 5);1516    return RepaintBoundary(17      child: ClipRRect(18        borderRadius: BorderRadius.circular(AppSpacing.kCardRadius),19        child: BackdropFilter(20          filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),21          child: Container(22            width: AppSpacing.kMiniCardWidth,23            height: AppSpacing.kMiniCardHeight,24            decoration: BoxDecoration(25              color: AppColors.surfaceOverlay,26              border: Border.all(color: AppColors.borderPrimary),27              borderRadius: BorderRadius.circular(AppSpacing.kCardRadius),28            ),29            child: Padding(30              padding: const EdgeInsets.all(15),31              child: Column(32                crossAxisAlignment: CrossAxisAlignment.start,33                children: <Widget>[34                  // Label and zone pill share one row, centred on each other.35                  Row(36                    mainAxisAlignment: MainAxisAlignment.spaceBetween,37                    children: <Widget>[38                      Flexible(39                        child: Text(40                          'VISIBILITY',41                          maxLines: 1,42                          overflow: TextOverflow.ellipsis,43                          style: AppTypography.labelSm.copyWith(color: AppColors.textMuted),44                        ),45                      ),46                      const SizedBox(width: 6),47                      Container(48                        padding: const EdgeInsets.symmetric(horizontal: 11, vertical: 4),49                        decoration: BoxDecoration(50                          color: AppColors.zonePillFill,51                          borderRadius: BorderRadius.circular(AppSpacing.kBadgeRadius),52                          border: Border.all(color: AppColors.accent),53                        ),54                        child: Text(55                          'Zone $astrZone',56                          style: AppTypography.micro.copyWith(57                            color: AppColors.zonePillText,58                            fontWeight: FontWeight.w700,59                          ),60                        ),61                      ),62                    ],63                  ),64                  const SizedBox(height: 8),65                  // Sky label (e.g. "Rural Sky") with the MPSAS value directly below it, centred66                  // in the space above the bars. 20 px so the longest label, "Suburban Sky", fits on67                  // one line; it scales down further if a font is wider.68                  Expanded(69                    child: Center(70                      child: Column(71                        mainAxisSize: MainAxisSize.min,72                        children: <Widget>[73                          FittedBox(74                            fit: BoxFit.scaleDown,75                            child: Text(76                              _getSkyLabel(astrZone),77                              maxLines: 1,78                              style: AppTypography.title.copyWith(79                                fontSize: 20,80                                letterSpacing: -0.3,81                              ),82                            ),83                          ),84                          const SizedBox(height: 2),85                          Text(86                            '${lightPollution.mpsas.toStringAsFixed(2)} MPSAS',87                            style: AppTypography.labelSm.copyWith(color: AppColors.textMuted),88                          ),89                        ],90                      ),91                    ),92                  ),93                  const SizedBox(height: 6),94                  // Rating bars95                  Row(96                    mainAxisAlignment: MainAxisAlignment.spaceBetween,97                    children: List<Widget>.generate(5, (int index) {98                      final bool isActive = index < activeBars;99                      return Container(100                        width: (AppSpacing.kRatingBarsWidth - 4 * AppSpacing.kRatingBarGap) / 5,101                        height: AppSpacing.kRatingBarHeight,102                        decoration: BoxDecoration(103                          color: isActive ? AppColors.ratingBarActive : AppColors.ratingBarInactive,104                          borderRadius: BorderRadius.circular(12),105                          boxShadow: isActive ? AppColors.glowShadow : null,106                        ),107                      );108                    }),109                  ),110                ],111              ),112            ),113          ),114        ),115      ),116    );117  }118119  static String _getSkyLabel(int zone) {120    if (zone <= 2) return 'Dark Sky';121    if (zone <= 4) return 'Rural Sky';122    if (zone <= 6) return 'Suburban Sky';123    return 'Urban Sky';124  }125}