chore(release): v2.0.6

Made-with: Cursor

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.0.6] - 2025-03-04
+
+(No changes documented; release for version sync.)
+
+## [2.0.4] - 2025-03-04
+
+(No changes documented; release for version sync.)
+
+## [2.0.3] - 2025-03-04
+
+(No changes documented; release for version sync.)
+
 ## [2.0.2] - 2025-03-04
 
 (No changes documented; release for version sync.)
@@ -48,7 +60,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Input validation and initData hash verification for Miniapp access.
 - Optional CORS and init_data_max_age; use env for secrets.
 
-[Unreleased]: https://github.com/your-org/duty-teller/compare/v2.0.2...HEAD
+[Unreleased]: https://github.com/your-org/duty-teller/compare/v2.0.6...HEAD
+[2.0.6]: https://github.com/your-org/duty-teller/releases/tag/v2.0.6  <!-- placeholder: set to your repo URL when publishing -->
+[2.0.4]: https://github.com/your-org/duty-teller/releases/tag/v2.0.4  <!-- placeholder: set to your repo URL when publishing -->
+[2.0.3]: https://github.com/your-org/duty-teller/releases/tag/v2.0.3  <!-- placeholder: set to your repo URL when publishing -->
 [2.0.2]: https://github.com/your-org/duty-teller/releases/tag/v2.0.2  <!-- placeholder: set to your repo URL when publishing -->
 [2.0.0]: https://github.com/your-org/duty-teller/releases/tag/v2.0.0  <!-- placeholder: set to your repo URL when publishing -->
 [0.1.0]: https://github.com/your-org/duty-teller/releases/tag/v0.1.0  <!-- placeholder: set to your repo URL when publishing -->

duty_teller/run.py

@@ -19,6 +19,12 @@ from duty_teller.utils.http_client import safe_urlopen
 _HTTP_STARTUP_WAIT_SEC = 3
 
 
+async def _post_init(application) -> None:
+    """Run startup tasks: restore group pin jobs, then resolve bot username."""
+    await group_duty_pin.restore_group_pin_jobs(application)
+    await _resolve_bot_username(application)
+
+
 async def _resolve_bot_username(application) -> None:
     """If BOT_USERNAME is not set from env, resolve it via get_me()."""
     if not config.BOT_USERNAME:
@@ -98,13 +104,7 @@ def main() -> None:
     require_bot_token()
     # Optional: set bot menu button to open the Miniapp. Uncomment to enable:
     # _set_default_menu_button_webapp()
-    app = (
-        ApplicationBuilder()
-        .token(config.BOT_TOKEN)
-        .post_init(group_duty_pin.restore_group_pin_jobs)
-        .post_init(_resolve_bot_username)
-        .build()
-    )
+    app = ApplicationBuilder().token(config.BOT_TOKEN).post_init(_post_init).build()
     register_handlers(app)
 
     from duty_teller.api.app import app as web_app

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "duty-teller"
-version = "2.0.2"
+version = "2.0.6"
 description = "Telegram bot for team duty shift calendar and group reminder"
 readme = "README.md"
 requires-python = ">=3.11"

webapp-next/src/app/globals.css

@@ -174,7 +174,7 @@ html::-webkit-scrollbar {
   margin-right: auto;
   padding: 12px;
   padding-top: 0;
-  padding-bottom: env(safe-area-inset-bottom, 12px);
+  padding-bottom: var(--tg-viewport-content-safe-area-inset-bottom, env(safe-area-inset-bottom, 12px));
   border-radius: 12px;
 }
 
@@ -261,9 +261,25 @@ html::-webkit-scrollbar {
   }
 }
 
+/* Android low-performance devices: minimize animations (Telegram User-Agent). */
+[data-perf="low"] *,
+[data-perf="low"] *::before,
+[data-perf="low"] *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}
+
 /* Safe area for Telegram Mini App (notch / status bar). */
 .pt-safe {
-  padding-top: env(safe-area-inset-top, 0);
+  padding-top: var(--tg-viewport-content-safe-area-inset-top, env(safe-area-inset-top, 0));
+}
+
+/* Content safe area: top/bottom only to avoid overlap with Telegram header/bottom bar (Bot API 8.0+).
+   Horizontal padding is left to layout classes (e.g. px-3) so indents are preserved when viewport vars are 0. */
+.content-safe {
+  padding-top: var(--tg-viewport-content-safe-area-inset-top, env(safe-area-inset-top, 0));
+  padding-bottom: var(--tg-viewport-content-safe-area-inset-bottom, env(safe-area-inset-bottom, 0));
 }
 
 /* Sticky calendar header: shadow when scrolled (useStickyScroll). */
