From 54f85a8f1418d424bd5a1cd455982a2e241961ff Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Tue, 3 Mar 2026 18:29:34 +0300
Subject: [PATCH] refactor: update DayDetail component and tests for clarity
 and functionality

- Revised unit tests for DayDetailContent to reflect changes in duty entry display, ensuring only time and name are shown without contact links.
- Updated styling in DayDetail component to enhance visual consistency with background color adjustments.
- Removed unused ContactLinks component from DayDetailContent to streamline the code and improve readability.
---
 .../src/components/day-detail/DayDetail.test.tsx       | 10 +++++-----
 webapp-next/src/components/day-detail/DayDetail.tsx    |  2 +-
 .../src/components/day-detail/DayDetailContent.tsx     | 10 +---------
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/webapp-next/src/components/day-detail/DayDetail.test.tsx b/webapp-next/src/components/day-detail/DayDetail.test.tsx
index fa58c66..e8bec94 100644
--- a/webapp-next/src/components/day-detail/DayDetail.test.tsx
+++ b/webapp-next/src/components/day-detail/DayDetail.test.tsx
@@ -1,5 +1,5 @@
 /**
- * Unit tests for DayDetailContent: sorts duties by start_at, includes contact info.
+ * Unit tests for DayDetailContent: sorts duties by start_at; duty entries show time and name only (no contact links).
  * Ported from webapp/js/dayDetail.test.js buildDayDetailContent.
  */
 
@@ -54,7 +54,7 @@ describe("DayDetailContent", () => {
     expect(ivanovPos).toBeLessThan(petrovPos);
   });
 
-  it("includes contact info (phone, username) for duty entries when present", () => {
+  it("shows duty time and name on one line and does not show contact links", () => {
     const dateKey = "2025-03-01";
     const duties = [
       duty("Alice", "2025-03-01T09:00:00Z", "2025-03-01T17:00:00Z", {
@@ -70,8 +70,8 @@ describe("DayDetailContent", () => {
       />
     );
     expect(screen.getByText("Alice")).toBeInTheDocument();
-    expect(document.querySelector('a[href^="tel:"]')).toBeInTheDocument();
-    expect(document.querySelector('a[href*="t.me"]')).toBeInTheDocument();
-    expect(screen.getByText(/alice_dev/)).toBeInTheDocument();
+    expect(document.querySelector('a[href^="tel:"]')).toBeNull();
+    expect(document.querySelector('a[href*="t.me"]')).toBeNull();
+    expect(screen.queryByText(/alice_dev/)).not.toBeInTheDocument();
   });
 });
diff --git a/webapp-next/src/components/day-detail/DayDetail.tsx b/webapp-next/src/components/day-detail/DayDetail.tsx
index 502daf3..568cf4b 100644
--- a/webapp-next/src/components/day-detail/DayDetail.tsx
+++ b/webapp-next/src/components/day-detail/DayDetail.tsx
@@ -204,7 +204,7 @@ export const DayDetail = React.forwardRef<DayDetailHandle, DayDetailProps>(
       <SheetContent
         side="bottom"
         className={cn(
-          "rounded-t-2xl pt-3 pb-[calc(24px+env(safe-area-inset-bottom,0px))] max-h-[70vh]",
+          "rounded-t-2xl pt-3 pb-[calc(24px+env(safe-area-inset-bottom,0px))] max-h-[70vh] bg-[var(--surface)]",
           className
         )}
         showCloseButton={false}
diff --git a/webapp-next/src/components/day-detail/DayDetailContent.tsx b/webapp-next/src/components/day-detail/DayDetailContent.tsx
index ff8be82..0b9390b 100644
--- a/webapp-next/src/components/day-detail/DayDetailContent.tsx
+++ b/webapp-next/src/components/day-detail/DayDetailContent.tsx
@@ -9,7 +9,6 @@ import { useMemo } from "react";
 import { useTranslation } from "@/i18n/use-translation";
 import { localDateString, dateKeyToDDMM } from "@/lib/date-utils";
 import { getDutyMarkerRows } from "@/lib/duty-marker-rows";
-import { ContactLinks } from "@/components/contact";
 import type { DutyWithUser } from "@/types";
 import { cn } from "@/lib/utils";
 
@@ -113,20 +112,13 @@ export function DayDetailContent({
             >
               {t("event_type.duty")}
             </h3>
-            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-2.5 [&_li]:flex [&_li]:flex-col [&_li]:gap-1">
+            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-1">
               {dutyRows.map((r) => (
                 <li key={r.id}>
                   {r.timePrefix && (
                     <span className="text-muted-foreground">{r.timePrefix} — </span>
                   )}
                   <span className="font-semibold">{r.fullName}</span>
-                  <ContactLinks
-                    phone={r.phone}
-                    username={r.username}
-                    layout="inline"
-                    showLabels={true}
-                    className="text-[0.85rem] mt-0.5"
-                  />
                 </li>
               ))}
             </ul>