tint the Claude sidebar tab icon with the Claude accent (T-418)

TabContribution gains an optional iconColor honoured by the icon rail:
full-strength when active/hovered, dimmed (70%) when idle, so the tint
reads as identity without outshouting the active-state border. The
Claude Activity tab sets claudeAccent (#D97757) — nominative use per the
licenses.yaml trademark note (it marks Claude's own panel).

Filed and closed as a try-it-out (user request); trivially revertible if
the accent doesn't land visually.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-12 13:30:22 +02:00
co-authored by Claude Fable 5
parent 959ec7ddc4
commit 1674d3021a
8 changed files with 108 additions and 3 deletions
+4
View File
@@ -5,6 +5,7 @@ import 'package:clide/clide.dart';
import 'package:clide/builtin/claude/src/activity_cluster.dart' show foldLevelFromName, kActivityFoldLevelKey, nextFoldLevel;
import 'package:clide/builtin/claude/src/claude_config.dart';
import 'package:clide/builtin/claude/src/claude_status.dart' show nextSafePermissionMode;
import 'package:clide/builtin/claude/src/conversation_view.dart' show claudeAccent;
import 'package:clide/builtin/claude/src/claude_session_host.dart';
import 'package:clide/builtin/claude/src/session_orchestrator.dart';
import 'package:clide/builtin/claude/src/pane_context_status.dart';
@@ -308,6 +309,9 @@ class ClaudeExtension extends ClideExtension {
slot: Slots.sidebar,
title: 'Activity',
icon: PhosphorIcons.byName('robot'),
// Claude's accent marks Claude's own panel in the rail (T-418) —
// nominative use per the licenses.yaml trademark note.
iconColor: claudeAccent,
priority: 60,
build: (_) => const ClaudeMetaSidebar(),
),
+4
View File
@@ -27,6 +27,7 @@ class TabContribution extends ContributionPoint {
required this.title,
required this.build,
this.icon,
this.iconColor,
this.priority = 0,
this.fileGlobs = const [],
this.listenable,
@@ -39,6 +40,9 @@ class TabContribution extends ContributionPoint {
final String title;
final WidgetBuilder build;
final Object? icon;
/// Optional identity tint for the icon-rail glyph (T-418).
final Color? iconColor;
final int priority;
final List<String> fileGlobs;
final Listenable? listenable;
+1 -1
View File
@@ -146,7 +146,7 @@ class _BottomRail extends StatelessWidget {
return Container(
color: tokens.chromeBackground,
child: ClideIconRail(
items: [for (final t in tabs) ClideIconRailItem(id: t.id, icon: _iconFor(slot, t), tooltip: resolveTabTitle(ctx, t))],
items: [for (final t in tabs) ClideIconRailItem(id: t.id, icon: _iconFor(slot, t), tooltip: resolveTabTitle(ctx, t), iconColor: t.iconColor)],
activeId: activeId,
onSelect: (id) => kernel.panels.activateTab(slot, id),
),
+10 -2
View File
@@ -4,11 +4,16 @@ 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});
const ClideIconRailItem({required this.id, required this.icon, required this.tooltip, this.iconColor});
final String id;
final ClideIconPainter icon;
final String tooltip;
/// Brand/identity tint for this tab's icon (e.g. the Claude accent on the
/// Claude tab, T-418). Shown full-strength when active/hovered and slightly
/// dimmed when idle; null keeps the normal state colours.
final Color? iconColor;
}
class ClideIconRail extends StatelessWidget {
@@ -60,7 +65,10 @@ class _RailButton extends StatelessWidget {
onTap: onTap,
tooltip: item.tooltip,
builder: (ctx, hovered, _) {
final color = active
final tint = item.iconColor;
final color = tint != null
? (active || hovered ? tint : tint.withValues(alpha: 0.7))
: active
? tokens.globalForeground
: hovered
? tokens.sidebarForeground