Sort the labels on the settings/labels page

packages/web/pages/settings/labels.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
 import { Button } from '../../components/elements/Button'
 import { styled, theme } from '../../components/tokens/stitches.config'
@@ -162,6 +162,12 @@ export default function LabelsPage(): JSX.Element {
 
   applyStoredTheme(false)
 
+  const sortedLabels = useMemo(() => {
+    return labels.sort((left: Label, right: Label) =>
+      left.name.localeCompare(right.name)
+    )
+  }, [labels])
+
   useEffect(() => {
     const handleResizeWindow = () => setWindowWidth(window.innerWidth)
     if (windowWidth === 0) {
@@ -362,9 +368,9 @@ export default function LabelsPage(): JSX.Element {
             )
           ) : null}
         </>
-        {labels
-          ? labels.map((label, i) => {
-              const isLastChild = i === labels.length - 1
+        {sortedLabels
+          ? sortedLabels.map((label, i) => {
+              const isLastChild = i === sortedLabels.length - 1
               const isFirstChild = i === 0
               const cardProps = {
                 label: label,