GroundedHelper/frontend/lib/Grounded/designs/GlassSurface.dart

import 'dart:ui';

import 'package:flutter/material.dart';

import '../utils/Colors.dart';

/// Frosted glass: the background blurred through a translucent white panel
/// with a bright hairline edge. Controls and floating chrome are built from it.
class GlassSurface extends StatelessWidget {
  final Widget child;

  final BorderRadius radius;

  final EdgeInsets padding;

  final Color? tint;

  /// Over a dark or coloured stage the panel goes smoky instead of milky.
  final bool onDark;

  final double blur;

  const GlassSurface({
    super.key,
    required this.child,
    this.radius = const BorderRadius.all(Radius.circular(14)),
    this.padding = EdgeInsets.zero,
    this.tint,
    this.onDark = false,
    this.blur = 18,
  });

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: radius,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
        child: Container(
          padding: padding,
          decoration: BoxDecoration(
            color: tint ??
                (onDark ? colorWhite.withValues(alpha: 0.16) : colorGlass),
            borderRadius: radius,
            border: Border.all(
              color: onDark
                  ? colorWhite.withValues(alpha: 0.22)
                  : colorGlassBorder,
              width: 1,
            ),
          ),
          child: child,
        ),
      ),
    );
  }
}

/// A round frosted control — back, close, bell, more.
Widget glassCircle(
  IconData icon,
  VoidCallback onTap, {
  double size = 50,
  bool onDark = false,
  bool dotted = false,
  Color? dotColor,
}) {
  return GestureDetector(
    onTap: onTap,
    behavior: HitTestBehavior.opaque,
    child: Stack(
      clipBehavior: Clip.none,
      children: [
        GlassSurface(
          onDark: onDark,
          radius: BorderRadius.circular(size),
          child: SizedBox(
            width: size,
            height: size,
            child: Icon(
              icon,
              size: size * 0.42,
              color: onDark ? colorWhite : colorInk,
            ),
          ),
        ),
        if (dotted)
          Positioned(
            top: 2,
            right: 2,
            child: Container(
              width: 10,
              height: 10,
              decoration: BoxDecoration(
                color: dotColor ?? colorAccent,
                shape: BoxShape.circle,
                border: Border.all(color: colorWhite, width: 1.5),
              ),
            ),
          ),
      ],
    ),
  );
}