Paginate briefing cards and add video previews

frontend/src/pages/BriefingPage.tsx

@@ -6,6 +6,8 @@ import type { ArticleContent, NewsItem } from '../types'
 
 type Category = 'all' | 'official' | 'news' | 'video'
 
+const PAGE_SIZE = 16
+
 const CATEGORY_LABELS: Record<Category, string> = {
   all: 'All',
   official: 'Official',
@@ -34,6 +36,12 @@ function categoryOf(item: NewsItem): Category {
   return 'news'
 }
 
+function getYouTubeVideoId(url: string): string | null {
+  const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
+  const match = url.match(regExp)
+  return match && match[2].length === 11 ? match[2] : null
+}
+
 function CategoryTabs({
   active,
   counts,
@@ -116,7 +124,7 @@ function BriefingCard({
           <span className="bp-card-age">{timeAgo(item.published_at ?? item.fetched_at)}</span>
         </div>
         <h3 className="bp-card-title">{item.title}</h3>
-        {!isVideo && (item.og_description || item.summary) && (
+        {(item.og_description || item.summary) && (
           <p className="bp-card-desc">
             {stripHtml(item.og_description || item.summary || '')}
           </p>
@@ -153,13 +161,19 @@ function ReaderPanel({
       setArticle(null)
       return
     }
+    if (categoryOf(item) === 'video') {
+      setArticle(null)
+      setLoading(false)
+      setError(null)
+      return
+    }
     setLoading(true)
     setError(null)
     setArticle(null)
     fetchNewsArticle(item.url)
       .then((data) => { setArticle(data); setLoading(false) })
       .catch((err) => { setError(String(err)); setLoading(false) })
-  }, [item?.url])
+  }, [item?.url, item ? categoryOf(item) : ''])
 
   // Scroll panel to top when item changes
   useEffect(() => {
@@ -207,14 +221,27 @@ function ReaderPanel({
               </div>
             </div>
 
-            {(article?.image_url || item.og_image_url) && (
-              <div className="bp-reader-hero">
-                <img
-                  src={article?.image_url ?? item.og_image_url}
-                  alt=""
-                  loading="lazy"
-                />
+            {categoryOf(item) === 'video' ? (
+              <div className="bp-reader-video-container">
+                <iframe
+                  className="bp-reader-video-iframe"
+                  src={`https://www.youtube.com/embed/${getYouTubeVideoId(item.url)}?autoplay=1&rel=0`}
+                  title={item.title}
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowFullScreen
+                ></iframe>
               </div>
+            ) : (
+              (article?.image_url || item.og_image_url) && (
+                <div className="bp-reader-hero">
+                  <img
+                    src={article?.image_url ?? item.og_image_url}
+                    alt=""
+                    loading="lazy"
+                  />
+                </div>
+              )
             )}
 
             <div className="bp-reader-content">
@@ -225,6 +252,25 @@ function ReaderPanel({
                 <div className="bp-reader-byline mono">{article.byline}</div>
               )}
 
+              {categoryOf(item) === 'video' && (
+                <div className="bp-reader-video-desc">
+                  {(item.og_description || item.summary) && (
+                    <p className="bp-reader-fallback" style={{ marginBottom: '16px' }}>
+                      {stripHtml(item.og_description || item.summary || '')}
+                    </p>
+                  )}
+                  <a
+                    href={item.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bp-reader-ext-link"
+                    style={{ fontSize: '13px', fontWeight: 600 }}
+                  >
+                    Open in YouTube ↗
+                  </a>
+                </div>
+              )}
+
               {loading && (
                 <div className="bp-reader-loading">Loading article…</div>
               )}
@@ -286,6 +332,7 @@ function ReaderPanel({
 export function BriefingPage() {
   const [activeCategory, setActiveCategory] = useState<Category>('all')
   const [selectedItem, setSelectedItem] = useState<NewsItem | null>(null)
+  const [page, setPage] = useState(1)
   const queryClient = useQueryClient()
 
   const { data: allNews = [], isLoading, isError } = useQuery({
@@ -297,6 +344,10 @@ export function BriefingPage() {
   const filtered = allNews.filter(
     (item) => activeCategory === 'all' || categoryOf(item) === activeCategory,
   )
+  const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
+  const safePage = Math.min(page, pageCount)
+  const pageStart = (safePage - 1) * PAGE_SIZE
+  const pagedItems = filtered.slice(pageStart, pageStart + PAGE_SIZE)
 
   const counts: Record<Category, number> = {
     all: allNews.length,
@@ -323,7 +374,22 @@ export function BriefingPage() {
 
   const handleClose = useCallback(() => setSelectedItem(null), [])
 
+  useEffect(() => {
+    setPage((current) => Math.min(current, pageCount))
+  }, [pageCount])
+
+  const handlePageChange = useCallback(
+    (nextPage: number) => {
+      setPage(Math.min(Math.max(nextPage, 1), pageCount))
+      setSelectedItem(null)
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    },
+    [pageCount],
+  )
+
   const unreadCount = allNews.filter((i) => !i.read_at).length
+  const pageEnd = Math.min(pageStart + pagedItems.length, filtered.length)
+  const showPagination = filtered.length > PAGE_SIZE
 
   return (
     <div className="bp-page" data-testid="briefing-page">
@@ -342,7 +408,7 @@ export function BriefingPage() {
           <CategoryTabs
             active={activeCategory}
             counts={counts}
-            onChange={(c) => { setActiveCategory(c); setSelectedItem(null) }}
+            onChange={(c) => { setActiveCategory(c); setSelectedItem(null); setPage(1) }}
           />
 
           {filtered.length === 0 ? (
@@ -351,16 +417,67 @@ export function BriefingPage() {
               Run <code>box-box --ingest-news</code> to refresh feeds.
             </div>
           ) : (
-            <div className={`bp-grid${selectedItem ? ' bp-grid-narrow' : ''}`}>
-              {filtered.map((item) => (
-                <BriefingCard
-                  key={item.url}
-                  item={item}
-                  isActive={selectedItem?.url === item.url}
-                  onSelect={handleSelect}
-                />
-              ))}
-            </div>
+            <>
+              {showPagination && (
+                <div className="bp-pagination bp-pagination-top">
+                  <span className="bp-pagination-meta mono">
+                    {pageStart + 1}-{pageEnd} of {filtered.length}
+                  </span>
+                  <div className="bp-pagination-actions">
+                    <button
+                      className="bp-page-btn"
+                      onClick={() => handlePageChange(safePage - 1)}
+                      disabled={safePage === 1}
+                    >
+                      Previous
+                    </button>
+                    <span className="bp-page-current mono">
+                      Page {safePage} / {pageCount}
+                    </span>
+                    <button
+                      className="bp-page-btn"
+                      onClick={() => handlePageChange(safePage + 1)}
+                      disabled={safePage === pageCount}
+                    >
+                      Next
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              <div className={`bp-grid${selectedItem ? ' bp-grid-narrow' : ''}`}>
+                {pagedItems.map((item) => (
+                  <BriefingCard
+                    key={item.url}
+                    item={item}
+                    isActive={selectedItem?.url === item.url}
+                    onSelect={handleSelect}
+                  />
+                ))}
+              </div>
+
+              {showPagination && (
+                <div className="bp-pagination bp-pagination-bottom">
+                  <button
+                    className="bp-page-btn"
+                    onClick={() => handlePageChange(safePage - 1)}
+                    disabled={safePage === 1}
+                  >
+                    Previous
+                  </button>
+                  <span className="bp-page-current mono">
+                    Page {safePage} / {pageCount}
+                  </span>
+                  <button
+                    className="bp-page-btn"
+                    onClick={() => handlePageChange(safePage + 1)}
+                    disabled={safePage === pageCount}
+                  >
+                    Next
+                  </button>
+                </div>
+              )}
+            </>
           )}
         </>
       )}

frontend/src/styles/app.css

@@ -2455,22 +2455,76 @@ a { color: inherit; text-decoration: none; }
   border-radius: 2px;
 }
 
+.bp-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s4);
+}
+.bp-pagination-top {
+  margin-bottom: var(--s4);
+  padding-bottom: var(--s3);
+  border-bottom: 1px solid var(--border);
+}
+.bp-pagination-bottom {
+  justify-content: center;
+  margin-top: var(--s5);
+}
+.bp-pagination-meta,
+.bp-page-current {
+  font-size: 11px;
+  color: var(--text-3);
+  letter-spacing: 0.04em;
+}
+.bp-pagination-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+}
+.bp-page-btn {
+  min-width: 76px;
+  padding: var(--s2) var(--s4);
+  background: var(--surface);
+  border: 1px solid var(--border-2);
+  border-radius: 2px;
+  color: var(--text-2);
+  cursor: pointer;
+  font-size: 12px;
+}
+.bp-page-btn:hover:not(:disabled) {
+  color: var(--text);
+  background: var(--surface-h);
+}
+.bp-page-btn:disabled {
+  color: var(--text-3);
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
 /* Individual card */
 .bp-card {
   display: flex;
   flex-direction: column;
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 2px;
+  border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
-  transition: border-color 0.1s, background 0.1s;
+  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
   position: relative;
   user-select: none;
 }
-.bp-card:hover        { border-color: var(--border-2); background: var(--surface-h); }
-.bp-card.bp-card-active { border-color: var(--red); }
-.bp-card.bp-card-read  { opacity: 0.6; }
+.bp-card:hover {
+  border-color: var(--border-2);
+  background: var(--surface-h);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  transform: translateY(-2px);
+}
+.bp-card.bp-card-active {
+  border-color: var(--red);
+  box-shadow: 0 0 0 1px var(--red), 0 4px 20px rgba(225, 6, 0, 0.15);
+}
+.bp-card.bp-card-read { opacity: 0.5; }
 
 .bp-card-img-wrap {
   width: 100%;
@@ -2483,9 +2537,9 @@ a { color: inherit; text-decoration: none; }
   height: 100%;
   object-fit: cover;
   display: block;
-  transition: transform 0.2s;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.bp-card:hover .bp-card-img { transform: scale(1.02); }
+.bp-card:hover .bp-card-img { transform: scale(1.04); }
 
 .bp-card-img.bp-card-img-fallback,
 .bp-card-img-fallback {
@@ -2638,11 +2692,34 @@ a { color: inherit; text-decoration: none; }
 }
 .bp-reader-close:hover { color: var(--text); }
 
+.bp-reader-video-container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: #000;
+  position: relative;
+  border-bottom: 1px solid var(--border);
+}
+.bp-reader-video-iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
+.bp-reader-video-desc {
+  margin-bottom: var(--s5);
+  padding: var(--s4);
+  background: var(--surface-2);
+  border-left: 3px solid var(--red);
+  border-radius: 2px;
+}
+
 .bp-reader-hero {
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
 }
 .bp-reader-hero img {
   width: 100%;
@@ -2733,6 +2810,20 @@ a { color: inherit; text-decoration: none; }
 
 @media (max-width: 600px) {
   .bp-grid { grid-template-columns: 1fr; }
+  .bp-pagination {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .bp-pagination-actions,
+  .bp-pagination-bottom {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    width: 100%;
+  }
+  .bp-page-current {
+    align-self: center;
+    text-align: center;
+  }
   .bp-reader { width: 100vw; }
   .bp-reader-content { padding: var(--s5) var(--s5) var(--s7); }
 }