From 7841b3b4e880af1efa81b7e85850e5d2a8c5de08 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 29 Apr 2026 00:52:29 +0200
Subject: [PATCH] refactor(epg): hairline dividers, en-dash time, single-line
 description
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Separation: replace 4px gap with hairline dividers via ::before, hidden
around the active and current-program rows so they read as a continuous
emphasized block. Title line-height 1.4 → 1.3 + letter-spacing -0.01em
to match channel-name. Time uses en-dash, 0.78rem (parity with summary
bar), token-driven --app-muted-color. Description clamped to one line —
full text remains one click away via the info icon.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Entire-Checkpoint: b0389ce441a1
---
 .../epg-list-item.component.html              |  4 +-
 .../epg-list-item.component.scss              |  4 +-
 .../src/lib/epg-list/epg-list.component.scss  | 46 +++++++++++++++----
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.html b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.html
index 0da51f9e1..3c2505781 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.html
+++ b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.html
@@ -1,7 +1,5 @@
 <span class="time"
-    >{{ (item.startTimestamp ? item.startTimestamp * 1000 : item.start) | date: 'HH:mm' }}
-    -
-    {{ (item.stopTimestamp ? item.stopTimestamp * 1000 : item.stop) | date: 'HH:mm' }}</span
+    >{{ (item.startTimestamp ? item.startTimestamp * 1000 : item.start) | date: 'HH:mm' }}–{{ (item.stopTimestamp ? item.stopTimestamp * 1000 : item.stop) | date: 'HH:mm' }}</span
 >
 @if (isLive) {
     <span class="live badge" [matTooltip]="'EPG.LIVE_NOW' | translate"
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
index 3439f4892..f28bc7235 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
+++ b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
@@ -7,13 +7,13 @@
 }
 
 .time {
-    font-size: 0.76rem;
+    font-size: 0.78rem;
     line-height: 1;
     font-weight: 600;
     letter-spacing: 0.02em;
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
-    opacity: 0.76;
+    color: var(--app-muted-color);
 }
 
 .badge {
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
index 4c23ddd3a..9fd1e8dc1 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
+++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
@@ -49,16 +49,16 @@
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 8px 8px 12px;
+    padding: 4px 8px 12px;
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 0;
 }
 
 .program-item {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 5px;
     padding: 10px 12px;
     border: 1px solid transparent;
     border-radius: 12px;
@@ -70,12 +70,32 @@
         color 0.15s ease;
     cursor: default;
 
+    & + .program-item {
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 12px;
+            right: 12px;
+            height: 1px;
+            background: var(--app-separator);
+            opacity: 0.5;
+        }
+    }
+
     &.current-program {
         background: color-mix(
             in srgb,
             var(--app-selection-color) 6%,
             transparent
         );
+
+        &::before,
+        & + .program-item::before {
+            display: none;
+        }
     }
 
     &.clickable {
@@ -83,6 +103,11 @@
 
         &:hover {
             background: color-mix(in srgb, currentColor 6%, transparent);
+
+            &::before,
+            & + .program-item::before {
+                display: none;
+            }
         }
 
         &.current-program:hover {
@@ -108,6 +133,11 @@
         .program-title {
             color: var(--app-selection-color);
         }
+
+        &::before,
+        & + .program-item::before {
+            display: none;
+        }
     }
 }
 
@@ -119,8 +149,9 @@
 
 .program-title {
     font-size: 0.94rem;
-    line-height: 1.4;
+    line-height: 1.3;
     font-weight: 600;
+    letter-spacing: -0.01em;
     text-wrap: balance;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -132,12 +163,11 @@
 .epg-item__description {
     font-size: 0.82rem;
     line-height: 1.4;
-    color: var(--app-muted-color);
+    color: var(--app-body-color);
     text-wrap: pretty;
-    display: -webkit-box;
     overflow: hidden;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .program-progress {