Feature/configurable statusbar icon and color (#91)

twentyTwo · web-flow · commit da1e47969b47 · 2026-01-18T09:09:36.000+06:00
* feat: add configurable status bar icon and color options

* Refactor code structure for improved readability and maintainability

* feat: apply background style selection to both status bar items

* feat: add copilot instructions for coding time tracker

* feat: update status bar to use a single item with configurable icon and improved tooltip
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -0,0 +1,93 @@
+# Copilot Instructions for Simple Coding Time Tracker
+
+## Project Overview
+VS Code extension that tracks coding time with visualization, health reminders, and git branch/language detection. Version 0.6.7, published to VS Code Marketplace and Open VSX.
+
+## Architecture
+
+### Core Components (all in `src/`)
+- **extension.ts**: Main entry point; activates on startup; registers commands, event listeners, and manages component lifecycle
+- **timeTracker.ts**: Tracks user activity (cursor, text edits, window focus); monitors git branches; manages inactivity/focus timeouts; coordinates with health notifications
+- **database.ts**: Persists time entries via VS Code's globalState; each entry stores: date, project, timeSpent (minutes), branch, language
+- **summaryView.ts**: Webview UI showing 4 chart types (project, timeline, heatmap, languages); handles search/filtering; ~2800 lines with HTML/CSS/JS embedded
+- **settingsView.ts**: User-friendly settings UI; updates all tracker configuration
+- **statusBar.ts**: Real-time timer display at bottom of editor; clickable to show summary
+- **healthNotifications.ts**: Manages 3 health reminders (20-20-20 eye rule, stretch, break intervals)
+- **logger.ts**: Centralized logging
+- **utils.ts**: 50+ language detection from file extensions and VS Code language IDs; time formatting
+
+### Data Flow
+1. **Activity Detection** → Activity triggers cursor/text/hover event handlers in timeTracker
+2. **Activity Tracking** → Updates lastCursorActivity; resets inactivity timeout
+3. **Branch Monitoring** → Git watcher checks branch every 5 seconds; saves session and starts new one on branch change
+4. **Time Accumulation** → Save interval (5 sec) calculates elapsed time; validates against 24-hour ceiling
+5. **Database Persistence** → addEntry() to globalState; queried by summaryView for charts
+
+### Configuration Management
+Settings stored in package.json `contributes.configuration`; read via `vscode.workspace.getConfiguration()`. Key settings:
+- `inactivityTimeout` (minutes): Stop tracking after inactivity in focused VS Code
+- `focusTimeout` (minutes): Continue tracking N minutes after VS Code loses focus
+- `statusBar.showSeconds`, `statusBar.icon`, `statusBar.backgroundStyle`
+- `health.enableNotifications`, `health.eyeRestInterval`, `health.stretchInterval`, `health.breakInterval`
+
+**Pattern**: Settings changes trigger `onDidChangeConfiguration` listener in extension.ts; notify components to reload config via updateConfiguration() methods.
+
+## Critical Workflows
+
+### Building & Packaging
+```bash
+npm install              # Install dependencies
+npm run compile          # TypeScript → JavaScript to dist/
+npm run package          # Create .vsix file via webpack
+```
+
+### Testing (see CONTRIBUTING.md § Testing the Extension)
+1. **F5 in VS Code**: Launches Extension Development Host
+2. **Enable dev commands**: Search "enableDevCommands" in settings
+3. **Generate test data**: Command `SCTT: Generate Test Data (Dev)` creates 90-day dataset
+
+### Release Process (TECHNICAL.md)
+- **Beta**: `git tag v<version>-beta.<number> && git push origin v<version>-beta.<number>`
+- **Production**: `git tag v<version> && git push origin v<version>`
+- GitHub Actions auto-builds, creates release, publishes to Marketplace
+
+### Git Branch Strategy
+- `main`: Production releases → Marketplace
+- `develop`: Beta testing
+- `site`: GitHub Pages documentation (separate branch)
+- `stats-data`: Statistics only
+
+## Key Patterns & Conventions
+
+### Event Management
+- Use `vscode.* event listeners` for activity (onDidChangeTextEditorSelection, onDidChangeTextDocument, onDidChangeWindowState, onDidChangeActiveTextEditor)
+- Always call `this.updateCursorActivity()` on any editor activity
+- Store timers in private fields; clear with `clearTimeout()` / `clearInterval()`; clean up on deactivate
+
+### Time Tracking Logic
+- **Cursor inactivity**: 2.5 min default (configurable); reset on any editor activity
+- **Focus timeout**: 3 min default; continues tracking N minutes after VS Code loses focus
+- **Branch changes**: Save current session before starting new one (prevents cross-branch mixing)
+- **Validation**: Reject time entries > 24 hours or <= 0
+
+### Language Detection
+`detectLanguageFromFile(filePath)` uses file extension map (~50+ languages); fallback to VS Code's languageId via `detectLanguageFromLanguageId(languageId)`. See [utils.ts](src/utils.ts) for full map.
+
+### Database Migrations
+If adding new TimeEntry fields, add migration logic in Database.migrateEntries() to backfill old entries (see branch/language migration pattern).
+
+### Webview Communication
+Webviews (summaryView, settingsView) use `webview.postMessage()` to send and `onDidReceiveMessage()` to receive. Commands passed as JSON: `{ command: 'name', data: {...} }`.
+
+### Error Handling
+- Wrap async operations in try-catch
+- Use vscode.window.showErrorMessage() for user-facing errors
+- Log via Logger.getInstance().log()
+- Never silently fail on persistence or git operations
+
+## Important Files Reference
+- [package.json](package.json): Dependencies, extension config, scripts
+- [TECHNICAL.md](TECHNICAL.md): Release process, CI/CD pipelines
+- [CONTRIBUTING.md](CONTRIBUTING.md): Dev setup, testing commands
+- [src/timeTracker.ts](src/timeTracker.ts): Core tracking—understand inactivity/focus logic here first
+- [src/database.ts](src/database.ts): Understand TimeEntry schema and query patterns
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,5 +6,8 @@
     "simpleCodingTimeTracker.statusBar.showSeconds": true,
     "simpleCodingTimeTracker.health.enableNotifications": false,
     "simpleCodingTimeTracker.health.modalNotifications": true,
-    "simpleCodingTimeTracker.health.breakThreshold": 90
+    "simpleCodingTimeTracker.health.breakThreshold": 90,
+    "simpleCodingTimeTracker.statusBar.icon": "$(clock)",
+    "simpleCodingTimeTracker.statusBar.color": "#0bef5b",
+    "simpleCodingTimeTracker.statusBar.backgroundStyle": "remote"
 }
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "simple-coding-time-tracker",
   "displayName": "Simple Coding Time Tracker",
   "description": "Track and visualize your coding time across projects",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "publisher": "noorashuvo",
   "license": "MIT",
   "icon": "icon-sctt.png",
