✨(front) add DynamicCalendarLogo component

Create a React component that displays the calendar logo with
the current day number overlaid dynamically.

Features:
- Two variants: "header" (full logo) and "icon" (icon only)
- Day number positioned with CSS overlay
- Client-side rendering to avoid SSR hydration issues
- Translated alt text using i18n

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.scss

@@ -0,0 +1,50 @@
+.calendars__dynamic-logo {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &__img {
+    display: block;
+    height: 100%;
+    width: auto;
+  }
+
+  &__day {
+    position: absolute;
+    color: #f7f8f8;
+    font-weight: 700;
+    font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+    text-align: center;
+    opacity: 0.95;
+    pointer-events: none;
+    font-size: 11px;
+
+    &--small {
+      font-size: 12px;
+    }
+  }
+
+  &--header {
+    height: 40px;
+
+    .calendars__dynamic-logo__day {
+      left: 20px;
+      top: 35%;
+      transform: translate(-50%, 15%);
+    }
+  }
+
+  &--icon {
+    height: 40px;
+    width: 40px;
+
+    .calendars__dynamic-logo__day {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, 15%);
+    }
+  }
+}

src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface DynamicCalendarLogoProps {
+  variant?: "header" | "icon";
+  className?: string;
+}
+
+export const DynamicCalendarLogo = ({
+  variant = "header",
+  className,
+}: DynamicCalendarLogoProps) => {
+  const { t } = useTranslation();
+  const [day, setDay] = useState<number | null>(null);
+
+  useEffect(() => {
+    setDay(new Date().getDate());
+  }, []);
+
+  const isIcon = variant === "icon";
+  const isDoubleDigit = day !== null && day >= 10;
+
+  return (
+    <div
+      className={`calendars__dynamic-logo ${isIcon ? "calendars__dynamic-logo--icon" : "calendars__dynamic-logo--header"} ${className ?? ""}`}
+    >
+      <img
+        src={
+          isIcon
+            ? "/assets/cal_icon_no_number.svg"
+            : "/assets/cal_logotype_text_no_number.svg"
+        }
+        alt={t("app_title")}
+        className="calendars__dynamic-logo__img"
+      />
+      {day !== null && (
+        <span
+          className={`calendars__dynamic-logo__day ${isDoubleDigit ? "calendars__dynamic-logo__day--small" : ""}`}
+        >
+          {day}
+        </span>
+      )}
+    </div>
+  );
+};

src/frontend/apps/calendars/src/features/ui/components/logo/index.ts

@@ -0,0 +1 @@
+export { DynamicCalendarLogo } from "./DynamicCalendarLogo";

src/frontend/apps/calendars/src/styles/globals.scss

@@ -7,6 +7,7 @@
 @use "./../features/ui/components/toaster";
 @use "./../features/ui/components/generic-disclaimer/GenericDisclaimer.scss";
 @use "./../features/ui/components/spinner/SpinnerPage.scss";
+@use "./../features/ui/components/logo/DynamicCalendarLogo.scss";
 @use "./../features/layouts/components/left-panel/LeftPanelMobile.scss";
 @use "./../features/calendar/components/left-panel/MiniCalendar.scss";
 @use "./../features/calendar/components/calendar-list/CalendarList.scss";