Features/badges #10

Merged
Christoph merged 6 commits from features/badges into master 2026-07-03 14:41:36 +00:00
4 changed files with 96 additions and 55 deletions
Showing only changes of commit 399ba80550 - Show all commits
+84 -42
View File
@@ -1,4 +1,4 @@
//! Renders the "ahead"/"behind" counts as a small dual-badge icon and applies it as the //! Renders the combined repository attention count as a taskbar badge and applies it as the
//! Windows taskbar overlay. Windows has no native numeric taskbar badge (unlike //! Windows taskbar overlay. Windows has no native numeric taskbar badge (unlike
//! macOS/Linux, which support `Window::set_badge_count`), so the numbers have to be drawn //! macOS/Linux, which support `Window::set_badge_count`), so the numbers have to be drawn
//! into a plain RGBA icon ourselves and set via `Window::set_overlay_icon`. //! into a plain RGBA icon ourselves and set via `Window::set_overlay_icon`.
@@ -27,28 +27,42 @@ fn glyph_rows(ch: char) -> [&'static str; GLYPH_HEIGHT] {
} }
} }
// Match the sync-stats pills in the status bar (see `.sync-stats strong` in app.css): const BADGE_FILL: [u8; 4] = [224, 160, 64, 255];
// ahead is orange (#e0a040), behind is blue (#7aacff). Border shades are a darkened tint const BADGE_BORDER: [u8; 4] = [176, 118, 40, 255];
// of the same color so the circle reads clearly against any taskbar background. const TEXT_FILL: [u8; 4] = [255, 255, 255, 255];
const AHEAD_FILL: [u8; 4] = [224, 160, 64, 255]; const TEXT_SHADOW: [u8; 4] = [10, 12, 24, 190];
const AHEAD_BORDER: [u8; 4] = [176, 118, 40, 255]; const CIRCLE_BORDER_WIDTH: f32 = 3.0;
const BEHIND_FILL: [u8; 4] = [122, 172, 255, 255];
const BEHIND_BORDER: [u8; 4] = [78, 128, 216, 255];
/// Caps the displayed text at two characters ("9+") so it always fits legibly in a badge. /// Caps the displayed text at three characters ("99+") so it always fits legibly.
fn cap_text(count: u32) -> String { fn cap_text(count: u32) -> String {
if count > 9 { "9+".to_string() } else { count.to_string() } if count > 99 {
"99+".to_string()
} else {
count.to_string()
}
} }
/// Draws a filled circle (with a slightly darker rim) centered at `(cx, cy)`. /// Draws a filled circle (with a slightly darker rim) centered at `(cx, cy)`.
fn draw_circle(rgba: &mut [u8], size: usize, cx: f32, cy: f32, radius: f32, fill: [u8; 4], border: [u8; 4]) { fn draw_circle(
rgba: &mut [u8],
size: usize,
cx: f32,
cy: f32,
radius: f32,
fill: [u8; 4],
border: [u8; 4],
) {
for y in 0..size { for y in 0..size {
for x in 0..size { for x in 0..size {
let dx = x as f32 + 0.5 - cx; let dx = x as f32 + 0.5 - cx;
let dy = y as f32 + 0.5 - cy; let dy = y as f32 + 0.5 - cy;
let dist = (dx * dx + dy * dy).sqrt(); let dist = (dx * dx + dy * dy).sqrt();
if dist <= radius { if dist <= radius {
let color = if dist >= radius - 1.5 { border } else { fill }; let color = if dist >= radius - CIRCLE_BORDER_WIDTH {
border
} else {
fill
};
let idx = (y * size + x) * 4; let idx = (y * size + x) * 4;
rgba[idx..idx + 4].copy_from_slice(&color); rgba[idx..idx + 4].copy_from_slice(&color);
} }
@@ -56,15 +70,23 @@ fn draw_circle(rgba: &mut [u8], size: usize, cx: f32, cy: f32, radius: f32, fill
} }
} }
/// Draws white `text` centered at `(cx, cy)`, scaling each font pixel up by `scale`. fn draw_text_layer(
fn draw_text(rgba: &mut [u8], size: usize, text: &str, cx: f32, cy: f32, scale: usize) { rgba: &mut [u8],
size: usize,
text: &str,
cx: f32,
cy: f32,
scale: usize,
offset: (isize, isize),
color: [u8; 4],
) {
let glyphs: Vec<[&'static str; GLYPH_HEIGHT]> = text.chars().map(glyph_rows).collect(); let glyphs: Vec<[&'static str; GLYPH_HEIGHT]> = text.chars().map(glyph_rows).collect();
let glyph_px_w = GLYPH_WIDTH * scale; let glyph_px_w = GLYPH_WIDTH * scale;
let glyph_px_h = GLYPH_HEIGHT * scale; let glyph_px_h = GLYPH_HEIGHT * scale;
let gap = scale.max(1); let gap = scale.max(1);
let total_w = glyphs.len() * glyph_px_w + gap * glyphs.len().saturating_sub(1); let total_w = glyphs.len() * glyph_px_w + gap * glyphs.len().saturating_sub(1);
let start_x = (cx - total_w as f32 / 2.0).round() as isize; let start_x = (cx - total_w as f32 / 2.0).round() as isize + offset.0;
let start_y = (cy - glyph_px_h as f32 / 2.0).round() as isize; let start_y = (cy - glyph_px_h as f32 / 2.0).round() as isize + offset.1;
for (gi, rows) in glyphs.iter().enumerate() { for (gi, rows) in glyphs.iter().enumerate() {
let glyph_x = start_x + (gi * (glyph_px_w + gap)) as isize; let glyph_x = start_x + (gi * (glyph_px_w + gap)) as isize;
@@ -79,7 +101,7 @@ fn draw_text(rgba: &mut [u8], size: usize, text: &str, cx: f32, cy: f32, scale:
let y = start_y + (gy * scale + py) as isize; let y = start_y + (gy * scale + py) as isize;
if x >= 0 && y >= 0 && (x as usize) < size && (y as usize) < size { if x >= 0 && y >= 0 && (x as usize) < size && (y as usize) < size {
let idx = (y as usize * size + x as usize) * 4; let idx = (y as usize * size + x as usize) * 4;
rgba[idx..idx + 4].copy_from_slice(&[255, 255, 255, 255]); rgba[idx..idx + 4].copy_from_slice(&color);
} }
} }
} }
@@ -88,48 +110,68 @@ fn draw_text(rgba: &mut [u8], size: usize, text: &str, cx: f32, cy: f32, scale:
} }
} }
/// Renders a dual badge: "behind" (blue) top-left and "ahead" (orange) top-right, matching /// Draws white `text` centered at `(cx, cy)`, scaling each font pixel up by `scale`.
/// the colors of the sync-stats pills in the status bar. A side is only drawn when its fn draw_text(rgba: &mut [u8], size: usize, text: &str, cx: f32, cy: f32, scale: usize) {
/// count is non-zero. Returns `None` when there's nothing to show at all, so the caller for offset in [(-1, 0), (1, 0), (0, -1), (0, 1)] {
/// can clear the overlay icon entirely. draw_text_layer(rgba, size, text, cx, cy, scale, offset, TEXT_SHADOW);
fn render_badge_icon(ahead: u32, behind: u32) -> Option<Image<'static>> { }
if ahead == 0 && behind == 0 { draw_text_layer(rgba, size, text, cx, cy, scale, (0, 0), TEXT_FILL);
}
fn text_scale(text: &str) -> usize {
match text.len() {
0 | 1 => 7,
2 => 5,
_ => 4,
}
}
/// Renders a single large badge with `count`. Returns `None` when there's nothing to show,
/// so the caller can clear the overlay icon.
fn render_badge_icon(count: u32) -> Option<Image<'static>> {
if count == 0 {
return None; return None;
} }
const SIZE: usize = 64; const SIZE: usize = 64;
const RADIUS: f32 = 26.0; const RADIUS: f32 = 29.0;
const SCALE: usize = 5;
const MARGIN: f32 = 2.0;
let mut rgba = vec![0u8; SIZE * SIZE * 4]; let mut rgba = vec![0u8; SIZE * SIZE * 4];
let center = SIZE as f32 / 2.0;
let (left_cx, left_cy) = (RADIUS + MARGIN, RADIUS + MARGIN); let text = cap_text(count);
let (right_cx, right_cy) = (SIZE as f32 - RADIUS - MARGIN, RADIUS + MARGIN); draw_circle(
&mut rgba,
if behind > 0 { SIZE,
draw_circle(&mut rgba, SIZE, left_cx, left_cy, RADIUS, BEHIND_FILL, BEHIND_BORDER); center,
draw_text(&mut rgba, SIZE, &cap_text(behind), left_cx, left_cy, SCALE); center,
} RADIUS,
if ahead > 0 { BADGE_FILL,
draw_circle(&mut rgba, SIZE, right_cx, right_cy, RADIUS, AHEAD_FILL, AHEAD_BORDER); BADGE_BORDER,
draw_text(&mut rgba, SIZE, &cap_text(ahead), right_cx, right_cy, SCALE); );
} draw_text(&mut rgba, SIZE, &text, center, center, text_scale(&text));
Some(Image::new_owned(rgba, SIZE as u32, SIZE as u32)) Some(Image::new_owned(rgba, SIZE as u32, SIZE as u32))
} }
/// Sets the taskbar badge from `ahead`/`behind` (both 0 clears it). Windows-only: Windows /// Sets the taskbar badge to `ahead + behind + changes` (0 clears it). Windows-only: Windows
/// has no native numeric badge API, so this draws and applies a small overlay icon instead. /// has no native numeric badge API, so this draws and applies a small overlay icon instead.
/// No-op on other platforms non-Windows desktops should use `Window::set_badge_count` /// No-op on other platforms: non-Windows desktops should use `Window::set_badge_count`
/// for a real native badge instead, which this app doesn't currently wire up. /// for a real native badge instead, which this app doesn't currently wire up.
#[tauri::command] #[tauri::command]
pub fn set_sync_badge(app: tauri::AppHandle, ahead: u32, behind: u32) -> Result<(), String> { pub fn set_sync_badge(
app: tauri::AppHandle,
ahead: u32,
behind: u32,
changes: u32,
) -> Result<(), String> {
let count = ahead.saturating_add(behind).saturating_add(changes);
#[cfg(target_os = "windows")] #[cfg(target_os = "windows")]
{ {
let Some(window) = app.get_webview_window("main") else { let Some(window) = app.get_webview_window("main") else {
return Ok(()); return Ok(());
}; };
let icon = render_badge_icon(ahead, behind); let icon = render_badge_icon(count);
window window
.set_overlay_icon(icon) .set_overlay_icon(icon)
.map_err(|err| format!("Could not set taskbar badge: {err}"))?; .map_err(|err| format!("Could not set taskbar badge: {err}"))?;
@@ -137,7 +179,7 @@ pub fn set_sync_badge(app: tauri::AppHandle, ahead: u32, behind: u32) -> Result<
#[cfg(not(target_os = "windows"))] #[cfg(not(target_os = "windows"))]
{ {
let _ = (app, ahead, behind); let _ = (app, count);
} }
Ok(()) Ok(())
+7 -8
View File
@@ -7,14 +7,13 @@ use badge::set_sync_badge;
use git::{ use git::{
SearchCancellationState, apply_file_patch, cancel_code_search, cancel_file_history, SearchCancellationState, apply_file_patch, cancel_code_search, cancel_file_history,
checkout_branch, commit, commit_ai_generate, commit_ai_load, commit_ai_local_models, checkout_branch, commit, commit_ai_generate, commit_ai_load, commit_ai_local_models,
commit_ai_status, compare_commits, compare_file_to_head, compare_file_to_parent, commit_ai_status, compare_commits, compare_file_to_head, compare_file_to_parent, create_branch,
create_branch, cred_delete, cred_load, cred_save, delete_branch, cred_delete, cred_load, cred_save, delete_branch, diff_file_against_working_tree, fetch,
diff_file_against_working_tree, get_file_patch, get_remote_url, get_status, list_branches, get_file_patch, get_remote_url, get_status, list_branches, list_commits, list_file_history,
list_commits, list_file_history, list_repository_files, merge_branch, open_repo_in_explorer, list_repository_files, merge_branch, open_repo_in_explorer, open_repository,
fetch, open_repository, open_repository_bundle, open_repository_file, pull, push, open_repository_bundle, open_repository_file, pull, push, read_conflict, rename_branch,
read_conflict, rename_branch, resolve_conflict, resolve_conflict_side, resolve_conflict, resolve_conflict_side, restore_file_from_commit, restore_files,
restore_file_from_commit, restore_files, restore_to_commit, search_code_introductions, restore_to_commit, search_code_introductions, stage_files, unstage_files,
stage_files, unstage_files,
}; };
fn main() { fn main() {
+2 -2
View File
@@ -679,7 +679,7 @@
repoPath = ""; repoPath = "";
status = null; status = null;
lastStatusFingerprint = ""; lastStatusFingerprint = "";
void setSyncBadge(0, 0).catch(() => {}); void setSyncBadge(0, 0, 0).catch(() => {});
} }
branches = []; branches = [];
commits = []; commits = [];
@@ -713,7 +713,7 @@
repoPath = activeRepoPath; repoPath = activeRepoPath;
lastStatusFingerprint = statusFingerprint(nextStatus); lastStatusFingerprint = statusFingerprint(nextStatus);
upsertRepoTab(activeRepoPath, nextStatus); upsertRepoTab(activeRepoPath, nextStatus);
void setSyncBadge(nextStatus.ahead, nextStatus.behind).catch(() => {}); void setSyncBadge(nextStatus.ahead, nextStatus.behind, nextStatus.files.length).catch(() => {});
} }
function errorToMessage(error: unknown): string { function errorToMessage(error: unknown): string {
+3 -3
View File
@@ -37,10 +37,10 @@ export function getStatus(path: string): Promise<GitStatus> {
return invoke<GitStatus>("get_status", { path }); return invoke<GitStatus>("get_status", { path });
} }
// Sets the taskbar icon badge to ahead + behind (0 clears it). Windows only — a no-op on // Sets the taskbar icon badge to ahead + behind + changed status files (0 clears it). Windows only — a no-op on
// other platforms, since Windows has no native numeric badge to fall back to. // other platforms, since Windows has no native numeric badge to fall back to.
export function setSyncBadge(ahead: number, behind: number): Promise<void> { export function setSyncBadge(ahead: number, behind: number, changes: number): Promise<void> {
return invoke<void>("set_sync_badge", { ahead, behind }); return invoke<void>("set_sync_badge", { ahead, behind, changes });
} }
export function listBranches(path: string): Promise<GitBranch[]> { export function listBranches(path: string): Promise<GitBranch[]> {