Initial commit - Core Cooldown v0.1.0
Portable Windows break timer to prevent RSI and eye strain. Tauri v2 + Svelte 5 + Tailwind CSS v4. No installer, no telemetry, no data leaves the machine. CC0 public domain.
This commit is contained in:
Your Name
27
.gitignore
vendored
Normal file
27
.gitignore
vendored
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Build output
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# Rust build artifacts
|
||||||
|
src-tauri/target/
|
||||||
|
|
||||||
|
# Generated Tauri schemas (auto-regenerated on build)
|
||||||
|
src-tauri/gen/schemas/
|
||||||
|
|
||||||
|
# Runtime portable data (created next to exe)
|
||||||
|
config.json
|
||||||
|
stats.json
|
||||||
|
data/
|
||||||
|
|
||||||
|
# OS files
|
||||||
|
Thumbs.db
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Editor
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
116
LICENSE
Normal file
116
LICENSE
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
CC0 1.0 Universal
|
||||||
|
|
||||||
|
Statement of Purpose
|
||||||
|
|
||||||
|
The laws of most jurisdictions throughout the world automatically confer
|
||||||
|
exclusive Copyright and Related Rights (defined below) upon the creator and
|
||||||
|
subsequent owner(s) (each and all, an "owner") of an original work of
|
||||||
|
authorship and/or a database (each, a "Work").
|
||||||
|
|
||||||
|
Certain owners wish to permanently relinquish those rights to a Work for the
|
||||||
|
purpose of contributing to a commons of creative, cultural and scientific
|
||||||
|
works ("Commons") that the public can reliably and without fear of later
|
||||||
|
claims of infringement build upon, modify, incorporate in other works, reuse
|
||||||
|
and redistribute as freely as possible in any form whatsoever and for any
|
||||||
|
purposes, including without limitation commercial purposes. These owners may
|
||||||
|
contribute to the Commons to promote the ideal of a free culture and the
|
||||||
|
further production of creative, cultural and scientific works, or to gain
|
||||||
|
reputation or greater distribution for their Work in part through the use and
|
||||||
|
efforts of others.
|
||||||
|
|
||||||
|
For these and/or other purposes and motivations, and without any expectation
|
||||||
|
of additional consideration or compensation, the person associating CC0 with a
|
||||||
|
Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
|
||||||
|
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
|
||||||
|
and publicly distribute the Work under its terms, with knowledge of his or her
|
||||||
|
Copyright and Related Rights in the Work and the meaning and intended legal
|
||||||
|
effect of CC0 on those rights.
|
||||||
|
|
||||||
|
1. Copyright and Related Rights. A Work made available under CC0 may be
|
||||||
|
protected by copyright and related or neighboring rights ("Copyright and
|
||||||
|
Related Rights"). Copyright and Related Rights include, but are not limited
|
||||||
|
to, the following:
|
||||||
|
|
||||||
|
i. the right to reproduce, adapt, distribute, perform, display, communicate,
|
||||||
|
and translate a Work;
|
||||||
|
|
||||||
|
ii. moral rights retained by the original author(s) and/or performer(s);
|
||||||
|
|
||||||
|
iii. publicity and privacy rights pertaining to a person's image or likeness
|
||||||
|
depicted in a Work;
|
||||||
|
|
||||||
|
iv. rights protecting against unfair competition in regards to a Work,
|
||||||
|
subject to the limitations in paragraph 4(a), below;
|
||||||
|
|
||||||
|
v. rights protecting the extraction, dissemination, use and reuse of data in
|
||||||
|
a Work;
|
||||||
|
|
||||||
|
vi. database rights (such as those arising under Directive 96/9/EC of the
|
||||||
|
European Parliament and of the Council of 11 March 1996 on the legal
|
||||||
|
protection of databases, and under any national implementation thereof,
|
||||||
|
including any amended or successor version of such directive); and
|
||||||
|
|
||||||
|
vii. other similar, equivalent or corresponding rights throughout the world
|
||||||
|
based on applicable law or treaty, and any national implementations thereof.
|
||||||
|
|
||||||
|
2. Waiver. To the greatest extent permitted by, but not in contravention of,
|
||||||
|
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
|
||||||
|
unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
|
||||||
|
and Related Rights and associated claims and causes of action, whether now
|
||||||
|
known or unknown (including existing as well as future claims and causes of
|
||||||
|
action), in the Work (i) in all territories worldwide, (ii) for the maximum
|
||||||
|
duration provided by applicable law or treaty (including future time
|
||||||
|
extensions), (iii) in any current or future medium and for any number of
|
||||||
|
copies, and (iv) for any purpose whatsoever, including without limitation
|
||||||
|
commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
|
||||||
|
the Waiver for the benefit of each member of the public at large and to the
|
||||||
|
detriment of Affirmer's heirs and successors, fully intending that such Waiver
|
||||||
|
shall not be subject to revocation, rescinding, cancellation, termination, or
|
||||||
|
any other legal or equitable action to disrupt the quiet enjoyment of the Work
|
||||||
|
by the public as contemplated by Affirmer's express Statement of Purpose.
|
||||||
|
|
||||||
|
3. Public License Fallback. Should any part of the Waiver for any reason be
|
||||||
|
judged legally invalid or ineffective under applicable law, then the Waiver
|
||||||
|
shall be preserved to the maximum extent permitted taking into account
|
||||||
|
Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
|
||||||
|
is so judged Affirmer hereby grants to each affected person a royalty-free,
|
||||||
|
non transferable, non sublicensable, non exclusive, irrevocable and
|
||||||
|
unconditional license to exercise Affirmer's Copyright and Related Rights in
|
||||||
|
the Work (i) in all territories worldwide, (ii) for the maximum duration
|
||||||
|
provided by applicable law or treaty (including future time extensions), (iii)
|
||||||
|
in any current or future medium and for any number of copies, and (iv) for any
|
||||||
|
purpose whatsoever, including without limitation commercial, advertising or
|
||||||
|
promotional purposes (the "License"). The License shall be deemed effective as
|
||||||
|
of the date CC0 was applied by Affirmer to the Work. Should any part of the
|
||||||
|
License for any reason be judged legally invalid or ineffective under
|
||||||
|
applicable law, such partial invalidity or ineffectiveness shall not invalidate
|
||||||
|
the remainder of the License, and in such case Affirmer hereby affirms that he
|
||||||
|
or she will not (i) exercise any of his or her remaining Copyright and Related
|
||||||
|
Rights in the Work or (ii) assert any associated claims and causes of action
|
||||||
|
with respect to the Work, in either case contrary to Affirmer's express
|
||||||
|
Statement of Purpose.
|
||||||
|
|
||||||
|
4. Limitations and Disclaimers.
|
||||||
|
|
||||||
|
a. No trademark or patent rights held by Affirmer are waived, abandoned,
|
||||||
|
surrendered, licensed or otherwise affected by this document.
|
||||||
|
|
||||||
|
b. Affirmer offers the Work as-is and makes no representations or warranties
|
||||||
|
of any kind concerning the Work, express, implied, statutory or otherwise,
|
||||||
|
including without limitation warranties of title, merchantability, fitness
|
||||||
|
for a particular purpose, non infringement, or the absence of latent or
|
||||||
|
other defects, accuracy, or the present or absence of errors, whether or not
|
||||||
|
discoverable, all to the greatest extent permissible under applicable law.
|
||||||
|
|
||||||
|
c. Affirmer disclaims responsibility for clearing rights of other persons
|
||||||
|
that may apply to the Work or any use thereof, including without limitation
|
||||||
|
any person's Copyright and Related Rights in the Work. Further, Affirmer
|
||||||
|
disclaims responsibility for obtaining any necessary consents, permissions or
|
||||||
|
other rights required for any use of the Work.
|
||||||
|
|
||||||
|
d. Affirmer understands and acknowledges that Creative Commons is not a
|
||||||
|
party to this document and has no duty or obligation with respect to this CC0
|
||||||
|
or use of the Work.
|
||||||
|
|
||||||
|
For more information, please see
|
||||||
|
<http://creativecommons.org/publicdomain/zero/1.0/>
|
||||||
438
README.md
Normal file
438
README.md
Normal file
@@ -0,0 +1,438 @@
|
|||||||
|
<p align="center">
|
||||||
|
<img src="src-tauri/icons/128x128@2x.png" alt="Core Cooldown" width="96" height="96" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h1 align="center">Core Cooldown</h1>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<strong>A portable break timer for Windows that reminds you to rest.</strong><br />
|
||||||
|
Because your time and your body belong to you — not to your screen.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<img src="https://img.shields.io/badge/license-CC0_1.0-blue?style=flat-square" alt="CC0 1.0" />
|
||||||
|
<img src="https://img.shields.io/badge/platform-Windows-0078D6?style=flat-square&logo=windows" alt="Windows" />
|
||||||
|
<img src="https://img.shields.io/badge/tauri-v2-24C8D8?style=flat-square&logo=tauri" alt="Tauri v2" />
|
||||||
|
<img src="https://img.shields.io/badge/svelte-5-FF3E00?style=flat-square&logo=svelte" alt="Svelte 5" />
|
||||||
|
<img src="https://img.shields.io/badge/rust-2021-000000?style=flat-square&logo=rust" alt="Rust" />
|
||||||
|
<img src="https://img.shields.io/badge/tailwind-v4-06B6D4?style=flat-square&logo=tailwindcss" alt="Tailwind v4" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Why
|
||||||
|
|
||||||
|
Repetitive strain injury and eye strain are not personal failings. They are the predictable consequence of systems that treat human attention as an extractable resource. Every worker at a screen deserves a tool that gently interrupts the grind — one that serves *them*, not a subscription model, not an analytics dashboard, not a corporate wellness KPI.
|
||||||
|
|
||||||
|
Core Cooldown is a single portable `.exe` with no installer, no account, no telemetry, and no data leaving your machine. Drop it in a folder and run it. It will remind you to rest. That's it.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
### Timer & Breaks
|
||||||
|
|
||||||
|
| Feature | Description |
|
||||||
|
|:--------|:------------|
|
||||||
|
| **Configurable intervals** | Set work sessions from 5–120 minutes and breaks from 1–60 minutes |
|
||||||
|
| **Pre-break warnings** | Toast notification and optional sound alert before each break |
|
||||||
|
| **Break enforcement** | Always-on-top break window, optional fullscreen mode |
|
||||||
|
| **Strict mode** | When enabled, the skip and cancel buttons are removed entirely |
|
||||||
|
| **Early end** | Optionally allow ending a break after 50% completion |
|
||||||
|
| **Snooze** | Delay a break by a configurable number of minutes (with configurable limits) |
|
||||||
|
| **Skip cooldown** | Prevent rapid-fire skipping with a configurable cooldown timer |
|
||||||
|
| **Immediate breaks** | Skip the pre-break notification and go straight into the break |
|
||||||
|
| **Manual break** | Start a break at any time from the dashboard or the tray menu |
|
||||||
|
|
||||||
|
### Idle Detection & Smart Breaks
|
||||||
|
|
||||||
|
| Feature | Description |
|
||||||
|
|:--------|:------------|
|
||||||
|
| **Idle auto-pause** | Detects inactivity via Windows API (`GetLastInputInfo`) and pauses the timer |
|
||||||
|
| **Auto-resume** | Timer resumes automatically when you return |
|
||||||
|
| **Smart breaks** | Recognizes natural breaks (stepping away from the keyboard) and optionally counts them toward your daily goal |
|
||||||
|
| **Configurable thresholds** | Idle timeout (30–600s) and smart break threshold (2–15 min) are independently adjustable |
|
||||||
|
|
||||||
|
### Break Activities
|
||||||
|
|
||||||
|
Each break screen shows a randomized activity suggestion from a curated library of **70 activities** across four categories:
|
||||||
|
|
||||||
|
- **Eyes** — palming, distance focusing, figure-eights, warm compress visualization, peripheral awareness drills
|
||||||
|
- **Stretch** — neck rolls, wrist flexion, shoulder blade squeezes, chest openers, spinal twists, hip flexor stretches
|
||||||
|
- **Breathing** — box breathing, 4-7-8 technique, alternate nostril, diaphragmatic breathing, resonance breathing
|
||||||
|
- **Movement** — standing calf raises, wall push-ups, balance exercises, gentle squats, toe touches, desk yoga
|
||||||
|
|
||||||
|
Activities cycle every 30 seconds and never repeat consecutively.
|
||||||
|
|
||||||
|
### Working Hours Schedule
|
||||||
|
|
||||||
|
A per-day schedule with support for multiple time ranges per day. The timer only runs during your configured working hours — outside of those hours, it pauses automatically.
|
||||||
|
|
||||||
|
- **Monday through Sunday** — each day independently togglable
|
||||||
|
- **Multiple ranges per day** — for split shifts or non-contiguous work blocks
|
||||||
|
- **Weekend defaults** — Saturday and Sunday are disabled by default
|
||||||
|
|
||||||
|
### Statistics & History
|
||||||
|
|
||||||
|
| Metric | Description |
|
||||||
|
|:-------|:------------|
|
||||||
|
| **Today's summary** | Breaks completed, skipped, snoozed, and total break time |
|
||||||
|
| **Natural breaks** | Separately tracked idle breaks (with optional stat inclusion) |
|
||||||
|
| **Compliance rate** | Ratio of completed breaks to total scheduled |
|
||||||
|
| **Streak tracking** | Current and best consecutive-day streaks |
|
||||||
|
| **7-day chart** | Canvas-rendered bar chart showing daily break history |
|
||||||
|
|
||||||
|
All statistics are stored locally in a plain JSON file next to the executable.
|
||||||
|
|
||||||
|
### Sound Effects
|
||||||
|
|
||||||
|
Synthesized notification sounds via the Web Audio API — no bundled audio files, no network requests.
|
||||||
|
|
||||||
|
**8 presets:** Bell, Chime, Soft, Digital, Harp, Bowl, Rain, Whistle
|
||||||
|
|
||||||
|
Each preset plays on break start, pre-break warning, and break completion. Volume is configurable from 0–100%.
|
||||||
|
|
||||||
|
### Global Keyboard Shortcuts
|
||||||
|
|
||||||
|
| Shortcut | Action |
|
||||||
|
|:---------|:-------|
|
||||||
|
| `Ctrl + Shift + P` | Pause / resume timer |
|
||||||
|
| `Ctrl + Shift + B` | Start break now |
|
||||||
|
| `Ctrl + Shift + S` | Show / hide main window |
|
||||||
|
|
||||||
|
These work system-wide, even when Core Cooldown is not focused.
|
||||||
|
|
||||||
|
### System Tray
|
||||||
|
|
||||||
|
- **Dynamic icon** — a 32×32 progress arc rendered in real-time: orange during focus, purple during breaks, dimmed when paused
|
||||||
|
- **Countdown tooltip** — hover over the tray icon to see time remaining
|
||||||
|
- **Context menu** — pause/resume, start break, toggle mini mode, show/hide, quit
|
||||||
|
|
||||||
|
### Mini Mode
|
||||||
|
|
||||||
|
A compact floating timer (200×50px) that sits on top of your other windows.
|
||||||
|
|
||||||
|
- **Click-through** — the mini timer is completely transparent to mouse events by default, so it never blocks what's underneath
|
||||||
|
- **Hover to grab** — hover over it for a configurable number of seconds (default: 3) and it becomes draggable
|
||||||
|
- **Double-click** — opens the main window
|
||||||
|
- **Togglable** — enable/disable from the tray menu
|
||||||
|
|
||||||
|
### Appearance & Customization
|
||||||
|
|
||||||
|
| Setting | Range |
|
||||||
|
|:--------|:------|
|
||||||
|
| **UI zoom** | 50–200% with live preview |
|
||||||
|
| **Accent color** | Hex color picker for the main UI accent |
|
||||||
|
| **Break color** | Separate hex color for the break screen ring |
|
||||||
|
| **Color schemes** | Ocean, Forest, Sunset, Midnight, Dawn |
|
||||||
|
| **Countdown font** | Google Fonts selector for the timer display |
|
||||||
|
| **Background blobs** | Animated gradient blobs with film grain overlay |
|
||||||
|
| **Backdrop opacity** | 50–100% for the break screen overlay |
|
||||||
|
| **Break title & message** | Fully customizable text shown during breaks |
|
||||||
|
| **Dark mode** | Always on (it's the only civilized option) |
|
||||||
|
|
||||||
|
### Notifications
|
||||||
|
|
||||||
|
Native Windows toast notifications for:
|
||||||
|
- Pre-break warnings (configurable seconds before break)
|
||||||
|
- Break completion
|
||||||
|
|
||||||
|
### Window Behavior
|
||||||
|
|
||||||
|
- **Frameless window** with custom titlebar and drag region
|
||||||
|
- **Transparent background** with frosted glass effects
|
||||||
|
- **Window position persistence** — main and mini windows remember their position between launches
|
||||||
|
- **Animated view transitions** — directional fly/scale/fade transitions (700ms, cubicOut easing) between all views
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Portability
|
||||||
|
|
||||||
|
Core Cooldown is fully portable. The executable carries everything it needs and stores everything it creates right next to itself:
|
||||||
|
|
||||||
|
```
|
||||||
|
core-cooldown.exe ← the application
|
||||||
|
config.json ← your settings (created on first run)
|
||||||
|
stats.json ← your break history (created on first run)
|
||||||
|
data/ ← WebView2 runtime data (created on first run)
|
||||||
|
```
|
||||||
|
|
||||||
|
No installer. No registry entries. No writes to `%APPDATA%`, `%LOCALAPPDATA%`, or any other system directory. Move the folder anywhere — a USB stick, a shared drive, a different machine. It just works.
|
||||||
|
|
||||||
|
There is nothing to uninstall. Delete the folder and it's gone. No traces left behind.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Download `core-cooldown.exe` from the [Releases](../../releases) page
|
||||||
|
2. Put it in any folder you like
|
||||||
|
3. Run it
|
||||||
|
|
||||||
|
That's it. No elevated permissions required. No runtime dependencies to install. The first launch may take a moment while Windows initializes the WebView2 runtime.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Building from Source
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- **Node.js** (v18+) and **npm**
|
||||||
|
- **Rust** toolchain (`rustup`) with the `x86_64-pc-windows-gnu` target
|
||||||
|
- **MinGW-w64** — the GNU toolchain for Windows (provides the linker, windres, and dlltool)
|
||||||
|
|
||||||
|
### Setup
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Clone the repository
|
||||||
|
git clone https://git.lashman.live/lashman/core-cooldown.git
|
||||||
|
cd core-cooldown
|
||||||
|
|
||||||
|
# Install JavaScript dependencies
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Linker Configuration
|
||||||
|
|
||||||
|
Create or edit `src-tauri/.cargo/config.toml` to point to your MinGW installation:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[build]
|
||||||
|
target = "x86_64-pc-windows-gnu"
|
||||||
|
|
||||||
|
[target.x86_64-pc-windows-gnu]
|
||||||
|
linker = "C:/path/to/mingw64/bin/gcc.exe"
|
||||||
|
ar = "C:/path/to/mingw64/bin/ar.exe"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Launch the app with hot-reload
|
||||||
|
npm run tauri dev
|
||||||
|
|
||||||
|
# Check Rust code without building
|
||||||
|
cd src-tauri && cargo check
|
||||||
|
|
||||||
|
# Build frontend only (no Tauri shell)
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Release Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build a release executable (no installer)
|
||||||
|
npm run tauri build
|
||||||
|
```
|
||||||
|
|
||||||
|
The compiled binary will be at:
|
||||||
|
```
|
||||||
|
src-tauri/target/x86_64-pc-windows-gnu/release/core-cooldown.exe
|
||||||
|
```
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
Core Cooldown is a split-architecture desktop application: a Rust backend for system integration and timer logic, and a Svelte frontend rendered in a native WebView.
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────────────────────────────────┐
|
||||||
|
│ System Tray │
|
||||||
|
│ (dynamic icon · tooltip · menu) │
|
||||||
|
├──────────────────────────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||||
|
│ │ Main Window │ │ Break Window│ │ Mini Window │ │
|
||||||
|
│ │ (WebView) │ │ (WebView) │ │ (WebView) │ │
|
||||||
|
│ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │
|
||||||
|
│ │ │ │ │
|
||||||
|
│ └─────────┬───────┴──────────────────┘ │
|
||||||
|
│ │ Tauri IPC (commands + events) │
|
||||||
|
│ ┌─────────┴─────────┐ │
|
||||||
|
│ │ Rust Backend │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ TimerManager │ ← state machine (tick/sec) │
|
||||||
|
│ │ Config │ ← JSON persistence │
|
||||||
|
│ │ Stats │ ← break history tracking │
|
||||||
|
│ │ IdleDetector │ ← GetLastInputInfo polling │
|
||||||
|
│ │ GlobalShortcuts │ ← Ctrl+Shift+P/B/S │
|
||||||
|
│ │ TrayIcon │ ← RGBA ring rendering │
|
||||||
|
│ │ Notifications │ ← Windows toast │
|
||||||
|
│ └───────────────────┘ │
|
||||||
|
│ │
|
||||||
|
└──────────────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Backend (Rust)
|
||||||
|
|
||||||
|
| Module | Responsibility |
|
||||||
|
|:-------|:---------------|
|
||||||
|
| `lib.rs` | Tauri app builder, command registration, tray setup, timer tick thread, window management, global shortcuts |
|
||||||
|
| `config.rs` | Configuration struct with serde serialization, validation (clamping all values to safe ranges), and file I/O |
|
||||||
|
| `timer.rs` | Timer state machine (`Running` → `Paused` → `BreakActive`), idle detection via Windows API, working hours enforcement |
|
||||||
|
| `stats.rs` | Daily break statistics, streak calculation, history queries |
|
||||||
|
| `main.rs` | Entry point |
|
||||||
|
|
||||||
|
### Frontend (Svelte 5 + TypeScript)
|
||||||
|
|
||||||
|
| Layer | Files |
|
||||||
|
|:------|:------|
|
||||||
|
| **Views** | `Dashboard.svelte`, `BreakScreen.svelte`, `Settings.svelte`, `StatsView.svelte` |
|
||||||
|
| **Windows** | `BreakWindow.svelte` (standalone break modal), `MiniTimer.svelte` (floating mini mode) |
|
||||||
|
| **Components** | `TimerRing.svelte`, `Titlebar.svelte`, `ToggleSwitch.svelte`, `Stepper.svelte`, `ColorPicker.svelte`, `FontSelector.svelte`, `TimeSpinner.svelte`, `BackgroundBlobs.svelte` |
|
||||||
|
| **Stores** | `timer.ts` (reactive timer state from IPC events), `config.ts` (config state with debounced auto-save) |
|
||||||
|
| **Utilities** | `sounds.ts` (Web Audio synthesis), `activities.ts` (70 break activities), `animate.ts` (motion library actions) |
|
||||||
|
|
||||||
|
### IPC Contract
|
||||||
|
|
||||||
|
**Commands** (frontend → backend):
|
||||||
|
`get_config`, `save_config`, `update_pending_config`, `reset_config`, `toggle_timer`, `start_break_now`, `cancel_break`, `snooze`, `get_timer_state`, `set_view`, `get_stats`, `get_daily_history`
|
||||||
|
|
||||||
|
**Events** (backend → frontend):
|
||||||
|
`timer-tick` (every second), `break-started`, `break-ended`, `prebreak-warning`, `config-changed`
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Configuration Reference
|
||||||
|
|
||||||
|
All settings are stored in `config.json` next to the executable. The settings panel exposes every option with live validation, but the file is plain JSON and can be edited by hand if you prefer.
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary><strong>Full configuration schema</strong></summary>
|
||||||
|
|
||||||
|
| Key | Type | Default | Range | Description |
|
||||||
|
|:----|:-----|:--------|:------|:------------|
|
||||||
|
| `break_duration` | `u32` | `5` | 1–60 min | Duration of each break |
|
||||||
|
| `break_frequency` | `u32` | `25` | 5–120 min | Interval between breaks |
|
||||||
|
| `auto_start` | `bool` | `true` | — | Start timer on launch |
|
||||||
|
| `break_title` | `string` | `"Rest your eyes"` | max 100 chars | Title shown on break screen |
|
||||||
|
| `break_message` | `string` | `"Look away from the screen..."` | max 500 chars | Message shown during breaks |
|
||||||
|
| `fullscreen_mode` | `bool` | `true` | — | Use fullscreen break window |
|
||||||
|
| `strict_mode` | `bool` | `false` | — | Remove skip/cancel buttons |
|
||||||
|
| `allow_end_early` | `bool` | `true` | — | Allow ending break after 50% |
|
||||||
|
| `immediately_start_breaks` | `bool` | `false` | — | Skip pre-break notification |
|
||||||
|
| `working_hours_enabled` | `bool` | `false` | — | Restrict timer to schedule |
|
||||||
|
| `working_hours_schedule` | `array` | Mon–Fri 09:00–18:00 | 7 days | Per-day time ranges |
|
||||||
|
| `dark_mode` | `bool` | `true` | — | Dark theme |
|
||||||
|
| `color_scheme` | `string` | `"Ocean"` | 5 presets | Color scheme name |
|
||||||
|
| `backdrop_opacity` | `f32` | `0.92` | 0.5–1.0 | Break screen backdrop opacity |
|
||||||
|
| `notification_enabled` | `bool` | `true` | — | Enable toast notifications |
|
||||||
|
| `notification_before_break` | `u32` | `30` | 0–300 sec | Pre-break warning time |
|
||||||
|
| `snooze_duration` | `u32` | `5` | 1–30 min | Snooze delay |
|
||||||
|
| `snooze_limit` | `u32` | `3` | 0–5 (0=unlimited) | Max snoozes per cycle |
|
||||||
|
| `skip_cooldown` | `u32` | `60` | 0–600 sec | Cooldown between skips |
|
||||||
|
| `sound_enabled` | `bool` | `true` | — | Play notification sounds |
|
||||||
|
| `sound_volume` | `u32` | `70` | 0–100 | Sound volume percentage |
|
||||||
|
| `sound_preset` | `string` | `"bell"` | 8 presets | Sound preset name |
|
||||||
|
| `idle_detection_enabled` | `bool` | `true` | — | Enable idle auto-pause |
|
||||||
|
| `idle_timeout` | `u32` | `120` | 30–600 sec | Idle threshold |
|
||||||
|
| `smart_breaks_enabled` | `bool` | `true` | — | Detect natural breaks |
|
||||||
|
| `smart_break_threshold` | `u32` | `300` | 120–900 sec | Natural break threshold |
|
||||||
|
| `smart_break_count_stats` | `bool` | `false` | — | Count natural breaks in stats |
|
||||||
|
| `show_break_activities` | `bool` | `true` | — | Show activity suggestions |
|
||||||
|
| `ui_zoom` | `u32` | `100` | 50–200% | Interface zoom level |
|
||||||
|
| `accent_color` | `string` | `"#ff4d00"` | hex | Main accent color |
|
||||||
|
| `break_color` | `string` | `"#7c6aef"` | hex | Break screen ring color |
|
||||||
|
| `countdown_font` | `string` | `""` | font family | Google Font for countdown |
|
||||||
|
| `background_blobs_enabled` | `bool` | `false` | — | Animated background blobs |
|
||||||
|
| `mini_click_through` | `bool` | `true` | — | Mini mode click-through |
|
||||||
|
| `mini_hover_threshold` | `f32` | `3.0` | 1.0–10.0 sec | Hover time before drag |
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
### Rust
|
||||||
|
|
||||||
|
| Crate | Purpose |
|
||||||
|
|:------|:--------|
|
||||||
|
| `tauri 2` | Application shell, IPC, multi-window, system tray |
|
||||||
|
| `tauri-plugin-shell 2` | Shell integration |
|
||||||
|
| `tauri-plugin-notification 2` | Windows toast notifications |
|
||||||
|
| `tauri-plugin-global-shortcut 2` | System-wide keyboard shortcuts |
|
||||||
|
| `serde` / `serde_json` | Configuration and statistics serialization |
|
||||||
|
| `chrono` | Date/time handling for schedules and statistics |
|
||||||
|
| `dirs` | Platform directory resolution (unused — legacy dep) |
|
||||||
|
| `anyhow` | Error handling |
|
||||||
|
| `winapi` | Windows idle detection (`GetLastInputInfo`) |
|
||||||
|
|
||||||
|
### JavaScript
|
||||||
|
|
||||||
|
| Package | Purpose |
|
||||||
|
|:--------|:--------|
|
||||||
|
| `@tauri-apps/api` | Frontend IPC bindings |
|
||||||
|
| `svelte 5` | Reactive UI framework (runes: `$state`, `$derived`, `$effect`) |
|
||||||
|
| `tailwindcss 4` | Utility-first CSS |
|
||||||
|
| `vite 6` | Build tool and dev server |
|
||||||
|
| `motion` | Animation library |
|
||||||
|
| `typescript 5` | Type safety |
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
This project belongs to no one and everyone. If you find it useful and want to make it better, you are welcome.
|
||||||
|
|
||||||
|
There are no contribution agreements to sign, no corporate CLAs, no licensing traps. Everything here is in the public domain. Your contributions will be too — freely given, freely shared, freely built upon by anyone who needs them.
|
||||||
|
|
||||||
|
**Some ways to help:**
|
||||||
|
|
||||||
|
- Report bugs or rough edges
|
||||||
|
- Suggest new break activities (especially if you have physiotherapy or ergonomics knowledge)
|
||||||
|
- Improve accessibility
|
||||||
|
- Port idle detection to macOS/Linux
|
||||||
|
- Translate the interface
|
||||||
|
- Share it with someone who needs it
|
||||||
|
|
||||||
|
The best software is built through mutual aid — people helping people because it's the right thing to do, not because there's a profit motive attached.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Philosophy
|
||||||
|
|
||||||
|
Core Cooldown exists because rest is not a luxury. It is a fundamental need that no productivity framework, no employer, and no software platform should be able to gatekeep behind a paywall or a subscription.
|
||||||
|
|
||||||
|
This application:
|
||||||
|
|
||||||
|
- **Collects nothing.** No analytics, no telemetry, no usage tracking, no crash reports phoned home. Your break habits are your own business.
|
||||||
|
- **Costs nothing.** Not "free tier with limitations." Not "free for personal use." Free. Unconditionally. For everyone.
|
||||||
|
- **Requires nothing.** No account, no email, no app store, no internet connection after download. It runs on your machine and answers to you alone.
|
||||||
|
- **Owns nothing.** Released under CC0 — the most complete relinquishment of rights possible under law. There is no owner. There are no restrictions. The code belongs to the commons.
|
||||||
|
|
||||||
|
We believe that tools for human wellbeing should never be enclosed, never be scarce, and never serve a master other than the person using them.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://creativecommons.org/publicdomain/zero/1.0/">
|
||||||
|
<img src="https://licensebuttons.net/p/zero/1.0/88x31.png" alt="CC0" />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
**CC0 1.0 Universal — Public Domain Dedication**
|
||||||
|
|
||||||
|
To the extent possible under law, the author has waived all copyright and related or neighboring rights to this work. This work is published from the commons, for the commons.
|
||||||
|
|
||||||
|
You can copy, modify, distribute, and perform the work, even for commercial purposes, all without asking permission. No permission is needed. No attribution is required (though it's always appreciated).
|
||||||
|
|
||||||
|
See [`LICENSE`](LICENSE) for the full legal text.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<sub>
|
||||||
|
Built with care. Shared without conditions.<br />
|
||||||
|
Rest well.
|
||||||
|
</sub>
|
||||||
|
</p>
|
||||||
15
index.html
Normal file
15
index.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600&family=Space+Mono:wght@700&family=Roboto+Mono:wght@600&family=Fira+Code:wght@600&family=IBM+Plex+Mono:wght@600&family=Source+Code+Pro:wght@600&family=Share+Tech+Mono&family=Major+Mono+Display&family=Azeret+Mono:wght@600&family=DM+Mono:wght@500&family=Inconsolata:wght@600&family=Ubuntu+Mono:wght@700&family=Overpass+Mono:wght@600&family=Red+Hat+Mono:wght@600&family=Martian+Mono:wght@600&family=Noto+Sans+Mono:wght@600&family=Oxygen+Mono&family=Anonymous+Pro:wght@700&family=Courier+Prime:wght@700&display=swap" rel="stylesheet" />
|
||||||
|
<title>Core Cooldown</title>
|
||||||
|
</head>
|
||||||
|
<body style="background:#000">
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2395
package-lock.json
generated
Normal file
2395
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
package.json
Normal file
26
package.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "core-cooldown",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"tauri": "tauri"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tauri-apps/api": "^2",
|
||||||
|
"motion": "^12.33.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^5",
|
||||||
|
"@tailwindcss/vite": "^4",
|
||||||
|
"@tauri-apps/cli": "^2",
|
||||||
|
"svelte": "^5",
|
||||||
|
"svelte-check": "^4",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"typescript": "^5.5",
|
||||||
|
"vite": "^6"
|
||||||
|
}
|
||||||
|
}
|
||||||
2
src-tauri/.cargo/config.toml
Normal file
2
src-tauri/.cargo/config.toml
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
[build]
|
||||||
|
target = "x86_64-pc-windows-gnu"
|
||||||
5443
src-tauri/Cargo.lock
generated
Normal file
5443
src-tauri/Cargo.lock
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
src-tauri/Cargo.toml
Normal file
25
src-tauri/Cargo.toml
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
[package]
|
||||||
|
name = "core-cooldown"
|
||||||
|
version = "0.1.0"
|
||||||
|
edition = "2021"
|
||||||
|
|
||||||
|
[lib]
|
||||||
|
name = "core_cooldown_lib"
|
||||||
|
crate-type = ["lib", "staticlib"]
|
||||||
|
|
||||||
|
[build-dependencies]
|
||||||
|
tauri-build = { version = "2", features = [] }
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
tauri = { version = "2", features = ["tray-icon"] }
|
||||||
|
tauri-plugin-shell = "2"
|
||||||
|
tauri-plugin-notification = "2"
|
||||||
|
tauri-plugin-global-shortcut = "2"
|
||||||
|
serde = { version = "1", features = ["derive"] }
|
||||||
|
serde_json = "1"
|
||||||
|
dirs = "5"
|
||||||
|
chrono = "0.4"
|
||||||
|
anyhow = "1"
|
||||||
|
|
||||||
|
[target.'cfg(windows)'.dependencies]
|
||||||
|
winapi = { version = "0.3", features = ["winuser", "sysinfoapi", "windef"] }
|
||||||
11
src-tauri/build.rs
Normal file
11
src-tauri/build.rs
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
fn main() {
|
||||||
|
// Ensure MinGW tools are on PATH for build scripts (windres, dlltool, etc.)
|
||||||
|
let mingw_bin = "C:/Users/lashman/mingw-w64/mingw64/bin";
|
||||||
|
if let Ok(current_path) = std::env::var("PATH") {
|
||||||
|
std::env::set_var("PATH", format!("{};{}", mingw_bin, current_path));
|
||||||
|
} else {
|
||||||
|
std::env::set_var("PATH", mingw_bin);
|
||||||
|
}
|
||||||
|
|
||||||
|
tauri_build::build()
|
||||||
|
}
|
||||||
35
src-tauri/capabilities/default.json
Normal file
35
src-tauri/capabilities/default.json
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://raw.githubusercontent.com/nicegui-fr/nicegui/main/src-tauri/gen/schemas/desktop-schema.json",
|
||||||
|
"identifier": "default",
|
||||||
|
"description": "Capability for the main window",
|
||||||
|
"windows": ["main", "mini", "break"],
|
||||||
|
"permissions": [
|
||||||
|
"core:window:allow-start-dragging",
|
||||||
|
"core:window:allow-minimize",
|
||||||
|
"core:window:allow-close",
|
||||||
|
"core:window:allow-toggle-maximize",
|
||||||
|
"core:window:allow-set-focus",
|
||||||
|
"core:window:allow-show",
|
||||||
|
"core:window:allow-hide",
|
||||||
|
"core:window:allow-set-always-on-top",
|
||||||
|
"core:window:allow-set-fullscreen",
|
||||||
|
"core:window:allow-set-size",
|
||||||
|
"core:window:allow-set-min-size",
|
||||||
|
"core:window:allow-set-position",
|
||||||
|
"core:window:allow-set-decorations",
|
||||||
|
"core:window:allow-set-skip-taskbar",
|
||||||
|
"core:window:allow-set-ignore-cursor-events",
|
||||||
|
"core:window:allow-is-visible",
|
||||||
|
"core:window:allow-unminimize",
|
||||||
|
"core:window:allow-outer-position",
|
||||||
|
"core:window:allow-outer-size",
|
||||||
|
"core:window:allow-inner-size",
|
||||||
|
"core:event:default",
|
||||||
|
"core:app:default",
|
||||||
|
"core:tray:default",
|
||||||
|
"core:webview:default",
|
||||||
|
"shell:default",
|
||||||
|
"notification:default",
|
||||||
|
"global-shortcut:default"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
src-tauri/icons/128x128.png
Normal file
BIN
src-tauri/icons/128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 B |
BIN
src-tauri/icons/128x128@2x.png
Normal file
BIN
src-tauri/icons/128x128@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 859 B |
BIN
src-tauri/icons/32x32.png
Normal file
BIN
src-tauri/icons/32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 B |
BIN
src-tauri/icons/icon.icns
Normal file
BIN
src-tauri/icons/icon.icns
Normal file
Binary file not shown.
BIN
src-tauri/icons/icon.ico
Normal file
BIN
src-tauri/icons/icon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 370 B |
421
src-tauri/src/config.rs
Normal file
421
src-tauri/src/config.rs
Normal file
@@ -0,0 +1,421 @@
|
|||||||
|
use anyhow::{Context, Result};
|
||||||
|
use serde::{Deserialize, Serialize};
|
||||||
|
use std::fs;
|
||||||
|
use std::path::PathBuf;
|
||||||
|
|
||||||
|
/// A single time range (e.g., 09:00 to 17:00)
|
||||||
|
#[derive(Debug, Clone, Serialize, Deserialize)]
|
||||||
|
pub struct TimeRange {
|
||||||
|
pub start: String, // Format: "HH:MM"
|
||||||
|
pub end: String, // Format: "HH:MM"
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Default for TimeRange {
|
||||||
|
fn default() -> Self {
|
||||||
|
Self {
|
||||||
|
start: "09:00".to_string(),
|
||||||
|
end: "18:00".to_string(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Schedule for a single day
|
||||||
|
#[derive(Debug, Clone, Serialize, Deserialize)]
|
||||||
|
pub struct DaySchedule {
|
||||||
|
pub enabled: bool,
|
||||||
|
pub ranges: Vec<TimeRange>,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Default for DaySchedule {
|
||||||
|
fn default() -> Self {
|
||||||
|
Self {
|
||||||
|
enabled: true,
|
||||||
|
ranges: vec![TimeRange::default()],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
impl DaySchedule {
|
||||||
|
/// Create a default schedule for weekend days (disabled by default)
|
||||||
|
fn weekend_default() -> Self {
|
||||||
|
Self {
|
||||||
|
enabled: false,
|
||||||
|
ranges: vec![TimeRange::default()],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Clone, Serialize, Deserialize)]
|
||||||
|
#[serde(default)]
|
||||||
|
pub struct Config {
|
||||||
|
// Timer settings
|
||||||
|
pub break_duration: u32, // Duration of each break in minutes (1-60)
|
||||||
|
pub break_frequency: u32, // How often breaks occur in minutes (5-120)
|
||||||
|
pub auto_start: bool, // Start timer automatically on app launch
|
||||||
|
|
||||||
|
// Break settings
|
||||||
|
pub break_title: String, // Title shown on break screen (e.g., "Rest your eyes")
|
||||||
|
pub break_message: String, // Custom message shown during breaks
|
||||||
|
pub fullscreen_mode: bool, // Use fullscreen break window vs notification
|
||||||
|
pub strict_mode: bool, // Prevent user from skipping breaks
|
||||||
|
pub allow_end_early: bool, // Allow ending break after 50% completion
|
||||||
|
pub immediately_start_breaks: bool, // Skip pre-break notification, go straight to break
|
||||||
|
|
||||||
|
// Working hours (per-day schedule with multiple ranges)
|
||||||
|
pub working_hours_enabled: bool,
|
||||||
|
pub working_hours_schedule: Vec<DaySchedule>, // 7 days: Mon, Tue, Wed, Thu, Fri, Sat, Sun
|
||||||
|
|
||||||
|
// Appearance
|
||||||
|
pub dark_mode: bool,
|
||||||
|
pub color_scheme: String,
|
||||||
|
pub backdrop_opacity: f32, // Break screen backdrop opacity (0.5-1.0)
|
||||||
|
|
||||||
|
// Notifications
|
||||||
|
pub notification_enabled: bool,
|
||||||
|
pub notification_before_break: u32, // Notify X seconds before break (0 = no notification)
|
||||||
|
|
||||||
|
// Advanced
|
||||||
|
pub snooze_duration: u32, // Duration of snooze in minutes (1-30)
|
||||||
|
pub snooze_limit: u32, // Max snoozes per break cycle (0 = unlimited, 1-5)
|
||||||
|
pub skip_cooldown: u32, // Minimum time between skip operations in seconds
|
||||||
|
|
||||||
|
// Sound
|
||||||
|
pub sound_enabled: bool, // Play sounds on break events
|
||||||
|
pub sound_volume: u32, // Volume 0-100
|
||||||
|
pub sound_preset: String, // Sound preset name: "bell", "chime", "soft", "digital"
|
||||||
|
|
||||||
|
// Idle detection
|
||||||
|
pub idle_detection_enabled: bool,
|
||||||
|
pub idle_timeout: u32, // Seconds of inactivity before auto-pause (30-600)
|
||||||
|
|
||||||
|
// Smart breaks - natural break detection
|
||||||
|
pub smart_breaks_enabled: bool,
|
||||||
|
pub smart_break_threshold: u32, // Seconds of idle to count as natural break (120-900)
|
||||||
|
pub smart_break_count_stats: bool, // Include natural breaks in statistics
|
||||||
|
|
||||||
|
// Break activities
|
||||||
|
pub show_break_activities: bool,
|
||||||
|
|
||||||
|
// UI
|
||||||
|
pub ui_zoom: u32, // UI zoom percentage (50-200, default 100)
|
||||||
|
pub accent_color: String, // Main accent color hex (e.g., "#ff4d00")
|
||||||
|
pub break_color: String, // Break screen ring color hex (e.g., "#7c6aef")
|
||||||
|
pub countdown_font: String, // Google Font family for countdown display (empty = system default)
|
||||||
|
pub background_blobs_enabled: bool, // Animated gradient blobs background
|
||||||
|
|
||||||
|
// Mini mode
|
||||||
|
pub mini_click_through: bool, // Mini mode is click-through until hovered
|
||||||
|
pub mini_hover_threshold: f32, // Seconds to hover before enabling drag (1.0-10.0)
|
||||||
|
|
||||||
|
// Window positions (persisted between launches)
|
||||||
|
pub main_window_x: Option<i32>,
|
||||||
|
pub main_window_y: Option<i32>,
|
||||||
|
pub main_window_width: Option<u32>,
|
||||||
|
pub main_window_height: Option<u32>,
|
||||||
|
pub mini_window_x: Option<i32>,
|
||||||
|
pub mini_window_y: Option<i32>,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Default for Config {
|
||||||
|
fn default() -> Self {
|
||||||
|
Self {
|
||||||
|
// Timer settings
|
||||||
|
break_duration: 5,
|
||||||
|
break_frequency: 25,
|
||||||
|
auto_start: true,
|
||||||
|
|
||||||
|
// Break settings
|
||||||
|
break_title: "Rest your eyes".to_string(),
|
||||||
|
break_message: "Look away from the screen. Stretch and relax.".to_string(),
|
||||||
|
fullscreen_mode: true,
|
||||||
|
strict_mode: false,
|
||||||
|
allow_end_early: true,
|
||||||
|
immediately_start_breaks: false,
|
||||||
|
|
||||||
|
// Working hours
|
||||||
|
working_hours_enabled: false,
|
||||||
|
working_hours_schedule: vec![
|
||||||
|
DaySchedule::default(), // Monday
|
||||||
|
DaySchedule::default(), // Tuesday
|
||||||
|
DaySchedule::default(), // Wednesday
|
||||||
|
DaySchedule::default(), // Thursday
|
||||||
|
DaySchedule::default(), // Friday
|
||||||
|
DaySchedule::weekend_default(), // Saturday
|
||||||
|
DaySchedule::weekend_default(), // Sunday
|
||||||
|
],
|
||||||
|
|
||||||
|
// Appearance
|
||||||
|
dark_mode: true,
|
||||||
|
color_scheme: "Ocean".to_string(),
|
||||||
|
backdrop_opacity: 0.92,
|
||||||
|
|
||||||
|
// Notifications
|
||||||
|
notification_enabled: true,
|
||||||
|
notification_before_break: 30,
|
||||||
|
|
||||||
|
// Advanced
|
||||||
|
snooze_duration: 5,
|
||||||
|
snooze_limit: 3,
|
||||||
|
skip_cooldown: 60,
|
||||||
|
|
||||||
|
// Sound
|
||||||
|
sound_enabled: true,
|
||||||
|
sound_volume: 70,
|
||||||
|
sound_preset: "bell".to_string(),
|
||||||
|
|
||||||
|
// Idle detection
|
||||||
|
idle_detection_enabled: true,
|
||||||
|
idle_timeout: 120,
|
||||||
|
|
||||||
|
// Smart breaks
|
||||||
|
smart_breaks_enabled: true,
|
||||||
|
smart_break_threshold: 300, // 5 minutes
|
||||||
|
smart_break_count_stats: false,
|
||||||
|
|
||||||
|
// Break activities
|
||||||
|
show_break_activities: true,
|
||||||
|
|
||||||
|
// UI
|
||||||
|
ui_zoom: 100,
|
||||||
|
accent_color: "#ff4d00".to_string(),
|
||||||
|
break_color: "#7c6aef".to_string(),
|
||||||
|
countdown_font: String::new(),
|
||||||
|
background_blobs_enabled: false,
|
||||||
|
|
||||||
|
// Mini mode
|
||||||
|
mini_click_through: true,
|
||||||
|
mini_hover_threshold: 3.0,
|
||||||
|
|
||||||
|
// Window positions
|
||||||
|
main_window_x: None,
|
||||||
|
main_window_y: None,
|
||||||
|
main_window_width: None,
|
||||||
|
main_window_height: None,
|
||||||
|
mini_window_x: None,
|
||||||
|
mini_window_y: None,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Config {
|
||||||
|
/// Get the path to the config file (portable: next to the exe)
|
||||||
|
fn config_path() -> Result<PathBuf> {
|
||||||
|
let exe_path = std::env::current_exe().context("Failed to determine exe path")?;
|
||||||
|
let exe_dir = exe_path.parent().context("Failed to determine exe directory")?;
|
||||||
|
Ok(exe_dir.join("config.json"))
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Load configuration from file, or return default if it doesn't exist
|
||||||
|
pub fn load_or_default() -> Self {
|
||||||
|
match Self::load() {
|
||||||
|
Ok(config) => config,
|
||||||
|
Err(e) => {
|
||||||
|
eprintln!("Failed to load config, using defaults: {}", e);
|
||||||
|
let default = Self::default();
|
||||||
|
// Try to save the default config
|
||||||
|
if let Err(save_err) = default.save() {
|
||||||
|
eprintln!("Failed to save default config: {}", save_err);
|
||||||
|
}
|
||||||
|
default
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Load configuration from file
|
||||||
|
pub fn load() -> Result<Self> {
|
||||||
|
let config_path = Self::config_path()?;
|
||||||
|
|
||||||
|
if !config_path.exists() {
|
||||||
|
return Err(anyhow::anyhow!("Config file does not exist"));
|
||||||
|
}
|
||||||
|
|
||||||
|
let config_content =
|
||||||
|
fs::read_to_string(&config_path).context("Failed to read config file")?;
|
||||||
|
|
||||||
|
let config: Config =
|
||||||
|
serde_json::from_str(&config_content).context("Failed to parse config file")?;
|
||||||
|
|
||||||
|
// Validate and sanitize the loaded config
|
||||||
|
Ok(config.validate())
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Save configuration to file
|
||||||
|
pub fn save(&self) -> Result<()> {
|
||||||
|
let config_path = Self::config_path()?;
|
||||||
|
|
||||||
|
let config_content =
|
||||||
|
serde_json::to_string_pretty(self).context("Failed to serialize config")?;
|
||||||
|
|
||||||
|
fs::write(&config_path, config_content).context("Failed to write config file")?;
|
||||||
|
|
||||||
|
Ok(())
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Validate and sanitize configuration values
|
||||||
|
pub fn validate(mut self) -> Self {
|
||||||
|
// Break duration: 1-60 minutes
|
||||||
|
self.break_duration = self.break_duration.clamp(1, 60);
|
||||||
|
|
||||||
|
// Break frequency: 5-120 minutes
|
||||||
|
self.break_frequency = self.break_frequency.clamp(5, 120);
|
||||||
|
|
||||||
|
// Notification before break: 0-300 seconds (0 = disabled)
|
||||||
|
self.notification_before_break = self.notification_before_break.clamp(0, 300);
|
||||||
|
|
||||||
|
// Snooze duration: 1-30 minutes
|
||||||
|
self.snooze_duration = self.snooze_duration.clamp(1, 30);
|
||||||
|
|
||||||
|
// Snooze limit: 0-5 (0 = unlimited)
|
||||||
|
self.snooze_limit = self.snooze_limit.clamp(0, 5);
|
||||||
|
|
||||||
|
// Skip cooldown: 0-600 seconds (0 = disabled)
|
||||||
|
self.skip_cooldown = self.skip_cooldown.clamp(0, 600);
|
||||||
|
|
||||||
|
// Backdrop opacity: 0.5-1.0
|
||||||
|
self.backdrop_opacity = self.backdrop_opacity.clamp(0.5, 1.0);
|
||||||
|
|
||||||
|
// Validate break title
|
||||||
|
if self.break_title.is_empty() {
|
||||||
|
self.break_title = "Rest your eyes".to_string();
|
||||||
|
} else if self.break_title.len() > 100 {
|
||||||
|
self.break_title.truncate(100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate working hours schedule
|
||||||
|
if self.working_hours_schedule.len() != 7 {
|
||||||
|
// Reset to default if invalid
|
||||||
|
self.working_hours_schedule = vec![
|
||||||
|
DaySchedule::default(), // Monday
|
||||||
|
DaySchedule::default(), // Tuesday
|
||||||
|
DaySchedule::default(), // Wednesday
|
||||||
|
DaySchedule::default(), // Thursday
|
||||||
|
DaySchedule::default(), // Friday
|
||||||
|
DaySchedule::weekend_default(), // Saturday
|
||||||
|
DaySchedule::weekend_default(), // Sunday
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate each day's ranges
|
||||||
|
for day in &mut self.working_hours_schedule {
|
||||||
|
// Ensure at least one range
|
||||||
|
if day.ranges.is_empty() {
|
||||||
|
day.ranges.push(TimeRange::default());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate each range
|
||||||
|
for range in &mut day.ranges {
|
||||||
|
if !Self::is_valid_time_format(&range.start) {
|
||||||
|
range.start = "09:00".to_string();
|
||||||
|
}
|
||||||
|
if !Self::is_valid_time_format(&range.end) {
|
||||||
|
range.end = "18:00".to_string();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure start < end
|
||||||
|
let start_mins = Self::time_to_minutes(&range.start);
|
||||||
|
let end_mins = Self::time_to_minutes(&range.end);
|
||||||
|
if start_mins >= end_mins {
|
||||||
|
range.end = "18:00".to_string();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate color scheme
|
||||||
|
let valid_schemes = vec!["Ocean", "Forest", "Sunset", "Midnight", "Dawn"];
|
||||||
|
if !valid_schemes.contains(&self.color_scheme.as_str()) {
|
||||||
|
self.color_scheme = "Ocean".to_string();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sound volume: 0-100
|
||||||
|
self.sound_volume = self.sound_volume.clamp(0, 100);
|
||||||
|
|
||||||
|
// Validate sound preset
|
||||||
|
let valid_presets = vec![
|
||||||
|
"bell", "chime", "soft", "digital", "harp", "bowl", "rain", "whistle",
|
||||||
|
];
|
||||||
|
if !valid_presets.contains(&self.sound_preset.as_str()) {
|
||||||
|
self.sound_preset = "bell".to_string();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Idle timeout: 30-600 seconds
|
||||||
|
self.idle_timeout = self.idle_timeout.clamp(30, 600);
|
||||||
|
|
||||||
|
// Smart break threshold: 120-900 seconds (2-15 minutes)
|
||||||
|
self.smart_break_threshold = self.smart_break_threshold.clamp(120, 900);
|
||||||
|
|
||||||
|
// Mini hover threshold: 1.0-10.0 seconds
|
||||||
|
self.mini_hover_threshold = self.mini_hover_threshold.clamp(1.0, 10.0);
|
||||||
|
|
||||||
|
// UI zoom: 50-200%
|
||||||
|
self.ui_zoom = self.ui_zoom.clamp(50, 200);
|
||||||
|
|
||||||
|
// Validate color hex strings
|
||||||
|
if !Self::is_valid_hex_color(&self.accent_color) {
|
||||||
|
self.accent_color = "#ff4d00".to_string();
|
||||||
|
}
|
||||||
|
if !Self::is_valid_hex_color(&self.break_color) {
|
||||||
|
self.break_color = "#7c6aef".to_string();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate break message length
|
||||||
|
if self.break_message.is_empty() {
|
||||||
|
self.break_message = "Time for a break! Stretch and relax your eyes.".to_string();
|
||||||
|
} else if self.break_message.len() > 500 {
|
||||||
|
self.break_message.truncate(500);
|
||||||
|
}
|
||||||
|
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Check if a time string is in valid HH:MM format
|
||||||
|
fn is_valid_time_format(time: &str) -> bool {
|
||||||
|
let parts: Vec<&str> = time.split(':').collect();
|
||||||
|
if parts.len() != 2 {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if let (Ok(hours), Ok(minutes)) = (parts[0].parse::<u8>(), parts[1].parse::<u8>()) {
|
||||||
|
hours < 24 && minutes < 60
|
||||||
|
} else {
|
||||||
|
false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Convert HH:MM time string to minutes since midnight
|
||||||
|
pub fn time_to_minutes(time: &str) -> u32 {
|
||||||
|
let parts: Vec<&str> = time.split(':').collect();
|
||||||
|
if parts.len() != 2 {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
let hours = parts[0].parse::<u32>().unwrap_or(0);
|
||||||
|
let minutes = parts[1].parse::<u32>().unwrap_or(0);
|
||||||
|
hours * 60 + minutes
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Check if a string is a valid hex color (#RRGGBB)
|
||||||
|
fn is_valid_hex_color(color: &str) -> bool {
|
||||||
|
color.len() == 7
|
||||||
|
&& color.starts_with('#')
|
||||||
|
&& color[1..].chars().all(|c| c.is_ascii_hexdigit())
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Get break duration in seconds
|
||||||
|
pub fn break_duration_seconds(&self) -> u64 {
|
||||||
|
self.break_duration as u64 * 60
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Get break frequency in seconds
|
||||||
|
pub fn break_frequency_seconds(&self) -> u64 {
|
||||||
|
self.break_frequency as u64 * 60
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Get snooze duration in seconds
|
||||||
|
pub fn snooze_duration_seconds(&self) -> u64 {
|
||||||
|
self.snooze_duration as u64 * 60
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Reset to default values
|
||||||
|
pub fn reset_to_default(&mut self) {
|
||||||
|
*self = Self::default();
|
||||||
|
}
|
||||||
|
}
|
||||||
688
src-tauri/src/lib.rs
Normal file
688
src-tauri/src/lib.rs
Normal file
@@ -0,0 +1,688 @@
|
|||||||
|
mod config;
|
||||||
|
mod stats;
|
||||||
|
mod timer;
|
||||||
|
|
||||||
|
use config::Config;
|
||||||
|
use stats::Stats;
|
||||||
|
use std::sync::{Arc, Mutex};
|
||||||
|
use std::time::Duration;
|
||||||
|
use tauri::{
|
||||||
|
image::Image,
|
||||||
|
menu::{MenuBuilder, MenuItemBuilder},
|
||||||
|
tray::{TrayIcon, TrayIconBuilder},
|
||||||
|
AppHandle, Emitter, Manager, State,
|
||||||
|
};
|
||||||
|
use tauri_plugin_notification::NotificationExt;
|
||||||
|
use timer::{AppView, TickResult, TimerManager, TimerSnapshot};
|
||||||
|
|
||||||
|
pub struct AppState {
|
||||||
|
pub timer: Arc<Mutex<TimerManager>>,
|
||||||
|
pub stats: Arc<Mutex<Stats>>,
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Tauri Commands ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn get_config(state: State<AppState>) -> Config {
|
||||||
|
let timer = state.timer.lock().unwrap();
|
||||||
|
timer.pending_config.clone()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn save_config(state: State<AppState>, config: Config) -> Result<(), String> {
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
timer.update_config(config);
|
||||||
|
timer.save_config()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn update_pending_config(app: AppHandle, state: State<AppState>, config: Config) {
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
timer.update_config(config);
|
||||||
|
// Notify all windows (break, mini) so they can pick up live config changes
|
||||||
|
let _ = app.emit("config-changed", &());
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn reset_config(state: State<AppState>) -> Config {
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
timer.reset_config();
|
||||||
|
timer.pending_config.clone()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn toggle_timer(state: State<AppState>) -> TimerSnapshot {
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
timer.toggle_timer();
|
||||||
|
timer.snapshot()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn start_break_now(app: AppHandle, state: State<AppState>) -> TimerSnapshot {
|
||||||
|
let (snapshot, fullscreen_mode) = {
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
let payload = timer.start_break_now();
|
||||||
|
let fm = payload.as_ref().map(|p| p.fullscreen_mode);
|
||||||
|
(timer.snapshot(), fm)
|
||||||
|
};
|
||||||
|
// Window creation must happen after dropping the mutex
|
||||||
|
if let Some(fm) = fullscreen_mode {
|
||||||
|
handle_break_start(&app, fm);
|
||||||
|
}
|
||||||
|
snapshot
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn cancel_break(app: AppHandle, state: State<AppState>) -> TimerSnapshot {
|
||||||
|
let (snapshot, should_end) = {
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
let was_break = timer.state == timer::TimerState::BreakActive;
|
||||||
|
timer.cancel_break();
|
||||||
|
let ended = was_break && timer.state != timer::TimerState::BreakActive;
|
||||||
|
if ended {
|
||||||
|
let mut s = state.stats.lock().unwrap();
|
||||||
|
s.record_break_skipped();
|
||||||
|
}
|
||||||
|
(timer.snapshot(), ended)
|
||||||
|
};
|
||||||
|
if should_end {
|
||||||
|
handle_break_end(&app);
|
||||||
|
}
|
||||||
|
snapshot
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn snooze(app: AppHandle, state: State<AppState>) -> TimerSnapshot {
|
||||||
|
let (snapshot, should_end) = {
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
let was_break = timer.state == timer::TimerState::BreakActive;
|
||||||
|
timer.snooze();
|
||||||
|
let ended = was_break && timer.state != timer::TimerState::BreakActive;
|
||||||
|
if ended {
|
||||||
|
let mut s = state.stats.lock().unwrap();
|
||||||
|
s.record_break_snoozed();
|
||||||
|
}
|
||||||
|
(timer.snapshot(), ended)
|
||||||
|
};
|
||||||
|
if should_end {
|
||||||
|
handle_break_end(&app);
|
||||||
|
}
|
||||||
|
snapshot
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn get_timer_state(state: State<AppState>) -> TimerSnapshot {
|
||||||
|
let timer = state.timer.lock().unwrap();
|
||||||
|
timer.snapshot()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn set_view(state: State<AppState>, view: AppView) {
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
timer.set_view(view);
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn get_stats(state: State<AppState>) -> stats::StatsSnapshot {
|
||||||
|
let s = state.stats.lock().unwrap();
|
||||||
|
s.snapshot()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn get_daily_history(state: State<AppState>, days: u32) -> Vec<stats::DayRecord> {
|
||||||
|
let s = state.stats.lock().unwrap();
|
||||||
|
s.recent_days(days)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Cursor / Window Position Commands ────────────────────────────────────
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn get_cursor_position() -> (i32, i32) {
|
||||||
|
#[cfg(windows)]
|
||||||
|
{
|
||||||
|
use winapi::shared::windef::POINT;
|
||||||
|
use winapi::um::winuser::GetCursorPos;
|
||||||
|
let mut point = POINT { x: 0, y: 0 };
|
||||||
|
unsafe {
|
||||||
|
GetCursorPos(&mut point);
|
||||||
|
}
|
||||||
|
(point.x, point.y)
|
||||||
|
}
|
||||||
|
#[cfg(not(windows))]
|
||||||
|
{
|
||||||
|
(0, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn save_window_position(
|
||||||
|
state: State<AppState>,
|
||||||
|
label: String,
|
||||||
|
x: i32,
|
||||||
|
y: i32,
|
||||||
|
width: u32,
|
||||||
|
height: u32,
|
||||||
|
) {
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
match label.as_str() {
|
||||||
|
"main" => {
|
||||||
|
timer.pending_config.main_window_x = Some(x);
|
||||||
|
timer.pending_config.main_window_y = Some(y);
|
||||||
|
timer.pending_config.main_window_width = Some(width);
|
||||||
|
timer.pending_config.main_window_height = Some(height);
|
||||||
|
}
|
||||||
|
"mini" => {
|
||||||
|
timer.pending_config.mini_window_x = Some(x);
|
||||||
|
timer.pending_config.mini_window_y = Some(y);
|
||||||
|
}
|
||||||
|
_ => {}
|
||||||
|
}
|
||||||
|
let _ = timer.save_config();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Dynamic Tray Icon Rendering ────────────────────────────────────────────
|
||||||
|
|
||||||
|
/// Parse a "#RRGGBB" hex color string into (r, g, b). Falls back to fallback on invalid input.
|
||||||
|
fn parse_hex_color(hex: &str, fallback: (u8, u8, u8)) -> (u8, u8, u8) {
|
||||||
|
if hex.len() == 7 && hex.starts_with('#') {
|
||||||
|
let r = u8::from_str_radix(&hex[1..3], 16).unwrap_or(fallback.0);
|
||||||
|
let g = u8::from_str_radix(&hex[3..5], 16).unwrap_or(fallback.1);
|
||||||
|
let b = u8::from_str_radix(&hex[5..7], 16).unwrap_or(fallback.2);
|
||||||
|
(r, g, b)
|
||||||
|
} else {
|
||||||
|
fallback
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Render a 32x32 RGBA icon with a progress arc using the given accent/break colors.
|
||||||
|
fn render_tray_icon(
|
||||||
|
progress: f64,
|
||||||
|
is_break: bool,
|
||||||
|
is_paused: bool,
|
||||||
|
accent: (u8, u8, u8),
|
||||||
|
break_color: (u8, u8, u8),
|
||||||
|
) -> Vec<u8> {
|
||||||
|
let size: usize = 32;
|
||||||
|
let mut rgba = vec![0u8; size * size * 4];
|
||||||
|
let center = size as f64 / 2.0;
|
||||||
|
let outer_r = center - 1.0;
|
||||||
|
let inner_r = outer_r - 4.0;
|
||||||
|
|
||||||
|
let arc_color = if is_break { break_color } else { accent };
|
||||||
|
|
||||||
|
for y in 0..size {
|
||||||
|
for x in 0..size {
|
||||||
|
let dx = x as f64 - center;
|
||||||
|
let dy = y as f64 - center;
|
||||||
|
let dist = (dx * dx + dy * dy).sqrt();
|
||||||
|
|
||||||
|
let idx = (y * size + x) * 4;
|
||||||
|
|
||||||
|
if dist >= inner_r && dist <= outer_r {
|
||||||
|
// Determine angle (0 at top, clockwise)
|
||||||
|
let angle = (dx.atan2(-dy) + std::f64::consts::PI) / (2.0 * std::f64::consts::PI);
|
||||||
|
|
||||||
|
let in_arc = angle <= progress;
|
||||||
|
|
||||||
|
if in_arc {
|
||||||
|
rgba[idx] = arc_color.0;
|
||||||
|
rgba[idx + 1] = arc_color.1;
|
||||||
|
rgba[idx + 2] = arc_color.2;
|
||||||
|
rgba[idx + 3] = 255;
|
||||||
|
} else {
|
||||||
|
// Background ring
|
||||||
|
rgba[idx] = 60;
|
||||||
|
rgba[idx + 1] = 60;
|
||||||
|
rgba[idx + 2] = 60;
|
||||||
|
rgba[idx + 3] = if is_paused { 100 } else { 180 };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
rgba
|
||||||
|
}
|
||||||
|
|
||||||
|
fn update_tray(
|
||||||
|
tray: &TrayIcon,
|
||||||
|
snapshot: &TimerSnapshot,
|
||||||
|
accent: (u8, u8, u8),
|
||||||
|
break_color: (u8, u8, u8),
|
||||||
|
) {
|
||||||
|
// Update tooltip
|
||||||
|
let tooltip = match snapshot.state {
|
||||||
|
timer::TimerState::Running => {
|
||||||
|
let m = snapshot.time_remaining / 60;
|
||||||
|
let s = snapshot.time_remaining % 60;
|
||||||
|
format!("Core Cooldown — {:02}:{:02} until break", m, s)
|
||||||
|
}
|
||||||
|
timer::TimerState::Paused => {
|
||||||
|
if snapshot.idle_paused {
|
||||||
|
"Core Cooldown — Paused (idle)".to_string()
|
||||||
|
} else {
|
||||||
|
"Core Cooldown — Paused".to_string()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
timer::TimerState::BreakActive => {
|
||||||
|
let m = snapshot.break_time_remaining / 60;
|
||||||
|
let s = snapshot.break_time_remaining % 60;
|
||||||
|
format!("Core Cooldown — Break {:02}:{:02}", m, s)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
let _ = tray.set_tooltip(Some(&tooltip));
|
||||||
|
|
||||||
|
// Update icon
|
||||||
|
let (progress, is_break, is_paused) = match snapshot.state {
|
||||||
|
timer::TimerState::Running => (snapshot.progress, false, false),
|
||||||
|
timer::TimerState::Paused => (snapshot.progress, false, true),
|
||||||
|
timer::TimerState::BreakActive => (snapshot.break_progress, true, false),
|
||||||
|
};
|
||||||
|
|
||||||
|
let icon_data = render_tray_icon(progress, is_break, is_paused, accent, break_color);
|
||||||
|
let icon = Image::new_owned(icon_data, 32, 32);
|
||||||
|
let _ = tray.set_icon(Some(icon));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── App Builder ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
#[cfg_attr(mobile, tauri::mobile_entry_point)]
|
||||||
|
pub fn run() {
|
||||||
|
tauri::Builder::default()
|
||||||
|
.plugin(tauri_plugin_shell::init())
|
||||||
|
.plugin(tauri_plugin_notification::init())
|
||||||
|
.plugin(tauri_plugin_global_shortcut::Builder::new().build())
|
||||||
|
.setup(|app| {
|
||||||
|
// Portable data directory for WebView2 data (next to the exe)
|
||||||
|
let data_dir = std::env::current_exe()
|
||||||
|
.ok()
|
||||||
|
.and_then(|p| p.parent().map(|d| d.join("data")))
|
||||||
|
.unwrap_or_else(|| std::path::PathBuf::from("data"));
|
||||||
|
|
||||||
|
// Create main window (was previously in tauri.conf.json)
|
||||||
|
tauri::WebviewWindowBuilder::new(
|
||||||
|
app,
|
||||||
|
"main",
|
||||||
|
tauri::WebviewUrl::App("index.html".into()),
|
||||||
|
)
|
||||||
|
.title("Core Cooldown")
|
||||||
|
.inner_size(480.0, 700.0)
|
||||||
|
.decorations(false)
|
||||||
|
.transparent(true)
|
||||||
|
.shadow(true)
|
||||||
|
.data_directory(data_dir.clone())
|
||||||
|
.build()?;
|
||||||
|
|
||||||
|
// Create break window (hidden, was previously in tauri.conf.json)
|
||||||
|
tauri::WebviewWindowBuilder::new(
|
||||||
|
app,
|
||||||
|
"break",
|
||||||
|
tauri::WebviewUrl::App("index.html?break=1".into()),
|
||||||
|
)
|
||||||
|
.title("Core Cooldown \u{2014} Break")
|
||||||
|
.inner_size(900.0, 540.0)
|
||||||
|
.decorations(false)
|
||||||
|
.transparent(true)
|
||||||
|
.shadow(false)
|
||||||
|
.always_on_top(true)
|
||||||
|
.skip_taskbar(true)
|
||||||
|
.resizable(false)
|
||||||
|
.visible(false)
|
||||||
|
.center()
|
||||||
|
.data_directory(data_dir.clone())
|
||||||
|
.build()?;
|
||||||
|
|
||||||
|
let timer_manager = TimerManager::new();
|
||||||
|
let loaded_stats = Stats::load_or_default();
|
||||||
|
let state = AppState {
|
||||||
|
timer: Arc::new(Mutex::new(timer_manager)),
|
||||||
|
stats: Arc::new(Mutex::new(loaded_stats)),
|
||||||
|
};
|
||||||
|
app.manage(state);
|
||||||
|
|
||||||
|
// Restore saved window position
|
||||||
|
{
|
||||||
|
let st = app.state::<AppState>();
|
||||||
|
let timer = st.timer.lock().unwrap();
|
||||||
|
let cfg = &timer.pending_config;
|
||||||
|
if let (Some(x), Some(y)) = (cfg.main_window_x, cfg.main_window_y) {
|
||||||
|
if let Some(win) = app.get_webview_window("main") {
|
||||||
|
let _ = win.set_position(tauri::Position::Physical(
|
||||||
|
tauri::PhysicalPosition::new(x, y),
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if let (Some(w), Some(h)) = (cfg.main_window_width, cfg.main_window_height) {
|
||||||
|
if let Some(win) = app.get_webview_window("main") {
|
||||||
|
let _ = win.set_size(tauri::Size::Physical(tauri::PhysicalSize::new(w, h)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up system tray
|
||||||
|
let tray = setup_tray(app.handle())?;
|
||||||
|
|
||||||
|
// Set up global shortcuts
|
||||||
|
setup_shortcuts(app.handle());
|
||||||
|
|
||||||
|
// Start the timer tick thread
|
||||||
|
let handle = app.handle().clone();
|
||||||
|
let timer_ref = app.state::<AppState>().timer.clone();
|
||||||
|
let stats_ref = app.state::<AppState>().stats.clone();
|
||||||
|
std::thread::spawn(move || {
|
||||||
|
loop {
|
||||||
|
std::thread::sleep(Duration::from_secs(1));
|
||||||
|
|
||||||
|
let (tick_result, snapshot, accent_hex, break_hex) = {
|
||||||
|
let mut timer = timer_ref.lock().unwrap();
|
||||||
|
let result = timer.tick();
|
||||||
|
let snap = timer.snapshot();
|
||||||
|
let ac = timer.config.accent_color.clone();
|
||||||
|
let bc = timer.config.break_color.clone();
|
||||||
|
(result, snap, ac, bc)
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update tray icon and tooltip with configured colors
|
||||||
|
let accent = parse_hex_color(&accent_hex, (255, 77, 0));
|
||||||
|
let break_c = parse_hex_color(&break_hex, (124, 106, 239));
|
||||||
|
update_tray(&tray, &snapshot, accent, break_c);
|
||||||
|
|
||||||
|
// Emit tick event with full snapshot
|
||||||
|
let _ = handle.emit("timer-tick", &snapshot);
|
||||||
|
|
||||||
|
// Emit specific events for state transitions
|
||||||
|
match tick_result {
|
||||||
|
TickResult::BreakStarted(payload) => {
|
||||||
|
handle_break_start(&handle, payload.fullscreen_mode);
|
||||||
|
let _ = handle.emit("break-started", &payload);
|
||||||
|
}
|
||||||
|
TickResult::BreakEnded => {
|
||||||
|
// Restore normal window state and close break window
|
||||||
|
handle_break_end(&handle);
|
||||||
|
// Record completed break in stats
|
||||||
|
{
|
||||||
|
let timer = timer_ref.lock().unwrap();
|
||||||
|
let mut s = stats_ref.lock().unwrap();
|
||||||
|
s.record_break_completed(timer.break_total_duration);
|
||||||
|
}
|
||||||
|
let _ = handle
|
||||||
|
.notification()
|
||||||
|
.builder()
|
||||||
|
.title("Break complete")
|
||||||
|
.body("Great job! Back to work.")
|
||||||
|
.show();
|
||||||
|
let _ = handle.emit("break-ended", &());
|
||||||
|
}
|
||||||
|
TickResult::PreBreakWarning {
|
||||||
|
seconds_until_break,
|
||||||
|
} => {
|
||||||
|
let secs = seconds_until_break;
|
||||||
|
let msg = if secs >= 60 {
|
||||||
|
format!(
|
||||||
|
"Break in {} minute{}",
|
||||||
|
secs / 60,
|
||||||
|
if secs / 60 == 1 { "" } else { "s" }
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
format!("Break in {} seconds", secs)
|
||||||
|
};
|
||||||
|
let _ = handle
|
||||||
|
.notification()
|
||||||
|
.builder()
|
||||||
|
.title("Core Cooldown")
|
||||||
|
.body(&msg)
|
||||||
|
.show();
|
||||||
|
let _ = handle.emit("prebreak-warning", &secs);
|
||||||
|
}
|
||||||
|
TickResult::NaturalBreakDetected { duration_seconds } => {
|
||||||
|
// Record natural break in stats if enabled
|
||||||
|
{
|
||||||
|
let timer = timer_ref.lock().unwrap();
|
||||||
|
if timer.config.smart_break_count_stats {
|
||||||
|
let mut s = stats_ref.lock().unwrap();
|
||||||
|
s.record_natural_break(duration_seconds);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let mins = duration_seconds / 60;
|
||||||
|
let msg = if mins >= 1 {
|
||||||
|
format!(
|
||||||
|
"You've been away for {} minute{}. Break timer has been reset.",
|
||||||
|
mins,
|
||||||
|
if mins == 1 { "" } else { "s" }
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
format!(
|
||||||
|
"You've been away for {} seconds. Break timer has been reset.",
|
||||||
|
duration_seconds
|
||||||
|
)
|
||||||
|
};
|
||||||
|
let _ = handle
|
||||||
|
.notification()
|
||||||
|
.builder()
|
||||||
|
.title("Natural break detected")
|
||||||
|
.body(&msg)
|
||||||
|
.show();
|
||||||
|
let _ = handle.emit("natural-break-detected", &duration_seconds);
|
||||||
|
}
|
||||||
|
TickResult::None => {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Ok(())
|
||||||
|
})
|
||||||
|
// Handle window close events - only exit when the main window is closed
|
||||||
|
.on_window_event(|window, event| {
|
||||||
|
if let tauri::WindowEvent::CloseRequested { .. } = event {
|
||||||
|
if window.label() == "main" {
|
||||||
|
window.app_handle().exit(0);
|
||||||
|
}
|
||||||
|
// Mini and break windows just close normally without killing the app
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.invoke_handler(tauri::generate_handler![
|
||||||
|
get_config,
|
||||||
|
save_config,
|
||||||
|
update_pending_config,
|
||||||
|
reset_config,
|
||||||
|
toggle_timer,
|
||||||
|
start_break_now,
|
||||||
|
cancel_break,
|
||||||
|
snooze,
|
||||||
|
get_timer_state,
|
||||||
|
set_view,
|
||||||
|
get_stats,
|
||||||
|
get_daily_history,
|
||||||
|
get_cursor_position,
|
||||||
|
save_window_position,
|
||||||
|
])
|
||||||
|
.run(tauri::generate_context!())
|
||||||
|
.expect("error while running tauri application");
|
||||||
|
}
|
||||||
|
|
||||||
|
fn setup_tray(app: &AppHandle) -> Result<TrayIcon, Box<dyn std::error::Error>> {
|
||||||
|
let show_i = MenuItemBuilder::with_id("show", "Show").build(app)?;
|
||||||
|
let pause_i = MenuItemBuilder::with_id("pause", "Pause/Resume").build(app)?;
|
||||||
|
let mini_i = MenuItemBuilder::with_id("mini", "Mini Mode").build(app)?;
|
||||||
|
let quit_i = MenuItemBuilder::with_id("quit", "Quit").build(app)?;
|
||||||
|
|
||||||
|
let menu = MenuBuilder::new(app)
|
||||||
|
.item(&show_i)
|
||||||
|
.item(&pause_i)
|
||||||
|
.item(&mini_i)
|
||||||
|
.separator()
|
||||||
|
.item(&quit_i)
|
||||||
|
.build()?;
|
||||||
|
|
||||||
|
let tray = TrayIconBuilder::new()
|
||||||
|
.menu(&menu)
|
||||||
|
.tooltip("Core Cooldown")
|
||||||
|
.on_menu_event(move |app, event| match event.id().as_ref() {
|
||||||
|
"show" => {
|
||||||
|
if let Some(window) = app.get_webview_window("main") {
|
||||||
|
let _ = window.show();
|
||||||
|
let _ = window.unminimize();
|
||||||
|
let _ = window.set_focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
"pause" => {
|
||||||
|
let state: State<AppState> = app.state();
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
timer.toggle_timer();
|
||||||
|
}
|
||||||
|
"mini" => {
|
||||||
|
toggle_mini_window(app);
|
||||||
|
}
|
||||||
|
"quit" => {
|
||||||
|
app.exit(0);
|
||||||
|
}
|
||||||
|
_ => {}
|
||||||
|
})
|
||||||
|
.on_tray_icon_event(|tray, event| {
|
||||||
|
if let tauri::tray::TrayIconEvent::Click {
|
||||||
|
button: tauri::tray::MouseButton::Left,
|
||||||
|
..
|
||||||
|
} = event
|
||||||
|
{
|
||||||
|
let app = tray.app_handle();
|
||||||
|
if let Some(window) = app.get_webview_window("main") {
|
||||||
|
let _ = window.show();
|
||||||
|
let _ = window.unminimize();
|
||||||
|
let _ = window.set_focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.build(app)?;
|
||||||
|
|
||||||
|
Ok(tray)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Global Shortcuts ───────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
fn setup_shortcuts(app: &AppHandle) {
|
||||||
|
use tauri_plugin_global_shortcut::GlobalShortcutExt;
|
||||||
|
|
||||||
|
let _ = app
|
||||||
|
.global_shortcut()
|
||||||
|
.on_shortcut("Ctrl+Shift+P", move |_app, _shortcut, event| {
|
||||||
|
if event.state == tauri_plugin_global_shortcut::ShortcutState::Pressed {
|
||||||
|
let state: State<AppState> = _app.state();
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
timer.toggle_timer();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let _ = app
|
||||||
|
.global_shortcut()
|
||||||
|
.on_shortcut("Ctrl+Shift+B", move |_app, _shortcut, event| {
|
||||||
|
if event.state == tauri_plugin_global_shortcut::ShortcutState::Pressed {
|
||||||
|
let state: State<AppState> = _app.state();
|
||||||
|
let mut timer = state.timer.lock().unwrap();
|
||||||
|
let payload = timer.start_break_now();
|
||||||
|
if let Some(ref p) = payload {
|
||||||
|
handle_break_start(_app, p.fullscreen_mode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let _ = app
|
||||||
|
.global_shortcut()
|
||||||
|
.on_shortcut("Ctrl+Shift+S", move |_app, _shortcut, event| {
|
||||||
|
if event.state == tauri_plugin_global_shortcut::ShortcutState::Pressed {
|
||||||
|
if let Some(window) = _app.get_webview_window("main") {
|
||||||
|
if window.is_visible().unwrap_or(false) {
|
||||||
|
let _ = window.hide();
|
||||||
|
} else {
|
||||||
|
let _ = window.show();
|
||||||
|
let _ = window.unminimize();
|
||||||
|
let _ = window.set_focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Break Window ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
fn open_break_window(app: &AppHandle) {
|
||||||
|
if let Some(win) = app.get_webview_window("break") {
|
||||||
|
let _ = win.show();
|
||||||
|
let _ = win.set_focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn close_break_window(app: &AppHandle) {
|
||||||
|
if let Some(win) = app.get_webview_window("break") {
|
||||||
|
let _ = win.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Handle break start: either fullscreen on main window, or open a separate modal break window.
|
||||||
|
fn handle_break_start(app: &AppHandle, fullscreen_mode: bool) {
|
||||||
|
if fullscreen_mode {
|
||||||
|
// Fullscreen: show break inside the main window
|
||||||
|
if let Some(window) = app.get_webview_window("main") {
|
||||||
|
let _ = window.set_always_on_top(true);
|
||||||
|
let _ = window.show();
|
||||||
|
let _ = window.set_focus();
|
||||||
|
let _ = window.set_fullscreen(true);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Modal: open a separate centered break window
|
||||||
|
open_break_window(app);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Handle break end: restore main window state and close break window if open.
|
||||||
|
fn handle_break_end(app: &AppHandle) {
|
||||||
|
if let Some(window) = app.get_webview_window("main") {
|
||||||
|
let _ = window.set_always_on_top(false);
|
||||||
|
let _ = window.set_fullscreen(false);
|
||||||
|
}
|
||||||
|
close_break_window(app);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Mini Mode ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
fn toggle_mini_window(app: &AppHandle) {
|
||||||
|
if let Some(mini) = app.get_webview_window("mini") {
|
||||||
|
// Close existing mini window
|
||||||
|
let _ = mini.close();
|
||||||
|
} else {
|
||||||
|
// Read saved position from config
|
||||||
|
let (mx, my) = {
|
||||||
|
let st: State<AppState> = app.state();
|
||||||
|
let timer = st.timer.lock().unwrap();
|
||||||
|
(
|
||||||
|
timer.pending_config.mini_window_x,
|
||||||
|
timer.pending_config.mini_window_y,
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
// Portable data directory for WebView2
|
||||||
|
let data_dir = std::env::current_exe()
|
||||||
|
.ok()
|
||||||
|
.and_then(|p| p.parent().map(|d| d.join("data")))
|
||||||
|
.unwrap_or_else(|| std::path::PathBuf::from("data"));
|
||||||
|
|
||||||
|
// Create mini window
|
||||||
|
let mut builder = tauri::WebviewWindowBuilder::new(
|
||||||
|
app,
|
||||||
|
"mini",
|
||||||
|
tauri::WebviewUrl::App("index.html?mini=1".into()),
|
||||||
|
)
|
||||||
|
.title("Core Cooldown")
|
||||||
|
.inner_size(184.0, 92.0)
|
||||||
|
.decorations(false)
|
||||||
|
.transparent(true)
|
||||||
|
.shadow(false)
|
||||||
|
.always_on_top(true)
|
||||||
|
.skip_taskbar(true)
|
||||||
|
.resizable(false)
|
||||||
|
.data_directory(data_dir);
|
||||||
|
|
||||||
|
if let (Some(x), Some(y)) = (mx, my) {
|
||||||
|
builder = builder.position(x as f64, y as f64);
|
||||||
|
}
|
||||||
|
|
||||||
|
let _ = builder.build();
|
||||||
|
}
|
||||||
|
}
|
||||||
6
src-tauri/src/main.rs
Normal file
6
src-tauri/src/main.rs
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
// Prevents additional console window on Windows in release
|
||||||
|
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
core_cooldown_lib::run()
|
||||||
|
}
|
||||||
199
src-tauri/src/stats.rs
Normal file
199
src-tauri/src/stats.rs
Normal file
@@ -0,0 +1,199 @@
|
|||||||
|
use serde::{Deserialize, Serialize};
|
||||||
|
use std::collections::HashMap;
|
||||||
|
use std::fs;
|
||||||
|
use std::path::PathBuf;
|
||||||
|
|
||||||
|
/// A single day's break statistics.
|
||||||
|
#[derive(Debug, Clone, Serialize, Deserialize, Default)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct DayRecord {
|
||||||
|
pub date: String, // YYYY-MM-DD
|
||||||
|
pub breaks_completed: u32,
|
||||||
|
pub breaks_skipped: u32,
|
||||||
|
pub breaks_snoozed: u32,
|
||||||
|
pub total_break_time_secs: u64,
|
||||||
|
pub natural_breaks: u32,
|
||||||
|
pub natural_break_time_secs: u64,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Persistent stats stored as JSON.
|
||||||
|
#[derive(Debug, Clone, Serialize, Deserialize, Default)]
|
||||||
|
pub struct StatsData {
|
||||||
|
pub days: HashMap<String, DayRecord>,
|
||||||
|
pub current_streak: u32,
|
||||||
|
pub best_streak: u32,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Runtime stats manager.
|
||||||
|
pub struct Stats {
|
||||||
|
pub data: StatsData,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Snapshot sent to the frontend.
|
||||||
|
#[derive(Debug, Clone, Serialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct StatsSnapshot {
|
||||||
|
pub today_completed: u32,
|
||||||
|
pub today_skipped: u32,
|
||||||
|
pub today_snoozed: u32,
|
||||||
|
pub today_break_time_secs: u64,
|
||||||
|
pub today_natural_breaks: u32,
|
||||||
|
pub today_natural_break_time_secs: u64,
|
||||||
|
pub compliance_rate: f64,
|
||||||
|
pub current_streak: u32,
|
||||||
|
pub best_streak: u32,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Stats {
|
||||||
|
/// Portable: stats file lives next to the exe
|
||||||
|
fn stats_path() -> Option<PathBuf> {
|
||||||
|
let exe_path = std::env::current_exe().ok()?;
|
||||||
|
let exe_dir = exe_path.parent()?;
|
||||||
|
Some(exe_dir.join("stats.json"))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn load_or_default() -> Self {
|
||||||
|
let data = if let Some(path) = Self::stats_path() {
|
||||||
|
if path.exists() {
|
||||||
|
fs::read_to_string(&path)
|
||||||
|
.ok()
|
||||||
|
.and_then(|s| serde_json::from_str(&s).ok())
|
||||||
|
.unwrap_or_default()
|
||||||
|
} else {
|
||||||
|
StatsData::default()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
StatsData::default()
|
||||||
|
};
|
||||||
|
Stats { data }
|
||||||
|
}
|
||||||
|
|
||||||
|
fn save(&self) {
|
||||||
|
if let Some(path) = Self::stats_path() {
|
||||||
|
if let Ok(json) = serde_json::to_string_pretty(&self.data) {
|
||||||
|
let _ = fs::write(path, json);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn today_key() -> String {
|
||||||
|
chrono::Local::now().format("%Y-%m-%d").to_string()
|
||||||
|
}
|
||||||
|
|
||||||
|
fn today_mut(&mut self) -> &mut DayRecord {
|
||||||
|
let key = Self::today_key();
|
||||||
|
self.data
|
||||||
|
.days
|
||||||
|
.entry(key.clone())
|
||||||
|
.or_insert_with(|| DayRecord {
|
||||||
|
date: key,
|
||||||
|
..Default::default()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn record_break_completed(&mut self, duration_secs: u64) {
|
||||||
|
let day = self.today_mut();
|
||||||
|
day.breaks_completed += 1;
|
||||||
|
day.total_break_time_secs += duration_secs;
|
||||||
|
self.update_streak();
|
||||||
|
self.save();
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn record_break_skipped(&mut self) {
|
||||||
|
let day = self.today_mut();
|
||||||
|
day.breaks_skipped += 1;
|
||||||
|
self.save();
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn record_break_snoozed(&mut self) {
|
||||||
|
let day = self.today_mut();
|
||||||
|
day.breaks_snoozed += 1;
|
||||||
|
self.save();
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn record_natural_break(&mut self, duration_secs: u64) {
|
||||||
|
let day = self.today_mut();
|
||||||
|
day.natural_breaks += 1;
|
||||||
|
day.natural_break_time_secs += duration_secs;
|
||||||
|
self.save();
|
||||||
|
}
|
||||||
|
|
||||||
|
fn update_streak(&mut self) {
|
||||||
|
// Calculate streak: consecutive days with at least 1 break completed
|
||||||
|
let mut streak = 0u32;
|
||||||
|
let today = chrono::Local::now().date_naive();
|
||||||
|
|
||||||
|
for i in 0.. {
|
||||||
|
let day = today - chrono::Duration::days(i);
|
||||||
|
let key = day.format("%Y-%m-%d").to_string();
|
||||||
|
if let Some(record) = self.data.days.get(&key) {
|
||||||
|
if record.breaks_completed > 0 {
|
||||||
|
streak += 1;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if i == 0 {
|
||||||
|
// Today hasn't been recorded yet (but we just did), continue
|
||||||
|
streak += 1;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
self.data.current_streak = streak;
|
||||||
|
if streak > self.data.best_streak {
|
||||||
|
self.data.best_streak = streak;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn snapshot(&self) -> StatsSnapshot {
|
||||||
|
let key = Self::today_key();
|
||||||
|
let today = self.data.days.get(&key);
|
||||||
|
|
||||||
|
let completed = today.map(|d| d.breaks_completed).unwrap_or(0);
|
||||||
|
let skipped = today.map(|d| d.breaks_skipped).unwrap_or(0);
|
||||||
|
let snoozed = today.map(|d| d.breaks_snoozed).unwrap_or(0);
|
||||||
|
let break_time = today.map(|d| d.total_break_time_secs).unwrap_or(0);
|
||||||
|
let natural_breaks = today.map(|d| d.natural_breaks).unwrap_or(0);
|
||||||
|
let natural_break_time = today.map(|d| d.natural_break_time_secs).unwrap_or(0);
|
||||||
|
|
||||||
|
let total = completed + skipped;
|
||||||
|
let compliance = if total > 0 {
|
||||||
|
completed as f64 / total as f64
|
||||||
|
} else {
|
||||||
|
1.0
|
||||||
|
};
|
||||||
|
|
||||||
|
StatsSnapshot {
|
||||||
|
today_completed: completed,
|
||||||
|
today_skipped: skipped,
|
||||||
|
today_snoozed: snoozed,
|
||||||
|
today_break_time_secs: break_time,
|
||||||
|
today_natural_breaks: natural_breaks,
|
||||||
|
today_natural_break_time_secs: natural_break_time,
|
||||||
|
compliance_rate: compliance,
|
||||||
|
current_streak: self.data.current_streak,
|
||||||
|
best_streak: self.data.best_streak,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Get recent N days of history, sorted chronologically.
|
||||||
|
pub fn recent_days(&self, n: u32) -> Vec<DayRecord> {
|
||||||
|
let today = chrono::Local::now().date_naive();
|
||||||
|
let mut records = Vec::new();
|
||||||
|
|
||||||
|
for i in (0..n).rev() {
|
||||||
|
let day = today - chrono::Duration::days(i as i64);
|
||||||
|
let key = day.format("%Y-%m-%d").to_string();
|
||||||
|
let record = self.data.days.get(&key).cloned().unwrap_or(DayRecord {
|
||||||
|
date: key,
|
||||||
|
..Default::default()
|
||||||
|
});
|
||||||
|
records.push(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
records
|
||||||
|
}
|
||||||
|
}
|
||||||
496
src-tauri/src/timer.rs
Normal file
496
src-tauri/src/timer.rs
Normal file
@@ -0,0 +1,496 @@
|
|||||||
|
use crate::config::Config;
|
||||||
|
use chrono::{Datelike, Timelike};
|
||||||
|
use serde::{Deserialize, Serialize};
|
||||||
|
use std::time::Instant;
|
||||||
|
|
||||||
|
#[derive(Debug, Clone, Copy, PartialEq, Serialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub enum TimerState {
|
||||||
|
Running,
|
||||||
|
Paused,
|
||||||
|
BreakActive,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Default for TimerState {
|
||||||
|
fn default() -> Self {
|
||||||
|
Self::Paused
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Clone, Copy, PartialEq, Serialize, Deserialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub enum AppView {
|
||||||
|
Dashboard,
|
||||||
|
BreakScreen,
|
||||||
|
Settings,
|
||||||
|
Stats,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Snapshot of the full timer state, sent to the frontend on every tick
|
||||||
|
#[derive(Debug, Clone, Serialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct TimerSnapshot {
|
||||||
|
pub state: TimerState,
|
||||||
|
pub current_view: AppView,
|
||||||
|
pub time_remaining: u64,
|
||||||
|
pub total_duration: u64,
|
||||||
|
pub progress: f64,
|
||||||
|
pub has_had_break: bool,
|
||||||
|
pub seconds_since_last_break: u64,
|
||||||
|
pub prebreak_warning: bool,
|
||||||
|
pub snoozes_used: u32,
|
||||||
|
pub can_snooze: bool,
|
||||||
|
pub break_title: String,
|
||||||
|
pub break_message: String,
|
||||||
|
pub break_progress: f64,
|
||||||
|
pub break_time_remaining: u64,
|
||||||
|
pub break_total_duration: u64,
|
||||||
|
pub break_past_half: bool,
|
||||||
|
pub settings_modified: bool,
|
||||||
|
pub idle_paused: bool,
|
||||||
|
pub natural_break_occurred: bool,
|
||||||
|
pub smart_breaks_enabled: bool,
|
||||||
|
pub smart_break_threshold: u32,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Events emitted by the timer to the frontend
|
||||||
|
#[derive(Debug, Clone, Serialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct BreakStartedPayload {
|
||||||
|
pub title: String,
|
||||||
|
pub message: String,
|
||||||
|
pub duration: u64,
|
||||||
|
pub strict_mode: bool,
|
||||||
|
pub snooze_duration: u32,
|
||||||
|
pub fullscreen_mode: bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
pub struct TimerManager {
|
||||||
|
pub state: TimerState,
|
||||||
|
pub current_view: AppView,
|
||||||
|
pub config: Config,
|
||||||
|
pub time_until_next_break: u64,
|
||||||
|
pub time_until_break_end: u64,
|
||||||
|
pub break_total_duration: u64,
|
||||||
|
pub snoozes_used: u32,
|
||||||
|
pub seconds_since_last_break: u64,
|
||||||
|
pub has_had_break: bool,
|
||||||
|
pub prebreak_notification_active: bool,
|
||||||
|
pub settings_modified: bool,
|
||||||
|
// Pending config: edited in settings but not yet saved
|
||||||
|
pub pending_config: Config,
|
||||||
|
// Idle detection: true when auto-paused due to inactivity
|
||||||
|
pub idle_paused: bool,
|
||||||
|
// Smart breaks: track when idle started for natural break detection
|
||||||
|
pub idle_start_time: Option<Instant>,
|
||||||
|
pub natural_break_occurred: bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl TimerManager {
|
||||||
|
pub fn new() -> Self {
|
||||||
|
let config = Config::load_or_default();
|
||||||
|
let freq = config.break_frequency_seconds();
|
||||||
|
let pending = config.clone();
|
||||||
|
let auto_start = config.auto_start;
|
||||||
|
|
||||||
|
Self {
|
||||||
|
state: if auto_start {
|
||||||
|
TimerState::Running
|
||||||
|
} else {
|
||||||
|
TimerState::Paused
|
||||||
|
},
|
||||||
|
current_view: AppView::Dashboard,
|
||||||
|
config,
|
||||||
|
time_until_next_break: freq,
|
||||||
|
time_until_break_end: 0,
|
||||||
|
break_total_duration: 0,
|
||||||
|
snoozes_used: 0,
|
||||||
|
seconds_since_last_break: 0,
|
||||||
|
has_had_break: false,
|
||||||
|
prebreak_notification_active: false,
|
||||||
|
settings_modified: false,
|
||||||
|
pending_config: pending,
|
||||||
|
idle_paused: false,
|
||||||
|
idle_start_time: None,
|
||||||
|
natural_break_occurred: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Check idle state and auto-pause/resume accordingly.
|
||||||
|
/// Returns IdleCheckResult indicating what happened.
|
||||||
|
pub fn check_idle(&mut self) -> IdleCheckResult {
|
||||||
|
if !self.config.idle_detection_enabled {
|
||||||
|
// If idle detection disabled but we were idle-paused, resume
|
||||||
|
if self.idle_paused {
|
||||||
|
self.idle_paused = false;
|
||||||
|
self.state = TimerState::Running;
|
||||||
|
}
|
||||||
|
return IdleCheckResult::None;
|
||||||
|
}
|
||||||
|
|
||||||
|
let idle_secs = get_idle_seconds();
|
||||||
|
let threshold = self.config.idle_timeout as u64;
|
||||||
|
|
||||||
|
if idle_secs >= threshold && self.state == TimerState::Running {
|
||||||
|
// Just became idle - record start time for smart breaks
|
||||||
|
if self.idle_start_time.is_none() {
|
||||||
|
self.idle_start_time = Some(Instant::now());
|
||||||
|
}
|
||||||
|
self.idle_paused = true;
|
||||||
|
self.state = TimerState::Paused;
|
||||||
|
IdleCheckResult::JustPaused
|
||||||
|
} else if idle_secs < threshold && self.idle_paused {
|
||||||
|
// Just returned from idle
|
||||||
|
self.idle_paused = false;
|
||||||
|
self.state = TimerState::Running;
|
||||||
|
|
||||||
|
// Check if this was a natural break
|
||||||
|
if let Some(start_time) = self.idle_start_time {
|
||||||
|
let idle_duration = start_time.elapsed().as_secs();
|
||||||
|
self.idle_start_time = None;
|
||||||
|
|
||||||
|
if self.config.smart_breaks_enabled
|
||||||
|
&& self.state != TimerState::BreakActive
|
||||||
|
&& idle_duration >= self.config.smart_break_threshold as u64
|
||||||
|
{
|
||||||
|
// Natural break detected!
|
||||||
|
return IdleCheckResult::NaturalBreakDetected(idle_duration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
IdleCheckResult::JustResumed
|
||||||
|
} else {
|
||||||
|
// Still idle - update idle_start_time if needed
|
||||||
|
if self.state == TimerState::Paused
|
||||||
|
&& self.idle_start_time.is_none()
|
||||||
|
&& idle_secs >= threshold
|
||||||
|
{
|
||||||
|
// We were already paused when idle detection kicked in
|
||||||
|
// Start tracking from now
|
||||||
|
self.idle_start_time = Some(Instant::now());
|
||||||
|
}
|
||||||
|
IdleCheckResult::None
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Called every second. Returns what events should be emitted.
|
||||||
|
pub fn tick(&mut self) -> TickResult {
|
||||||
|
// Idle detection and natural break detection
|
||||||
|
let idle_result = self.check_idle();
|
||||||
|
|
||||||
|
// Handle natural break detection
|
||||||
|
if let IdleCheckResult::NaturalBreakDetected(duration) = idle_result {
|
||||||
|
// Reset the timer completely since they took a natural break
|
||||||
|
self.reset_timer();
|
||||||
|
self.has_had_break = true;
|
||||||
|
self.seconds_since_last_break = 0;
|
||||||
|
self.natural_break_occurred = true;
|
||||||
|
return TickResult::NaturalBreakDetected {
|
||||||
|
duration_seconds: duration,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Track time since last break (always, even when paused)
|
||||||
|
if self.has_had_break && self.state != TimerState::BreakActive {
|
||||||
|
self.seconds_since_last_break += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
match self.state {
|
||||||
|
TimerState::Running => {
|
||||||
|
if !self.is_within_working_hours() {
|
||||||
|
return TickResult::None;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pre-break notification
|
||||||
|
let threshold = self.config.notification_before_break as u64;
|
||||||
|
let fire_prebreak = self.config.notification_enabled
|
||||||
|
&& !self.config.immediately_start_breaks
|
||||||
|
&& threshold > 0
|
||||||
|
&& self.time_until_next_break <= threshold
|
||||||
|
&& !self.prebreak_notification_active;
|
||||||
|
|
||||||
|
if fire_prebreak {
|
||||||
|
self.prebreak_notification_active = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if self.time_until_next_break > 0 {
|
||||||
|
self.time_until_next_break -= 1;
|
||||||
|
if fire_prebreak {
|
||||||
|
TickResult::PreBreakWarning {
|
||||||
|
seconds_until_break: self.time_until_next_break,
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
TickResult::None
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
self.start_break();
|
||||||
|
TickResult::BreakStarted(BreakStartedPayload {
|
||||||
|
title: self.config.break_title.clone(),
|
||||||
|
message: self.config.break_message.clone(),
|
||||||
|
duration: self.break_total_duration,
|
||||||
|
strict_mode: self.config.strict_mode,
|
||||||
|
snooze_duration: self.config.snooze_duration,
|
||||||
|
fullscreen_mode: self.config.fullscreen_mode,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
TimerState::BreakActive => {
|
||||||
|
if self.time_until_break_end > 0 {
|
||||||
|
self.time_until_break_end -= 1;
|
||||||
|
TickResult::None
|
||||||
|
} else {
|
||||||
|
// Break completed naturally
|
||||||
|
self.has_had_break = true;
|
||||||
|
self.seconds_since_last_break = 0;
|
||||||
|
self.reset_timer();
|
||||||
|
TickResult::BreakEnded
|
||||||
|
}
|
||||||
|
}
|
||||||
|
TimerState::Paused => TickResult::None,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn start_break(&mut self) {
|
||||||
|
self.state = TimerState::BreakActive;
|
||||||
|
self.current_view = AppView::BreakScreen;
|
||||||
|
self.break_total_duration = self.config.break_duration_seconds();
|
||||||
|
self.time_until_break_end = self.break_total_duration;
|
||||||
|
self.prebreak_notification_active = false;
|
||||||
|
self.snoozes_used = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn reset_timer(&mut self) {
|
||||||
|
self.state = TimerState::Running;
|
||||||
|
self.current_view = AppView::Dashboard;
|
||||||
|
self.time_until_next_break = self.config.break_frequency_seconds();
|
||||||
|
self.prebreak_notification_active = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn toggle_timer(&mut self) {
|
||||||
|
match self.state {
|
||||||
|
TimerState::Running => {
|
||||||
|
self.state = TimerState::Paused;
|
||||||
|
}
|
||||||
|
TimerState::Paused => {
|
||||||
|
self.state = TimerState::Running;
|
||||||
|
}
|
||||||
|
_ => {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn start_break_now(&mut self) -> Option<BreakStartedPayload> {
|
||||||
|
if self.state == TimerState::Running || self.state == TimerState::Paused {
|
||||||
|
self.start_break();
|
||||||
|
Some(BreakStartedPayload {
|
||||||
|
title: self.config.break_title.clone(),
|
||||||
|
message: self.config.break_message.clone(),
|
||||||
|
duration: self.break_total_duration,
|
||||||
|
strict_mode: self.config.strict_mode,
|
||||||
|
snooze_duration: self.config.snooze_duration,
|
||||||
|
fullscreen_mode: self.config.fullscreen_mode,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
None
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn cancel_break(&mut self) -> bool {
|
||||||
|
if self.state != TimerState::BreakActive {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if self.config.strict_mode {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
let total = self.break_total_duration;
|
||||||
|
let elapsed = total.saturating_sub(self.time_until_break_end);
|
||||||
|
let past_half = total > 0 && elapsed * 2 >= total;
|
||||||
|
|
||||||
|
if past_half && self.config.allow_end_early {
|
||||||
|
// "End break" — counts as completed
|
||||||
|
self.has_had_break = true;
|
||||||
|
self.seconds_since_last_break = 0;
|
||||||
|
self.reset_timer();
|
||||||
|
true
|
||||||
|
} else if !past_half {
|
||||||
|
// "Cancel break" — doesn't count
|
||||||
|
self.reset_timer();
|
||||||
|
true
|
||||||
|
} else {
|
||||||
|
false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn snooze(&mut self) -> bool {
|
||||||
|
if self.config.strict_mode || !self.can_snooze() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
self.snoozes_used += 1;
|
||||||
|
self.time_until_next_break = self.config.snooze_duration_seconds();
|
||||||
|
self.state = TimerState::Running;
|
||||||
|
self.current_view = AppView::Dashboard;
|
||||||
|
self.prebreak_notification_active = false;
|
||||||
|
true
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn can_snooze(&self) -> bool {
|
||||||
|
if self.config.snooze_limit == 0 {
|
||||||
|
return true; // unlimited
|
||||||
|
}
|
||||||
|
self.snoozes_used < self.config.snooze_limit
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn is_within_working_hours(&self) -> bool {
|
||||||
|
if !self.config.working_hours_enabled {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
let now = chrono::Local::now();
|
||||||
|
let day_of_week = now.weekday().num_days_from_monday() as usize; // 0 = Monday, 6 = Sunday
|
||||||
|
let current_minutes = now.hour() * 60 + now.minute();
|
||||||
|
|
||||||
|
// Get the schedule for today
|
||||||
|
if let Some(day_schedule) = self.config.working_hours_schedule.get(day_of_week) {
|
||||||
|
if !day_schedule.enabled {
|
||||||
|
return false; // Day is disabled, timer doesn't run
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if current time falls within any of the time ranges
|
||||||
|
for range in &day_schedule.ranges {
|
||||||
|
let start_mins = Config::time_to_minutes(&range.start);
|
||||||
|
let end_mins = Config::time_to_minutes(&range.end);
|
||||||
|
|
||||||
|
if current_minutes >= start_mins && current_minutes < end_mins {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
false // Not within any time range
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn set_view(&mut self, view: AppView) {
|
||||||
|
self.current_view = view;
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn update_config(&mut self, config: Config) {
|
||||||
|
self.pending_config = config;
|
||||||
|
self.settings_modified = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn save_config(&mut self) -> Result<(), String> {
|
||||||
|
let validated = self.pending_config.clone().validate();
|
||||||
|
validated.save().map_err(|e| e.to_string())?;
|
||||||
|
self.config = validated.clone();
|
||||||
|
self.pending_config = validated;
|
||||||
|
self.settings_modified = false;
|
||||||
|
Ok(())
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn reset_config(&mut self) {
|
||||||
|
self.pending_config = Config::default();
|
||||||
|
self.settings_modified = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn snapshot(&self) -> TimerSnapshot {
|
||||||
|
let total_freq = self.config.break_frequency_seconds();
|
||||||
|
let timer_progress = if total_freq > 0 {
|
||||||
|
self.time_until_next_break as f64 / total_freq as f64
|
||||||
|
} else {
|
||||||
|
0.0
|
||||||
|
};
|
||||||
|
|
||||||
|
let break_elapsed = self
|
||||||
|
.break_total_duration
|
||||||
|
.saturating_sub(self.time_until_break_end);
|
||||||
|
let break_progress = if self.break_total_duration > 0 {
|
||||||
|
break_elapsed as f64 / self.break_total_duration as f64
|
||||||
|
} else {
|
||||||
|
0.0
|
||||||
|
};
|
||||||
|
let break_past_half =
|
||||||
|
self.break_total_duration > 0 && break_elapsed * 2 >= self.break_total_duration;
|
||||||
|
|
||||||
|
// Use pending_config for settings display, active config for timer
|
||||||
|
let display_config = if self.current_view == AppView::Settings {
|
||||||
|
&self.pending_config
|
||||||
|
} else {
|
||||||
|
&self.config
|
||||||
|
};
|
||||||
|
|
||||||
|
TimerSnapshot {
|
||||||
|
state: self.state,
|
||||||
|
current_view: self.current_view,
|
||||||
|
time_remaining: self.time_until_next_break,
|
||||||
|
total_duration: total_freq,
|
||||||
|
progress: timer_progress,
|
||||||
|
has_had_break: self.has_had_break,
|
||||||
|
seconds_since_last_break: self.seconds_since_last_break,
|
||||||
|
prebreak_warning: self.prebreak_notification_active,
|
||||||
|
snoozes_used: self.snoozes_used,
|
||||||
|
can_snooze: self.can_snooze(),
|
||||||
|
break_title: display_config.break_title.clone(),
|
||||||
|
break_message: display_config.break_message.clone(),
|
||||||
|
break_progress,
|
||||||
|
break_time_remaining: self.time_until_break_end,
|
||||||
|
break_total_duration: self.break_total_duration,
|
||||||
|
break_past_half,
|
||||||
|
settings_modified: self.settings_modified,
|
||||||
|
idle_paused: self.idle_paused,
|
||||||
|
natural_break_occurred: self.natural_break_occurred,
|
||||||
|
smart_breaks_enabled: display_config.smart_breaks_enabled,
|
||||||
|
smart_break_threshold: display_config.smart_break_threshold,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub enum TickResult {
|
||||||
|
None,
|
||||||
|
BreakStarted(BreakStartedPayload),
|
||||||
|
BreakEnded,
|
||||||
|
PreBreakWarning { seconds_until_break: u64 },
|
||||||
|
NaturalBreakDetected { duration_seconds: u64 },
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Result of checking idle state
|
||||||
|
pub enum IdleCheckResult {
|
||||||
|
None,
|
||||||
|
JustPaused,
|
||||||
|
JustResumed,
|
||||||
|
NaturalBreakDetected(u64), // duration in seconds
|
||||||
|
}
|
||||||
|
|
||||||
|
fn parse_hour(time_str: &str) -> u32 {
|
||||||
|
time_str
|
||||||
|
.split(':')
|
||||||
|
.next()
|
||||||
|
.and_then(|h| h.parse().ok())
|
||||||
|
.unwrap_or(9)
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Returns the number of seconds since last user input (mouse/keyboard).
|
||||||
|
#[cfg(windows)]
|
||||||
|
pub fn get_idle_seconds() -> u64 {
|
||||||
|
use std::mem;
|
||||||
|
use winapi::um::sysinfoapi::GetTickCount;
|
||||||
|
use winapi::um::winuser::{GetLastInputInfo, LASTINPUTINFO};
|
||||||
|
|
||||||
|
unsafe {
|
||||||
|
let mut lii: LASTINPUTINFO = mem::zeroed();
|
||||||
|
lii.cbSize = mem::size_of::<LASTINPUTINFO>() as u32;
|
||||||
|
if GetLastInputInfo(&mut lii) != 0 {
|
||||||
|
let tick = GetTickCount();
|
||||||
|
let idle_ms = tick.wrapping_sub(lii.dwTime);
|
||||||
|
(idle_ms / 1000) as u64
|
||||||
|
} else {
|
||||||
|
0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[cfg(not(windows))]
|
||||||
|
pub fn get_idle_seconds() -> u64 {
|
||||||
|
0
|
||||||
|
}
|
||||||
29
src-tauri/tauri.conf.json
Normal file
29
src-tauri/tauri.conf.json
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/dev/crates/tauri-config-schema/schema.json",
|
||||||
|
"productName": "Core Cooldown",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"identifier": "com.corecooldown.app",
|
||||||
|
"build": {
|
||||||
|
"frontendDist": "../dist",
|
||||||
|
"devUrl": "http://localhost:1420",
|
||||||
|
"beforeDevCommand": "npm run dev",
|
||||||
|
"beforeBuildCommand": "npm run build"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"windows": [],
|
||||||
|
"security": {
|
||||||
|
"csp": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bundle": {
|
||||||
|
"active": false,
|
||||||
|
"targets": "all",
|
||||||
|
"icon": [
|
||||||
|
"icons/32x32.png",
|
||||||
|
"icons/128x128.png",
|
||||||
|
"icons/128x128@2x.png",
|
||||||
|
"icons/icon.icns",
|
||||||
|
"icons/icon.ico"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
118
src/App.svelte
Normal file
118
src/App.svelte
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { fly, scale, fade } from "svelte/transition";
|
||||||
|
import { cubicOut } from "svelte/easing";
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
|
||||||
|
import { initTimerStore, currentView } from "./lib/stores/timer";
|
||||||
|
import { loadConfig, config } from "./lib/stores/config";
|
||||||
|
import Titlebar from "./lib/components/Titlebar.svelte";
|
||||||
|
import Dashboard from "./lib/components/Dashboard.svelte";
|
||||||
|
import BreakScreen from "./lib/components/BreakScreen.svelte";
|
||||||
|
import Settings from "./lib/components/Settings.svelte";
|
||||||
|
import StatsView from "./lib/components/StatsView.svelte";
|
||||||
|
import BackgroundBlobs from "./lib/components/BackgroundBlobs.svelte";
|
||||||
|
|
||||||
|
const appWindow = getCurrentWebviewWindow();
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
await loadConfig();
|
||||||
|
await initTimerStore();
|
||||||
|
|
||||||
|
// Save window position on move/resize (debounced)
|
||||||
|
let posTimer: ReturnType<typeof setTimeout>;
|
||||||
|
const savePos = () => {
|
||||||
|
clearTimeout(posTimer);
|
||||||
|
posTimer = setTimeout(async () => {
|
||||||
|
try {
|
||||||
|
const pos = await appWindow.outerPosition();
|
||||||
|
const size = await appWindow.outerSize();
|
||||||
|
await invoke("save_window_position", {
|
||||||
|
label: "main", x: pos.x, y: pos.y,
|
||||||
|
width: size.width, height: size.height,
|
||||||
|
});
|
||||||
|
} catch {}
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
appWindow.onMoved(savePos);
|
||||||
|
appWindow.onResized(savePos);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Apply UI zoom from config
|
||||||
|
const zoomScale = $derived($config.ui_zoom / 100);
|
||||||
|
|
||||||
|
// Track previous view for directional transitions
|
||||||
|
let previousView = $state<string>("dashboard");
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
const view = $currentView;
|
||||||
|
// Store previous for determining transition direction
|
||||||
|
return () => {
|
||||||
|
previousView = view;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Transition parameters
|
||||||
|
const DURATION = 700;
|
||||||
|
const easing = cubicOut;
|
||||||
|
|
||||||
|
// When fullscreen_mode is OFF, the separate break window handles breaks,
|
||||||
|
// so the main window should keep showing whatever view it was on (dashboard).
|
||||||
|
const effectiveView = $derived(
|
||||||
|
$currentView === "breakScreen" && !$config.fullscreen_mode
|
||||||
|
? "dashboard"
|
||||||
|
: $currentView
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="relative h-full bg-black">
|
||||||
|
{#if $config.background_blobs_enabled}
|
||||||
|
<BackgroundBlobs accentColor={$config.accent_color} breakColor={$config.break_color} />
|
||||||
|
{/if}
|
||||||
|
<Titlebar />
|
||||||
|
<div
|
||||||
|
class="relative h-full overflow-hidden origin-top-left"
|
||||||
|
style="
|
||||||
|
transform: scale({zoomScale});
|
||||||
|
width: {100 / zoomScale}%;
|
||||||
|
height: {100 / zoomScale}%;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{#if effectiveView === "dashboard"}
|
||||||
|
<div
|
||||||
|
class="absolute inset-0"
|
||||||
|
in:fly={{ x: previousView === "settings" ? -200 : 0, duration: DURATION, easing, opacity: 0 }}
|
||||||
|
out:fly={{ x: previousView === "dashboard" ? -200 : 0, duration: DURATION * 0.6, easing, opacity: 0 }}
|
||||||
|
>
|
||||||
|
<Dashboard />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if effectiveView === "breakScreen"}
|
||||||
|
<div
|
||||||
|
class="absolute inset-0"
|
||||||
|
in:scale={{ start: 1.08, duration: DURATION, easing, opacity: 0 }}
|
||||||
|
out:scale={{ start: 0.95, duration: DURATION * 0.6, easing, opacity: 0 }}
|
||||||
|
>
|
||||||
|
<BreakScreen />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if effectiveView === "settings"}
|
||||||
|
<div
|
||||||
|
class="absolute inset-0"
|
||||||
|
in:fly={{ x: 200, duration: DURATION, easing, opacity: 0 }}
|
||||||
|
out:fly={{ x: 200, duration: DURATION * 0.6, easing, opacity: 0 }}
|
||||||
|
>
|
||||||
|
<Settings />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if effectiveView === "stats"}
|
||||||
|
<div
|
||||||
|
class="absolute inset-0"
|
||||||
|
in:fly={{ y: 200, duration: DURATION, easing, opacity: 0 }}
|
||||||
|
out:fly={{ y: 200, duration: DURATION * 0.6, easing, opacity: 0 }}
|
||||||
|
>
|
||||||
|
<StatsView />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
57
src/app.css
Normal file
57
src/app.css
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--color-bg: #000000;
|
||||||
|
--color-surface: #0e0e0e;
|
||||||
|
--color-card: #141414;
|
||||||
|
--color-card-lt: #1c1c1c;
|
||||||
|
--color-border: #222222;
|
||||||
|
--color-accent: #ff4d00;
|
||||||
|
--color-accent-lt: #ff7733;
|
||||||
|
--color-accent-dim: #ff4d0018;
|
||||||
|
--color-accent-glow: #ff4d0040;
|
||||||
|
--color-success: #3fb950;
|
||||||
|
--color-warning: #f0a500;
|
||||||
|
--color-danger: #f85149;
|
||||||
|
--color-text-pri: #ffffff;
|
||||||
|
--color-text-sec: #777777;
|
||||||
|
--color-text-dim: #3a3a3a;
|
||||||
|
--color-caption-bg: #050505;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: #000000;
|
||||||
|
color: var(--color-text-pri);
|
||||||
|
font-family:
|
||||||
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
||||||
|
Arial, sans-serif;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #222;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
111
src/lib/components/BackgroundBlobs.svelte
Normal file
111
src/lib/components/BackgroundBlobs.svelte
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
accentColor: string;
|
||||||
|
breakColor: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { accentColor, breakColor }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="pointer-events-none absolute inset-0 overflow-hidden">
|
||||||
|
<!-- Gradient blobs -->
|
||||||
|
<div
|
||||||
|
class="blob blob-1"
|
||||||
|
style="background: radial-gradient(circle, {accentColor} 0%, transparent 70%);"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="blob blob-2"
|
||||||
|
style="background: radial-gradient(circle, {breakColor} 0%, transparent 70%);"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="blob blob-3"
|
||||||
|
style="background: radial-gradient(circle, {accentColor} 0%, transparent 70%);"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="blob blob-4"
|
||||||
|
style="background: radial-gradient(circle, {breakColor} 0%, transparent 70%);"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- Film grain overlay -->
|
||||||
|
<svg class="absolute inset-0 h-full w-full" style="opacity: 0.08; mix-blend-mode: overlay;">
|
||||||
|
<filter id="grain-filter">
|
||||||
|
<feTurbulence type="fractalNoise" baseFrequency="0.45" numOctaves="3" stitchTiles="stitch">
|
||||||
|
<animate
|
||||||
|
attributeName="seed"
|
||||||
|
from="0"
|
||||||
|
to="100"
|
||||||
|
dur="2s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</feTurbulence>
|
||||||
|
</filter>
|
||||||
|
<rect width="100%" height="100%" filter="url(#grain-filter)" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.blob {
|
||||||
|
position: absolute;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(80px);
|
||||||
|
opacity: 0.4;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob-1 {
|
||||||
|
top: -15%;
|
||||||
|
left: -10%;
|
||||||
|
animation: drift-1 30s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.blob-2 {
|
||||||
|
bottom: -15%;
|
||||||
|
right: -10%;
|
||||||
|
animation: drift-2 35s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.blob-3 {
|
||||||
|
top: 40%;
|
||||||
|
right: -15%;
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
animation: drift-3 28s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.blob-4 {
|
||||||
|
bottom: 20%;
|
||||||
|
left: -15%;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
animation: drift-4 32s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes drift-1 {
|
||||||
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||||
|
20% { transform: translate(300px, 200px) scale(1.15); }
|
||||||
|
40% { transform: translate(150px, 450px) scale(0.9); }
|
||||||
|
60% { transform: translate(350px, 350px) scale(1.1); }
|
||||||
|
80% { transform: translate(100px, 100px) scale(0.95); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes drift-2 {
|
||||||
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||||
|
20% { transform: translate(-250px, -150px) scale(1.1); }
|
||||||
|
40% { transform: translate(-100px, -400px) scale(0.95); }
|
||||||
|
60% { transform: translate(-300px, -200px) scale(1.15); }
|
||||||
|
80% { transform: translate(-50px, -300px) scale(0.9); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes drift-3 {
|
||||||
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||||
|
25% { transform: translate(-300px, -200px) scale(1.1); }
|
||||||
|
50% { transform: translate(-150px, 150px) scale(0.9); }
|
||||||
|
75% { transform: translate(-350px, -50px) scale(1.15); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes drift-4 {
|
||||||
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||||
|
25% { transform: translate(280px, -180px) scale(1.15); }
|
||||||
|
50% { transform: translate(100px, 200px) scale(0.9); }
|
||||||
|
75% { transform: translate(320px, 50px) scale(1.1); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
417
src/lib/components/BreakScreen.svelte
Normal file
417
src/lib/components/BreakScreen.svelte
Normal file
@@ -0,0 +1,417 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
|
||||||
|
import { timer, currentView, formatTime, type TimerSnapshot } from "../stores/timer";
|
||||||
|
import { config } from "../stores/config";
|
||||||
|
import TimerRing from "./TimerRing.svelte";
|
||||||
|
import { scaleIn, fadeIn, pressable } from "../utils/animate";
|
||||||
|
import { pickRandomActivity, getCategoryIcon, getCategoryLabel, type BreakActivity } from "../utils/activities";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
standalone?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { standalone = false }: Props = $props();
|
||||||
|
|
||||||
|
const appWindow = standalone ? getCurrentWebviewWindow() : null;
|
||||||
|
|
||||||
|
let currentActivity = $state<BreakActivity>(pickRandomActivity());
|
||||||
|
let activityCycleTimer: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
// Cycle activity every 30 seconds during break
|
||||||
|
$effect(() => {
|
||||||
|
if ($config.show_break_activities && $timer.state === "breakActive") {
|
||||||
|
activityCycleTimer = setInterval(() => {
|
||||||
|
currentActivity = pickRandomActivity(currentActivity);
|
||||||
|
}, 30_000);
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
if (activityCycleTimer) {
|
||||||
|
clearInterval(activityCycleTimer);
|
||||||
|
activityCycleTimer = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
async function cancelBreak() {
|
||||||
|
const snap = await invoke<TimerSnapshot>("cancel_break");
|
||||||
|
timer.set(snap);
|
||||||
|
if (standalone) {
|
||||||
|
appWindow?.hide();
|
||||||
|
} else {
|
||||||
|
currentView.set(snap.currentView);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function snoozeBreak() {
|
||||||
|
const snap = await invoke<TimerSnapshot>("snooze");
|
||||||
|
timer.set(snap);
|
||||||
|
// If snooze ended the break, hide standalone window
|
||||||
|
if (standalone && snap.state !== "breakActive") {
|
||||||
|
appWindow?.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const breakRingProgress = $derived(
|
||||||
|
$timer.breakTotalDuration > 0
|
||||||
|
? $timer.breakTimeRemaining / $timer.breakTotalDuration
|
||||||
|
: 0,
|
||||||
|
);
|
||||||
|
|
||||||
|
const cancelBtnText = $derived(
|
||||||
|
$timer.breakPastHalf && $config.allow_end_early ? "End break" : "Skip",
|
||||||
|
);
|
||||||
|
|
||||||
|
const showButtons = $derived(!$config.strict_mode);
|
||||||
|
|
||||||
|
// Bottom progress bar uses a gradient from break color to accent
|
||||||
|
const barGradient = $derived(
|
||||||
|
`linear-gradient(to right, ${$config.break_color}, ${$config.accent_color})`,
|
||||||
|
);
|
||||||
|
|
||||||
|
const isModal = $derived(!$config.fullscreen_mode && !standalone);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if standalone}
|
||||||
|
<!-- ── Standalone break window: horizontal card, transparent background ── -->
|
||||||
|
<div class="standalone-card" use:scaleIn={{ duration: 0.5 }}>
|
||||||
|
<!-- Ripples emanate from the ring, visible outside the card -->
|
||||||
|
<div class="standalone-ring-area">
|
||||||
|
<div class="ripple-container">
|
||||||
|
<div class="break-ripple ripple-1" style="--ripple-color: {$config.break_color}"></div>
|
||||||
|
<div class="break-ripple ripple-2" style="--ripple-color: {$config.break_color}"></div>
|
||||||
|
<div class="break-ripple ripple-3" style="--ripple-color: {$config.break_color}"></div>
|
||||||
|
</div>
|
||||||
|
<div class="break-breathe">
|
||||||
|
<TimerRing
|
||||||
|
progress={breakRingProgress}
|
||||||
|
size={140}
|
||||||
|
strokeWidth={5}
|
||||||
|
accentColor={$config.break_color}
|
||||||
|
>
|
||||||
|
<div class="break-breathe-counter">
|
||||||
|
<span
|
||||||
|
class="font-semibold leading-none tabular-nums text-white text-[26px]"
|
||||||
|
style={$config.countdown_font ? `font-family: '${$config.countdown_font}', monospace;` : ""}
|
||||||
|
>
|
||||||
|
{formatTime($timer.breakTimeRemaining)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TimerRing>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right side: text + buttons -->
|
||||||
|
<div class="standalone-content">
|
||||||
|
<h2 class="text-[17px] font-medium text-white mb-1.5">
|
||||||
|
{$timer.breakTitle}
|
||||||
|
</h2>
|
||||||
|
<p class="text-[12px] leading-relaxed text-[#666] mb-4 max-w-[240px]">
|
||||||
|
{$timer.breakMessage}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{#if $config.show_break_activities}
|
||||||
|
<div class="rounded-xl border border-[#ffffff08] bg-[#ffffff06] px-4 py-2.5 mb-4 max-w-[260px]">
|
||||||
|
<div class="text-[9px] font-medium tracking-[0.15em] text-[#555] uppercase mb-1">
|
||||||
|
{getCategoryLabel(currentActivity.category)}
|
||||||
|
</div>
|
||||||
|
<p class="text-[12px] leading-relaxed text-[#999]">
|
||||||
|
{currentActivity.text}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if showButtons}
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<button
|
||||||
|
use:pressable
|
||||||
|
class="rounded-full border border-[#333] px-5 py-2 text-[11px]
|
||||||
|
tracking-wider text-[#666] uppercase
|
||||||
|
transition-colors duration-200
|
||||||
|
hover:border-[#444] hover:text-[#aaa]"
|
||||||
|
onclick={cancelBreak}
|
||||||
|
>
|
||||||
|
{cancelBtnText}
|
||||||
|
</button>
|
||||||
|
{#if $timer.canSnooze}
|
||||||
|
<button
|
||||||
|
use:pressable
|
||||||
|
class="rounded-full px-5 py-2 text-[11px]
|
||||||
|
tracking-wider text-white uppercase
|
||||||
|
transition-colors duration-200"
|
||||||
|
style="background: rgba(255,255,255,0.08);"
|
||||||
|
onclick={snoozeBreak}
|
||||||
|
>
|
||||||
|
Snooze
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if $config.snooze_limit > 0}
|
||||||
|
<p class="mt-2 text-[9px] text-[#333]">
|
||||||
|
{$timer.snoozesUsed}/{$config.snooze_limit} snoozes used
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom progress bar with clip-path -->
|
||||||
|
<div class="standalone-progress-container">
|
||||||
|
<div class="standalone-progress-track">
|
||||||
|
<div
|
||||||
|
class="h-full transition-[width] duration-1000 ease-linear"
|
||||||
|
style="width: {$timer.breakProgress * 100}%; background: {barGradient};"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{:else}
|
||||||
|
<!-- ── In-app break screen: full-screen fill OR modal with backdrop ── -->
|
||||||
|
<div
|
||||||
|
class="relative h-full"
|
||||||
|
class:flex={isModal}
|
||||||
|
class:items-center={isModal}
|
||||||
|
class:justify-center={isModal}
|
||||||
|
style={isModal ? `background: #000;` : ""}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="relative flex flex-col"
|
||||||
|
class:h-full={!isModal}
|
||||||
|
class:break-modal={isModal}
|
||||||
|
>
|
||||||
|
<!-- Break ring with breathing pulse + ripples -->
|
||||||
|
<div class="mb-6 relative" use:scaleIn={{ duration: 0.6, delay: 0.1 }}>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||||
|
<div class="break-ripple ripple-1" style="--ripple-color: {$config.break_color}"></div>
|
||||||
|
<div class="break-ripple ripple-2" style="--ripple-color: {$config.break_color}"></div>
|
||||||
|
<div class="break-ripple ripple-3" style="--ripple-color: {$config.break_color}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="break-breathe relative">
|
||||||
|
<TimerRing
|
||||||
|
progress={breakRingProgress}
|
||||||
|
size={isModal ? 160 : 200}
|
||||||
|
strokeWidth={isModal ? 5 : 6}
|
||||||
|
accentColor={$config.break_color}
|
||||||
|
>
|
||||||
|
<div class="break-breathe-counter">
|
||||||
|
<span
|
||||||
|
class="font-semibold leading-none tabular-nums text-white"
|
||||||
|
class:text-[30px]={isModal}
|
||||||
|
class:text-[38px]={!isModal}
|
||||||
|
style={$config.countdown_font ? `font-family: '${$config.countdown_font}', monospace;` : ""}
|
||||||
|
>
|
||||||
|
{formatTime($timer.breakTimeRemaining)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TimerRing>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="mb-2 text-lg font-medium text-white" use:fadeIn={{ delay: 0.25, y: 10 }}>
|
||||||
|
{$timer.breakTitle}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p
|
||||||
|
class="max-w-[300px] text-center text-[13px] leading-relaxed text-[#555]"
|
||||||
|
class:mb-4={$config.show_break_activities}
|
||||||
|
class:mb-8={!$config.show_break_activities}
|
||||||
|
use:fadeIn={{ delay: 0.35, y: 10 }}
|
||||||
|
>
|
||||||
|
{$timer.breakMessage}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{#if $config.show_break_activities}
|
||||||
|
<div
|
||||||
|
class="mb-8 mx-auto max-w-[320px] rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] px-5 py-3.5 text-center"
|
||||||
|
use:fadeIn={{ delay: 0.4, y: 10 }}
|
||||||
|
>
|
||||||
|
<div class="mb-1.5 text-[10px] font-medium tracking-[0.15em] text-[#444] uppercase">
|
||||||
|
{getCategoryLabel(currentActivity.category)}
|
||||||
|
</div>
|
||||||
|
<p class="text-[13px] leading-relaxed text-[#999]">
|
||||||
|
{currentActivity.text}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if showButtons}
|
||||||
|
<div class="flex items-center gap-3" use:fadeIn={{ delay: 0.45, y: 10 }}>
|
||||||
|
<button
|
||||||
|
use:pressable
|
||||||
|
class="rounded-full border border-[#222] px-6 py-2.5 text-[12px]
|
||||||
|
tracking-wider text-[#555] uppercase
|
||||||
|
transition-colors duration-200
|
||||||
|
hover:border-[#333] hover:text-[#999]"
|
||||||
|
onclick={cancelBreak}
|
||||||
|
>
|
||||||
|
{cancelBtnText}
|
||||||
|
</button>
|
||||||
|
{#if $timer.canSnooze}
|
||||||
|
<button
|
||||||
|
use:pressable
|
||||||
|
class="rounded-full px-6 py-2.5 text-[12px]
|
||||||
|
tracking-wider text-white uppercase backdrop-blur-xl
|
||||||
|
transition-colors duration-200"
|
||||||
|
style="background: rgba(20,20,20,0.7);"
|
||||||
|
onclick={snoozeBreak}
|
||||||
|
>
|
||||||
|
Snooze
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if $config.snooze_limit > 0}
|
||||||
|
<p class="mt-3 text-[10px] text-[#2a2a2a]">
|
||||||
|
{$timer.snoozesUsed}/{$config.snooze_limit} snoozes used
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Bottom progress bar for modal - uses clip-path to respect border radius -->
|
||||||
|
<div class="break-modal-progress-container">
|
||||||
|
<div class="break-modal-progress-track">
|
||||||
|
<div
|
||||||
|
class="h-full transition-[width] duration-1000 ease-linear"
|
||||||
|
style="width: {$timer.breakProgress * 100}%; background: {barGradient};"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* ── Standalone horizontal card ── */
|
||||||
|
.standalone-card {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 28px;
|
||||||
|
background: rgba(12, 12, 12, 0.97);
|
||||||
|
backdrop-filter: blur(32px);
|
||||||
|
-webkit-backdrop-filter: blur(32px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 32px 36px 32px 32px;
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 1px rgba(0, 0, 0, 0.3),
|
||||||
|
0 20px 60px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 80px rgba(0, 0, 0, 0.3);
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standalone-ring-area {
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standalone-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standalone progress bar - positioned inside the padding area */
|
||||||
|
.standalone-progress-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 28px;
|
||||||
|
left: 28px;
|
||||||
|
right: 28px;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standalone-progress-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ripple container — sits behind the ring, overflows the card */
|
||||||
|
.ripple-container {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Modal card when fullscreen is off (in-app) ── */
|
||||||
|
.break-modal {
|
||||||
|
position: relative;
|
||||||
|
background: #0a0a0a;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
border-radius: 28px;
|
||||||
|
padding: 40px 32px 32px;
|
||||||
|
max-width: 400px;
|
||||||
|
width: 90%;
|
||||||
|
box-shadow: 0 24px 100px rgba(0, 0, 0, 0.7);
|
||||||
|
overflow: hidden;
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress bar - positioned inside padding to avoid rounded corner overflow */
|
||||||
|
.break-modal-progress-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 32px;
|
||||||
|
left: 32px;
|
||||||
|
right: 32px;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-modal-progress-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Breathing pulse on the ring ── */
|
||||||
|
.break-breathe {
|
||||||
|
animation: breathe 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes breathe {
|
||||||
|
0%, 100% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.04); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-breathe-counter {
|
||||||
|
animation: breathe-counter 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes breathe-counter {
|
||||||
|
0%, 100% { transform: scale(1); }
|
||||||
|
50% { transform: scale(0.962); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Ripple circles ── */
|
||||||
|
.break-ripple {
|
||||||
|
position: absolute;
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1.5px solid var(--ripple-color);
|
||||||
|
opacity: 0;
|
||||||
|
animation: ripple-expand 4s ease-out infinite;
|
||||||
|
}
|
||||||
|
.ripple-1 { animation-delay: 0s; }
|
||||||
|
.ripple-2 { animation-delay: 1.33s; }
|
||||||
|
.ripple-3 { animation-delay: 2.66s; }
|
||||||
|
|
||||||
|
@keyframes ripple-expand {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(2.2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
63
src/lib/components/BreakWindow.svelte
Normal file
63
src/lib/components/BreakWindow.svelte
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { listen } from "@tauri-apps/api/event";
|
||||||
|
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
|
||||||
|
import { LogicalSize } from "@tauri-apps/api/dpi";
|
||||||
|
import { initTimerStore } from "../stores/timer";
|
||||||
|
import { loadConfig, config } from "../stores/config";
|
||||||
|
import BreakScreen from "./BreakScreen.svelte";
|
||||||
|
|
||||||
|
const appWindow = getCurrentWebviewWindow();
|
||||||
|
|
||||||
|
// Base window dimensions (from tauri.conf.json)
|
||||||
|
const BASE_W = 900;
|
||||||
|
const BASE_H = 540;
|
||||||
|
|
||||||
|
let ready = $state(false);
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
await loadConfig();
|
||||||
|
await initTimerStore();
|
||||||
|
ready = true;
|
||||||
|
|
||||||
|
// Auto-hide when break ends (window is persistent, just hide it)
|
||||||
|
await listen("break-ended", () => {
|
||||||
|
appWindow.hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Live-reload config when main window changes settings (zoom, colors, etc.)
|
||||||
|
await listen("config-changed", () => {
|
||||||
|
loadConfig();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const zoomScale = $derived($config.ui_zoom / 100);
|
||||||
|
|
||||||
|
// Resize the actual Tauri window when zoom changes
|
||||||
|
$effect(() => {
|
||||||
|
const scale = $config.ui_zoom / 100;
|
||||||
|
const w = Math.round(BASE_W * scale);
|
||||||
|
const h = Math.round(BASE_H * scale);
|
||||||
|
appWindow.setSize(new LogicalSize(w, h));
|
||||||
|
appWindow.center();
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="w-full h-full flex items-center justify-center overflow-hidden">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: {100 / zoomScale}%;
|
||||||
|
height: {100 / zoomScale}%;
|
||||||
|
transform: scale({zoomScale});
|
||||||
|
transform-origin: center center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{#if ready}
|
||||||
|
<BreakScreen standalone={true} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
301
src/lib/components/ColorPicker.svelte
Normal file
301
src/lib/components/ColorPicker.svelte
Normal file
@@ -0,0 +1,301 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { slide } from "svelte/transition";
|
||||||
|
import { cubicOut } from "svelte/easing";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
presets?: string[];
|
||||||
|
onchange?: (color: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
value = $bindable(),
|
||||||
|
label,
|
||||||
|
presets = [
|
||||||
|
"#ff4d00", "#ff6b35", "#e63946", "#d62828",
|
||||||
|
"#f77f00", "#fcbf49", "#2ec4b6", "#3fb950",
|
||||||
|
"#7c6aef", "#9b5de5", "#4361ee", "#4895ef",
|
||||||
|
"#f72585", "#ff006e", "#ffffff", "#888888",
|
||||||
|
],
|
||||||
|
onchange,
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let showCustom = $state(false);
|
||||||
|
let hue = $state(0);
|
||||||
|
let sat = $state(100);
|
||||||
|
let light = $state(50);
|
||||||
|
let hexInput = $state(value);
|
||||||
|
let draggingSL = $state(false);
|
||||||
|
let draggingHue = $state(false);
|
||||||
|
|
||||||
|
// Pointer ID tracking for proper cleanup
|
||||||
|
let slPointerId = $state<number | null>(null);
|
||||||
|
let huePointerId = $state<number | null>(null);
|
||||||
|
|
||||||
|
// Parse current value into HSL on mount
|
||||||
|
$effect(() => {
|
||||||
|
const hsl = hexToHsl(value);
|
||||||
|
if (hsl) {
|
||||||
|
hue = hsl.h;
|
||||||
|
sat = hsl.s;
|
||||||
|
light = hsl.l;
|
||||||
|
}
|
||||||
|
hexInput = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
function selectPreset(color: string) {
|
||||||
|
value = color;
|
||||||
|
hexInput = color;
|
||||||
|
showCustom = false;
|
||||||
|
const hsl = hexToHsl(color);
|
||||||
|
if (hsl) { hue = hsl.h; sat = hsl.s; light = hsl.l; }
|
||||||
|
onchange?.(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateFromHSL() {
|
||||||
|
const hex = hslToHex(hue, sat, light);
|
||||||
|
value = hex;
|
||||||
|
hexInput = hex;
|
||||||
|
onchange?.(hex);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onHexInput(e: Event) {
|
||||||
|
const input = (e.target as HTMLInputElement).value;
|
||||||
|
hexInput = input;
|
||||||
|
if (/^#[0-9a-fA-F]{6}$/.test(input)) {
|
||||||
|
value = input;
|
||||||
|
const hsl = hexToHsl(input);
|
||||||
|
if (hsl) { hue = hsl.h; sat = hsl.s; light = hsl.l; }
|
||||||
|
onchange?.(input);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- SL pad interaction (Pointer Events) ---
|
||||||
|
let slPad = $state<HTMLDivElement>(undefined!);
|
||||||
|
|
||||||
|
function handleSLPointerDown(e: PointerEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
draggingSL = true;
|
||||||
|
slPointerId = e.pointerId;
|
||||||
|
|
||||||
|
// Capture pointer to keep receiving events even outside element
|
||||||
|
const target = e.currentTarget as HTMLElement;
|
||||||
|
target.setPointerCapture(e.pointerId);
|
||||||
|
|
||||||
|
// Update immediately on down
|
||||||
|
updateSLFromPointer(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSLPointerMove(e: PointerEvent) {
|
||||||
|
if (!draggingSL || !slPad || e.pointerId !== slPointerId) return;
|
||||||
|
e.preventDefault();
|
||||||
|
updateSLFromPointer(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSLFromPointer(e: PointerEvent) {
|
||||||
|
if (!slPad) return;
|
||||||
|
const rect = slPad.getBoundingClientRect();
|
||||||
|
const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
||||||
|
const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
|
||||||
|
sat = Math.round(x * 100);
|
||||||
|
light = Math.round((1 - y) * 100);
|
||||||
|
updateFromHSL();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSLPointerUp(e: PointerEvent) {
|
||||||
|
if (!draggingSL || e.pointerId !== slPointerId) return;
|
||||||
|
e.preventDefault();
|
||||||
|
draggingSL = false;
|
||||||
|
slPointerId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Hue bar interaction (Pointer Events) ---
|
||||||
|
let hueBar = $state<HTMLDivElement>(undefined!);
|
||||||
|
|
||||||
|
function handleHuePointerDown(e: PointerEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
draggingHue = true;
|
||||||
|
huePointerId = e.pointerId;
|
||||||
|
|
||||||
|
// Capture pointer to keep receiving events even outside element
|
||||||
|
const target = e.currentTarget as HTMLElement;
|
||||||
|
target.setPointerCapture(e.pointerId);
|
||||||
|
|
||||||
|
// Update immediately on down
|
||||||
|
updateHueFromPointer(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleHuePointerMove(e: PointerEvent) {
|
||||||
|
if (!draggingHue || !hueBar || e.pointerId !== huePointerId) return;
|
||||||
|
e.preventDefault();
|
||||||
|
updateHueFromPointer(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHueFromPointer(e: PointerEvent) {
|
||||||
|
if (!hueBar) return;
|
||||||
|
const rect = hueBar.getBoundingClientRect();
|
||||||
|
const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
||||||
|
hue = Math.round(x * 360);
|
||||||
|
updateFromHSL();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleHuePointerUp(e: PointerEvent) {
|
||||||
|
if (!draggingHue || e.pointerId !== huePointerId) return;
|
||||||
|
e.preventDefault();
|
||||||
|
draggingHue = false;
|
||||||
|
huePointerId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Color conversion helpers ---
|
||||||
|
function hexToHsl(hex: string): { h: number; s: number; l: number } | null {
|
||||||
|
if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return null;
|
||||||
|
let r = parseInt(hex.slice(1, 3), 16) / 255;
|
||||||
|
let g = parseInt(hex.slice(3, 5), 16) / 255;
|
||||||
|
let b = parseInt(hex.slice(5, 7), 16) / 255;
|
||||||
|
const max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||||
|
let h = 0, s = 0, l = (max + min) / 2;
|
||||||
|
if (max !== min) {
|
||||||
|
const d = max - min;
|
||||||
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||||
|
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
|
||||||
|
else if (max === g) h = ((b - r) / d + 2) / 6;
|
||||||
|
else h = ((r - g) / d + 4) / 6;
|
||||||
|
}
|
||||||
|
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
|
||||||
|
}
|
||||||
|
|
||||||
|
function hslToHex(h: number, s: number, l: number): string {
|
||||||
|
const sl = s / 100, ll = l / 100;
|
||||||
|
const a = sl * Math.min(ll, 1 - ll);
|
||||||
|
function f(n: number) {
|
||||||
|
const k = (n + h / 30) % 12;
|
||||||
|
const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
||||||
|
return Math.round(255 * color).toString(16).padStart(2, '0');
|
||||||
|
}
|
||||||
|
return `#${f(0)}${f(8)}${f(4)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const isPreset = $derived(presets.includes(value));
|
||||||
|
|
||||||
|
// SL cursor position
|
||||||
|
const slX = $derived(sat);
|
||||||
|
const slY = $derived(100 - light);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<!-- Header row: label + current color preview -->
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="text-[13px] text-white">{label}</div>
|
||||||
|
<div class="font-mono text-[11px] text-[#444]">{value}</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-6 w-6 rounded-full border border-[#333] shadow-[0_0_8px_0px] transition-shadow duration-300"
|
||||||
|
style="background: {value}; --tw-shadow-color: {value}40;"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Preset swatches -->
|
||||||
|
<div class="flex flex-wrap gap-[6px]">
|
||||||
|
{#each presets as color}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="h-[22px] w-[22px] rounded-full transition-all duration-150
|
||||||
|
{value === color
|
||||||
|
? 'ring-[1.5px] ring-white ring-offset-1 ring-offset-black scale-110'
|
||||||
|
: 'hover:scale-110 opacity-80 hover:opacity-100'}"
|
||||||
|
style="background: {color};"
|
||||||
|
onclick={() => selectPreset(color)}
|
||||||
|
aria-label="Select {color}"
|
||||||
|
></button>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<!-- Custom toggle swatch — ring shows when picker open OR value is custom -->
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="h-[22px] w-[22px] rounded-full transition-all duration-150
|
||||||
|
{showCustom || !isPreset
|
||||||
|
? 'ring-[1.5px] ring-white ring-offset-1 ring-offset-black scale-110'
|
||||||
|
: 'hover:scale-110 opacity-80 hover:opacity-100'}"
|
||||||
|
style="background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);"
|
||||||
|
onclick={() => { showCustom = !showCustom; }}
|
||||||
|
aria-label="Custom color"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Inline custom picker — slides open/closed -->
|
||||||
|
{#if showCustom}
|
||||||
|
<div
|
||||||
|
class="flex flex-col gap-3 rounded-xl bg-[#0f0f0f] p-3 border border-[#1a1a1a]"
|
||||||
|
transition:slide={{ duration: 280, easing: cubicOut }}
|
||||||
|
>
|
||||||
|
<!-- Saturation / Lightness pad -->
|
||||||
|
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||||
|
<div
|
||||||
|
bind:this={slPad}
|
||||||
|
class="relative h-[120px] w-full cursor-crosshair rounded-lg overflow-hidden touch-none"
|
||||||
|
style="background: linear-gradient(to right, hsl({hue}, 0%, 50%), hsl({hue}, 100%, 50%));"
|
||||||
|
onpointerdown={handleSLPointerDown}
|
||||||
|
onpointermove={handleSLPointerMove}
|
||||||
|
onpointerup={handleSLPointerUp}
|
||||||
|
onpointercancel={handleSLPointerUp}
|
||||||
|
role="application"
|
||||||
|
aria-label="Saturation and lightness"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<!-- Lightness overlay: white at top, black at bottom -->
|
||||||
|
<div
|
||||||
|
class="absolute inset-0"
|
||||||
|
style="background: linear-gradient(to bottom, hsl({hue}, 100%, 100%), transparent, hsl({hue}, 100%, 0%));"
|
||||||
|
></div>
|
||||||
|
<!-- Cursor -->
|
||||||
|
<div
|
||||||
|
class="pointer-events-none absolute h-[14px] w-[14px] -translate-x-1/2 -translate-y-1/2 rounded-full
|
||||||
|
border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.4)]"
|
||||||
|
style="left: {slX}%; top: {slY}%; background: {value};"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hue bar -->
|
||||||
|
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||||
|
<div
|
||||||
|
bind:this={hueBar}
|
||||||
|
class="relative h-[16px] w-full cursor-pointer rounded-full overflow-hidden touch-none"
|
||||||
|
style="background: linear-gradient(to right,
|
||||||
|
hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%),
|
||||||
|
hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));"
|
||||||
|
onpointerdown={handleHuePointerDown}
|
||||||
|
onpointermove={handleHuePointerMove}
|
||||||
|
onpointerup={handleHuePointerUp}
|
||||||
|
onpointercancel={handleHuePointerUp}
|
||||||
|
role="application"
|
||||||
|
aria-label="Hue"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<!-- Hue cursor -->
|
||||||
|
<div
|
||||||
|
class="pointer-events-none absolute top-1/2 h-[12px] w-[12px] -translate-x-1/2 -translate-y-1/2 rounded-full
|
||||||
|
border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3)]"
|
||||||
|
style="left: {(hue / 360) * 100}%; background: hsl({hue}, 100%, 50%);"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hex input -->
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="w-full rounded-lg border border-[#1a1a1a] bg-black px-3 py-1.5 text-[12px]
|
||||||
|
font-mono text-white outline-none
|
||||||
|
placeholder:text-[#333] focus:border-[#333]"
|
||||||
|
placeholder="#ff4d00"
|
||||||
|
value={hexInput}
|
||||||
|
oninput={onHexInput}
|
||||||
|
maxlength={7}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
289
src/lib/components/Dashboard.svelte
Normal file
289
src/lib/components/Dashboard.svelte
Normal file
@@ -0,0 +1,289 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import {
|
||||||
|
timer,
|
||||||
|
currentView,
|
||||||
|
formatTime,
|
||||||
|
formatDurationAgo,
|
||||||
|
type TimerSnapshot,
|
||||||
|
} from "../stores/timer";
|
||||||
|
import { config } from "../stores/config";
|
||||||
|
import TimerRing from "./TimerRing.svelte";
|
||||||
|
import { scaleIn, fadeIn, pressable, glowHover } from "../utils/animate";
|
||||||
|
|
||||||
|
async function toggleTimer() {
|
||||||
|
const snap = await invoke<TimerSnapshot>("toggle_timer");
|
||||||
|
timer.set(snap);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function startBreakNow() {
|
||||||
|
const snap = await invoke<TimerSnapshot>("start_break_now");
|
||||||
|
timer.set(snap);
|
||||||
|
currentView.set(snap.currentView);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openSettings() {
|
||||||
|
invoke("set_view", { view: "settings" });
|
||||||
|
currentView.set("settings");
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusText = $derived(
|
||||||
|
$timer.idlePaused
|
||||||
|
? "IDLE"
|
||||||
|
: $timer.prebreakWarning
|
||||||
|
? "BREAK SOON"
|
||||||
|
: $timer.state === "running"
|
||||||
|
? "FOCUS"
|
||||||
|
: "PAUSED",
|
||||||
|
);
|
||||||
|
|
||||||
|
const toggleBtnText = $derived(
|
||||||
|
$timer.state === "running" ? "PAUSE" : "START",
|
||||||
|
);
|
||||||
|
|
||||||
|
// Responsive ring scaling computed from window dimensions
|
||||||
|
let windowW = $state(window.innerWidth);
|
||||||
|
let windowH = $state(window.innerHeight);
|
||||||
|
|
||||||
|
// Ring scales 1.0 → 0.6 based on both dimensions
|
||||||
|
const ringScale = $derived(
|
||||||
|
Math.min(1, Math.max(0.6, Math.min(
|
||||||
|
(windowH - 300) / 400,
|
||||||
|
(windowW - 200) / 300,
|
||||||
|
))),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Text scales less aggressively: 1.0 → 0.7 (counter-scale inside ring)
|
||||||
|
// counterScale = textScale / ringScale, where textScale = lerp(0.7, 1.0, (ringScale-0.6)/0.4)
|
||||||
|
const textCounterScale = $derived(
|
||||||
|
ringScale < 1
|
||||||
|
? Math.min(1.2, (0.7 + (ringScale - 0.6) * 0.75) / ringScale)
|
||||||
|
: 1,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Gap between ring and button, compensating for CSS transform phantom space.
|
||||||
|
// transform: scale() doesn't affect layout, so the 280px box stays full-size
|
||||||
|
// even when visually shrunk — creating phantom space below the visual ring.
|
||||||
|
const ringSize = 280;
|
||||||
|
const phantomBelow = $derived((ringSize * (1 - ringScale)) / 2);
|
||||||
|
const targetGap = $derived(Math.max(16, Math.round((windowH - 400) * 0.05 + 16)));
|
||||||
|
const ringMargin = $derived(targetGap - phantomBelow);
|
||||||
|
|
||||||
|
// Natural break notification
|
||||||
|
let showNaturalBreakToast = $state(false);
|
||||||
|
let naturalBreakToastTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
|
// Watch for natural break detection
|
||||||
|
$effect(() => {
|
||||||
|
if ($timer.naturalBreakOccurred) {
|
||||||
|
showNaturalBreakToast = true;
|
||||||
|
if (naturalBreakToastTimeout) clearTimeout(naturalBreakToastTimeout);
|
||||||
|
naturalBreakToastTimeout = setTimeout(() => {
|
||||||
|
showNaturalBreakToast = false;
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window bind:innerWidth={windowW} bind:innerHeight={windowH} />
|
||||||
|
|
||||||
|
<div class="relative flex h-full flex-col items-center justify-center">
|
||||||
|
<!-- Outer: responsive scaling (JS-driven), Inner: mount animation -->
|
||||||
|
<div style="transform: scale({ringScale}); transform-origin: center center; margin-bottom: {ringMargin}px;">
|
||||||
|
<div use:scaleIn={{ duration: 0.7, delay: 0.1 }}>
|
||||||
|
<TimerRing
|
||||||
|
progress={$timer.progress}
|
||||||
|
size={280}
|
||||||
|
strokeWidth={8}
|
||||||
|
accentColor={$config.accent_color}
|
||||||
|
>
|
||||||
|
<!-- Counter-scale wrapper: text shrinks less than ring -->
|
||||||
|
<div style="transform: scale({textCounterScale}); transform-origin: center center;">
|
||||||
|
<!-- Eye icon -->
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-3 eye-blink"
|
||||||
|
width="26"
|
||||||
|
height="26"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="#444"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
|
||||||
|
/>
|
||||||
|
<circle cx="12" cy="12" r="3" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Time display -->
|
||||||
|
<span
|
||||||
|
class="block text-center text-[54px] font-semibold leading-none tracking-tight tabular-nums text-white"
|
||||||
|
style={$config.countdown_font ? `font-family: '${$config.countdown_font}', monospace;` : ""}
|
||||||
|
>
|
||||||
|
{formatTime($timer.timeRemaining)}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="h-3"></div>
|
||||||
|
|
||||||
|
<!-- Status label -->
|
||||||
|
<span
|
||||||
|
class="block text-center text-[11px] font-medium tracking-[0.25em]"
|
||||||
|
class:text-[#444]={!$timer.prebreakWarning &&
|
||||||
|
$timer.state === "running"}
|
||||||
|
class:text-[#333]={!$timer.prebreakWarning &&
|
||||||
|
$timer.state === "paused"}
|
||||||
|
class:text-warning={$timer.prebreakWarning}
|
||||||
|
>
|
||||||
|
{statusText}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TimerRing>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Last break info -->
|
||||||
|
<div use:fadeIn={{ delay: 0.4, y: 10 }}>
|
||||||
|
{#if $timer.hasHadBreak}
|
||||||
|
<p style="margin-bottom: {ringMargin}px;" class="text-[12px] text-[#2a2a2a]">
|
||||||
|
Last break {formatDurationAgo($timer.secondsSinceLastBreak)}
|
||||||
|
</p>
|
||||||
|
{:else}
|
||||||
|
<div style="margin-bottom: {ringMargin}px; height: 18px;"></div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Natural break notification toast -->
|
||||||
|
{#if showNaturalBreakToast}
|
||||||
|
<div
|
||||||
|
class="absolute top-6 left-1/2 -translate-x-1/2 rounded-2xl border px-5 py-3 text-center backdrop-blur-xl transition-all duration-500"
|
||||||
|
style="border-color: rgba(63, 185, 80, 0.3); background: rgba(63, 185, 80, 0.1);"
|
||||||
|
use:scaleIn={{ duration: 0.3, delay: 0 }}
|
||||||
|
>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3fb950" stroke-width="2">
|
||||||
|
<path d="M20 6L9 17l-5-5"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-[13px] text-[#3fb950]">Natural break detected - timer reset</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Pause / Start button -->
|
||||||
|
<button
|
||||||
|
use:fadeIn={{ delay: 0.3, y: 12 }}
|
||||||
|
use:pressable
|
||||||
|
use:glowHover={{ color: $config.accent_color }}
|
||||||
|
class="w-[200px] rounded-full py-3.5 text-[13px] font-medium
|
||||||
|
tracking-[0.2em] text-white uppercase backdrop-blur-xl
|
||||||
|
transition-colors duration-200"
|
||||||
|
style="background: rgba(20,20,20,0.7);"
|
||||||
|
onclick={toggleTimer}
|
||||||
|
>
|
||||||
|
{toggleBtnText}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Bottom left: start break now -->
|
||||||
|
<div class="absolute bottom-5 left-5" use:fadeIn={{ delay: 0.5, y: 8 }}>
|
||||||
|
<button
|
||||||
|
aria-label="Start break now"
|
||||||
|
use:pressable
|
||||||
|
class="flex h-11 w-11 items-center justify-center rounded-full
|
||||||
|
border border-[#222] text-[#383838]
|
||||||
|
transition-colors duration-200
|
||||||
|
hover:border-[#333] hover:text-[#666]"
|
||||||
|
onclick={startBreakNow}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<polyline points="12 6 12 12 16 14" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom center: stats -->
|
||||||
|
<div class="absolute bottom-5 left-1/2 -translate-x-1/2" use:fadeIn={{ delay: 0.52, y: 8 }}>
|
||||||
|
<button
|
||||||
|
aria-label="Statistics"
|
||||||
|
use:pressable
|
||||||
|
class="flex h-11 w-11 items-center justify-center rounded-full
|
||||||
|
border border-[#222] text-[#383838]
|
||||||
|
transition-colors duration-200
|
||||||
|
hover:border-[#333] hover:text-[#666]"
|
||||||
|
onclick={() => {
|
||||||
|
invoke("set_view", { view: "stats" });
|
||||||
|
currentView.set("stats");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="17"
|
||||||
|
height="17"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<rect x="3" y="12" width="4" height="9" rx="1" />
|
||||||
|
<rect x="10" y="7" width="4" height="14" rx="1" />
|
||||||
|
<rect x="17" y="3" width="4" height="18" rx="1" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom right: settings -->
|
||||||
|
<div class="absolute bottom-5 right-5" use:fadeIn={{ delay: 0.55, y: 8 }}>
|
||||||
|
<button
|
||||||
|
aria-label="Settings"
|
||||||
|
use:pressable
|
||||||
|
class="flex h-11 w-11 items-center justify-center rounded-full
|
||||||
|
border border-[#222] text-[#383838]
|
||||||
|
transition-colors duration-200
|
||||||
|
hover:border-[#333] hover:text-[#666]"
|
||||||
|
onclick={openSettings}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="17"
|
||||||
|
height="17"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
|
||||||
|
/>
|
||||||
|
<circle cx="12" cy="12" r="3" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Eye blink animation - natural human blink (~4s interval, 0.5s duration) */
|
||||||
|
.eye-blink {
|
||||||
|
transform-origin: center center;
|
||||||
|
animation: blink 4s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
0%, 45%, 55%, 100% {
|
||||||
|
transform: scaleY(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scaleY(0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
98
src/lib/components/FontSelector.svelte
Normal file
98
src/lib/components/FontSelector.svelte
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { slide } from "svelte/transition";
|
||||||
|
import { cubicOut } from "svelte/easing";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
value: string;
|
||||||
|
onchange?: (font: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
value = $bindable(),
|
||||||
|
onchange,
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
const fonts = [
|
||||||
|
{ family: "", label: "System Default" },
|
||||||
|
{ family: "JetBrains Mono", label: "JetBrains Mono" },
|
||||||
|
{ family: "Space Mono", label: "Space Mono" },
|
||||||
|
{ family: "Roboto Mono", label: "Roboto Mono" },
|
||||||
|
{ family: "Fira Code", label: "Fira Code" },
|
||||||
|
{ family: "IBM Plex Mono", label: "IBM Plex Mono" },
|
||||||
|
{ family: "Source Code Pro", label: "Source Code Pro" },
|
||||||
|
{ family: "Share Tech Mono", label: "Share Tech Mono" },
|
||||||
|
{ family: "Major Mono Display", label: "Major Mono" },
|
||||||
|
{ family: "Azeret Mono", label: "Azeret Mono" },
|
||||||
|
{ family: "DM Mono", label: "DM Mono" },
|
||||||
|
{ family: "Inconsolata", label: "Inconsolata" },
|
||||||
|
{ family: "Ubuntu Mono", label: "Ubuntu Mono" },
|
||||||
|
{ family: "Overpass Mono", label: "Overpass Mono" },
|
||||||
|
{ family: "Red Hat Mono", label: "Red Hat Mono" },
|
||||||
|
{ family: "Martian Mono", label: "Martian Mono" },
|
||||||
|
{ family: "Noto Sans Mono", label: "Noto Sans Mono" },
|
||||||
|
{ family: "Oxygen Mono", label: "Oxygen Mono" },
|
||||||
|
{ family: "Anonymous Pro", label: "Anonymous Pro" },
|
||||||
|
{ family: "Courier Prime", label: "Courier Prime" },
|
||||||
|
];
|
||||||
|
|
||||||
|
function selectFont(family: string) {
|
||||||
|
value = family;
|
||||||
|
onchange?.(family);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fontStyle(family: string): string {
|
||||||
|
return family ? `font-family: '${family}', monospace;` : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
let expanded = $state(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<!-- Header row -->
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="text-[13px] text-white">Countdown font</div>
|
||||||
|
<div class="text-[11px] text-[#555]">
|
||||||
|
{value || "System default"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="rounded-lg border border-[#1a1a1a] bg-black px-3 py-1.5 text-[12px] text-[#666]
|
||||||
|
transition-colors hover:border-[#333] hover:text-white"
|
||||||
|
onclick={() => { expanded = !expanded; }}
|
||||||
|
>
|
||||||
|
{expanded ? "Close" : "Browse"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Font preview grid -->
|
||||||
|
{#if expanded}
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-2 gap-2"
|
||||||
|
transition:slide={{ duration: 280, easing: cubicOut }}
|
||||||
|
>
|
||||||
|
{#each fonts as font}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex flex-col items-center gap-1.5 rounded-xl border p-3
|
||||||
|
transition-all duration-150
|
||||||
|
{value === font.family
|
||||||
|
? 'border-white/30 bg-[#141414]'
|
||||||
|
: 'border-[#141414] bg-[#0a0a0a] hover:border-[#222] hover:bg-[#0f0f0f]'}"
|
||||||
|
onclick={() => selectFont(font.family)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="text-[28px] leading-none tabular-nums text-white"
|
||||||
|
style={fontStyle(font.family)}
|
||||||
|
>
|
||||||
|
25:00
|
||||||
|
</span>
|
||||||
|
<span class="text-[9px] tracking-wider text-[#555] uppercase">
|
||||||
|
{font.label}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
336
src/lib/components/MiniTimer.svelte
Normal file
336
src/lib/components/MiniTimer.svelte
Normal file
@@ -0,0 +1,336 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { listen } from "@tauri-apps/api/event";
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
|
||||||
|
import { LogicalSize } from "@tauri-apps/api/dpi";
|
||||||
|
import type { TimerSnapshot } from "../stores/timer";
|
||||||
|
import { config, loadConfig } from "../stores/config";
|
||||||
|
|
||||||
|
const appWindow = getCurrentWebviewWindow();
|
||||||
|
|
||||||
|
let timeText = $state("--:--");
|
||||||
|
let state = $state<"running" | "paused" | "breakActive">("paused");
|
||||||
|
let progress = $state(0);
|
||||||
|
let accentColor = $state("#ff4d00");
|
||||||
|
let breakColor = $state("#7c6aef");
|
||||||
|
let countdownFont = $state("");
|
||||||
|
let draggable = $state(false);
|
||||||
|
|
||||||
|
// Use config store directly for live updates
|
||||||
|
const uiZoom = $derived($config.ui_zoom);
|
||||||
|
|
||||||
|
function formatTime(secs: number): string {
|
||||||
|
const m = Math.floor(secs / 60);
|
||||||
|
const s = secs % 60;
|
||||||
|
return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sync local color/font state from the config store
|
||||||
|
function applyConfigLocals() {
|
||||||
|
accentColor = $config.accent_color || "#ff4d00";
|
||||||
|
breakColor = $config.break_color || "#7c6aef";
|
||||||
|
countdownFont = $config.countdown_font || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
// Get initial state
|
||||||
|
try {
|
||||||
|
const snap = await invoke<TimerSnapshot>("get_timer_state");
|
||||||
|
updateFromSnapshot(snap);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Mini: Failed to get state", e);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load config into the shared config store
|
||||||
|
await loadConfig();
|
||||||
|
applyConfigLocals();
|
||||||
|
|
||||||
|
// Live-reload config when main window changes settings (zoom, colors, etc.)
|
||||||
|
await listen("config-changed", async () => {
|
||||||
|
await loadConfig();
|
||||||
|
applyConfigLocals();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen for ticks
|
||||||
|
await listen<TimerSnapshot>("timer-tick", (event) => {
|
||||||
|
updateFromSnapshot(event.payload);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save position on move (debounced)
|
||||||
|
let posTimer: ReturnType<typeof setTimeout>;
|
||||||
|
appWindow.onMoved(() => {
|
||||||
|
clearTimeout(posTimer);
|
||||||
|
posTimer = setTimeout(async () => {
|
||||||
|
try {
|
||||||
|
const pos = await appWindow.outerPosition();
|
||||||
|
await invoke("save_window_position", {
|
||||||
|
label: "mini", x: pos.x, y: pos.y, width: 184, height: 92,
|
||||||
|
});
|
||||||
|
} catch {}
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// Click-through mode: reactive to config changes
|
||||||
|
$effect(() => {
|
||||||
|
const isClickThrough = $config.mini_click_through;
|
||||||
|
const threshold = $config.mini_hover_threshold;
|
||||||
|
|
||||||
|
if (!isClickThrough) {
|
||||||
|
appWindow.setIgnoreCursorEvents(false);
|
||||||
|
draggable = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
appWindow.setIgnoreCursorEvents(true);
|
||||||
|
draggable = false;
|
||||||
|
let hoverTime = 0;
|
||||||
|
let localDraggable = false;
|
||||||
|
const POLL_MS = 200;
|
||||||
|
|
||||||
|
const interval = setInterval(async () => {
|
||||||
|
try {
|
||||||
|
const [cx, cy] = await invoke<[number, number]>("get_cursor_position");
|
||||||
|
const pos = await appWindow.outerPosition();
|
||||||
|
const size = await appWindow.outerSize();
|
||||||
|
|
||||||
|
const inside =
|
||||||
|
cx >= pos.x && cx <= pos.x + size.width &&
|
||||||
|
cy >= pos.y && cy <= pos.y + size.height;
|
||||||
|
|
||||||
|
if (inside) {
|
||||||
|
hoverTime += POLL_MS / 1000;
|
||||||
|
if (hoverTime >= threshold && !localDraggable) {
|
||||||
|
localDraggable = true;
|
||||||
|
draggable = true;
|
||||||
|
await appWindow.setIgnoreCursorEvents(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (localDraggable) {
|
||||||
|
localDraggable = false;
|
||||||
|
draggable = false;
|
||||||
|
await appWindow.setIgnoreCursorEvents(true);
|
||||||
|
}
|
||||||
|
hoverTime = 0;
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
}, POLL_MS);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateFromSnapshot(snap: TimerSnapshot) {
|
||||||
|
state = snap.state;
|
||||||
|
if (snap.state === "breakActive") {
|
||||||
|
timeText = formatTime(snap.breakTimeRemaining);
|
||||||
|
progress = snap.breakTotalDuration > 0
|
||||||
|
? snap.breakTimeRemaining / snap.breakTotalDuration
|
||||||
|
: 0;
|
||||||
|
} else {
|
||||||
|
timeText = formatTime(snap.timeRemaining);
|
||||||
|
progress = snap.progress;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Click opens main window
|
||||||
|
async function openMain() {
|
||||||
|
try {
|
||||||
|
await invoke("set_view", { view: "dashboard" });
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Drag support
|
||||||
|
function startDrag(e: MouseEvent) {
|
||||||
|
if (e.button === 0) {
|
||||||
|
appWindow.startDragging();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ring SVG computations
|
||||||
|
const ringSize = 34;
|
||||||
|
const strokeW = 3;
|
||||||
|
const pad = 16;
|
||||||
|
const viewSize = ringSize + pad * 2;
|
||||||
|
const radius = (ringSize - strokeW) / 2;
|
||||||
|
const circumference = 2 * Math.PI * radius;
|
||||||
|
const dashOffset = $derived(circumference * (1 - progress));
|
||||||
|
const ctr = viewSize / 2;
|
||||||
|
|
||||||
|
const activeColor = $derived(state === "breakActive" ? breakColor : accentColor);
|
||||||
|
|
||||||
|
function lighten(hex: string, amount: number): string {
|
||||||
|
const r = parseInt(hex.slice(1, 3), 16);
|
||||||
|
const g = parseInt(hex.slice(3, 5), 16);
|
||||||
|
const b = parseInt(hex.slice(5, 7), 16);
|
||||||
|
const lr = Math.min(255, r + (255 - r) * amount);
|
||||||
|
const lg = Math.min(255, g + (255 - g) * amount);
|
||||||
|
const lb = Math.min(255, b + (255 - b) * amount);
|
||||||
|
return `#${Math.round(lr).toString(16).padStart(2, "0")}${Math.round(lg).toString(16).padStart(2, "0")}${Math.round(lb).toString(16).padStart(2, "0")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const gradA = $derived(activeColor);
|
||||||
|
const gradB = $derived(lighten(activeColor, 0.25));
|
||||||
|
|
||||||
|
const fontStyle = $derived(
|
||||||
|
countdownFont ? `font-family: '${countdownFont}', monospace;` : ""
|
||||||
|
);
|
||||||
|
|
||||||
|
const zoomScale = $derived(uiZoom / 100);
|
||||||
|
|
||||||
|
// Base window dimensions (matches lib.rs toggle_mini_window)
|
||||||
|
const MINI_BASE_W = 184;
|
||||||
|
const MINI_BASE_H = 92;
|
||||||
|
|
||||||
|
// Resize the actual Tauri window when zoom changes
|
||||||
|
$effect(() => {
|
||||||
|
const scale = uiZoom / 100;
|
||||||
|
const w = Math.round(MINI_BASE_W * scale);
|
||||||
|
const h = Math.round(MINI_BASE_H * scale);
|
||||||
|
appWindow.setSize(new LogicalSize(w, h));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
|
<div class="w-full h-full flex items-center justify-center overflow-hidden">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: {100 / zoomScale}%;
|
||||||
|
height: {100 / zoomScale}%;
|
||||||
|
transform: scale({zoomScale});
|
||||||
|
transform-origin: center center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-center w-full h-full"
|
||||||
|
style="padding: 22px 14px 22px 24px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mini-pill flex h-full w-full items-center select-none"
|
||||||
|
class:mini-draggable={draggable}
|
||||||
|
style="
|
||||||
|
background: rgba(0, 0, 0, 0.85);
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: 1px solid {draggable ? 'rgba(255, 255, 255, 0.25)' : 'rgba(255, 255, 255, 0.08)'};
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
cursor: {draggable ? 'grab' : 'default'};
|
||||||
|
padding: 0 12px 0 5px;
|
||||||
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
{draggable ? `box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);` : ''}
|
||||||
|
"
|
||||||
|
onmousedown={draggable ? startDrag : undefined}
|
||||||
|
ondblclick={draggable ? openMain : undefined}
|
||||||
|
>
|
||||||
|
<!-- Mini ring with glow -->
|
||||||
|
<div class="relative flex-shrink-0" style="width: {ringSize}px; height: {ringSize}px;">
|
||||||
|
<!-- Glow SVG (larger for blur room) -->
|
||||||
|
<svg
|
||||||
|
width={viewSize}
|
||||||
|
height={viewSize}
|
||||||
|
class="pointer-events-none absolute"
|
||||||
|
style="left: {-pad}px; top: {-pad}px; transform: rotate(-90deg); overflow: visible;"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="mini-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color={gradA} />
|
||||||
|
<stop offset="100%" stop-color={gradB} />
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="mini-glow-wide" x="-100%" y="-100%" width="300%" height="300%">
|
||||||
|
<feGaussianBlur stdDeviation="8" />
|
||||||
|
</filter>
|
||||||
|
<filter id="mini-glow-mid" x="-60%" y="-60%" width="220%" height="220%">
|
||||||
|
<feGaussianBlur stdDeviation="4" />
|
||||||
|
</filter>
|
||||||
|
<filter id="mini-glow-core" x="-40%" y="-40%" width="180%" height="180%">
|
||||||
|
<feGaussianBlur stdDeviation="2" result="blur" />
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="blur" />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
{#if progress > 0.002}
|
||||||
|
<!-- Layer 1: Wide ambient bloom -->
|
||||||
|
<circle
|
||||||
|
cx={ctr} cy={ctr} r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#mini-grad)"
|
||||||
|
stroke-width={strokeW * 4}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-dasharray={circumference}
|
||||||
|
stroke-dashoffset={dashOffset}
|
||||||
|
filter="url(#mini-glow-wide)"
|
||||||
|
opacity="0.35"
|
||||||
|
class="transition-[stroke-dashoffset] duration-1000 ease-linear"
|
||||||
|
/>
|
||||||
|
<!-- Layer 2: Medium glow -->
|
||||||
|
<circle
|
||||||
|
cx={ctr} cy={ctr} r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#mini-grad)"
|
||||||
|
stroke-width={strokeW * 2}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-dasharray={circumference}
|
||||||
|
stroke-dashoffset={dashOffset}
|
||||||
|
filter="url(#mini-glow-mid)"
|
||||||
|
opacity="0.5"
|
||||||
|
class="transition-[stroke-dashoffset] duration-1000 ease-linear"
|
||||||
|
/>
|
||||||
|
<!-- Layer 3: Core tight glow -->
|
||||||
|
<circle
|
||||||
|
cx={ctr} cy={ctr} r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#mini-grad)"
|
||||||
|
stroke-width={strokeW}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-dasharray={circumference}
|
||||||
|
stroke-dashoffset={dashOffset}
|
||||||
|
filter="url(#mini-glow-core)"
|
||||||
|
class="transition-[stroke-dashoffset] duration-1000 ease-linear"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Non-glow SVG: track + crisp ring -->
|
||||||
|
<svg
|
||||||
|
width={ringSize}
|
||||||
|
height={ringSize}
|
||||||
|
class="absolute"
|
||||||
|
style="transform: rotate(-90deg);"
|
||||||
|
>
|
||||||
|
<!-- Background track -->
|
||||||
|
<circle
|
||||||
|
cx={ringSize / 2} cy={ringSize / 2} r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke={state === "paused" ? "#1a1a1a" : "#161616"}
|
||||||
|
stroke-width={strokeW}
|
||||||
|
/>
|
||||||
|
{#if progress > 0.002}
|
||||||
|
<!-- Foreground arc -->
|
||||||
|
<circle
|
||||||
|
cx={ringSize / 2} cy={ringSize / 2} r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#mini-grad)"
|
||||||
|
stroke-width={strokeW}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-dasharray={circumference}
|
||||||
|
stroke-dashoffset={dashOffset}
|
||||||
|
class="transition-[stroke-dashoffset] duration-1000 ease-linear"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Countdown text -->
|
||||||
|
<span
|
||||||
|
class="ml-2.5 text-[18px] font-semibold leading-none tabular-nums"
|
||||||
|
style="color: {state === 'paused' ? '#555' : '#fff'}; {fontStyle}"
|
||||||
|
>
|
||||||
|
{timeText}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
801
src/lib/components/Settings.svelte
Normal file
801
src/lib/components/Settings.svelte
Normal file
@@ -0,0 +1,801 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { timer, currentView } from "../stores/timer";
|
||||||
|
import { config, autoSave, loadConfig, resetConfig } from "../stores/config";
|
||||||
|
import ToggleSwitch from "./ToggleSwitch.svelte";
|
||||||
|
import Stepper from "./Stepper.svelte";
|
||||||
|
import ColorPicker from "./ColorPicker.svelte";
|
||||||
|
import FontSelector from "./FontSelector.svelte";
|
||||||
|
import TimeSpinner from "./TimeSpinner.svelte";
|
||||||
|
import { fadeIn, inView, pressable, dragScroll } from "../utils/animate";
|
||||||
|
import { playSound } from "../utils/sounds";
|
||||||
|
import type { TimeRange } from "../stores/config";
|
||||||
|
|
||||||
|
const soundPresets = ["bell", "chime", "soft", "digital", "harp", "bowl", "rain", "whistle"] as const;
|
||||||
|
const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] as const;
|
||||||
|
|
||||||
|
function goBack() {
|
||||||
|
invoke("set_view", { view: "dashboard" });
|
||||||
|
currentView.set("dashboard");
|
||||||
|
}
|
||||||
|
|
||||||
|
function markChanged() {
|
||||||
|
autoSave();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Working hours functions
|
||||||
|
function toggleDayEnabled(dayIndex: number) {
|
||||||
|
$config.working_hours_schedule[dayIndex].enabled = !$config.working_hours_schedule[dayIndex].enabled;
|
||||||
|
$config.working_hours_schedule = $config.working_hours_schedule;
|
||||||
|
markChanged();
|
||||||
|
}
|
||||||
|
|
||||||
|
function addTimeRange(dayIndex: number) {
|
||||||
|
$config.working_hours_schedule[dayIndex].ranges = [
|
||||||
|
...$config.working_hours_schedule[dayIndex].ranges,
|
||||||
|
{ start: "09:00", end: "18:00" }
|
||||||
|
];
|
||||||
|
$config.working_hours_schedule = $config.working_hours_schedule;
|
||||||
|
markChanged();
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeTimeRange(dayIndex: number, rangeIndex: number) {
|
||||||
|
if ($config.working_hours_schedule[dayIndex].ranges.length > 1) {
|
||||||
|
$config.working_hours_schedule[dayIndex].ranges = $config.working_hours_schedule[dayIndex].ranges.filter((_, i) => i !== rangeIndex);
|
||||||
|
$config.working_hours_schedule = $config.working_hours_schedule;
|
||||||
|
markChanged();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function cloneTimeRange(dayIndex: number, rangeIndex: number) {
|
||||||
|
const range = $config.working_hours_schedule[dayIndex].ranges[rangeIndex];
|
||||||
|
$config.working_hours_schedule[dayIndex].ranges = [
|
||||||
|
...$config.working_hours_schedule[dayIndex].ranges,
|
||||||
|
{ ...range }
|
||||||
|
];
|
||||||
|
$config.working_hours_schedule = $config.working_hours_schedule;
|
||||||
|
markChanged();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTimeRange(dayIndex: number, rangeIndex: number, field: "start" | "end", value: string) {
|
||||||
|
$config.working_hours_schedule[dayIndex].ranges[rangeIndex][field] = value;
|
||||||
|
$config.working_hours_schedule = $config.working_hours_schedule;
|
||||||
|
markChanged();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset button two-click confirmation
|
||||||
|
let resetConfirming = $state(false);
|
||||||
|
let resetTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
|
function handleReset() {
|
||||||
|
if (!resetConfirming) {
|
||||||
|
resetConfirming = true;
|
||||||
|
// Auto-cancel after 3 seconds
|
||||||
|
resetTimeout = setTimeout(() => {
|
||||||
|
resetConfirming = false;
|
||||||
|
}, 3000);
|
||||||
|
} else {
|
||||||
|
resetConfirming = false;
|
||||||
|
if (resetTimeout) clearTimeout(resetTimeout);
|
||||||
|
resetConfig();
|
||||||
|
autoSave();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reload config when entering settings
|
||||||
|
$effect(() => {
|
||||||
|
loadConfig();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex h-full flex-col">
|
||||||
|
<!-- Header -->
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
class="flex items-center px-5 pt-5 pb-4"
|
||||||
|
use:fadeIn={{ duration: 0.4, y: 8 }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="Back to dashboard"
|
||||||
|
use:pressable
|
||||||
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full
|
||||||
|
text-[#444] transition-colors hover:text-white"
|
||||||
|
onclick={goBack}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="15 18 9 12 15 6" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1
|
||||||
|
data-tauri-drag-region
|
||||||
|
class="flex-1 text-lg font-medium text-white"
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scrollable content with drag scroll -->
|
||||||
|
<div
|
||||||
|
class="settings-scroll-container flex-1 overflow-y-auto px-5 pb-6"
|
||||||
|
use:dragScroll
|
||||||
|
>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- Timer -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Timer
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Break frequency</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
Every {$config.break_frequency} min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.break_frequency}
|
||||||
|
min={5}
|
||||||
|
max={120}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Break duration</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
{$config.break_duration} min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.break_duration}
|
||||||
|
min={1}
|
||||||
|
max={60}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Auto-start</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Start timer on launch</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.auto_start}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Break Screen -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.06 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Break Screen
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1.5">
|
||||||
|
<label class="text-[13px] text-white" for="break-title">
|
||||||
|
Break title
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="break-title"
|
||||||
|
type="text"
|
||||||
|
class="rounded-xl border border-[#161616] bg-black px-3.5 py-2.5 text-[13px]
|
||||||
|
text-white outline-none transition-colors
|
||||||
|
placeholder:text-[#2a2a2a] focus:border-[#333]"
|
||||||
|
placeholder="Enter break title..."
|
||||||
|
bind:value={$config.break_title}
|
||||||
|
oninput={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1.5">
|
||||||
|
<label class="text-[13px] text-white" for="break-message">
|
||||||
|
Break message
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="break-message"
|
||||||
|
type="text"
|
||||||
|
class="rounded-xl border border-[#161616] bg-black px-3.5 py-2.5 text-[13px]
|
||||||
|
text-white outline-none transition-colors
|
||||||
|
placeholder:text-[#2a2a2a] focus:border-[#333]"
|
||||||
|
placeholder="Enter break message..."
|
||||||
|
bind:value={$config.break_message}
|
||||||
|
oninput={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Fullscreen break</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
{$config.fullscreen_mode ? "Fills entire screen" : "Centered modal"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.fullscreen_mode}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Activity suggestions</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
Exercise ideas during breaks
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.show_break_activities}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Behavior -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.12 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Behavior
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Strict mode</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
Disable skip and snooze
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.strict_mode}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if !$config.strict_mode}
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Allow end early</div>
|
||||||
|
<div class="text-[11px] text-[#777]">After 50% of break</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.allow_end_early}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Snooze duration</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
{$config.snooze_duration} min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.snooze_duration}
|
||||||
|
min={1}
|
||||||
|
max={30}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Snooze limit</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
{$config.snooze_limit === 0
|
||||||
|
? "Unlimited"
|
||||||
|
: `${$config.snooze_limit} per break`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.snooze_limit}
|
||||||
|
min={0}
|
||||||
|
max={5}
|
||||||
|
formatValue={(v) => (v === 0 ? "\u221E" : String(v))}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Immediate breaks</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
Skip pre-break warning
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.immediately_start_breaks}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Working Hours -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.18 }}>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Working hours</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
Only show breaks during your configured work schedule
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.working_hours_enabled}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $config.working_hours_enabled}
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
{#each $config.working_hours_schedule as daySchedule, dayIndex}
|
||||||
|
{@const dayName = daysOfWeek[dayIndex]}
|
||||||
|
<div class="mb-4">
|
||||||
|
<!-- Day header with toggle -->
|
||||||
|
<div class="flex items-center gap-3 mb-3">
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.working_hours_schedule[dayIndex].enabled}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
<span class="text-[13px] text-white w-20">{dayName}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if daySchedule.enabled}
|
||||||
|
<!-- Time ranges for this day -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
{#each daySchedule.ranges as range, rangeIndex}
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<TimeSpinner
|
||||||
|
value={range.start}
|
||||||
|
countdownFont={$config.countdown_font}
|
||||||
|
onchange={(v) => updateTimeRange(dayIndex, rangeIndex, "start", v)}
|
||||||
|
/>
|
||||||
|
<span class="text-[#555] text-[13px]">to</span>
|
||||||
|
<TimeSpinner
|
||||||
|
value={range.end}
|
||||||
|
countdownFont={$config.countdown_font}
|
||||||
|
onchange={(v) => updateTimeRange(dayIndex, rangeIndex, "end", v)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Add range button -->
|
||||||
|
{#if rangeIndex === daySchedule.ranges.length - 1}
|
||||||
|
<button
|
||||||
|
use:pressable
|
||||||
|
class="ml-2 w-8 h-8 flex items-center justify-center rounded-full text-[#444] hover:text-white hover:bg-[#1a1a1a] transition-colors"
|
||||||
|
onclick={() => addTimeRange(dayIndex)}
|
||||||
|
aria-label="Add time range"
|
||||||
|
>
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 5v14M5 12h14"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Clone button -->
|
||||||
|
<button
|
||||||
|
use:pressable
|
||||||
|
class="w-8 h-8 flex items-center justify-center rounded-full text-[#444] hover:text-white hover:bg-[#1a1a1a] transition-colors"
|
||||||
|
onclick={() => cloneTimeRange(dayIndex, rangeIndex)}
|
||||||
|
aria-label="Clone time range"
|
||||||
|
>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
|
||||||
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Delete button (never show for first range) -->
|
||||||
|
{#if rangeIndex > 0}
|
||||||
|
<button
|
||||||
|
use:pressable
|
||||||
|
class="w-8 h-8 flex items-center justify-center rounded-full text-[#444] hover:text-[#f85149] hover:bg-[#f8514915] transition-colors"
|
||||||
|
onclick={() => removeTimeRange(dayIndex, rangeIndex)}
|
||||||
|
aria-label="Remove time range"
|
||||||
|
>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M18 6L6 18M6 6l12 12"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if dayIndex < 6}
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Idle Detection -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.21 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Idle Detection
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Auto-pause when idle</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Pause timer when away</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.idle_detection_enabled}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $config.idle_detection_enabled}
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Idle timeout</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
{$config.idle_timeout}s of inactivity
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.idle_timeout}
|
||||||
|
min={30}
|
||||||
|
max={600}
|
||||||
|
step={30}
|
||||||
|
formatValue={(v) => `${v}s`}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Smart Breaks -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.24 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Smart Breaks
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Enable smart breaks</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Auto-reset timer when you step away</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.smart_breaks_enabled}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $config.smart_breaks_enabled}
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Minimum away time</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
{$config.smart_break_threshold >= 60
|
||||||
|
? `${Math.floor($config.smart_break_threshold / 60)} min`
|
||||||
|
: `${$config.smart_break_threshold}s`} to count as break
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.smart_break_threshold}
|
||||||
|
min={120}
|
||||||
|
max={900}
|
||||||
|
step={60}
|
||||||
|
formatValue={(v) => `${Math.floor(v / 60)}m`}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Count in statistics</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Track natural breaks in stats</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.smart_break_count_stats}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Notifications -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.27 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Notifications
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Pre-break alert</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Warn before breaks</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.notification_enabled}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $config.notification_enabled}
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Alert timing</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
{$config.notification_before_break}s before
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.notification_before_break}
|
||||||
|
min={0}
|
||||||
|
max={300}
|
||||||
|
step={10}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Sound -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.27 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Sound
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Sound effects</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Play sounds on break events</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.sound_enabled}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $config.sound_enabled}
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Volume</div>
|
||||||
|
<div class="text-[11px] text-[#777]">{$config.sound_volume}%</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.sound_volume}
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
step={10}
|
||||||
|
formatValue={(v) => `${v}%`}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="mb-3 text-[13px] text-white">Sound preset</div>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
{#each soundPresets as preset}
|
||||||
|
<button
|
||||||
|
use:pressable
|
||||||
|
class="rounded-xl py-2.5 text-[11px] tracking-wider uppercase
|
||||||
|
transition-all duration-200
|
||||||
|
{$config.sound_preset === preset
|
||||||
|
? 'bg-[#1a1a1a] text-white border border-[#333]'
|
||||||
|
: 'bg-[#0a0a0a] text-[#555] border border-[#161616] hover:border-[#333] hover:text-[#999]'}"
|
||||||
|
onclick={() => {
|
||||||
|
$config.sound_preset = preset;
|
||||||
|
markChanged();
|
||||||
|
playSound(preset, $config.sound_volume);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{preset}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Appearance -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.3 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Appearance
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">UI zoom</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
{$config.ui_zoom}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.ui_zoom}
|
||||||
|
min={50}
|
||||||
|
max={200}
|
||||||
|
step={5}
|
||||||
|
formatValue={(v) => `${v}%`}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<ColorPicker
|
||||||
|
label="Accent color"
|
||||||
|
bind:value={$config.accent_color}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<ColorPicker
|
||||||
|
label="Break screen color"
|
||||||
|
bind:value={$config.break_color}
|
||||||
|
presets={[
|
||||||
|
"#7c6aef", "#9b5de5", "#4361ee", "#4895ef",
|
||||||
|
"#2ec4b6", "#06d6a0", "#3fb950", "#80ed99",
|
||||||
|
"#f72585", "#ff006e", "#e63946", "#ff4d00",
|
||||||
|
"#fca311", "#ffbe0b", "#ffffff", "#888888",
|
||||||
|
]}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<FontSelector
|
||||||
|
bind:value={$config.countdown_font}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[13px] text-white">Animated background</div>
|
||||||
|
<div class="text-[11px] text-[#777]">
|
||||||
|
Gradient blobs with film grain
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.background_blobs_enabled}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Mini Mode -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.33 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Mini Mode
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="text-[13px] text-white">Click-through</div>
|
||||||
|
<div class="text-[11px] text-[#555]">
|
||||||
|
Mini timer ignores clicks until you hover over it
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ToggleSwitch
|
||||||
|
bind:checked={$config.mini_click_through}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $config.mini_click_through}
|
||||||
|
<div class="mt-4 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="text-[13px] text-white">Hover delay</div>
|
||||||
|
<div class="text-[11px] text-[#555]">
|
||||||
|
Seconds to hover before it becomes draggable
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Stepper
|
||||||
|
bind:value={$config.mini_hover_threshold}
|
||||||
|
min={1}
|
||||||
|
max={10}
|
||||||
|
step={0.5}
|
||||||
|
formatValue={(v) => `${v}s`}
|
||||||
|
onchange={markChanged}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Shortcuts -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.36 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Keyboard Shortcuts
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-[13px] text-white">Pause / Resume</span>
|
||||||
|
<kbd class="rounded-lg bg-[#161616] px-2.5 py-1 text-[11px] text-[#666]">Ctrl+Shift+P</kbd>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-[13px] text-white">Start break now</span>
|
||||||
|
<kbd class="rounded-lg bg-[#161616] px-2.5 py-1 text-[11px] text-[#666]">Ctrl+Shift+B</kbd>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-[13px] text-white">Show / Hide window</span>
|
||||||
|
<kbd class="rounded-lg bg-[#161616] px-2.5 py-1 text-[11px] text-[#666]">Ctrl+Shift+S</kbd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Reset -->
|
||||||
|
<div class="pt-2 pb-6" use:inView={{ delay: 0.39 }}>
|
||||||
|
<button
|
||||||
|
use:pressable
|
||||||
|
class="w-full rounded-full border py-3 text-[12px]
|
||||||
|
tracking-wider uppercase
|
||||||
|
transition-all duration-200
|
||||||
|
{resetConfirming
|
||||||
|
? 'border-[#f85149] text-[#f85149] hover:bg-[#f85149] hover:text-white'
|
||||||
|
: 'border-[#1a1a1a] text-[#444] hover:border-[#333] hover:text-white'}"
|
||||||
|
onclick={handleReset}
|
||||||
|
>
|
||||||
|
{resetConfirming ? "Tap again to confirm reset" : "Reset to defaults"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
274
src/lib/components/StatsView.svelte
Normal file
274
src/lib/components/StatsView.svelte
Normal file
@@ -0,0 +1,274 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { currentView } from "../stores/timer";
|
||||||
|
import { config } from "../stores/config";
|
||||||
|
import { fadeIn, inView, pressable, dragScroll } from "../utils/animate";
|
||||||
|
|
||||||
|
interface StatsSnapshot {
|
||||||
|
todayCompleted: number;
|
||||||
|
todaySkipped: number;
|
||||||
|
todaySnoozed: number;
|
||||||
|
todayBreakTimeSecs: number;
|
||||||
|
complianceRate: number;
|
||||||
|
currentStreak: number;
|
||||||
|
bestStreak: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DayRecord {
|
||||||
|
date: string;
|
||||||
|
breaksCompleted: number;
|
||||||
|
breaksSkipped: number;
|
||||||
|
breaksSnoozed: number;
|
||||||
|
totalBreakTimeSecs: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
let stats = $state<StatsSnapshot | null>(null);
|
||||||
|
let history = $state<DayRecord[]>([]);
|
||||||
|
|
||||||
|
async function loadStats() {
|
||||||
|
try {
|
||||||
|
stats = await invoke<StatsSnapshot>("get_stats");
|
||||||
|
history = await invoke<DayRecord[]>("get_daily_history", { days: 7 });
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to load stats:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
loadStats();
|
||||||
|
});
|
||||||
|
|
||||||
|
function goBack() {
|
||||||
|
invoke("set_view", { view: "dashboard" });
|
||||||
|
currentView.set("dashboard");
|
||||||
|
}
|
||||||
|
|
||||||
|
const compliancePercent = $derived(
|
||||||
|
stats ? Math.round(stats.complianceRate * 100) : 100,
|
||||||
|
);
|
||||||
|
|
||||||
|
const breakTimeFormatted = $derived(() => {
|
||||||
|
if (!stats) return "0 min";
|
||||||
|
const mins = Math.floor(stats.todayBreakTimeSecs / 60);
|
||||||
|
if (mins < 60) return `${mins} min`;
|
||||||
|
const hrs = Math.floor(mins / 60);
|
||||||
|
const rem = mins % 60;
|
||||||
|
return `${hrs}h ${rem}m`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Chart rendering
|
||||||
|
let chartCanvas: HTMLCanvasElement | undefined = $state();
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (!chartCanvas || history.length === 0) return;
|
||||||
|
drawChart(chartCanvas, history);
|
||||||
|
});
|
||||||
|
|
||||||
|
function drawChart(canvas: HTMLCanvasElement, data: DayRecord[]) {
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
const w = canvas.clientWidth;
|
||||||
|
const h = canvas.clientHeight;
|
||||||
|
canvas.width = w * dpr;
|
||||||
|
canvas.height = h * dpr;
|
||||||
|
ctx.scale(dpr, dpr);
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, w, h);
|
||||||
|
|
||||||
|
const maxBreaks = Math.max(1, ...data.map((d) => d.breaksCompleted + d.breaksSkipped));
|
||||||
|
const barWidth = Math.floor((w - 40) / data.length) - 8;
|
||||||
|
const barGap = 8;
|
||||||
|
const chartHeight = h - 30;
|
||||||
|
|
||||||
|
const accentColor = $config.accent_color || "#ff4d00";
|
||||||
|
|
||||||
|
data.forEach((day, i) => {
|
||||||
|
const x = 20 + i * (barWidth + barGap);
|
||||||
|
const total = day.breaksCompleted + day.breaksSkipped;
|
||||||
|
const completedH = total > 0 ? (day.breaksCompleted / maxBreaks) * chartHeight : 0;
|
||||||
|
const skippedH = total > 0 ? (day.breaksSkipped / maxBreaks) * chartHeight : 0;
|
||||||
|
|
||||||
|
// Completed bar
|
||||||
|
if (completedH > 0) {
|
||||||
|
ctx.fillStyle = accentColor;
|
||||||
|
ctx.beginPath();
|
||||||
|
const barY = chartHeight - completedH;
|
||||||
|
roundedRect(ctx, x, barY, barWidth, completedH, 4);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skipped bar (stacked on top)
|
||||||
|
if (skippedH > 0) {
|
||||||
|
ctx.fillStyle = "#333";
|
||||||
|
ctx.beginPath();
|
||||||
|
const barY = chartHeight - completedH - skippedH;
|
||||||
|
roundedRect(ctx, x, barY, barWidth, skippedH, 4);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Day label
|
||||||
|
ctx.fillStyle = "#444";
|
||||||
|
ctx.font = "10px -apple-system, sans-serif";
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
const label = day.date.slice(5); // "MM-DD"
|
||||||
|
ctx.fillText(label, x + barWidth / 2, h - 5);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function roundedRect(
|
||||||
|
ctx: CanvasRenderingContext2D,
|
||||||
|
x: number,
|
||||||
|
y: number,
|
||||||
|
w: number,
|
||||||
|
h: number,
|
||||||
|
r: number,
|
||||||
|
) {
|
||||||
|
r = Math.min(r, h / 2, w / 2);
|
||||||
|
ctx.moveTo(x + r, y);
|
||||||
|
ctx.lineTo(x + w - r, y);
|
||||||
|
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
|
||||||
|
ctx.lineTo(x + w, y + h - r);
|
||||||
|
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
|
||||||
|
ctx.lineTo(x + r, y + h);
|
||||||
|
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
|
||||||
|
ctx.lineTo(x, y + r);
|
||||||
|
ctx.quadraticCurveTo(x, y, x + r, y);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex h-full flex-col">
|
||||||
|
<!-- Header -->
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
class="flex items-center px-5 pt-5 pb-4"
|
||||||
|
use:fadeIn={{ duration: 0.4, y: 8 }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="Back to dashboard"
|
||||||
|
use:pressable
|
||||||
|
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full
|
||||||
|
text-[#444] transition-colors hover:text-white"
|
||||||
|
onclick={goBack}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="15 18 9 12 15 6" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1
|
||||||
|
data-tauri-drag-region
|
||||||
|
class="flex-1 text-lg font-medium text-white"
|
||||||
|
>
|
||||||
|
Statistics
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scrollable content -->
|
||||||
|
<div class="flex-1 overflow-y-auto px-5 pb-6" use:dragScroll>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- Today's summary -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Today
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[28px] font-semibold text-white tabular-nums">
|
||||||
|
{stats?.todayCompleted ?? 0}
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Breaks taken</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[28px] font-semibold tabular-nums"
|
||||||
|
style="color: {$config.accent_color}"
|
||||||
|
>
|
||||||
|
{compliancePercent}%
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Compliance</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[28px] font-semibold text-white tabular-nums">
|
||||||
|
{breakTimeFormatted()}
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Break time</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[28px] font-semibold text-white tabular-nums">
|
||||||
|
{stats?.todaySkipped ?? 0}
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Skipped</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Streak -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.06 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Streak
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="text-[13px] text-white">Current streak</div>
|
||||||
|
<div class="text-[11px] text-[#777]">Consecutive days with breaks</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[24px] font-semibold tabular-nums" style="color: {$config.accent_color}">
|
||||||
|
{stats?.currentStreak ?? 0}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4 h-px bg-[#161616]"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="text-[13px] text-white">Best streak</div>
|
||||||
|
<div class="text-[11px] text-[#777]">All-time record</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[24px] font-semibold text-white tabular-nums">
|
||||||
|
{stats?.bestStreak ?? 0}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Weekly chart -->
|
||||||
|
<section class="rounded-2xl p-5 backdrop-blur-xl" style="background: rgba(17,17,17,0.7);" use:inView={{ delay: 0.12 }}>
|
||||||
|
<h3
|
||||||
|
class="mb-4 text-[11px] font-medium tracking-[0.15em] text-[#666] uppercase"
|
||||||
|
>
|
||||||
|
Last 7 Days
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<canvas
|
||||||
|
bind:this={chartCanvas}
|
||||||
|
class="h-[140px] w-full"
|
||||||
|
></canvas>
|
||||||
|
|
||||||
|
<div class="mt-3 flex items-center justify-center gap-4 text-[10px] text-[#777]">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="h-2 w-2 rounded-sm" style="background: {$config.accent_color}"></div>
|
||||||
|
Completed
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="h-2 w-2 rounded-sm bg-[#333]"></div>
|
||||||
|
Skipped
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
88
src/lib/components/Stepper.svelte
Normal file
88
src/lib/components/Stepper.svelte
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
value: number;
|
||||||
|
min?: number;
|
||||||
|
max?: number;
|
||||||
|
step?: number;
|
||||||
|
formatValue?: (v: number) => string;
|
||||||
|
onchange?: (value: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
value = $bindable(),
|
||||||
|
min = 0,
|
||||||
|
max = 100,
|
||||||
|
step = 1,
|
||||||
|
formatValue = (v: number) => String(v),
|
||||||
|
onchange,
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let holdTimer: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
let holdInterval: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
function decrement() {
|
||||||
|
if (value > min) {
|
||||||
|
value = Math.max(min, value - step);
|
||||||
|
onchange?.(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function increment() {
|
||||||
|
if (value < max) {
|
||||||
|
value = Math.min(max, value + step);
|
||||||
|
onchange?.(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function startHold(fn: () => void) {
|
||||||
|
fn();
|
||||||
|
// Initial delay before repeating
|
||||||
|
holdTimer = setTimeout(() => {
|
||||||
|
// Start repeating, accelerate over time
|
||||||
|
let delay = 150;
|
||||||
|
function tick() {
|
||||||
|
fn();
|
||||||
|
delay = Math.max(40, delay * 0.85);
|
||||||
|
holdInterval = setTimeout(tick, delay) as unknown as ReturnType<typeof setInterval>;
|
||||||
|
}
|
||||||
|
tick();
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopHold() {
|
||||||
|
if (holdTimer) { clearTimeout(holdTimer); holdTimer = null; }
|
||||||
|
if (holdInterval) { clearTimeout(holdInterval as unknown as ReturnType<typeof setTimeout>); holdInterval = null; }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex h-7 w-7 items-center justify-center rounded-lg
|
||||||
|
bg-[#141414] text-[#444] transition-colors
|
||||||
|
hover:bg-[#1c1c1c] hover:text-white
|
||||||
|
disabled:opacity-20"
|
||||||
|
onmousedown={() => startHold(decrement)}
|
||||||
|
onmouseup={stopHold}
|
||||||
|
onmouseleave={stopHold}
|
||||||
|
disabled={value <= min}
|
||||||
|
>
|
||||||
|
−
|
||||||
|
</button>
|
||||||
|
<span class="min-w-[38px] text-center text-[13px] tabular-nums text-white">
|
||||||
|
{formatValue(value)}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex h-7 w-7 items-center justify-center rounded-lg
|
||||||
|
bg-[#141414] text-[#444] transition-colors
|
||||||
|
hover:bg-[#1c1c1c] hover:text-white
|
||||||
|
disabled:opacity-20"
|
||||||
|
onmousedown={() => startHold(increment)}
|
||||||
|
onmouseup={stopHold}
|
||||||
|
onmouseleave={stopHold}
|
||||||
|
disabled={value >= max}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
399
src/lib/components/TimeSpinner.svelte
Normal file
399
src/lib/components/TimeSpinner.svelte
Normal file
@@ -0,0 +1,399 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
value: string;
|
||||||
|
onchange?: (value: string) => void;
|
||||||
|
countdownFont?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { value, onchange, countdownFont = "" }: Props = $props();
|
||||||
|
|
||||||
|
// Local display values — driven by prop normally, overridden during drag/momentum
|
||||||
|
let displayHours = $state(0);
|
||||||
|
let displayMinutes = $state(0);
|
||||||
|
let isAnimating = $state(false); // true during drag OR momentum
|
||||||
|
|
||||||
|
// Fractional offset for smooth wheel rotation (0 to <1)
|
||||||
|
let hoursFraction = $state(0);
|
||||||
|
let minutesFraction = $state(0);
|
||||||
|
|
||||||
|
// Sync display from prop when NOT dragging/animating
|
||||||
|
$effect(() => {
|
||||||
|
if (!isAnimating) {
|
||||||
|
displayHours = parseInt(value.split(":")[0]) || 0;
|
||||||
|
displayMinutes = parseInt(value.split(":")[1]) || 0;
|
||||||
|
hoursFraction = 0;
|
||||||
|
minutesFraction = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Drag state ──
|
||||||
|
|
||||||
|
let hoursDragging = $state(false);
|
||||||
|
let hoursLastY = $state(0);
|
||||||
|
let hoursAccumPx = $state(0);
|
||||||
|
let hoursBaseValue = $state(0);
|
||||||
|
let hoursVelocity = $state(0);
|
||||||
|
let hoursLastMoveTime = $state(0);
|
||||||
|
|
||||||
|
let minutesDragging = $state(false);
|
||||||
|
let minutesLastY = $state(0);
|
||||||
|
let minutesAccumPx = $state(0);
|
||||||
|
let minutesBaseValue = $state(0);
|
||||||
|
let minutesVelocity = $state(0);
|
||||||
|
let minutesLastMoveTime = $state(0);
|
||||||
|
|
||||||
|
// Momentum animation handle
|
||||||
|
let momentumRaf: number | null = null;
|
||||||
|
|
||||||
|
const SENSITIVITY = 20; // pixels per value step
|
||||||
|
const ITEM_ANGLE = 30; // degrees between items on the cylinder
|
||||||
|
const WHEEL_RADIUS = 26; // cylinder radius in px
|
||||||
|
const FRICTION = 0.93; // momentum decay per frame
|
||||||
|
const MIN_VELOCITY = 0.3; // px/frame threshold to stop momentum
|
||||||
|
|
||||||
|
function wrapValue(v: number, max: number): number {
|
||||||
|
return ((v % max) + max) % max;
|
||||||
|
}
|
||||||
|
|
||||||
|
function emitValue(h: number, m: number) {
|
||||||
|
onchange?.(`${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopMomentum() {
|
||||||
|
if (momentumRaf !== null) {
|
||||||
|
cancelAnimationFrame(momentumRaf);
|
||||||
|
momentumRaf = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build the visible items for the 3D wheel
|
||||||
|
function getWheelItems(current: number, fraction: number, maxVal: number) {
|
||||||
|
const items = [];
|
||||||
|
for (let i = -2; i <= 2; i++) {
|
||||||
|
const val = wrapValue(current + i, maxVal);
|
||||||
|
const angle = (i - fraction) * ITEM_ANGLE;
|
||||||
|
const absAngle = Math.abs(angle);
|
||||||
|
// Center item bright, off-center very dim
|
||||||
|
const isCenter = absAngle < ITEM_ANGLE * 0.5;
|
||||||
|
const opacity = isCenter
|
||||||
|
? Math.max(0.7, 1 - absAngle / 60)
|
||||||
|
: Math.max(0.05, 0.35 - absAngle / 120);
|
||||||
|
items.push({ value: val, angle, opacity });
|
||||||
|
}
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hoursItems = $derived(getWheelItems(displayHours, hoursFraction, 24));
|
||||||
|
const minutesItems = $derived(getWheelItems(displayMinutes, minutesFraction, 60));
|
||||||
|
|
||||||
|
// ── Shared step logic (used by both drag and momentum) ──
|
||||||
|
|
||||||
|
function applyAccum(
|
||||||
|
field: "hours" | "minutes",
|
||||||
|
accumPx: number,
|
||||||
|
baseValue: number,
|
||||||
|
): { newVal: number; fraction: number } {
|
||||||
|
const totalSteps = accumPx / SENSITIVITY;
|
||||||
|
const wholeSteps = Math.round(totalSteps);
|
||||||
|
const fraction = totalSteps - wholeSteps;
|
||||||
|
const maxVal = field === "hours" ? 24 : 60;
|
||||||
|
const newVal = wrapValue(baseValue + wholeSteps, maxVal);
|
||||||
|
return { newVal, fraction };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Hours pointer handlers ──
|
||||||
|
|
||||||
|
function handleHoursPointerDown(e: PointerEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
stopMomentum();
|
||||||
|
hoursDragging = true;
|
||||||
|
isAnimating = true;
|
||||||
|
hoursLastY = e.clientY;
|
||||||
|
hoursAccumPx = 0;
|
||||||
|
hoursBaseValue = displayHours;
|
||||||
|
hoursVelocity = 0;
|
||||||
|
hoursLastMoveTime = performance.now();
|
||||||
|
(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleHoursPointerMove(e: PointerEvent) {
|
||||||
|
if (!hoursDragging) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const dy = hoursLastY - e.clientY;
|
||||||
|
hoursAccumPx += dy;
|
||||||
|
hoursLastY = e.clientY;
|
||||||
|
|
||||||
|
// Track velocity (px/ms)
|
||||||
|
const now = performance.now();
|
||||||
|
const dt = now - hoursLastMoveTime;
|
||||||
|
if (dt > 0) hoursVelocity = dy / dt;
|
||||||
|
hoursLastMoveTime = now;
|
||||||
|
|
||||||
|
const { newVal, fraction } = applyAccum("hours", hoursAccumPx, hoursBaseValue);
|
||||||
|
hoursFraction = fraction;
|
||||||
|
if (newVal !== displayHours) {
|
||||||
|
displayHours = newVal;
|
||||||
|
emitValue(newVal, displayMinutes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleHoursPointerUp(e: PointerEvent) {
|
||||||
|
if (!hoursDragging) return;
|
||||||
|
e.preventDefault();
|
||||||
|
hoursDragging = false;
|
||||||
|
|
||||||
|
// Launch momentum if velocity is significant
|
||||||
|
const velocityPxPerFrame = hoursVelocity * 16; // convert px/ms to px/frame (~16ms)
|
||||||
|
if (Math.abs(velocityPxPerFrame) > MIN_VELOCITY) {
|
||||||
|
startMomentum("hours", velocityPxPerFrame);
|
||||||
|
} else {
|
||||||
|
hoursFraction = 0;
|
||||||
|
isAnimating = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Minutes pointer handlers ──
|
||||||
|
|
||||||
|
function handleMinutesPointerDown(e: PointerEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
stopMomentum();
|
||||||
|
minutesDragging = true;
|
||||||
|
isAnimating = true;
|
||||||
|
minutesLastY = e.clientY;
|
||||||
|
minutesAccumPx = 0;
|
||||||
|
minutesBaseValue = displayMinutes;
|
||||||
|
minutesVelocity = 0;
|
||||||
|
minutesLastMoveTime = performance.now();
|
||||||
|
(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMinutesPointerMove(e: PointerEvent) {
|
||||||
|
if (!minutesDragging) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const dy = minutesLastY - e.clientY;
|
||||||
|
minutesAccumPx += dy;
|
||||||
|
minutesLastY = e.clientY;
|
||||||
|
|
||||||
|
const now = performance.now();
|
||||||
|
const dt = now - minutesLastMoveTime;
|
||||||
|
if (dt > 0) minutesVelocity = dy / dt;
|
||||||
|
minutesLastMoveTime = now;
|
||||||
|
|
||||||
|
const { newVal, fraction } = applyAccum("minutes", minutesAccumPx, minutesBaseValue);
|
||||||
|
minutesFraction = fraction;
|
||||||
|
if (newVal !== displayMinutes) {
|
||||||
|
displayMinutes = newVal;
|
||||||
|
emitValue(displayHours, newVal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMinutesPointerUp(e: PointerEvent) {
|
||||||
|
if (!minutesDragging) return;
|
||||||
|
e.preventDefault();
|
||||||
|
minutesDragging = false;
|
||||||
|
|
||||||
|
const velocityPxPerFrame = minutesVelocity * 16;
|
||||||
|
if (Math.abs(velocityPxPerFrame) > MIN_VELOCITY) {
|
||||||
|
startMomentum("minutes", velocityPxPerFrame);
|
||||||
|
} else {
|
||||||
|
minutesFraction = 0;
|
||||||
|
isAnimating = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Momentum animation ──
|
||||||
|
|
||||||
|
function startMomentum(field: "hours" | "minutes", velocity: number) {
|
||||||
|
stopMomentum();
|
||||||
|
|
||||||
|
function tick() {
|
||||||
|
velocity *= FRICTION;
|
||||||
|
|
||||||
|
if (Math.abs(velocity) < MIN_VELOCITY) {
|
||||||
|
// Snap to nearest value
|
||||||
|
if (field === "hours") hoursFraction = 0;
|
||||||
|
else minutesFraction = 0;
|
||||||
|
isAnimating = false;
|
||||||
|
momentumRaf = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (field === "hours") {
|
||||||
|
hoursAccumPx += velocity;
|
||||||
|
const { newVal, fraction } = applyAccum("hours", hoursAccumPx, hoursBaseValue);
|
||||||
|
hoursFraction = fraction;
|
||||||
|
if (newVal !== displayHours) {
|
||||||
|
displayHours = newVal;
|
||||||
|
emitValue(newVal, displayMinutes);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
minutesAccumPx += velocity;
|
||||||
|
const { newVal, fraction } = applyAccum("minutes", minutesAccumPx, minutesBaseValue);
|
||||||
|
minutesFraction = fraction;
|
||||||
|
if (newVal !== displayMinutes) {
|
||||||
|
displayMinutes = newVal;
|
||||||
|
emitValue(displayHours, newVal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
momentumRaf = requestAnimationFrame(tick);
|
||||||
|
}
|
||||||
|
|
||||||
|
momentumRaf = requestAnimationFrame(tick);
|
||||||
|
}
|
||||||
|
|
||||||
|
function format(n: number): string {
|
||||||
|
return String(n).padStart(2, "0");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="time-spinner" style="font-family: {countdownFont ? `'${countdownFont}', monospace` : 'monospace'};">
|
||||||
|
|
||||||
|
<!-- Hours wheel -->
|
||||||
|
<div
|
||||||
|
class="wheel-field"
|
||||||
|
class:dragging={hoursDragging}
|
||||||
|
role="slider"
|
||||||
|
aria-label="Hours"
|
||||||
|
aria-valuemin={0}
|
||||||
|
aria-valuemax={23}
|
||||||
|
aria-valuenow={displayHours}
|
||||||
|
tabindex={0}
|
||||||
|
onpointerdown={handleHoursPointerDown}
|
||||||
|
onpointermove={handleHoursPointerMove}
|
||||||
|
onpointerup={handleHoursPointerUp}
|
||||||
|
onpointercancel={handleHoursPointerUp}
|
||||||
|
>
|
||||||
|
<div class="wheel-viewport">
|
||||||
|
<div class="wheel-cylinder">
|
||||||
|
{#each hoursItems as item}
|
||||||
|
<div
|
||||||
|
class="wheel-item"
|
||||||
|
style="
|
||||||
|
transform: translateY(-50%) rotateX({-item.angle}deg) translateZ({WHEEL_RADIUS}px);
|
||||||
|
opacity: {item.opacity};
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{format(item.value)}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="unit-badge">h</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span class="separator">:</span>
|
||||||
|
|
||||||
|
<!-- Minutes wheel -->
|
||||||
|
<div
|
||||||
|
class="wheel-field"
|
||||||
|
class:dragging={minutesDragging}
|
||||||
|
role="slider"
|
||||||
|
aria-label="Minutes"
|
||||||
|
aria-valuemin={0}
|
||||||
|
aria-valuemax={59}
|
||||||
|
aria-valuenow={displayMinutes}
|
||||||
|
tabindex={0}
|
||||||
|
onpointerdown={handleMinutesPointerDown}
|
||||||
|
onpointermove={handleMinutesPointerMove}
|
||||||
|
onpointerup={handleMinutesPointerUp}
|
||||||
|
onpointercancel={handleMinutesPointerUp}
|
||||||
|
>
|
||||||
|
<div class="wheel-viewport">
|
||||||
|
<div class="wheel-cylinder">
|
||||||
|
{#each minutesItems as item}
|
||||||
|
<div
|
||||||
|
class="wheel-item"
|
||||||
|
style="
|
||||||
|
transform: translateY(-50%) rotateX({-item.angle}deg) translateZ({WHEEL_RADIUS}px);
|
||||||
|
opacity: {item.opacity};
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{format(item.value)}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="unit-badge">m</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.time-spinner {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
user-select: none;
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wheel-field {
|
||||||
|
position: relative;
|
||||||
|
width: 50px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
cursor: ns-resize;
|
||||||
|
touch-action: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wheel-field.dragging {
|
||||||
|
background: rgba(255, 255, 255, 0.07);
|
||||||
|
border-color: rgba(255, 255, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Perspective container — looking into the cylinder from outside */
|
||||||
|
.wheel-viewport {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
perspective: 90px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The 3D cylinder that holds number items */
|
||||||
|
.wheel-cylinder {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Individual number on the cylinder surface */
|
||||||
|
.wheel-item {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
line-height: 1;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Unit label pinned to the right of the field */
|
||||||
|
.unit-badge {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
color: rgba(255, 255, 255, 0.25);
|
||||||
|
font-weight: 500;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
177
src/lib/components/TimerRing.svelte
Normal file
177
src/lib/components/TimerRing.svelte
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
progress: number;
|
||||||
|
size?: number;
|
||||||
|
strokeWidth?: number;
|
||||||
|
accentColor?: string;
|
||||||
|
children?: import("svelte").Snippet;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
progress,
|
||||||
|
size = 280,
|
||||||
|
strokeWidth = 8,
|
||||||
|
accentColor = "#ff4d00",
|
||||||
|
children,
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
const padding = 40;
|
||||||
|
const viewSize = $derived(size + padding * 2);
|
||||||
|
const radius = $derived((size - strokeWidth) / 2);
|
||||||
|
const circumference = $derived(2 * Math.PI * radius);
|
||||||
|
const dashOffset = $derived(circumference * (1 - progress));
|
||||||
|
const center = $derived(viewSize / 2);
|
||||||
|
|
||||||
|
// Unique filter IDs based on color to avoid SVG collisions
|
||||||
|
const fid = $derived(`ring-${size}-${accentColor.replace('#', '')}`);
|
||||||
|
|
||||||
|
// Derive lighter shade for gradient end
|
||||||
|
function lighten(hex: string, amount: number): string {
|
||||||
|
const r = parseInt(hex.slice(1, 3), 16);
|
||||||
|
const g = parseInt(hex.slice(3, 5), 16);
|
||||||
|
const b = parseInt(hex.slice(5, 7), 16);
|
||||||
|
const lr = Math.min(255, r + (255 - r) * amount);
|
||||||
|
const lg = Math.min(255, g + (255 - g) * amount);
|
||||||
|
const lb = Math.min(255, b + (255 - b) * amount);
|
||||||
|
return `#${Math.round(lr).toString(16).padStart(2, '0')}${Math.round(lg).toString(16).padStart(2, '0')}${Math.round(lb).toString(16).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const gradA = $derived(accentColor);
|
||||||
|
const gradB = $derived(lighten(accentColor, 0.2));
|
||||||
|
const gradC = $derived(lighten(accentColor, 0.4));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="relative flex items-center justify-center"
|
||||||
|
style="width: {size}px; height: {size}px;"
|
||||||
|
>
|
||||||
|
<!-- Glow SVG — drawn larger than the container so blur isn't clipped -->
|
||||||
|
<svg
|
||||||
|
width={viewSize}
|
||||||
|
height={viewSize}
|
||||||
|
class="pointer-events-none absolute"
|
||||||
|
style="
|
||||||
|
left: {-padding}px;
|
||||||
|
top: {-padding}px;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
overflow: visible;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="ring-grad-{fid}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color={gradA} />
|
||||||
|
<stop offset="50%" stop-color={gradB} />
|
||||||
|
<stop offset="100%" stop-color={gradC} />
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<!-- Wide ambient glow filter -->
|
||||||
|
<filter id="glow-wide-{fid}" x="-100%" y="-100%" width="300%" height="300%">
|
||||||
|
<feGaussianBlur stdDeviation="28" />
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<!-- Medium glow filter -->
|
||||||
|
<filter id="glow-mid-{fid}" x="-60%" y="-60%" width="220%" height="220%">
|
||||||
|
<feGaussianBlur stdDeviation="12" />
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<!-- Core tight glow filter -->
|
||||||
|
<filter id="glow-core-{fid}" x="-40%" y="-40%" width="180%" height="180%">
|
||||||
|
<feGaussianBlur stdDeviation="5" result="blur" />
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="blur" />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
{#if progress > 0.002}
|
||||||
|
<!-- Layer 1: Wide ambient bloom -->
|
||||||
|
<circle
|
||||||
|
cx={center}
|
||||||
|
cy={center}
|
||||||
|
r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#ring-grad-{fid})"
|
||||||
|
stroke-width={strokeWidth * 4}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-dasharray={circumference}
|
||||||
|
stroke-dashoffset={dashOffset}
|
||||||
|
filter="url(#glow-wide-{fid})"
|
||||||
|
opacity="0.35"
|
||||||
|
class="transition-[stroke-dashoffset] duration-1000 ease-linear"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Layer 2: Medium glow -->
|
||||||
|
<circle
|
||||||
|
cx={center}
|
||||||
|
cy={center}
|
||||||
|
r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#ring-grad-{fid})"
|
||||||
|
stroke-width={strokeWidth * 2}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-dasharray={circumference}
|
||||||
|
stroke-dashoffset={dashOffset}
|
||||||
|
filter="url(#glow-mid-{fid})"
|
||||||
|
opacity="0.5"
|
||||||
|
class="transition-[stroke-dashoffset] duration-1000 ease-linear"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Layer 3: Core ring with tight glow -->
|
||||||
|
<circle
|
||||||
|
cx={center}
|
||||||
|
cy={center}
|
||||||
|
r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#ring-grad-{fid})"
|
||||||
|
stroke-width={strokeWidth}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-dasharray={circumference}
|
||||||
|
stroke-dashoffset={dashOffset}
|
||||||
|
filter="url(#glow-core-{fid})"
|
||||||
|
class="transition-[stroke-dashoffset] duration-1000 ease-linear"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Non-glow SVG — exact size, draws the track + crisp ring -->
|
||||||
|
<svg
|
||||||
|
width={size}
|
||||||
|
height={size}
|
||||||
|
class="absolute"
|
||||||
|
style="transform: rotate(-90deg);"
|
||||||
|
>
|
||||||
|
<!-- Background track -->
|
||||||
|
<circle
|
||||||
|
cx={size / 2}
|
||||||
|
cy={size / 2}
|
||||||
|
r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke="#161616"
|
||||||
|
stroke-width={strokeWidth}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{#if progress > 0.002}
|
||||||
|
<!-- Sharp foreground ring (no filter) -->
|
||||||
|
<circle
|
||||||
|
cx={size / 2}
|
||||||
|
cy={size / 2}
|
||||||
|
r={radius}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#ring-grad-{fid})"
|
||||||
|
stroke-width={strokeWidth}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-dasharray={circumference}
|
||||||
|
stroke-dashoffset={dashOffset}
|
||||||
|
class="transition-[stroke-dashoffset] duration-1000 ease-linear"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Content overlay -->
|
||||||
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
||||||
|
{#if children}
|
||||||
|
{@render children()}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
83
src/lib/components/Titlebar.svelte
Normal file
83
src/lib/components/Titlebar.svelte
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
|
||||||
|
|
||||||
|
const appWindow = getCurrentWebviewWindow();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Invisible drag region – traffic lights on the right -->
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
class="group absolute top-0 left-0 right-0 z-50 flex h-10 items-center justify-end pr-3.5 select-none"
|
||||||
|
>
|
||||||
|
<!-- Centered app name -->
|
||||||
|
<span
|
||||||
|
class="pointer-events-none absolute inset-0 flex items-center justify-center
|
||||||
|
text-[11px] font-semibold tracking-[0.3em] text-[#383838] uppercase"
|
||||||
|
style="font-family: 'Space Mono', monospace;"
|
||||||
|
>
|
||||||
|
Core Cooldown
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Traffic light buttons (order: maximize, minimize, close → close is rightmost) -->
|
||||||
|
<div class="flex items-center gap-[8px] opacity-10 transition-opacity duration-300 group-hover:opacity-100">
|
||||||
|
<!-- Maximize (green) -->
|
||||||
|
<button
|
||||||
|
aria-label="Maximize"
|
||||||
|
class="traffic-btn group/btn relative flex h-[15px] w-[15px] items-center justify-center
|
||||||
|
rounded-full bg-[#27C93F] transition-all duration-150
|
||||||
|
hover:brightness-110"
|
||||||
|
onclick={() => appWindow.toggleMaximize()}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="absolute opacity-0 transition-opacity duration-150 group-hover/btn:opacity-100"
|
||||||
|
width="8"
|
||||||
|
height="8"
|
||||||
|
viewBox="0 0 8 8"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<polyline points="1,5 1,7 3,7" stroke="#006500" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
|
||||||
|
<polyline points="7,3 7,1 5,1" stroke="#006500" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
|
||||||
|
<line x1="1" y1="7" x2="7" y2="1" stroke="#006500" stroke-width="1.2" stroke-linecap="round" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Minimize (yellow) -->
|
||||||
|
<button
|
||||||
|
aria-label="Minimize"
|
||||||
|
class="traffic-btn group/btn relative flex h-[15px] w-[15px] items-center justify-center
|
||||||
|
rounded-full bg-[#FFBD2E] transition-all duration-150
|
||||||
|
hover:brightness-110"
|
||||||
|
onclick={() => appWindow.minimize()}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="absolute opacity-0 transition-opacity duration-150 group-hover/btn:opacity-100"
|
||||||
|
width="8"
|
||||||
|
height="2"
|
||||||
|
viewBox="0 0 8 2"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<line x1="1" y1="1" x2="7" y2="1" stroke="#995700" stroke-width="1.3" stroke-linecap="round" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Close (red) — rightmost -->
|
||||||
|
<button
|
||||||
|
aria-label="Close"
|
||||||
|
class="traffic-btn group/btn relative flex h-[15px] w-[15px] items-center justify-center
|
||||||
|
rounded-full bg-[#FF5F57] transition-all duration-150
|
||||||
|
hover:brightness-110"
|
||||||
|
onclick={() => appWindow.close()}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="absolute opacity-0 transition-opacity duration-150 group-hover/btn:opacity-100"
|
||||||
|
width="8"
|
||||||
|
height="8"
|
||||||
|
viewBox="0 0 8 8"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<line x1="1.5" y1="1.5" x2="6.5" y2="6.5" stroke="#4a0002" stroke-width="1.3" stroke-linecap="round" />
|
||||||
|
<line x1="6.5" y1="1.5" x2="1.5" y2="6.5" stroke="#4a0002" stroke-width="1.3" stroke-linecap="round" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
32
src/lib/components/ToggleSwitch.svelte
Normal file
32
src/lib/components/ToggleSwitch.svelte
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { config } from "../stores/config";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
checked: boolean;
|
||||||
|
onchange?: (value: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { checked = $bindable(), onchange }: Props = $props();
|
||||||
|
|
||||||
|
function toggle() {
|
||||||
|
checked = !checked;
|
||||||
|
onchange?.(checked);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="switch"
|
||||||
|
aria-label="Toggle"
|
||||||
|
aria-checked={checked}
|
||||||
|
class="relative inline-flex h-[24px] w-[48px] shrink-0 cursor-pointer rounded-full
|
||||||
|
transition-colors duration-200 ease-in-out focus:outline-none"
|
||||||
|
style="background: {checked ? $config.accent_color : '#1a1a1a'};"
|
||||||
|
onclick={toggle}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="pointer-events-none inline-block h-[19px] w-[19px] rounded-full
|
||||||
|
shadow-sm transition-transform duration-200 ease-in-out
|
||||||
|
{checked ? 'translate-x-[26px] bg-white' : 'translate-x-[3px] bg-[#444]'} mt-[2.5px]"
|
||||||
|
></span>
|
||||||
|
</button>
|
||||||
149
src/lib/stores/config.ts
Normal file
149
src/lib/stores/config.ts
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
import { writable, get } from "svelte/store";
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
|
||||||
|
export interface TimeRange {
|
||||||
|
start: string; // Format: "HH:MM"
|
||||||
|
end: string; // Format: "HH:MM"
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DaySchedule {
|
||||||
|
enabled: boolean;
|
||||||
|
ranges: TimeRange[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { TimeRange, DaySchedule };
|
||||||
|
|
||||||
|
export interface Config {
|
||||||
|
break_duration: number;
|
||||||
|
break_frequency: number;
|
||||||
|
auto_start: boolean;
|
||||||
|
break_title: string;
|
||||||
|
break_message: string;
|
||||||
|
fullscreen_mode: boolean;
|
||||||
|
strict_mode: boolean;
|
||||||
|
allow_end_early: boolean;
|
||||||
|
immediately_start_breaks: boolean;
|
||||||
|
working_hours_enabled: boolean;
|
||||||
|
working_hours_schedule: DaySchedule[]; // 7 days: Mon, Tue, Wed, Thu, Fri, Sat, Sun
|
||||||
|
dark_mode: boolean;
|
||||||
|
color_scheme: string;
|
||||||
|
backdrop_opacity: number;
|
||||||
|
notification_enabled: boolean;
|
||||||
|
notification_before_break: number;
|
||||||
|
snooze_duration: number;
|
||||||
|
snooze_limit: number;
|
||||||
|
skip_cooldown: number;
|
||||||
|
sound_enabled: boolean;
|
||||||
|
sound_volume: number;
|
||||||
|
sound_preset: string;
|
||||||
|
idle_detection_enabled: boolean;
|
||||||
|
idle_timeout: number;
|
||||||
|
smart_breaks_enabled: boolean;
|
||||||
|
smart_break_threshold: number;
|
||||||
|
smart_break_count_stats: boolean;
|
||||||
|
show_break_activities: boolean;
|
||||||
|
ui_zoom: number;
|
||||||
|
accent_color: string;
|
||||||
|
break_color: string;
|
||||||
|
countdown_font: string;
|
||||||
|
background_blobs_enabled: boolean;
|
||||||
|
mini_click_through: boolean;
|
||||||
|
mini_hover_threshold: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultConfig: Config = {
|
||||||
|
break_duration: 5,
|
||||||
|
break_frequency: 25,
|
||||||
|
auto_start: true,
|
||||||
|
break_title: "Rest your eyes",
|
||||||
|
break_message: "Look away from the screen. Stretch and relax.",
|
||||||
|
fullscreen_mode: true,
|
||||||
|
strict_mode: false,
|
||||||
|
allow_end_early: true,
|
||||||
|
immediately_start_breaks: false,
|
||||||
|
working_hours_enabled: false,
|
||||||
|
working_hours_schedule: [
|
||||||
|
{ enabled: true, ranges: [{ start: "09:00", end: "18:00" }] }, // Monday
|
||||||
|
{ enabled: true, ranges: [{ start: "09:00", end: "18:00" }] }, // Tuesday
|
||||||
|
{ enabled: true, ranges: [{ start: "09:00", end: "18:00" }] }, // Wednesday
|
||||||
|
{ enabled: true, ranges: [{ start: "09:00", end: "18:00" }] }, // Thursday
|
||||||
|
{ enabled: true, ranges: [{ start: "09:00", end: "18:00" }] }, // Friday
|
||||||
|
{ enabled: false, ranges: [{ start: "09:00", end: "18:00" }] }, // Saturday
|
||||||
|
{ enabled: false, ranges: [{ start: "09:00", end: "18:00" }] }, // Sunday
|
||||||
|
],
|
||||||
|
dark_mode: true,
|
||||||
|
color_scheme: "Ocean",
|
||||||
|
backdrop_opacity: 0.92,
|
||||||
|
notification_enabled: true,
|
||||||
|
notification_before_break: 30,
|
||||||
|
snooze_duration: 5,
|
||||||
|
snooze_limit: 3,
|
||||||
|
skip_cooldown: 60,
|
||||||
|
sound_enabled: true,
|
||||||
|
sound_volume: 70,
|
||||||
|
sound_preset: "bell",
|
||||||
|
idle_detection_enabled: true,
|
||||||
|
idle_timeout: 120,
|
||||||
|
smart_breaks_enabled: true,
|
||||||
|
smart_break_threshold: 300,
|
||||||
|
smart_break_count_stats: false,
|
||||||
|
show_break_activities: true,
|
||||||
|
ui_zoom: 100,
|
||||||
|
accent_color: "#ff4d00",
|
||||||
|
break_color: "#7c6aef",
|
||||||
|
countdown_font: "",
|
||||||
|
background_blobs_enabled: true,
|
||||||
|
mini_click_through: true,
|
||||||
|
mini_hover_threshold: 3.0,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const config = writable<Config>(defaultConfig);
|
||||||
|
|
||||||
|
export async function loadConfig() {
|
||||||
|
try {
|
||||||
|
const cfg = await invoke<Config>("get_config");
|
||||||
|
config.set(cfg);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to load config:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function saveConfig(): Promise<boolean> {
|
||||||
|
try {
|
||||||
|
const cfg = get(config);
|
||||||
|
await invoke("save_config", { config: cfg });
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to save config:", e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function notifyConfigChanged() {
|
||||||
|
try {
|
||||||
|
const cfg = get(config);
|
||||||
|
await invoke("update_pending_config", { config: cfg });
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to update pending config:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function resetConfig() {
|
||||||
|
try {
|
||||||
|
const cfg = await invoke<Config>("reset_config");
|
||||||
|
config.set(cfg);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to reset config:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Debounced auto-save: updates backend immediately, persists to disk after 400ms idle
|
||||||
|
let saveTimer: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
|
export function autoSave() {
|
||||||
|
notifyConfigChanged();
|
||||||
|
if (saveTimer) clearTimeout(saveTimer);
|
||||||
|
saveTimer = setTimeout(() => {
|
||||||
|
saveConfig();
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
133
src/lib/stores/timer.ts
Normal file
133
src/lib/stores/timer.ts
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
import { writable, get } from "svelte/store";
|
||||||
|
import { listen } from "@tauri-apps/api/event";
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { playSound, playBreakEndSound } from "../utils/sounds";
|
||||||
|
import { config } from "./config";
|
||||||
|
|
||||||
|
export interface TimerSnapshot {
|
||||||
|
state: "running" | "paused" | "breakActive";
|
||||||
|
currentView: "dashboard" | "breakScreen" | "settings" | "stats";
|
||||||
|
timeRemaining: number;
|
||||||
|
totalDuration: number;
|
||||||
|
progress: number;
|
||||||
|
hasHadBreak: boolean;
|
||||||
|
secondsSinceLastBreak: number;
|
||||||
|
prebreakWarning: boolean;
|
||||||
|
snoozesUsed: number;
|
||||||
|
canSnooze: boolean;
|
||||||
|
breakTitle: string;
|
||||||
|
breakMessage: string;
|
||||||
|
breakProgress: number;
|
||||||
|
breakTimeRemaining: number;
|
||||||
|
breakTotalDuration: number;
|
||||||
|
breakPastHalf: boolean;
|
||||||
|
settingsModified: boolean;
|
||||||
|
idlePaused: boolean;
|
||||||
|
naturalBreakOccurred: boolean;
|
||||||
|
smartBreaksEnabled: boolean;
|
||||||
|
smartBreakThreshold: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultSnapshot: TimerSnapshot = {
|
||||||
|
state: "paused",
|
||||||
|
currentView: "dashboard",
|
||||||
|
timeRemaining: 1500,
|
||||||
|
totalDuration: 1500,
|
||||||
|
progress: 1.0,
|
||||||
|
hasHadBreak: false,
|
||||||
|
secondsSinceLastBreak: 0,
|
||||||
|
prebreakWarning: false,
|
||||||
|
snoozesUsed: 0,
|
||||||
|
canSnooze: true,
|
||||||
|
breakTitle: "Rest your eyes",
|
||||||
|
breakMessage: "Look away from the screen. Stretch and relax.",
|
||||||
|
breakProgress: 0,
|
||||||
|
breakTimeRemaining: 0,
|
||||||
|
breakTotalDuration: 0,
|
||||||
|
breakPastHalf: false,
|
||||||
|
settingsModified: false,
|
||||||
|
idlePaused: false,
|
||||||
|
naturalBreakOccurred: false,
|
||||||
|
smartBreaksEnabled: true,
|
||||||
|
smartBreakThreshold: 300,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const timer = writable<TimerSnapshot>(defaultSnapshot);
|
||||||
|
|
||||||
|
// Track the current view separately so UI can switch views optimistically
|
||||||
|
export const currentView = writable<
|
||||||
|
"dashboard" | "breakScreen" | "settings" | "stats"
|
||||||
|
>("dashboard");
|
||||||
|
|
||||||
|
let initialized = false;
|
||||||
|
|
||||||
|
export async function initTimerStore() {
|
||||||
|
if (initialized) return;
|
||||||
|
initialized = true;
|
||||||
|
|
||||||
|
// Get initial state
|
||||||
|
try {
|
||||||
|
const snapshot = await invoke<TimerSnapshot>("get_timer_state");
|
||||||
|
timer.set(snapshot);
|
||||||
|
currentView.set(snapshot.currentView);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to get initial timer state:", e);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for tick events
|
||||||
|
await listen<TimerSnapshot>("timer-tick", (event) => {
|
||||||
|
timer.set(event.payload);
|
||||||
|
// Sync view from backend (backend is authoritative for break transitions)
|
||||||
|
currentView.set(event.payload.currentView);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen for pre-break warning
|
||||||
|
await listen("prebreak-warning", () => {
|
||||||
|
const cfg = get(config);
|
||||||
|
if (cfg.sound_enabled) {
|
||||||
|
playSound(cfg.sound_preset as any, cfg.sound_volume * 0.6);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen for break started
|
||||||
|
await listen("break-started", () => {
|
||||||
|
currentView.set("breakScreen");
|
||||||
|
const cfg = get(config);
|
||||||
|
if (cfg.sound_enabled) {
|
||||||
|
playSound(cfg.sound_preset as any, cfg.sound_volume);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen for break ended
|
||||||
|
await listen("break-ended", () => {
|
||||||
|
currentView.set("dashboard");
|
||||||
|
const cfg = get(config);
|
||||||
|
if (cfg.sound_enabled) {
|
||||||
|
playBreakEndSound(cfg.sound_preset as any, cfg.sound_volume);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen for natural break detected
|
||||||
|
await listen<number>("natural-break-detected", (event) => {
|
||||||
|
const cfg = get(config);
|
||||||
|
if (cfg.sound_enabled) {
|
||||||
|
playSound(cfg.sound_preset as any, cfg.sound_volume * 0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper: format seconds as MM:SS
|
||||||
|
export function formatTime(secs: number): string {
|
||||||
|
const m = Math.floor(secs / 60);
|
||||||
|
const s = secs % 60;
|
||||||
|
return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper: format "X ago" string
|
||||||
|
export function formatDurationAgo(secs: number): string {
|
||||||
|
if (secs < 60) return `${secs} sec ago`;
|
||||||
|
const m = Math.floor(secs / 60);
|
||||||
|
if (m < 60) return m === 1 ? "1 min ago" : `${m} min ago`;
|
||||||
|
const h = Math.floor(secs / 3600);
|
||||||
|
return h === 1 ? "1 hr ago" : `${h} hrs ago`;
|
||||||
|
}
|
||||||
115
src/lib/utils/activities.ts
Normal file
115
src/lib/utils/activities.ts
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
export interface BreakActivity {
|
||||||
|
category: "eyes" | "stretch" | "breathing" | "movement";
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const breakActivities: BreakActivity[] = [
|
||||||
|
// Eyes
|
||||||
|
{ category: "eyes", text: "Look at something 20 feet away for 20 seconds" },
|
||||||
|
{ category: "eyes", text: "Close your eyes and gently press your palms over them" },
|
||||||
|
{ category: "eyes", text: "Slowly roll your eyes in circles, 5 times each direction" },
|
||||||
|
{ category: "eyes", text: "Focus on a distant object, then a near one — repeat 5 times" },
|
||||||
|
{ category: "eyes", text: "Blink rapidly 20 times to refresh your eyes" },
|
||||||
|
{ category: "eyes", text: "Look up, down, left, right — hold each for 2 seconds" },
|
||||||
|
{ category: "eyes", text: "Cup your hands over closed eyes and breathe deeply" },
|
||||||
|
{ category: "eyes", text: "Trace a figure-8 with your eyes, slowly" },
|
||||||
|
{ category: "eyes", text: "Look out the nearest window and find the farthest point" },
|
||||||
|
{ category: "eyes", text: "Gently massage your temples in small circles" },
|
||||||
|
{ category: "eyes", text: "Close your eyes and visualize a calm, dark space for 20 seconds" },
|
||||||
|
{ category: "eyes", text: "Warm your palms by rubbing them together, then rest them over closed eyes" },
|
||||||
|
{ category: "eyes", text: "Slowly shift your gaze along the horizon line outside" },
|
||||||
|
{ category: "eyes", text: "Focus on the tip of your nose for 5 seconds, then a far wall" },
|
||||||
|
{ category: "eyes", text: "Look at something green — plants reduce eye strain naturally" },
|
||||||
|
{ category: "eyes", text: "Close your eyes and gently press your eyebrows outward from center" },
|
||||||
|
{ category: "eyes", text: "Squeeze your eyes shut for 3 seconds, then open wide — repeat 5 times" },
|
||||||
|
{ category: "eyes", text: "Trace the outline of a window frame with your eyes, slowly" },
|
||||||
|
|
||||||
|
// Stretches
|
||||||
|
{ category: "stretch", text: "Roll your shoulders backward slowly, 5 times" },
|
||||||
|
{ category: "stretch", text: "Interlace fingers behind your back and open your chest" },
|
||||||
|
{ category: "stretch", text: "Tilt your head to each side, holding for 10 seconds" },
|
||||||
|
{ category: "stretch", text: "Stretch your arms overhead and reach for the ceiling" },
|
||||||
|
{ category: "stretch", text: "Rotate your wrists in circles, 10 times each direction" },
|
||||||
|
{ category: "stretch", text: "Clasp hands together and push palms away from you" },
|
||||||
|
{ category: "stretch", text: "Gently twist your torso left and right from your chair" },
|
||||||
|
{ category: "stretch", text: "Drop your chin to your chest and slowly roll your neck" },
|
||||||
|
{ category: "stretch", text: "Extend each arm across your chest, hold for 15 seconds" },
|
||||||
|
{ category: "stretch", text: "Open and close your hands, spreading fingers wide" },
|
||||||
|
{ category: "stretch", text: "Place your right hand on your left knee and twist gently — switch sides" },
|
||||||
|
{ category: "stretch", text: "Reach one arm overhead and lean to the opposite side, hold 10 seconds each" },
|
||||||
|
{ category: "stretch", text: "Interlace your fingers and flip your palms to the ceiling, push up" },
|
||||||
|
{ category: "stretch", text: "Pull each finger gently backward for 3 seconds to stretch your forearms" },
|
||||||
|
{ category: "stretch", text: "Press your palms together at chest height and push for 10 seconds" },
|
||||||
|
{ category: "stretch", text: "Sit tall, reach behind to grab the back of your chair, and open your chest" },
|
||||||
|
{ category: "stretch", text: "Cross one ankle over the opposite knee and lean forward gently" },
|
||||||
|
{ category: "stretch", text: "Shrug your shoulders up to your ears, hold 5 seconds, release slowly" },
|
||||||
|
|
||||||
|
// Breathing
|
||||||
|
{ category: "breathing", text: "Inhale for 4 seconds, hold for 4, exhale for 6" },
|
||||||
|
{ category: "breathing", text: "Take 5 deep belly breaths — feel your diaphragm expand" },
|
||||||
|
{ category: "breathing", text: "Box breathing: inhale 4s, hold 4s, exhale 4s, hold 4s" },
|
||||||
|
{ category: "breathing", text: "Breathe in through your nose, out through your mouth — 5 times" },
|
||||||
|
{ category: "breathing", text: "Sigh deeply 3 times to release tension" },
|
||||||
|
{ category: "breathing", text: "Place a hand on your chest and breathe so only your belly moves" },
|
||||||
|
{ category: "breathing", text: "Alternate nostril breathing: 3 cycles each side" },
|
||||||
|
{ category: "breathing", text: "Exhale completely, then take the deepest breath you can" },
|
||||||
|
{ category: "breathing", text: "Count your breaths backward from 10 to 1" },
|
||||||
|
{ category: "breathing", text: "Breathe in calm, breathe out tension — 5 rounds" },
|
||||||
|
{ category: "breathing", text: "4-7-8 breathing: inhale 4s, hold 7s, exhale slowly for 8s" },
|
||||||
|
{ category: "breathing", text: "Take 3 breaths making your exhale twice as long as your inhale" },
|
||||||
|
{ category: "breathing", text: "Breathe in for 2 counts, out for 2 — gradually increase to 6 each" },
|
||||||
|
{ category: "breathing", text: "Hum gently on each exhale for 5 breaths — feel the vibration in your chest" },
|
||||||
|
{ category: "breathing", text: "Imagine breathing in cool blue air and exhaling warm red air — 5 rounds" },
|
||||||
|
{ category: "breathing", text: "Place both hands on your ribs and breathe so you feel them expand sideways" },
|
||||||
|
{ category: "breathing", text: "Breathe in through pursed lips slowly, then exhale in a long, steady stream" },
|
||||||
|
|
||||||
|
// Movement
|
||||||
|
{ category: "movement", text: "Stand up and walk to the nearest window" },
|
||||||
|
{ category: "movement", text: "Do 10 standing calf raises" },
|
||||||
|
{ category: "movement", text: "Walk to get a glass of water" },
|
||||||
|
{ category: "movement", text: "Stand and do 5 gentle squats" },
|
||||||
|
{ category: "movement", text: "Take a short walk around your room" },
|
||||||
|
{ category: "movement", text: "Stand on one foot for 15 seconds, then switch" },
|
||||||
|
{ category: "movement", text: "Do 10 arm circles, forward then backward" },
|
||||||
|
{ category: "movement", text: "March in place for 30 seconds" },
|
||||||
|
{ category: "movement", text: "Shake out your hands and arms for 10 seconds" },
|
||||||
|
{ category: "movement", text: "Stand up, touch your toes, and slowly rise" },
|
||||||
|
{ category: "movement", text: "Walk to the farthest room in your home and back" },
|
||||||
|
{ category: "movement", text: "Do 5 wall push-ups — hands on the wall, lean in and push back" },
|
||||||
|
{ category: "movement", text: "Stand up and slowly shift your weight side to side for 20 seconds" },
|
||||||
|
{ category: "movement", text: "Walk in a small circle, paying attention to each footstep" },
|
||||||
|
{ category: "movement", text: "Rise onto your tiptoes, hold for 5 seconds, lower slowly — repeat 5 times" },
|
||||||
|
{ category: "movement", text: "Do a gentle standing forward fold — let your arms hang loose" },
|
||||||
|
{ category: "movement", text: "Step away from your desk and do 10 hip circles in each direction" },
|
||||||
|
{ category: "movement", text: "Stand with your back against a wall and slide down into a gentle wall sit for 15 seconds" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const categoryIcons: Record<BreakActivity["category"], string> = {
|
||||||
|
eyes: "👁",
|
||||||
|
stretch: "🤸",
|
||||||
|
breathing: "🌬",
|
||||||
|
movement: "🚶",
|
||||||
|
};
|
||||||
|
|
||||||
|
const categoryLabels: Record<BreakActivity["category"], string> = {
|
||||||
|
eyes: "Eye Exercise",
|
||||||
|
stretch: "Stretch",
|
||||||
|
breathing: "Breathing",
|
||||||
|
movement: "Movement",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getCategoryIcon(cat: BreakActivity["category"]): string {
|
||||||
|
return categoryIcons[cat];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCategoryLabel(cat: BreakActivity["category"]): string {
|
||||||
|
return categoryLabels[cat];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Pick a random activity, optionally excluding a previous one */
|
||||||
|
export function pickRandomActivity(exclude?: BreakActivity): BreakActivity {
|
||||||
|
const pool = exclude
|
||||||
|
? breakActivities.filter((a) => a.text !== exclude.text)
|
||||||
|
: breakActivities;
|
||||||
|
return pool[Math.floor(Math.random() * pool.length)];
|
||||||
|
}
|
||||||
366
src/lib/utils/animate.ts
Normal file
366
src/lib/utils/animate.ts
Normal file
@@ -0,0 +1,366 @@
|
|||||||
|
import { animate } from "motion";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Svelte action: fade in + slide up on mount
|
||||||
|
*/
|
||||||
|
export function fadeIn(
|
||||||
|
node: HTMLElement,
|
||||||
|
options?: { duration?: number; delay?: number; y?: number },
|
||||||
|
) {
|
||||||
|
const { duration = 0.5, delay = 0, y = 15 } = options ?? {};
|
||||||
|
node.style.opacity = "0";
|
||||||
|
|
||||||
|
const controls = animate(
|
||||||
|
node,
|
||||||
|
{ opacity: [0, 1], transform: [`translateY(${y}px)`, "translateY(0px)"] },
|
||||||
|
{ duration, delay, easing: [0.22, 0.03, 0.26, 1] },
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
controls.cancel();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Svelte action: scale in + fade on mount
|
||||||
|
*/
|
||||||
|
export function scaleIn(
|
||||||
|
node: HTMLElement,
|
||||||
|
options?: { duration?: number; delay?: number },
|
||||||
|
) {
|
||||||
|
const { duration = 0.6, delay = 0 } = options ?? {};
|
||||||
|
node.style.opacity = "0";
|
||||||
|
|
||||||
|
const controls = animate(
|
||||||
|
node,
|
||||||
|
{ opacity: [0, 1], transform: ["scale(0.92)", "scale(1)"] },
|
||||||
|
{ duration, delay, easing: [0.22, 0.03, 0.26, 1] },
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
controls.cancel();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Svelte action: animate when scrolled into view (IntersectionObserver)
|
||||||
|
*/
|
||||||
|
export function inView(
|
||||||
|
node: HTMLElement,
|
||||||
|
options?: { delay?: number; y?: number; threshold?: number },
|
||||||
|
) {
|
||||||
|
const { delay = 0, y = 20, threshold = 0.05 } = options ?? {};
|
||||||
|
node.style.opacity = "0";
|
||||||
|
node.style.transform = `translateY(${y}px)`;
|
||||||
|
|
||||||
|
let controls: ReturnType<typeof animate> | null = null;
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
([entry]) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
controls = animate(
|
||||||
|
node,
|
||||||
|
{
|
||||||
|
opacity: [0, 1],
|
||||||
|
transform: [`translateY(${y}px)`, "translateY(0px)"],
|
||||||
|
},
|
||||||
|
{ duration: 0.45, delay, easing: [0.22, 0.03, 0.26, 1] },
|
||||||
|
);
|
||||||
|
observer.disconnect();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ threshold },
|
||||||
|
);
|
||||||
|
|
||||||
|
observer.observe(node);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
observer.disconnect();
|
||||||
|
controls?.cancel();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Svelte action: spring-scale press feedback on buttons
|
||||||
|
*/
|
||||||
|
export function pressable(node: HTMLElement) {
|
||||||
|
let active: ReturnType<typeof animate> | null = null;
|
||||||
|
|
||||||
|
function onDown() {
|
||||||
|
active?.cancel();
|
||||||
|
// Explicit [from, to] avoids transform conflicts with fadeIn's translateY
|
||||||
|
active = animate(
|
||||||
|
node,
|
||||||
|
{ transform: ["scale(1)", "scale(0.95)"] },
|
||||||
|
{ duration: 0.1, easing: [0.22, 0.03, 0.26, 1] },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUp() {
|
||||||
|
active?.cancel();
|
||||||
|
active = animate(
|
||||||
|
node,
|
||||||
|
{ transform: ["scale(0.95)", "scale(1)"] },
|
||||||
|
{ duration: 0.3, easing: [0.22, 1.2, 0.36, 1] },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener("mousedown", onDown);
|
||||||
|
node.addEventListener("mouseup", onUp);
|
||||||
|
node.addEventListener("mouseleave", onUp);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener("mousedown", onDown);
|
||||||
|
node.removeEventListener("mouseup", onUp);
|
||||||
|
node.removeEventListener("mouseleave", onUp);
|
||||||
|
active?.cancel();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Svelte action: animated glow band on hover.
|
||||||
|
* Creates a crisp ring "band" plus a soft atmospheric glow.
|
||||||
|
* Pass a hex color (e.g. "#ff4d00").
|
||||||
|
*
|
||||||
|
* Uses same-hue zero-alpha as the "off" state so the Web Animations API
|
||||||
|
* interpolates through the correct color channel instead of through black.
|
||||||
|
*/
|
||||||
|
export function glowHover(
|
||||||
|
node: HTMLElement,
|
||||||
|
options?: { color?: string },
|
||||||
|
) {
|
||||||
|
let color = options?.color ?? "#ff4d00";
|
||||||
|
let enterAnim: ReturnType<typeof animate> | null = null;
|
||||||
|
let leaveAnim: ReturnType<typeof animate> | null = null;
|
||||||
|
|
||||||
|
// "off" state: same hue at zero alpha (NOT transparent, which is rgba(0,0,0,0))
|
||||||
|
function off() { return `0 0 0 0px ${color}00, 0 0 0px 0px ${color}00`; }
|
||||||
|
function on() { return `0 0 0 1.5px ${color}90, 0 0 22px 6px ${color}40`; }
|
||||||
|
|
||||||
|
node.style.boxShadow = off();
|
||||||
|
|
||||||
|
function onEnter() {
|
||||||
|
leaveAnim?.cancel();
|
||||||
|
enterAnim = animate(
|
||||||
|
node,
|
||||||
|
{ boxShadow: [off(), on()] },
|
||||||
|
{ duration: 0.4, easing: [0.22, 0.03, 0.26, 1] },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onLeave() {
|
||||||
|
enterAnim?.cancel();
|
||||||
|
leaveAnim = animate(
|
||||||
|
node,
|
||||||
|
{ boxShadow: [on(), off()] },
|
||||||
|
{ duration: 0.5, easing: [0.22, 0.03, 0.26, 1] },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener("mouseenter", onEnter);
|
||||||
|
node.addEventListener("mouseleave", onLeave);
|
||||||
|
|
||||||
|
return {
|
||||||
|
update(newOptions?: { color?: string }) {
|
||||||
|
color = newOptions?.color ?? "#ff4d00";
|
||||||
|
node.style.boxShadow = off();
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener("mouseenter", onEnter);
|
||||||
|
node.removeEventListener("mouseleave", onLeave);
|
||||||
|
enterAnim?.cancel();
|
||||||
|
leaveAnim?.cancel();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Svelte action: momentum-based grab-and-drag scrolling
|
||||||
|
* with elastic overscroll and spring-back at boundaries.
|
||||||
|
*
|
||||||
|
* IMPORTANT: The node must have exactly one child element (a wrapper div).
|
||||||
|
* Overscroll transforms are applied to that child, NOT to the scroll
|
||||||
|
* container itself (which would break overflow clipping).
|
||||||
|
*/
|
||||||
|
export function dragScroll(node: HTMLElement) {
|
||||||
|
const content = node.children[0] as HTMLElement | null;
|
||||||
|
|
||||||
|
let isDown = false;
|
||||||
|
let startY = 0;
|
||||||
|
let scrollStart = 0;
|
||||||
|
let lastY = 0;
|
||||||
|
let lastTime = 0;
|
||||||
|
let animFrame = 0;
|
||||||
|
let velocitySamples: number[] = [];
|
||||||
|
let overscrollAmount = 0;
|
||||||
|
let springAnim: ReturnType<typeof animate> | null = null;
|
||||||
|
|
||||||
|
function getMaxScroll() {
|
||||||
|
return node.scrollHeight - node.clientHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setOverscroll(amount: number) {
|
||||||
|
if (!content) return;
|
||||||
|
overscrollAmount = amount;
|
||||||
|
if (Math.abs(amount) < 0.5) {
|
||||||
|
content.style.transform = "";
|
||||||
|
overscrollAmount = 0;
|
||||||
|
} else {
|
||||||
|
content.style.transform = `translateY(${-amount}px)`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function springBack() {
|
||||||
|
if (!content) return;
|
||||||
|
const from = overscrollAmount;
|
||||||
|
if (Math.abs(from) < 0.5) {
|
||||||
|
setOverscroll(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
springAnim = animate(
|
||||||
|
content,
|
||||||
|
{ transform: [`translateY(${-from}px)`, "translateY(0px)"] },
|
||||||
|
{ duration: 0.6, easing: [0.16, 1, 0.3, 1] },
|
||||||
|
);
|
||||||
|
overscrollAmount = 0;
|
||||||
|
// Ensure DOM is clean after animation completes
|
||||||
|
springAnim.finished.then(() => {
|
||||||
|
if (content) content.style.transform = "";
|
||||||
|
}).catch(() => { /* cancelled — onDown handles cleanup */ });
|
||||||
|
}
|
||||||
|
|
||||||
|
function forceReset() {
|
||||||
|
springAnim?.cancel();
|
||||||
|
cancelAnimationFrame(animFrame);
|
||||||
|
overscrollAmount = 0;
|
||||||
|
if (content) content.style.transform = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDown(e: MouseEvent) {
|
||||||
|
if (e.button !== 0) return;
|
||||||
|
const tag = (e.target as HTMLElement).tagName;
|
||||||
|
if (["BUTTON", "INPUT", "LABEL", "SELECT", "TEXTAREA"].includes(tag)) return;
|
||||||
|
|
||||||
|
// Force-reset any lingering animation/transform state
|
||||||
|
forceReset();
|
||||||
|
|
||||||
|
isDown = true;
|
||||||
|
startY = e.pageY;
|
||||||
|
scrollStart = node.scrollTop;
|
||||||
|
lastY = e.pageY;
|
||||||
|
lastTime = Date.now();
|
||||||
|
velocitySamples = [];
|
||||||
|
node.style.cursor = "grabbing";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMove(e: MouseEvent) {
|
||||||
|
if (!isDown) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const y = e.pageY;
|
||||||
|
const now = Date.now();
|
||||||
|
const dt = now - lastTime;
|
||||||
|
if (dt > 0) {
|
||||||
|
velocitySamples.push((lastY - y) / dt);
|
||||||
|
if (velocitySamples.length > 5) velocitySamples.shift();
|
||||||
|
}
|
||||||
|
lastY = y;
|
||||||
|
lastTime = now;
|
||||||
|
|
||||||
|
const desiredScroll = scrollStart - (y - startY);
|
||||||
|
const maxScroll = getMaxScroll();
|
||||||
|
|
||||||
|
if (desiredScroll < 0) {
|
||||||
|
node.scrollTop = 0;
|
||||||
|
setOverscroll(desiredScroll * 0.3);
|
||||||
|
} else if (desiredScroll > maxScroll) {
|
||||||
|
node.scrollTop = maxScroll;
|
||||||
|
setOverscroll((desiredScroll - maxScroll) * 0.3);
|
||||||
|
} else {
|
||||||
|
node.scrollTop = desiredScroll;
|
||||||
|
if (overscrollAmount !== 0) setOverscroll(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUp() {
|
||||||
|
if (!isDown) return;
|
||||||
|
isDown = false;
|
||||||
|
node.style.cursor = "";
|
||||||
|
|
||||||
|
if (overscrollAmount !== 0) {
|
||||||
|
springBack();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const avgVelocity = velocitySamples.length > 0
|
||||||
|
? velocitySamples.reduce((a, b) => a + b, 0) / velocitySamples.length
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
// Clamp velocity (px/ms) and bail if negligible
|
||||||
|
const maxV = 4;
|
||||||
|
const v0 = Math.max(-maxV, Math.min(maxV, avgVelocity));
|
||||||
|
if (Math.abs(v0) < 0.005) return;
|
||||||
|
|
||||||
|
// Time-based exponential decay (iOS-style scroll physics).
|
||||||
|
// position(t) = start + v0 * tau * (1 - e^(-t/tau))
|
||||||
|
// velocity(t) = v0 * e^(-t/tau) → naturally asymptotes to zero
|
||||||
|
const tau = 325; // time constant in ms — iOS UIScrollView feel
|
||||||
|
const coastStart = performance.now();
|
||||||
|
const scrollStart2 = node.scrollTop;
|
||||||
|
const totalDist = v0 * tau;
|
||||||
|
|
||||||
|
function coast() {
|
||||||
|
const t = performance.now() - coastStart;
|
||||||
|
const decay = Math.exp(-t / tau);
|
||||||
|
const offset = totalDist * (1 - decay);
|
||||||
|
const targetScroll = scrollStart2 + offset;
|
||||||
|
|
||||||
|
const maxScroll = getMaxScroll();
|
||||||
|
|
||||||
|
if (targetScroll < 0) {
|
||||||
|
node.scrollTop = 0;
|
||||||
|
const currentV = Math.abs(v0 * decay);
|
||||||
|
const bounce = Math.min(40, currentV * 50);
|
||||||
|
setOverscroll(-bounce);
|
||||||
|
springBack();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (targetScroll > maxScroll) {
|
||||||
|
node.scrollTop = maxScroll;
|
||||||
|
const currentV = Math.abs(v0 * decay);
|
||||||
|
const bounce = Math.min(40, currentV * 50);
|
||||||
|
setOverscroll(bounce);
|
||||||
|
springBack();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
node.scrollTop = targetScroll;
|
||||||
|
|
||||||
|
// Stop when velocity < 0.5 px/sec (completely imperceptible)
|
||||||
|
if (Math.abs(v0 * decay) > 0.0005) {
|
||||||
|
animFrame = requestAnimationFrame(coast);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
coast();
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener("mousedown", onDown);
|
||||||
|
window.addEventListener("mousemove", onMove);
|
||||||
|
window.addEventListener("mouseup", onUp);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener("mousedown", onDown);
|
||||||
|
window.removeEventListener("mousemove", onMove);
|
||||||
|
window.removeEventListener("mouseup", onUp);
|
||||||
|
forceReset();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
283
src/lib/utils/sounds.ts
Normal file
283
src/lib/utils/sounds.ts
Normal file
@@ -0,0 +1,283 @@
|
|||||||
|
/**
|
||||||
|
* Synthesized notification sounds using the Web Audio API.
|
||||||
|
* No external audio files needed — all sounds are generated programmatically.
|
||||||
|
*/
|
||||||
|
|
||||||
|
let audioCtx: AudioContext | null = null;
|
||||||
|
|
||||||
|
function getAudioContext(): AudioContext {
|
||||||
|
if (!audioCtx) {
|
||||||
|
audioCtx = new AudioContext();
|
||||||
|
}
|
||||||
|
return audioCtx;
|
||||||
|
}
|
||||||
|
|
||||||
|
type SoundPreset = "bell" | "chime" | "soft" | "digital" | "harp" | "bowl" | "rain" | "whistle";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Play a notification sound with the given preset and volume.
|
||||||
|
* @param preset - One of: "bell", "chime", "soft", "digital"
|
||||||
|
* @param volume - 0 to 100
|
||||||
|
*/
|
||||||
|
export function playSound(preset: SoundPreset, volume: number): void {
|
||||||
|
const ctx = getAudioContext();
|
||||||
|
const gain = ctx.createGain();
|
||||||
|
gain.connect(ctx.destination);
|
||||||
|
const vol = (volume / 100) * 0.3; // Scale to reasonable max
|
||||||
|
|
||||||
|
switch (preset) {
|
||||||
|
case "bell":
|
||||||
|
playBell(ctx, gain, vol);
|
||||||
|
break;
|
||||||
|
case "chime":
|
||||||
|
playChime(ctx, gain, vol);
|
||||||
|
break;
|
||||||
|
case "soft":
|
||||||
|
playSoft(ctx, gain, vol);
|
||||||
|
break;
|
||||||
|
case "digital":
|
||||||
|
playDigital(ctx, gain, vol);
|
||||||
|
break;
|
||||||
|
case "harp":
|
||||||
|
playHarp(ctx, gain, vol);
|
||||||
|
break;
|
||||||
|
case "bowl":
|
||||||
|
playBowl(ctx, gain, vol);
|
||||||
|
break;
|
||||||
|
case "rain":
|
||||||
|
playRain(ctx, gain, vol);
|
||||||
|
break;
|
||||||
|
case "whistle":
|
||||||
|
playWhistle(ctx, gain, vol);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Warm bell — two sine tones with harmonics and slow decay */
|
||||||
|
function playBell(ctx: AudioContext, destination: GainNode, vol: number) {
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
|
||||||
|
// Fundamental
|
||||||
|
const osc1 = ctx.createOscillator();
|
||||||
|
const g1 = ctx.createGain();
|
||||||
|
osc1.type = "sine";
|
||||||
|
osc1.frequency.setValueAtTime(830, now);
|
||||||
|
g1.gain.setValueAtTime(vol, now);
|
||||||
|
g1.gain.exponentialRampToValueAtTime(0.001, now + 1.5);
|
||||||
|
osc1.connect(g1);
|
||||||
|
g1.connect(destination);
|
||||||
|
osc1.start(now);
|
||||||
|
osc1.stop(now + 1.5);
|
||||||
|
|
||||||
|
// Harmonic
|
||||||
|
const osc2 = ctx.createOscillator();
|
||||||
|
const g2 = ctx.createGain();
|
||||||
|
osc2.type = "sine";
|
||||||
|
osc2.frequency.setValueAtTime(1245, now);
|
||||||
|
g2.gain.setValueAtTime(vol * 0.4, now);
|
||||||
|
g2.gain.exponentialRampToValueAtTime(0.001, now + 1.0);
|
||||||
|
osc2.connect(g2);
|
||||||
|
g2.connect(destination);
|
||||||
|
osc2.start(now);
|
||||||
|
osc2.stop(now + 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Two-note ascending chime */
|
||||||
|
function playChime(ctx: AudioContext, destination: GainNode, vol: number) {
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
const notes = [523.25, 659.25]; // C5, E5
|
||||||
|
|
||||||
|
notes.forEach((freq, i) => {
|
||||||
|
const osc = ctx.createOscillator();
|
||||||
|
const g = ctx.createGain();
|
||||||
|
osc.type = "sine";
|
||||||
|
osc.frequency.setValueAtTime(freq, now);
|
||||||
|
const start = now + i * 0.15;
|
||||||
|
g.gain.setValueAtTime(0, start);
|
||||||
|
g.gain.linearRampToValueAtTime(vol, start + 0.02);
|
||||||
|
g.gain.exponentialRampToValueAtTime(0.001, start + 0.8);
|
||||||
|
osc.connect(g);
|
||||||
|
g.connect(destination);
|
||||||
|
osc.start(start);
|
||||||
|
osc.stop(start + 0.8);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Gentle soft ping — filtered triangle wave */
|
||||||
|
function playSoft(ctx: AudioContext, destination: GainNode, vol: number) {
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
|
||||||
|
const osc = ctx.createOscillator();
|
||||||
|
const filter = ctx.createBiquadFilter();
|
||||||
|
const g = ctx.createGain();
|
||||||
|
|
||||||
|
osc.type = "triangle";
|
||||||
|
osc.frequency.setValueAtTime(600, now);
|
||||||
|
osc.frequency.exponentialRampToValueAtTime(400, now + 0.5);
|
||||||
|
|
||||||
|
filter.type = "lowpass";
|
||||||
|
filter.frequency.setValueAtTime(2000, now);
|
||||||
|
filter.frequency.exponentialRampToValueAtTime(400, now + 0.8);
|
||||||
|
|
||||||
|
g.gain.setValueAtTime(vol, now);
|
||||||
|
g.gain.exponentialRampToValueAtTime(0.001, now + 1.2);
|
||||||
|
|
||||||
|
osc.connect(filter);
|
||||||
|
filter.connect(g);
|
||||||
|
g.connect(destination);
|
||||||
|
osc.start(now);
|
||||||
|
osc.stop(now + 1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Digital blip — short square wave burst */
|
||||||
|
function playDigital(ctx: AudioContext, destination: GainNode, vol: number) {
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
|
||||||
|
for (let i = 0; i < 2; i++) {
|
||||||
|
const osc = ctx.createOscillator();
|
||||||
|
const g = ctx.createGain();
|
||||||
|
osc.type = "square";
|
||||||
|
osc.frequency.setValueAtTime(880, now);
|
||||||
|
const start = now + i * 0.12;
|
||||||
|
g.gain.setValueAtTime(0, start);
|
||||||
|
g.gain.linearRampToValueAtTime(vol * 0.5, start + 0.01);
|
||||||
|
g.gain.exponentialRampToValueAtTime(0.001, start + 0.15);
|
||||||
|
osc.connect(g);
|
||||||
|
g.connect(destination);
|
||||||
|
osc.start(start);
|
||||||
|
osc.stop(start + 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Harp — cascading arpeggiated sine tones (C5-E5-G5-C6) */
|
||||||
|
function playHarp(ctx: AudioContext, destination: GainNode, vol: number) {
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
const notes = [523.25, 659.25, 783.99, 1046.5]; // C5, E5, G5, C6
|
||||||
|
|
||||||
|
notes.forEach((freq, i) => {
|
||||||
|
const osc = ctx.createOscillator();
|
||||||
|
const g = ctx.createGain();
|
||||||
|
osc.type = "sine";
|
||||||
|
osc.frequency.setValueAtTime(freq, now);
|
||||||
|
const start = now + i * 0.09;
|
||||||
|
g.gain.setValueAtTime(0, start);
|
||||||
|
g.gain.linearRampToValueAtTime(vol * 0.8, start + 0.01);
|
||||||
|
g.gain.exponentialRampToValueAtTime(0.001, start + 1.2);
|
||||||
|
osc.connect(g);
|
||||||
|
g.connect(destination);
|
||||||
|
osc.start(start);
|
||||||
|
osc.stop(start + 1.2);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Singing bowl — low sine with slow beating from detuned pair */
|
||||||
|
function playBowl(ctx: AudioContext, destination: GainNode, vol: number) {
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
|
||||||
|
// Two slightly detuned sines create a beating/shimmering effect
|
||||||
|
for (const freq of [293.66, 295.5]) { // ~D4 with 2Hz beat
|
||||||
|
const osc = ctx.createOscillator();
|
||||||
|
const g = ctx.createGain();
|
||||||
|
osc.type = "sine";
|
||||||
|
osc.frequency.setValueAtTime(freq, now);
|
||||||
|
g.gain.setValueAtTime(vol, now);
|
||||||
|
g.gain.exponentialRampToValueAtTime(0.001, now + 2.5);
|
||||||
|
osc.connect(g);
|
||||||
|
g.connect(destination);
|
||||||
|
osc.start(now);
|
||||||
|
osc.stop(now + 2.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Upper harmonic shimmer
|
||||||
|
const osc3 = ctx.createOscillator();
|
||||||
|
const g3 = ctx.createGain();
|
||||||
|
osc3.type = "sine";
|
||||||
|
osc3.frequency.setValueAtTime(880, now);
|
||||||
|
g3.gain.setValueAtTime(vol * 0.15, now);
|
||||||
|
g3.gain.exponentialRampToValueAtTime(0.001, now + 1.5);
|
||||||
|
osc3.connect(g3);
|
||||||
|
g3.connect(destination);
|
||||||
|
osc3.start(now);
|
||||||
|
osc3.stop(now + 1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Rain — filtered noise burst with gentle decay */
|
||||||
|
function playRain(ctx: AudioContext, destination: GainNode, vol: number) {
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
const bufferSize = ctx.sampleRate * 1;
|
||||||
|
const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
|
||||||
|
const data = buffer.getChannelData(0);
|
||||||
|
|
||||||
|
// White noise
|
||||||
|
for (let i = 0; i < bufferSize; i++) {
|
||||||
|
data[i] = Math.random() * 2 - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
const noise = ctx.createBufferSource();
|
||||||
|
noise.buffer = buffer;
|
||||||
|
|
||||||
|
const filter = ctx.createBiquadFilter();
|
||||||
|
filter.type = "bandpass";
|
||||||
|
filter.frequency.setValueAtTime(3000, now);
|
||||||
|
filter.frequency.exponentialRampToValueAtTime(800, now + 0.8);
|
||||||
|
filter.Q.setValueAtTime(0.5, now);
|
||||||
|
|
||||||
|
const g = ctx.createGain();
|
||||||
|
g.gain.setValueAtTime(vol * 0.6, now);
|
||||||
|
g.gain.exponentialRampToValueAtTime(0.001, now + 1.0);
|
||||||
|
|
||||||
|
noise.connect(filter);
|
||||||
|
filter.connect(g);
|
||||||
|
g.connect(destination);
|
||||||
|
noise.start(now);
|
||||||
|
noise.stop(now + 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Whistle — gentle two-note sine glide */
|
||||||
|
function playWhistle(ctx: AudioContext, destination: GainNode, vol: number) {
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
|
||||||
|
const osc = ctx.createOscillator();
|
||||||
|
const g = ctx.createGain();
|
||||||
|
osc.type = "sine";
|
||||||
|
osc.frequency.setValueAtTime(880, now);
|
||||||
|
osc.frequency.exponentialRampToValueAtTime(1318.5, now + 0.3); // A5 → E6 glide up
|
||||||
|
osc.frequency.setValueAtTime(1318.5, now + 0.5);
|
||||||
|
osc.frequency.exponentialRampToValueAtTime(1046.5, now + 0.8); // E6 → C6 settle
|
||||||
|
|
||||||
|
g.gain.setValueAtTime(0, now);
|
||||||
|
g.gain.linearRampToValueAtTime(vol * 0.5, now + 0.05);
|
||||||
|
g.gain.setValueAtTime(vol * 0.5, now + 0.6);
|
||||||
|
g.gain.exponentialRampToValueAtTime(0.001, now + 1.0);
|
||||||
|
|
||||||
|
osc.connect(g);
|
||||||
|
g.connect(destination);
|
||||||
|
osc.start(now);
|
||||||
|
osc.stop(now + 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Play a completion sound — slightly different from start (descending) */
|
||||||
|
export function playBreakEndSound(preset: SoundPreset, volume: number): void {
|
||||||
|
const ctx = getAudioContext();
|
||||||
|
const gain = ctx.createGain();
|
||||||
|
gain.connect(ctx.destination);
|
||||||
|
const vol = (volume / 100) * 0.3;
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
|
||||||
|
// Always a gentle descending two-note resolution
|
||||||
|
const notes = [659.25, 523.25]; // E5, C5 (descending = "done" feeling)
|
||||||
|
notes.forEach((freq, i) => {
|
||||||
|
const osc = ctx.createOscillator();
|
||||||
|
const g = ctx.createGain();
|
||||||
|
osc.type = preset === "digital" ? "square" : "sine";
|
||||||
|
osc.frequency.setValueAtTime(freq, now);
|
||||||
|
const start = now + i * 0.2;
|
||||||
|
g.gain.setValueAtTime(0, start);
|
||||||
|
g.gain.linearRampToValueAtTime(vol, start + 0.02);
|
||||||
|
g.gain.exponentialRampToValueAtTime(0.001, start + 0.6);
|
||||||
|
osc.connect(g);
|
||||||
|
g.connect(gain);
|
||||||
|
osc.start(start);
|
||||||
|
osc.stop(start + 0.6);
|
||||||
|
});
|
||||||
|
}
|
||||||
23
src/main.ts
Normal file
23
src/main.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import "./app.css";
|
||||||
|
import App from "./App.svelte";
|
||||||
|
import MiniTimer from "./lib/components/MiniTimer.svelte";
|
||||||
|
import BreakWindow from "./lib/components/BreakWindow.svelte";
|
||||||
|
import { mount } from "svelte";
|
||||||
|
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const isMini = params.has("mini");
|
||||||
|
const isBreak = params.has("break");
|
||||||
|
|
||||||
|
if (isMini || isBreak) {
|
||||||
|
// Transparent body so rounded shapes show through the transparent window
|
||||||
|
document.body.style.background = "transparent";
|
||||||
|
document.documentElement.style.background = "transparent";
|
||||||
|
}
|
||||||
|
|
||||||
|
const component = isMini ? MiniTimer : isBreak ? BreakWindow : App;
|
||||||
|
|
||||||
|
const app = mount(component, {
|
||||||
|
target: document.getElementById("app")!,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app;
|
||||||
2
src/vite-env.d.ts
vendored
Normal file
2
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
/// <reference types="svelte" />
|
||||||
|
/// <reference types="vite/client" />
|
||||||
5
svelte.config.js
Normal file
5
svelte.config.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
};
|
||||||
16
tsconfig.json
Normal file
16
tsconfig.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"verbatimModuleSyntax": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.svelte"]
|
||||||
|
}
|
||||||
25
vite.config.ts
Normal file
25
vite.config.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
|
||||||
|
const host = process.env.TAURI_DEV_HOST;
|
||||||
|
|
||||||
|
export default defineConfig(async () => ({
|
||||||
|
plugins: [tailwindcss(), svelte()],
|
||||||
|
clearScreen: false,
|
||||||
|
server: {
|
||||||
|
port: 1420,
|
||||||
|
strictPort: true,
|
||||||
|
host: host || false,
|
||||||
|
hmr: host
|
||||||
|
? {
|
||||||
|
protocol: "ws",
|
||||||
|
host,
|
||||||
|
port: 1421,
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
watch: {
|
||||||
|
ignored: ["**/src-tauri/**"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
Reference in New Issue
Block a user