From d61add82cd4385c7174bc67b69b098c9348e2b74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 24 Feb 2026 10:45:00 +0100
Subject: [PATCH] feat: implement sort by hue for named colors using
 pastel-wasm

---
 app/(app)/pastel/names/page.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/(app)/pastel/names/page.tsx b/app/(app)/pastel/names/page.tsx
index 1006621..1465e68 100644
--- a/app/(app)/pastel/names/page.tsx
+++ b/app/(app)/pastel/names/page.tsx
@@ -6,6 +6,7 @@ import { Input } from '@/components/ui/Input';
 import { Select } from '@/components/ui/Select';
 import { useNamedColors } from '@/lib/pastel/api/queries';
 import { Loader2 } from 'lucide-react';
+import { parse_color } from '@valknarthing/pastel-wasm';
 
 export default function NamedColorsPage() {
   const [search, setSearch] = useState('');
@@ -24,9 +25,13 @@ export default function NamedColorsPage() {
 
     if (sortBy === 'name') {
       colors.sort((a, b) => a.name.localeCompare(b.name));
+    } else if (sortBy === 'hue') {
+      colors.sort((a, b) => {
+        const infoA = parse_color(a.hex);
+        const infoB = parse_color(b.hex);
+        return infoA.hsl[0] - infoB.hsl[0];
+      });
     }
-    // For hue sorting, we'd need to convert to HSL which requires the API
-    // For now, just keep alphabetical as default
 
     return colors;
   }, [data, search, sortBy]);