Click Saver & Gamification
Relevant source files
The following files were used as context for generating this wiki page:
The Click Saver system is a specialized utility within the DevUtils suite designed to track and gamify the efficiency gained by using centralized developer tools. By monitoring user interactions within the application, the system calculates "mouse miles" avoided and time saved compared to manual workflows or external searches.
This module serves both a functional purpose—providing metrics on tool usage—and an engagement purpose through a "Badge Cabinet" that rewards users as they hit specific interaction milestones. It integrates deeply with the application's tool-loading infrastructure to ensure automated tracking across diverse utilities like Base Screwdriver and JWT Can Opener.
Sources: README.md:21, components/tools/click-saver.tsx:102-113, messages/en.json:671-675
System Architecture
The Click Saver system follows a singleton-style state management pattern where click events are tracked globally and broadcast to UI components via a subscription model.
Click Tracking Logic
The core logic resides in a tracker that distinguishes between session-based clicks and lifetime clicks. It utilizes constants to estimate the physical effort saved:
- Distance Saved: Estimated at 0.2 meters of hand travel per click avoided.
- Time Saved: Estimated at 0.6 seconds per click avoided.
Sources: components/tools/click-saver.tsx:34-35, lib/click-tracker.ts
Data Flow Diagram
The following diagram illustrates how user interactions are captured, processed, and reflected in the Click Saver UI.
The system intercepts clicks, updates persistent storage, and notifies active components to refresh metrics.
Sources: lib/click-tracker.ts, components/tools/click-saver.tsx:43-51
Key Components and Metrics
ClickSaver UI Component
The ClickSaver component provides a comprehensive dashboard for user statistics. It is divided into three primary views:
- Metric Overview: Displays lifetime/session counts, calculated distance in miles/kilometers, and total time saved.
- Tracking Controls: Allows users to toggle local persistence and reset session counters.
- Badge Cabinet: A visual representation of milestones achieved.
Sources: components/tools/click-saver.tsx:94-113, components/tools/click-saver.tsx:142-160
Gamification Milestones
The system defines a set of hierarchical badges based on lifetime click thresholds.
| Badge ID | Label (EN) | Threshold (Clicks) | Icon |
|---|---|---|---|
starter | Tab Tourist | 50 | Sparkles |
apprentice | Shortcut Apprentice | 500 | Medal |
marathon | Mouse Marathoner | 5,000 | Trophy |
everest | Climbed Everest | 100,000 | Mountain |
Sources: components/tools/click-saver.tsx:58-82, messages/en.json:694-697
Implementation Details
State Persistence and Subscription
The tracking state is managed via lib/click-tracker.ts which provides methods to subscribe to state changes. This ensures that the ClickSaver component stays updated even if clicks occur while the tool is not currently visible.
// Example of state synchronization
useEffect(() => {
const unsubscribe = subscribeClickTracker((state) => {
setSessionClicks(state.session);
setLifetimeClicks(state.lifetime);
setPersist(state.persist);
});
return () => unsubscribe();
}, []);
Sources: components/tools/click-saver.tsx:43-52, lib/click-tracker.ts
Calculation Logic
Metrics are derived from the raw lifetimeClicks value using standard conversion factors.
Tool Integration
The ToolContent component maps the click-saver tool ID to the ClickSaver component, allowing it to be loaded into the main workspace. Tracking is intended to be automatic for interactions within tools, although specific UI elements can be marked with data-ignore-click-saver to prevent redundant counting.
Sources: components/tool-content.tsx:39, components/tools/click-saver.tsx:178
Localization
All strings for the system, including badge names and metric labels, are localized. The English keys are found under tools.clickSaver in the message schema.
- Metric Labels: "Clicks spared so far", "Mouse miles traveled".
- Descriptions: "Stored locally only—no data leaves your machine."
Sources: messages/en.json:671-705
The Click Saver & Gamification module effectively transforms mundane tool usage into a trackable, rewarding experience, reinforcing the project's goal of being a "Swiss Army Knife" for developers.
Sources: README.md:1, components/tools/click-saver.tsx