From 0a58e3270bdc2088e5a0742f8e16a481f75dd748 Mon Sep 17 00:00:00 2001
From: Maurice <61554723+mauriceboe@users.noreply.github.com>
Date: Sat, 13 Jun 2026 00:52:49 +0200
Subject: [PATCH] fix(packing): add more bag colors so sub-bags stop repeating
 (#1156)

The auto-assigned bag palette only had 8 colors, so the 9th bag reused the first one. Double it to 16 (keeping the existing 8 and their order) and keep the server and client lists in sync - both cycle BAG_COLORS[count % length].
---
 client/src/components/Packing/packingListPanel.constants.ts | 2 +-
 server/src/services/packingService.ts                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Packing/packingListPanel.constants.ts b/client/src/components/Packing/packingListPanel.constants.ts
index 612f4b36..e20a44f3 100644
--- a/client/src/components/Packing/packingListPanel.constants.ts
+++ b/client/src/components/Packing/packingListPanel.constants.ts
@@ -45,7 +45,7 @@ export const KAT_COLORS = [
   '#14b8a6', // teal
 ]
 
-export const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b']
+export const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b', '#3b82f6', '#84cc16', '#d946ef', '#14b8a6', '#f43f5e', '#a855f7', '#eab308', '#64748b']
 
 // A category's first item is seeded with this sentinel because the server
 // rejects empty names. Treat it as a placeholder in the UI.
diff --git a/server/src/services/packingService.ts b/server/src/services/packingService.ts
index 4fb749c9..bc4b38c5 100644
--- a/server/src/services/packingService.ts
+++ b/server/src/services/packingService.ts
@@ -1,7 +1,7 @@
 import { db } from '../db/database';
 import { avatarUrl } from './authService';
 
-const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b'];
+const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b', '#3b82f6', '#84cc16', '#d946ef', '#14b8a6', '#f43f5e', '#a855f7', '#eab308', '#64748b'];
 
 export { verifyTripAccess } from './tripAccess';