Pomodoro Focus Timer

blockproductivity

Pomodoro productivity workspace with focus and break interval timers, SVG circular progress countdown display, active task queue with pomodoro estimate badges, ambient sound generator switcher, and daily focus analytics metrics.

Installation

$pnpm dlx uipkge-ng@latest add pomodoro-focus-timer

$npx uipkge-ng@latest add pomodoro-focus-timer

$yarn dlx uipkge-ng@latest add pomodoro-focus-timer

$bunx uipkge-ng@latest add pomodoro-focus-timer

Manifest:https://uipkge.dev/r/angular/pomodoro-focus-timer.jsonInstalls to:src/app/components/blocks/pomodoro-focus-timer/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

FocusTask

interface FocusTask {
  id: string
  title: string
  tag: string
  done: boolean
  currentPomodoros: number
  targetPomodoros: number
}

AmbientSound

interface AmbientSound {
  id: string
  name: string
  label: string
}

npm dependencies

lucide-angular

Includes

badge button card checkbox input progress separator

Files installed (2)

src/app/components/blocks/pomodoro-focus-timer/pomodoro-focus-timer.component.ts32.1 kB

// Pomodoro productivity workspace: focus / break interval timers with an SVG circular
// progress countdown, active task queue with pomodoro estimate pills, ambient sound
// generator switcher, and daily focus analytics. Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'
import {
  BarChart3,
  Check,
  Flame,
  Headphones,
  ListTodo,
  LucideAngularModule,
  Music2,
  Pause,
  Play,
  Plus,
  RotateCcw,
  SkipForward,
  Target,
  Trash2,
  Trees,
  Volume2,
  VolumeX,
  Waves,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import {
  UiCardComponent,
  UiCardContentComponent,
  UiCardDescriptionComponent,
  UiCardFooterComponent,
  UiCardHeaderComponent,
  UiCardTitleComponent,
} from '@/ui/card/card.component'
import { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'
import { UiInputComponent } from '@/ui/input/input.component'
import { UiProgressComponent } from '@/ui/progress/progress.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'

export interface FocusTask {
  id: string
  title: string
  tag: string
  done: boolean
  currentPomodoros: number
  targetPomodoros: number
}

export type TimerMode = 'focus' | 'shortBreak' | 'longBreak'

export const MODE_DURATIONS: Record<TimerMode, number> = {
  focus: 25 * 60,
  shortBreak: 5 * 60,
  longBreak: 15 * 60,
}

const defaultTasks: FocusTask[] = [
  {
    id: 'task-1',
    title: 'Refactor OKLCH color-mix utilities in Tailwind v4',
    tag: 'Design System',
    done: false,
    currentPomodoros: 2,
    targetPomodoros: 3,
  },
  {
    id: 'task-2',
    title: 'Audit ARIA accessibility roles on interactive primitives',
    tag: 'Accessibility',
    done: true,
    currentPomodoros: 2,
    targetPomodoros: 2,
  },
  {
    id: 'task-3',
    title: 'Draft technical RFC for component variant registry',
    tag: 'Architecture',
    done: false,
    currentPomodoros: 0,
    targetPomodoros: 2,
  },
  {
    id: 'task-4',
    title: 'Benchmark Astro island hydration bundle sizes',
    tag: 'Performance',
    done: false,
    currentPomodoros: 1,
    targetPomodoros: 4,
  },
]

interface AmbientSound {
  id: string
  name: string
  label: string
}

const ambientSounds: AmbientSound[] = [
  { id: 'off', name: 'Off / Mute', label: 'Silent' },
  { id: 'whitenoise', name: 'Deep Focus White Noise', label: 'White Noise' },
  { id: 'lofi', name: 'Lofi Beats', label: 'Lofi Beats' },
  { id: 'rainforest', name: 'Rainforest', label: 'Rainforest' },
]

// SVG geometry: radius 104, circumference 2 * PI * 104 ≈ 653.451
const RADIUS = 104
const CIRCUMFERENCE = 2 * Math.PI * RADIUS

export function formatTimerTime(seconds: number): string {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
}

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-pomodoro-focus-timer, [ui-pomodoro-focus-timer]',
  standalone: true,
  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiCardDescriptionComponent,
    UiCardFooterComponent,
    UiCardHeaderComponent,
    UiCardTitleComponent,
    UiCheckboxComponent,
    UiInputComponent,
    UiProgressComponent,
    UiSeparatorComponent,
  ],
  template: `
    <div data-slot="pomodoro-focus-timer" [class]="rootClass">
      <!-- Header Section -->
      <header class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div class="space-y-1">
          <div class="flex items-center gap-2">
            <h2 class="text-foreground text-2xl font-bold tracking-tight sm:text-3xl">
              Focus Space &amp; Pomodoro Timer
            </h2>
            <span ui-badge variant="secondary" class="font-mono text-xs"> v2.4 </span>
          </div>
          <p class="text-muted-foreground text-sm">
            High-yield interval productivity engine with ambient soundscapes and active task execution.
          </p>
        </div>

        <div class="flex flex-wrap items-center gap-2">
          <span
            ui-badge
            wrap
            variant="outline"
            class="border-warning/30 bg-warning/10 text-warning gap-1.5 px-3 py-1.5 text-xs font-semibold"
          >
            <lucide-icon [img]="Flame" class="fill-warning text-warning size-4" />
            <span>🔥 6-Day Focus Streak · {{ completedSessionsToday() }} Sessions Complete Today</span>
          </span>
        </div>
      </header>

      <!-- Ambient Sound Preset Bar -->
      <div ui-card>
        <div ui-card-content class="flex flex-wrap items-center justify-between gap-3 p-3 sm:p-4">
          <div class="text-muted-foreground flex items-center gap-2 text-xs font-medium">
            <lucide-icon [img]="Headphones" class="text-primary size-4" />
            <span class="text-foreground font-semibold">Ambient Sound:</span>
            <span class="hidden sm:inline">Choose your background audio focus generator</span>
          </div>

          <div class="flex flex-wrap items-center gap-1.5">
            @for (sound of ambientSounds; track sound.id) {
              <button
                ui-button
                [variant]="selectedSound() === sound.id && !isSoundMuted() ? 'default' : 'outline'"
                size="sm"
                class="h-8 gap-1.5 text-xs"
                (click)="selectAmbientSound(sound.id)"
              >
                <lucide-icon [img]="soundIcon(sound.id)" class="size-3.5" />
                <span>{{ sound.name }}</span>
                @if (selectedSound() === sound.id && !isSoundMuted() && sound.id !== 'off') {
                  <span class="flex items-center gap-0.5">
                    <span class="bg-primary-foreground h-2 w-0.5 animate-pulse"></span>
                    <span class="bg-primary-foreground h-3.5 w-0.5 animate-pulse delay-75"></span>
                    <span class="bg-primary-foreground h-1.5 w-0.5 animate-pulse delay-150"></span>
                  </span>
                }
              </button>
            }

            <button
              ui-button
              variant="ghost"
              size="icon-sm"
              class="text-muted-foreground hover:text-foreground size-8"
              [attr.title]="isSoundMuted() ? 'Unmute Ambient Sound' : 'Mute Ambient Sound'"
              (click)="toggleSoundMute()"
            >
              @if (isSoundMuted()) {
                <lucide-icon [img]="VolumeX" class="text-destructive size-4" />
              } @else {
                <lucide-icon [img]="Volume2" class="size-4" />
              }
            </button>
          </div>
        </div>
      </div>

      <!-- Main Grid: Timer Centerpiece (Left) and Tasks + Analytics (Right) -->
      <div class="grid grid-cols-1 items-start gap-6 lg:grid-cols-12">
        <!-- Left Column: Centerpiece Timer -->
        <div class="space-y-6 lg:col-span-6">
          <div ui-card class="border-border relative overflow-hidden shadow-xs">
            <div ui-card-header class="pb-2 text-center">
              <div class="bg-muted/70 mx-auto flex w-full max-w-sm items-center justify-center rounded-xl p-1">
                <button
                  ui-button
                  [variant]="currentMode() === 'focus' ? 'default' : 'ghost'"
                  size="sm"
                  class="flex-1 rounded-lg text-xs font-semibold"
                  (click)="setMode('focus')"
                >
                  Focus 25m
                </button>
                <button
                  ui-button
                  [variant]="currentMode() === 'shortBreak' ? 'default' : 'ghost'"
                  size="sm"
                  class="flex-1 rounded-lg text-xs font-semibold"
                  (click)="setMode('shortBreak')"
                >
                  Short Break 5m
                </button>
                <button
                  ui-button
                  [variant]="currentMode() === 'longBreak' ? 'default' : 'ghost'"
                  size="sm"
                  class="flex-1 rounded-lg text-xs font-semibold"
                  (click)="setMode('longBreak')"
                >
                  Long Break 15m
                </button>
              </div>
            </div>

            <div ui-card-content class="flex flex-col items-center justify-center pt-4 pb-2">
              <div class="relative flex size-64 items-center justify-center sm:size-72">
                <svg class="size-full -rotate-90 transform" viewBox="0 0 256 256">
                  <circle
                    cx="128"
                    cy="128"
                    [attr.r]="radius"
                    fill="transparent"
                    stroke="currentColor"
                    stroke-width="10"
                    class="text-muted/40"
                  />
                  <circle
                    cx="128"
                    cy="128"
                    [attr.r]="radius"
                    fill="transparent"
                    stroke="currentColor"
                    stroke-width="10"
                    stroke-linecap="round"
                    [attr.stroke-dasharray]="circumference"
                    [attr.stroke-dashoffset]="strokeDashoffset()"
                    [class]="progressRingClass"
                  />
                </svg>

                <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
                  <div class="flex items-center gap-1.5">
                    <span [class]="statusDotClass"></span>
                    <span [class]="modeLabelClass">
                      {{
                        currentMode() === 'focus'
                          ? 'Deep Focus'
                          : currentMode() === 'shortBreak'
                            ? 'Short Break'
                            : 'Rest Phase'
                      }}
                    </span>
                  </div>

                  <div
                    class="text-foreground my-1 font-mono text-5xl font-bold tracking-tight tabular-nums sm:text-6xl"
                  >
                    {{ formatTime(remainingSeconds()) }}
                  </div>

                  <div class="text-muted-foreground text-xs font-medium">
                    @if (isRunning()) {
                      <span>Session {{ currentSession() }} of 4 active</span>
                    } @else {
                      <span>Timer Paused</span>
                    }
                  </div>
                </div>
              </div>

              <div
                class="border-border/70 bg-muted/40 mt-4 flex w-full max-w-sm items-center justify-between gap-2 rounded-lg border p-2.5 text-xs"
              >
                <div class="flex min-w-0 flex-wrap items-center gap-2">
                  <lucide-icon [img]="Target" class="text-primary size-4 shrink-0" />
                  <div class="min-w-0 flex-1">
                    <span class="text-foreground block truncate font-medium">{{ activeTask().title }}</span>
                  </div>
                </div>
                <span ui-badge wrap variant="secondary" class="shrink-0 gap-1 text-xs">
                  <span>🍅 {{ activeTask().currentPomodoros }}/{{ activeTask().targetPomodoros }}</span>
                </span>
              </div>
            </div>

            <div ui-card-footer class="flex flex-col gap-4 pt-2">
              <div class="flex items-center justify-center gap-4">
                <button
                  ui-button
                  variant="outline"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground size-11 rounded-full"
                  title="Reset current interval"
                  aria-label="Reset timer"
                  (click)="resetTimer()"
                >
                  <lucide-icon [img]="RotateCcw" class="size-4" />
                </button>

                <button
                  ui-button
                  variant="default"
                  size="icon-lg"
                  class="size-14 rounded-full shadow-md transition-[color,background-color,border-color,box-shadow,opacity,transform,scale,translate,rotate] active:scale-95"
                  [attr.title]="isRunning() ? 'Pause Timer' : 'Start Focus Timer'"
                  [attr.aria-label]="isRunning() ? 'Pause Timer' : 'Start Focus Timer'"
                  (click)="toggleTimer()"
                >
                  @if (isRunning()) {
                    <lucide-icon [img]="Pause" class="size-6 fill-current" />
                  } @else {
                    <lucide-icon [img]="Play" class="ml-0.5 size-6 fill-current" />
                  }
                </button>

                <button
                  ui-button
                  variant="outline"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground size-11 rounded-full"
                  title="Skip to next phase"
                  aria-label="Skip to next phase"
                  (click)="skipPhase()"
                >
                  <lucide-icon [img]="SkipForward" class="size-4" />
                </button>
              </div>

              <ui-separator />

              <div class="text-muted-foreground flex w-full items-center justify-between text-xs">
                <span class="text-foreground font-medium">Session {{ currentSession() }} of 4</span>

                <div class="flex items-center gap-2">
                  @for (index of [1, 2, 3, 4]; track index) {
                    <div [class]="sessionDotClass(index)">
                      @if (index < currentSession()) {
                        <lucide-icon [img]="Check" class="size-2.5 stroke-[3]" />
                      }
                    </div>
                  }
                </div>

                <span>Long break after 4</span>
              </div>
            </div>
          </div>

          <!-- Daily Focus Analytics Card -->
          <div ui-card class="border-border shadow-xs">
            <div ui-card-header class="pb-3">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <lucide-icon [img]="BarChart3" class="text-primary size-4" />
                  <h3 ui-card-title class="text-base font-semibold">Daily Focus Analytics</h3>
                </div>
                <span ui-badge wrap variant="outline" class="text-muted-foreground text-xs font-normal"> Today </span>
              </div>
              <p ui-card-description class="text-xs">Aggregated productivity stats and session completion rate</p>
            </div>

            <div ui-card-content class="space-y-4">
              <div class="grid grid-cols-3 gap-3">
                <div class="border-border/60 bg-muted/30 rounded-lg border p-3 text-center">
                  <div class="text-muted-foreground text-xs font-medium">Total Focus</div>
                  <div class="text-foreground mt-1 font-mono text-lg font-bold tabular-nums">3h 45m</div>
                  <div class="text-success mt-0.5 text-xs">+28m vs avg</div>
                </div>

                <div class="border-border/60 bg-muted/30 rounded-lg border p-3 text-center">
                  <div class="text-muted-foreground text-xs font-medium">Completed</div>
                  <div class="text-foreground mt-1 font-mono text-lg font-bold tabular-nums">
                    {{ completedSessionsToday() }} <span class="text-muted-foreground text-xs font-normal">/ 10</span>
                  </div>
                  <div class="text-muted-foreground mt-0.5 text-xs">80% of goal</div>
                </div>

                <div class="border-border/60 bg-muted/30 rounded-lg border p-3 text-center">
                  <div class="text-muted-foreground text-xs font-medium">Focus Score</div>
                  <div class="text-foreground mt-1 font-mono text-lg font-bold tabular-nums">94%</div>
                  <div class="text-primary mt-0.5 text-xs font-semibold">High Flow</div>
                </div>
              </div>

              <div class="space-y-1.5">
                <div class="flex items-center justify-between text-xs">
                  <span class="text-muted-foreground">Daily Session Goal</span>
                  <span class="text-foreground font-semibold tabular-nums"
                    >{{ completedSessionsToday() }}/10 (80%)</span
                  >
                </div>
                <ui-progress [value]="80" class="h-2" />
              </div>

              <ui-separator />

              <div class="space-y-2">
                <div class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
                  Recent Completed Intervals
                </div>
                <div class="space-y-1.5 text-xs">
                  <div class="bg-muted/30 flex items-center justify-between rounded-md px-2.5 py-1.5">
                    <div class="flex items-center gap-2 truncate">
                      <span class="text-muted-foreground font-mono tabular-nums">10:45 AM</span>
                      <span class="text-foreground truncate font-medium">Refactor OKLCH color-mix</span>
                    </div>
                    <span ui-badge wrap variant="success" class="h-5 px-1.5 text-xs">25m Focus</span>
                  </div>
                  <div class="bg-muted/30 flex items-center justify-between rounded-md px-2.5 py-1.5">
                    <div class="flex items-center gap-2 truncate">
                      <span class="text-muted-foreground font-mono tabular-nums">10:15 AM</span>
                      <span class="text-muted-foreground truncate">Short Break · Lofi Beats</span>
                    </div>
                    <span ui-badge wrap variant="secondary" class="h-5 px-1.5 text-xs">5m Rest</span>
                  </div>
                  <div class="bg-muted/30 flex items-center justify-between rounded-md px-2.5 py-1.5">
                    <div class="flex items-center gap-2 truncate">
                      <span class="text-muted-foreground font-mono tabular-nums">09:30 AM</span>
                      <span class="text-foreground truncate font-medium">Audit ARIA roles</span>
                    </div>
                    <span ui-badge wrap variant="success" class="h-5 px-1.5 text-xs">25m Focus</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right Column: Active Task Queue -->
        <div class="space-y-6 lg:col-span-6">
          <div ui-card class="border-border shadow-xs">
            <div ui-card-header class="pb-3">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <lucide-icon [img]="ListTodo" class="text-primary size-4" />
                  <h3 ui-card-title class="text-base font-semibold">Active Focus Task Queue</h3>
                </div>
                <span ui-badge wrap variant="secondary" class="text-xs">
                  {{ completedTasksCount() }}/{{ tasks().length }} Completed
                </span>
              </div>
              <p ui-card-description class="text-xs">
                Select an item to link it to the active timer countdown. Check off tasks as you finish.
              </p>
            </div>

            <div ui-card-content class="space-y-4">
              <form class="flex items-center gap-2" (submit)="addTaskFromForm($event)">
                <div class="flex-1">
                  <ui-input
                    [value]="newTaskTitle()"
                    (valueChange)="newTaskTitle.set($event)"
                    placeholder="Add a new focus task..."
                    size="middle"
                    class="text-xs"
                  />
                </div>
                <div class="w-20">
                  <ui-input
                    [value]="newTaskEstimateText()"
                    (valueChange)="newTaskEstimate.set(Number($event) || 2)"
                    type="number"
                    class="text-center text-xs tabular-nums"
                    title="Estimated Pomodoros"
                  />
                </div>
                <button ui-button type="submit" size="default" class="gap-1 text-xs">
                  <lucide-icon [img]="Plus" class="size-3.5" />
                  <span>Add</span>
                </button>
              </form>

              <ui-separator />

              <div class="space-y-2.5">
                @for (task of tasks(); track task.id) {
                  <div [class]="taskRowClass(task)">
                    <div class="flex min-w-0 flex-1 items-start gap-3">
                      <div class="pt-0.5">
                        <ui-checkbox [checked]="task.done" (checkedChange)="toggleTaskDone(task.id)" />
                      </div>

                      <button
                        type="button"
                        class="focus-visible:ring-ring min-w-0 flex-1 cursor-pointer rounded-md text-left focus-visible:ring-2 focus-visible:outline-none"
                        [attr.aria-pressed]="task.id === activeTaskId()"
                        (click)="selectActiveTask(task.id)"
                      >
                        <div class="flex items-center gap-2">
                          <p [class]="taskTitleClass(task)">
                            {{ task.title }}
                          </p>
                          @if (task.id === activeTaskId() && !task.done) {
                            <span ui-badge wrap variant="default" class="h-4.5 px-1.5 text-xs"> Active </span>
                          }
                        </div>

                        <div class="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
                          <span ui-badge wrap variant="outline" class="h-4 px-1 text-xs font-normal">
                            {{ task.tag }}
                          </span>
                          <span>Estimated: {{ task.targetPomodoros * 25 }}m</span>
                        </div>
                      </button>
                    </div>

                    <div class="flex items-center gap-2">
                      <span
                        ui-badge
                        [variant]="task.done ? 'secondary' : task.id === activeTaskId() ? 'default' : 'outline'"
                        class="shrink-0 gap-1 text-xs font-medium whitespace-normal tabular-nums"
                      >
                        <span>🍅 {{ task.currentPomodoros }}/{{ task.targetPomodoros }}</span>
                      </span>

                      <button
                        ui-button
                        variant="ghost"
                        size="icon-sm"
                        class="text-muted-foreground hover:text-destructive size-7 opacity-0 group-hover:opacity-100"
                        title="Remove task"
                        (click)="removeTask(task.id)"
                      >
                        <lucide-icon [img]="Trash2" class="size-3.5" />
                      </button>
                    </div>
                  </div>
                }
              </div>
            </div>

            <div
              ui-card-footer
              class="border-border/50 bg-muted/20 text-muted-foreground flex items-center justify-between border-t py-3 text-xs"
            >
              <span>Tip: Switch tasks any time without resetting timer elapsed time.</span>
              <button
                ui-button
                variant="ghost"
                size="sm"
                class="text-muted-foreground hover:text-foreground h-7 text-xs"
                (click)="clearDoneTasks()"
              >
                Clear Done ({{ completedTasksCount() }})
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class UiPomodoroFocusTimerComponent {
  protected readonly BarChart3 = BarChart3
  protected readonly Check = Check
  protected readonly Flame = Flame
  protected readonly Headphones = Headphones
  protected readonly ListTodo = ListTodo
  protected readonly Music2 = Music2
  protected readonly Pause = Pause
  protected readonly Play = Play
  protected readonly Plus = Plus
  protected readonly RotateCcw = RotateCcw
  protected readonly SkipForward = SkipForward
  protected readonly Target = Target
  protected readonly Trash2 = Trash2
  protected readonly Trees = Trees
  protected readonly Volume2 = Volume2
  protected readonly VolumeX = VolumeX
  protected readonly Waves = Waves

  protected readonly ambientSounds = ambientSounds
  protected readonly radius = RADIUS
  protected readonly circumference = CIRCUMFERENCE

  @Input('class') className?: string
  @Input() set initialMode(v: TimerMode | undefined) {
    if (v) {
      this.currentMode.set(v)
      this.remainingSeconds.set(MODE_DURATIONS[v])
    }
  }
  @Input() set initialTime(v: number | undefined) {
    if (v !== undefined) this.remainingSeconds.set(v)
  }
  @Input() set initialSound(v: string | undefined) {
    if (v) this.selectedSound.set(v)
  }
  @Input() set initialSession(v: number | undefined) {
    if (v !== undefined) this.currentSession.set(v)
  }

  readonly currentMode = signal<TimerMode>('focus')
  readonly remainingSeconds = signal(1485)
  readonly isRunning = signal(false)
  readonly currentSession = signal(3)
  readonly completedSessionsToday = signal(8)
  readonly selectedSound = signal('lofi')
  readonly isSoundMuted = signal(false)
  readonly newTaskTitle = signal('')
  readonly newTaskEstimate = signal(2)
  readonly tasks = signal<FocusTask[]>(defaultTasks.map((t) => ({ ...t })))
  readonly activeTaskId = signal('task-1')

  private timerInterval: ReturnType<typeof setInterval> | null = null

  constructor() {
    inject(DestroyRef).onDestroy(() => {
      if (this.timerInterval) clearInterval(this.timerInterval)
    })
  }

  readonly activeTask = computed<FocusTask>(() => {
    const list = this.tasks()
    return (
      list.find((t) => t.id === this.activeTaskId()) ??
      list.find((t) => !t.done) ?? {
        id: 'default',
        title: 'General Deep Work Session',
        tag: 'Productivity',
        done: false,
        currentPomodoros: 0,
        targetPomodoros: 1,
      }
    )
  })

  readonly completedTasksCount = computed(() => this.tasks().filter((t) => t.done).length)
  readonly totalModeSeconds = computed(() => MODE_DURATIONS[this.currentMode()])
  readonly progressPercentage = computed(() => {
    const elapsed = this.totalModeSeconds() - this.remainingSeconds()
    return Math.min(100, Math.max(0, (elapsed / this.totalModeSeconds()) * 100))
  })
  readonly strokeDashoffset = computed(() => CIRCUMFERENCE * (1 - this.progressPercentage() / 100))
  readonly newTaskEstimateText = computed(() => String(this.newTaskEstimate()))

  get rootClass(): string {
    return cn('mx-auto w-full max-w-5xl space-y-6', this.className)
  }

  get progressRingClass(): string {
    return cn(
      'transition-colors duration-700 ease-out motion-reduce:transition-none',
      this.currentMode() === 'focus' && 'text-primary',
      this.currentMode() === 'shortBreak' && 'text-success',
      this.currentMode() === 'longBreak' && 'text-info',
    )
  }

  get statusDotClass(): string {
    return cn(
      'size-2 rounded-full',
      this.isRunning() ? 'animate-ping' : 'opacity-60',
      this.currentMode() === 'focus' && 'bg-primary',
      this.currentMode() === 'shortBreak' && 'bg-success',
      this.currentMode() === 'longBreak' && 'bg-info',
    )
  }

  get modeLabelClass(): string {
    return cn(
      'text-xs font-semibold tracking-wider uppercase',
      this.currentMode() === 'focus' && 'text-primary',
      this.currentMode() === 'shortBreak' && 'text-success',
      this.currentMode() === 'longBreak' && 'text-info',
    )
  }

  sessionDotClass(index: number): string {
    return cn(
      'flex size-4 items-center justify-center rounded-full transition-colors',
      index < this.currentSession()
        ? 'bg-primary text-primary-foreground'
        : index === this.currentSession()
          ? 'ring-primary ring-offset-background bg-primary/80 ring-2 ring-offset-2'
          : 'border-muted-foreground/30 bg-muted/30 border-2',
    )
  }

  taskRowClass(task: FocusTask): string {
    return cn(
      'group flex items-center justify-between gap-3 rounded-lg border p-3 transition-colors',
      task.id === this.activeTaskId() && !task.done
        ? 'border-primary/50 bg-primary/5 shadow-xs'
        : 'border-border/70 bg-card hover:border-border hover:bg-muted/30',
      task.done && 'bg-muted/20 opacity-65',
    )
  }

  taskTitleClass(task: FocusTask): string {
    return cn(
      'text-foreground text-xs font-medium transition-colors',
      task.done && 'text-muted-foreground line-through',
    )
  }

  soundIcon(id: string): typeof VolumeX {
    if (id === 'off') return VolumeX
    if (id === 'whitenoise') return Waves
    if (id === 'rainforest') return Trees
    return Music2
  }

  formatTime(seconds: number): string {
    return formatTimerTime(seconds)
  }

  selectAmbientSound(id: string): void {
    this.selectedSound.set(id)
    this.isSoundMuted.set(id === 'off')
  }

  startTimer(): void {
    if (this.isRunning()) return
    this.isRunning.set(true)
    this.timerInterval = setInterval(() => {
      if (this.remainingSeconds() > 0) {
        this.remainingSeconds.update((s) => s - 1)
      } else {
        this.skipPhase()
      }
    }, 1000)
  }

  pauseTimer(): void {
    this.isRunning.set(false)
    if (this.timerInterval) {
      clearInterval(this.timerInterval)
      this.timerInterval = null
    }
  }

  toggleTimer(): void {
    if (this.isRunning()) this.pauseTimer()
    else this.startTimer()
  }

  resetTimer(): void {
    this.pauseTimer()
    this.remainingSeconds.set(MODE_DURATIONS[this.currentMode()])
  }

  setMode(mode: TimerMode): void {
    this.pauseTimer()
    this.currentMode.set(mode)
    this.remainingSeconds.set(MODE_DURATIONS[mode])
  }

  skipPhase(): void {
    this.pauseTimer()
    if (this.currentMode() === 'focus') {
      this.completedSessionsToday.update((c) => c + 1)
      const task = this.tasks().find((t) => t.id === this.activeTaskId())
      if (task && task.currentPomodoros < task.targetPomodoros) {
        this.tasks.update((prev) =>
          prev.map((t) => (t.id === task.id ? { ...t, currentPomodoros: t.currentPomodoros + 1 } : t)),
        )
      }
      if (this.currentSession() >= 4) {
        this.currentMode.set('longBreak')
        this.currentSession.set(1)
      } else {
        this.currentMode.set('shortBreak')
        this.currentSession.update((s) => s + 1)
      }
    } else {
      this.currentMode.set('focus')
    }
    this.remainingSeconds.set(MODE_DURATIONS[this.currentMode()])
  }

  toggleTaskDone(taskId: string): void {
    this.tasks.update((prev) =>
      prev.map((t) => {
        if (t.id !== taskId) return t
        const done = !t.done
        return {
          ...t,
          done,
          currentPomodoros: done ? Math.max(t.currentPomodoros, t.targetPomodoros) : t.currentPomodoros,
        }
      }),
    )
  }

  selectActiveTask(taskId: string): void {
    this.activeTaskId.set(taskId)
  }

  removeTask(taskId: string): void {
    this.tasks.update((prev) => prev.filter((t) => t.id !== taskId))
    if (this.activeTaskId() === taskId) {
      const rest = this.tasks()
      if (rest.length > 0) this.activeTaskId.set(rest[0].id)
    }
  }

  addTask(): void {
    const trimmed = this.newTaskTitle().trim()
    if (!trimmed) return
    const id = `task-${Date.now()}`
    this.tasks.update((prev) => [
      ...prev,
      {
        id,
        title: trimmed,
        tag: 'Focus',
        done: false,
        currentPomodoros: 0,
        targetPomodoros: Math.max(1, this.newTaskEstimate() || 2),
      },
    ])
    this.newTaskTitle.set('')
    this.newTaskEstimate.set(2)
    if (this.tasks().length === 1) this.activeTaskId.set(id)
  }

  addTaskFromForm(event: Event): void {
    event.preventDefault()
    this.addTask()
  }

  clearDoneTasks(): void {
    this.tasks.update((prev) => prev.filter((t) => !t.done))
  }

  toggleSoundMute(): void {
    this.isSoundMuted.update((m) => !m)
  }
}

src/app/components/blocks/pomodoro-focus-timer/index.ts0.2 kB

Raw manifest:https://uipkge.dev/r/angular/pomodoro-focus-timer.json

Change language