feat: make selecting a user fancy

test/tab_panel_index_test.dart

@@ -3,6 +3,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:kooltap/l10n/app_localizations.dart';
 import 'package:kooltap/models/bar_tab.dart';
 import 'package:kooltap/utils/name_index.dart';
+import 'package:kooltap/views/bar/selected_tab_details.dart';
 import 'package:kooltap/views/bar/tab_panel.dart';
 
 const _names = [
@@ -43,6 +44,7 @@ void main() {
     Future<void> pumpPanel(
       WidgetTester tester, {
       bool showSearch = false,
+      BarTab? selectedTab,
     }) async {
       tester.view.physicalSize = const Size(500, 800);
       tester.view.devicePixelRatio = 1;
@@ -55,8 +57,8 @@ void main() {
           home: Scaffold(
             body: TabPanel(
               tabs: tabs,
-              selectedTab: null,
-              selectedTabId: null,
+              selectedTab: selectedTab,
+              selectedTabId: selectedTab?.id,
               stockByProductId: const {},
               showSearch: showSearch,
               onTabSelected: (_) {},
@@ -133,6 +135,92 @@ void main() {
       expect(find.text('anna'), findsOneWidget);
     });
 
+    group('collapsing', () {
+      double namesHeight(WidgetTester tester) =>
+          tester.getSize(find.byType(OpenTabsList)).height;
+
+      testWidgets('starts with the names at their usual height', (
+        tester,
+      ) async {
+        await pumpPanel(tester, selectedTab: tabs.first);
+
+        expect(namesHeight(tester), 246);
+      });
+
+      testWidgets('tapping a name collapses the names', (tester) async {
+        await pumpPanel(tester, selectedTab: tabs.first);
+
+        await tester.tap(find.text('Bram'));
+        await tester.pumpAndSettle();
+
+        expect(namesHeight(tester), lessThan(200));
+      });
+
+      testWidgets('touching the items collapses the names', (tester) async {
+        await pumpPanel(tester, selectedTab: tabs.first);
+
+        await tester.tap(find.byType(SelectedTabDetails), warnIfMissed: false);
+        await tester.pumpAndSettle();
+
+        expect(namesHeight(tester), lessThan(200));
+      });
+
+      testWidgets('lines the selected name up on top of its items', (
+        tester,
+      ) async {
+        final marc = tabs.firstWhere((tab) => tab.customerName == 'Marc');
+        await pumpPanel(tester, selectedTab: marc);
+        await tester.tap(find.byType(SelectedTabDetails), warnIfMissed: false);
+        await tester.pumpAndSettle();
+
+        final list = tester.getRect(find.byType(OpenTabsList));
+        final details = tester.getRect(find.byType(SelectedTabDetails));
+        final tile = tester.getRect(
+          find
+              .ancestor(of: find.text('Marc'), matching: find.byType(ClipRRect))
+              .first,
+        );
+
+        expect(tile.bottom, closeTo(list.bottom, 1));
+        expect(details.top, greaterThan(tile.bottom));
+        expect(
+          find.byWidgetPredicate(
+            (widget) => widget is Divider && widget.height == 28,
+          ),
+          findsNothing,
+        );
+      });
+
+      testWidgets('browsing the names shows the divider again', (tester) async {
+        final marc = tabs.firstWhere((tab) => tab.customerName == 'Marc');
+        await pumpPanel(tester, selectedTab: marc);
+        await tester.tap(find.byType(SelectedTabDetails), warnIfMissed: false);
+        await tester.pumpAndSettle();
+
+        await tester.drag(find.byType(OpenTabsList), const Offset(0, -40));
+        await tester.pumpAndSettle();
+
+        expect(
+          find.byWidgetPredicate(
+            (widget) => widget is Divider && widget.height == 28,
+          ),
+          findsOneWidget,
+        );
+      });
+
+      testWidgets('scrolling the names collapses the items', (tester) async {
+        await pumpPanel(tester, selectedTab: tabs.first);
+        await tester.tap(find.byType(SelectedTabDetails), warnIfMissed: false);
+        await tester.pumpAndSettle();
+
+        await tester.drag(find.byType(OpenTabsList), const Offset(0, -40));
+        await tester.pumpAndSettle();
+
+        final panel = tester.getSize(find.byType(TabPanel)).height;
+        expect(namesHeight(tester), greaterThan(panel * 0.75));
+      });
+    });
+
     testWidgets('a letter without names goes to the next one', (tester) async {
       await pumpPanel(tester);