doormile_customer_app/lib/ui/screens/tracking_screen.dart

import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';

import '../../data/models.dart';
import '../../data/app_config.dart';
import '../../state/app_scope.dart';
import '../../state/app_state.dart';
import '../tokens.dart';
import '../widgets/buttons.dart';
import '../widgets/cards.dart';
import '../widgets/chrome.dart';
import '../widgets/feedback.dart';
import '../widgets/milestones.dart';
import '../widgets/misc.dart';
import '../widgets/pieces.dart';
import '../widgets/route_map.dart';
import '../widgets/route_rail.dart';
import '../widgets/states.dart';
import '../widgets/summary.dart';
import 'booking/booking_routes.dart';
import 'booking/send_screen.dart';
import 'sheets/cancel_sheet.dart';

/// Live tracking.
///
/// One screen for the whole journey. While a Miler is being matched it shows a
/// radar; once one is assigned it shows their live position, who they are, and
/// how to reach them; after pickup it follows the order to the door.
/// Cancellation is offered only while the backend still allows it.
class TrackingScreen extends StatelessWidget {
  const TrackingScreen({super.key, this.focusedDestination});

  /// When set, this screen follows one destination's own order rather than the
  /// pickup as a whole. Only meaningful once the orders exist.
  final int? focusedDestination;

