Arnike/duty-teller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

feat: enhance Mini App design guidelines and refactor layout components

Browse Source 
- Updated Mini App design guidelines to include detailed instructions on UI changes, accessibility rules, and verification processes.
- Refactored multiple components to utilize `MiniAppScreen` and `MiniAppScreenContent` for consistent layout structure across the application.
- Improved error handling in `GlobalError` and `NotFound` components by integrating new layout components for better user experience.
- Introduced new hooks for admin functionality, streamlining access checks and data loading processes.
- Enhanced documentation to reflect changes in design policies and component usage, ensuring clarity for future development.
This commit is contained in:
Nikolay Tatarinov
2026-03-06 17:51:33 +03:00
parent 43cd3bbd7d
commit fa22976e75
38 changed files with 1166 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.cursor/rules/frontend.mdc
View File

@@ -41,9 +41,11 @@ The Mini App lives in `webapp-next/`. It is built as a static export and served
- **Client components:** Use `'use client'` where hooks or browser APIs are used (layout loads config script; page and most UI are client).
- **Theme:** CSS variables in `globals.css`; `useTelegramTheme` maps Telegram theme params to `--tg-theme-*` and sets `data-theme` on `<html>`.
- **Auth:** `useTelegramAuth` provides initData for API; access gated for non-Telegram except localhost.
- **i18n:** `useTranslation()` from store lang; `window.__DT_LANG` set by `/app/config.js` (backend).
- **i18n:** `useTranslation()` for React UI; `getLang()/translate()` only for early bootstrap or non-React boundaries.
- **API:** `fetchDuties`, `fetchCalendarEvents` in `src/lib/api.ts`; pass initData, lang, AbortSignal; handle ACCESS_DENIED.
- **Heavy pages:** For feature-heavy routes (e.g. admin), use a custom hook (state, effects, callbacks) plus presentational components; keep the page as a thin layer (early returns + composition). Example: `admin/page.tsx` uses `useAdminPage`, `AdminDutyList`, and `ReassignSheet`.
- **Platform boundary:** Use `src/hooks/telegram/*` adapters for Back/Settings/Close/swipe/closing behavior instead of direct SDK control calls in feature components.
- **Screen shells:** Reuse `src/components/layout/MiniAppScreen.tsx` wrappers for route and full-screen states.
## Testing
@@ -60,6 +62,8 @@ When adding or changing UI in the Mini App, **follow the [Mini App design guidel
- Page wrappers: `content-safe`, `max-w-[var(--max-width-app)]`, viewport height; respect safe area for sheets/modals.
- Reuse component patterns (buttons, cards, calendar grid, timeline list) and left-stripe semantics (`border-l-duty`, `border-l-today`, etc.).
- Add ARIA labels and roles for interactive elements and grids; respect `prefers-reduced-motion` and `data-perf="low"` for animations.
- Keep all user-facing strings and `aria-label`/`sr-only` text localized.
- Follow Telegram interaction policy from the design guideline: vertical swipes enabled by default, closing confirmation only for stateful flows.
Use the checklist in the design doc when introducing new screens or components.

2
AGENTS.md
View File

@@ -50,5 +50,5 @@ Docstrings and code comments must be in English (Google-style docstrings). UI st
- **Config:** Environment variables (e.g. `.env`); no hardcoded secrets.
- **Database:** One logical transaction per `session_scope` — a single `commit` at the end of the business operation (e.g. in `run_import`). Repository helpers used inside such a flow (e.g. `get_or_create_user_by_full_name`) accept `commit=False` and let the caller commit once.
- **Error handling:** Do not send `str(exception)` from parsers or DB to the user. Use generic i18n keys (e.g. `import.parse_error_generic`, `import.import_error_generic`) and log the full exception server-side.
- **Mini App (webapp-next):** When adding or changing UI in `webapp-next/`, follow the [Mini App design guideline](docs/miniapp-design.md): use only design tokens and Tailwind aliases from it, apply layout/safe-area/accessibility rules, and use the checklist for new screens or components.
- **Mini App (webapp-next):** When adding or changing UI in `webapp-next/`, follow the [Mini App design guideline](docs/miniapp-design.md): use only design tokens and Tailwind aliases, use shared Mini App screen shells, keep Telegram SDK access behind `src/hooks/telegram/*`, apply safe-area/content-safe-area and accessibility rules, and run the Mini App verification matrix (light/dark, iOS/Android safe area, low-perf Android, deep links, admin flow, fallback states).
- **Cursor:** The project does not version `.cursor/`. You can mirror this file in `.cursor/rules/` locally; [AGENTS.md](AGENTS.md) is the single versioned reference for AI and maintainers.

46
docs/miniapp-design.md
View File

@@ -100,6 +100,12 @@ Use **only** these tokens and Tailwind/shadcn aliases (`bg-background`, `text-mu
- **Sticky headers:** Use `top-[var(--app-safe-top)]` (not `top-0`) for sticky elements (e.g. calendar header, admin header) so they sit below the Telegram UI instead of overlapping it.
- Lists that extend to the bottom should also account for bottom inset (e.g. `padding-bottom: var(--tg-viewport-content-safe-area-inset-bottom, 12px)` in `.container-app`).
Official terminology (Telegram docs) uses `safeAreaInset` and `contentSafeAreaInset`
plus events `safeAreaChanged` and `contentSafeAreaChanged`. In our code, these values
are exposed through SDK CSS bindings and consumed via app aliases (`--app-safe-*`).
When updating safe-area code, preserve this mapping and avoid mixing raw `env(...)`
and Telegram content-safe insets within the same component.
### 3.4 Sheets and modals
Bottom sheets and modals that sit at the bottom of the screen must add safe area to their padding, e.g.:
@@ -203,6 +209,31 @@ See `webapp-next/src/components/day-detail/DayDetail.tsx` for the Sheet content.
- `setBottomBarColor('bottom_bar_bg_color')` when available (Bot API 7.10+).
- **Surface contrast:** When `--surface` equals `--bg` (e.g. some iOS OLED themes), `fixSurfaceContrast()` in `use-telegram-theme.ts` adjusts `--surface` using ThemeParams or a light color-mix so cards and panels remain visible.
### 8.1 Native control policy
- Use platform wrappers in `src/hooks/telegram/` rather than direct SDK calls in
feature components.
- **BackButton:** preferred for route-level back navigation in Telegram context.
- **SettingsButton:** use for route actions like opening `/admin` from calendar.
- **Main/Secondary button:** optional; use only if action must align with Telegram
bottom action affordance (do not duplicate with conflicting in-app primary CTA).
- **Haptics:** trigger only on meaningful user actions (submit, confirm, close).
### 8.2 Swipe and closing policy
- Keep vertical swipes enabled by default (`enableVerticalSwipes` behavior).
- Disable vertical swipes only on screens with explicit gesture conflict and document
the reason in code review.
- Enable closing confirmation only for stateful flows where accidental close can
lose user intent (e.g. reassignment flow in admin sheet).
### 8.3 Fullscreen/newer APIs policy
- Fullscreen APIs (`requestFullscreen`, `exitFullscreen`) are currently optional and
out of scope unless a feature explicitly requires immersive mode.
- If fullscreen is introduced, review safe area/content safe area and verify
`safeAreaChanged`, `contentSafeAreaChanged`, and `fullscreenChanged` handling.
---
## 9. Checklist for new screens and components
@@ -215,3 +246,18 @@ Use this for review when adding or changing UI:
- [ ] Safe area is respected for bottom padding and for sheets/modals.
- [ ] Interactive elements and grids/lists have appropriate `aria-label`s and roles.
- [ ] New animations respect `prefers-reduced-motion` and `data-perf="low"` (short or minimal on low-end Android).
- [ ] User-facing strings and `aria-label`/`sr-only` text are localized via i18n (no hardcoded English in shared UI).
- [ ] Telegram controls are connected through platform hooks (`src/hooks/telegram/*`) instead of direct SDK calls.
- [ ] Vertical swipe and closing confirmation behavior follows the policy above.
## 10. Verification matrix (Mini App)
At minimum verify:
- Telegram light + dark themes.
- iOS and Android safe area/content-safe-area behavior (portrait + landscape).
- Android low-performance behavior (`data-perf="low"`).
- Deep link current duty (`startParam=duty`).
- Direct `/admin` open and reassignment flow.
- Access denied, not-found, and error boundary screens.
- Calendar swipe navigation with sticky header and native Telegram controls.

119
docs/webapp-next-refactor-audit.md Normal file
View File

@@ -0,0 +1,119 @@
# Webapp-next Refactor Baseline Audit
This note captures the baseline before the phased refactor. It defines current risks,
duplication hotspots, and expected behavior that must not regress.
## 1) Screens and boundaries
- Home route orchestration: `webapp-next/src/app/page.tsx`
- Chooses among `AccessDeniedScreen`, `CurrentDutyView`, `CalendarPage`.
- Controls app visibility via `appContentReady`.
- Admin route orchestration: `webapp-next/src/app/admin/page.tsx`
- Thin route, but still owns shell duplication and content-ready signaling.
- Calendar composition root: `webapp-next/src/components/CalendarPage.tsx`
- Combines sticky layout, swipe, month loading, auto-refresh, settings button.
- Current duty feature root: `webapp-next/src/components/current-duty/CurrentDutyView.tsx`
- Combines data loading, error/access states, back button, and close action.
- Admin feature state root: `webapp-next/src/components/admin/useAdminPage.ts`
- Combines SDK button handling, admin access, users/duties loading, sheet state,
mutation and infinite scroll concerns.
## 2) Telegram integration touchpoints
- SDK/provider bootstrap:
- `webapp-next/src/components/providers/TelegramProvider.tsx`
- `webapp-next/src/components/ReadyGate.tsx`
- `webapp-next/src/lib/telegram-ready.ts`
- Direct control usage in feature code:
- `backButton` in `CurrentDutyView` and `useAdminPage`
- `settingsButton` in `CalendarPage`
- `closeMiniApp` in `CurrentDutyView`
- Haptics in feature-level handlers:
- `webapp-next/src/lib/telegram-haptic.ts`
Risk: platform behavior is spread across feature components instead of a narrow
platform boundary.
## 3) Layout and shell duplication
Repeated outer wrappers appear across route and state screens:
- `content-safe min-h-[var(--tg-viewport-stable-height,100vh)] bg-background`
- `mx-auto flex w-full max-w-[var(--max-width-app)] flex-col`
Known locations:
- `webapp-next/src/app/page.tsx`
- `webapp-next/src/app/admin/page.tsx`
- `webapp-next/src/components/CalendarPage.tsx`
- `webapp-next/src/components/states/FullScreenStateShell.tsx`
- `webapp-next/src/app/not-found.tsx`
- `webapp-next/src/app/global-error.tsx`
Risk: future safe-area or viewport fixes require multi-file edits.
## 4) Readiness and lifecycle coupling
`appContentReady` is set by multiple screens/routes:
- `page.tsx`
- `admin/page.tsx`
- `CalendarPage.tsx`
- `CurrentDutyView.tsx`
`ReadyGate` is route-agnostic, but signaling is currently ad hoc.
Risk: race conditions or deadlock-like "hidden app" scenarios when screen states
change in future refactors.
## 5) Async/data-loading duplication
Repeated manual patterns (abort, retries, state machine):
- `webapp-next/src/hooks/use-month-data.ts`
- `webapp-next/src/components/current-duty/CurrentDutyView.tsx`
- `webapp-next/src/components/admin/useAdminPage.ts`
Risk: inconsistent retry/access-denied behavior and difficult maintenance.
## 6) Store mixing concerns
`webapp-next/src/store/app-store.ts` currently mixes:
- session/platform concerns (`lang`, `appContentReady`, `isAdmin`)
- calendar/domain concerns (`currentMonth`, `pendingMonth`, duties/events)
- view concerns (`currentView`, `selectedDay`, `error`, `accessDenied`)
Risk: high coupling and larger blast radius for otherwise local changes.
## 7) i18n/a11y gaps to close
- Hardcoded grid label in `CalendarGrid`: `aria-label="Calendar"`.
- Hardcoded sr-only close text in shared `Sheet`: `"Close"`.
- Mixed language access strategy (`useTranslation()` vs `getLang()/translate()`),
valid for bootstrap/error boundary, but not explicitly codified in one place.
## 8) Telegram Mini Apps compliance checklist (baseline)
Already implemented well:
- Dynamic theme + runtime sync.
- Safe-area/content-safe-area usage via CSS vars and layout classes.
- `ready()` gate and Telegram loader handoff.
- Android low-performance class handling.
Needs explicit policy/consistency:
- Vertical swipes policy for gesture-heavy screens.
- Closing confirmation policy for stateful admin flows.
- Main/Secondary button usage policy for primary actions.
- Terminology alignment with current official docs:
`safeAreaInset`, `contentSafeAreaInset`, fullscreen events.
## 9) Expected behavior (non-regression)
- `/`:
- Shows access denied screen if not allowed.
- Opens current-duty view for `startParam=duty`.
- Otherwise opens calendar.
- `/admin`:
- Denies non-admin users.
- Loads users and duties for selected admin month.
- Allows reassignment with visible feedback.
- Error/fallback states:
- `not-found` and global error remain full-screen and theme-safe.
- Telegram UX:
- Back/settings controls remain functional in Telegram context.
- Ready handoff happens when first useful screen is visible.

52
webapp-next/src/app/admin/page.tsx
View File

@@ -6,64 +6,54 @@
"use client";
import { useEffect } from "react";
import { useAdminPage, AdminDutyList, ReassignSheet } from "@/components/admin";
import { useTranslation } from "@/i18n/use-translation";
import { useAppStore } from "@/store/app-store";
import { MonthNavHeader } from "@/components/calendar/MonthNavHeader";
import { AccessDeniedScreen } from "@/components/states/AccessDeniedScreen";
import { LoadingState } from "@/components/states/LoadingState";
import { ErrorState } from "@/components/states/ErrorState";
const OUTER_CLASS =
"content-safe min-h-[var(--tg-viewport-stable-height,100vh)] bg-background";
const INNER_CLASS =
"mx-auto flex w-full max-w-[var(--max-width-app)] flex-col";
import { MiniAppScreen, MiniAppScreenContent, MiniAppStickyHeader } from "@/components/layout/MiniAppScreen";
import { useScreenReady } from "@/hooks/use-screen-ready";
export default function AdminPage() {
const { t, monthName } = useTranslation();
const admin = useAdminPage();
const setAppContentReady = useAppStore((s) => s.setAppContentReady);
// Signal ready so Telegram hides loader when opening /admin directly.
useEffect(() => {
setAppContentReady(true);
}, [setAppContentReady]);
useScreenReady(true);
if (!admin.isAllowed) {
return (
<div className={OUTER_CLASS}>
<div className={INNER_CLASS}>
<MiniAppScreen>
<MiniAppScreenContent>
<AccessDeniedScreen primaryAction="reload" />
</div>
</div>
</MiniAppScreenContent>
</MiniAppScreen>
);
}
if (admin.adminCheckComplete === null) {
return (
<div className={OUTER_CLASS}>
<div className={INNER_CLASS}>
<MiniAppScreen>
<MiniAppScreenContent>
<div className="py-4 flex flex-col items-center gap-2">
<LoadingState />
<p className="text-sm text-muted-foreground">{t("admin.loading_users")}</p>
</div>
</div>
</div>
</MiniAppScreenContent>
</MiniAppScreen>
);
}
if (admin.adminAccessDenied) {
return (
<div className={OUTER_CLASS}>
<div className={INNER_CLASS}>
<MiniAppScreen>
<MiniAppScreenContent>
<div className="flex flex-col gap-4 py-6">
<p className="text-muted-foreground">
{admin.adminAccessDeniedDetail ?? t("admin.access_denied")}
</p>
</div>
</div>
</div>
</MiniAppScreenContent>
</MiniAppScreen>
);
}
@@ -71,9 +61,9 @@ export default function AdminPage() {
const year = admin.adminMonth.getFullYear();
return (
<div className={OUTER_CLASS}>
<div className={INNER_CLASS}>
<header className="sticky top-[var(--app-safe-top)] z-10 flex flex-col items-center border-b border-border bg-background py-3">
<MiniAppScreen>
<MiniAppScreenContent>
<MiniAppStickyHeader className="flex flex-col items-center border-b border-border py-3">
<MonthNavHeader
month={admin.adminMonth}
disabled={admin.loading}
@@ -82,7 +72,7 @@ export default function AdminPage() {
titleAriaLabel={`${t("admin.title")}, ${monthName(month)} ${year}`}
className="w-full px-1"
/>
</header>
</MiniAppStickyHeader>
{admin.successMessage && (
<p className="mt-3 text-sm text-[var(--duty)]" role="status" aria-live="polite">
@@ -135,7 +125,7 @@ export default function AdminPage() {
onCloseAnimationEnd={admin.closeReassign}
t={t}
/>
</div>
</div>
</MiniAppScreenContent>
</MiniAppScreen>
);
}

25
webapp-next/src/app/global-error.tsx
View File

@@ -11,6 +11,7 @@ import { getLang, translate } from "@/i18n/messages";
import { callMiniAppReadyOnce } from "@/lib/telegram-ready";
import { THEME_BOOTSTRAP_SCRIPT } from "@/lib/theme-bootstrap-script";
import { Button } from "@/components/ui/button";
import { MiniAppScreen, MiniAppScreenContent } from "@/components/layout/MiniAppScreen";
export default function GlobalError({
error,
@@ -35,17 +36,19 @@ export default function GlobalError({
<script dangerouslySetInnerHTML={{ __html: THEME_BOOTSTRAP_SCRIPT }} />
</head>
<body className="antialiased">
<div className="content-safe flex min-h-[var(--tg-viewport-stable-height,100vh)] flex-col items-center justify-center gap-4 bg-background px-4 text-foreground">
<h1 className="text-xl font-semibold">
{translate(lang, "error_boundary.message")}
</h1>
<p className="text-center text-muted-foreground">
{translate(lang, "error_boundary.description")}
</p>
<Button type="button" onClick={() => reset()}>
{translate(lang, "error_boundary.reload")}
</Button>
</div>
<MiniAppScreen>
<MiniAppScreenContent className="items-center justify-center gap-4 px-4 text-foreground">
<h1 className="text-xl font-semibold">
{translate(lang, "error_boundary.message")}
</h1>
<p className="text-center text-muted-foreground">
{translate(lang, "error_boundary.description")}
</p>
<Button type="button" onClick={() => reset()}>
{translate(lang, "error_boundary.reload")}
</Button>
</MiniAppScreenContent>
</MiniAppScreen>
</body>
</html>
);

9
webapp-next/src/app/not-found.tsx
View File

@@ -5,20 +5,15 @@
"use client";
import { useEffect } from "react";
import Link from "next/link";
import { useTranslation } from "@/i18n/use-translation";
import { useAppStore } from "@/store/app-store";
import { Button } from "@/components/ui/button";
import { FullScreenStateShell } from "@/components/states/FullScreenStateShell";
import { useScreenReady } from "@/hooks/use-screen-ready";
export default function NotFound() {
const { t } = useTranslation();
const setAppContentReady = useAppStore((s) => s.setAppContentReady);
useEffect(() => {
setAppContentReady(true);
}, [setAppContentReady]);
useScreenReady(true);
return (
<FullScreenStateShell

28
webapp-next/src/app/page.tsx
View File

@@ -15,6 +15,8 @@ import { getLang } from "@/i18n/messages";
import { AccessDeniedScreen } from "@/components/states/AccessDeniedScreen";
import { CurrentDutyView } from "@/components/current-duty/CurrentDutyView";
import { CalendarPage } from "@/components/CalendarPage";
import { MiniAppScreen, MiniAppScreenContent } from "@/components/layout/MiniAppScreen";
import { useScreenReady } from "@/hooks/use-screen-ready";
export default function Home() {
const { initDataRaw, startParam, isLocalhost } = useTelegramAuth();
@@ -31,7 +33,7 @@ export default function Home() {
fetchAdminMe(initDataRaw, getLang()).then(({ is_admin }) => setIsAdmin(is_admin));
}, [isAllowed, initDataRaw, setIsAdmin]);
const { accessDenied, currentView, setCurrentView, setSelectedDay, appContentReady, setAppContentReady } =
const { accessDenied, currentView, setCurrentView, setSelectedDay, appContentReady } =
useAppStore(
useShallow((s: AppState) => ({
accessDenied: s.accessDenied,
@@ -39,16 +41,10 @@ export default function Home() {
setCurrentView: s.setCurrentView,
setSelectedDay: s.setSelectedDay,
appContentReady: s.appContentReady,
setAppContentReady: s.setAppContentReady,
}))
);
// When showing access-denied or current-duty view, mark content ready so ReadyGate can call miniAppReady().
useEffect(() => {
if (accessDenied || currentView === "currentDuty") {
setAppContentReady(true);
}
}, [accessDenied, currentView, setAppContentReady]);
useScreenReady(accessDenied || currentView === "currentDuty");
const handleBackFromCurrentDuty = useCallback(() => {
setCurrentView("calendar");
@@ -56,20 +52,20 @@ export default function Home() {
}, [setCurrentView, setSelectedDay]);
const content = accessDenied ? (
<div className="content-safe min-h-[var(--tg-viewport-stable-height,100vh)] bg-background">
<div className="mx-auto flex w-full max-w-[var(--max-width-app)] flex-col">
<MiniAppScreen>
<MiniAppScreenContent>
<AccessDeniedScreen primaryAction="reload" />
</div>
</div>
</MiniAppScreenContent>
</MiniAppScreen>
) : currentView === "currentDuty" ? (
<div className="content-safe min-h-[var(--tg-viewport-stable-height,100vh)] bg-background">
<div className="mx-auto flex w-full max-w-[var(--max-width-app)] flex-col">
<MiniAppScreen>
<MiniAppScreenContent>
<CurrentDutyView
onBack={handleBackFromCurrentDuty}
openedFromPin={startParam === "duty"}
/>
</div>
</div>
</MiniAppScreenContent>
</MiniAppScreen>
) : (
<CalendarPage isAllowed={isAllowed} initDataRaw={initDataRaw} />
);

63
webapp-next/src/components/CalendarPage.tsx
View File

@@ -7,7 +7,6 @@
import { useRef, useState, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import { settingsButton } from "@telegram-apps/sdk-react";
import { useAppStore } from "@/store/app-store";
import { useShallow } from "zustand/react/shallow";
import { useMonthData } from "@/hooks/use-month-data";
@@ -19,6 +18,10 @@ 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 { MiniAppScreen, MiniAppScreenContent, MiniAppStickyHeader } from "@/components/layout/MiniAppScreen";
import { useTelegramSettingsButton, useTelegramVerticalSwipePolicy } from "@/hooks/telegram";
import { DISABLE_VERTICAL_SWIPES_BY_DEFAULT } from "@/lib/telegram-interaction-policy";
import { useScreenReady } from "@/hooks/use-screen-ready";
/** 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;
@@ -60,7 +63,6 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
prevMonth,
setCurrentMonth,
setSelectedDay,
setAppContentReady,
} = useAppStore(
useShallow((s) => ({
currentMonth: s.currentMonth,
@@ -76,7 +78,6 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
prevMonth: s.prevMonth,
setCurrentMonth: s.setCurrentMonth,
setSelectedDay: s.setSelectedDay,
setAppContentReady: s.setAppContentReady,
}))
);
@@ -110,6 +111,7 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
{ threshold: 50, disabled: navDisabled }
);
useStickyScroll(calendarStickyRef);
useTelegramVerticalSwipePolicy(DISABLE_VERTICAL_SWIPES_BY_DEFAULT);
const handleDayClick = useCallback(
(dateKey: string, anchorRect: DOMRect) => {
@@ -129,50 +131,19 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
setSelectedDay(null);
}, [setSelectedDay]);
const readyCalledRef = useRef(false);
// Mark content ready when first load finishes or access denied, so page can call ready() and show content.
useEffect(() => {
if ((!loading || accessDenied) && !readyCalledRef.current) {
readyCalledRef.current = true;
setAppContentReady(true);
}
}, [loading, accessDenied, setAppContentReady]);
useScreenReady(!loading || accessDenied);
// Show native Settings button in Telegram context menu for admins; click navigates to /admin.
useEffect(() => {
if (!isAdmin) return;
let offClick: (() => void) | undefined;
try {
if (settingsButton.mount.isAvailable()) {
settingsButton.mount();
}
if (settingsButton.show.isAvailable()) {
settingsButton.show();
}
if (settingsButton.onClick.isAvailable()) {
offClick = settingsButton.onClick(() => router.push("/admin"));
}
} catch {
// Non-Telegram environment; SettingsButton not available.
}
return () => {
try {
if (typeof offClick === "function") offClick();
if (settingsButton.hide.isAvailable()) {
settingsButton.hide();
}
} catch {
// Ignore cleanup errors in non-Telegram environment.
}
};
}, [isAdmin, router]);
useTelegramSettingsButton({
enabled: isAdmin,
onClick: () => router.push("/admin"),
});
return (
<div className="content-safe min-h-[var(--tg-viewport-stable-height,100vh)] bg-background">
<div className="mx-auto flex w-full max-w-[var(--max-width-app)] flex-col">
<div
<MiniAppScreen>
<MiniAppScreenContent>
<MiniAppStickyHeader
ref={calendarStickyRef}
className="sticky top-[var(--app-safe-top)] z-10 min-h-[var(--calendar-block-min-height)] bg-background pb-2 touch-pan-y"
className="min-h-[var(--calendar-block-min-height)] pb-2 touch-pan-y"
>
<CalendarHeader
month={currentMonth}
@@ -186,7 +157,7 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
calendarEvents={calendarEvents}
onDayClick={handleDayClick}
/>
</div>
</MiniAppStickyHeader>
{error && (
<ErrorState message={error} onRetry={retry} className="my-3" />
@@ -204,7 +175,7 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
calendarEvents={calendarEvents}
onClose={handleCloseDayDetail}
/>
</div>
</div>
</MiniAppScreenContent>
</MiniAppScreen>
);
}

3
webapp-next/src/components/admin/ReassignSheet.tsx
View File

@@ -73,6 +73,7 @@ export function ReassignSheet({
className="flex max-h-[85vh] flex-col rounded-t-2xl bg-[var(--surface)] p-0 pt-3"
overlayClassName="backdrop-blur-md"
showCloseButton={false}
closeLabel={t("day_detail.close")}
onCloseAnimationEnd={onCloseAnimationEnd}
onOpenAutoFocus={(e) => e.preventDefault()}
>
@@ -176,7 +177,7 @@ export function ReassignSheet({
</div>
)}
</div>
<SheetFooter className="flex-shrink-0 flex-row justify-end gap-2 border-t border-border bg-[var(--surface)] px-4 py-3 pb-[calc(12px+env(safe-area-inset-bottom,0px))]">
<SheetFooter className="flex-shrink-0 flex-row justify-end gap-2 border-t border-border bg-[var(--surface)] px-4 py-3 pb-[calc(12px+var(--app-safe-bottom,env(safe-area-inset-bottom,0px)))]">
<Button
onClick={onReassign}
disabled={

5
webapp-next/src/components/admin/hooks/index.ts Normal file
View File

@@ -0,0 +1,5 @@
export * from "./use-admin-access";
export * from "./use-admin-users";
export * from "./use-admin-duties";
export * from "./use-infinite-duty-groups";
export * from "./use-admin-reassign";

44
webapp-next/src/components/admin/hooks/use-admin-access.ts Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import { useEffect, useState } from "react";
import { fetchAdminMe } from "@/lib/api";
export interface UseAdminAccessOptions {
isAllowed: boolean;
initDataRaw: string | undefined;
lang: "ru" | "en";
}
export function useAdminAccess({ isAllowed, initDataRaw, lang }: UseAdminAccessOptions) {
const [adminCheckComplete, setAdminCheckComplete] = useState<boolean | null>(null);
const [adminAccessDenied, setAdminAccessDenied] = useState(false);
const [adminAccessDeniedDetail, setAdminAccessDeniedDetail] = useState<string | null>(null);
useEffect(() => {
if (!isAllowed || !initDataRaw) return;
setAdminCheckComplete(null);
setAdminAccessDenied(false);
setAdminAccessDeniedDetail(null);
fetchAdminMe(initDataRaw, lang)
.then(({ is_admin }) => {
if (!is_admin) {
setAdminAccessDenied(true);
setAdminCheckComplete(false);
return;
}
setAdminCheckComplete(true);
})
.catch(() => {
setAdminAccessDenied(true);
setAdminCheckComplete(false);
});
}, [isAllowed, initDataRaw, lang]);
return {
adminCheckComplete,
adminAccessDenied,
adminAccessDeniedDetail,
setAdminAccessDenied,
setAdminAccessDeniedDetail,
};
}

49
webapp-next/src/components/admin/hooks/use-admin-duties.ts Normal file
View File

@@ -0,0 +1,49 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { fetchDuties } from "@/lib/api";
import type { DutyWithUser } from "@/types";
import { firstDayOfMonth, lastDayOfMonth, localDateString } from "@/lib/date-utils";
export interface UseAdminDutiesOptions {
isAllowed: boolean;
initDataRaw: string | undefined;
lang: "ru" | "en";
adminCheckComplete: boolean | null;
adminMonth: Date;
onError: (message: string) => void;
clearError: () => void;
}
export function useAdminDuties({
isAllowed,
initDataRaw,
lang,
adminCheckComplete,
adminMonth,
onError,
clearError,
}: UseAdminDutiesOptions) {
const [duties, setDuties] = useState<DutyWithUser[]>([]);
const [loadingDuties, setLoadingDuties] = useState(true);
const from = useMemo(() => localDateString(firstDayOfMonth(adminMonth)), [adminMonth]);
const to = useMemo(() => localDateString(lastDayOfMonth(adminMonth)), [adminMonth]);
useEffect(() => {
if (!isAllowed || !initDataRaw || adminCheckComplete !== true) return;
const controller = new AbortController();
setLoadingDuties(true);
clearError();
fetchDuties(from, to, initDataRaw, lang, controller.signal)
.then((list) => setDuties(list))
.catch((e) => {
if ((e as Error)?.name === "AbortError") return;
onError(e instanceof Error ? e.message : String(e));
})
.finally(() => setLoadingDuties(false));
return () => controller.abort();
}, [isAllowed, initDataRaw, lang, from, to, adminCheckComplete, onError, clearError]);
return { duties, setDuties, loadingDuties, from, to };
}

116
webapp-next/src/components/admin/hooks/use-admin-reassign.ts Normal file
View File

@@ -0,0 +1,116 @@
"use client";
import { useCallback, useEffect, useState, type Dispatch, type SetStateAction } from "react";
import { AccessDeniedError, patchAdminDuty, type UserForAdmin } from "@/lib/api";
import { triggerHapticLight } from "@/lib/telegram-haptic";
import type { DutyWithUser } from "@/types";
export interface UseAdminReassignOptions {
initDataRaw: string | undefined;
lang: "ru" | "en";
users: UserForAdmin[];
setDuties: Dispatch<SetStateAction<DutyWithUser[]>>;
t: (key: string, params?: Record<string, string>) => string;
}
export function useAdminReassign({
initDataRaw,
lang,
users,
setDuties,
t,
}: UseAdminReassignOptions) {
const [selectedDuty, setSelectedDuty] = useState<DutyWithUser | null>(null);
const [selectedUserId, setSelectedUserId] = useState<number | "">("");
const [saving, setSaving] = useState(false);
const [reassignErrorKey, setReassignErrorKey] = useState<string | null>(null);
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const [sheetExiting, setSheetExiting] = useState(false);
const closeReassign = useCallback(() => {
setSelectedDuty(null);
setSelectedUserId("");
setReassignErrorKey(null);
setSheetExiting(false);
}, []);
useEffect(() => {
if (!sheetExiting) return;
const fallback = window.setTimeout(() => {
closeReassign();
}, 320);
return () => window.clearTimeout(fallback);
}, [sheetExiting, closeReassign]);
const openReassign = useCallback((duty: DutyWithUser) => {
setSelectedDuty(duty);
setSelectedUserId(duty.user_id);
setReassignErrorKey(null);
}, []);
const requestCloseSheet = useCallback(() => {
setSheetExiting(true);
}, []);
const handleReassign = useCallback(() => {
if (!selectedDuty || selectedUserId === "" || !initDataRaw) return;
if (selectedUserId === selectedDuty.user_id) {
closeReassign();
return;
}
setSaving(true);
setReassignErrorKey(null);
patchAdminDuty(selectedDuty.id, selectedUserId, initDataRaw, lang)
.then((updated) => {
setDuties((prev) =>
prev.map((d) =>
d.id === updated.id
? {
...d,
user_id: updated.user_id,
full_name:
users.find((u) => u.id === updated.user_id)?.full_name ?? d.full_name,
}
: d
)
);
setSuccessMessage(t("admin.reassign_success"));
try {
triggerHapticLight();
} catch {
// Haptic not available (e.g. non-Telegram).
}
requestCloseSheet();
setTimeout(() => setSuccessMessage(null), 3000);
})
.catch((e) => {
if (e instanceof AccessDeniedError) {
setReassignErrorKey("admin.reassign_error_denied");
} else if (e instanceof Error && /not found|не найден/i.test(e.message)) {
setReassignErrorKey("admin.reassign_error_not_found");
} else if (
e instanceof TypeError ||
(e instanceof Error && (e.message === "Failed to fetch" || e.message === "Load failed"))
) {
setReassignErrorKey("admin.reassign_error_network");
} else {
setReassignErrorKey("admin.reassign_error_generic");
}
})
.finally(() => setSaving(false));
}, [selectedDuty, selectedUserId, initDataRaw, lang, users, closeReassign, requestCloseSheet, t, setDuties]);
return {
selectedDuty,
selectedUserId,
setSelectedUserId,
saving,
reassignErrorKey,
successMessage,
sheetExiting,
openReassign,
requestCloseSheet,
handleReassign,
closeReassign,
};
}

45
webapp-next/src/components/admin/hooks/use-admin-users.ts Normal file
View File

@@ -0,0 +1,45 @@
"use client";
import { useEffect, useState } from "react";
import { AccessDeniedError, fetchAdminUsers, type UserForAdmin } from "@/lib/api";
export interface UseAdminUsersOptions {
isAllowed: boolean;
initDataRaw: string | undefined;
lang: "ru" | "en";
adminCheckComplete: boolean | null;
onAccessDenied: (detail: string | null) => void;
onError: (message: string) => void;
}
export function useAdminUsers({
isAllowed,
initDataRaw,
lang,
adminCheckComplete,
onAccessDenied,
onError,
}: UseAdminUsersOptions) {
const [users, setUsers] = useState<UserForAdmin[]>([]);
const [loadingUsers, setLoadingUsers] = useState(true);
useEffect(() => {
if (!isAllowed || !initDataRaw || adminCheckComplete !== true) return;
const controller = new AbortController();
setLoadingUsers(true);
fetchAdminUsers(initDataRaw, lang, controller.signal)
.then((list) => setUsers(list))
.catch((e) => {
if ((e as Error)?.name === "AbortError") return;
if (e instanceof AccessDeniedError) {
onAccessDenied(e.serverDetail ?? null);
return;
}
onError(e instanceof Error ? e.message : String(e));
})
.finally(() => setLoadingUsers(false));
return () => controller.abort();
}, [isAllowed, initDataRaw, lang, adminCheckComplete, onAccessDenied, onError]);
return { users, setUsers, loadingUsers };
}

56
webapp-next/src/components/admin/hooks/use-infinite-duty-groups.ts Normal file
View File

@@ -0,0 +1,56 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import type { DutyWithUser } from "@/types";
import { localDateString } from "@/lib/date-utils";
export const ADMIN_PAGE_SIZE = 20;
export function useInfiniteDutyGroups(duties: DutyWithUser[], from: string, to: string) {
const [visibleCount, setVisibleCount] = useState(ADMIN_PAGE_SIZE);
const sentinelRef = useRef<HTMLDivElement | null>(null);
const dutyOnly = useMemo(() => {
const now = new Date();
return duties
.filter((d) => d.event_type === "duty" && new Date(d.end_at) > now)
.sort(
(a, b) =>
new Date(a.start_at).getTime() - new Date(b.start_at).getTime()
);
}, [duties]);
useEffect(() => {
setVisibleCount(ADMIN_PAGE_SIZE);
}, [from, to]);
const visibleDuties = useMemo(() => dutyOnly.slice(0, visibleCount), [dutyOnly, visibleCount]);
const hasMore = visibleCount < dutyOnly.length;
const visibleGroups = useMemo(() => {
const map = new Map<string, DutyWithUser[]>();
for (const d of visibleDuties) {
const key = localDateString(new Date(d.start_at));
if (!map.has(key)) map.set(key, []);
map.get(key)!.push(d);
}
return Array.from(map.entries()).map(([dateKey, items]) => ({ dateKey, duties: items }));
}, [visibleDuties]);
useEffect(() => {
if (!hasMore || !sentinelRef.current) return;
const el = sentinelRef.current;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0]?.isIntersecting) {
setVisibleCount((prev) => Math.min(prev + ADMIN_PAGE_SIZE, dutyOnly.length));
}
},
{ root: null, rootMargin: "200px", threshold: 0 }
);
observer.observe(el);
return () => observer.disconnect();
}, [hasMore, dutyOnly.length]);
return { dutyOnly, visibleDuties, visibleGroups, hasMore, sentinelRef };
}

330
webapp-next/src/components/admin/useAdminPage.ts
View File

@@ -1,35 +1,27 @@
/**
* Admin page hook: BackButton, admin check, users/duties loading, reassign sheet state,
* infinite scroll, and derived data. Used by the admin page for composition.
* Admin page composition hook.
* Delegates access/users/duties/reassign/infinite-list concerns to focused hooks.
*/
"use client";
import { useEffect, useState, useCallback, useRef } from "react";
import { useState, useCallback, useRef, useMemo } from "react";
import { useRouter } from "next/navigation";
import { backButton } from "@telegram-apps/sdk-react";
import { useTelegramSdkReady } from "@/components/providers/TelegramProvider";
import { useAppStore } from "@/store/app-store";
import { useShallow } from "zustand/react/shallow";
import { useTelegramAuth } from "@/hooks/use-telegram-auth";
import { useTranslation } from "@/i18n/use-translation";
import { useTelegramBackButton, useTelegramClosingConfirmation } from "@/hooks/telegram";
import { ENABLE_CLOSING_CONFIRMATION_FOR_STATEFUL_ADMIN_FLOW } from "@/lib/telegram-interaction-policy";
import {
fetchDuties,
fetchAdminMe,
fetchAdminUsers,
patchAdminDuty,
AccessDeniedError,
type UserForAdmin,
} from "@/lib/api";
import { triggerHapticLight } from "@/lib/telegram-haptic";
import type { DutyWithUser } from "@/types";
import {
firstDayOfMonth,
lastDayOfMonth,
localDateString,
} from "@/lib/date-utils";
const PAGE_SIZE = 20;
useAdminAccess,
useAdminUsers,
useAdminDuties,
useInfiniteDutyGroups,
useAdminReassign,
} from "@/components/admin/hooks";
import { useRequestState } from "@/hooks/use-request-state";
export function useAdminPage() {
const router = useRouter();
@@ -43,28 +35,17 @@ export function useAdminPage() {
/** Local month for admin view; does not change global calendar month. */
const [adminMonth, setAdminMonth] = useState<Date>(() => new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1));
const [users, setUsers] = useState<UserForAdmin[]>([]);
const [duties, setDuties] = useState<DutyWithUser[]>([]);
const [loadingUsers, setLoadingUsers] = useState(true);
const [loadingDuties, setLoadingDuties] = useState(true);
const [adminCheckComplete, setAdminCheckComplete] = useState<boolean | null>(null);
const [adminAccessDenied, setAdminAccessDenied] = useState(false);
const [adminAccessDeniedDetail, setAdminAccessDeniedDetail] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [selectedDuty, setSelectedDuty] = useState<DutyWithUser | null>(null);
const [selectedUserId, setSelectedUserId] = useState<number | "">("");
const [saving, setSaving] = useState(false);
const [reassignErrorKey, setReassignErrorKey] = useState<string | null>(null);
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
const [sheetExiting, setSheetExiting] = useState(false);
const sentinelRef = useRef<HTMLDivElement | null>(null);
const navigateHomeRef = useRef(() => router.push("/"));
navigateHomeRef.current = () => router.push("/");
const from = localDateString(firstDayOfMonth(adminMonth));
const to = localDateString(lastDayOfMonth(adminMonth));
const request = useRequestState("idle");
const access = useAdminAccess({ isAllowed, initDataRaw, lang });
const handleAdminAccessDenied = useCallback(
(detail: string | null) => {
access.setAdminAccessDenied(true);
access.setAdminAccessDeniedDetail(detail);
},
[access.setAdminAccessDenied, access.setAdminAccessDeniedDetail]
);
const onPrevMonth = useCallback(() => {
setAdminMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
@@ -73,231 +54,76 @@ export function useAdminPage() {
setAdminMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
}, []);
useEffect(() => {
if (!sdkReady || isLocalhost) return;
let offClick: (() => void) | undefined;
try {
if (backButton.mount.isAvailable()) {
backButton.mount();
}
if (backButton.show.isAvailable()) {
backButton.show();
}
if (backButton.onClick.isAvailable()) {
offClick = backButton.onClick(() => navigateHomeRef.current());
}
} catch {
// Non-Telegram environment; BackButton not available.
}
return () => {
try {
if (typeof offClick === "function") offClick();
if (backButton.hide.isAvailable()) {
backButton.hide();
}
} catch {
// Ignore cleanup errors in non-Telegram environment.
}
};
}, [sdkReady, isLocalhost, router]);
useTelegramBackButton({
enabled: sdkReady && !isLocalhost,
onClick: () => navigateHomeRef.current(),
});
useEffect(() => {
if (!isAllowed || !initDataRaw) return;
setAdminCheckComplete(null);
setAdminAccessDenied(false);
fetchAdminMe(initDataRaw, lang)
.then(({ is_admin }) => {
if (!is_admin) {
setAdminAccessDenied(true);
setAdminAccessDeniedDetail(null);
setAdminCheckComplete(false);
} else {
setAdminCheckComplete(true);
}
})
.catch(() => {
setAdminAccessDenied(true);
setAdminAccessDeniedDetail(null);
setAdminCheckComplete(false);
});
}, [isAllowed, initDataRaw, lang]);
const usersRequest = useAdminUsers({
isAllowed,
initDataRaw,
lang,
adminCheckComplete: access.adminCheckComplete,
onAccessDenied: handleAdminAccessDenied,
onError: request.setError,
});
useEffect(() => {
if (!isAllowed || !initDataRaw || adminCheckComplete !== true) return;
const controller = new AbortController();
setLoadingUsers(true);
fetchAdminUsers(initDataRaw, lang, controller.signal)
.then((list) => setUsers(list))
.catch((e) => {
if ((e as Error)?.name === "AbortError") return;
if (e instanceof AccessDeniedError) {
setAdminAccessDenied(true);
setAdminAccessDeniedDetail(e.serverDetail ?? null);
} else {
setError(e instanceof Error ? e.message : String(e));
}
})
.finally(() => setLoadingUsers(false));
return () => controller.abort();
}, [isAllowed, initDataRaw, lang, adminCheckComplete]);
const dutiesRequest = useAdminDuties({
isAllowed,
initDataRaw,
lang,
adminCheckComplete: access.adminCheckComplete,
adminMonth,
onError: request.setError,
clearError: request.reset,
});
useEffect(() => {
if (!isAllowed || !initDataRaw || adminCheckComplete !== true) return;
const controller = new AbortController();
setLoadingDuties(true);
setError(null);
fetchDuties(from, to, initDataRaw, lang, controller.signal)
.then((list) => setDuties(list))
.catch((e) => {
if ((e as Error)?.name === "AbortError") return;
setError(e instanceof Error ? e.message : String(e));
})
.finally(() => setLoadingDuties(false));
return () => controller.abort();
}, [isAllowed, initDataRaw, lang, from, to, adminCheckComplete]);
const reassign = useAdminReassign({
initDataRaw,
lang,
users: usersRequest.users,
setDuties: dutiesRequest.setDuties,
t,
});
useEffect(() => {
setVisibleCount(PAGE_SIZE);
}, [from, to]);
useTelegramClosingConfirmation(
ENABLE_CLOSING_CONFIRMATION_FOR_STATEFUL_ADMIN_FLOW && reassign.selectedDuty !== null
);
const closeReassign = useCallback(() => {
setSelectedDuty(null);
setSelectedUserId("");
setReassignErrorKey(null);
setSheetExiting(false);
}, []);
useEffect(() => {
if (!sheetExiting) return;
const fallback = window.setTimeout(() => {
closeReassign();
}, 320);
return () => window.clearTimeout(fallback);
}, [sheetExiting, closeReassign]);
const openReassign = useCallback((duty: DutyWithUser) => {
setSelectedDuty(duty);
setSelectedUserId(duty.user_id);
setReassignErrorKey(null);
}, []);
const requestCloseSheet = useCallback(() => {
setSheetExiting(true);
}, []);
const handleReassign = useCallback(() => {
if (!selectedDuty || selectedUserId === "" || !initDataRaw) return;
if (selectedUserId === selectedDuty.user_id) {
closeReassign();
return;
}
setSaving(true);
setReassignErrorKey(null);
patchAdminDuty(selectedDuty.id, selectedUserId, initDataRaw, lang)
.then((updated) => {
setDuties((prev) =>
prev.map((d) =>
d.id === updated.id
? {
...d,
user_id: updated.user_id,
full_name:
users.find((u) => u.id === updated.user_id)?.full_name ?? d.full_name,
}
: d
)
);
setSuccessMessage(t("admin.reassign_success"));
try {
triggerHapticLight();
} catch {
// Haptic not available (e.g. non-Telegram).
}
requestCloseSheet();
setTimeout(() => setSuccessMessage(null), 3000);
})
.catch((e) => {
if (e instanceof AccessDeniedError) {
setReassignErrorKey("admin.reassign_error_denied");
} else if (e instanceof Error && /not found|не найден/i.test(e.message)) {
setReassignErrorKey("admin.reassign_error_not_found");
} else if (
e instanceof TypeError ||
(e instanceof Error && (e.message === "Failed to fetch" || e.message === "Load failed"))
) {
setReassignErrorKey("admin.reassign_error_network");
} else {
setReassignErrorKey("admin.reassign_error_generic");
}
})
.finally(() => setSaving(false));
}, [selectedDuty, selectedUserId, initDataRaw, lang, users, closeReassign, requestCloseSheet, t]);
const now = new Date();
const dutyOnly = duties
.filter((d) => d.event_type === "duty" && new Date(d.end_at) > now)
.sort(
(a, b) =>
new Date(a.start_at).getTime() - new Date(b.start_at).getTime()
);
const usersForSelect = users.filter((u) => u.role_id === 1 || u.role_id === 2);
const visibleDuties = dutyOnly.slice(0, visibleCount);
const hasMore = visibleCount < dutyOnly.length;
const loading = loadingUsers || loadingDuties;
/** Group visible duties by date (dateKey) for sectioned list. Order preserved by insertion. */
const visibleGroups = (() => {
const map = new Map<string, DutyWithUser[]>();
for (const d of visibleDuties) {
const key = localDateString(new Date(d.start_at));
if (!map.has(key)) map.set(key, []);
map.get(key)!.push(d);
}
return Array.from(map.entries()).map(([dateKey, duties]) => ({ dateKey, duties }));
})();
useEffect(() => {
if (!hasMore || !sentinelRef.current) return;
const el = sentinelRef.current;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0]?.isIntersecting) {
setVisibleCount((prev) => Math.min(prev + PAGE_SIZE, dutyOnly.length));
}
},
{ root: null, rootMargin: "200px", threshold: 0 }
);
observer.observe(el);
return () => observer.disconnect();
}, [hasMore, dutyOnly.length]);
const list = useInfiniteDutyGroups(dutiesRequest.duties, dutiesRequest.from, dutiesRequest.to);
const usersForSelect = useMemo(
() => usersRequest.users.filter((u) => u.role_id === 1 || u.role_id === 2),
[usersRequest.users]
);
const error = request.state.error;
const loading = usersRequest.loadingUsers || dutiesRequest.loadingDuties;
return {
isAllowed,
adminCheckComplete,
adminAccessDenied,
adminAccessDeniedDetail,
adminCheckComplete: access.adminCheckComplete,
adminAccessDenied: access.adminAccessDenied,
adminAccessDeniedDetail: access.adminAccessDeniedDetail,
error,
loading,
adminMonth,
onPrevMonth,
onNextMonth,
successMessage,
dutyOnly,
successMessage: reassign.successMessage,
dutyOnly: list.dutyOnly,
usersForSelect,
visibleDuties,
visibleGroups,
hasMore,
sentinelRef,
selectedDuty,
selectedUserId,
setSelectedUserId,
saving,
reassignErrorKey,
sheetExiting,
openReassign,
requestCloseSheet,
handleReassign,
closeReassign,
visibleDuties: list.visibleDuties,
visibleGroups: list.visibleGroups,
hasMore: list.hasMore,
sentinelRef: list.sentinelRef,
selectedDuty: reassign.selectedDuty,
selectedUserId: reassign.selectedUserId,
setSelectedUserId: reassign.setSelectedUserId,
saving: reassign.saving,
reassignErrorKey: reassign.reassignErrorKey,
sheetExiting: reassign.sheetExiting,
openReassign: reassign.openReassign,
requestCloseSheet: reassign.requestCloseSheet,
handleReassign: reassign.handleReassign,
closeReassign: reassign.closeReassign,
};
}

