Add analytics for F key usage

Includes activations and "clicks".

Author: mtsgrd

apps/desktop/src/lib/bootstrap/deps.ts

@@ -81,6 +81,7 @@ import {
 	USER_SERVICE as CLOUD_USER_SERVICE
 } from '@gitbutler/shared/users/userService';
 import { DragStateService, DRAG_STATE_SERVICE } from '@gitbutler/ui/drag/dragStateService.svelte';
+import { FModeManager } from '@gitbutler/ui/focus/fModeManager';
 import { FOCUS_MANAGER, FocusManager } from '@gitbutler/ui/focus/focusManager';
 import {
 	EXTERNAL_LINK_SERVICE,
@@ -212,9 +213,17 @@ export function initDependencies(args: {
 	// HISTORY & OPERATIONS
 	// ============================================================================
 
+	const fModeManager = new FModeManager();
+	const focusManager = new FocusManager(fModeManager);
 	const historyService = new HistoryService(backend, clientState['backendApi']);
 	const oplogService = new OplogService(clientState['backendApi']);
-	const commitAnalytics = new CommitAnalytics(stackService, uiState, worktreeService, rulesService);
+	const commitAnalytics = new CommitAnalytics(
+		stackService,
+		uiState,
+		worktreeService,
+		rulesService,
+		fModeManager
+	);
 	const codegenAnalytics = new CodegenAnalytics(claudeCodeService, settingsService);
 
 	// ============================================================================
@@ -266,7 +275,6 @@ export function initDependencies(args: {
 	// UI & INTERACTION
 	// ============================================================================
 
-	const focusManager = new FocusManager();
 	const imeHandler = new IMECompositionHandler();
 	const reorderDropzoneFactory = new ReorderDropzoneFactory(stackService);
 	const shortcutService = new ShortcutService(backend);

apps/desktop/src/lib/soup/commitAnalytics.ts

@@ -10,6 +10,7 @@ import type { HunkAssignment } from '$lib/hunks/hunk';
 import type RulesService from '$lib/rules/rulesService.svelte';
 import type { Stack, BranchDetails } from '$lib/stacks/stack';
 import type { EventProperties } from '$lib/state/customHooks.svelte';
+import type { FModeManager } from '@gitbutler/ui/focus/fModeManager';
 
 export const COMMIT_ANALYTICS = new InjectionToken<CommitAnalytics>('CommitAnalytics');
 
@@ -18,7 +19,8 @@ export class CommitAnalytics {
 		private stackService: StackService,
 		private uiState: UiState,
 		private worktreeService: WorktreeService,
-		private readonly rulesService: RulesService
+		private rulesService: RulesService,
+		private fModeManager: FModeManager
 	) {}
 
 	async getCommitProperties(args: {
@@ -86,6 +88,8 @@ export class CommitAnalytics {
 				totalAssignedFiles: this.getAssignedFiles(assignments).length,
 				// Total number of files that have not been assigned
 				totalUnassignedFiles: this.getUnassignedFiles(assignments).length,
+				// Number of times F key shortcuts have been "clicked"
+				fKeyActivations: this.fModeManager.activations,
 				// Rule metrics
 				...this.getRuleMetrics(rules),
 				// Behavior metrics

packages/ui/src/lib/focus/fModeManager.ts

@@ -4,8 +4,11 @@ import {
 	createShortcutOverlay,
 	removeShortcutOverlay
 } from '$lib/focus/shortcutUtils';
+import { InjectionToken } from '@gitbutler/core/context';
 import type { FocusableNode } from '$lib/focus/focusTypes';
 
+export const FMODE_MANAGER: InjectionToken<FModeManager> = new InjectionToken('FModeManager');
+
 /**
  * F-mode allows users to quickly navigate to buttons and containers using
  * two-letter keyboard shortcuts (e.g., 'AA', 'AB', etc.).
@@ -19,9 +22,8 @@ export class FModeManager {
 	private activeOverlays = new Map<HTMLElement, HTMLElement>();
 	private elementToShortcut = new Map<HTMLElement, string>();
 
-	get active(): boolean {
-		return this._active;
-	}
+	// Count of how many shortcuts have been activated.
+	private _activations = 0;
 
 	setFeatureEnabled(enabled: boolean): void {
 		this.featureEnabled = enabled;
@@ -183,6 +185,7 @@ export class FModeManager {
 		} else {
 			element.click();
 		}
+		this._activations++;
 		this.deactivate(); // Auto-exit after activation
 	}
 
@@ -240,4 +243,12 @@ export class FModeManager {
 			}
 		});
 	}
+
+	get active(): boolean {
+		return this._active;
+	}
+
+	get activations(): number {
+		return this._activations;
+	}
 }

packages/ui/src/lib/focus/focusManager.ts

@@ -32,7 +32,6 @@ export class FocusManager {
 
 	private previousElements: HTMLElement[] = [];
 	private indexCache = new Map<HTMLElement, number>();
-	private fModeManager: FModeManager;
 
 	readonly cursor = writable<HTMLElement | undefined>();
 	readonly outline = writable(false); // external use
@@ -41,9 +40,7 @@ export class FocusManager {
 	private handleMouse = this.handleClick.bind(this);
 	private handleKeys = this.handleKeydown.bind(this);
 
-	constructor() {
-		this.fModeManager = new FModeManager();
-	}
+	constructor(private fModeManager: FModeManager) {}
 
 	setFModeEnabled(enabled: boolean): void {
 		this.fModeManager.setFeatureEnabled(enabled);