  @override
  Widget build(BuildContext context) {
    final app = AppScope.of(context);
    final booking = app.trackedBooking;

    if (booking == null) {
      return Scaffold(
        backgroundColor: DmColors.canvas,
        appBar: const DmTopBar(title: 'Live tracking'),
        body: const DmEmptyState(
          icon: LucideIcons.package,
          title: 'Nothing to track',
          message: 'Book a pickup to get started.',
        ),
      );
    }

    final cancelled = booking.isCancelled;
    final slot = app.slotById(booking.slotId);

    // A focused destination follows its own journey; the pickup follows its own.
    final focused =
        (focusedDestination != null &&
            focusedDestination! < booking.destinations.length &&
            booking.destinations[focusedDestination!].trackingId != null)
        ? booking.destinations[focusedDestination!]
        : null;
    final stage = focused?.stage ?? booking.stage;

    final milerEnRoute =
        !cancelled &&
        booking.miler != null &&
        stage.index >= JourneyStage.assigned.index &&
        stage.index <= JourneyStage.pickedUp.index;
    final assigning = !cancelled && stage == JourneyStage.booked;

    return Scaffold(
      backgroundColor: DmColors.canvas,
      appBar: DmTopBar(
        title: cancelled ? 'Booking' : 'Live tracking',
        // The reference belongs in the bar, not in a card three scrolls down:
        // it is what a customer reads out when they call about this parcel.
        trailing: Text(
          focused?.trackingId ?? booking.displayId,
          style: DmText.mono,
        ),
      ),
      body: RefreshIndicator(
        color: DmColors.brand,
        backgroundColor: DmColors.surface,
        onRefresh: () => app.refreshBooking(booking.reference),
        child: ListView(
          physics: const AlwaysScrollableScrollPhysics(),
          padding: const EdgeInsets.only(bottom: 24),
          children: [
            _StatusHeader(booking: booking, slot: slot, focused: focused),

            // ── No radar while a Miler is being found ──
            //
            // This showed a 200pt card holding a pulsing radar with a bike
            // glyph at its centre, then a banner counting "verified Milers
            // active in your zone". Both were animation standing in for an
            // answer: the radar is not looking at anything, and the count is a
            // number the customer cannot use. The rail below says *Booking
            // created* with the line stopped there, and the crimson card above
            // says what is happening in words. That is the answer, and it is
            // the same rail whether a Miler has been found or not.
            if (!assigning && !cancelled)
              Padding(
                padding: const EdgeInsets.fromLTRB(
                  DmSpace.pad,
                  0,
                  DmSpace.pad,
                  10,
                ),
                // The map is a cell of a card, not a floating rounded rectangle
                // of its own: it gets the card's edge, and the line under it
                // carries the fact the picture cannot state precisely.
                child: DmCard(
                  children: [
                    DmRouteMap(
                      height: 178,
                      radius: 0,
                      pickup: booking.pickup,
                      destination: (focused ?? booking.destinations.first).hub,
                      showMiler: milerEnRoute,
                      progress: _routeProgress(stage),
                      pickupLabel: booking.pickup.title,
                      destinationLabel: booking.destination.districtName,
                      badge: milerEnRoute && booking.milerDistanceKm != null
                          ? _Badge(
                              icon: LucideIcons.bike,
                              label: booking.milerDistanceKm == 0
                                  ? 'At your door'
                                  : '${booking.miler?.name ?? 'Your Miler'}, '
                                        '${booking.milerDistanceKm} km away',
                            )
                          : null,
                    ),
                    // Only when there is something to say. This cell used to
                    // read "Tracking your parcel live" whenever no ETA existed,
                    // beside a Refresh action — a sentence that described the
                    // screen the customer was already looking at, and a button
                    // for a gesture the list now handles by being pulled down.
                    if (milerEnRoute && booking.milerEtaMinutes != null)
                      DmCardCell(
                        padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
                        child: Row(
                          children: [
                            const Icon(
                              LucideIcons.clock,
                              size: 15,
                              color: DmColors.ink3,
                            ),
                            const SizedBox(width: 10),
                            Expanded(
                              child: Text(
                                'Pickup in about '
                                '${booking.milerEtaMinutes} min',
                                style: DmText.cardTitle,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                          ],
                        ),
                      ),
                  ],
                ),
              ),

            if (milerEnRoute)
              _MilerCard(person: booking.miler!, role: 'Your Miler'),
            if (!cancelled &&
                stage == JourneyStage.outForDelivery &&
                booking.deliveryAgent != null)
              _MilerCard(
                person: booking.deliveryAgent!,
                role: 'Delivery Miler',
              ),

            if (!cancelled)
              Padding(
                padding: const EdgeInsets.fromLTRB(
                  DmSpace.pad,
                  0,
                  DmSpace.pad,
                  10,
                ),
                child: _Journey(booking: booking),
              ),

            if (!cancelled && booking.hasOrders && booking.isMultiDestination)
              Padding(
                padding: const EdgeInsets.fromLTRB(
                  DmSpace.pad,
                  0,
                  DmSpace.pad,
                  10,
                ),
                child: _YourPackages(booking: booking, focused: focused),
              ),

            Padding(
              padding: const EdgeInsets.fromLTRB(
                DmSpace.pad,
                0,
                DmSpace.pad,
                10,
              ),
              child: _RouteOutline(
                booking: booking,
                slot: slot,
                focused: focused,
              ),
            ),

            // Stands in for backend push updates. Real stage changes arrive
            // from `GET /customer/bookings/{reference}`, so this exists only
            // where there is no server to send them.
            if (AppConfig.showStageStepper) _StageStepper(booking: booking),
          ],
        ),
      ),
      bottomNavigationBar: DmFooter(
        edge: true,
        children: _footerActions(context, app, booking),
      ),
    );
  }

  /// How far along the route the Miler is drawn, by stage.
  static double _routeProgress(JourneyStage stage) => switch (stage) {
    JourneyStage.assigned => 0.08,
    JourneyStage.onTheWay => 0.42,
    JourneyStage.arrived || JourneyStage.pickedUp => 0.92,
    _ => 0.5,
  };

  /// The footer is a hierarchy, not a single button: the helpful action is the
  /// filled one and cancelling is a text button under it. Cancel used to be a
  /// full-width outlined button in the danger colour — the most prominent
  /// control on a screen whose job is to reassure someone that their parcel is
  /// fine.
  List<Widget> _footerActions(
    BuildContext context,
    AppState app,
    Booking booking,
  ) {
    if (booking.isCancelled || booking.stage == JourneyStage.delivered) {
      return [
        DmButton(
          label: 'Book another pickup',
          icon: LucideIcons.arrowRight,
          onPressed: () {
            app.startBooking();
            Navigator.of(context).pushAndRemoveUntil(
              bookingRoute<void>(BookingRoutes.send, (_) => const SendScreen()),
              (route) => route.isFirst,
            );
          },
        ),
      ];
    }

    return [
      DmButton(
        label: 'Share live tracking',
        icon: LucideIcons.share2,
        kind: DmButtonKind.outline,
        onPressed: () => DmToast.show(context, 'Sharing is coming soon'),
      ),
      // Backend policy decides whether cancelling is still possible.
      if (app.isCancellable(booking.stage))
        DmButton(
          label: 'Cancel this pickup',
          kind: DmButtonKind.ghost,
          danger: true,
          onPressed: () async {
            final cancelled = await showCancelSheet(context, booking);
            if (cancelled == true && context.mounted) {
              DmToast.show(context, 'Pickup cancelled');
            }
          },
        )
      else
        DmButton(
          label: 'Need help with this order?',
          kind: DmButtonKind.ghost,
          onPressed: () =>
              DmToast.show(context, 'Support chat is not available yet'),
        ),
    ];
  }
}

/// The screen's one loud surface: what is happening, right now.
///
/// ── Why this is a filled card and not a heading ──
///
/// The status used to be an eyebrow, a 32pt headline and a row of chips laid
/// straight onto the canvas. It said the right words, but it looked like every
/// other heading in the app, so the screen opened with no focal point and the
/// map below it — a decoration — became the loudest thing on the page.
///
/// It is now the one crimson card the design allows per screen. It carries the
/// live pulse, the headline, the journey's own progress and the window, so the
/// whole answer is in one object above the fold. A cancelled booking drops to a
/// plain card: nothing is live, and a crimson field would keep insisting it is.
class _StatusHeader extends StatelessWidget {
  const _StatusHeader({
    required this.booking,
    required this.slot,
    this.focused,
  });

  final Booking booking;
  final PickupSlot? slot;

  /// Set when following one destination's own order.
  final DestinationGroup? focused;

  @override
  Widget build(BuildContext context) {
    final cancelled = booking.isCancelled;
    final stage = focused?.stage ?? booking.stage;

    final headline = switch (true) {
      _ when cancelled => 'Booking cancelled',
      _ when stage == JourneyStage.booked => 'Finding your Miler',
      _ when stage == JourneyStage.assigned && booking.miler != null =>
        '${booking.miler!.name} is assigned',
      _ when stage == JourneyStage.onTheWay && booking.miler != null =>
        booking.milerEtaMinutes == null
            ? '${booking.miler!.name} is on the way'
            : '${booking.miler!.name} is ${booking.milerEtaMinutes} minutes away',
      _ when stage == JourneyStage.arrived && booking.miler != null =>
        '${booking.miler!.name} is at your door',
      _ => stage.headline,
    };

    final sub = cancelled
        ? 'This pickup was cancelled. You were not charged.'
        : stage.sub;

    final total = CustomerMilestone.values.length;
    final step = CustomerMilestone.of(stage).index + 1;

    if (cancelled) {
      return Padding(
        padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 10),
        child: DmCard(
          children: [
            DmCardCell(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const DmPill('Cancelled', tone: DmPillTone.off),
                  const SizedBox(height: 12),
                  Text(headline, style: DmText.display.copyWith(fontSize: 25)),
                  const SizedBox(height: 6),
                  Text(sub, style: DmText.small),
                ],
              ),
            ),
          ],
        ),
      );
    }

