feat: migrate to Next.js for Mini App and enhance project structure

- Replaced the previous webapp with a new Mini App built using Next.js, improving performance and maintainability.
- Updated the `.gitignore` to exclude Next.js build artifacts and node modules.
- Revised documentation in `AGENTS.md`, `README.md`, and `architecture.md` to reflect the new Mini App structure and technology stack.
- Enhanced Dockerfile to support the new build process for the Next.js application.
- Updated CI workflow to build and test the Next.js application.
- Added new configuration options for the Mini App, including `MINI_APP_SHORT_NAME` for improved deep linking.
- Refactored frontend testing setup to accommodate the new structure and testing framework.
- Removed legacy webapp files and dependencies to streamline the project.

webapp-next/src/components/day-detail/DayDetail.test.tsx

@@ -0,0 +1,77 @@
+/**
+ * Unit tests for DayDetailContent: sorts duties by start_at, includes contact info.
+ * Ported from webapp/js/dayDetail.test.js buildDayDetailContent.
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DayDetailContent } from "./DayDetailContent";
+import { resetAppStore } from "@/test/test-utils";
+import type { DutyWithUser } from "@/types";
+
+function duty(
+  full_name: string,
+  start_at: string,
+  end_at: string,
+  extra: Partial<DutyWithUser> = {}
+): DutyWithUser {
+  return {
+    id: 1,
+    user_id: 1,
+    full_name,
+    start_at,
+    end_at,
+    event_type: "duty",
+    phone: null,
+    username: null,
+    ...extra,
+  };
+}
+
+describe("DayDetailContent", () => {
+  beforeEach(() => {
+    resetAppStore();
+  });
+
+  it("sorts duty list by start_at when input order is wrong", () => {
+    const dateKey = "2025-02-25";
+    const duties = [
+      duty("Петров", "2025-02-25T14:00:00Z", "2025-02-25T18:00:00Z", { id: 2 }),
+      duty("Иванов", "2025-02-25T09:00:00Z", "2025-02-25T14:00:00Z", { id: 1 }),
+    ];
+    render(
+      <DayDetailContent
+        dateKey={dateKey}
+        duties={duties}
+        eventSummaries={[]}
+      />
+    );
+    expect(screen.getByText("Иванов")).toBeInTheDocument();
+    expect(screen.getByText("Петров")).toBeInTheDocument();
+    const body = document.body.innerHTML;
+    const ivanovPos = body.indexOf("Иванов");
+    const petrovPos = body.indexOf("Петров");
+    expect(ivanovPos).toBeLessThan(petrovPos);
+  });
+
+  it("includes contact info (phone, username) for duty entries when present", () => {
+    const dateKey = "2025-03-01";
+    const duties = [
+      duty("Alice", "2025-03-01T09:00:00Z", "2025-03-01T17:00:00Z", {
+        phone: "+79991234567",
+        username: "alice_dev",
+      }),
+    ];
+    render(
+      <DayDetailContent
+        dateKey={dateKey}
+        duties={duties}
+        eventSummaries={[]}
+      />
+    );
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+    expect(document.querySelector('a[href^="tel:"]')).toBeInTheDocument();
+    expect(document.querySelector('a[href*="t.me"]')).toBeInTheDocument();
+    expect(screen.getByText(/alice_dev/)).toBeInTheDocument();
+  });
+});

webapp-next/src/components/day-detail/DayDetail.tsx

@@ -0,0 +1,255 @@
+/**
+ * Day detail panel: shadcn Popover on desktop (>=640px), Sheet (bottom) on mobile.
+ * Renders DayDetailContent; anchor for popover is a virtual element at the clicked cell rect.
+ * Owns anchor rect state; parent opens via ref.current.openWithRect(dateKey, rect).
+ */
+
+"use client";
+
+import * as React from "react";
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from "@/components/ui/popover";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { useIsDesktop } from "@/hooks/use-media-query";
+import { useTranslation } from "@/i18n/use-translation";
+import { dutiesByDate, calendarEventsByDate } from "@/lib/calendar-data";
+import { localDateString, dateKeyToDDMM } from "@/lib/date-utils";
+import { DayDetailContent } from "./DayDetailContent";
+import type { CalendarEvent, DutyWithUser } from "@/types";
+import { cn } from "@/lib/utils";
+import { useAppStore } from "@/store/app-store";
+
+/** Empty state for day detail: date and "no duties or events" message. */
+function DayDetailEmpty({ dateKey }: { dateKey: string }) {
+  const { t } = useTranslation();
+  const todayKey = localDateString(new Date());
+  const ddmm = dateKeyToDDMM(dateKey);
+  const title =
+    dateKey === todayKey ? t("duty.today") + ", " + ddmm : ddmm;
+  return (
+    <div className="flex flex-col gap-4">
+      <h2
+        id="day-detail-title"
+        className="text-[1.1rem] font-semibold leading-tight m-0"
+      >
+        {title}
+      </h2>
+      <p className="text-sm text-muted-foreground m-0">
+        {t("day_detail.no_events")}
+      </p>
+    </div>
+  );
+}
+
+export interface DayDetailHandle {
+  /** Open the panel for the given day with popover anchored at the given rect. */
+  openWithRect: (dateKey: string, anchorRect: DOMRect) => void;
+}
+
+export interface DayDetailProps {
+  /** All duties for the visible range (will be filtered by selectedDay). */
+  duties: DutyWithUser[];
+  /** All calendar events for the visible range. */
+  calendarEvents: CalendarEvent[];
+  /** Called when the panel should close. */
+  onClose: () => void;
+  className?: string;
+}
+
+/**
+ * Virtual anchor: invisible div at the given rect so Popover positions relative to it.
+ */
+function VirtualAnchor({
+  rect,
+  className,
+}: {
+  rect: DOMRect;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn("pointer-events-none fixed z-0", className)}
+      style={{
+        left: rect.left,
+        top: rect.bottom,
+        width: rect.width,
+        height: 1,
+      }}
+      aria-hidden
+    />
+  );
+}
+
+export const DayDetail = React.forwardRef<DayDetailHandle, DayDetailProps>(
+  function DayDetail({ duties, calendarEvents, onClose, className }, ref) {
+    const isDesktop = useIsDesktop();
+    const { t } = useTranslation();
+    const selectedDay = useAppStore((s) => s.selectedDay);
+    const setSelectedDay = useAppStore((s) => s.setSelectedDay);
+    const [anchorRect, setAnchorRect] = React.useState<DOMRect | null>(null);
+    const [exiting, setExiting] = React.useState(false);
+
+    const open = selectedDay !== null;
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        openWithRect(dateKey: string, rect: DOMRect) {
+          setSelectedDay(dateKey);
+          setAnchorRect(rect);
+        },
+      }),
+      [setSelectedDay]
+    );
+
+    const handleClose = React.useCallback(() => {
+      setSelectedDay(null);
+      setAnchorRect(null);
+      setExiting(false);
+      onClose();
+    }, [setSelectedDay, onClose]);
+
+    /** Start close animation; actual unmount happens in onCloseAnimationEnd (or fallback timeout). */
+    const requestClose = React.useCallback(() => {
+      setExiting(true);
+    }, []);
+
+    // Fallback: if onAnimationEnd never fires (e.g. reduced motion), close after animation duration
+    React.useEffect(() => {
+      if (!exiting) return;
+      const fallback = window.setTimeout(() => {
+        handleClose();
+      }, 320);
+      return () => window.clearTimeout(fallback);
+    }, [exiting, handleClose]);
+
+    const dutiesByDateMap = React.useMemo(
+      () => dutiesByDate(duties),
+      [duties]
+    );
+    const eventsByDateMap = React.useMemo(
+      () => calendarEventsByDate(calendarEvents),
+      [calendarEvents]
+    );
+
+    const dayDuties = selectedDay ? dutiesByDateMap[selectedDay] ?? [] : [];
+    const dayEvents = selectedDay ? eventsByDateMap[selectedDay] ?? [] : [];
+    const hasContent = dayDuties.length > 0 || dayEvents.length > 0;
+
+    // Close popover/sheet on window resize so anchor position does not become stale.
+    React.useEffect(() => {
+      if (!open) return;
+      const onResize = () => handleClose();
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }, [open, handleClose]);
+
+    const content =
+      selectedDay &&
+      (hasContent ? (
+        <DayDetailContent
+          dateKey={selectedDay}
+          duties={dayDuties}
+          eventSummaries={dayEvents}
+        />
+      ) : (
+        <DayDetailEmpty dateKey={selectedDay} />
+      ));
+
+    if (!open || !selectedDay) return null;
+
+  const panelClassName =
+    "max-w-[min(360px,calc(100vw-24px))] max-h-[70vh] overflow-auto bg-surface text-[var(--text)] rounded-xl shadow-lg p-4 pt-9";
+  const closeButton = (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="absolute top-2 right-2 h-8 w-8 text-muted hover:text-[var(--text)] rounded-lg"
+      onClick={requestClose}
+      aria-label={t("day_detail.close")}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </Button>
+  );
+
+  const renderSheet = (withHandle: boolean) => (
+    <Sheet
+      open={!exiting && open}
+      onOpenChange={(o) => !o && requestClose()}
+    >
+      <SheetContent
+        side="bottom"
+        className={cn(
+          "rounded-t-2xl pt-3 pb-[calc(24px+env(safe-area-inset-bottom,0px))] max-h-[70vh]",
+          className
+        )}
+        showCloseButton={false}
+        onCloseAnimationEnd={handleClose}
+      >
+        <div className="relative px-4">
+          {closeButton}
+          {withHandle && (
+            <div
+              className="w-10 h-1 rounded-full bg-[var(--handle-bg)] mx-auto mb-2"
+              aria-hidden
+            />
+          )}
+          <SheetHeader className="p-0">
+            <SheetTitle id="day-detail-sheet-title" className="sr-only">
+              {selectedDay}
+            </SheetTitle>
+          </SheetHeader>
+          {content}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+
+  if (isDesktop === true && anchorRect != null) {
+    return (
+      <Popover open={open} onOpenChange={(o) => !o && handleClose()}>
+        <PopoverAnchor asChild>
+          <VirtualAnchor rect={anchorRect} />
+        </PopoverAnchor>
+        <PopoverContent
+          side="bottom"
+          sideOffset={8}
+          align="center"
+          className={cn(panelClassName, "relative", className)}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          onEscapeKeyDown={handleClose}
+        >
+          {closeButton}
+          {content}
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  return renderSheet(true);
+  }
+);

webapp-next/src/components/day-detail/DayDetailContent.tsx

@@ -0,0 +1,195 @@
+/**
+ * Shared content for day detail: title and sections (duty, unavailable, vacation, events).
+ * Ported from webapp/js/dayDetail.js buildDayDetailContent.
+ */
+
+"use client";
+
+import { useMemo } from "react";
+import { useTranslation } from "@/i18n/use-translation";
+import { localDateString, dateKeyToDDMM } from "@/lib/date-utils";
+import { getDutyMarkerRows } from "@/lib/duty-marker-rows";
+import { ContactLinks } from "@/components/contact";
+import type { DutyWithUser } from "@/types";
+import { cn } from "@/lib/utils";
+
+const NBSP = "\u00a0";
+
+export interface DayDetailContentProps {
+  /** YYYY-MM-DD key for the day. */
+  dateKey: string;
+  /** Duties overlapping this day. */
+  duties: DutyWithUser[];
+  /** Calendar event summary strings for this day. */
+  eventSummaries: string[];
+  className?: string;
+}
+
+export function DayDetailContent({
+  dateKey,
+  duties,
+  eventSummaries,
+  className,
+}: DayDetailContentProps) {
+  const { t } = useTranslation();
+  const todayKey = localDateString(new Date());
+  const ddmm = dateKeyToDDMM(dateKey);
+  const title =
+    dateKey === todayKey ? t("duty.today") + ", " + ddmm : ddmm;
+
+  const fromLabel = t("hint.from");
+  const toLabel = t("hint.to");
+
+  const dutyList = useMemo(
+    () =>
+      duties
+        .filter((d) => d.event_type === "duty")
+        .sort(
+          (a, b) =>
+            new Date(a.start_at || 0).getTime() -
+            new Date(b.start_at || 0).getTime()
+        ),
+    [duties]
+  );
+
+  const unavailableList = useMemo(
+    () => duties.filter((d) => d.event_type === "unavailable"),
+    [duties]
+  );
+
+  const vacationList = useMemo(
+    () => duties.filter((d) => d.event_type === "vacation"),
+    [duties]
+  );
+
+  const dutyRows = useMemo(() => {
+    const hasTimes = dutyList.some((it) => it.start_at || it.end_at);
+    return hasTimes
+      ? getDutyMarkerRows(dutyList, dateKey, NBSP, fromLabel, toLabel)
+      : dutyList.map((d) => ({
+          id: d.id,
+          timePrefix: "",
+          fullName: d.full_name ?? "",
+          phone: d.phone,
+          username: d.username,
+        }));
+  }, [dutyList, dateKey, fromLabel, toLabel]);
+
+  const uniqueUnavailable = useMemo(
+    () => [
+      ...new Set(
+        unavailableList.map((d) => d.full_name ?? "").filter(Boolean)
+      ),
+    ],
+    [unavailableList]
+  );
+
+  const uniqueVacation = useMemo(
+    () => [
+      ...new Set(vacationList.map((d) => d.full_name ?? "").filter(Boolean)),
+    ],
+    [vacationList]
+  );
+
+  const summaries = eventSummaries ?? [];
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      <h2
+        id="day-detail-title"
+        className="text-[1.1rem] font-semibold leading-tight m-0"
+      >
+        {title}
+      </h2>
+      <div className="flex flex-col gap-4">
+        {dutyList.length > 0 && (
+          <section
+            className="day-detail-section-duty"
+            aria-labelledby="day-detail-duty-heading"
+          >
+            <h3
+              id="day-detail-duty-heading"
+              className="text-[0.8rem] font-semibold text-duty m-0 mb-1"
+            >
+              {t("event_type.duty")}
+            </h3>
+            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-2.5 [&_li]:flex [&_li]:flex-col [&_li]:gap-1">
+              {dutyRows.map((r) => (
+                <li key={r.id}>
+                  {r.timePrefix && (
+                    <span className="text-muted-foreground">{r.timePrefix} — </span>
+                  )}
+                  <span className="font-semibold">{r.fullName}</span>
+                  <ContactLinks
+                    phone={r.phone}
+                    username={r.username}
+                    layout="inline"
+                    showLabels={true}
+                    className="text-[0.85rem] mt-0.5"
+                  />
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        {uniqueUnavailable.length > 0 && (
+          <section
+            className="day-detail-section-unavailable"
+            aria-labelledby="day-detail-unavailable-heading"
+          >
+            <h3
+              id="day-detail-unavailable-heading"
+              className="text-[0.8rem] font-semibold text-unavailable m-0 mb-1"
+            >
+              {t("event_type.unavailable")}
+            </h3>
+            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
+              {uniqueUnavailable.map((name) => (
+                <li key={name}>{name}</li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        {uniqueVacation.length > 0 && (
+          <section
+            className="day-detail-section-vacation"
+            aria-labelledby="day-detail-vacation-heading"
+          >
+            <h3
+              id="day-detail-vacation-heading"
+              className="text-[0.8rem] font-semibold text-vacation m-0 mb-1"
+            >
+              {t("event_type.vacation")}
+            </h3>
+            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
+              {uniqueVacation.map((name) => (
+                <li key={name}>{name}</li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        {summaries.length > 0 && (
+          <section
+            className="day-detail-section-events"
+            aria-labelledby="day-detail-events-heading"
+          >
+            <h3
+              id="day-detail-events-heading"
+              className="text-[0.8rem] font-semibold text-accent m-0 mb-1"
+            >
+              {t("hint.events")}
+            </h3>
+            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
+              {summaries.map((s) => (
+                <li key={String(s)}>{String(s)}</li>
+              ))}
+            </ul>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}

webapp-next/src/components/day-detail/index.ts

@@ -0,0 +1,4 @@
+export { DayDetail } from "./DayDetail";
+export { DayDetailContent } from "./DayDetailContent";
+export type { DayDetailContentProps } from "./DayDetailContent";
+export type { DayDetailHandle, DayDetailProps } from "./DayDetail";