refactor(ui): extract SheetHeader widget for modal bottom sheets

Author: leduckhc

app/lib/ui/composer/client_commands.dart

@@ -14,6 +14,7 @@ import '../../store/connection.dart';
 import '../../store/models.dart';
 import '../../store/store.dart';
 import '../../transport/protocol.dart';
+import '../widgets/sheet_header.dart';
 
 typedef ClientCmdHandler =
     Future<void> Function(
@@ -273,17 +274,12 @@ const _thinkingLevels = ['off', 'minimal', 'low', 'medium', 'high', 'xhigh'];
 Future<String?> _pickThinkingLevel(BuildContext context) {
   return showModalBottomSheet<String>(
     context: context,
+    showDragHandle: true,
     builder: (sheetContext) => SafeArea(
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          const ListTile(
-            dense: true,
-            title: Text(
-              'Thinking level',
-              style: TextStyle(fontWeight: FontWeight.bold),
-            ),
-          ),
+          const SheetHeader(title: 'Thinking level'),
           for (final level in _thinkingLevels)
             ListTile(
               title: Text(level),
@@ -305,14 +301,12 @@ Future<ModelInfo?> _pickModel(
   return showModalBottomSheet<ModelInfo>(
     context: context,
     isScrollControlled: true,
+    showDragHandle: true,
     builder: (sheetContext) => SafeArea(
       child: ListView(
         shrinkWrap: true,
         children: [
-          const ListTile(
-            dense: true,
-            title: Text('Model', style: TextStyle(fontWeight: FontWeight.bold)),
-          ),
+          const SheetHeader(title: 'Model'),
           for (final m in models)
             ListTile(
               title: Text(m.name),

app/lib/ui/home/home_screen.dart

@@ -8,6 +8,7 @@ import '../../app/theme.dart' show kPinoBrandBlue;
 import '../project/folder_browser.dart';
 import '../widgets/connection_chip.dart';
 import '../widgets/glass.dart';
+import '../widgets/sheet_header.dart';
 
 /// Brand blue accent used for running/active glass affordances (shared token).
 const _kBrandBlue = kPinoBrandBlue;
@@ -74,17 +75,12 @@ class HomeScreen extends ConsumerWidget {
     } else {
       target = await showModalBottomSheet<Project>(
         context: context,
+        showDragHandle: true,
         builder: (ctx) => SafeArea(
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: [
-              const Padding(
-                padding: EdgeInsets.fromLTRB(16, 16, 16, 8),
-                child: Text(
-                  'Spawn new session in…',
-                  style: TextStyle(fontWeight: FontWeight.w600),
-                ),
-              ),
+              const SheetHeader(title: 'Spawn new session in…'),
               for (final p in projects)
                 ListTile(
                   leading: const Icon(Icons.folder_outlined),
@@ -303,19 +299,26 @@ class _AttachPastButton extends ConsumerWidget {
       showDragHandle: true,
       builder: (ctx) => SafeArea(
         child: metas.isEmpty
-            ? const Padding(
-                padding: EdgeInsets.all(24),
-                child: Text('No past sessions.', textAlign: TextAlign.center),
+            ? Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  SheetHeader(
+                    title: 'Resume a past session in ${project.name}',
+                  ),
+                  const Padding(
+                    padding: EdgeInsets.fromLTRB(24, 8, 24, 24),
+                    child: Text(
+                      'No past sessions.',
+                      textAlign: TextAlign.center,
+                    ),
+                  ),
+                ],
               )
             : ListView(
                 shrinkWrap: true,
                 children: [
-                  Padding(
-                    padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
-                    child: Text(
-                      'Resume a past session in ${project.name}',
-                      style: const TextStyle(fontWeight: FontWeight.w600),
-                    ),
+                  SheetHeader(
+                    title: 'Resume a past session in ${project.name}',
                   ),
                   for (final m in metas)
                     ListTile(

app/lib/ui/widgets/sheet_header.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+/// A consistent header for list-style modal bottom sheets: a bold title plus
+/// an explicit close (✕) button that dismisses the sheet. Pair with
+/// `showDragHandle: true` so users always have a discoverable way to back out
+/// of a list without making a selection.
+class SheetHeader extends StatelessWidget {
+  const SheetHeader({super.key, required this.title});
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(16, 4, 8, 8),
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              title,
+              style: const TextStyle(fontWeight: FontWeight.w600),
+            ),
+          ),
+          IconButton(
+            icon: const Icon(Icons.close),
+            tooltip: 'Close',
+            onPressed: () => Navigator.of(context).pop(),
+          ),
+        ],
+      ),
+    );
+  }
+}

app/test/sheet_header_test.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pino/ui/widgets/sheet_header.dart';
+
+void main() {
+  testWidgets('renders the title and a close button', (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(body: SheetHeader(title: 'Model')),
+      ),
+    );
+
+    expect(find.text('Model'), findsOneWidget);
+    expect(find.byIcon(Icons.close), findsOneWidget);
+  });
+
+  testWidgets('close button pops the sheet without a selection', (
+    tester,
+  ) async {
+    String? result = 'unset';
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: Builder(
+            builder: (context) => ElevatedButton(
+              onPressed: () async {
+                result = await showModalBottomSheet<String>(
+                  context: context,
+                  builder: (_) => const Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [SheetHeader(title: 'Pick one')],
+                  ),
+                );
+              },
+              child: const Text('open'),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    await tester.tap(find.text('open'));
+    await tester.pumpAndSettle();
+    expect(find.text('Pick one'), findsOneWidget);
+
+    await tester.tap(find.byIcon(Icons.close));
+    await tester.pumpAndSettle();
+
+    expect(find.text('Pick one'), findsNothing); // sheet dismissed
+    expect(result, isNull); // no selection returned
+  });
+}