feat: migrate to Next.js for Mini App and enhance project structure
- Replaced the previous webapp with a new Mini App built using Next.js, improving performance and maintainability. - Updated the `.gitignore` to exclude Next.js build artifacts and node modules. - Revised documentation in `AGENTS.md`, `README.md`, and `architecture.md` to reflect the new Mini App structure and technology stack. - Enhanced Dockerfile to support the new build process for the Next.js application. - Updated CI workflow to build and test the Next.js application. - Added new configuration options for the Mini App, including `MINI_APP_SHORT_NAME` for improved deep linking. - Refactored frontend testing setup to accommodate the new structure and testing framework. - Removed legacy webapp files and dependencies to streamline the project.
This commit is contained in:
147
webapp-next/src/components/calendar/CalendarHeader.tsx
Normal file
147
webapp-next/src/components/calendar/CalendarHeader.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* Calendar header: month title, prev/next navigation, weekday labels.
|
||||
* Replaces the header from webapp index.html and calendar.js month title.
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useTranslation } from "@/i18n/use-translation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
ChevronLeft as ChevronLeftIcon,
|
||||
ChevronRight as ChevronRightIcon,
|
||||
RefreshCw as RefreshCwIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
export interface CalendarHeaderProps {
|
||||
/** Currently displayed month (used for title). */
|
||||
month: Date;
|
||||
/** Whether month navigation is disabled (e.g. during loading). */
|
||||
disabled?: boolean;
|
||||
/** When true, show a compact loading spinner next to the month title (e.g. while fetching new month). */
|
||||
isLoading?: boolean;
|
||||
/** When provided and displayed month is not the current month, show a "Today" control that calls this. */
|
||||
onGoToToday?: () => void;
|
||||
/** When provided, show a refresh icon that calls this (e.g. to refetch month data). */
|
||||
onRefresh?: () => void;
|
||||
onPrevMonth: () => void;
|
||||
onNextMonth: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const HeaderSpinner = () => (
|
||||
<span
|
||||
className="block size-4 shrink-0 rounded-full border-2 border-transparent border-t-accent motion-reduce:animate-none animate-spin"
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
||||
function isCurrentMonth(month: Date): boolean {
|
||||
const now = new Date();
|
||||
return (
|
||||
month.getFullYear() === now.getFullYear() &&
|
||||
month.getMonth() === now.getMonth()
|
||||
);
|
||||
}
|
||||
|
||||
export function CalendarHeader({
|
||||
month,
|
||||
disabled = false,
|
||||
isLoading = false,
|
||||
onGoToToday,
|
||||
onRefresh,
|
||||
onPrevMonth,
|
||||
onNextMonth,
|
||||
className,
|
||||
}: CalendarHeaderProps) {
|
||||
const { t, monthName, weekdayLabels } = useTranslation();
|
||||
const year = month.getFullYear();
|
||||
const monthIndex = month.getMonth();
|
||||
const labels = weekdayLabels();
|
||||
const showToday = Boolean(onGoToToday) && !isCurrentMonth(month);
|
||||
|
||||
return (
|
||||
<header className={cn("flex flex-col", className)}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
className="size-10 rounded-[10px] bg-surface text-accent hover:bg-[var(--surface-hover)] focus-visible:outline-accent active:scale-95 disabled:opacity-50"
|
||||
aria-label={t("nav.prev_month")}
|
||||
disabled={disabled}
|
||||
onClick={onPrevMonth}
|
||||
>
|
||||
<ChevronLeftIcon className="size-5" aria-hidden />
|
||||
</Button>
|
||||
<div className="flex flex-col items-center gap-0.5">
|
||||
<h1
|
||||
className="m-0 flex items-center justify-center gap-2 text-[1.1rem] font-semibold sm:text-[1.25rem]"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
>
|
||||
{monthName(monthIndex)} {year}
|
||||
{isLoading && (
|
||||
<span
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
aria-label={t("loading")}
|
||||
className="flex items-center"
|
||||
>
|
||||
<HeaderSpinner />
|
||||
</span>
|
||||
)}
|
||||
</h1>
|
||||
{showToday && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onGoToToday}
|
||||
disabled={disabled}
|
||||
className="text-[0.8rem] font-medium text-accent hover:underline focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:opacity-50"
|
||||
aria-label={t("nav.today")}
|
||||
>
|
||||
{t("nav.today")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{onRefresh && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
className="size-10 rounded-[10px] bg-surface text-accent hover:bg-[var(--surface-hover)] focus-visible:outline-accent active:scale-95 disabled:opacity-50"
|
||||
aria-label={t("nav.refresh")}
|
||||
disabled={disabled || isLoading}
|
||||
onClick={onRefresh}
|
||||
>
|
||||
<RefreshCwIcon
|
||||
className={cn("size-5", isLoading && "motion-reduce:animate-none animate-spin")}
|
||||
aria-hidden
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
className="size-10 rounded-[10px] bg-surface text-accent hover:bg-[var(--surface-hover)] focus-visible:outline-accent active:scale-95 disabled:opacity-50"
|
||||
aria-label={t("nav.next_month")}
|
||||
disabled={disabled}
|
||||
onClick={onNextMonth}
|
||||
>
|
||||
<ChevronRightIcon className="size-5" aria-hidden />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-0.5 mb-1.5 text-center text-[0.75rem] text-muted">
|
||||
{labels.map((label, i) => (
|
||||
<span key={i} aria-hidden>
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user