From a532a8d851726cc240162a28bb2af98c3614c70a Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Thu, 30 Apr 2026 19:28:07 +0200
Subject: [PATCH] refactor: remove duplicate header labels on backlog page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both the product H1 + description in the page header and the
"Product Backlog" panel-title in the PBI panel duplicated info
already visible in the NavBar. Removed both, keeping the right-aligned
action bars (activate/sprint/settings, plus filters/+PBI) intact.

PanelNavBar component is unchanged — Stories and Taken panels keep
their titles.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/(app)/products/[id]/page.tsx |  10 +-
 components/backlog/pbi-list.tsx  | 158 +++++++++++++++----------------
 2 files changed, 78 insertions(+), 90 deletions(-)

diff --git a/app/(app)/products/[id]/page.tsx b/app/(app)/products/[id]/page.tsx
index 647d8c6..85519dd 100644
--- a/app/(app)/products/[id]/page.tsx
+++ b/app/(app)/products/[id]/page.tsx
@@ -92,14 +92,8 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
 
   return (
     <div className="flex flex-col h-full">
-      {/* Product header */}
-      <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-between">
-        <div>
-          <h1 className="font-medium text-foreground">{product.name}</h1>
-          {product.description && (
-            <p className="text-xs text-muted-foreground mt-0.5">{product.description}</p>
-          )}
-        </div>
+      {/* Product header — actions only; product-naam zit al in NavBar */}
+      <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-end">
         <div className="flex items-center gap-3">
           {user?.active_product_id !== id && (
             <ActivateProductButton productId={id} isDemo={isDemo} redirectTo={`/products/${id}`} />
diff --git a/components/backlog/pbi-list.tsx b/components/backlog/pbi-list.tsx
index 8f79138..3995102 100644
--- a/components/backlog/pbi-list.tsx
+++ b/components/backlog/pbi-list.tsx
@@ -24,7 +24,6 @@ import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { PanelNavBar } from '@/components/shared/panel-nav-bar'
 import { useSelectionStore } from '@/stores/selection-store'
 import { usePlannerStore } from '@/stores/planner-store'
 import { useBacklogStore } from '@/stores/backlog-store'
@@ -330,92 +329,87 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
 
   return (
     <div className="flex flex-col h-full">
-      <PanelNavBar
-        title="Product Backlog"
-        actions={
-          <>
-            {filterPriority !== 'all' && (
-              <button
-                onClick={() => setFilterPriority('all')}
-                className="flex items-center gap-1 text-xs text-primary hover:underline"
-                aria-label="Wis prioriteitsfilter"
-              >
-                <Badge className={cn('text-xs', PRIORITY_COLORS[filterPriority])}>
-                  {PRIORITY_LABELS[filterPriority]}
-                </Badge>
-                <span>×</span>
-              </button>
-            )}
-            {filterStatus !== 'all' && (
-              <button
-                onClick={() => setFilterStatus('all')}
-                className="flex items-center gap-1 text-xs text-primary hover:underline"
-                aria-label="Wis statusfilter"
-              >
-                <Badge className={cn('text-xs', PBI_STATUS_COLORS[filterStatus])}>
-                  {PBI_STATUS_LABELS[filterStatus]}
-                </Badge>
-                <span>×</span>
-              </button>
-            )}
-            <Popover>
-              <PopoverTrigger
-                render={
-                  <Button variant="outline" size="sm" className="h-7 text-xs">
-                    {`Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}`}
-                  </Button>
-                }
-              />
-              <PopoverContent align="end" className="w-72 space-y-4">
-                <FilterPills
-                  label="Sorteren op"
-                  options={SORT_OPTIONS}
-                  value={sortMode}
-                  onChange={setSortMode}
-                />
-                <FilterPills
-                  label="Prioriteit"
-                  options={PRIORITY_OPTIONS}
-                  value={filterPriority}
-                  onChange={setFilterPriority}
-                />
-                <FilterPills
-                  label="Status"
-                  options={STATUS_OPTIONS}
-                  value={filterStatus}
-                  onChange={setFilterStatus}
-                />
-                <div className="flex justify-end pt-1 border-t border-border">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 text-xs"
-                    disabled={activeFilterCount === 0}
-                    onClick={() => {
-                      setFilterPriority('all')
-                      setFilterStatus('all')
-                      setSortMode('priority')
-                    }}
-                  >
-                    Wis filters
-                  </Button>
-                </div>
-              </PopoverContent>
-            </Popover>
-            <DemoTooltip show={isDemo}>
+      <div className="flex items-center justify-end gap-2 px-4 py-2 border-b border-border bg-surface-container-low shrink-0">
+        {filterPriority !== 'all' && (
+          <button
+            onClick={() => setFilterPriority('all')}
+            className="flex items-center gap-1 text-xs text-primary hover:underline"
+            aria-label="Wis prioriteitsfilter"
+          >
+            <Badge className={cn('text-xs', PRIORITY_COLORS[filterPriority])}>
+              {PRIORITY_LABELS[filterPriority]}
+            </Badge>
+            <span>×</span>
+          </button>
+        )}
+        {filterStatus !== 'all' && (
+          <button
+            onClick={() => setFilterStatus('all')}
+            className="flex items-center gap-1 text-xs text-primary hover:underline"
+            aria-label="Wis statusfilter"
+          >
+            <Badge className={cn('text-xs', PBI_STATUS_COLORS[filterStatus])}>
+              {PBI_STATUS_LABELS[filterStatus]}
+            </Badge>
+            <span>×</span>
+          </button>
+        )}
+        <Popover>
+          <PopoverTrigger
+            render={
+              <Button variant="outline" size="sm" className="h-7 text-xs">
+                {`Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}`}
+              </Button>
+            }
+          />
+          <PopoverContent align="end" className="w-72 space-y-4">
+            <FilterPills
+              label="Sorteren op"
+              options={SORT_OPTIONS}
+              value={sortMode}
+              onChange={setSortMode}
+            />
+            <FilterPills
+              label="Prioriteit"
+              options={PRIORITY_OPTIONS}
+              value={filterPriority}
+              onChange={setFilterPriority}
+            />
+            <FilterPills
+              label="Status"
+              options={STATUS_OPTIONS}
+              value={filterStatus}
+              onChange={setFilterStatus}
+            />
+            <div className="flex justify-end pt-1 border-t border-border">
               <Button
+                type="button"
+                variant="ghost"
                 size="sm"
                 className="h-7 text-xs"
-                disabled={isDemo}
-                onClick={() => !isDemo && setDialogState({ mode: 'create', productId, defaultPriority: 2 })}
+                disabled={activeFilterCount === 0}
+                onClick={() => {
+                  setFilterPriority('all')
+                  setFilterStatus('all')
+                  setSortMode('priority')
+                }}
               >
-                + PBI
+                Wis filters
               </Button>
-            </DemoTooltip>
-          </>
-        }
-      />
+            </div>
+          </PopoverContent>
+        </Popover>
+        <DemoTooltip show={isDemo}>
+          <Button
+            size="sm"
+            className="h-7 text-xs"
+            disabled={isDemo}
+            onClick={() => !isDemo && setDialogState({ mode: 'create', productId, defaultPriority: 2 })}
+          >
+            + PBI
+          </Button>
+        </DemoTooltip>
+      </div>
 
       <div className="flex-1 overflow-y-auto">
         {pbis.length === 0 ? (