    return Padding(
      padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 10),
      child: DmCard(
        tone: DmCardTone.fill,
        children: [
          DmCardCell(
            padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    const DmLiveDot(size: 9, color: Colors.white),
                    const SizedBox(width: 4),
                    Text(
                      'LIVE',
                      style: DmText.eyebrow.copyWith(
                        fontSize: 11,
                        color: Colors.white,
                      ),
                    ),
                    const Spacer(),
                    if (focused != null)
                      Flexible(
                        child: Text(
                          'To ${focused!.destination.label}',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.right,
                          style: DmText.small.copyWith(
                            color: DmColors.onBrand3,
                          ),
                        ),
                      ),
                  ],
                ),
                const SizedBox(height: 12),
                Text(
                  headline,
                  style: DmText.display.copyWith(
                    fontSize: 27,
                    color: Colors.white,
                  ),
                ),
                // The supporting sentence is gone. It restated the headline
                // — "Arun Kumar is assigned" over "Your Miler will arrive in
                // your pickup window" — and sat above a milestone label
                // saying "Miler assigned" and a counter saying "Step 2 of 7".
                // Four lines to answer a question the first one had answered.
                //
                // What is left is the one fact the headline does not carry:
                // when. It is set at heading size because after "what is
                // happening" it is the only thing the customer came for.
                const SizedBox(height: 14),
                Text(
                  _footnote(stage),
                  style: DmText.heading.copyWith(
                    fontSize: 17,
                    color: DmColors.onBrand2,
                  ),
                ),
                const SizedBox(height: 16),
                DmStepBar(
                  progress: step / total,
                  steps: total,
                  current: step,
                  onFill: true,
                  caption: false,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// The one fact under the rail: whatever is most useful at this stage.
  String _footnote(JourneyStage stage) {
    if (booking.milerEtaMinutes != null && booking.milerEtaMinutes! > 0) {
      return 'Arriving in about ${booking.milerEtaMinutes} min';
    }
    if (stage == JourneyStage.arrived) return 'Waiting at your door';
    if (stage.index <= JourneyStage.assigned.index && slot != null) {
      return '${slot!.day}, ${slot!.window}';
    }
    if (booking.expectedDelivery != null) {
      return 'Expected ${booking.expectedDelivery}';
    }
    return CustomerMilestone.of(stage).label;
  }
}

/// The journey. All of it, always.
///
/// It used to show the three most recent milestones behind a "Full timeline"
/// action, which was the right compression for seven and is the wrong one for
/// five: the whole shipment now fits in the space the summary occupied, and a
/// customer who opens tracking to ask "where is my parcel" should not have to
/// tap to see the answer's context.
class _Journey extends StatelessWidget {
  const _Journey({required this.booking});

  final Booking booking;

  @override
  Widget build(BuildContext context) {
    return DmMilestones(
      booking: booking,
      title: booking.trackingId == null ? 'Journey' : 'Live journey',
    );
  }
}

/// A chip floating on the map — "En route, 1.4 km away".
class _Badge extends StatelessWidget {
  const _Badge({required this.icon, required this.label});

  final IconData icon;
  final String label;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.fromLTRB(10, 7, 12, 7),
      decoration: BoxDecoration(
        color: DmColors.surface,
        border: Border.all(color: DmColors.border),
        borderRadius: DmRadius.all(6),
        boxShadow: DmShadow.float,
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, size: 14, color: DmColors.brand),
          const SizedBox(width: 6),
          Flexible(
            child: Text(
              label,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: DmText.label.copyWith(fontSize: 12, color: DmColors.ink),
            ),
          ),
        ],
      ),
    );
  }
}

