Task Clock

A minimal, always-visible timer to help you track what you are doing.

Add a task, set a duration, and let Task Clock count down — pin it as a tiny always-on-top widget while you work.

Screenshots

Light	Dark
Compact · Light	Compact · Dark

Features

Normal View	Compact / Pinned View	System Tray
Full task list with per-task circular progress rings	Tiny always-on-top timer widget	Left-click to focus the window
Stacked total progress bar with time remaining & expected finish	Large live elapsed-time readout	Right-click menu (Show / Hide / Quit)
Add, delete, reset individual tasks or reset everything	Compact task list with colored dots & percentages	Native completion notifications
Light & dark themes, persisted across sessions	Play / pause controls in a ~180×200 square	Always accessible, even when the window is hidden
Custom draggable, transparent, borderless window	Click any task to switch to it
15-color palette to tell tasks apart at a glance	"3 / 5 tasks completed" summary

How It Works

flowchart LR
    A[Open App] --> B{Add a task?}
    B -- Yes --> C[Enter name & duration<br/>Hours / Minutes / Seconds]
    C --> D[Task stored in<br/>SQLite database]
    B -- No --> D
    D --> E{Start timer}
    E -- Click a task --> F[Backend timer thread<br/>ticks every second]
    F --> G[Live updates<br/>progress ring & bars]
    G --> H{Task finished?}
    H -- No --> F
    H -- Yes --> I[Native notification<br/>Task complete!]
    I --> J[Elapsed time saved<br/>to database]
    J --> K{Pin the widget?}
    K -- Yes --> L[Compact always-on-top<br/>window with live time]
    K -- No --> E

Loading

Full flow

1. Create a task — click the + button, give it a name and a duration (hours, minutes, seconds), and hit Add (or press Enter).
2. Start working — click any task. The backend timer starts and, every second, streams a tick to the UI so the progress rings and bars stay live.
3. Track progress — the stacked bar shows contribution of every task; each task has its own circular ring. Completed tasks move to the bottom of the list.
4. Pause / resume — use the play/pause button. Pausing saves your elapsed time to the database, so progress survives restarts.
5. Get notified — when a task's time is up, a native OS notification fires and the elapsed time is persisted.
6. Pin to focus — click the pin icon to shrink into the compact always-on-top widget. Click any task there to switch; unpin to return to the full view.
7. Reset — reset a single task or wipe the board with the reset buttons.
8. Quit — right-click the tray icon and select Quit.

Architecture

flowchart TB
    subgraph Frontend["Frontend (React + TypeScript + Tailwind)"]
        UI[App UI<br/>Normal & Compact views]
        CMP[Components<br/>TodoItem / Footer / Clock]
    end

    subgraph Backend["Backend (Rust + Tauri)"]
        CMD[Commands<br/>create / delete / get / reset]
        TIM[Timer thread<br/>1-second tick]
        TRAY[System Tray<br/>menu & events]
    end

    subgraph Storage["Storage"]
        DB[(SQLite<br/>clock.db)]
    end

    UI -->|invoke commands| CMD
    CMD --> DB
    TIM -->|timer-tick / timer-complete events| CMP
    UI -->|start / pause / resume| TIM
    TRAY -->|show / hide / quit| UI

Loading

Tech Stack

Layer	Technology
Desktop Framework	Tauri v2
Frontend	React 19 + TypeScript
Styling	Tailwind CSS v4 + shadcn/ui
Backend	Rust (2021 edition)
Database	SQLite via rusqlite
Build Tooling	Vite 7
Icons	Lucide React
Fonts	Geist Variable
Notifications	tauri-plugin-notification

Key Tauri Commands

Command	Purpose
create_clock	Create a task with a name and duration
delete_clock	Delete a task
get_clocks	Fetch all tasks
update_elapsed	Persist elapsed time
reset_todo / reset_all	Reset one task or all tasks
start_timer	Start the timer for a task
pause_timer	Pause and return elapsed time
resume_timer	Resume a paused timer
get_timer_state	Read current timer state

---

Getting Started

Prerequisites

• Node.js (LTS recommended)
• Rust (stable toolchain)
• Tauri CLI prerequisites for your platform

Development

# Install frontend dependencies
npm install

# Run in development (HMR + Tauri window)
npm run tauri dev

Production Build

# Build a release bundle for your platform
npm run tauri build

The compiled installer/app will be placed in src-tauri/target/release/.

---

Project Structure

Task-Clock/
├── src/                        # Frontend
│   ├── App.tsx                 # Main component (normal + compact views)
│   ├── App.css                 # Tailwind + shadcn theme + custom scrollbars
│   ├── main.tsx                # React entry point
│   ├── lib/utils.ts            # cn() helper
│   └── components/
│       ├── todo.tsx            # TodoItem, TodoBody, CircularProgress
│       ├── footer.tsx          # Controls + Add Task form
│       └── ui/                 # shadcn Button / Input / Label
├── src-tauri/                  # Backend
│   ├── src/
│   │   ├── main.rs             # Rust entry point
│   │   ├── lib.rs              # Tauri setup, tray, timer commands
│   │   ├── db.rs               # SQLite CRUD
│   │   └── timer.rs            # Timer thread + notifications
│   ├── tauri.conf.json         # Window / bundle / build config
│   └── capabilities/           # Security permissions
├── resources/                  # Logo & screenshots
└── package.json

---

License

Distributed under the MIT License. See LICENSE for more information.