From aab332eefce12660c312fcbcd3e2f99d52b68362 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 5 May 2023 12:03:50 +0800
Subject: [PATCH] Sort labels by name

---
 .../components/patterns/LibraryCards/LibraryGridCard.tsx  | 8 +++++---
 .../components/patterns/LibraryCards/LibraryListCard.tsx  | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 5d6de337a..6509c251c 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -178,9 +178,11 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                   minHeight: '35px',
                 }}
               >
-                {props.item.labels?.map(({ name, color }, index) => (
-                  <LabelChip key={index} text={name || ''} color={color} />
-                ))}
+                {props.item.labels
+                  ?.sort((a, b) => a.name.localeCompare(b.name))
+                  .map(({ name, color }, index) => (
+                    <LabelChip key={index} text={name || ''} color={color} />
+                  ))}
               </HStack>
               <VStack
                 css={{
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index abed965d4..b94aa4575 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -118,9 +118,11 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
                   display: 'block',
                 }}
               >
-                {props.item.labels?.map(({ name, color }, index) => (
-                  <LabelChip key={index} text={name || ''} color={color} />
-                ))}
+                {props.item.labels
+                  ?.sort((a, b) => a.name.localeCompare(b.name))
+                  .map(({ name, color }, index) => (
+                    <LabelChip key={index} text={name || ''} color={color} />
+                  ))}
               </HStack>
             </HStack>
           </VStack>