Cloud bar

1<AppCloudBar value={45} />2<AppCloudBar value={0} state="loading" />

1/** CloudBar from cloud_bar.dart: label, percentage, and an 8 dp track with the glowing fill. */2export function AppCloudBar({3  value,4  state = "data",5  message,6}: {7  value: number;8  state?: "data" | "loading" | "error";9  message?: string;10}) {11  return (12    <div className="app-ui app-cloudbar">13      <div className="app-cloudbar-head">14        <span className="app-label-md">Cloud Cover</span>15        {state === "loading" ? (16          <span className="app-spinner" role="status" aria-label="Loading" />17        ) : state === "error" ? (18          <span className="app-heading" aria-label="Error" style={{ color: "var(--c-error)" }}>!</span>19        ) : (20          <span className="app-label-md">{Math.round(value)}%</span>21        )}22      </div>23      {state === "error" ? (24        <p className="app-cloudbar-error">{message ?? "Weather unavailable"}</p>25      ) : (26        <div className="app-cloudbar-track">27          <div className="app-cloudbar-fill" style={{ width: `${state === "loading" ? 0 : Math.min(100, Math.max(0, value))}%` }} />28        </div>29      )}30    </div>31  );32}

1.app-cloudbar {2  box-sizing: border-box;3  width: 100%;4  padding: var(--spacing-f13) var(--spacing-f21) var(--spacing-f21);5  border-radius: var(--radius-f13);6  border: var(--spacing-f1) solid var(--hair);7  background: var(--sheen), var(--fill);8  box-shadow: var(--highlight);9}1011.app-cloudbar-head { display: flex; justify-content: space-between; align-items: center; }1213.app-cloudbar-track { margin-top: var(--spacing-f8); height: var(--spacing-f8); border-radius: var(--radius-full); background: var(--track); }1415.app-cloudbar-fill { height: 100%; border-radius: var(--radius-full); background: var(--c-accent); box-shadow: var(--glow); transition: width 1s cubic-bezier(0.215, 0.61, 0.355, 1); }1617.app-spinner { width: var(--spacing-f13); height: var(--spacing-f13); box-sizing: border-box; border-radius: var(--radius-full); border: var(--spacing-f2) solid var(--c-text); border-right-color: transparent; animation: app-spin 1s linear infinite; }

1const CloudBar(cloudCoverPercentage: 45)2const CloudBar(cloudCoverPercentage: 0, isLoading: true)

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 CloudBar extends StatefulWidget {23  const CloudBar({4    super.key,5    required this.cloudCoverPercentage,6    this.isLoading = false,7    this.errorMessage,8  });9  final double cloudCoverPercentage; // 0-10010  final bool isLoading;11  final String? errorMessage;1213  @override14  State<CloudBar> createState() => _CloudBarState();15}

1class _CloudBarState extends State<CloudBar> {234  @override5  Widget build(BuildContext context) {6    return Container(7      width: double.infinity,8      height: 84,9      decoration: BoxDecoration(10        color: AppColors.surfaceGlass,11        border: Border.all(color: AppColors.borderSubtle),12        borderRadius: BorderRadius.circular(AppSpacing.kInnerRadius),13      ),14      padding: const EdgeInsets.fromLTRB(18, 20, 18, 0),15      child: Column(16        crossAxisAlignment: CrossAxisAlignment.start,17        children: <Widget>[18          Row(19            mainAxisAlignment: MainAxisAlignment.spaceBetween,20            children: <Widget>[21              Text(22                'Cloud Cover',23                style: AppTypography.labelMd.copyWith(color: AppColors.textPrimary),24              ),25              if (widget.isLoading)26                const SizedBox(27                  width: 12,28                  height: 12,29                  child: CircularProgressIndicator(strokeWidth: 2, color: AppColors.textPrimary),30                )31              else if (widget.errorMessage != null)32                const Icon(Icons.error_outline, color: Colors.redAccent, size: 16)33              else34                Text(35                  '${widget.cloudCoverPercentage.toInt()}%',36                  style: AppTypography.labelMd.copyWith(color: AppColors.textPrimary),37                ),38            ],39          ),40          const SizedBox(height: 13),41          if (widget.errorMessage != null)42            Text(43              widget.errorMessage!,44              style: AppTypography.labelSm.copyWith(color: Colors.redAccent),45            )46          else47            Container(48              height: AppSpacing.kCloudTrackHeight,49              width: double.infinity,50              decoration: BoxDecoration(51                color: AppColors.cloudTrack,52                borderRadius: BorderRadius.circular(AppSpacing.kInnerRadius),53              ),54              child: LayoutBuilder(55                builder: (BuildContext context, BoxConstraints constraints) {56                  return Stack(57                    children: <Widget>[58                      AnimatedContainer(59                        duration: const Duration(milliseconds: 1000),60                        curve: Curves.easeOutCubic,61                        width: constraints.maxWidth * (widget.cloudCoverPercentage / 100),62                        decoration: BoxDecoration(63                          borderRadius: BorderRadius.circular(12),64                          color: AppColors.accentSecondary,65                          boxShadow: AppColors.glowShadow,66                        ),67                      ),68                    ],69                  );70                },71              ),72            ),73        ],74      ),75    );76  }77}