jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add sidebar icon rail replacing top tab bar

Browse Source 
Four new icon painters (git branch, search, terminal, warning).
ClideIconRail widget with parent-owned hover state so only one
icon highlights at a time. Sidebar slot renders content above +
icon rail below; workspace and context slots keep the tab bar.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-04-22 17:29:00 +02:00
co-authored by Claude
parent 1f23ba40f2
commit eda3b30382
7 changed files with 284 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lib/widgets/src/clide_icon_rail.dart
+119
View File
@@ -0,0 +1,119 @@
import 'package:clide_app/kernel/src/theme/controller.dart';
import 'package:clide_app/widgets/src/clide_icon.dart';
import 'package:clide_app/widgets/src/clide_tooltip.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 StatefulWidget {
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
State<ClideIconRail> createState() => _ClideIconRailState();
}
class _ClideIconRailState extends State<ClideIconRail> {
String? _hoveredId;
@override
Widget build(BuildContext context) {
final tokens = ClideTheme.of(context).surface;
return MouseRegion(
onExit: (_) => setState(() => _hoveredId = null),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border(top: BorderSide(color: tokens.dividerColor)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (final item in widget.items)
_RailButton(
item: item,
active: item.id == widget.activeId,
hovered: item.id == _hoveredId,
onHover: () => setState(() => _hoveredId = item.id),
onTap: () => widget.onSelect(item.id),
),
],
),
),
);
}
}
class _RailButton extends StatelessWidget {
const _RailButton({
required this.item,
required this.active,
required this.hovered,
required this.onHover,
required this.onTap,
});
final ClideIconRailItem item;
final bool active;
final bool hovered;
final VoidCallback onHover;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final tokens = ClideTheme.of(context).surface;
final color = active
? tokens.globalForeground
: hovered
? tokens.sidebarForeground
: tokens.sidebarSectionHeader;
return Semantics(
button: true,
selected: active,
label: item.tooltip,
child: ClideTooltip(
message: item.tooltip,
child: MouseRegion(
cursor: SystemMouseCursors.click,
onEnter: (_) => onHover(),
child: GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: active
? tokens.tabActiveBorder
: const Color(0x00000000),
width: 2,
),
),
),
child: ClideIcon(item.icon, size: 16, color: color),
),
),
),
),
);
}
}
app/lib/widgets/src/icons/git_branch.dart
+27
View File
@@ -0,0 +1,27 @@
import 'dart:ui';
import 'package:clide_app/widgets/src/clide_icon.dart';
class GitBranchIcon extends ClideIconPainter {
const GitBranchIcon();
@override
void paint(Canvas canvas, Color color) {
final paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = 0.08
..strokeCap = StrokeCap.round;
// Trunk line
canvas.drawLine(const Offset(0.35, 0.2), const Offset(0.35, 0.8), paint);
// Branch line
canvas.drawLine(const Offset(0.65, 0.3), const Offset(0.65, 0.5), paint);
canvas.drawLine(const Offset(0.65, 0.5), const Offset(0.35, 0.6), paint);
// Dots at nodes
final dot = Paint()
..color = color
..style = PaintingStyle.fill;
canvas.drawCircle(const Offset(0.35, 0.2), 0.06, dot);
canvas.drawCircle(const Offset(0.35, 0.8), 0.06, dot);
canvas.drawCircle(const Offset(0.65, 0.3), 0.06, dot);
}
}
app/lib/widgets/src/icons/search.dart
+17
View File
@@ -0,0 +1,17 @@
import 'dart:ui';
import 'package:clide_app/widgets/src/clide_icon.dart';
class SearchIcon extends ClideIconPainter {
const SearchIcon();
@override
void paint(Canvas canvas, Color color) {
final paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = 0.08
..strokeCap = StrokeCap.round;
canvas.drawCircle(const Offset(0.42, 0.42), 0.22, paint);
canvas.drawLine(const Offset(0.58, 0.58), const Offset(0.78, 0.78), paint);
}
}
app/lib/widgets/src/icons/terminal_icon.dart
+20
View File
@@ -0,0 +1,20 @@
import 'dart:ui';
import 'package:clide_app/widgets/src/clide_icon.dart';
class TerminalIcon extends ClideIconPainter {
const TerminalIcon();
@override
void paint(Canvas canvas, Color color) {
final paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = 0.08
..strokeCap = StrokeCap.round;
// Prompt chevron >_
canvas.drawLine(const Offset(0.2, 0.3), const Offset(0.45, 0.5), paint);
canvas.drawLine(const Offset(0.45, 0.5), const Offset(0.2, 0.7), paint);
// Cursor line
canvas.drawLine(const Offset(0.5, 0.7), const Offset(0.8, 0.7), paint);
}
}
app/lib/widgets/src/icons/warning.dart
+28
View File
@@ -0,0 +1,28 @@
import 'dart:ui';
import 'package:clide_app/widgets/src/clide_icon.dart';
class WarningIcon extends ClideIconPainter {
const WarningIcon();
@override
void paint(Canvas canvas, Color color) {
final paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = 0.08
..strokeCap = StrokeCap.round
..strokeJoin = StrokeJoin.round;
final path = Path()
..moveTo(0.5, 0.15)
..lineTo(0.85, 0.8)
..lineTo(0.15, 0.8)
..close();
canvas.drawPath(path, paint);
// Exclamation
canvas.drawLine(const Offset(0.5, 0.4), const Offset(0.5, 0.58), paint);
final dot = Paint()
..color = color
..style = PaintingStyle.fill;
canvas.drawCircle(const Offset(0.5, 0.68), 0.035, dot);
}
}