feat: Render human tags before AI tags (#1740)

2 files changed, 26 insertions, 19 deletions

diff --git a/apps/web/components/dashboard/bookmarks/TagList.tsx b/apps/web/components/dashboard/bookmarks/TagList.tsx
index 593a269b..e8bed9eb 100644
--- a/apps/web/components/dashboard/bookmarks/TagList.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagList.tsx
@@ -24,20 +24,24 @@ export default function TagList({
   }
   return (
     <>
-      {bookmark.tags.map((t) => (
-        <div key={t.id} className={className}>
-          <Link
-            key={t.id}
-            className={cn(
-              badgeVariants({ variant: "secondary" }),
-              "text-nowrap font-light text-gray-700 hover:bg-foreground hover:text-secondary dark:text-gray-400",
-            )}
-            href={`/dashboard/tags/${t.id}`}
-          >
-            {t.name}
-          </Link>
-        </div>
-      ))}
+      {bookmark.tags
+        .sort((a, b) =>
+          a.attachedBy === "ai" ? 1 : b.attachedBy === "ai" ? -1 : 0,
+        )
+        .map((t) => (
+          <div key={t.id} className={className}>
+            <Link
+              key={t.id}
+              className={cn(
+                badgeVariants({ variant: "secondary" }),
+                "text-nowrap font-light text-gray-700 hover:bg-foreground hover:text-secondary dark:text-gray-400",
+              )}
+              href={`/dashboard/tags/${t.id}`}
+            >
+              {t.name}
+            </Link>
+          </div>
+        ))}
     </>
   );
 }
diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index 5efdd0dd..1893c2a6 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -96,11 +96,14 @@ export function TagsEditor({
           attachedBy: "human" as const,
         })) ?? []
       }
-      value={optimisticTags.map((t) => ({
-        label: t.name,
-        value: t.id,
-        attachedBy: t.attachedBy,
-      }))}
+      value={optimisticTags
+        .slice()
+        .sort((a) => (a.attachedBy === "human" ? -1 : 1))
+        .map((t) => ({
+          label: t.name,
+          value: t.id,
+          attachedBy: t.attachedBy,
+        }))}
       isMulti
       closeMenuOnSelect={false}
       isClearable={false}