DustinBrett · maateusx · Mar 23, 2026
diff --git a/components/system/Desktop/Widgets/CalendarWidget/StyledCalendarWidget.ts b/components/system/Desktop/Widgets/CalendarWidget/StyledCalendarWidget.ts
@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import StyledWidget from "components/system/Desktop/Widgets/StyledWidget";
+
+const StyledCalendarWidget = styled(StyledWidget)`
+  min-width: 280px;
+
+  .calendar-nav {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+    padding: 4px 14px 8px;
+  }
+
+  .calendar-month {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .calendar-nav-buttons {
+    display: flex;
+    gap: 4px;
+  }
+
+  .calendar-nav-buttons button {
+    background: none;
+    border: 0;
+    border-radius: 4px;
+    color: ${({ theme }) => theme.colors.text};
+    cursor: pointer;
+    font-size: 14px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0;
+    width: 28px;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.taskbar.hover};
+    }
+
+    &:active {
+      background-color: ${({ theme }) => theme.colors.taskbar.foreground};
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    padding: 0 8px 10px;
+    width: 100%;
+  }
+
+  th {
+    color: ${({ theme }) => theme.colors.text};
+    font-size: 11px;
+    font-weight: 400;
+    opacity: 50%;
+    padding: 4px 0;
+    text-align: center;
+    width: 40px;
+  }
+
+  td {
+    border-radius: 50%;
+    font-size: 12px;
+    height: 32px;
+    text-align: center;
+    width: 40px;
+
+    &.prev,
+    &.next {
+      opacity: 30%;
+    }
+
+    &.today {
+      background-color: rgb(0 120 215);
+      font-weight: 600;
+    }
+
+    &:not(.today, .prev, .next):hover {
+      background-color: ${({ theme }) => theme.colors.taskbar.hover};
+    }
+  }
+`;
+
+export default StyledCalendarWidget;
diff --git a/components/system/Desktop/Widgets/CalendarWidget/index.tsx b/components/system/Desktop/Widgets/CalendarWidget/index.tsx
@@ -0,0 +1,94 @@
+import { memo, useCallback, useMemo, useState } from "react";
+import StyledCalendarWidget from "components/system/Desktop/Widgets/CalendarWidget/StyledCalendarWidget";
+import {
+  type Calendar,
+  createCalendar,
+} from "components/system/Taskbar/Calendar/functions";
+import useDraggableWidget, {
+  type Position,
+} from "components/system/Desktop/Widgets/useDraggableWidget";
+
+const DAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+type CalendarWidgetProps = {
+  defaultPosition: Position;
+};
+
+const CalendarWidget: FC<CalendarWidgetProps> = ({ defaultPosition }) => {
+  const [date, setDate] = useState(() => new Date());
+  const [calendar, setCalendar] = useState<Calendar>(() =>
+    createCalendar(date)
+  );
+  const { dragHandleProps, style } = useDraggableWidget(defaultPosition);
+  const today = useMemo(() => new Date(), []);
+
+  const isCurrentDate = useMemo(
+    () =>
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear(),
+    [date, today]
+  );
+
+  const changeMonth = useCallback(
+    (direction: number): void => {
+      const newDate = new Date(date);
+      const newMonth = newDate.getMonth() + direction;
+
+      newDate.setDate(1);
+      newDate.setMonth(newMonth);
+
+      const resolvedMonth =
+        newMonth === 12 ? 0 : newMonth === -1 ? 11 : newMonth;
+      const isCurrentMonth = resolvedMonth === today.getMonth();
+
+      if (isCurrentMonth) newDate.setDate(today.getDate());
+
+      setDate(newDate);
+      setCalendar(createCalendar(newDate));
+    },
+    [date, today]
+  );
+
+  const monthLabel = `${date.toLocaleString("en-US", { month: "long" })}, ${date.getFullYear()}`;
+
+  return (
+    <StyledCalendarWidget data-widget="calendar" style={style}>
+      <div className="widget-header" {...dragHandleProps}>
+        <span style={{ fontSize: "11px", opacity: 0.6 }}>Calendar</span>
+      </div>
+      <div className="calendar-nav">
+        <span className="calendar-month">{monthLabel}</span>
+        <div className="calendar-nav-buttons">
+          <button onClick={() => changeMonth(-1)} type="button">
+            &#9650;
+          </button>
+          <button onClick={() => changeMonth(1)} type="button">
+            &#9660;
+          </button>
+        </div>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            {DAY_NAMES.map((dayName) => (
+              <th key={dayName}>{dayName}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className={isCurrentDate ? "curr" : undefined}>
+          {calendar.map((week) => (
+            <tr key={week.toString()}>
+              {week.map(([day, type]) => (
+                <td key={`${day}${type}`} className={type}>
+                  {day}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </StyledCalendarWidget>
+  );
+};
+
+export default memo(CalendarWidget);
diff --git a/components/system/Desktop/Widgets/ClockWidget/StyledClockWidget.ts b/components/system/Desktop/Widgets/ClockWidget/StyledClockWidget.ts
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import StyledWidget from "components/system/Desktop/Widgets/StyledWidget";
+
+const StyledClockWidget = styled(StyledWidget)`
+  min-width: 220px;
+
+  .clock-time {
+    font-size: 48px;
+    font-weight: 200;
+    letter-spacing: -1px;
+    line-height: 1;
+    padding: 6px 14px 0;
+  }
+
+  .clock-date {
+    font-size: 13px;
+    opacity: 80%;
+    padding: 6px 14px 14px;
+  }
+`;
+
+export default StyledClockWidget;
diff --git a/components/system/Desktop/Widgets/ClockWidget/index.tsx b/components/system/Desktop/Widgets/ClockWidget/index.tsx
@@ -0,0 +1,61 @@
+import { memo, useCallback, useEffect, useState } from "react";
+import StyledClockWidget from "components/system/Desktop/Widgets/ClockWidget/StyledClockWidget";
+import useDraggableWidget, {
+  type Position,
+} from "components/system/Desktop/Widgets/useDraggableWidget";
+import { MILLISECONDS_IN_SECOND } from "utils/constants";
+
+const DEFAULT_LOCALE = "en";
+
+const timeFormatter = new Intl.DateTimeFormat(DEFAULT_LOCALE, {
+  hour: "numeric",
+  hour12: true,
+  minute: "2-digit",
+});
+
+const dateFormatter = new Intl.DateTimeFormat(DEFAULT_LOCALE, {
+  day: "numeric",
+  month: "long",
+  weekday: "long",
+  year: "numeric",
+});
+
+type ClockWidgetProps = {
+  defaultPosition: Position;
+};
+
+const formatTime = (now: Date): string => timeFormatter.format(now);
+const formatDate = (now: Date): string => dateFormatter.format(now);
+
+const ClockWidget: FC<ClockWidgetProps> = ({ defaultPosition }) => {
+  const [now, setNow] = useState(() => new Date());
+  const { dragHandleProps, style } = useDraggableWidget(defaultPosition);
+
+  const tick = useCallback((): void => {
+    setNow(new Date());
+  }, []);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      tick();
+      const interval = setInterval(tick, MILLISECONDS_IN_SECOND);
+
+      return (): void => clearInterval(interval);
+    }, MILLISECONDS_IN_SECOND - now.getMilliseconds());
+
+    return (): void => clearTimeout(timeout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tick]);
+
+  return (
+    <StyledClockWidget data-widget="clock" style={style}>
+      <div className="widget-header" {...dragHandleProps}>
+        <span style={{ fontSize: "11px", opacity: 0.6 }}>Clock</span>
+      </div>
+      <div className="clock-time">{formatTime(now)}</div>
+      <div className="clock-date">{formatDate(now)}</div>
+    </StyledClockWidget>
+  );
+};
+
+export default memo(ClockWidget);
diff --git a/components/system/Desktop/Widgets/StyledWidget.ts b/components/system/Desktop/Widgets/StyledWidget.ts
@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+const StyledWidget = styled.div`
+  backdrop-filter: ${({ theme }) => `blur(${theme.sizes.taskbar.panelBlur})`};
+  background-color: ${({ theme }) => theme.colors.taskbar.background};
+  border: ${({ theme }) => `1px solid ${theme.colors.taskbar.peekBorder}`};
+  border-radius: 8px;
+  box-shadow: ${({ theme }) => theme.colors.window.shadow};
+  color: ${({ theme }) => theme.colors.text};
+  font-family: ${({ theme }) => theme.formats.systemFont};
+  overflow: hidden;
+  user-select: none;
+  z-index: 1;
+
+  .widget-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 14px 6px;
+  }
+`;
+
+export default StyledWidget;
diff --git a/components/system/Desktop/Widgets/WeatherWidget/StyledWeatherWidget.ts b/components/system/Desktop/Widgets/WeatherWidget/StyledWeatherWidget.ts
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import StyledWidget from "components/system/Desktop/Widgets/StyledWidget";
+
+const StyledWeatherWidget = styled(StyledWidget)`
+  min-width: 220px;
+
+  .weather-body {
+    display: flex;
+    gap: 12px;
+    padding: 2px 14px 14px;
+  }
+
+  .weather-emoji {
+    font-size: 40px;
+    line-height: 1;
+  }
+
+  .weather-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .weather-temp {
+    font-size: 28px;
+    font-weight: 300;
+    line-height: 1;
+  }
+
+  .weather-desc {
+    font-size: 12px;
+    opacity: 80%;
+  }
+
+  .weather-location {
+    font-size: 11px;
+    opacity: 60%;
+  }
+
+  .weather-loading,
+  .weather-error {
+    font-size: 12px;
+    opacity: 60%;
+    padding: 8px 14px 14px;
+  }
+`;
+
+export default StyledWeatherWidget;
diff --git a/components/system/Desktop/Widgets/WeatherWidget/index.tsx b/components/system/Desktop/Widgets/WeatherWidget/index.tsx
@@ -0,0 +1,48 @@
+import { memo } from "react";
+import StyledWeatherWidget from "components/system/Desktop/Widgets/WeatherWidget/StyledWeatherWidget";
+import useWeather, {
+  getWeatherEmoji,
+} from "components/system/Desktop/Widgets/WeatherWidget/useWeather";
+import useDraggableWidget, {
+  type Position,
+} from "components/system/Desktop/Widgets/useDraggableWidget";
+
+type WeatherWidgetProps = {
+  defaultPosition: Position;
+};
+
+const WeatherWidget: FC<WeatherWidgetProps> = ({ defaultPosition }) => {
+  const { data, error, loading } = useWeather();
+  const { dragHandleProps, style } = useDraggableWidget(defaultPosition);
+
+  return (
+    <StyledWeatherWidget data-widget="weather" style={style}>
+      <div className="widget-header" {...dragHandleProps}>
+        <span style={{ fontSize: "11px", opacity: 0.6 }}>Weather</span>
+      </div>
+      {loading && !data && (
+        <div className="weather-loading">Loading weather...</div>
+      )}
+      {error && !data && (
+        <div className="weather-error">Unable to load weather data</div>
+      )}
+      {data && (
+        <div className="weather-body">
+          <span className="weather-emoji">
+            {getWeatherEmoji(data.description)}
+          </span>
+          <div className="weather-info">
+            <span className="weather-temp">{data.tempC}&deg;C</span>
+            <span className="weather-desc">{data.description}</span>
+            <span className="weather-location">
+              {data.city}
+              {data.country ? `, ${data.country}` : ""}
+            </span>
+          </div>
+        </div>
+      )}
+    </StyledWeatherWidget>
+  );
+};
+
+export default memo(WeatherWidget);