/// Radar shown while the backend matches a Miler.
/// Who is collecting, how good they are, and how to reach them.
///
/// A wash rather than a plain card: this is the one row on the screen about a
/// person rather than a parcel, and the tint is what separates "who" from the
/// facts stacked above and below it. The plate is mono — it is read off a
/// number plate at the door.
class _MilerCard extends StatelessWidget {
  const _MilerCard({required this.person, required this.role});

  final Person person;
  final String role;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 10),
      child: DmCard(
        tone: DmCardTone.wash,
        children: [
          DmCardCell(
            padding: const EdgeInsets.fromLTRB(14, 13, 14, 13),
            child: Row(
              children: [
                DmAvatar(initials: person.initials, size: 44),
                const SizedBox(width: 13),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(person.name, style: DmText.cardTitle),
                      const SizedBox(height: 2),
                      // Absent unless the backend sent a rating or a pickup
                      // count. A default would put an invented reputation on a
                      // real person's card.
                      if (person.credentials != null)
                        Row(
                          children: [
                            const Icon(
                              LucideIcons.star,
                              size: 12,
                              color: DmColors.brand,
                            ),
                            const SizedBox(width: 5),
                            Flexible(
                              child: Text(
                                person.credentials!,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: DmText.tiny,
                              ),
                            ),
                          ],
                        )
                      else
                        Text(role, style: DmText.tiny),
                    ],
                  ),
                ),
                const SizedBox(width: 10),
                ConstrainedBox(
                  constraints: const BoxConstraints(maxWidth: 122),
                  child: DmTag(person.vehicle, mono: true),
                ),
              ],
            ),
          ),
          DmCardCell(
            padding: const EdgeInsets.fromLTRB(14, 12, 14, 13),
            child: Row(
              children: [
                DmMiniButton(
                  label: 'Call',
                  icon: LucideIcons.phone,
                  filled: true,
                  onPressed: () =>
                      DmToast.show(context, 'Calling ${person.name}…'),
                ),
                const SizedBox(width: 8),
                DmMiniButton(
                  label: 'Message',
                  icon: LucideIcons.messageSquare,
                  onPressed: () =>
                      DmToast.show(context, 'Chat is not available yet'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// Where it is going, and the few facts worth keeping on screen.
class _RouteOutline extends StatelessWidget {
  const _RouteOutline({
    required this.booking,
    required this.slot,
    this.focused,
  });

  final Booking booking;
  final PickupSlot? slot;
  final DestinationGroup? focused;

  @override
  Widget build(BuildContext context) {
    final group = focused;
    final recipient = (group ?? booking.destinations.first).details.recipient;

    return DmCard(
      children: [
        DmCardCell(
          child: DmRouteRail(
            pickup: booking.pickup.title,
            pickupNote: booking.pickup.sub,
            drop: group != null
                ? group.destination.label
                : booking.isMultiDestination
                ? '${booking.destinations.length} destinations'
                : booking.destination.label,
            dropNote: group != null
                ? '${group.packageCount} '
                      '${group.packageCount == 1 ? 'package' : 'packages'}'
                : booking.isMultiDestination
                ? booking.packageSummary
                : booking.details.exactAddress ??
                      (recipient == null
                          ? 'Exact address collected at pickup'
                          : 'Recipient · $recipient'),
          ),
        ),
        DmSummaryRow(label: 'Pickup window', value: slot?.label ?? '—'),
        DmSummaryRow(
          label: (group?.trackingId ?? booking.trackingId) == null
              ? 'Booking reference'
              : 'Tracking number',
          value: group?.trackingId ?? booking.displayId,
          mono: true,
          secondary: group == null
              ? null
              : 'Collected together · Pickup ${booking.reference}',
        ),
      ],
    );
  }
}

/// The individual orders a completed pickup produced.
///
/// Deliberately absent until the backend has actually created them: before
/// collection the customer has one scheduled visit, not several shipments.
class _YourPackages extends StatelessWidget {
  const _YourPackages({required this.booking, this.focused});

  final Booking booking;

  /// The one being followed, so the list can mark it.
  final DestinationGroup? focused;

  @override
  Widget build(BuildContext context) {
    return DmCard(
      children: [
        DmCardCell(
          padding: const EdgeInsets.fromLTRB(16, 14, 16, 12),
          child: Row(
            children: [
              Expanded(
                child: Text(
                  'YOUR PACKAGES',
                  style: DmText.eyebrow.copyWith(color: DmColors.brand),
                ),
              ),
              Flexible(
                child: Text(
                  focused == null
                      ? 'Collected in one visit'
                      : 'Pickup ${booking.reference}',
                  textAlign: TextAlign.right,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: DmText.tiny,
                ),
              ),
            ],
          ),
        ),
        for (final group in booking.destinations)
          _PackageRow(group: group, isFocused: identical(group, focused)),
      ],
    );
  }
}

class _PackageRow extends StatelessWidget {
  const _PackageRow({required this.group, this.isFocused = false});

  final DestinationGroup group;
  final bool isFocused;

  @override
  Widget build(BuildContext context) {
    final stage = group.stage;
    return DmCardCell(
      background: isFocused ? DmColors.brandSoft : null,
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(group.destination.label, style: DmText.cardTitle),
                const SizedBox(height: 3),
                Text.rich(
                  TextSpan(
                    style: DmText.tiny,
                    children: [
                      TextSpan(
                        text: group.trackingId ?? '—',
                        style: DmText.monoSm,
                      ),
                      TextSpan(
                        text:
                            '  ·  ${group.packageCount} '
                            '${group.packageCount == 1 ? 'package' : 'packages'}',
                      ),
                    ],
                  ),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
          const SizedBox(width: 10),
          if (stage != null)
            Flexible(
              child: DmPill(
                stage.milestoneLabel,
                tone: stage == JourneyStage.delivered
                    ? DmPillTone.done
                    : DmPillTone.neutral,
              ),
            ),
        ],
      ),
    );
  }
}

/// The backend's QA stage helper, as a control.
///
/// It is not a simulator: each tap posts to
/// `POST /customer/ops/bookings/{reference}/stage` and the screen then re-reads
/// the booking, so what it shows is what the **server** recorded. Off entirely
/// unless the build asked for it with `DM_ALLOW_STAGE_OVERRIDE`, and never on
/// production or in a release.
class _StageStepper extends StatelessWidget {
  const _StageStepper({required this.booking});

  final Booking booking;

  @override
  Widget build(BuildContext context) {
    final app = AppScope.read(context);
    final index = booking.stage.index;
    final locked = booking.isCancelled;

    return Padding(
      padding: const EdgeInsets.fromLTRB(DmSpace.pad, 4, DmSpace.pad, 20),
      child: Container(
        padding: const EdgeInsets.fromLTRB(16, 10, 10, 10),
        decoration: BoxDecoration(
          color: DmColors.surfaceAlt,
          border: Border.all(color: DmColors.border),
          borderRadius: DmRadius.all(DmRadius.md),
        ),
        child: Row(
          children: [
            Expanded(
              child: Text(
                'Move stage (QA)',
                style: DmText.label.copyWith(color: DmColors.ink3),
              ),
            ),
            _StepButton(
              icon: LucideIcons.minus,
              onTap: locked || index == 0
                  ? null
                  : () => app.advanceStage(booking, JourneyStage.at(index - 1)),
            ),
            const SizedBox(width: 8),
            _StepButton(
              icon: LucideIcons.plus,
              onTap: locked || index == JourneyStage.values.length - 1
                  ? null
                  : () => app.advanceStage(booking, JourneyStage.at(index + 1)),
            ),
          ],
        ),
      ),
    );
  }
}

class _StepButton extends StatelessWidget {
  const _StepButton({required this.icon, this.onTap});

  final IconData icon;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    final enabled = onTap != null;
    return Opacity(
      opacity: enabled ? 1 : 0.35,
      child: Material(
        color: DmColors.surface,
        borderRadius: DmRadius.all(DmRadius.xs),
        child: InkWell(
          borderRadius: DmRadius.all(DmRadius.xs),
          onTap: onTap,
          child: Ink(
            width: 38,
            height: 38,
            decoration: BoxDecoration(
              borderRadius: DmRadius.all(DmRadius.xs),
              border: Border.all(color: DmColors.border),
            ),
            child: Icon(icon, size: 18, color: DmColors.ink2),
          ),
        ),
      ),
    );
  }
}