feat: Refactored channel header into grouped control sections (Monitori…

- "src/frontend/src/pages/ChannelDetail.tsx"

GSD-Task: S03/T02

src/frontend/src/pages/ChannelDetail.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import {
   ArrowLeft,
@@ -7,6 +7,7 @@ import {
   CheckCircle,
   ChevronDown,
   ChevronRight,
+  ChevronUp,
   Download,
   ExternalLink,
   Film,
@@ -17,7 +18,6 @@ import {
   Music,
   RefreshCw,
   Save,
-  Search,
   Trash2,
 } from 'lucide-react';
 import { useChannel, useUpdateChannel, useDeleteChannel, useScanChannel, useSetMonitoringMode, useScanStatus } from '../api/hooks/useChannels';
@@ -151,6 +151,24 @@ export function ChannelDetail() {
   const [checkIntervalSaved, setCheckIntervalSaved] = useState(false);
   const { toast } = useToast();
 
+  // ── Collapsible header ──
+  const headerRef = useRef<HTMLDivElement>(null);
+  const [isHeaderCollapsed, setIsHeaderCollapsed] = useState(false);
+
+  useEffect(() => {
+    const el = headerRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // Collapse when the header is mostly out of view
+        setIsHeaderCollapsed(!entry.isIntersecting);
+      },
+      { threshold: 0, rootMargin: '-60px 0px 0px 0px' },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   // Sync local check interval from channel data
   useEffect(() => {
     if (channel?.checkInterval != null) {
@@ -774,21 +792,130 @@ export function ChannelDetail() {
         <ArrowLeft size={14} /> Back to Channels
       </Link>
 
-      {/* Channel header */}
+      {/* Compact sticky bar — visible when full header scrolls out of view */}
       <div
         style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 100,
+          transform: isHeaderCollapsed ? 'translateY(0)' : 'translateY(-100%)',
+          opacity: isHeaderCollapsed ? 1 : 0,
+          pointerEvents: isHeaderCollapsed ? 'auto' : 'none',
+          transition: 'transform 0.25s ease, opacity 0.2s ease',
           display: 'flex',
-          gap: 'var(--space-5)',
+          alignItems: 'center',
+          gap: 'var(--space-3)',
+          padding: 'var(--space-2) var(--space-4)',
+          backgroundColor: 'var(--bg-card)',
+          borderBottom: '1px solid var(--border)',
+          boxShadow: isHeaderCollapsed ? '0 2px 8px rgba(0,0,0,0.15)' : 'none',
+          flexWrap: 'wrap',
+        }}
+        aria-hidden={!isHeaderCollapsed}
+      >
+        {/* Identity — compact */}
+        <img
+          src={
+            channel.imageUrl ||
+            `https://ui-avatars.com/api/?name=${encodeURIComponent(channel.name)}&background=242731&color=e1e2e6&size=32`
+          }
+          alt=""
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: '50%',
+            objectFit: 'cover',
+            backgroundColor: 'var(--bg-hover)',
+            flexShrink: 0,
+          }}
+        />
+        <span style={{ fontWeight: 600, fontSize: 'var(--font-size-sm)', color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>
+          {channel.name}
+        </span>
+        <PlatformBadge platform={channel.platform} />
+
+        <div style={{ width: 1, height: 20, backgroundColor: 'var(--border)', flexShrink: 0 }} />
+
+        {/* Key actions — compact */}
+        <select
+          value={channel.monitoringMode}
+          onChange={handleMonitoringModeChange}
+          disabled={setMonitoringMode.isPending}
+          aria-label="Monitoring mode"
+          style={{ padding: '4px 8px', borderRadius: 'var(--radius-md)', fontSize: 'var(--font-size-xs)', minWidth: 110 }}
+        >
+          {MONITORING_MODE_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+
+        <button
+          onClick={handleScan}
+          disabled={scanChannel.isPending || scanInProgress}
+          title={scanInProgress ? 'Scan in progress…' : 'Refresh & Scan'}
+          className="btn btn-ghost"
+          style={{ padding: '4px 10px', fontSize: 'var(--font-size-xs)', opacity: (scanChannel.isPending || scanInProgress) ? 0.6 : 1 }}
+        >
+          {(scanChannel.isPending || scanInProgress) ? (
+            <Loader size={12} style={{ animation: 'spin 1s linear infinite' }} />
+          ) : (
+            <RefreshCw size={12} />
+          )}
+          {scanInProgress ? 'Scanning…' : 'Scan'}
+        </button>
+
+        <button
+          onClick={handleCollect}
+          disabled={collectMonitored.isPending}
+          title="Collect Monitored"
+          className="btn btn-ghost"
+          style={{ padding: '4px 10px', fontSize: 'var(--font-size-xs)', opacity: collectMonitored.isPending ? 0.6 : 1 }}
+        >
+          {collectMonitored.isPending ? (
+            <Loader size={12} style={{ animation: 'spin 1s linear infinite' }} />
+          ) : (
+            <Download size={12} />
+          )}
+          Collect
+        </button>
+
+        <div style={{ flex: 1 }} />
+
+        {/* Scroll-to-top to reveal full header */}
+        <button
+          onClick={() => headerRef.current?.scrollIntoView({ behavior: 'smooth' })}
+          title="Show full header"
+          aria-label="Expand header"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 28,
+            height: 28,
+            borderRadius: 'var(--radius-sm)',
+            color: 'var(--text-muted)',
+            cursor: 'pointer',
+            transition: 'color var(--transition-fast)',
+            flexShrink: 0,
+          }}
+        >
+          <ChevronUp size={16} />
+        </button>
+      </div>
+
+      {/* Full channel header — observed for collapse trigger */}
+      <div
+        ref={headerRef}
+        style={{
           padding: 'var(--space-5)',
           backgroundColor: 'var(--bg-card)',
           borderRadius: 'var(--radius-xl)',
           border: '1px solid var(--border)',
           marginBottom: 'var(--space-6)',
-          alignItems: 'flex-start',
-          flexWrap: 'wrap',
         }}
       >
-        {/* Avatar */}
+        {/* Identity row */}
+        <div style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', marginBottom: 'var(--space-5)' }}>
           <img
             src={
               channel.imageUrl ||
@@ -796,31 +923,21 @@ export function ChannelDetail() {
             }
             alt={`${channel.name} avatar`}
             style={{
-            width: 80,
+              width: 64,
-            height: 80,
+              height: 64,
               borderRadius: '50%',
               objectFit: 'cover',
               backgroundColor: 'var(--bg-hover)',
               flexShrink: 0,
             }}
           />
-
+          <div style={{ minWidth: 0, flex: 1 }}>
-        {/* Info */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
-        <div style={{ flex: 1, minWidth: 200 }}>
+              <h1 style={{ fontSize: 'var(--font-size-xl)', fontWeight: 600, color: 'var(--text-primary)', margin: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
-            <h1
-              style={{
-                fontSize: 'var(--font-size-2xl)',
-                fontWeight: 600,
-                color: 'var(--text-primary)',
-                margin: 0,
-              }}
-            >
                 {channel.name}
               </h1>
               <PlatformBadge platform={channel.platform} />
             </div>
-
             <a
               href={channel.url}
               target="_blank"
@@ -831,7 +948,7 @@ export function ChannelDetail() {
                 gap: 'var(--space-1)',
                 color: 'var(--text-secondary)',
                 fontSize: 'var(--font-size-sm)',
-              marginTop: 'var(--space-1)',
+                marginTop: 2,
                 maxWidth: '100%',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
@@ -839,63 +956,40 @@ export function ChannelDetail() {
               }}
               title={channel.url}
             >
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{channel.url}</span>
-              {channel.url}
-            </span>
               <ExternalLink size={12} style={{ flexShrink: 0 }} />
             </a>
+          </div>
+        </div>
 
-          {/* Actions row */}
+        {/* Control groups */}
         <div
           style={{
             display: 'flex',
-              alignItems: 'center',
+            alignItems: 'flex-end',
-              gap: 'var(--space-3)',
+            gap: 'var(--space-5)',
-              marginTop: 'var(--space-4)',
             flexWrap: 'wrap',
+            paddingTop: 'var(--space-4)',
+            borderTop: '1px solid var(--border)',
           }}
         >
-            {/* Monitoring mode dropdown */}
+          {/* Monitoring group */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+            <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+              Monitoring
+            </span>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
               <select
                 value={channel.monitoringMode}
                 onChange={handleMonitoringModeChange}
                 disabled={setMonitoringMode.isPending}
                 aria-label="Monitoring mode"
-              style={{
+                style={{ padding: 'var(--space-2) var(--space-3)', borderRadius: 'var(--radius-md)', fontSize: 'var(--font-size-sm)', minWidth: 130 }}
-                padding: 'var(--space-2) var(--space-3)',
-                borderRadius: 'var(--radius-md)',
-                fontSize: 'var(--font-size-sm)',
-                minWidth: 140,
-              }}
               >
                 {MONITORING_MODE_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
+                  <option key={opt.value} value={opt.value}>{opt.label}</option>
-                  {opt.label}
-                </option>
                 ))}
               </select>
-
-            {/* Format profile selector */}
-            <select
-              value={channel.formatProfileId ?? ''}
-              onChange={handleFormatProfileChange}
-              aria-label="Format profile"
-              style={{
-                padding: 'var(--space-2) var(--space-3)',
-                borderRadius: 'var(--radius-md)',
-                fontSize: 'var(--font-size-sm)',
-                minWidth: 140,
-              }}
-            >
-              <option value="">Default Profile</option>
-              {formatProfiles?.map((fp) => (
-                <option key={fp.id} value={fp.id}>
-                  {fp.name}
-                </option>
-              ))}
-            </select>
-
-            {/* Per-channel check interval */}
               <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-1)' }}>
                 <input
                   type="number"
@@ -905,8 +999,8 @@ export function ChannelDetail() {
                   aria-label="Check interval in minutes"
                   title="Check interval (minutes)"
                   style={{
-                  width: 64,
+                    width: 56,
-                  padding: 'var(--space-2) var(--space-2)',
+                    padding: 'var(--space-2)',
                     borderRadius: 'var(--radius-md)',
                     border: '1px solid var(--border)',
                     backgroundColor: 'var(--bg-main)',
@@ -960,8 +1054,33 @@ export function ChannelDetail() {
                   )}
                 </button>
               </div>
+            </div>
+          </div>
 
-            {/* Refresh & Scan button */}
+          {/* Format group */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+            <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+              Format
+            </span>
+            <select
+              value={channel.formatProfileId ?? ''}
+              onChange={handleFormatProfileChange}
+              aria-label="Format profile"
+              style={{ padding: 'var(--space-2) var(--space-3)', borderRadius: 'var(--radius-md)', fontSize: 'var(--font-size-sm)', minWidth: 140 }}
+            >
+              <option value="">Default Profile</option>
+              {formatProfiles?.map((fp) => (
+                <option key={fp.id} value={fp.id}>{fp.name}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Actions group */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+            <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+              Actions
+            </span>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
               <button
                 onClick={handleScan}
                 disabled={scanChannel.isPending || scanInProgress}
@@ -974,10 +1093,8 @@ export function ChannelDetail() {
                 ) : (
                   <RefreshCw size={14} />
                 )}
-              {scanInProgress ? 'Scanning…' : scanChannel.isPending ? 'Scanning…' : 'Refresh & Scan'}
+                {scanInProgress ? 'Scanning…' : scanChannel.isPending ? 'Scanning…' : 'Scan'}
               </button>
-
-            {/* Collect Monitored button */}
               <button
                 onClick={handleCollect}
                 disabled={collectMonitored.isPending}
@@ -988,12 +1105,10 @@ export function ChannelDetail() {
                 {collectMonitored.isPending ? (
                   <Loader size={14} style={{ animation: 'spin 1s linear infinite' }} />
                 ) : (
-                <Search size={14} />
+                  <Download size={14} />
                 )}
-              {collectMonitored.isPending ? 'Collecting...' : 'Collect Monitored'}
+                {collectMonitored.isPending ? 'Collecting…' : 'Collect'}
               </button>
-
-            {/* Refresh Playlists button (YouTube only) */}
               {isYouTube ? (
                 <button
                   onClick={handleRefreshPlaylists}
@@ -1007,15 +1122,17 @@ export function ChannelDetail() {
                   ) : (
                     <ListMusic size={14} />
                   )}
-                {refreshPlaylists.isPending ? 'Refreshing...' : 'Playlists'}
+                  {refreshPlaylists.isPending ? 'Refreshing…' : 'Playlists'}
                 </button>
               ) : null}
+            </div>
+          </div>
 
-            {/* Delete button */}
+          {/* Spacer + Delete */}
+          <div style={{ marginLeft: 'auto' }}>
             <button
               onClick={() => setShowDeleteConfirm(true)}
               className="btn btn-danger"
-              style={{ marginLeft: 'auto' }}
             >
               <Trash2 size={14} />
               Delete