4
webapp-next/src/components/calendar/CalendarGrid.tsx
View File

@@ -15,6 +15,7 @@ import type { CalendarEvent, DutyWithUser } from "@/types";
import { dutiesByDate, calendarEventsByDate } from "@/lib/calendar-data";
import { cn } from "@/lib/utils";
import { CalendarDay } from "./CalendarDay";
import { useTranslation } from "@/i18n/use-translation";
export interface CalendarGridProps {
/** Currently displayed month. */
@@ -37,6 +38,7 @@ export function CalendarGrid({
onDayClick,
className,
}: CalendarGridProps) {
const { t } = useTranslation();
const dutiesByDateMap = useMemo(
() => dutiesByDate(duties),
[duties]
@@ -67,7 +69,7 @@ export function CalendarGrid({
className
)}
role="grid"
aria-label="Calendar"
aria-label={t("aria.calendar")}
>
{cells.map(({ date, key, month }, i) => {
const isOtherMonth = month !== currentMonth.getMonth();

89
webapp-next/src/components/current-duty/CurrentDutyView.tsx
View File

@@ -8,7 +8,6 @@
"use client";
import { useEffect, useState, useCallback } from "react";
import { backButton, closeMiniApp } from "@telegram-apps/sdk-react";
import { Calendar } from "lucide-react";
import { useTranslation } from "@/i18n/use-translation";
import { useAppStore } from "@/store/app-store";
@@ -33,6 +32,9 @@ import {
import { Skeleton } from "@/components/ui/skeleton";
import { AccessDeniedScreen } from "@/components/states/AccessDeniedScreen";
import type { DutyWithUser } from "@/types";
import { useTelegramBackButton, useTelegramCloseAction } from "@/hooks/telegram";
import { useScreenReady } from "@/hooks/use-screen-ready";
import { useRequestState } from "@/hooks/use-request-state";
export interface CurrentDutyViewProps {
/** Called when user taps Back (in-app button or Telegram BackButton). */
@@ -41,25 +43,30 @@ export interface CurrentDutyViewProps {
openedFromPin?: boolean;
}
type ViewState = "loading" | "error" | "accessDenied" | "ready";
/**
* Full-screen current duty view with Telegram BackButton and auto-updating remaining time.
*/
export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyViewProps) {
const { t } = useTranslation();
const lang = useAppStore((s) => s.lang);
const setAppContentReady = useAppStore((s) => s.setAppContentReady);
const { initDataRaw } = useTelegramAuth();
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 {
state: requestState,
setLoading,
setSuccess,
setError,
setAccessDenied,
isLoading,
isError,
isAccessDenied,
} = useRequestState("loading");
const loadTodayDuties = useCallback(
async (signal?: AbortSignal | null) => {
setLoading();
const today = new Date();
const from = localDateString(today);
const to = from;
@@ -69,7 +76,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
if (signal?.aborted) return;
const active = findCurrentDuty(duties);
setDuty(active);
setState("ready");
setSuccess();
if (active) {
setRemaining(getRemainingTime(active.end_at));
} else {
@@ -78,19 +85,17 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
} catch (e) {
if (signal?.aborted) return;
if (e instanceof AccessDeniedError) {
setState("accessDenied");
setAccessDeniedDetail(e.serverDetail ?? null);
setAccessDenied(e.serverDetail ?? null);
setDuty(null);
setRemaining(null);
} else {
setState("error");
setErrorMessage(t("error_generic"));
setError(t("error_generic"));
setDuty(null);
setRemaining(null);
}
}
},
[initDataRaw, lang, t]
[initDataRaw, lang, t, setLoading, setSuccess, setAccessDenied, setError]
);
// Fetch today's duties on mount; abort on unmount to avoid setState after unmount.
@@ -100,12 +105,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
return () => controller.abort();
}, [loadTodayDuties]);
// Mark content ready when data is loaded or error, so page can call ready() and show content.
useEffect(() => {
if (state !== "loading") {
setAppContentReady(true);
}
}, [state, setAppContentReady]);
useScreenReady(!isLoading);
// Auto-update remaining time every second when there is an active duty.
useEffect(() => {
@@ -116,47 +116,21 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
return () => clearInterval(interval);
}, [duty]);
// Telegram BackButton: show on mount, hide on unmount, handle click.
useEffect(() => {
let offClick: (() => void) | undefined;
try {
if (backButton.mount.isAvailable()) {
backButton.mount();
}
if (backButton.show.isAvailable()) {
backButton.show();
}
if (backButton.onClick.isAvailable()) {
offClick = backButton.onClick(onBack);
}
} catch {
// Non-Telegram environment; BackButton not available.
}
return () => {
try {
if (typeof offClick === "function") offClick();
if (backButton.hide.isAvailable()) {
backButton.hide();
}
} catch {
// Ignore cleanup errors in non-Telegram environment.
}
};
}, [onBack]);
useTelegramBackButton({
enabled: true,
onClick: onBack,
});
const handleBack = () => {
triggerHapticLight();
onBack();
};
const closeMiniAppOrFallback = useTelegramCloseAction(onBack);
const handleClose = () => {
triggerHapticLight();
if (closeMiniApp.isAvailable()) {
closeMiniApp();
} else {
onBack();
}
closeMiniAppOrFallback();
};
const primaryButtonLabel = openedFromPin ? t("current_duty.close") : t("current_duty.back");
@@ -165,7 +139,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
: t("current_duty.back");
const handlePrimaryAction = openedFromPin ? handleClose : handleBack;
if (state === "loading") {
if (isLoading) {
return (
<div
className="flex min-h-[50vh] flex-col items-center justify-center gap-4"
@@ -203,10 +177,10 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
);
}
if (state === "accessDenied") {
if (isAccessDenied) {
return (
<AccessDeniedScreen
serverDetail={accessDeniedDetail}
serverDetail={requestState.accessDeniedDetail}
primaryAction="back"
onBack={handlePrimaryAction}
openedFromPin={openedFromPin}
@@ -214,17 +188,16 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
);
}
if (state === "error") {
if (isError) {
const handleRetry = () => {
triggerHapticLight();
setState("loading");
loadTodayDuties();
};
return (
<div className="flex min-h-[50vh] flex-col items-center justify-center gap-4">
<Card className="w-full max-w-[var(--max-width-app)]">
<CardContent className="pt-6">
<p className="text-error">{errorMessage}</p>
<p className="text-error">{requestState.error}</p>
</CardContent>
<CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
<Button

1
webapp-next/src/components/day-detail/DayDetail.tsx
View File

@@ -209,6 +209,7 @@ export const DayDetail = React.forwardRef<DayDetailHandle, DayDetailProps>(
)}
overlayClassName="backdrop-blur-md"
showCloseButton={false}
closeLabel={t("day_detail.close")}
onCloseAnimationEnd={handleClose}
onOpenAutoFocus={(e) => e.preventDefault()}
>

55
webapp-next/src/components/layout/MiniAppScreen.tsx Normal file
View File

@@ -0,0 +1,55 @@
/**
* Shared Mini App screen wrappers for safe-area aware pages.
* Keep route and fallback screens visually consistent and DRY.
*/
"use client";
import { cn } from "@/lib/utils";
import { forwardRef } from "react";
export interface MiniAppScreenProps {
children: React.ReactNode;
className?: string;
}
export interface MiniAppScreenContentProps {
children: React.ReactNode;
className?: string;
}
export interface MiniAppStickyHeaderProps {
children: React.ReactNode;
className?: string;
}
const BASE_SCREEN_CLASS = "content-safe min-h-[var(--tg-viewport-stable-height,100vh)] bg-background";
const BASE_CONTENT_CLASS = "mx-auto flex w-full max-w-[var(--max-width-app)] flex-col";
const BASE_STICKY_HEADER_CLASS = "sticky top-[var(--app-safe-top)] z-10 bg-background";
/**
* Top-level page shell with safe-area and stable viewport height.
*/
export function MiniAppScreen({ children, className }: MiniAppScreenProps) {
return <div className={cn(BASE_SCREEN_CLASS, className)}>{children}</div>;
}
/**
* Inner centered content constrained to app max width.
*/
export function MiniAppScreenContent({ children, className }: MiniAppScreenContentProps) {
return <div className={cn(BASE_CONTENT_CLASS, className)}>{children}</div>;
}
/**
* Sticky top section that respects Telegram safe top inset.
*/
export const MiniAppStickyHeader = forwardRef<HTMLDivElement, MiniAppStickyHeaderProps>(
function MiniAppStickyHeader({ children, className }, ref) {
return (
<div ref={ref} className={cn(BASE_STICKY_HEADER_CLASS, className)}>
{children}
</div>
);
}
);

17
webapp-next/src/components/states/FullScreenStateShell.tsx
View File

@@ -5,6 +5,8 @@
"use client";
import { MiniAppScreen, MiniAppScreenContent } from "@/components/layout/MiniAppScreen";
export interface FullScreenStateShellProps {
/** Main heading (e.g. "Access denied", "Page not found"). */
title: React.ReactNode;
@@ -20,10 +22,6 @@ export interface FullScreenStateShellProps {
className?: string;
}
const OUTER_CLASS =
"content-safe flex min-h-[var(--tg-viewport-stable-height,100vh)] flex-col items-center justify-center gap-4 bg-background text-foreground";
const INNER_CLASS = "mx-auto w-full max-w-[var(--max-width-app)] px-3 flex flex-col items-center gap-4";
/**
* Full-screen centered shell with title, optional description, and primary action.
* Use for access denied, not-found, and in-app error boundary screens.
@@ -37,11 +35,9 @@ export function FullScreenStateShell({
className,
}: FullScreenStateShellProps) {
return (
<div
className={className ? `${OUTER_CLASS} ${className}` : OUTER_CLASS}
role={role}
>
<div className={INNER_CLASS}>
<MiniAppScreen className={className}>
<MiniAppScreenContent className="items-center justify-center gap-4 px-3 text-foreground">
<div role={role} className="flex flex-col items-center gap-4">
<h1 className="text-xl font-semibold">{title}</h1>
{description != null && (
<p className="text-center text-muted-foreground">{description}</p>
@@ -49,6 +45,7 @@ export function FullScreenStateShell({
{children}
{primaryAction}
</div>
</div>
</MiniAppScreenContent>
</MiniAppScreen>
);
}

5
webapp-next/src/components/ui/sheet.tsx
View File

@@ -54,6 +54,7 @@ function SheetContent({
onCloseAnimationEnd,
onAnimationEnd,
overlayClassName,
closeLabel = "Close",
...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
side?: "top" | "right" | "bottom" | "left"
@@ -62,6 +63,8 @@ function SheetContent({
onCloseAnimationEnd?: () => void
/** Optional class name applied to the overlay (e.g. backdrop-blur-md). */
overlayClassName?: string
/** Accessible label for the close button text (sr-only). */
closeLabel?: string
}) {
const useForceMount = Boolean(onCloseAnimationEnd)
@@ -103,7 +106,7 @@ function SheetContent({
{showCloseButton && (
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
<XIcon className="size-4" />
<span className="sr-only">Close</span>
<span className="sr-only">{closeLabel}</span>
</SheetPrimitive.Close>
)}
</SheetPrimitive.Content>

4
webapp-next/src/hooks/telegram/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export * from "./use-telegram-back-button";
export * from "./use-telegram-settings-button";
export * from "./use-telegram-close-action";
export * from "./use-telegram-interaction-policy";

44
webapp-next/src/hooks/telegram/use-telegram-back-button.ts Normal file
View File

@@ -0,0 +1,44 @@
/**
* Telegram BackButton adapter.
* Keeps SDK calls out of feature components.
*/
"use client";
import { useEffect } from "react";
import { backButton } from "@telegram-apps/sdk-react";
export interface UseTelegramBackButtonOptions {
enabled: boolean;
onClick: () => void;
}
export function useTelegramBackButton({ enabled, onClick }: UseTelegramBackButtonOptions) {
useEffect(() => {
if (!enabled) return;
let offClick: (() => void) | undefined;
try {
if (backButton.mount.isAvailable()) {
backButton.mount();
}
if (backButton.show.isAvailable()) {
backButton.show();
}
if (backButton.onClick.isAvailable()) {
offClick = backButton.onClick(onClick);
}
} catch {
// Non-Telegram environment; ignore.
}
return () => {
try {
if (typeof offClick === "function") offClick();
if (backButton.hide.isAvailable()) {
backButton.hide();
}
} catch {
// Ignore cleanup errors in non-Telegram environment.
}
};
}, [enabled, onClick]);
}

19
webapp-next/src/hooks/telegram/use-telegram-close-action.ts Normal file
View File

@@ -0,0 +1,19 @@
/**
* Telegram close adapter.
* Provides one place to prefer Mini App close and fallback safely.
*/
"use client";
import { useCallback } from "react";
import { closeMiniApp } from "@telegram-apps/sdk-react";
export function useTelegramCloseAction(onFallback: () => void) {
return useCallback(() => {
if (closeMiniApp.isAvailable()) {
closeMiniApp();
return;
}
onFallback();
}, [onFallback]);
}

80
webapp-next/src/hooks/telegram/use-telegram-interaction-policy.ts Normal file
View File

@@ -0,0 +1,80 @@
/**
* Telegram interaction policy hooks.
* Policy defaults: keep vertical swipes enabled; enable closing confirmation only
* for stateful flows where user input can be lost.
*/
"use client";
import { useEffect } from "react";
function getTelegramWebApp(): {
enableVerticalSwipes?: () => void;
disableVerticalSwipes?: () => void;
enableClosingConfirmation?: () => void;
disableClosingConfirmation?: () => void;
} | null {
if (typeof window === "undefined") return null;
return (window as unknown as { Telegram?: { WebApp?: unknown } }).Telegram
?.WebApp as {
enableVerticalSwipes?: () => void;
disableVerticalSwipes?: () => void;
enableClosingConfirmation?: () => void;
disableClosingConfirmation?: () => void;
} | null;
}
/**
* Keep Telegram vertical swipes enabled by default.
* Disable only for screens with conflicting in-app gestures.
*/
export function useTelegramVerticalSwipePolicy(disableVerticalSwipes: boolean) {
useEffect(() => {
const webApp = getTelegramWebApp();
if (!webApp) return;
try {
if (disableVerticalSwipes) {
webApp.disableVerticalSwipes?.();
} else {
webApp.enableVerticalSwipes?.();
}
} catch {
// Ignore unsupported clients.
}
return () => {
if (!disableVerticalSwipes) return;
try {
webApp.enableVerticalSwipes?.();
} catch {
// Ignore unsupported clients.
}
};
}, [disableVerticalSwipes]);
}
/**
* Enable confirmation before closing Mini App for stateful flows.
*/
export function useTelegramClosingConfirmation(enabled: boolean) {
useEffect(() => {
const webApp = getTelegramWebApp();
if (!webApp) return;
try {
if (enabled) {
webApp.enableClosingConfirmation?.();
} else {
webApp.disableClosingConfirmation?.();
}
} catch {
// Ignore unsupported clients.
}
return () => {
if (!enabled) return;
try {
webApp.disableClosingConfirmation?.();
} catch {
// Ignore unsupported clients.
}
};
}, [enabled]);
}

44
webapp-next/src/hooks/telegram/use-telegram-settings-button.ts Normal file
View File

@@ -0,0 +1,44 @@
/**
* Telegram SettingsButton adapter.
* Keeps SDK calls out of feature components.
*/
"use client";
import { useEffect } from "react";
import { settingsButton } from "@telegram-apps/sdk-react";
export interface UseTelegramSettingsButtonOptions {
enabled: boolean;
onClick: () => void;
}
export function useTelegramSettingsButton({ enabled, onClick }: UseTelegramSettingsButtonOptions) {
useEffect(() => {
if (!enabled) return;
let offClick: (() => void) | undefined;
try {
if (settingsButton.mount.isAvailable()) {
settingsButton.mount();
}
if (settingsButton.show.isAvailable()) {
settingsButton.show();
}
if (settingsButton.onClick.isAvailable()) {
offClick = settingsButton.onClick(onClick);
}
} catch {
// Non-Telegram environment; ignore.
}
return () => {
try {
if (typeof offClick === "function") offClick();
if (settingsButton.hide.isAvailable()) {
settingsButton.hide();
}
} catch {
// Ignore cleanup errors in non-Telegram environment.
}
};
}, [enabled, onClick]);
}

56
webapp-next/src/hooks/use-request-state.ts Normal file
View File

@@ -0,0 +1,56 @@
/**
* Shared request-state model for async flows.
*/
"use client";
import { useCallback, useMemo, useState } from "react";
export type RequestPhase = "idle" | "loading" | "success" | "error" | "accessDenied";
export interface RequestState {
phase: RequestPhase;
error: string | null;
accessDeniedDetail: string | null;
}
export function useRequestState(initialPhase: RequestPhase = "idle") {
const [state, setState] = useState<RequestState>({
phase: initialPhase,
error: null,
accessDeniedDetail: null,
});
const setLoading = useCallback(() => {
setState({ phase: "loading", error: null, accessDeniedDetail: null });
}, []);
const setSuccess = useCallback(() => {
setState({ phase: "success", error: null, accessDeniedDetail: null });
}, []);
const setError = useCallback((error: string) => {
setState({ phase: "error", error, accessDeniedDetail: null });
}, []);
const setAccessDenied = useCallback((detail: string | null = null) => {
setState({ phase: "accessDenied", error: null, accessDeniedDetail: detail });
}, []);
const reset = useCallback((phase: RequestPhase = "idle") => {
setState({ phase, error: null, accessDeniedDetail: null });
}, []);
const flags = useMemo(
() => ({
isIdle: state.phase === "idle",
isLoading: state.phase === "loading",
isSuccess: state.phase === "success",
isError: state.phase === "error",
isAccessDenied: state.phase === "accessDenied",
}),
[state.phase]
);
return { state, setLoading, setSuccess, setError, setAccessDenied, reset, ...flags };
}

20
webapp-next/src/hooks/use-screen-ready.ts Normal file
View File

@@ -0,0 +1,20 @@
/**
* Unified screen-readiness signal for ReadyGate.
* Marks app content as ready once when condition becomes true.
*/
"use client";
import { useEffect, useRef } from "react";
import { useAppStore } from "@/store/app-store";
export function useScreenReady(ready: boolean) {
const setAppContentReady = useAppStore((s) => s.setAppContentReady);
const markedRef = useRef(false);
useEffect(() => {
if (!ready || markedRef.current) return;
markedRef.current = true;
setAppContentReady(true);
}, [ready, setAppContentReady]);
}

2
webapp-next/src/i18n/messages.ts
View File

@@ -38,6 +38,7 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
"aria.duty": "On duty",
"aria.unavailable": "Unavailable",
"aria.vacation": "Vacation",
"aria.calendar": "Calendar",
"aria.day_info": "Day info",
"event_type.duty": "Duty",
"event_type.unavailable": "Unavailable",
@@ -136,6 +137,7 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
"aria.duty": "Дежурные",
"aria.unavailable": "Недоступен",
"aria.vacation": "Отпуск",
"aria.calendar": "Календарь",
"aria.day_info": "Информация о дне",
"event_type.duty": "Дежурство",
"event_type.unavailable": "Недоступен",

16
webapp-next/src/lib/telegram-interaction-policy.ts Normal file
View File

@@ -0,0 +1,16 @@
/**
* Telegram interaction policy for Mini App behavior.
* Keep this as a single source of truth for platform UX decisions.
*/
/**
* Keep vertical swipes enabled unless a specific screen has a hard conflict
* with Telegram swipe-to-minimize behavior.
*/
export const DISABLE_VERTICAL_SWIPES_BY_DEFAULT = false;
/**
* Show closing confirmation only for stateful flows where user choices can be
* lost by accidental close/minimize.
*/
export const ENABLE_CLOSING_CONFIRMATION_FOR_STATEFUL_ADMIN_FLOW = true;

93
webapp-next/src/store/app-store.ts
View File

@@ -4,97 +4,38 @@
*/
import { create } from "zustand";
import type { DutyWithUser, CalendarEvent } from "@/types";
import { getStartParamFromUrl } from "@/lib/launch-params";
import type { CalendarSlice } from "@/store/slices/calendar-slice";
import { createCalendarSlice } from "@/store/slices/calendar-slice";
import type { SessionSlice } from "@/store/slices/session-slice";
import { createSessionSlice } from "@/store/slices/session-slice";
import type { ViewSlice } from "@/store/slices/view-slice";
import { createViewSlice } from "@/store/slices/view-slice";
export type CurrentView = "calendar" | "currentDuty";
/** YYYY-MM key for the month that duties/calendarEvents belong to; null when none loaded. */
export type DataForMonthKey = string | null;
export interface AppState {
type AppStatePatch = Partial<{
currentMonth: Date;
/** When set, we are loading this month; currentMonth and data stay until load completes. */
pendingMonth: Date | null;
lang: "ru" | "en";
duties: DutyWithUser[];
calendarEvents: CalendarEvent[];
/** YYYY-MM: duties and calendarEvents are for this month; null when loading or no data. */
dataForMonthKey: DataForMonthKey;
duties: CalendarSlice["duties"];
calendarEvents: CalendarSlice["calendarEvents"];
dataForMonthKey: CalendarSlice["dataForMonthKey"];
loading: boolean;
error: string | null;
accessDenied: boolean;
/** Server detail from API 403 response; shown in AccessDeniedScreen. */
accessDeniedDetail: string | null;
currentView: CurrentView;
currentView: ViewSlice["currentView"];
selectedDay: string | null;
/** True when the first visible screen has finished loading; used to hide content until ready(). */
appContentReady: boolean;
/** True when GET /api/admin/me returned is_admin: true; used to show Admin link. */
isAdmin: boolean;
}>;
setCurrentMonth: (d: Date) => void;
nextMonth: () => void;
prevMonth: () => void;
setDuties: (d: DutyWithUser[]) => void;
setCalendarEvents: (e: CalendarEvent[]) => void;
setLoading: (v: boolean) => void;
setError: (msg: string | null) => void;
setAccessDenied: (v: boolean) => void;
setAccessDeniedDetail: (v: string | null) => void;
setLang: (v: "ru" | "en") => void;
setCurrentView: (v: CurrentView) => void;
setSelectedDay: (key: string | null) => void;
setAppContentReady: (v: boolean) => void;
setIsAdmin: (v: boolean) => void;
export interface AppState extends SessionSlice, CalendarSlice, ViewSlice {
/** Batch multiple state updates into a single re-render. */
batchUpdate: (partial: Partial<Pick<AppState, "currentMonth" | "pendingMonth" | "lang" | "duties" | "calendarEvents" | "dataForMonthKey" | "loading" | "error" | "accessDenied" | "accessDeniedDetail" | "currentView" | "selectedDay" | "appContentReady" | "isAdmin">>) => void;
}
const now = new Date();
const initialMonth = new Date(now.getFullYear(), now.getMonth(), 1);
/** Initial view: currentDuty when opened via deep link (startParam=duty), else calendar. */
function getInitialView(): CurrentView {
if (typeof window === "undefined") return "calendar";
return getStartParamFromUrl() === "duty" ? "currentDuty" : "calendar";
batchUpdate: (partial: AppStatePatch) => void;
}
export const useAppStore = create<AppState>((set) => ({
currentMonth: initialMonth,
pendingMonth: null,
lang: "en",
duties: [],
calendarEvents: [],
dataForMonthKey: null,
loading: false,
error: null,
accessDenied: false,
accessDeniedDetail: null,
currentView: getInitialView(),
selectedDay: null,
appContentReady: false,
isAdmin: false,
setCurrentMonth: (d) => set({ currentMonth: d }),
nextMonth: () =>
set((s) => ({
pendingMonth: new Date(s.currentMonth.getFullYear(), s.currentMonth.getMonth() + 1, 1),
})),
prevMonth: () =>
set((s) => ({
pendingMonth: new Date(s.currentMonth.getFullYear(), s.currentMonth.getMonth() - 1, 1),
})),
setDuties: (d) => set({ duties: d }),
setCalendarEvents: (e) => set({ calendarEvents: e }),
setLoading: (v) => set({ loading: v }),
setError: (msg) => set({ error: msg }),
setAccessDenied: (v) => set({ accessDenied: v }),
setAccessDeniedDetail: (v) => set({ accessDeniedDetail: v }),
setLang: (v) => set({ lang: v }),
setCurrentView: (v) => set({ currentView: v }),
setSelectedDay: (key) => set({ selectedDay: key }),
setAppContentReady: (v) => set({ appContentReady: v }),
setIsAdmin: (v) => set({ isAdmin: v }),
...createSessionSlice(set),
...createCalendarSlice(set),
...createViewSlice(set),
batchUpdate: (partial) => set(partial),
}));

24
webapp-next/src/store/selectors.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { AppState } from "@/store/app-store";
export const sessionSelectors = {
lang: (s: AppState) => s.lang,
appContentReady: (s: AppState) => s.appContentReady,
isAdmin: (s: AppState) => s.isAdmin,
};
export const calendarSelectors = {
currentMonth: (s: AppState) => s.currentMonth,
pendingMonth: (s: AppState) => s.pendingMonth,
duties: (s: AppState) => s.duties,
calendarEvents: (s: AppState) => s.calendarEvents,
dataForMonthKey: (s: AppState) => s.dataForMonthKey,
selectedDay: (s: AppState) => s.selectedDay,
};
export const viewSelectors = {
loading: (s: AppState) => s.loading,
error: (s: AppState) => s.error,
accessDenied: (s: AppState) => s.accessDenied,
accessDeniedDetail: (s: AppState) => s.accessDeniedDetail,
currentView: (s: AppState) => s.currentView,
};

41
webapp-next/src/store/slices/calendar-slice.ts Normal file
View File

@@ -0,0 +1,41 @@
import type { CalendarEvent, DutyWithUser } from "@/types";
import type { DataForMonthKey } from "@/store/types";
export interface CalendarSlice {
currentMonth: Date;
/** When set, we are loading this month; currentMonth and data stay until load completes. */
pendingMonth: Date | null;
duties: DutyWithUser[];
calendarEvents: CalendarEvent[];
/** YYYY-MM: duties and calendarEvents are for this month; null when loading or no data. */
dataForMonthKey: DataForMonthKey;
setCurrentMonth: (d: Date) => void;
nextMonth: () => void;
prevMonth: () => void;
setDuties: (d: DutyWithUser[]) => void;
setCalendarEvents: (e: CalendarEvent[]) => void;
}
const now = new Date();
const initialMonth = new Date(now.getFullYear(), now.getMonth(), 1);
type CalendarSet = (updater: Partial<CalendarSlice> | ((state: CalendarSlice) => Partial<CalendarSlice>)) => void;
export const createCalendarSlice = (set: CalendarSet): CalendarSlice => ({
currentMonth: initialMonth,
pendingMonth: null,
duties: [],
calendarEvents: [],
dataForMonthKey: null,
setCurrentMonth: (d) => set({ currentMonth: d }),
nextMonth: () =>
set((s) => ({
pendingMonth: new Date(s.currentMonth.getFullYear(), s.currentMonth.getMonth() + 1, 1),
})),
prevMonth: () =>
set((s) => ({
pendingMonth: new Date(s.currentMonth.getFullYear(), s.currentMonth.getMonth() - 1, 1),
})),
setDuties: (d) => set({ duties: d }),
setCalendarEvents: (e) => set({ calendarEvents: e }),
});

21
webapp-next/src/store/slices/session-slice.ts Normal file
View File

@@ -0,0 +1,21 @@
export interface SessionSlice {
lang: "ru" | "en";
/** True when the first visible screen has finished loading; used to hide content until ready(). */
appContentReady: boolean;
/** True when GET /api/admin/me returned is_admin: true; used to show Admin link. */
isAdmin: boolean;
setLang: (v: "ru" | "en") => void;
setAppContentReady: (v: boolean) => void;
setIsAdmin: (v: boolean) => void;
}
type SessionSet = (updater: Partial<SessionSlice> | ((state: SessionSlice) => Partial<SessionSlice>)) => void;
export const createSessionSlice = (set: SessionSet): SessionSlice => ({
lang: "en",
appContentReady: false,
isAdmin: false,
setLang: (v) => set({ lang: v }),
setAppContentReady: (v) => set({ appContentReady: v }),
setIsAdmin: (v) => set({ isAdmin: v }),
});

41
webapp-next/src/store/slices/view-slice.ts Normal file
View File

@@ -0,0 +1,41 @@
import { getStartParamFromUrl } from "@/lib/launch-params";
import type { CurrentView } from "@/store/types";
export interface ViewSlice {
loading: boolean;
error: string | null;
accessDenied: boolean;
/** Server detail from API 403 response; shown in AccessDeniedScreen. */
accessDeniedDetail: string | null;
currentView: CurrentView;
selectedDay: string | null;
setLoading: (v: boolean) => void;
setError: (msg: string | null) => void;
setAccessDenied: (v: boolean) => void;
setAccessDeniedDetail: (v: string | null) => void;
setCurrentView: (v: CurrentView) => void;
setSelectedDay: (key: string | null) => void;
}
/** Initial view: currentDuty when opened via deep link (startParam=duty), else calendar. */
function getInitialView(): CurrentView {
if (typeof window === "undefined") return "calendar";
return getStartParamFromUrl() === "duty" ? "currentDuty" : "calendar";
}
type ViewSet = (updater: Partial<ViewSlice> | ((state: ViewSlice) => Partial<ViewSlice>)) => void;
export const createViewSlice = (set: ViewSet): ViewSlice => ({
loading: false,
error: null,
accessDenied: false,
accessDeniedDetail: null,
currentView: getInitialView(),
selectedDay: null,
setLoading: (v) => set({ loading: v }),
setError: (msg) => set({ error: msg }),
setAccessDenied: (v) => set({ accessDenied: v }),
setAccessDeniedDetail: (v) => set({ accessDeniedDetail: v }),
setCurrentView: (v) => set({ currentView: v }),
setSelectedDay: (key) => set({ selectedDay: key }),
});

4
webapp-next/src/store/types.ts Normal file
View File

@@ -0,0 +1,4 @@
export type CurrentView = "calendar" | "currentDuty";
/** YYYY-MM key for the month that duties/calendarEvents belong to; null when none loaded. */
export type DataForMonthKey = string | null;