@@ -305,7 +321,7 @@ html::-webkit-scrollbar {
   body {
     margin: 0;
     padding: 0;
-    min-height: 100vh;
+    min-height: var(--tg-viewport-stable-height, 100vh);
     background: var(--bg);
     color: var(--text);
     font-family: system-ui, -apple-system, sans-serif;

webapp-next/src/app/page.test.tsx

@@ -4,17 +4,14 @@
  */
 
 import { describe, it, expect, beforeEach, vi } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, act } from "@testing-library/react";
 import Page from "./page";
 import { resetAppStore } from "@/test/test-utils";
 import { useAppStore } from "@/store/app-store";
+import { useTelegramAuth } from "@/hooks/use-telegram-auth";
 
 vi.mock("@/hooks/use-telegram-auth", () => ({
-  useTelegramAuth: () => ({
-    initDataRaw: "test-init",
-    startParam: undefined,
-    isLocalhost: true,
-  }),
+  useTelegramAuth: vi.fn(),
 }));
 
 vi.mock("@/hooks/use-month-data", () => ({
@@ -26,6 +23,11 @@ vi.mock("@/hooks/use-month-data", () => ({
 describe("Page", () => {
   beforeEach(() => {
     resetAppStore();
+    vi.mocked(useTelegramAuth).mockReturnValue({
+      initDataRaw: "test-init",
+      startParam: undefined,
+      isLocalhost: true,
+    });
   });
 
   it("renders calendar and header when store has default state", async () => {
@@ -51,4 +53,27 @@ describe("Page", () => {
       expect(document.title).toBe("Календарь дежурств");
     });
   });
+
+  it("renders AccessDeniedScreen when not allowed and delay has passed", async () => {
+    const { RETRY_DELAY_MS } = await import("@/lib/constants");
+    vi.mocked(useTelegramAuth).mockReturnValue({
+      initDataRaw: undefined,
+      startParam: undefined,
+      isLocalhost: false,
+    });
+    vi.useFakeTimers();
+    render(<Page />);
+    await act(async () => {
+      vi.advanceTimersByTime(RETRY_DELAY_MS);
+    });
+    vi.useRealTimers();
+    expect(
+      await screen.findByText(/Access denied|Доступ запрещён/i, {}, { timeout: 2000 })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Open the app again from Telegram|Откройте приложение снова из Telegram/i)
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Reload|Обновить/i })).toBeInTheDocument();
+    expect(screen.queryByRole("grid", { name: "Calendar" })).not.toBeInTheDocument();
+  });
 });

webapp-next/src/app/page.tsx

@@ -6,12 +6,13 @@
 "use client";
 
 import { useCallback, useEffect } from "react";
-import { useAppStore } from "@/store/app-store";
+import { useAppStore, type AppState } from "@/store/app-store";
 import { useShallow } from "zustand/react/shallow";
 import { useTelegramTheme } from "@/hooks/use-telegram-theme";
 import { useTelegramAuth } from "@/hooks/use-telegram-auth";
 import { useAppInit } from "@/hooks/use-app-init";
 import { callMiniAppReadyOnce } from "@/lib/telegram-ready";
+import { AccessDeniedScreen } from "@/components/states/AccessDeniedScreen";
 import { CurrentDutyView } from "@/components/current-duty/CurrentDutyView";
 import { CalendarPage } from "@/components/CalendarPage";
 
@@ -23,9 +24,10 @@ export default function Home() {
 
   useAppInit({ isAllowed, startParam });
 
-  const { currentView, setCurrentView, setSelectedDay, appContentReady } =
+  const { accessDenied, currentView, setCurrentView, setSelectedDay, appContentReady } =
     useAppStore(
-      useShallow((s) => ({
+      useShallow((s: AppState) => ({
+        accessDenied: s.accessDenied,
         currentView: s.currentView,
         setCurrentView: s.setCurrentView,
         setSelectedDay: s.setSelectedDay,
@@ -45,23 +47,24 @@ export default function Home() {
     setSelectedDay(null);
   }, [setCurrentView, setSelectedDay]);
 
-  const content =
-    currentView === "currentDuty" ? (
-      <div className="mx-auto flex min-h-screen w-full max-w-[var(--max-width-app)] flex-col bg-background px-3 pb-6 pt-safe">
-        <CurrentDutyView
-          onBack={handleBackFromCurrentDuty}
-          openedFromPin={startParam === "duty"}
-        />
-      </div>
-    ) : (
-      <CalendarPage isAllowed={isAllowed} initDataRaw={initDataRaw} />
-    );
+  const content = accessDenied ? (
+    <AccessDeniedScreen primaryAction="reload" />
+  ) : currentView === "currentDuty" ? (
+    <div className="content-safe mx-auto flex min-h-screen w-full max-w-[var(--max-width-app)] flex-col bg-background px-3 pb-6">
+      <CurrentDutyView
+        onBack={handleBackFromCurrentDuty}
+        openedFromPin={startParam === "duty"}
+      />
+    </div>
+  ) : (
+    <CalendarPage isAllowed={isAllowed} initDataRaw={initDataRaw} />
+  );
 
   return (
     <div
+      className="min-h-[var(--tg-viewport-stable-height,100vh)]"
       style={{
         visibility: appContentReady ? "visible" : "hidden",
-        minHeight: "100vh",
       }}
     >
       {content}

webapp-next/src/components/CalendarPage.tsx

@@ -17,7 +17,6 @@ import { CalendarGrid } from "@/components/calendar/CalendarGrid";
 import { DutyList } from "@/components/duty/DutyList";
 import { DayDetail, type DayDetailHandle } from "@/components/day-detail";
 import { ErrorState } from "@/components/states/ErrorState";
-import { AccessDenied } from "@/components/states/AccessDenied";
 
 /** Fallback height (px) until ResizeObserver reports the sticky block size. Matches --calendar-block-min-height + pb-2 (260 + 8). */
 const STICKY_HEIGHT_FALLBACK_PX = 268;
@@ -51,7 +50,6 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
     loading,
     error,
     accessDenied,
-    accessDeniedDetail,
     duties,
     calendarEvents,
     selectedDay,
@@ -67,7 +65,6 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
       loading: s.loading,
       error: s.error,
       accessDenied: s.accessDenied,
-      accessDeniedDetail: s.accessDeniedDetail,
       duties: s.duties,
       calendarEvents: s.calendarEvents,
       selectedDay: s.selectedDay,
@@ -136,7 +133,7 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
   }, [loading, accessDenied, setAppContentReady]);
 
   return (
-    <div className="mx-auto flex min-h-screen w-full max-w-[var(--max-width-app)] flex-col bg-background px-3 pb-6 pt-safe">
+    <div className="content-safe mx-auto flex min-h-screen w-full max-w-[var(--max-width-app)] flex-col bg-background px-3 pb-6">
       <div
         ref={calendarStickyRef}
         className="sticky top-0 z-10 min-h-[var(--calendar-block-min-height)] bg-background pb-2"
@@ -155,13 +152,10 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
         />
       </div>
 
-      {accessDenied && (
-        <AccessDenied serverDetail={accessDeniedDetail} className="my-3" />
-      )}
-      {!accessDenied && error && (
+      {error && (
         <ErrorState message={error} onRetry={retry} className="my-3" />
       )}
-      {!accessDenied && !error && (
+      {!error && (
         <DutyList
           scrollMarginTop={stickyBlockHeight}
           className="mt-2"

webapp-next/src/components/calendar/CalendarHeader.tsx

@@ -49,13 +49,18 @@ export function CalendarHeader({
         >
           <ChevronLeftIcon className="size-5" aria-hidden />
         </Button>
-        <div className="flex flex-col items-center gap-0.5">
+        <div className="flex min-h-[2rem] flex-col items-center justify-center gap-0">
           <h1
-            className="m-0 flex items-center justify-center gap-2 text-[1.1rem] font-semibold sm:text-[1.25rem]"
+            className="m-0 flex flex-col items-center justify-center gap-0 leading-none"
             aria-live="polite"
             aria-atomic="true"
           >
-            {monthName(monthIndex)} {year}
+            <span className="text-xs font-normal leading-none text-muted">
+              {year}
+            </span>
+            <span className="text-[1.1rem] font-semibold leading-tight sm:text-[1.25rem]">
+              {monthName(monthIndex)}
+            </span>
           </h1>
         </div>
         <Button

webapp-next/src/components/current-duty/CurrentDutyView.test.tsx

@@ -57,6 +57,18 @@ describe("CurrentDutyView", () => {
     expect(screen.queryByText(/Back to calendar|Назад к календарю/i)).not.toBeInTheDocument();
   });
 
+  it("shows Open calendar button in no-duty view and it calls onBack", async () => {
+    const onBack = vi.fn();
+    render(<CurrentDutyView onBack={onBack} />);
+    await screen.findByText(/No one is on duty|Сейчас никто не дежурит/i, {}, { timeout: 3000 });
+    const openCalendarBtn = screen.getByRole("button", {
+      name: /Open calendar|Открыть календарь/i,
+    });
+    expect(openCalendarBtn).toBeInTheDocument();
+    fireEvent.click(openCalendarBtn);
+    expect(onBack).toHaveBeenCalled();
+  });
+
   it("shows contact info not set when duty has no phone or username", async () => {
     const { fetchDuties } = await import("@/lib/api");
     const now = new Date();
@@ -81,4 +93,59 @@ describe("CurrentDutyView", () => {
     ).toBeInTheDocument();
     vi.mocked(fetchDuties).mockResolvedValue([]);
   });
+
+  it("shows ends_at line when duty is active", async () => {
+    const { fetchDuties } = await import("@/lib/api");
+    const now = new Date();
+    const start = new Date(now.getTime() - 60 * 60 * 1000);
+    const end = new Date(now.getTime() + 2 * 60 * 60 * 1000);
+    const duty = {
+      id: 1,
+      user_id: 1,
+      start_at: start.toISOString(),
+      end_at: end.toISOString(),
+      event_type: "duty" as const,
+      full_name: "Test User",
+      phone: null,
+      username: null,
+    };
+    vi.mocked(fetchDuties).mockResolvedValue([duty]);
+    render(<CurrentDutyView onBack={vi.fn()} />);
+    await screen.findByText("Test User", {}, { timeout: 3000 });
+    expect(
+      screen.getByText(/Until end of shift at|До конца смены в/i)
+    ).toBeInTheDocument();
+    vi.mocked(fetchDuties).mockResolvedValue([]);
+  });
+
+  it("error state shows Retry as first button", async () => {
+    const { fetchDuties } = await import("@/lib/api");
+    vi.mocked(fetchDuties).mockRejectedValue(new Error("Network error"));
+    render(<CurrentDutyView onBack={vi.fn()} />);
+    await screen.findByText(/Could not load|Не удалось загрузить/i, {}, { timeout: 3000 });
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[0]).toHaveAccessibleName(/Retry|Повторить/i);
+    vi.mocked(fetchDuties).mockResolvedValue([]);
+  });
+
+  it("403 shows AccessDeniedScreen with Back button and no Retry", async () => {
+    const { fetchDuties, AccessDeniedError } = await import("@/lib/api");
+    vi.mocked(fetchDuties).mockRejectedValue(
+      new AccessDeniedError("ACCESS_DENIED", "Custom 403 message")
+    );
+    const onBack = vi.fn();
+    render(<CurrentDutyView onBack={onBack} />);
+    await screen.findByText(/Access denied|Доступ запрещён/i, {}, { timeout: 3000 });
+    expect(
+      screen.getByText(/Open the app again from Telegram|Откройте приложение снова из Telegram/i)
+    ).toBeInTheDocument();
+    expect(screen.getByText("Custom 403 message")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Back to calendar|Назад к календарю/i })
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /Retry|Повторить/i })).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: /Back to calendar|Назад к календарю/i }));
+    expect(onBack).toHaveBeenCalled();
+    vi.mocked(fetchDuties).mockResolvedValue([]);
+  });
 });

webapp-next/src/components/current-duty/CurrentDutyView.tsx

@@ -20,6 +20,7 @@ import {
   formatHHMM,
 } from "@/lib/date-utils";
 import { getRemainingTime, findCurrentDuty } from "@/lib/current-duty";
+import { triggerHapticLight } from "@/lib/telegram-haptic";
 import { ContactLinks } from "@/components/contact/ContactLinks";
 import { Button } from "@/components/ui/button";
 import {
@@ -29,6 +30,8 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { AccessDeniedScreen } from "@/components/states/AccessDeniedScreen";
 import type { DutyWithUser } from "@/types";
 
 export interface CurrentDutyViewProps {
@@ -38,7 +41,7 @@ export interface CurrentDutyViewProps {
   openedFromPin?: boolean;
 }
 
-type ViewState = "loading" | "error" | "ready";
+type ViewState = "loading" | "error" | "accessDenied" | "ready";
 
 /**
  * Full-screen current duty view with Telegram BackButton and auto-updating remaining time.
@@ -52,6 +55,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
   const [state, setState] = useState<ViewState>("loading");
   const [duty, setDuty] = useState<DutyWithUser | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [accessDeniedDetail, setAccessDeniedDetail] = useState<string | null>(null);
   const [remaining, setRemaining] = useState<{ hours: number; minutes: number } | null>(null);
 
   const loadTodayDuties = useCallback(
@@ -73,14 +77,17 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
         }
       } catch (e) {
         if (signal?.aborted) return;
-        setState("error");
-        const msg =
-          e instanceof AccessDeniedError && e.serverDetail
-            ? e.serverDetail
-            : t("error_generic");
-        setErrorMessage(msg);
-        setDuty(null);
-        setRemaining(null);
+        if (e instanceof AccessDeniedError) {
+          setState("accessDenied");
+          setAccessDeniedDetail(e.serverDetail ?? null);
+          setDuty(null);
+          setRemaining(null);
+        } else {
+          setState("error");
+          setErrorMessage(t("error_generic"));
+          setDuty(null);
+          setRemaining(null);
+        }
       }
     },
     [initDataRaw, lang, t]
@@ -139,10 +146,12 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
   }, [onBack]);
 
   const handleBack = () => {
+    triggerHapticLight();
     onBack();
   };
 
   const handleClose = () => {
+    triggerHapticLight();
     if (closeMiniApp.isAvailable()) {
       closeMiniApp();
     } else {
@@ -164,20 +173,50 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
         aria-live="polite"
         aria-label={t("loading")}
       >
-        <span
-          className="block size-8 shrink-0 rounded-full border-2 border-transparent border-t-accent motion-reduce:animate-none animate-spin"
-          aria-hidden
-        />
-        <p className="text-muted-foreground m-0">{t("loading")}</p>
-        <Button variant="outline" onClick={handlePrimaryAction} aria-label={primaryButtonAriaLabel}>
-          {primaryButtonLabel}
-        </Button>
+        <Card className="current-duty-card w-full max-w-[var(--max-width-app)] border-t-4 border-t-duty">
+          <CardContent className="flex flex-col gap-4 pt-6">
+            <div className="flex items-center gap-2">
+              <Skeleton className="size-2 shrink-0 rounded-full" />
+              <Skeleton className="h-5 w-24 rounded-full" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-7 w-48" />
+              <Skeleton className="h-4 w-full max-w-[200px]" />
+              <Skeleton className="h-4 w-full max-w-[280px]" />
+            </div>
+            <Skeleton className="h-14 w-full rounded-lg" />
+            <div className="flex flex-col gap-2 border-t border-border/50 pt-4">
+              <Skeleton className="h-12 w-full rounded-md" />
+              <Skeleton className="h-12 w-full rounded-md" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button
+              onClick={handlePrimaryAction}
+              aria-label={primaryButtonAriaLabel}
+            >
+              {primaryButtonLabel}
+            </Button>
+          </CardFooter>
+        </Card>
       </div>
     );
   }
 
+  if (state === "accessDenied") {
+    return (
+      <AccessDeniedScreen
+        serverDetail={accessDeniedDetail}
+        primaryAction="back"
+        onBack={handlePrimaryAction}
+        openedFromPin={openedFromPin}
+      />
+    );
+  }
+
   if (state === "error") {
     const handleRetry = () => {
+      triggerHapticLight();
       setState("loading");
       loadTodayDuties();
     };
@@ -226,10 +265,17 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
               {t("current_duty.no_duty")}
             </p>
           </CardContent>
-          <CardFooter>
+          <CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
             <Button onClick={handlePrimaryAction} aria-label={primaryButtonAriaLabel}>
               {primaryButtonLabel}
             </Button>
+            <Button
+              variant="outline"
+              onClick={onBack}
+              aria-label={t("current_duty.open_calendar")}
+            >
+              {t("current_duty.open_calendar")}
+            </Button>
           </CardFooter>
         </Card>
       </div>
@@ -244,11 +290,10 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
   const endTime = formatHHMM(duty.end_at);
   const shiftStr = `${startDDMM} ${startTime} — ${endDDMM} ${endTime}`;
   const rem = remaining ?? getRemainingTime(duty.end_at);
-  const remainingStr = t("current_duty.remaining", {
+  const remainingValueStr = t("current_duty.remaining_value", {
     hours: String(rem.hours),
     minutes: String(rem.minutes),
   });
-  const endsAtStr = t("current_duty.ends_at", { time: endTime });
 
   const displayTz =
     typeof window !== "undefined" &&
@@ -268,33 +313,47 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
         role="article"
         aria-labelledby="current-duty-title"
       >
-        <CardHeader>
-          <CardTitle
-            id="current-duty-title"
-            className="flex items-center gap-2"
-          >
-            <span
-              className="inline-block size-2.5 shrink-0 rounded-full bg-duty animate-pulse motion-reduce:animate-none"
-              aria-hidden
-            />
-            {t("current_duty.title")}
-          </CardTitle>
+        <CardHeader className="sr-only">
+          <CardTitle id="current-duty-title">{t("current_duty.title")}</CardTitle>
         </CardHeader>
-        <CardContent className="flex flex-col gap-3">
-          <p className="font-medium text-foreground" id="current-duty-name">
-            {duty.full_name}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            {shiftLabel} {shiftStr}
-          </p>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <span
+            className="inline-flex w-fit items-center gap-2 rounded-full bg-duty/15 px-2.5 py-1 text-xs font-medium text-foreground"
+            aria-hidden
+          >
+            <span className="size-2 shrink-0 rounded-full bg-duty animate-pulse motion-reduce:animate-none" />
+            {t("duty.now_on_duty")}
+          </span>
+          <section className="flex flex-col gap-2" aria-label={t("current_duty.shift")}>
+            <p
+              className="text-xl font-bold text-foreground leading-tight"
+              id="current-duty-name"
+            >
+              {duty.full_name}
+            </p>
+            <p className="text-sm text-muted-foreground break-words">
+              {shiftLabel}
+            </p>
+            <p className="text-sm text-muted-foreground break-words">
+              {shiftStr}
+            </p>
+          </section>
           <div
-            className="rounded-lg bg-duty/10 px-3 py-2 text-sm font-medium text-foreground"
+            className="rounded-lg bg-duty/10 px-3 py-2.5 flex flex-col gap-1"
             aria-live="polite"
             aria-atomic="true"
           >
-            {remainingStr}
+            <span className="text-xs text-muted-foreground">
+              {t("current_duty.remaining_label")}
+            </span>
+            <span className="text-xl font-semibold text-foreground tabular-nums">
+              {remainingValueStr}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {t("current_duty.ends_at", { time: formatHHMM(duty.end_at) })}
+            </span>
           </div>
-          <p className="text-sm text-muted-foreground">{endsAtStr}</p>
+          <section className="flex flex-col gap-2 border-t border-border/50 pt-4" aria-label={t("contact.label")}>
           {hasContacts ? (
             <ContactLinks
               phone={duty.phone}
@@ -308,6 +367,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
               {t("current_duty.contact_info_not_set")}
             </p>
           )}
+          </section>
         </CardContent>
         <CardFooter>
           <Button

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

@@ -207,8 +207,10 @@ export const DayDetail = React.forwardRef<DayDetailHandle, DayDetailProps>(
           "rounded-t-2xl pt-3 pb-[calc(24px+env(safe-area-inset-bottom,0px))] max-h-[70vh] bg-[var(--surface)]",
           className
         )}
+        overlayClassName="backdrop-blur-md"
         showCloseButton={false}
         onCloseAnimationEnd={handleClose}
+        onOpenAutoFocus={(e) => e.preventDefault()}
       >
         <div className="relative px-4">
           {closeButton}

webapp-next/src/components/providers/TelegramProvider.tsx

@@ -6,15 +6,20 @@ import {
   mountMiniAppSync,
   mountThemeParamsSync,
   bindThemeParamsCssVars,
+  mountViewport,
+  bindViewportCssVars,
+  unmountViewport,
 } from "@telegram-apps/sdk-react";
 import { fixSurfaceContrast } from "@/hooks/use-telegram-theme";
+import { applyAndroidPerformanceClass } from "@/lib/telegram-android-perf";
 
 /**
  * Wraps the app with Telegram Mini App SDK initialization.
  * Calls init(acceptCustomStyles), mounts theme params (binds --tg-theme-* CSS vars),
- * and mounts the mini app. Does not call ready() here — the app calls
- * callMiniAppReadyOnce() from lib/telegram-ready when the first visible screen
- * has finished loading, so Telegram keeps its native loading animation until then.
+ * mounts the mini app, then mounts viewport and binds viewport CSS vars
+ * (--tg-viewport-stable-height, --tg-viewport-content-safe-area-inset-*, etc.).
+ * Does not call ready() here — the app calls callMiniAppReadyOnce() from
+ * lib/telegram-ready when the first visible screen has finished loading.
  * Theme is set before first paint by the inline script in layout.tsx (URL hash);
  * useTelegramTheme() in the app handles ongoing theme changes.
  */
@@ -39,7 +44,26 @@ export function TelegramProvider({
       mountMiniAppSync();
     }
 
-    return cleanup;
+    applyAndroidPerformanceClass();
+
+    let unbindViewportCssVars: (() => void) | undefined;
+    if (mountViewport.isAvailable()) {
+      mountViewport()
+        .then(() => {
+          if (bindViewportCssVars.isAvailable()) {
+            unbindViewportCssVars = bindViewportCssVars();
+          }
+        })
+        .catch(() => {
+          // Viewport not supported (e.g. not in Mini App); ignore.
+        });
+    }
+
+    return () => {
+      unbindViewportCssVars?.();
+      unmountViewport();
+      cleanup();
+    };
   }, []);
 
   return <>{children}</>;

webapp-next/src/components/states/AccessDenied.test.tsx

@@ -1,24 +0,0 @@
-/**
- * Unit tests for AccessDenied. Ported from webapp/js/ui.test.js showAccessDenied.
- */
-
-import { describe, it, expect, beforeEach } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { AccessDenied } from "./AccessDenied";
-import { resetAppStore } from "@/test/test-utils";
-
-describe("AccessDenied", () => {
-  beforeEach(() => {
-    resetAppStore();
-  });
-
-  it("renders translated access denied message", () => {
-    render(<AccessDenied serverDetail={null} />);
-    expect(screen.getByText(/Access denied|Доступ запрещён/i)).toBeInTheDocument();
-  });
-
-  it("appends serverDetail when provided", () => {
-    render(<AccessDenied serverDetail="Custom 403 message" />);
-    expect(screen.getByText("Custom 403 message")).toBeInTheDocument();
-  });
-});

webapp-next/src/components/states/AccessDenied.tsx

@@ -1,46 +0,0 @@
-/**
- * Access denied state: message and optional server detail.
- * Ported from webapp/js/ui.js showAccessDenied and states.css .access-denied.
- */
-
-"use client";
-
-import { useTranslation } from "@/i18n/use-translation";
-import { cn } from "@/lib/utils";
-
-export interface AccessDeniedProps {
-  /** Optional detail from API 403 response, shown below the main message. */
-  serverDetail?: string | null;
-  /** Optional class for the container. */
-  className?: string;
-}
-
-/**
- * Displays access denied message; optional second paragraph for server detail.
- */
-export function AccessDenied({ serverDetail, className }: AccessDeniedProps) {
-  const { t } = useTranslation();
-  const hasDetail = Boolean(serverDetail && String(serverDetail).trim());
-
-  return (
-    <div
-      className={cn(
-        "rounded-xl bg-surface py-6 px-4 my-3 text-center text-muted-foreground shadow-sm transition-opacity duration-200",
-        className
-      )}
-      role="alert"
-    >
-      <p className="m-0 mb-2 font-semibold text-error">
-        {t("access_denied")}
-      </p>
-      {hasDetail && (
-        <p className="mt-2 m-0 text-sm text-muted">
-          {serverDetail}
-        </p>
-      )}
-      <p className="mt-2 m-0 text-sm text-muted">
-        {t("access_denied.hint")}
-      </p>
-    </div>
-  );
-}

webapp-next/src/components/states/AccessDeniedScreen.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * Unit tests for AccessDeniedScreen: full-screen access denied, reload and back modes.
+ */
+
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { AccessDeniedScreen } from "./AccessDeniedScreen";
+import { resetAppStore } from "@/test/test-utils";
+
+describe("AccessDeniedScreen", () => {
+  beforeEach(() => {
+    resetAppStore();
+  });
+
+  it("renders translated access denied title and hint", () => {
+    render(<AccessDeniedScreen primaryAction="reload" />);
+    expect(screen.getByText(/Access denied|Доступ запрещён/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Open the app again from Telegram|Откройте приложение снова из Telegram/i)
+    ).toBeInTheDocument();
+  });
+
+  it("shows serverDetail when provided", () => {
+    render(
+      <AccessDeniedScreen primaryAction="reload" serverDetail="Custom 403 message" />
+    );
+    expect(screen.getByText("Custom 403 message")).toBeInTheDocument();
+  });
+
+  it("reload mode shows Reload button", () => {
+    render(<AccessDeniedScreen primaryAction="reload" />);
+    const button = screen.getByRole("button", { name: /Reload|Обновить/i });
+    expect(button).toBeInTheDocument();
+    const reloadFn = vi.fn();
+    Object.defineProperty(window, "location", {
+      value: { ...window.location, reload: reloadFn },
+      writable: true,
+    });
+    fireEvent.click(button);
+    expect(reloadFn).toHaveBeenCalled();
+  });
+
+  it("back mode shows Back to calendar and calls onBack on click", () => {
+    const onBack = vi.fn();
+    render(
+      <AccessDeniedScreen
+        primaryAction="back"
+        onBack={onBack}
+        openedFromPin={false}
+      />
+    );
+    const button = screen.getByRole("button", {
+      name: /Back to calendar|Назад к календарю/i,
+    });
+    expect(button).toBeInTheDocument();
+    fireEvent.click(button);
+    expect(onBack).toHaveBeenCalled();
+  });
+
+  it("back mode with openedFromPin shows Close button", () => {
+    const onBack = vi.fn();
+    render(
+      <AccessDeniedScreen
+        primaryAction="back"
+        onBack={onBack}
+        openedFromPin={true}
+      />
+    );
+    const button = screen.getByRole("button", { name: /Close|Закрыть/i });
+    expect(button).toBeInTheDocument();
+    fireEvent.click(button);
+    expect(onBack).toHaveBeenCalled();
+  });
+});

webapp-next/src/components/states/AccessDeniedScreen.tsx

@@ -0,0 +1,86 @@
+/**
+ * Full-screen access denied view. Used when the user is not allowed (no initData / not localhost)
+ * or when API returns 403. Matches global-error and not-found layout: no extra chrome, one action.
+ */
+
+"use client";
+
+import { useEffect } from "react";
+import { getLang, translate } from "@/i18n/messages";
+import { useAppStore } from "@/store/app-store";
+import { triggerHapticLight } from "@/lib/telegram-haptic";
+
+export interface AccessDeniedScreenProps {
+  /** Optional detail from API 403 response, shown below the hint. */
+  serverDetail?: string | null;
+  /** Primary button: reload (main page) or back/close (deep link). */
+  primaryAction: "reload" | "back";
+  /** Called when primaryAction is "back" (e.g. Back to calendar or Close). */
+  onBack?: () => void;
+  /** When true and primaryAction is "back", button label is "Close" instead of "Back to calendar". */
+  openedFromPin?: boolean;
+}
+
+/**
+ * Full-screen access denied: title, hint, optional server detail, single action button.
+ * Calls setAppContentReady(true) on mount so Telegram receives ready().
+ */
+export function AccessDeniedScreen({
+  serverDetail,
+  primaryAction,
+  onBack,
+  openedFromPin = false,
+}: AccessDeniedScreenProps) {
+  const lang = getLang();
+  const setAppContentReady = useAppStore((s) => s.setAppContentReady);
+
+  useEffect(() => {
+    setAppContentReady(true);
+  }, [setAppContentReady]);
+
+  const hasDetail = Boolean(serverDetail && String(serverDetail).trim());
+
+  const handleClick = () => {
+    triggerHapticLight();
+    if (primaryAction === "reload") {
+      if (typeof window !== "undefined") {
+        window.location.reload();
+      }
+    } else {
+      onBack?.();
+    }
+  };
+
+  const buttonLabel =
+    primaryAction === "reload"
+      ? translate(lang, "access_denied.reload")
+      : openedFromPin
+        ? translate(lang, "current_duty.close")
+        : translate(lang, "current_duty.back");
+
+  return (
+    <div
+      className="flex min-h-screen flex-col items-center justify-center gap-4 bg-background px-4 text-foreground"
+      role="alert"
+    >
+      <h1 className="text-xl font-semibold">
+        {translate(lang, "access_denied")}
+      </h1>
+      <p className="text-center text-muted-foreground">
+        {translate(lang, "access_denied.hint")}
+      </p>
+      {hasDetail && (
+        <p className="text-center text-sm text-muted-foreground">
+          {serverDetail}
+        </p>
+      )}
+      <button
+        type="button"
+        onClick={handleClick}
+        className="rounded-lg bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
+      >
+        {buttonLabel}
+      </button>
+    </div>
+  );
+}

webapp-next/src/components/states/ErrorState.tsx

@@ -8,6 +8,7 @@
 import { useTranslation } from "@/i18n/use-translation";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { triggerHapticLight } from "@/lib/telegram-haptic";
 
 export interface ErrorStateProps {
   /** Error message to display. If not provided, uses generic i18n message. */
@@ -65,7 +66,10 @@ export function ErrorState({ message, onRetry, className }: ErrorStateProps) {
           variant="default"
           size="sm"
           className="mt-1 bg-primary text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
-          onClick={onRetry}
+          onClick={() => {
+            triggerHapticLight();
+            onRetry();
+          }}
         >
           {t("error.retry")}
         </Button>

webapp-next/src/components/states/index.ts

@@ -4,4 +4,4 @@
 
 export { LoadingState } from "./LoadingState";
 export { ErrorState } from "./ErrorState";
-export { AccessDenied } from "./AccessDenied";
+export { AccessDeniedScreen } from "./AccessDeniedScreen";

webapp-next/src/components/ui/sheet.tsx

@@ -53,12 +53,15 @@ function SheetContent({
   showCloseButton = true,
   onCloseAnimationEnd,
   onAnimationEnd,
+  overlayClassName,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
   /** When provided, content and overlay stay mounted until close animation ends (forceMount). */
   onCloseAnimationEnd?: () => void
+  /** Optional class name applied to the overlay (e.g. backdrop-blur-md). */
+  overlayClassName?: string
 }) {
   const useForceMount = Boolean(onCloseAnimationEnd)
 
@@ -74,7 +77,10 @@ function SheetContent({
 
   return (
     <SheetPortal>
-      <SheetOverlay forceMount={useForceMount ? true : undefined} />
+      <SheetOverlay
+        forceMount={useForceMount ? true : undefined}
+        className={overlayClassName}
+      />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         forceMount={useForceMount ? true : undefined}

webapp-next/src/hooks/use-telegram-theme.test.ts

@@ -16,6 +16,7 @@ vi.mock("@telegram-apps/sdk-react", () => ({
   isThemeParamsDark: vi.fn(),
   setMiniAppBackgroundColor: { isAvailable: vi.fn(() => false) },
   setMiniAppHeaderColor: { isAvailable: vi.fn(() => false) },
+  setMiniAppBottomBarColor: { isAvailable: vi.fn(() => false) },
 }));
 
 describe("getFallbackScheme", () => {

webapp-next/src/hooks/use-telegram-theme.ts

@@ -6,6 +6,7 @@ import {
   isThemeParamsDark,
   setMiniAppBackgroundColor,
   setMiniAppHeaderColor,
+  setMiniAppBottomBarColor,
 } from "@telegram-apps/sdk-react";
 
 /**
@@ -69,6 +70,9 @@ export function applyTheme(scheme?: "dark" | "light"): void {
   if (setMiniAppHeaderColor.isAvailable()) {
     setMiniAppHeaderColor("bg_color");
   }
+  if (setMiniAppBottomBarColor.isAvailable()) {
+    setMiniAppBottomBarColor("bottom_bar_bg_color");
+  }
 }
 
 /**

webapp-next/src/i18n/messages.ts

@@ -67,9 +67,12 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
     "current_duty.shift_tz": "Shift ({tz}):",
     "current_duty.shift_local": "Shift (your time):",
     "current_duty.remaining": "Remaining: {hours}h {minutes}min",
+    "current_duty.remaining_label": "Remaining",
+    "current_duty.remaining_value": "{hours}h {minutes}min",
     "current_duty.ends_at": "Until end of shift at {time}",
     "current_duty.back": "Back to calendar",
     "current_duty.close": "Close",
+    "current_duty.open_calendar": "Open calendar",
     "current_duty.contact_info_not_set": "Contact info not set",
     "error_boundary.message": "Something went wrong.",
     "error_boundary.description": "An unexpected error occurred. Try reloading the app.",
@@ -78,6 +81,7 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
     "not_found.description": "The page you are looking for does not exist.",
     "not_found.open_calendar": "Open calendar",
     "access_denied.hint": "Open the app again from Telegram.",
+    "access_denied.reload": "Reload",
   },
   ru: {
     "app.title": "Календарь дежурств",
@@ -140,9 +144,12 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
     "current_duty.shift_tz": "Смена ({tz}):",
     "current_duty.shift_local": "Смена (ваше время):",
     "current_duty.remaining": "Осталось: {hours}ч {minutes}мин",
+    "current_duty.remaining_label": "Осталось",
+    "current_duty.remaining_value": "{hours}ч {minutes}мин",
     "current_duty.ends_at": "До конца смены в {time}",
     "current_duty.back": "Назад к календарю",
     "current_duty.close": "Закрыть",
+    "current_duty.open_calendar": "Открыть календарь",
     "current_duty.contact_info_not_set": "Контактные данные не указаны",
     "error_boundary.message": "Что-то пошло не так.",
     "error_boundary.description": "Произошла непредвиденная ошибка. Попробуйте перезагрузить приложение.",
@@ -151,6 +158,7 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
     "not_found.description": "Запрашиваемая страница не существует.",
     "not_found.open_calendar": "Открыть календарь",
     "access_denied.hint": "Откройте приложение снова из Telegram.",
+    "access_denied.reload": "Обновить",
   },
 };
 

webapp-next/src/lib/current-duty.test.ts

@@ -3,7 +3,7 @@
  * Ported from webapp/js/currentDuty.test.js.
  */
 
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import { getRemainingTime, findCurrentDuty } from "./current-duty";
 import type { DutyWithUser } from "@/types";
 

webapp-next/src/lib/telegram-android-perf.ts

@@ -0,0 +1,26 @@
+/**
+ * Detects Android Telegram Mini App performance class from User-Agent and sets
+ * data-perf on document.documentElement so CSS can reduce animations on low-end devices.
+ * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent
+ */
+
+import { retrieveAndroidDeviceData } from "@telegram-apps/sdk-react";
+
+const DATA_ATTR = "data-perf";
+
+/**
+ * Runs once: if running in Telegram on Android with LOW performance class,
+ * sets data-perf="low" on the document root for CSS to minimize animations.
+ */
+export function applyAndroidPerformanceClass(): void {
+  if (typeof document === "undefined") return;
+  try {
+    const data = retrieveAndroidDeviceData();
+    const perf = data?.performanceClass;
+    if (perf === "LOW") {
+      document.documentElement.setAttribute(DATA_ATTR, "low");
+    }
+  } catch {
+    // Not in Telegram or not Android; ignore.
+  }
+}

webapp-next/src/lib/telegram-haptic.ts

@@ -0,0 +1,19 @@
+/**
+ * Triggers Telegram Mini App haptic feedback when available.
+ * Use on primary actions and key interactions to mimic native Telegram behavior.
+ */
+
+import { hapticFeedbackImpactOccurred } from "@telegram-apps/sdk-react";
+
+/**
+ * Triggers light impact haptic feedback. No-op when not in Telegram or unsupported.
+ */
+export function triggerHapticLight(): void {
+  try {
+    if (hapticFeedbackImpactOccurred.isAvailable()) {
+      hapticFeedbackImpactOccurred("light");
+    }
+  } catch {
+    // SDK not available; ignore.
+  }
+}

webapp-next/src/lib/telegram-ready.ts

@@ -1,15 +1,17 @@
 /**
- * Single-call wrapper for Telegram Mini App ready().
+ * Single-call wrapper for Telegram Mini App ready() and expand().
  * Called once when the first visible screen has finished loading so Telegram
  * hides its native loading animation only after our content is ready.
+ * Also expands the Mini App to full height when supported.
  */
 
-import { miniAppReady } from "@telegram-apps/sdk-react";
+import { miniAppReady, expandViewport } from "@telegram-apps/sdk-react";
 
 let readyCalled = false;
 
 /**
- * Calls Telegram miniAppReady() at most once per session.
+ * Calls Telegram miniAppReady() at most once per session, then expandViewport()
+ * when available so the app opens to full height.
  * Safe when SDK is unavailable (e.g. non-Telegram environment).
  */
 export function callMiniAppReadyOnce(): void {
@@ -19,6 +21,9 @@ export function callMiniAppReadyOnce(): void {
       miniAppReady();
       readyCalled = true;
     }
+    if (expandViewport.isAvailable()) {
+      expandViewport();
+    }
   } catch {
     // SDK not available or not in Mini App context; no-op.
   }

webapp-next/src/store/app-store.ts

@@ -24,7 +24,7 @@ export interface AppState {
   loading: boolean;
   error: string | null;
   accessDenied: boolean;
-  /** Server detail from API 403 response; shown in AccessDenied component. */
+  /** Server detail from API 403 response; shown in AccessDeniedScreen. */
   accessDeniedDetail: string | null;
   currentView: CurrentView;
   selectedDay: string | null;