From 7887c2c24f39029285909ea45eb542fe1607d362 Mon Sep 17 00:00:00 2001
From: janpeter visser <janpetervisser2@gmail.com>
Date: Mon, 27 Apr 2026 19:36:25 +0200
Subject: [PATCH] feat: active PB indicator, Maak actief button and new product
 link in settings

---
 app/(app)/products/[id]/page.tsx              |   2 +-
 app/(app)/settings/page.tsx                   | 104 ++++++++++++------
 components/shared/activate-product-button.tsx |  10 +-
 3 files changed, 79 insertions(+), 37 deletions(-)

diff --git a/app/(app)/products/[id]/page.tsx b/app/(app)/products/[id]/page.tsx
index c0bc24e..b6e110b 100644
--- a/app/(app)/products/[id]/page.tsx
+++ b/app/(app)/products/[id]/page.tsx
@@ -69,7 +69,7 @@ export default async function ProductBacklogPage({ params }: Props) {
         </div>
         <div className="flex items-center gap-3">
           {user?.active_product_id !== id && (
-            <ActivateProductButton productId={id} isDemo={isDemo} />
+            <ActivateProductButton productId={id} isDemo={isDemo} redirectTo={`/products/${id}`} />
           )}
           {activeSprint ? (
             <Link href={`/products/${id}/sprint`} className="text-xs text-primary hover:underline font-medium">
diff --git a/app/(app)/settings/page.tsx b/app/(app)/settings/page.tsx
index 70e0466..07b05a8 100644
--- a/app/(app)/settings/page.tsx
+++ b/app/(app)/settings/page.tsx
@@ -5,6 +5,7 @@ import { prisma } from '@/lib/prisma'
 import { RoleManager } from '@/components/settings/role-manager'
 import { LeaveProductButton } from '@/components/settings/leave-product-button'
 import { ProfileEditor } from '@/components/settings/profile-editor'
+import { ActivateProductButton } from '@/components/shared/activate-product-button'
 import Link from 'next/link'
 
 export default async function SettingsPage() {
@@ -13,7 +14,7 @@ export default async function SettingsPage() {
   const [user, userRoles, ownedProducts, memberships] = await Promise.all([
     prisma.user.findUnique({
       where: { id: session.userId },
-      select: { username: true, email: true, bio: true, bio_detail: true, avatar_data: true, updated_at: true },
+      select: { username: true, email: true, bio: true, bio_detail: true, avatar_data: true, updated_at: true, active_product_id: true },
     }),
     prisma.userRole.findMany({ where: { user_id: session.userId } }),
     prisma.product.findMany({
@@ -33,7 +34,9 @@ export default async function SettingsPage() {
     | { kind: 'owner'; id: string; name: string }
     | { kind: 'member'; id: string; name: string; ownerUsername: string }
 
-  const productBacklogs: PbEntry[] = [
+  const activeProductId = user?.active_product_id ?? null
+
+  const allBacklogs: PbEntry[] = [
     ...ownedProducts.map(p => ({ kind: 'owner' as const, id: p.id, name: p.name })),
     ...memberships.map(m => ({
       kind: 'member' as const,
@@ -43,6 +46,12 @@ export default async function SettingsPage() {
     })),
   ]
 
+  // Active product floats to the top
+  const productBacklogs = [
+    ...allBacklogs.filter(pb => pb.id === activeProductId),
+    ...allBacklogs.filter(pb => pb.id !== activeProductId),
+  ]
+
   return (
     <div className="p-6 max-w-2xl mx-auto w-full space-y-6">
       <h1 className="text-xl font-medium text-foreground">Instellingen</h1>
@@ -78,11 +87,21 @@ export default async function SettingsPage() {
       <RoleManager currentRoles={currentRoles} isDemo={session.isDemo ?? false} />
 
       <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
-        <div>
-          <h2 className="text-sm font-medium text-foreground">Product Backlogs</h2>
-          <p className="text-xs text-muted-foreground mt-0.5">
-            Alle product backlogs waarbij je betrokken bent.
-          </p>
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <h2 className="text-sm font-medium text-foreground">Product Backlogs</h2>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              Alle product backlogs waarbij je betrokken bent.
+            </p>
+          </div>
+          {!session.isDemo && (
+            <Link
+              href="/products/new"
+              className="shrink-0 text-xs text-primary hover:underline font-medium"
+            >
+              + Nieuw product
+            </Link>
+          )}
         </div>
         {productBacklogs.length === 0 ? (
           <p className="text-sm text-muted-foreground">
@@ -91,33 +110,52 @@ export default async function SettingsPage() {
           </p>
         ) : (
           <ul className="space-y-2">
-            {productBacklogs.map(pb => (
-              <li key={`${pb.kind}-${pb.id}`} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2.5">
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2">
-                    <Link
-                      href={`/products/${pb.id}`}
-                      className="text-sm font-medium text-foreground hover:text-primary hover:underline truncate"
-                    >
-                      {pb.name}
-                    </Link>
-                    <span className={`shrink-0 text-xs px-1.5 py-0.5 rounded font-medium ${
-                      pb.kind === 'owner'
-                        ? 'bg-primary-container text-primary-container-foreground'
-                        : 'bg-secondary-container text-secondary-container-foreground'
-                    }`}>
-                      {pb.kind === 'owner' ? 'Eigenaar' : 'Developer'}
-                    </span>
+            {productBacklogs.map(pb => {
+              const isActive = pb.id === activeProductId
+              return (
+                <li key={`${pb.kind}-${pb.id}`} className={`flex items-center justify-between gap-3 rounded-lg px-3 py-2.5 ${
+                  isActive ? 'bg-primary-container/30 border border-primary/20' : 'bg-surface-container'
+                }`}>
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Link
+                        href={`/products/${pb.id}`}
+                        className="text-sm font-medium text-foreground hover:text-primary hover:underline truncate"
+                      >
+                        {pb.name}
+                      </Link>
+                      <span className={`shrink-0 text-xs px-1.5 py-0.5 rounded font-medium ${
+                        pb.kind === 'owner'
+                          ? 'bg-primary-container text-primary-container-foreground'
+                          : 'bg-secondary-container text-secondary-container-foreground'
+                      }`}>
+                        {pb.kind === 'owner' ? 'Eigenaar' : 'Developer'}
+                      </span>
+                      {isActive && (
+                        <span className="shrink-0 text-xs px-1.5 py-0.5 rounded font-medium bg-primary text-primary-foreground">
+                          Actief
+                        </span>
+                      )}
+                    </div>
+                    {pb.kind === 'member' && (
+                      <p className="text-xs text-muted-foreground mt-0.5">Eigenaar: {pb.ownerUsername}</p>
+                    )}
                   </div>
-                  {pb.kind === 'member' && (
-                    <p className="text-xs text-muted-foreground mt-0.5">Eigenaar: {pb.ownerUsername}</p>
-                  )}
-                </div>
-                {pb.kind === 'member' && !session.isDemo && (
-                  <LeaveProductButton productId={pb.id} />
-                )}
-              </li>
-            ))}
+                  <div className="flex items-center gap-3 shrink-0">
+                    {!isActive && (
+                      <ActivateProductButton
+                        productId={pb.id}
+                        isDemo={session.isDemo ?? false}
+                        label="Maak actief"
+                      />
+                    )}
+                    {pb.kind === 'member' && !session.isDemo && (
+                      <LeaveProductButton productId={pb.id} />
+                    )}
+                  </div>
+                </li>
+              )
+            })}
           </ul>
         )}
       </div>
diff --git a/components/shared/activate-product-button.tsx b/components/shared/activate-product-button.tsx
index 21c4edf..90cf54b 100644
--- a/components/shared/activate-product-button.tsx
+++ b/components/shared/activate-product-button.tsx
@@ -8,9 +8,12 @@ import { setActiveProductAction } from '@/actions/active-product'
 interface Props {
   productId: string
   isDemo: boolean
+  /** Navigate here after activation. Omit to refresh the current page in place. */
+  redirectTo?: string
+  label?: string
 }
 
-export function ActivateProductButton({ productId, isDemo }: Props) {
+export function ActivateProductButton({ productId, isDemo, redirectTo, label = 'Activeer' }: Props) {
   const router = useRouter()
   const [isPending, startTransition] = useTransition()
 
@@ -19,7 +22,8 @@ export function ActivateProductButton({ productId, isDemo }: Props) {
     startTransition(async () => {
       const result = await setActiveProductAction(productId)
       if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Activeren mislukt')
-      else router.push(`/products/${productId}`)
+      else if (redirectTo) router.push(redirectTo)
+      else router.refresh()
     })
   }
 
@@ -29,7 +33,7 @@ export function ActivateProductButton({ productId, isDemo }: Props) {
       disabled={isPending}
       className="text-xs text-primary hover:underline font-medium disabled:opacity-50"
     >
-      Activeer
+      {label}
     </button>
   )
 }