@@ -39,6 +39,22 @@
           "default": true,
           "description": "Show seconds in the status bar time display (disable to reduce distractions)"
         },
+        "simpleCodingTimeTracker.statusBar.icon": {
+          "type": "string",
+          "default": "$(code)",
+          "description": "Icon or Codicon name to display before the timer (e.g., '$(code)', '$(clock)', '$(rocket)', or any emoji)"
+        },
+        "simpleCodingTimeTracker.statusBar.backgroundStyle": {
+          "type": "string",
+          "enum": ["default", "warning", "error"],
+          "default": "warning",
+          "description": "Background style for the timer in the status bar: default (theme), warning (yellow), or error (red)."
+        },
+        "simpleCodingTimeTracker.statusBar.color": {
+          "type": "string",
+          "default": "",
+          "description": "Custom color for the timer text in hex format (e.g., '#FFAA00') or a VS Code theme color reference"
+        },
         "simpleCodingTimeTracker.health.enableNotifications": {
           "type": "boolean",
           "default": false,
diff --git a/src/settingsView.ts b/src/settingsView.ts
@@ -10,6 +10,9 @@ export class SettingsViewProvider {
 
     public show() {
         if (this.panel) {
+            // Refresh HTML so newly added settings render for existing panels
+            this.panel.webview.html = this.getHtmlContent();
+            void this.sendCurrentSettings();
             this.panel.reveal(vscode.ViewColumn.One);
             return;
         }
@@ -58,6 +61,9 @@ export class SettingsViewProvider {
             inactivityTimeout: config.get('inactivityTimeout', 2.5),
             focusTimeout: config.get('focusTimeout', 3),
             statusBarShowSeconds: config.get('statusBar.showSeconds', true),
+            statusBarIcon: config.get('statusBar.icon', '💻'),
+            statusBarBackgroundStyle: config.get('statusBar.backgroundStyle', 'warning'),
+            statusBarColor: config.get('statusBar.color', ''),
             healthEnableNotifications: config.get('health.enableNotifications', true),
             healthModalNotifications: config.get('health.modalNotifications', true),
             healthEyeRestInterval: config.get('health.eyeRestInterval', 20),
@@ -80,6 +86,9 @@ export class SettingsViewProvider {
             await config.update('inactivityTimeout', settings.inactivityTimeout, vscode.ConfigurationTarget.Workspace);
             await config.update('focusTimeout', settings.focusTimeout, vscode.ConfigurationTarget.Workspace);
             await config.update('statusBar.showSeconds', settings.statusBarShowSeconds, vscode.ConfigurationTarget.Workspace);
+            await config.update('statusBar.icon', settings.statusBarIcon, vscode.ConfigurationTarget.Workspace);
+            await config.update('statusBar.backgroundStyle', settings.statusBarBackgroundStyle, vscode.ConfigurationTarget.Workspace);
+            await config.update('statusBar.color', settings.statusBarColor, vscode.ConfigurationTarget.Workspace);
             await config.update('health.enableNotifications', settings.healthEnableNotifications, vscode.ConfigurationTarget.Workspace);
             await config.update('health.modalNotifications', settings.healthModalNotifications, vscode.ConfigurationTarget.Workspace);
             await config.update('health.eyeRestInterval', settings.healthEyeRestInterval, vscode.ConfigurationTarget.Workspace);
@@ -190,7 +199,7 @@ export class SettingsViewProvider {
             line-height: 1.4;
         }
 
-        input[type="number"] {
+        input[type="number"], input[type="text"], select {
             width: 100%;
             max-width: 200px;
             padding: 6px 10px;
@@ -201,10 +210,25 @@ export class SettingsViewProvider {
             font-size: 13px;
         }
 
-        input[type="number"]:focus {
+        input[type="number"]:focus, input[type="text"]:focus, select:focus {
             outline: 1px solid var(--vscode-focusBorder);
         }
 
+        .color-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            max-width: 320px;
+        }
+
+        input[type="color"] {
+            width: 42px;
+            height: 32px;
+            padding: 0;
+            border: 1px solid var(--vscode-input-border);
+            background: transparent;
+        }
+
         .checkbox-container {
             display: flex;
             align-items: center;
@@ -300,6 +324,34 @@ export class SettingsViewProvider {
             </div>
             <div class="description">Display seconds in the status bar time (HH:MM:SS). Disable to reduce distractions and show only hours and minutes.</div>
         </div>
+
+        <div class="setting-item">
+            <label for="statusBarIcon">Status Bar Icon</label>
+            <div class="description">Icon or Codicon name to display before the timer. Examples: '💻' (default), '$(clock)', '$(rocket)', or any emoji.</div>
+            <input type="text" id="statusBarIcon" placeholder="💻" style="width: 100%; max-width: 300px;" />
+            <div class="range-info">Supports emojis, text, or VS Code Codicons like $(clock)</div>
+        </div>
+
+        <div class="setting-item">
+            <label for="statusBarBackgroundStyle">Status Bar Background</label>
+            <div class="description">Choose the background style for the timer: use the default status bar color, a warning highlight, or an error highlight.</div>
+            <select id="statusBarBackgroundStyle" style="max-width: 220px;">
+                <option value="default">Default (theme)</option>
+                <option value="warning">Warning (yellow)</option>
+                <option value="error">Error (red)</option>
+            </select>
+            <div class="range-info">Matches VS Code theme colors: status bar default, warning, or error background</div>
+        </div>
+
+        <div class="setting-item">
+            <label for="statusBarColor">Status Bar Font Color</label>
+            <div class="description">Pick a font color for the timer text, or enter a hex/theme color. Leave empty for default.</div>
+            <div class="color-row">
+                <input type="color" id="statusBarColorPicker" aria-label="Pick status bar font color" />
+                <input type="text" id="statusBarColor" placeholder="#FFAA00 or theme color" style="flex: 1; max-width: 260px;" />
+            </div>
+            <div class="range-info">Examples: #FFAA00 (orange), #00FF00 (green), or theme color (e.g., editor.foreground). Leave blank for default.</div>
+        </div>
     </div>
 
     <div class="setting-group">
@@ -384,6 +436,9 @@ export class SettingsViewProvider {
             document.getElementById('inactivityTimeout').value = settings.inactivityTimeout;
             document.getElementById('focusTimeout').value = settings.focusTimeout;
             document.getElementById('statusBarShowSeconds').checked = settings.statusBarShowSeconds;
+            document.getElementById('statusBarIcon').value = settings.statusBarIcon;
+            document.getElementById('statusBarBackgroundStyle').value = settings.statusBarBackgroundStyle;
+            syncTextAndPicker(settings.statusBarColor || '');
             document.getElementById('healthEnableNotifications').checked = settings.healthEnableNotifications;
             document.getElementById('healthModalNotifications').checked = settings.healthModalNotifications;
             document.getElementById('healthEyeRestInterval').value = settings.healthEyeRestInterval;
@@ -397,6 +452,9 @@ export class SettingsViewProvider {
                 inactivityTimeout: parseFloat(document.getElementById('inactivityTimeout').value),
                 focusTimeout: parseFloat(document.getElementById('focusTimeout').value),
                 statusBarShowSeconds: document.getElementById('statusBarShowSeconds').checked,
+                statusBarIcon: document.getElementById('statusBarIcon').value,
+                statusBarBackgroundStyle: document.getElementById('statusBarBackgroundStyle').value,
+                statusBarColor: document.getElementById('statusBarColor').value,
                 healthEnableNotifications: document.getElementById('healthEnableNotifications').checked,
                 healthModalNotifications: document.getElementById('healthModalNotifications').checked,
                 healthEyeRestInterval: parseInt(document.getElementById('healthEyeRestInterval').value),
@@ -406,6 +464,49 @@ export class SettingsViewProvider {
             };
         }
 
+        const hexRegex = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
+
+        function normalizeHexToSix(value) {
+            const trimmed = value.trim();
+            if (!trimmed) return '';
+            const withHash = trimmed.startsWith('#') ? trimmed : '#' + trimmed;
+            if (!hexRegex.test(withHash)) return '';
+            const hex = withHash.replace('#', '');
+            if (hex.length === 3) {
+                return '#' + hex.split('').map(c => c + c).join('').toLowerCase();
+            }
+            return '#' + hex.toLowerCase();
+        }
+
+        function syncTextAndPicker(value) {
+            const textInput = document.getElementById('statusBarColor');
+            const pickerInput = document.getElementById('statusBarColorPicker');
+            textInput.value = value;
+            const normalized = normalizeHexToSix(value);
+            if (normalized) {
+                pickerInput.value = normalized;
+            } else {
+                pickerInput.value = '#ffaa00'; // fallback visible color
+            }
+        }
+
+        // Keep text input and picker in sync
+        document.addEventListener('DOMContentLoaded', () => {
+            const textInput = document.getElementById('statusBarColor');
+            const pickerInput = document.getElementById('statusBarColorPicker');
+
+            pickerInput.addEventListener('input', () => {
+                textInput.value = pickerInput.value;
+            });
+
+            textInput.addEventListener('input', () => {
+                const normalized = normalizeHexToSix(textInput.value);
+                if (normalized) {
+                    pickerInput.value = normalized;
+                }
+            });
+        });
+
         document.getElementById('saveButton').addEventListener('click', () => {
             const settings = getSettings();
             vscode.postMessage({
diff --git a/src/statusBar.ts b/src/statusBar.ts
