From 76bff6dc0504af8a970654698ad143a9268bd43e Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Fri, 6 Mar 2026 14:32:04 +0300
Subject: [PATCH] feat: enhance ReassignSheet component with dynamic title and
 improved accessibility

- Added logic to dynamically set the sheet title based on the selected duty date, improving user context.
- Updated the description to be visually hidden while maintaining accessibility for screen readers.
- Refactored user selection display to enhance clarity and organization, ensuring a better user experience.
---
 .../src/components/admin/ReassignSheet.tsx    | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/webapp-next/src/components/admin/ReassignSheet.tsx b/webapp-next/src/components/admin/ReassignSheet.tsx
index 506c044..0381f44 100644
--- a/webapp-next/src/components/admin/ReassignSheet.tsx
+++ b/webapp-next/src/components/admin/ReassignSheet.tsx
@@ -6,7 +6,7 @@
 
 import type { DutyWithUser } from "@/types";
 import type { UserForAdmin } from "@/lib/api";
-import { localDateString, formatHHMM } from "@/lib/date-utils";
+import { localDateString, formatHHMM, dateKeyToDDMM } from "@/lib/date-utils";
 import { Button } from "@/components/ui/button";
 import {
   Sheet,
@@ -56,6 +56,16 @@ export function ReassignSheet({
   onCloseAnimationEnd,
   t,
 }: ReassignSheetProps) {
+  const todayKey = localDateString(new Date());
+  const dateKey = selectedDuty
+    ? localDateString(new Date(selectedDuty.start_at))
+    : "";
+  const sheetTitle = selectedDuty
+    ? dateKey === todayKey
+      ? t("duty.today") + ", " + dateKeyToDDMM(dateKey)
+      : dateKeyToDDMM(dateKey)
+    : t("admin.reassign_duty");
+
   return (
     <Sheet open={open} onOpenChange={(isOpen) => !isOpen && onRequestClose()}>
       <SheetContent
@@ -96,13 +106,14 @@ export function ReassignSheet({
             aria-hidden
           />
           <SheetHeader className="p-0">
-            <SheetTitle>{t("admin.reassign_duty")}</SheetTitle>
-            <SheetDescription>{t("admin.select_user")}</SheetDescription>
+            <SheetTitle>{sheetTitle}</SheetTitle>
+            <SheetDescription className="sr-only">
+              {t("admin.select_user")}
+            </SheetDescription>
           </SheetHeader>
           {selectedDuty && (
             <div className="flex flex-col gap-4 pt-2 pb-4">
               <p className="text-sm text-muted-foreground">
-                {localDateString(new Date(selectedDuty.start_at))}{" "}
                 {formatHHMM(selectedDuty.start_at)} – {formatHHMM(selectedDuty.end_at)}
               </p>
               <p className="text-xs text-muted-foreground">
@@ -113,11 +124,15 @@ export function ReassignSheet({
                   {t("admin.no_users_for_assign")}
                 </p>
               ) : (
-                <div
-                  className="flex flex-col gap-1 max-h-[40vh] overflow-y-auto rounded-lg border border-border py-1"
-                  role="radiogroup"
-                  aria-label={t("admin.select_user")}
-                >
+                <div className="flex flex-col gap-1">
+                  <p className="text-sm text-muted-foreground">
+                    {t("admin.select_user")}
+                  </p>
+                  <div
+                    className="flex flex-col gap-1 max-h-[40vh] overflow-y-auto rounded-lg border border-border py-1"
+                    role="radiogroup"
+                    aria-label={t("admin.select_user")}
+                  >
                   {users.map((u) => {
                     const isCurrent = u.id === selectedDuty.user_id;
                     const isSelected = selectedUserId === u.id;
@@ -150,6 +165,7 @@ export function ReassignSheet({
                       </button>
                     );
                   })}
+                  </div>
                 </div>
               )}
               {reassignErrorKey && (