spotube/lib/pages/connect/connect.dart

import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:spotube/collections/routes.gr.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/ui/button_tile.dart';
import 'package:spotube/modules/connect/local_devices.dart';
import 'package:spotube/components/titlebar/titlebar.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/provider/connect/clients.dart';
import 'package:auto_route/auto_route.dart';

@RoutePage()
class ConnectPage extends HookConsumerWidget {
  static const name = "connect";

  const ConnectPage({super.key});

  @override
  Widget build(BuildContext context, ref) {
    final ThemeData(:colorScheme, :typography) = Theme.of(context);

    final connectClients = ref.watch(connectClientsProvider);
    final connectClientsNotifier = ref.read(connectClientsProvider.notifier);
    final discoveredDevices = connectClients.asData?.value.services;

    return SafeArea(
      bottom: false,
      child: Scaffold(
        headers: [
          TitleBar(title: Text(context.l10n.devices)),
        ],
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: CustomScrollView(
            slivers: [
              SliverPadding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                sliver: SliverToBoxAdapter(
                  child: Text(
                    context.l10n.remote,
                    style: typography.bold,
                  ),
                ),
              ),
              const SliverGap(10),
              SliverList.separated(
                itemCount: discoveredDevices?.length ?? 0,
                separatorBuilder: (context, index) => const Gap(10),
                itemBuilder: (context, index) {
                  final device = discoveredDevices![index];
                  final selected =
                      connectClients.asData?.value.resolvedService?.name ==
                          device.name;
                  return ButtonTile(
                    selected: selected,
                    leading: const Icon(SpotubeIcons.monitor),
                    title: Text(device.name),
                    subtitle: selected
                        ? Text(
                            "${connectClients.asData?.value.resolvedService?.host}"
                            ":${connectClients.asData?.value.resolvedService?.port}",
                          )
                        : null,
                    trailing: selected
                        ? IconButton.outline(
                            icon: const Icon(SpotubeIcons.power),
                            size: ButtonSize.small,
                            onPressed: () =>
                                connectClientsNotifier.clearResolvedService(),
                          )
                        : null,
                    onPressed: () {
                      if (selected) {
                        context.navigateTo(const ConnectControlRoute());
                      } else {
                        connectClientsNotifier.resolveService(device);
                      }
                    },
                  );
                },
              ),
              const ConnectPageLocalDevices(),
            ],
          ),
        ),
      ),
    );
  }
}