jpmschweitzerandClaude Opus 4.8
eb90ba14bc
The rail was a fixed Row(center, max) — one button per tab — so adding the Search tab pushed it 54px past its width and threw a RenderFlex overflow. Center the icons when they fit and scroll horizontally when they don't (LayoutBuilder + SingleChildScrollView + a minWidth floor), so the rail stays correct at any tab count. (T-200) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
105 lines
2.9 KiB
Dart
105 lines
2.9 KiB
Dart
import 'package:clide/kernel/src/theme/controller.dart';
|
|
import 'package:clide/widgets/src/clide_icon.dart';
|
|
import 'package:clide/widgets/src/clide_tappable.dart';
|
|
import 'package:flutter/widgets.dart';
|
|
|
|
class ClideIconRailItem {
|
|
const ClideIconRailItem({
|
|
required this.id,
|
|
required this.icon,
|
|
required this.tooltip,
|
|
});
|
|
|
|
final String id;
|
|
final ClideIconPainter icon;
|
|
final String tooltip;
|
|
}
|
|
|
|
class ClideIconRail extends StatelessWidget {
|
|
const ClideIconRail({
|
|
super.key,
|
|
required this.items,
|
|
required this.activeId,
|
|
required this.onSelect,
|
|
});
|
|
|
|
final List<ClideIconRailItem> items;
|
|
final String? activeId;
|
|
final ValueChanged<String> onSelect;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// Center the icons when they fit; scroll horizontally when there are
|
|
// more tabs than the rail is wide. The ConstrainedBox minWidth keeps
|
|
// them centered while there's room but doesn't cap growth, so the
|
|
// ScrollView takes over instead of the Row overflowing.
|
|
return LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final minWidth = constraints.maxWidth.isFinite ? constraints.maxWidth : 0.0;
|
|
return SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: ConstrainedBox(
|
|
constraints: BoxConstraints(minWidth: minWidth),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
for (final item in items)
|
|
_RailButton(
|
|
item: item,
|
|
active: item.id == activeId,
|
|
onTap: () => onSelect(item.id),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
class _RailButton extends StatelessWidget {
|
|
const _RailButton({
|
|
required this.item,
|
|
required this.active,
|
|
required this.onTap,
|
|
});
|
|
|
|
final ClideIconRailItem item;
|
|
final bool active;
|
|
final VoidCallback onTap;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final tokens = ClideTheme.of(context).surface;
|
|
return Semantics(
|
|
button: true,
|
|
selected: active,
|
|
label: item.tooltip,
|
|
child: ClideTappable(
|
|
onTap: onTap,
|
|
tooltip: item.tooltip,
|
|
builder: (ctx, hovered, _) {
|
|
final color = active
|
|
? tokens.globalForeground
|
|
: hovered
|
|
? tokens.sidebarForeground
|
|
: tokens.sidebarSectionHeader;
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: active ? tokens.tabActiveBorder : const Color(0x00000000),
|
|
width: 2,
|
|
),
|
|
),
|
|
),
|
|
child: ClideIcon(item.icon, size: 16, color: color),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|