@tuturuuu/ui 0.36.1 → 0.37.1

package/src/components/ui/legacy/calendar/calendar-day-display.test.tsx

@@ -0,0 +1,106 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+const state = vi.hoisted(() => ({
+  zone: 'America/New_York',
+  showWeekends: false,
+}));
+vi.mock('./settings/settings-context', () => ({
+  useCalendarSettings: () => ({
+    settings: {
+      timezone: { timezone: state.zone },
+      appearance: { showWeekends: state.showWeekends },
+    },
+  }),
+}));
+vi.mock('@tuturuuu/ui/hooks/use-user-config', () => ({
+  useUserBooleanConfig: () => ({ value: false }),
+}));
+vi.mock('./all-day-event-bar', () => ({ AllDayEventBar: () => null }));
+vi.mock('./time-indicator-line', () => ({
+  TimeIndicatorLine: ({ columnIndex }: { columnIndex: number }) => (
+    <div data-testid="indicator">{columnIndex}</div>
+  ),
+}));
+
+import { DayTitle } from './day-title';
+import { TimeIndicator } from './time-indicator';
+import { WeekdayBar } from './weekday-bar';
+
+afterEach(() => vi.useRealTimers());
+describe('calendar day display', () => {
+  it('keeps Monday carrier headings and weekday filtering in a zone behind the browser', () => {
+    state.zone = 'America/New_York';
+    render(
+      <WeekdayBar
+        locale="en"
+        view="week"
+        dates={[
+          new Date(2026, 8, 6),
+          new Date(2026, 8, 7),
+          new Date(2026, 8, 8),
+        ]}
+      />
+    );
+    expect(screen.queryByText('Sun')).toBeNull();
+    expect(screen.getByText('Mon')).toBeVisible();
+    expect(screen.getByText('7')).toBeVisible();
+    expect(screen.getByText('Tue')).toBeVisible();
+  });
+  it.each([
+    ['America/New_York', '2026-09-08T01:00:00Z', 7, 0],
+    ['Asia/Tokyo', '2026-09-07T23:00:00Z', 8, 1],
+  ])(
+    'aligns the heading and indicator Today for %s',
+    (zone, now, day, column) => {
+      state.zone = zone;
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date(now));
+      render(
+        <>
+          <DayTitle
+            view="day"
+            date={new Date(2026, 8, day)}
+            weekday="Heading"
+          />
+          <TimeIndicator dates={[new Date(2026, 8, 7), new Date(2026, 8, 8)]} />
+        </>
+      );
+      expect(screen.getByText(String(day))).toHaveClass('bg-primary');
+      expect(screen.getByTestId('indicator')).toHaveTextContent(String(column));
+    }
+  );
+  it('advances Today and the indicator at calendar midnight while preserving view days', () => {
+    state.zone = 'America/New_York';
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-09-08T03:59:30Z'));
+    const dates = [new Date(2026, 8, 7), new Date(2026, 8, 8)];
+    const { unmount } = render(
+      <>
+        {dates.map((date) => (
+          <DayTitle
+            key={date.getDate()}
+            view="day"
+            date={date}
+            weekday="Heading"
+          />
+        ))}
+        <TimeIndicator dates={dates} />
+      </>
+    );
+    expect(screen.getByText('7')).toHaveClass('bg-primary');
+    expect(screen.getByTestId('indicator')).toHaveTextContent('0');
+    // Every heading and indicator subscribes to a single shared clock timer.
+    expect(vi.getTimerCount()).toBe(1);
+    act(() => vi.advanceTimersByTime(30_000));
+    expect(screen.getByText('7')).not.toHaveClass('bg-primary');
+    expect(screen.getByText('8')).toHaveClass('bg-primary');
+    expect(screen.getByTestId('indicator')).toHaveTextContent('1');
+    expect(dates.map((date) => [date.getDate(), date.getHours()])).toEqual([
+      [7, 0],
+      [8, 0],
+    ]);
+    unmount();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});

package/src/components/ui/legacy/calendar/calendar-header.tsx

@@ -19,7 +19,11 @@ import {
 } from '@tuturuuu/ui/select';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import dayjs from 'dayjs';
+import { useCalendarClock } from '../../../../hooks/use-calendar-clock';
+import { useCalendarDayZone } from '../../../../hooks/use-calendar-day-zone';
 import type { CalendarView } from '../../../../hooks/use-view-transition';
+import { calendarToday } from '../../../../lib/calendar-day';
+import { useCalendarSettings } from './settings/settings-context';
 
 export function CalendarHeader({
   t,
@@ -43,6 +47,10 @@ export function CalendarHeader({
   onViewChange: (view: CalendarView) => void;
   extras?: React.ReactNode;
 }) {
+  const { settings } = useCalendarSettings();
+  const zone = settings.timezone.timezone;
+  const dayZone = useCalendarDayZone();
+  const today = calendarToday(zone, useCalendarClock());
   const views = availableViews.filter((view) => view?.disabled !== true);
   const { value: showLunar, toggle: toggleLunar } = useUserBooleanConfig(
     'SHOW_LUNAR_CALENDAR',
@@ -84,14 +92,15 @@ export function CalendarHeader({
     });
 
   const { syncStatus } = useCalendarSync();
-  const selectToday = () => setDate(new Date());
-  const isTodaySelected = () => dayjs(date).isSame(dayjs(), 'day');
+  const selectToday = () =>
+    dayZone?.goToToday ? dayZone.goToToday() : setDate(today);
+  const isTodaySelected = () => dayjs(date).isSame(dayjs(today), 'day');
   const isCurrentMonth = () =>
     view === 'month' &&
-    date.getMonth() === new Date().getMonth() &&
-    date.getFullYear() === new Date().getFullYear();
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear();
   const isCurrentYear = () =>
-    view === 'year' && date.getFullYear() === new Date().getFullYear();
+    view === 'year' && date.getFullYear() === today.getFullYear();
 
   const isCurrentPeriod =
     isTodaySelected() || isCurrentMonth() || isCurrentYear();

package/src/components/ui/legacy/calendar/calendar-matrix.tsx

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
+import { calendarDayKey } from '../../../../lib/calendar-day';
 import { CalendarColumn } from './calendar-column';
 import { DAY_HEIGHT, MAX_LEVEL } from './config';
 import { EventCard } from './event-card';
@@ -19,12 +20,6 @@ type LayoutCalendarEvent = CalendarEvent & {
   _startMs: number;
 };
 
-function getDayKeyFromDate(date: Date, tz?: string) {
-  return (tz === 'auto' ? dayjs(date) : dayjs(date).tz(tz)).format(
-    'YYYY-MM-DD'
-  );
-}
-
 function getDayKeyFromIso(value: string, tz?: string) {
   return (tz === 'auto' ? dayjs(value) : dayjs(value).tz(tz)).format(
     'YYYY-MM-DD'
@@ -179,7 +174,7 @@ export const CalendarBaseMatrix = ({ dates }: { dates: Date[] }) => {
       {dates.map((_, index) => (
         <CalendarColumn
           key={`cal-col-${index}`}
-          date={dayjs(dates[index]!).format('YYYY-MM-DD')}
+          date={calendarDayKey(dates[index]!)}
           last={index === dates.length - 1}
         />
       ))}
@@ -197,8 +192,8 @@ export const CalendarEventMatrix = ({ dates }: { dates: Date[] }) => {
   const tz = settings?.timezone?.timezone;
 
   const visibleDayKeys = useMemo(
-    () => new Set(dates.map((date) => getDayKeyFromDate(date, tz))),
-    [dates, tz]
+    () => new Set(dates.map(calendarDayKey)),
+    [dates]
   );
 
   const filteredRealEvents = useMemo(

package/src/components/ui/legacy/calendar/calendar-views.test.tsx

@@ -1,21 +1,26 @@
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createCalendarEventLookup } from '../../../../hooks/calendar-event-lookup';
 
 const state = vi.hoisted(() => ({
   openModal: vi.fn(),
   addEmptyEvent: vi.fn(),
   events: [] as CalendarEvent[],
   weekStartsOn: 0,
+  zone: 'America/New_York',
+  useZonedLookup: false,
 }));
 vi.mock('@tuturuuu/ui/hooks/use-calendar', () => ({
   useCalendar: () => ({
     ...state,
     getCurrentEvents: (day: Date) =>
-      state.events.filter(
-        (event) =>
-          new Date(event.start_at).toDateString() === day.toDateString()
-      ),
+      state.useZonedLookup
+        ? createCalendarEventLookup(state.events, state.zone)(day)
+        : state.events.filter(
+            (event) =>
+              new Date(event.start_at).toDateString() === day.toDateString()
+          ),
   }),
 }));
 vi.mock('@tuturuuu/ui/hooks/use-calendar-preferences', () => ({
@@ -31,7 +36,7 @@ vi.mock('./settings/settings-context', () => ({
   useCalendarSettings: () => ({
     settings: {
       appearance: { showWeekends: true },
-      timezone: { timezone: 'America/New_York' },
+      timezone: { timezone: state.zone },
     },
   }),
 }));
@@ -47,6 +52,8 @@ import { YearCalendar } from './year-calendar';
 const date = new Date(2026, 8, 7);
 beforeEach(() => {
   state.weekStartsOn = 0;
+  state.zone = 'America/New_York';
+  state.useZonedLookup = false;
   state.openModal.mockClear();
   state.addEmptyEvent.mockClear();
   state.events = Array.from(
@@ -62,6 +69,8 @@ beforeEach(() => {
       }) as CalendarEvent
   );
 });
+afterEach(() => vi.useRealTimers());
+
 describe('calendar view interactions', () => {
   it('month overflow opens every event and creates on the chosen calendar date and timezone', () => {
     render(<MonthCalendar date={date} viewedMonth={date} locale="en" />);
@@ -166,4 +175,109 @@ describe('calendar view interactions', () => {
     );
     expect(onDayClick.mock.calls[0]?.[0].getDate()).toBe(7);
   });
+  it.each([
+    ['America/New_York', '2026-09-08T01:00:00Z', 7],
+    ['Asia/Tokyo', '2026-09-07T23:00:00Z', 8],
+  ])('marks the calendar Today in month and year for %s', (zone, now, day) => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(now));
+    state.zone = zone;
+    const { container, unmount } = render(
+      <MonthCalendar date={date} locale="en" />
+    );
+    expect(container.querySelector('[aria-current="date"]')).toHaveTextContent(
+      String(day)
+    );
+    unmount();
+    const year = render(<YearCalendar year={2026} locale="en" />);
+    expect(
+      year.container.querySelector('[aria-current="date"]')
+    ).toHaveAccessibleName(new RegExp(`September ${day}, 2026`));
+  });
+  it('uses the calendar Today and event clock in agenda', () => {
+    state.useZonedLookup = true;
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-09-08T01:00:00Z'));
+    state.events = [
+      {
+        id: 'evening',
+        title: 'Evening',
+        start_at: '2026-09-07T23:00:00Z',
+        end_at: '2026-09-08T00:00:00Z',
+      },
+    ];
+    render(<AgendaView startDate={date} daysToShow={1} locale="en" />);
+    expect(screen.getByText('today')).toBeVisible();
+    expect(screen.getByRole('button', { name: /Evening/ })).toHaveTextContent(
+      '19:00'
+    );
+  });
+});
+
+describe('calendar view opaque effective colors', () => {
+  it('preserves borderline provider contrast with a visible month hover ring', () => {
+    state.events = [
+      {
+        id: 'borderline-rgb',
+        title: 'Borderline RGB',
+        color: 'BLUE',
+        start_at: new Date(2026, 8, 7, 10).toISOString(),
+        end_at: new Date(2026, 8, 7, 11).toISOString(),
+        scheduling_metadata: {
+          google_color: { version: 1, inherited: false, background: '#757575' },
+        },
+      },
+    ];
+    render(<MonthCalendar date={date} viewedMonth={date} locale="en" />);
+    const card = screen.getByRole('button', { name: /Borderline RGB/ });
+    expect(card.style.backgroundColor).toBe('rgb(117, 117, 117)');
+    expect(card.style.color).toBe('rgb(255, 255, 255)');
+    fireEvent.mouseEnter(card);
+    expect(card).toHaveClass('hover:ring-1', 'hover:ring-current');
+    expect(card.className).not.toMatch(/(?:brightness|opacity)-/);
+    expect(card.style.filter).toBe('');
+    expect(card.style.backgroundColor).toBe('rgb(117, 117, 117)');
+    expect(card.style.color).toBe('rgb(255, 255, 255)');
+    const luminance = ((117 / 255 + 0.055) / 1.055) ** 2.4;
+    expect(1.05 / (luminance + 0.05)).toBeGreaterThanOrEqual(4.5);
+    fireEvent.click(card);
+    expect(state.openModal).toHaveBeenCalledWith('borderline-rgb');
+  });
+
+  it.each([false, true])(
+    'uses provider RGB in month and agenda, inherited=%s',
+    (inherited) => {
+      state.events = [
+        {
+          id: 'rgb',
+          title: 'RGB event',
+          color: 'BLUE',
+          start_at: new Date(2026, 8, 7, 10).toISOString(),
+          end_at: new Date(2026, 8, 7, 11).toISOString(),
+          _calendarColor: '#ff80ab',
+          scheduling_metadata: {
+            google_color: { version: 1, inherited, background: '#00ff88' },
+          },
+        },
+      ];
+      const rgb = inherited ? 'rgb(255, 128, 171)' : 'rgb(0, 255, 136)';
+      const month = render(
+        <MonthCalendar date={date} viewedMonth={date} locale="en" />
+      );
+      expect(
+        screen.getByRole('button', { name: /RGB event/ }).style.backgroundColor
+      ).toBe(rgb);
+      expect(
+        screen.getByRole('button', { name: /RGB event/ }).style.color
+      ).toBe('rgb(0, 0, 0)');
+      month.unmount();
+      render(<AgendaView startDate={date} locale="en" daysToShow={1} />);
+      expect(
+        screen.getByRole('button', { name: /RGB event/ }).style.backgroundColor
+      ).toBe(rgb);
+      expect(
+        screen.getByRole('button', { name: /RGB event/ }).style.color
+      ).toBe('rgb(0, 0, 0)');
+    }
+  );
 });

package/src/components/ui/legacy/calendar/day-title.tsx

@@ -1,8 +1,9 @@
+import { useCalendarClock } from '@tuturuuu/ui/hooks/use-calendar-clock';
 import { useUserBooleanConfig } from '@tuturuuu/ui/hooks/use-user-config';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
 import type { CalendarView } from '../../../../hooks/use-view-transition';
+import { calendarDayKey, calendarToday } from '../../../../lib/calendar-day';
 import {
   formatLunarDay,
   getLunarDate,
@@ -11,8 +12,6 @@ import {
 } from '../../../../lib/lunar-calendar';
 import { useCalendarSettings } from './settings/settings-context';
 
-dayjs.extend(timezone);
-
 interface DayTitleProps {
   view: CalendarView;
   date: Date;
@@ -27,9 +26,10 @@ export function DayTitle({ date, weekday, locale = 'en' }: DayTitleProps) {
     'SHOW_LUNAR_CALENDAR',
     locale.startsWith('vi')
   );
-  const today = tz === 'auto' ? dayjs() : dayjs().tz(tz);
-  const dayjsDate = tz === 'auto' ? dayjs(date) : dayjs(date).tz(tz);
-  const isToday = dayjsDate.isSame(today, 'day');
+  const now = useCalendarClock();
+  const dayjsDate = dayjs(date);
+  const isToday =
+    calendarDayKey(date) === calendarDayKey(calendarToday(tz, now));
 
   const lunar = showLunar ? getLunarDate(dayjsDate.toDate()) : null;
   const holidayName = lunar ? getLunarHolidayName(lunar, locale) : null;

package/src/components/ui/legacy/calendar/dynamic-island.test.tsx

@@ -0,0 +1,140 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+
+const state = vi.hoisted(() => ({
+  current: false,
+  id: 'first',
+  end: '2026-10-01T11:00:00Z',
+}));
+vi.mock('@tuturuuu/ui/hooks/use-calendar', () => ({
+  useCalendar: () => ({
+    getCurrentEvents: () =>
+      state.current
+        ? [
+            {
+              id: state.id,
+              title: 'Current RGB',
+              start_at: '2026-10-01T09:00:00Z',
+              end_at: state.end,
+              color: 'BLUE',
+              scheduling_metadata: {
+                google_color: {
+                  version: 1,
+                  inherited: false,
+                  background: '#fbd75b',
+                },
+              },
+            },
+          ]
+        : [],
+    getUpcomingEvent: () => ({
+      title: 'Upcoming provider event',
+      start_at: '2026-10-01T10:00:00Z',
+      color: 'BLUE',
+      scheduling_metadata: {
+        google_color: {
+          version: 1,
+          calendar_id: 'source',
+          color_id: '4',
+          event_label_id: null,
+          inherited: false,
+          background: '#fbd75b',
+          resolution: 'event',
+        },
+      },
+    }),
+    isEditing: () => false,
+  }),
+}));
+
+import { DynamicIsland } from './dynamic-island';
+
+beforeEach(() => {
+  state.current = false;
+  state.id = 'first';
+  state.end = '2026-10-01T11:00:00Z';
+  vi.useFakeTimers({ toFake: ['Date'] });
+  vi.setSystemTime(new Date('2026-10-01T09:30:00Z'));
+});
+afterEach(() => vi.useRealTimers());
+it('renders the upcoming provider color as an opaque fill', () => {
+  render(<DynamicIsland />);
+  const card = screen.getByText('Upcoming provider event').closest('.border');
+  expect(card).toHaveStyle({ backgroundColor: '#fbd75b', color: '#000000' });
+  expect(card).toHaveClass('opacity-100');
+});
+
+it('uses matching provider fill and contrast on pomodoro controls and edge', () => {
+  state.current = true;
+  const { container } = render(<DynamicIsland />);
+  const card = screen.getByText('Current RGB').closest('.border');
+  expect(card).toHaveStyle({
+    backgroundColor: '#fbd75b',
+    borderColor: '#000000',
+  });
+  expect(screen.getByRole('button')).toHaveStyle({
+    backgroundColor: '#fbd75b',
+    color: '#000000',
+    borderColor: '#000000',
+  });
+  expect(container.querySelector('[data-orientation="vertical"]')).toHaveStyle({
+    backgroundColor: '#000000',
+  });
+});
+
+it('starts, ticks, stops and restarts the same event, and cleans up on unmount', () => {
+  vi.useFakeTimers();
+  state.current = true;
+  const view = render(<DynamicIsland />);
+  expect(vi.getTimerCount()).toBe(0);
+  fireEvent.click(screen.getByRole('button'));
+  expect(screen.getByText('30m')).toBeInTheDocument();
+  act(() => vi.advanceTimersByTime(1000));
+  expect(screen.getByText('29m 59s')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button'));
+  expect(screen.getByText('Focused work')).toBeInTheDocument();
+  expect(vi.getTimerCount()).toBe(0);
+  fireEvent.click(screen.getByRole('button'));
+  expect(screen.getByText('30m')).toBeInTheDocument();
+  view.unmount();
+  expect(vi.getTimerCount()).toBe(0);
+});
+
+it('resets when event identity or deadline changes and removes stale state when events end', () => {
+  vi.useFakeTimers();
+  state.current = true;
+  const view = render(<DynamicIsland />);
+  fireEvent.click(screen.getByRole('button'));
+  state.id = 'second';
+  view.rerender(<DynamicIsland />);
+  expect(screen.getByText('Focused work')).toBeInTheDocument();
+  expect(vi.getTimerCount()).toBe(0);
+  fireEvent.click(screen.getByRole('button'));
+  state.end = '2026-10-01T09:40:00Z';
+  view.rerender(<DynamicIsland />);
+  expect(screen.getByText('1 cycles')).toBeInTheDocument();
+  state.current = false;
+  view.rerender(<DynamicIsland />);
+  expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  expect(vi.getTimerCount()).toBe(0);
+});
+
+it('finishes the last cycle once without leaving an interval running', () => {
+  vi.useFakeTimers();
+  state.current = true;
+  state.end = '2026-10-01T09:30:01Z';
+  const play = vi.fn().mockResolvedValue(undefined);
+  vi.stubGlobal(
+    'Audio',
+    class {
+      play = play;
+    }
+  );
+  render(<DynamicIsland />);
+  fireEvent.click(screen.getByRole('button'));
+  act(() => vi.advanceTimersByTime(1000));
+  expect(play).toHaveBeenCalledTimes(1);
+  expect(screen.queryByText(/Cycle #/)).not.toBeInTheDocument();
+  expect(vi.getTimerCount()).toBe(0);
+  vi.unstubAllGlobals();
+});

package/src/components/ui/legacy/calendar/dynamic-island.tsx

@@ -1,9 +1,9 @@
 import { Play, StopCircle } from '@tuturuuu/icons';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
 import { Separator } from '@tuturuuu/ui/separator';
-import { getEventStyles } from '@tuturuuu/utils/color-helper';
+import { calendarEventStyle } from '@tuturuuu/utils/calendar-event-colors';
 import moment from 'moment';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 export const DynamicIsland = () => {
   const { getCurrentEvents, getUpcomingEvent, isEditing } = useCalendar();
@@ -53,18 +53,16 @@ export const DynamicIsland = () => {
     return `${hoursString}${minutesString}${secondsString}`.trimEnd();
   };
 
-  const firstEventEnd = events?.[0]?.end_at
-    ? moment(events[0].end_at).toDate()
-    : null;
+  const firstEventEndAt = events?.[0]?.end_at;
+  const firstEventEnd = useMemo(
+    () => (firstEventEndAt ? moment(firstEventEndAt).toDate() : null),
+    [firstEventEndAt]
+  );
   const timeLeft = firstEventEnd ? getTimeLeft(firstEventEnd) : 0;
 
   const [startAt, setStartAt] = useState<Date | null>(null);
   const [endAt, setEndAt] = useState<Date | null>(null);
 
-  useEffect(() => {
-    if (events?.[0]?.end_at) setEndAt(firstEventEnd);
-  }, [events, firstEventEnd]);
-
   const focusMinutes = 25;
   const breakMinutes = 5;
 
@@ -79,20 +77,19 @@ export const DynamicIsland = () => {
   const [currentCycle, setCurrentCycle] = useState(1);
   const [time, setTime] = useState(0);
 
+  const firstEventId = events?.[0]?.id;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: A different event with the same deadline starts a new session.
   useEffect(() => {
-    if (endAt && firstEventEnd !== endAt) {
-      setEndAt(firstEventEnd);
-      setCurrentCycle(1);
-      setStartAt(null);
-      setTime(0);
-    }
-  }, [endAt, firstEventEnd]);
+    setEndAt(firstEventEnd);
+    setCurrentCycle(1);
+    setStartAt(null);
+    setTime(0);
+  }, [firstEventId, firstEventEnd]);
 
   const startTimer = () => {
     if (startAt) {
       setCurrentCycle(1);
       setStartAt(null);
-      setEndAt(null);
       setTime(0);
       return;
     }
@@ -130,13 +127,14 @@ export const DynamicIsland = () => {
         // });
 
         setStartAt(null);
-        setEndAt(null);
         setTime(0);
       }
 
       return;
     }
 
+    if (!startAt || !endAt || time <= 0) return;
+
     const interval = setInterval(() => {
       setTime(time - 1);
     }, 1000);
@@ -158,9 +156,8 @@ export const DynamicIsland = () => {
   const hasEvents = events?.length > 0 || !!upcomingEvent;
   const hidden = isEditing() || !hasEvents;
 
-  const color =
-    (isUpcoming ? upcomingEvent?.color : events?.[0]?.color) ?? 'BLUE';
-  const { bg, text } = getEventStyles(color);
+  const activeEvent = isUpcoming ? upcomingEvent : events?.[0];
+  const eventStyle = calendarEventStyle(activeEvent ?? {});
 
   return (
     <div
@@ -169,7 +166,7 @@ export const DynamicIsland = () => {
       }`}
     >
       <div
-        className={`flex max-w-4xl items-center gap-4 rounded-lg border px-8 py-2 shadow-xl backdrop-blur-xl ${bg} ${text} ${hidden ? 'opacity-0' : 'opacity-100'} ${
+        className={`flex max-w-4xl items-center gap-4 rounded-lg border px-8 py-2 shadow-xl backdrop-blur-xl ${hidden ? 'opacity-0' : 'opacity-100'} ${
           isUpcoming
             ? 'w-[calc(min(20rem,100%))] justify-center text-center'
             : isRunning
@@ -177,6 +174,8 @@ export const DynamicIsland = () => {
               : 'w-full justify-between'
         } duration-300`}
         style={{
+          ...eventStyle,
+          borderColor: eventStyle.color,
           transition: 'width 1s, opacity 300ms',
         }}
       >
@@ -202,7 +201,10 @@ export const DynamicIsland = () => {
           {pomodoroCycles > 0 && (
             <>
               {!isRunning && (
-                <Separator orientation="vertical" className={bg} />
+                <Separator
+                  orientation="vertical"
+                  style={{ backgroundColor: eventStyle.color }}
+                />
               )}
 
               <div>
@@ -230,7 +232,8 @@ export const DynamicIsland = () => {
           <button
             type="button"
             onClick={startTimer}
-            className={`aspect-square h-fit justify-self-end rounded-lg border p-1 ${bg} transition`}
+            className="aspect-square h-fit justify-self-end rounded-lg border p-1 transition hover:ring-1 hover:ring-current"
+            style={{ ...eventStyle, borderColor: eventStyle.color }}
           >
             {startAt ? (
               <StopCircle className="h-6 w-6" />