[Rolodex] Update fidelity of Contact list screens (#2588)

This PR:

- Updates the fidelity of the home screen and contact list screens to near full fidelity
- Renames "Contact Lists" to "Contact Groups". We have multiple collections of contacts, so having lists of lists felt confusing
- Adds more functionality to the data models

Comparison of the two screens against native:

| Native | Flutter |
| --- | --- |
| <img width="418" alt="Screenshot 2025-02-19 at 2 59 58 PM" src="https://github.com/user-attachments/assets/1cc53d19-6bb5-4782-82fa-1a62cd75fd51" /> | <img width="397" alt="Screenshot 2025-02-19 at 2 58 54 PM" src="https://github.com/user-attachments/assets/ddab75f2-4aec-4239-a736-690a3185c196" /> |
| <img width="409" alt="Screenshot 2025-02-19 at 2 59 41 PM" src="https://github.com/user-attachments/assets/ee0d81ee-ae60-47ad-b071-266f39ce9b70" /> | <img width="402" alt="Screenshot 2025-02-19 at 2 58 45 PM" src="https://github.com/user-attachments/assets/88bf22f9-d8bd-40d7-a9ca-f2ded439de6c" /> |

Notably the container widget on the first screen is a placeholder, until a Cupertino collapsable widget is made.

rolodex/lib/screens/contact_groups.dart

@@ -0,0 +1,100 @@
+// Copyright 2018 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/cupertino.dart';
+import 'package:provider/provider.dart';
+import 'package:rolodex/data/contact.dart';
+import 'package:rolodex/data/contact_group.dart';
+import 'contacts.dart';
+
+class ContactGroupsPage extends StatelessWidget {
+  const ContactGroupsPage({super.key});
+
+  Widget _buildTrailing(List<Contact> contacts, BuildContext context) {
+    final TextStyle style = CupertinoTheme.of(
+      context,
+    ).textTheme.textStyle.copyWith(color: CupertinoColors.systemGrey);
+
+    return Row(
+      spacing: 5,
+      children: [
+        Text(contacts.length.toString(), style: style),
+        Icon(
+          CupertinoIcons.forward,
+          color: CupertinoColors.systemGrey3,
+          size: 18,
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      backgroundColor: CupertinoColors.extraLightBackgroundGray,
+      child: CustomScrollView(
+        slivers: [
+          CupertinoSliverNavigationBar(
+            padding: EdgeInsetsDirectional.only(start: 8, end: 16),
+            stretch: true,
+            leading: CupertinoButton(
+              padding: EdgeInsets.zero,
+              onPressed: () {},
+              child: Text('Edit'),
+            ),
+            largeTitle: Text('Lists'),
+            trailing: CupertinoButton(
+              padding: EdgeInsets.zero,
+              onPressed: () {},
+              child: Text('Add List'),
+            ),
+          ),
+          SliverFillRemaining(
+            child: Consumer<ContactGroupsModel>(
+              builder: (context, contactLists, child) {
+                const groupIcon = Icon(
+                  CupertinoIcons.group,
+                  weight: 900,
+                  size: 32,
+                );
+
+                const pairIcon = Icon(
+                  CupertinoIcons.person_2,
+                  weight: 900,
+                  size: 24,
+                );
+
+                return CupertinoListSection.insetGrouped(
+                  header: Text('iPhone'),
+                  children: [
+                    for (ContactGroup contactList in contactLists.lists)
+                      CupertinoListTile(
+                        leading: contactList.id == 0 ? groupIcon : pairIcon,
+                        leadingSize: 32,
+                        leadingToTitle: 9,
+                        padding: EdgeInsets.symmetric(horizontal: 13.0),
+                        title: Text(contactList.label),
+                        trailing: _buildTrailing(contactList.contacts, context),
+                        onTap:
+                            () => Navigator.of(context).push(
+                              CupertinoPageRoute(
+                                title: contactList.title,
+                                builder: (BuildContext context) {
+                                  return ContactListsPage(
+                                    listId: contactList.id,
+                                  );
+                                },
+                              ),
+                            ),
+                      ),
+                  ],
+                );
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}